diff --git a/angular.json b/angular.json
index d9535f656cd2..815c38a3f705 100644
--- a/angular.json
+++ b/angular.json
@@ -20,37 +20,40 @@
         "build": {
           "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "allowedCommonJsDependencies": [
-              "clone-deep",
-              "crypto-js",
-              "crypto",
-              "dagre",
-              "dayjs/locale/de",
-              "dompurify",
-              "export-to-csv",
-              "hoist-non-react-statics",
-              "interactjs",
-              "is-mobile",
-              "js-video-url-parser",
-              "jszip",
-              "localforage",
-              "mobile-drag-drop",
-              "papaparse",
-              "pepjs",
-              "prop-types",
-              "react",
-              "react-dom",
-              "react-dom/client",
-              "react-is",
-              "rfdc",
-              "shallowequal",
-              "markdown-it-class",
-              "smoothscroll-polyfill",
-              "sockjs-client",
-              "use-sync-external-store/shim",
-              "use-sync-external-store/shim/with-selector",
-              "webcola",
-              "webstomp-client"
+              "allowedCommonJsDependencies": [
+                  "@vscode/markdown-it-katex",
+                  "clone-deep",
+                  "crypto-js",
+                  "crypto",
+                  "dagre",
+                  "dayjs/locale/de",
+                  "dompurify",
+                  "emoji-js",
+                  "export-to-csv",
+                  "hoist-non-react-statics",
+                  "interactjs",
+                  "is-mobile",
+                  "js-video-url-parser",
+                  "jszip",
+                  "localforage",
+                  "markdown-it-highlightjs",
+                  "mobile-drag-drop",
+                  "papaparse",
+                  "pepjs",
+                  "prop-types",
+                  "react",
+                  "react-dom",
+                  "react-dom/client",
+                  "react-is",
+                  "rfdc",
+                  "shallowequal",
+                  "markdown-it-class",
+                  "smoothscroll-polyfill",
+                  "sockjs-client",
+                  "use-sync-external-store/shim",
+                  "use-sync-external-store/shim/with-selector",
+                  "webcola",
+                  "webstomp-client"
             ],
             "outputPath": {
                 "base": "build/resources/main/static/",
diff --git a/jest.config.js b/jest.config.js
index f19a6c392563..79e40bdb3162 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -102,10 +102,10 @@ module.exports = {
     coverageThreshold: {
         global: {
             // TODO: in the future, the following values should increase to at least 90%
-            statements: 87.53,
+            statements: 87.52,
             branches: 73.62,
-            functions: 82.13,
-            lines: 87.58,
+            functions: 82.12,
+            lines: 87.57,
         },
     },
     coverageReporters: ['clover', 'json', 'lcov', 'text-summary'],
diff --git a/package-lock.json b/package-lock.json
index 74e3625253d0..5f2c0c279049 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -46,6 +46,7 @@
                 "dayjs": "1.11.13",
                 "diff-match-patch-typescript": "1.1.0",
                 "dompurify": "3.1.7",
+                "emoji-js": "3.8.0",
                 "export-to-csv": "1.4.0",
                 "fast-json-patch": "3.1.1",
                 "franc-min": "6.2.0",
@@ -93,6 +94,7 @@
                 "@types/crypto-js": "4.2.2",
                 "@types/d3-shape": "3.1.6",
                 "@types/dompurify": "3.0.5",
+                "@types/emoji-js": "3.5.2",
                 "@types/jest": "29.5.14",
                 "@types/lodash-es": "4.17.12",
                 "@types/markdown-it": "14.1.2",
@@ -7194,6 +7196,12 @@
                 "@types/trusted-types": "*"
             }
         },
+        "node_modules/@types/emoji-js": {
+            "version": "3.5.2",
+            "resolved": "https://registry.npmjs.org/@types/emoji-js/-/emoji-js-3.5.2.tgz",
+            "integrity": "sha512-qPR85yjSPk2UEbdjYYNHfcOjVod7DCARSrJlPcL+cwaDFwdnmOFhPyYUvP5GaW0YZEy8mU93ZjTNgsVWz1zzlg==",
+            "dev": true
+        },
         "node_modules/@types/estree": {
             "version": "1.0.6",
             "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
@@ -10935,6 +10943,19 @@
                 "url": "https://github.com/sindresorhus/emittery?sponsor=1"
             }
         },
+        "node_modules/emoji-datasource": {
+            "version": "15.0.1",
+            "resolved": "https://registry.npmjs.org/emoji-datasource/-/emoji-datasource-15.0.1.tgz",
+            "integrity": "sha512-aF5Q6LCKXzJzpG4K0ETiItuzz0xLYxNexR9qWw45/shuuEDWZkOIbeGHA23uopOSYA/LmeZIXIFsySCx+YKg2g=="
+        },
+        "node_modules/emoji-js": {
+            "version": "3.8.0",
+            "resolved": "https://registry.npmjs.org/emoji-js/-/emoji-js-3.8.0.tgz",
+            "integrity": "sha512-A5FNHKlRPRo6RJWrrdGWnoolIBMkVXHy4qkO0V5ahekQPjfVECxvOOWADeAF/SbzRVA9Sxdj24FCoRYGt06skA==",
+            "dependencies": {
+                "emoji-datasource": "15.0.1"
+            }
+        },
         "node_modules/emoji-regex": {
             "version": "10.4.0",
             "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.4.0.tgz",
diff --git a/package.json b/package.json
index 04ad311c7f9a..ffeb9a9418be 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
         "dayjs": "1.11.13",
         "diff-match-patch-typescript": "1.1.0",
         "dompurify": "3.1.7",
+        "emoji-js": "3.8.0",
         "export-to-csv": "1.4.0",
         "fast-json-patch": "3.1.1",
         "franc-min": "6.2.0",
@@ -130,6 +131,7 @@
         "@types/crypto-js": "4.2.2",
         "@types/d3-shape": "3.1.6",
         "@types/dompurify": "3.0.5",
+        "@types/emoji-js": "3.5.2",
         "@types/jest": "29.5.14",
         "@types/lodash-es": "4.17.12",
         "@types/markdown-it": "14.1.2",
diff --git a/src/main/webapp/app/admin/admin.route.ts b/src/main/webapp/app/admin/admin.route.ts
index 0c2099494d4a..81c3a096f66f 100644
--- a/src/main/webapp/app/admin/admin.route.ts
+++ b/src/main/webapp/app/admin/admin.route.ts
@@ -20,6 +20,7 @@ import { BuildAgentSummaryComponent } from 'app/localci/build-agents/build-agent
 import { StandardizedCompetencyManagementComponent } from 'app/admin/standardized-competencies/standardized-competency-management.component';
 import { BuildAgentDetailsComponent } from 'app/localci/build-agents/build-agent-details/build-agent-details/build-agent-details.component';
 import { AdminImportStandardizedCompetenciesComponent } from 'app/admin/standardized-competencies/import/admin-import-standardized-competencies.component';
+import { PendingChangesGuard } from 'app/shared/guard/pending-changes.guard';
 
 export const adminState: Routes = [
     {
@@ -116,6 +117,7 @@ export const adminState: Routes = [
                 data: {
                     pageTitle: 'artemisApp.standardizedCompetency.title',
                 },
+                canDeactivate: [PendingChangesGuard],
             },
             {
                 // Create a new path without a component defined to prevent the StandardizedCompetencyManagementComponent from being always rendered
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 fb73da984d1b..d23fe7213f6d 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 { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { faChevronRight, faDownLeftAndUpRightToCenter, faEye, faFileExport, faFileImport, faPlus, faUpRightAndDownLeftFromCenter } from '@fortawesome/free-solid-svg-icons';
 import {
     KnowledgeAreaDTO,
@@ -576,14 +576,4 @@ export class StandardizedCompetencyManagementComponent extends StandardizedCompe
     get canDeactivateWarning(): string {
         return this.translateService.instant('pendingChanges');
     }
-
-    /**
-     * Displays the alert for confirming refreshing or closing the page if there are unsaved changes
-     */
-    @HostListener('window:beforeunload', ['$event'])
-    unloadNotification(event: any) {
-        if (!this.canDeactivate()) {
-            event.returnValue = this.canDeactivateWarning;
-        }
-    }
 }
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 9501484fe9b5..19d3d33b6124 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, ViewChild } from '@angular/core';
+import { Component, 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';
@@ -249,14 +249,4 @@ export class GenerateCompetenciesComponent implements OnInit, ComponentCanDeacti
     get canDeactivateWarning(): string {
         return this.translateService.instant('pendingChanges');
     }
-
-    /**
-     * Only allow to refresh the page if no pending changes exist
-     */
-    @HostListener('window:beforeunload', ['$event'])
-    unloadNotification(event: any) {
-        if (!this.canDeactivate()) {
-            event.returnValue = this.canDeactivateWarning;
-        }
-    }
 }
diff --git a/src/main/webapp/app/course/competencies/import-standardized-competencies/course-import-standardized-course-competencies.component.ts b/src/main/webapp/app/course/competencies/import-standardized-competencies/course-import-standardized-course-competencies.component.ts
index 1c369bea4657..63b74465efe7 100644
--- a/src/main/webapp/app/course/competencies/import-standardized-competencies/course-import-standardized-course-competencies.component.ts
+++ b/src/main/webapp/app/course/competencies/import-standardized-competencies/course-import-standardized-course-competencies.component.ts
@@ -10,7 +10,7 @@ import {
 } from 'app/entities/competency/standardized-competency.model';
 import { faBan, faDownLeftAndUpRightToCenter, faFileImport, faSort, faTrash, faUpRightAndDownLeftFromCenter } from '@fortawesome/free-solid-svg-icons';
 import { ActivatedRoute, Router } from '@angular/router';
-import { Component, HostListener, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { onError } from 'app/shared/util/global.utils';
 import { forkJoin, map } from 'rxjs';
 import { HttpErrorResponse } from '@angular/common/http';
@@ -168,16 +168,6 @@ export abstract class CourseImportStandardizedCourseCompetenciesComponent extend
         return this.translateService.instant('pendingChanges');
     }
 
-    /**
-     * Displays the alert for confirming refreshing or closing the page if there are unsaved changes
-     */
-    @HostListener('window:beforeunload', ['$event'])
-    unloadNotification(event: any) {
-        if (!this.canDeactivate()) {
-            event.returnValue = this.canDeactivateWarning;
-        }
-    }
-
     private convertToKnowledgeAreaForImport(knowledgeAreaDTO: KnowledgeAreaDTO, isVisible = true, level = 0, selected = false): KnowledgeAreaForImport {
         const children = knowledgeAreaDTO.children?.map((child) => this.convertToKnowledgeAreaForImport(child, isVisible, level + 1));
         const competencies = knowledgeAreaDTO.competencies?.map((competency) =>
diff --git a/src/main/webapp/app/course/competencies/import/import-course-competencies.component.ts b/src/main/webapp/app/course/competencies/import/import-course-competencies.component.ts
index 7cb8bbb30cf1..0190d71b8b5e 100644
--- a/src/main/webapp/app/course/competencies/import/import-course-competencies.component.ts
+++ b/src/main/webapp/app/course/competencies/import/import-course-competencies.component.ts
@@ -4,7 +4,7 @@ import { CourseCompetency, CourseCompetencyType } from 'app/entities/competency.
 import { AlertService } from 'app/core/util/alert.service';
 import { SortService } from 'app/shared/service/sort.service';
 import { onError } from 'app/shared/util/global.utils';
-import { Component, HostListener, OnInit, inject } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { faBan, faFileImport, faSave, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { ButtonType } from 'app/shared/components/button.component';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -204,14 +204,4 @@ export abstract class ImportCourseCompetenciesComponent implements OnInit, Compo
     get canDeactivateWarning(): string {
         return this.translateService.instant('pendingChanges');
     }
-
-    /**
-     * Displays the alert for confirming refreshing or closing the page if there are unsaved changes
-     */
-    @HostListener('window:beforeunload', ['$event'])
-    unloadNotification(event: any) {
-        if (!this.canDeactivate()) {
-            event.returnValue = this.canDeactivateWarning;
-        }
-    }
 }
diff --git a/src/main/webapp/app/exam/participate/exam-participation.component.ts b/src/main/webapp/app/exam/participate/exam-participation.component.ts
index a26170db25ca..7871ce88d681 100644
--- a/src/main/webapp/app/exam/participate/exam-participation.component.ts
+++ b/src/main/webapp/app/exam/participate/exam-participation.component.ts
@@ -1,4 +1,4 @@
-import { Component, HostListener, OnDestroy, OnInit, QueryList, ViewChildren } from '@angular/core';
+import { Component, OnDestroy, OnInit, QueryList, ViewChildren } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { JhiWebsocketService } from 'app/core/websocket/websocket.service';
 import { ExamParticipationService } from 'app/exam/participate/exam-participation.service';
@@ -246,14 +246,6 @@ export class ExamParticipationComponent implements OnInit, OnDestroy, ComponentC
         return this.translateService.instant('artemisApp.examParticipation.pendingChanges');
     }
 
-    // displays the alert for confirming leaving the page if there are unsaved changes
-    @HostListener('window:beforeunload', ['$event'])
-    unloadNotification(event: any): void {
-        if (!this.canDeactivate()) {
-            event.returnValue = this.canDeactivateWarning;
-        }
-    }
-
     get activePageIndex(): number {
         if (!this.activeExamPage || this.activeExamPage.isOverviewPage) {
             return -1;
diff --git a/src/main/webapp/app/exercises/modeling/participate/modeling-submission.component.ts b/src/main/webapp/app/exercises/modeling/participate/modeling-submission.component.ts
index e4684d85321b..e9c54a294c31 100644
--- a/src/main/webapp/app/exercises/modeling/participate/modeling-submission.component.ts
+++ b/src/main/webapp/app/exercises/modeling/participate/modeling-submission.component.ts
@@ -1,5 +1,5 @@
 import { HttpErrorResponse } from '@angular/common/http';
-import { Component, HostListener, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Patch, Selection, UMLDiagramType, UMLElementType, UMLModel, UMLRelationshipType } from '@ls1intum/apollon';
 import { TranslateService } from '@ngx-translate/core';
@@ -642,14 +642,6 @@ export class ModelingSubmissionComponent implements OnInit, OnDestroy, Component
         return false;
     }
 
-    // displays the alert for confirming leaving the page if there are unsaved changes
-    @HostListener('window:beforeunload', ['$event'])
-    unloadNotification(event: any): void {
-        if (!this.canDeactivate()) {
-            event.returnValue = this.translateService.instant('pendingChanges');
-        }
-    }
-
     /**
      * counts the number of model elements
      * is used in the submit() function
diff --git a/src/main/webapp/app/exercises/programming/shared/code-editor/container/code-editor-container.component.ts b/src/main/webapp/app/exercises/programming/shared/code-editor/container/code-editor-container.component.ts
index f8e9607545db..b2b81406b23a 100644
--- a/src/main/webapp/app/exercises/programming/shared/code-editor/container/code-editor-container.component.ts
+++ b/src/main/webapp/app/exercises/programming/shared/code-editor/container/code-editor-container.component.ts
@@ -1,8 +1,7 @@
-import { Component, EventEmitter, HostListener, Input, OnChanges, Output, SimpleChanges, ViewChild } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewChild } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { isEmpty as _isEmpty, fromPairs, toPairs, uniq } from 'lodash-es';
 import { CodeEditorFileService } from 'app/exercises/programming/shared/code-editor/service/code-editor-file.service';
-import { ComponentCanDeactivate } from 'app/shared/guard/can-deactivate.model';
 import { CodeEditorGridComponent } from 'app/exercises/programming/shared/code-editor/layout/code-editor-grid.component';
 import {
     CommitState,
@@ -37,7 +36,7 @@ export enum CollapsableCodeEditorElement {
     templateUrl: './code-editor-container.component.html',
     styleUrls: ['./code-editor-container.component.scss'],
 })
-export class CodeEditorContainerComponent implements OnChanges, ComponentCanDeactivate {
+export class CodeEditorContainerComponent implements OnChanges {
     readonly CommitState = CommitState;
     readonly EditorState = EditorState;
     readonly CollapsableCodeEditorElement = CollapsableCodeEditorElement;
@@ -262,13 +261,6 @@ export class CodeEditorContainerComponent implements OnChanges, ComponentCanDeac
         this.alertService.error(`artemisApp.editor.errors.${errorTranslationKey}`, translationParams);
     }
 
-    /**
-     * The user will be warned if there are unsaved changes when trying to leave the code-editor.
-     */
-    canDeactivate() {
-        return _isEmpty(this.unsavedFiles);
-    }
-
     getText(): string {
         return this.monacoEditor.getText() ?? '';
     }
@@ -286,14 +278,6 @@ export class CodeEditorContainerComponent implements OnChanges, ComponentCanDeac
         this.monacoEditor.highlightLines(startLine, endLine);
     }
 
-    // displays the alert for confirming refreshing or closing the page if there are unsaved changes
-    @HostListener('window:beforeunload', ['$event'])
-    unloadNotification(event: any) {
-        if (!this.canDeactivate()) {
-            event.returnValue = this.translateService.instant('pendingChanges');
-        }
-    }
-
     onToggleCollapse(event: InteractableEvent, collapsableElement: CollapsableCodeEditorElement) {
         this.grid.toggleCollapse(event, collapsableElement);
     }
diff --git a/src/main/webapp/app/exercises/quiz/manage/quiz-exercise-update.component.ts b/src/main/webapp/app/exercises/quiz/manage/quiz-exercise-update.component.ts
index b6fda2b6e1ee..f212b3469e6c 100644
--- a/src/main/webapp/app/exercises/quiz/manage/quiz-exercise-update.component.ts
+++ b/src/main/webapp/app/exercises/quiz/manage/quiz-exercise-update.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, OnChanges, OnInit, SimpleChanges, ViewChild, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnChanges, OnInit, SimpleChanges, ViewChild, ViewEncapsulation } from '@angular/core';
 import { QuizExerciseService } from './quiz-exercise.service';
 import { ActivatedRoute, Router } from '@angular/router';
 import { HttpErrorResponse, HttpResponse } from '@angular/common/http';
@@ -355,16 +355,6 @@ export class QuizExerciseUpdateComponent extends QuizExerciseValidationDirective
         return !this.pendingChangesCache;
     }
 
-    /**
-     * Displays the alert for confirming refreshing or closing the page if there are unsaved changes
-     */
-    @HostListener('window:beforeunload', ['$event'])
-    unloadNotification(event: any) {
-        if (!this.canDeactivate()) {
-            event.returnValue = this.translateService.instant('pendingChanges');
-        }
-    }
-
     /**
      * @desc Callback for datepicker to decide whether given date should be disabled
      * All dates which are in the past (< today) are disabled
diff --git a/src/main/webapp/app/exercises/text/participate/text-editor.component.ts b/src/main/webapp/app/exercises/text/participate/text-editor.component.ts
index ca6401b6f59a..e270ad1d191a 100644
--- a/src/main/webapp/app/exercises/text/participate/text-editor.component.ts
+++ b/src/main/webapp/app/exercises/text/participate/text-editor.component.ts
@@ -1,4 +1,4 @@
-import { Component, HostListener, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { ActivatedRoute } from '@angular/router';
 import { HttpErrorResponse } from '@angular/common/http';
@@ -248,14 +248,6 @@ export class TextEditorComponent implements OnInit, OnDestroy, ComponentCanDeact
         return this.stringCountService.countCharacters(this.answer);
     }
 
-    // Displays the alert for confirming refreshing or closing the page if there are unsaved changes
-    @HostListener('window:beforeunload', ['$event'])
-    unloadNotification(event: any) {
-        if (!this.canDeactivate()) {
-            event.returnValue = this.translateService.instant('pendingChanges');
-        }
-    }
-
     canDeactivate(): boolean {
         if (!this.submission) {
             return true;
diff --git a/src/main/webapp/app/exercises/text/participate/text-editor.route.ts b/src/main/webapp/app/exercises/text/participate/text-editor.route.ts
index 1fa9cff2a527..8ed5f35e65d6 100644
--- a/src/main/webapp/app/exercises/text/participate/text-editor.route.ts
+++ b/src/main/webapp/app/exercises/text/participate/text-editor.route.ts
@@ -2,6 +2,7 @@ import { Routes } from '@angular/router';
 import { UserRouteAccessService } from 'app/core/auth/user-route-access-service';
 import { TextEditorComponent } from './text-editor.component';
 import { Authority } from 'app/shared/constants/authority.constants';
+import { PendingChangesGuard } from 'app/shared/guard/pending-changes.guard';
 
 export const textEditorRoute: Routes = [
     {
@@ -12,5 +13,6 @@ export const textEditorRoute: Routes = [
             pageTitle: 'artemisApp.textExercise.home.title',
         },
         canActivate: [UserRouteAccessService],
+        canDeactivate: [PendingChangesGuard],
     },
 ];
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 9b9c54d262fb..d1d011e3e1f8 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
@@ -229,7 +229,7 @@
 </div>
 
 <ng-template #simpleActionButton let-action="action">
-    <button type="button" class="btn btn-sm py-0" [ngbTooltip]="action.icon ? (action.translationKey | artemisTranslate) : undefined" (click)="action.executeInCurrentEditor()">
+    <button type="button" class="btn btn-sm py-0" [ngbTooltip]="action.icon ? (action.translationKey | artemisTranslate) : undefined" (click)="handleActionClick($event, action)">
         @if (action.icon) {
             <fa-icon [icon]="action.icon" />
         } @else {
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 5031fdd7e5b1..cb69c0ca2165 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
@@ -50,6 +50,7 @@ import { parseMarkdownForDomainActions } from 'app/shared/markdown-editor/monaco
 import { COMMUNICATION_MARKDOWN_EDITOR_OPTIONS, DEFAULT_MARKDOWN_EDITOR_OPTIONS } from 'app/shared/monaco-editor/monaco-editor-option.helper';
 import { MetisService } from 'app/shared/metis/metis.service';
 import { UPLOAD_MARKDOWN_FILE_EXTENSIONS } from 'app/shared/constants/file-extensions.constants';
+import { EmojiAction } from 'app/shared/monaco-editor/model/actions/emoji.action';
 
 export enum MarkdownEditorHeight {
     INLINE = 125,
@@ -290,6 +291,16 @@ export class MarkdownEditorMonacoComponent implements AfterContentInit, AfterVie
         return action?.hideInEditor ? undefined : action;
     }
 
+    handleActionClick(event: MouseEvent, action: TextEditorAction): void {
+        const x = event.clientX;
+        const y = event.clientY;
+        if (action instanceof EmojiAction) {
+            action.setPoint({ x, y });
+        }
+
+        action.executeInCurrentEditor();
+    }
+
     ngAfterViewInit(): void {
         this.adjustEditorDimensions();
         this.monacoEditor.setWordWrap(true);
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 04be10a79f18..817057f83183 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
@@ -12,8 +12,10 @@ import {
     ViewEncapsulation,
     computed,
     forwardRef,
+    inject,
     input,
 } from '@angular/core';
+import { ViewContainerRef } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { MetisService } from 'app/shared/metis/metis.service';
 import { LectureService } from 'app/lecture/lecture.service';
@@ -35,6 +37,8 @@ import { LectureAttachmentReferenceAction } from 'app/shared/monaco-editor/model
 import { UrlAction } from 'app/shared/monaco-editor/model/actions/url.action';
 import { AttachmentAction } from 'app/shared/monaco-editor/model/actions/attachment.action';
 import { ConversationDTO } from 'app/entities/metis/conversation/conversation.model';
+import { EmojiAction } from 'app/shared/monaco-editor/model/actions/emoji.action';
+import { Overlay, OverlayPositionBuilder } from '@angular/cdk/overlay';
 
 @Component({
     selector: 'jhi-posting-markdown-editor',
@@ -69,6 +73,7 @@ export class PostingMarkdownEditorComponent implements OnInit, ControlValueAcces
     fallbackConversationId = computed<number | undefined>(() => this.activeConversation()?.id);
 
     protected readonly MarkdownEditorHeight = MarkdownEditorHeight;
+    private overlay = inject(Overlay);
 
     constructor(
         private cdref: ChangeDetectorRef,
@@ -76,6 +81,8 @@ export class PostingMarkdownEditorComponent implements OnInit, ControlValueAcces
         private courseManagementService: CourseManagementService,
         private lectureService: LectureService,
         private channelService: ChannelService,
+        public viewContainerRef: ViewContainerRef,
+        private positionBuilder: OverlayPositionBuilder,
     ) {}
 
     /**
@@ -90,6 +97,7 @@ export class PostingMarkdownEditorComponent implements OnInit, ControlValueAcces
             new BoldAction(),
             new ItalicAction(),
             new UnderlineAction(),
+            new EmojiAction(this.viewContainerRef, this.overlay, this.positionBuilder),
             new QuoteAction(),
             new CodeAction(),
             new CodeBlockAction(),
diff --git a/src/main/webapp/app/shared/monaco-editor/model/actions/emoji.action.ts b/src/main/webapp/app/shared/monaco-editor/model/actions/emoji.action.ts
new file mode 100644
index 000000000000..20aa6d30da1b
--- /dev/null
+++ b/src/main/webapp/app/shared/monaco-editor/model/actions/emoji.action.ts
@@ -0,0 +1,121 @@
+import { TextEditorAction } from 'app/shared/monaco-editor/model/actions/text-editor-action.model';
+import { faSmile } from '@fortawesome/free-solid-svg-icons';
+import { TextEditor } from 'app/shared/monaco-editor/model/actions/adapter/text-editor.interface';
+import { ViewContainerRef } from '@angular/core';
+import { EmojiPickerComponent } from 'app/shared/metis/emoji/emoji-picker.component';
+import { Overlay, OverlayPositionBuilder, OverlayRef } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { TextEditorPosition } from 'app/shared/monaco-editor/model/actions/adapter/text-editor-position.model';
+import { TextEditorRange } from 'app/shared/monaco-editor/model/actions/adapter/text-editor-range.model';
+
+/**
+ * Action to open the emoji picker and insert the selected emoji into the editor.
+ */
+export class EmojiAction extends TextEditorAction {
+    static readonly ID = 'emoji.action';
+    private overlayRef: OverlayRef | null = null;
+    private position?: { x: number; y: number };
+
+    constructor(
+        private viewContainerRef: ViewContainerRef,
+        private overlay: Overlay,
+        private positionBuilder: OverlayPositionBuilder,
+    ) {
+        super(EmojiAction.ID, 'artemisApp.multipleChoiceQuestion.editor.emoji', faSmile, undefined);
+    }
+
+    /**
+     * Sets the position where the emoji picker should appear.
+     * @param param The {x, y} coordinates.
+     */
+    setPoint(param: { x: number; y: number }): void {
+        this.position = { x: param.x, y: param.y };
+    }
+
+    /**
+     * Triggers the opening of the emoji picker and attaches it to the view container.
+     * @param editor The editor in which to insert the emoji.
+     */
+    run(editor: TextEditor): void {
+        if (this.overlayRef) {
+            this.destroyEmojiPicker();
+            return;
+        }
+
+        if (this.position) {
+            this.createEmojiPicker(editor, this.position);
+        }
+    }
+
+    /**
+     * Creates and attaches the emoji picker component dynamically and handles emoji selection.
+     * @param editor The editor instance where the emoji will be inserted.
+     * @param position The {x, y} coordinates where the picker should appear.
+     */
+    private createEmojiPicker(editor: TextEditor, position: { x: number; y: number }): void {
+        const positionStrategy = this.positionBuilder
+            .global()
+            .left(`${position.x - 15}px`)
+            .top(`${position.y - 15}px`);
+
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            width: '0',
+        });
+
+        const emojiPickerPortal = new ComponentPortal(EmojiPickerComponent, this.viewContainerRef);
+        const componentRef = this.overlayRef.attach(emojiPickerPortal);
+        const pickerElement = componentRef.location.nativeElement;
+        pickerElement.style.transform = 'translate(-100%, -100%)';
+
+        componentRef.instance.emojiSelect.subscribe((selection: { emoji: any; event: PointerEvent }) => {
+            this.insertEmojiAtCursor(editor, selection.emoji.native);
+            this.destroyEmojiPicker();
+        });
+
+        this.overlayRef.backdropClick().subscribe(() => {
+            this.destroyEmojiPicker();
+        });
+    }
+
+    /**
+     * Inserts the selected emoji into the editor at the current cursor position.
+     * @param editor The editor instance.
+     * @param emoji The emoji to insert.
+     */
+    insertEmojiAtCursor(editor: TextEditor, emoji: string): void {
+        const position = editor.getPosition();
+        if (!position) {
+            return;
+        }
+
+        this.insertTextAtPosition(editor, position, emoji);
+
+        const newPosition = new TextEditorPosition(position.getLineNumber(), position.getColumn() + 2);
+        editor.setPosition(newPosition);
+        editor.focus();
+    }
+
+    /**
+     * Inserts the given emoji text at the current cursor position.
+     * @param editor The editor instance.
+     * @param position The current cursor position.
+     * @param emoji The emoji text to insert.
+     */
+    insertTextAtPosition(editor: TextEditor, position: TextEditorPosition, emoji: string): void {
+        this.replaceTextAtRange(editor, new TextEditorRange(position, position), emoji);
+    }
+
+    /**
+     * Destroys the emoji picker component after an emoji is selected or toggled.
+     */
+    private destroyEmojiPicker(): void {
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
+    }
+}
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 1237451e15bb..32889aef0f45 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
@@ -13,6 +13,8 @@ import { MonacoTextEditorAdapter } from 'app/shared/monaco-editor/model/actions/
 import { MonacoEditorService } from 'app/shared/monaco-editor/monaco-editor.service';
 import { getOS } from 'app/shared/util/os-detector.util';
 
+import { EmojiConvertor } from 'emoji-js';
+
 export const MAX_TAB_SIZE = 8;
 
 @Component({
@@ -34,6 +36,7 @@ export class MonacoEditorComponent implements OnInit, OnDestroy {
     private readonly _editor: monaco.editor.IStandaloneCodeEditor;
     private readonly textEditorAdapter: MonacoTextEditorAdapter;
     private readonly monacoEditorContainerElement: HTMLElement;
+    private readonly emojiConvertor = new EmojiConvertor();
 
     /*
      * Elements, models, and actions of the editor.
@@ -86,6 +89,9 @@ export class MonacoEditorComponent implements OnInit, OnDestroy {
         this.textEditorAdapter = new MonacoTextEditorAdapter(this._editor);
         this.renderer.appendChild(this.elementRef.nativeElement, this.monacoEditorContainerElement);
 
+        this.emojiConvertor.replace_mode = 'unified';
+        this.emojiConvertor.allow_native = true;
+
         effect(() => {
             // TODO: The CSS class below allows the editor to shrink in the CodeEditorContainerComponent. We should eventually remove this class and handle the editor size differently in the code editor grid.
             if (this.shrinkToFit()) {
@@ -103,6 +109,10 @@ export class MonacoEditorComponent implements OnInit, OnDestroy {
         });
     }
 
+    convertTextToEmoji(text: string): string {
+        return this.emojiConvertor.replace_emoticons(text);
+    }
+
     ngOnInit(): void {
         const resizeObserver = new ResizeObserver(() => {
             this._editor.layout();
@@ -173,9 +183,18 @@ export class MonacoEditorComponent implements OnInit, OnDestroy {
         return this._editor.getContentHeight() + this._editor.getOption(monaco.editor.EditorOption.lineHeight);
     }
 
+    isConvertedToEmoji(originalText: string, convertedText: string): boolean {
+        return originalText !== convertedText;
+    }
+
     setText(text: string): void {
-        if (this.getText() !== text) {
-            this._editor.setValue(text);
+        const convertedText = this.convertTextToEmoji(text);
+        if (this.isConvertedToEmoji(text, convertedText)) {
+            this._editor.setValue(convertedText);
+            this.setPosition({ column: this.getPosition().column + 2 + text.length, lineNumber: this.getPosition().lineNumber });
+        }
+        if (this.getText() !== convertedText) {
+            this._editor.setValue(convertedText);
         }
     }
 
diff --git a/src/main/webapp/i18n/de/multipleChoiceQuestion.json b/src/main/webapp/i18n/de/multipleChoiceQuestion.json
index 35c48898f228..9ca9f252b067 100644
--- a/src/main/webapp/i18n/de/multipleChoiceQuestion.json
+++ b/src/main/webapp/i18n/de/multipleChoiceQuestion.json
@@ -45,7 +45,8 @@
                 "style": "Überschriften",
                 "codeBlock": "Code Block",
                 "code": "Code",
-                "color": "Farbe"
+                "color": "Farbe",
+                "emoji": "Emoji"
             },
             "visualEditor": {
                 "hintTooltip": "Füge hier einen Hinweis hinzu (sichtbar während des Quiz über den ?-Button)",
diff --git a/src/main/webapp/i18n/en/multipleChoiceQuestion.json b/src/main/webapp/i18n/en/multipleChoiceQuestion.json
index f342c31a56bc..c39e3d24fc22 100644
--- a/src/main/webapp/i18n/en/multipleChoiceQuestion.json
+++ b/src/main/webapp/i18n/en/multipleChoiceQuestion.json
@@ -45,7 +45,8 @@
                 "codeBlock": "Code Block",
                 "code": "Code",
                 "color": "Color",
-                "style": "Style"
+                "style": "Style",
+                "emoji": "Emoji"
             },
             "visualEditor": {
                 "hintTooltip": "Add a hint here (visible during the quiz via ?-Button)",
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 6888c6d994ea..94e72e39d3de 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
@@ -259,11 +259,10 @@ describe('GenerateCompetenciesComponent', () => {
         expect(warnMock).toHaveBeenCalled();
     });
 
-    it('should send a warning when trying to reload', () => {
+    it('should not deactivate when loading', () => {
         generateCompetenciesComponent.isLoading = true;
-        const event = { returnValue: undefined };
-        generateCompetenciesComponent.unloadNotification(event);
-        expect(event.returnValue).toBe(generateCompetenciesComponent.canDeactivateWarning);
+        const canDeactivate = generateCompetenciesComponent.canDeactivate();
+        expect(canDeactivate).toBeFalse();
     });
 
     function createCompetencyFormGroup(title?: string, description?: string, taxonomy?: CompetencyTaxonomy, viewed = false): FormGroup<CompetencyFormControlsWithViewed> {
diff --git a/src/test/javascript/spec/component/competencies/import/import-course-competencies.component.spec.ts b/src/test/javascript/spec/component/competencies/import/import-course-competencies.component.spec.ts
index 3c92ae65d93c..619054449eba 100644
--- a/src/test/javascript/spec/component/competencies/import/import-course-competencies.component.spec.ts
+++ b/src/test/javascript/spec/component/competencies/import/import-course-competencies.component.spec.ts
@@ -181,16 +181,15 @@ describe('ImportCourseCompetenciesComponent', () => {
         expect(component.disabledIds).toHaveLength(3);
     });
 
-    it('should not unload with pending changes', () => {
-        const deactivateWarningSpy = jest.spyOn(component, 'canDeactivateWarning', 'get');
-
+    it('should not deactivate with pending changes', () => {
+        let canDeactivate;
         component['isSubmitted'] = true;
         component.selectedCourseCompetencies = { resultsOnPage: [{ id: 1 }], numberOfPages: 0 };
-        component['unloadNotification']({ returnValue: '' });
-        expect(deactivateWarningSpy).not.toHaveBeenCalled();
+        canDeactivate = component.canDeactivate();
+        expect(canDeactivate).toBeTrue();
 
         component['isSubmitted'] = false;
-        component['unloadNotification']({ returnValue: '' });
-        expect(deactivateWarningSpy).toHaveBeenCalled();
+        canDeactivate = component.canDeactivate();
+        expect(canDeactivate).toBeFalse();
     });
 });
diff --git a/src/test/javascript/spec/component/exam/participate/exam-participation.component.spec.ts b/src/test/javascript/spec/component/exam/participate/exam-participation.component.spec.ts
index de433ab78169..1e4bda79525a 100644
--- a/src/test/javascript/spec/component/exam/participate/exam-participation.component.spec.ts
+++ b/src/test/javascript/spec/component/exam/participate/exam-participation.component.spec.ts
@@ -767,16 +767,6 @@ describe('ExamParticipationComponent', () => {
         });
     });
 
-    describe('unloadNotification', () => {
-        it('should set event return value', () => {
-            jest.spyOn(comp, 'canDeactivate').mockReturnValue(false);
-            jest.spyOn(comp, 'canDeactivateWarning', 'get').mockReturnValue('warning');
-            const event = { returnValue: undefined };
-            comp.unloadNotification(event);
-            expect(event.returnValue).toBe('warning');
-        });
-    });
-
     describe('isOver', () => {
         it('should return true if exam has ended', () => {
             const studentExam = new StudentExam();
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 a93c87bdf3f3..c271a8deb04e 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
@@ -633,18 +633,16 @@ describe('QuizExerciseUpdateComponent', () => {
                 expect(comp.canDeactivate()).toBeTrue();
             });
 
-            it('should set event return value to translate if not canDeactivate', () => {
+            it('should not deactivate with pending changes', () => {
                 comp.pendingChangesCache = true;
-                const ev = { returnValue: undefined };
-                comp.unloadNotification(ev);
-                expect(ev.returnValue).toBe('pendingChanges');
+                const canDeactivate = comp.canDeactivate();
+                expect(canDeactivate).toBeFalse();
             });
 
-            it('should not set event return value to translate if  canDeactivate', () => {
+            it('should deactivate with no pending changes', () => {
                 comp.pendingChangesCache = false;
-                const ev = { returnValue: undefined };
-                comp.unloadNotification(ev);
-                expect(ev.returnValue).toBeUndefined();
+                const canDeactivate = comp.canDeactivate();
+                expect(canDeactivate).toBeTrue();
             });
         });
 
diff --git a/src/test/javascript/spec/component/shared/metis/postings-markdown-editor/postings-markdown-editor.component.spec.ts b/src/test/javascript/spec/component/shared/metis/postings-markdown-editor/postings-markdown-editor.component.spec.ts
index e2195d845812..2cd9277355e3 100644
--- a/src/test/javascript/spec/component/shared/metis/postings-markdown-editor/postings-markdown-editor.component.spec.ts
+++ b/src/test/javascript/spec/component/shared/metis/postings-markdown-editor/postings-markdown-editor.component.spec.ts
@@ -8,8 +8,7 @@ import { MetisService } from 'app/shared/metis/metis.service';
 import { MockMetisService } from '../../../../helpers/mocks/service/mock-metis-service.service';
 import { metisAnswerPostUser2, metisPostExerciseUser1 } from '../../../../helpers/sample/metis-sample-data';
 import { LectureService } from 'app/lecture/lecture.service';
-import { HttpResponse } from '@angular/common/http';
-import { of } from 'rxjs';
+import { Subject } from 'rxjs';
 import { CourseManagementService } from 'app/course/manage/course-management.service';
 import { ChannelService } from 'app/shared/metis/conversations/channel.service';
 import * as CourseModel from 'app/entities/course.model';
@@ -26,6 +25,10 @@ import { ExerciseReferenceAction } from 'app/shared/monaco-editor/model/actions/
 import { LectureAttachmentReferenceAction } from 'app/shared/monaco-editor/model/actions/communication/lecture-attachment-reference.action';
 import { UrlAction } from '../../../../../../../main/webapp/app/shared/monaco-editor/model/actions/url.action';
 import { AttachmentAction } from '../../../../../../../main/webapp/app/shared/monaco-editor/model/actions/attachment.action';
+import { EmojiAction } from 'app/shared/monaco-editor/model/actions/emoji.action';
+import { Overlay, OverlayPositionBuilder } from '@angular/cdk/overlay';
+import { TextEditor } from 'app/shared/monaco-editor/model/actions/adapter/text-editor.interface';
+import { ComponentPortal } from '@angular/cdk/portal';
 
 describe('PostingsMarkdownEditor', () => {
     let component: PostingMarkdownEditorComponent;
@@ -33,14 +36,78 @@ describe('PostingsMarkdownEditor', () => {
     let debugElement: DebugElement;
     let mockMarkdownEditorComponent: MarkdownEditorMonacoComponent;
     let metisService: MetisService;
-    let courseManagementService: CourseManagementService;
-    let channelService: ChannelService;
     let lectureService: LectureService;
-    let findLectureWithDetailsSpy: jest.SpyInstance;
+
+    const backdropClickSubject = new Subject<void>();
+    const mockOverlayRef = {
+        attach: jest.fn().mockReturnValue({ location: { nativeElement: document.createElement('div') } }),
+        backdropClick: jest.fn(() => backdropClickSubject.asObservable()),
+        detach: jest.fn(),
+        dispose: jest.fn(),
+        scrollStrategies: { reposition: jest.fn() },
+    };
+
+    const mockOverlay = {
+        create: jest.fn().mockReturnValue(mockOverlayRef),
+        scrollStrategies: { reposition: jest.fn().mockReturnValue({}) },
+    };
+
+    const mockEditor: TextEditor = {
+        getPosition: jest.fn(),
+        setPosition: jest.fn(),
+        focus: jest.fn(),
+        addAction: jest.fn(),
+        executeAction: jest.fn(),
+        layout: jest.fn(),
+        replaceTextAtRange: jest.fn(),
+        getDomNode: jest.fn(),
+        triggerCompletion: jest.fn(),
+        getTextAtRange: jest.fn(),
+        getLineText: jest.fn(),
+        getNumberOfLines: jest.fn(),
+        getEndPosition: jest.fn(),
+        getSelection: jest.fn(),
+        setSelection: jest.fn(),
+        revealRange: jest.fn(),
+        addCompleter: jest.fn(),
+    };
+
+    const mockPositionStrategy = {
+        left: jest.fn().mockReturnThis(),
+        top: jest.fn().mockReturnThis(),
+    };
+
+    const overlayPositionBuilderMock = {
+        global: jest.fn().mockReturnValue(mockPositionStrategy),
+    };
 
     beforeEach(() => {
+        if (typeof PointerEvent === 'undefined') {
+            global.PointerEvent = class PointerEvent extends MouseEvent {
+                constructor(type: string, params: MouseEventInit = {}) {
+                    super(type, params);
+                }
+            } as unknown as typeof PointerEvent;
+        }
+        const mockEmojiSelect = new Subject<{ emoji: any; event: PointerEvent }>();
+        const mockComponentRef = {
+            instance: {
+                emojiSelect: mockEmojiSelect.asObservable(),
+            },
+            location: { nativeElement: document.createElement('div') },
+        };
+
+        mockOverlayRef.attach.mockReturnValue(mockComponentRef);
+
         return TestBed.configureTestingModule({
-            providers: [{ provide: MetisService, useClass: MockMetisService }, MockProvider(LectureService), MockProvider(CourseManagementService), MockProvider(ChannelService)],
+            providers: [
+                { provide: MetisService, useClass: MockMetisService },
+                MockProvider(LectureService),
+                MockProvider(CourseManagementService),
+                MockProvider(ChannelService),
+                { provide: Overlay, useValue: mockOverlay },
+                { provide: OverlayPositionBuilder, useValue: overlayPositionBuilderMock },
+            ],
             declarations: [PostingMarkdownEditorComponent, MockComponent(MarkdownEditorMonacoComponent)],
         })
             .compileComponents()
@@ -49,54 +116,57 @@ describe('PostingsMarkdownEditor', () => {
                 component = fixture.componentInstance;
                 debugElement = fixture.debugElement;
                 metisService = TestBed.inject(MetisService);
-                courseManagementService = TestBed.inject(CourseManagementService);
                 lectureService = TestBed.inject(LectureService);
-                channelService = TestBed.inject(ChannelService);
-                findLectureWithDetailsSpy = jest.spyOn(lectureService, 'findAllByCourseIdWithSlides');
-                const returnValue = of(new HttpResponse({ body: [], status: 200 }));
-                findLectureWithDetailsSpy.mockReturnValue(returnValue);
                 fixture.autoDetectChanges();
                 mockMarkdownEditorComponent = fixture.debugElement.query(By.directive(MarkdownEditorMonacoComponent)).componentInstance;
                 component.ngOnInit();
                 component.content = metisPostExerciseUser1.content;
+
+                mockEmojiSelect.next({ emoji: { native: '😀' }, event: new PointerEvent('click') });
             });
     });
 
     it('should have set the correct default commands on init if messaging or communication is enabled', () => {
         component.ngOnInit();
 
-        expect(component.defaultActions).toEqual([
-            new BoldAction(),
-            new ItalicAction(),
-            new UnderlineAction(),
-            new QuoteAction(),
-            new CodeAction(),
-            new CodeBlockAction(),
-            new UrlAction(),
-            new AttachmentAction(),
-            new UserMentionAction(courseManagementService, metisService),
-            new ChannelReferenceAction(metisService, channelService),
-            new ExerciseReferenceAction(metisService),
-        ]);
+        expect(component.defaultActions).toEqual(
+            expect.arrayContaining([
+                expect.any(BoldAction),
+                expect.any(ItalicAction),
+                expect.any(UnderlineAction),
+                expect.any(QuoteAction),
+                expect.any(CodeAction),
+                expect.any(CodeBlockAction),
+                expect.any(EmojiAction),
+                expect.any(UrlAction),
+                expect.any(AttachmentAction),
+                expect.any(UserMentionAction),
+                expect.any(ChannelReferenceAction),
+                expect.any(ExerciseReferenceAction),
+            ]),
+        );
 
         expect(component.lectureAttachmentReferenceAction).toEqual(new LectureAttachmentReferenceAction(metisService, lectureService));
     });
 
-    it('should have set the correct default commands on init if communication and messaging and communication is disabled', () => {
+    it('should have set the correct default commands on init if communication is disabled', () => {
         jest.spyOn(CourseModel, 'isCommunicationEnabled').mockReturnValueOnce(false);
         component.ngOnInit();
 
-        expect(component.defaultActions).toEqual([
-            new BoldAction(),
-            new ItalicAction(),
-            new UnderlineAction(),
-            new QuoteAction(),
-            new CodeAction(),
-            new CodeBlockAction(),
-            new UrlAction(),
-            new AttachmentAction(),
-            new ExerciseReferenceAction(metisService),
-        ]);
+        expect(component.defaultActions).toEqual(
+            expect.arrayContaining([
+                expect.any(BoldAction),
+                expect.any(ItalicAction),
+                expect.any(UnderlineAction),
+                expect.any(QuoteAction),
+                expect.any(CodeAction),
+                expect.any(CodeBlockAction),
+                expect.any(EmojiAction),
+                expect.any(UrlAction),
+                expect.any(AttachmentAction),
+                expect.any(ExerciseReferenceAction),
+            ]),
+        );
 
         expect(component.lectureAttachmentReferenceAction).toEqual(new LectureAttachmentReferenceAction(metisService, lectureService));
     });
@@ -171,4 +241,80 @@ describe('PostingsMarkdownEditor', () => {
         component.onKeyDown(event);
         expect(preventDefaultSpy).not.toHaveBeenCalled();
     });
+
+    it('should not create emoji picker if position is not set', () => {
+        const emojiAction = new EmojiAction(component.viewContainerRef, mockOverlay as any, overlayPositionBuilderMock as any);
+        emojiAction.run(mockEditor);
+
+        expect(mockOverlay.create).not.toHaveBeenCalled();
+        expect(mockOverlayRef.attach).not.toHaveBeenCalled();
+    });
+
+    it('should attach EmojiPickerComponent to overlay when EmojiAction.run is called', () => {
+        const emojiAction = component.defaultActions.find((action) => action instanceof EmojiAction) as EmojiAction;
+        emojiAction.setPoint({ x: 100, y: 200 });
+
+        emojiAction.run(mockEditor);
+
+        expect(mockOverlayRef.attach).toHaveBeenCalledWith(expect.any(ComponentPortal));
+        expect(mockOverlayRef.backdropClick).toHaveBeenCalled();
+    });
+
+    it('should create overlay with correct position when EmojiAction.run is called', () => {
+        const emojiAction = component.defaultActions.find((action) => action instanceof EmojiAction) as EmojiAction;
+        emojiAction.setPoint({ x: 100, y: 200 });
+
+        const mockPositionStrategy = {
+            left: jest.fn().mockReturnThis(),
+            top: jest.fn().mockReturnThis(),
+        };
+
+        mockOverlay.create.mockReturnValue(mockOverlayRef);
+        overlayPositionBuilderMock.global.mockReturnValue(mockPositionStrategy);
+
+        emojiAction.run(mockEditor);
+
+        expect(mockOverlay.create).toHaveBeenCalledWith({
+            positionStrategy: mockPositionStrategy,
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            scrollStrategy: mockOverlay.scrollStrategies.reposition(),
+            width: '0',
+        });
+
+        expect(mockPositionStrategy.left).toHaveBeenCalledWith(`85px`);
+        expect(mockPositionStrategy.top).toHaveBeenCalledWith(`185px`);
+    });
+
+    it('should detach overlay and close EmojiPickerComponent on backdrop click', () => {
+        const emojiAction = component.defaultActions.find((action) => action instanceof EmojiAction) as EmojiAction;
+        emojiAction.setPoint({ x: 100, y: 200 });
+
+        emojiAction.run(mockEditor);
+        backdropClickSubject.next();
+
+        expect(mockOverlayRef.dispose).toHaveBeenCalled();
+    });
+
+    it('should destroy emoji picker if it is already open', () => {
+        const emojiAction = new EmojiAction(component.viewContainerRef, mockOverlay as any, overlayPositionBuilderMock as any);
+
+        emojiAction['overlayRef'] = mockOverlayRef as any;
+        const destroySpy = jest.spyOn(emojiAction as any, 'destroyEmojiPicker');
+
+        emojiAction.run(mockEditor);
+
+        expect(destroySpy).toHaveBeenCalled();
+        expect(mockOverlayRef.dispose).toHaveBeenCalled();
+    });
+
+    it('should clean up overlay reference on destroy', () => {
+        const emojiAction = new EmojiAction(component.viewContainerRef, mockOverlay as any, overlayPositionBuilderMock as any);
+
+        emojiAction['overlayRef'] = mockOverlayRef as any;
+        emojiAction['destroyEmojiPicker']();
+
+        expect(mockOverlayRef.dispose).toHaveBeenCalled();
+        expect(emojiAction['overlayRef']).toBeNull();
+    });
 });
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 df228c9b340c..244e9004ac43 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
@@ -14,6 +14,8 @@ describe('MonacoEditorComponent', () => {
 
     const singleLineText = 'public class Main { }';
     const multiLineText = ['public class Main {', 'static void main() {', 'foo();', '}', '}'].join('\n');
+    const textWithEmoticons = 'Hello :)';
+    const textWithEmojis = 'Hello 🙂';
 
     const buildAnnotationArray: Annotation[] = [{ fileName: 'example.java', row: 1, column: 0, timestamp: 0, type: MonacoEditorBuildAnnotationType.ERROR, text: 'example error' }];
 
@@ -262,4 +264,29 @@ describe('MonacoEditorComponent', () => {
         comp.applyOptionPreset(preset);
         expect(applySpy).toHaveBeenCalledExactlyOnceWith(comp['_editor']);
     });
+
+    it('should convert text emoticons to emojis using convertTextToEmoji', () => {
+        fixture.detectChanges();
+        const result = comp.convertTextToEmoji(textWithEmoticons);
+        expect(result).toBe(textWithEmojis);
+    });
+
+    it('should detect if text is converted to emoji using isConvertedToEmoji', () => {
+        fixture.detectChanges();
+        const isConverted = comp.isConvertedToEmoji(textWithEmoticons, textWithEmojis);
+        expect(isConverted).toBeTrue();
+
+        const notConverted = comp.isConvertedToEmoji(textWithEmojis, textWithEmojis);
+        expect(notConverted).toBeFalse();
+    });
+
+    it('should not change the editor text if no conversion is needed', () => {
+        fixture.detectChanges();
+        const originalText = 'Hello 😊';
+        comp.setText(originalText);
+        expect(comp.getText()).toBe(originalText);
+
+        comp.setText(originalText);
+        expect(comp.getText()).toBe(originalText);
+    });
 });
diff --git a/src/test/javascript/spec/component/standardized-competencies/course-import-standardized-competencies.spec.ts b/src/test/javascript/spec/component/standardized-competencies/course-import-standardized-competencies.spec.ts
index c780c1c252c6..a32795a28d18 100644
--- a/src/test/javascript/spec/component/standardized-competencies/course-import-standardized-competencies.spec.ts
+++ b/src/test/javascript/spec/component/standardized-competencies/course-import-standardized-competencies.spec.ts
@@ -205,14 +205,14 @@ describe('CourseImportStandardizedCompetenciesComponent', () => {
     });
 
     it('should not deactivate with pending changes', () => {
-        const deactivateWarningSpy = jest.spyOn(component as any, 'canDeactivateWarning', 'get');
+        let canDeactivate;
 
         component['isLoading'] = false;
-        component['unloadNotification']({ returnValue: '' });
-        expect(deactivateWarningSpy).not.toHaveBeenCalled();
+        canDeactivate = component.canDeactivate();
+        expect(canDeactivate).toBeTrue();
 
         component['isLoading'] = true;
-        component['unloadNotification']({ returnValue: '' });
-        expect(deactivateWarningSpy).toHaveBeenCalled();
+        canDeactivate = component.canDeactivate();
+        expect(canDeactivate).toBeFalse();
     });
 });
diff --git a/src/test/javascript/spec/component/standardized-competencies/course-import-standardized-prerequisites.spec.ts b/src/test/javascript/spec/component/standardized-competencies/course-import-standardized-prerequisites.spec.ts
index d6a319b34c84..78e5c6e90306 100644
--- a/src/test/javascript/spec/component/standardized-competencies/course-import-standardized-prerequisites.spec.ts
+++ b/src/test/javascript/spec/component/standardized-competencies/course-import-standardized-prerequisites.spec.ts
@@ -205,14 +205,14 @@ describe('CourseImportStandardizedPrerequisitesComponent', () => {
     });
 
     it('should not deactivate with pending changes', () => {
-        const deactivateWarningSpy = jest.spyOn(component as any, 'canDeactivateWarning', 'get');
+        let canDeactivate;
 
         component['isLoading'] = false;
-        component['unloadNotification']({ returnValue: '' });
-        expect(deactivateWarningSpy).not.toHaveBeenCalled();
+        canDeactivate = component.canDeactivate();
+        expect(canDeactivate).toBeTrue();
 
         component['isLoading'] = true;
-        component['unloadNotification']({ returnValue: '' });
-        expect(deactivateWarningSpy).toHaveBeenCalled();
+        canDeactivate = component.canDeactivate();
+        expect(canDeactivate).toBeFalse();
     });
 });
diff --git a/src/test/javascript/spec/component/standardized-competencies/standardized-competency-management.spec.ts b/src/test/javascript/spec/component/standardized-competencies/standardized-competency-management.spec.ts
index 3e46a8a4add1..9c2b7f487793 100644
--- a/src/test/javascript/spec/component/standardized-competencies/standardized-competency-management.spec.ts
+++ b/src/test/javascript/spec/component/standardized-competencies/standardized-competency-management.spec.ts
@@ -479,15 +479,15 @@ describe('StandardizedCompetencyManagementComponent', () => {
     });
 
     it('should not deactivate with pending changes', () => {
-        const deactivateWarningSpy = jest.spyOn(component, 'canDeactivateWarning', 'get');
+        let canDeactivate;
 
         component['isEditing'] = false;
-        component['unloadNotification']({ returnValue: '' });
-        expect(deactivateWarningSpy).not.toHaveBeenCalled();
+        canDeactivate = component.canDeactivate();
+        expect(canDeactivate).toBeTrue();
 
         component['isEditing'] = true;
-        component['unloadNotification']({ returnValue: '' });
-        expect(deactivateWarningSpy).toHaveBeenCalled();
+        canDeactivate = component.canDeactivate();
+        expect(canDeactivate).toBeFalse();
     });
 
     function prepareAndExecuteCompetencyUpdate(tree: KnowledgeAreaDTO[], competencyToUpdate: StandardizedCompetencyDTO, updatedCompetency: StandardizedCompetencyDTO) {