diff --git a/loader/index.ejs b/loader/index.ejs
index 59343f28..604b457b 100644
--- a/loader/index.ejs
+++ b/loader/index.ejs
@@ -9,7 +9,6 @@
 
         <meta name="og:description" content="The TeaSpeak Web client is a in the browser running client for the VoIP communication software TeaSpeak." />
         <meta name="og:url" content="https://web.teaspeak.de/">
-        <% /* TODO: Put in an appropriate image <meta name="og:image" content="https://www.whatsapp.com/img/whatsapp-promo.png"> */ %>
 
         <% /* Using an absolute path here since the manifest.json works only with such. */ %>
         <% /* <link rel="manifest" href="/manifest.json"> */ %>
@@ -27,19 +26,6 @@
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
         <meta name="format-detection" content="telephone=no">
 
-        <!-- Global site tag (gtag.js) - Google Analytics -->
-        <script defer async src="https://www.googletagmanager.com/gtag/js?id=UA-113151733-4"></script>
-        <script>
-            window.dataLayer = window.dataLayer || [];
-
-            function gtag() {
-                dataLayer.push(arguments);
-            }
-
-            gtag('js', new Date());
-            gtag('config', 'UA-113151733-4');
-        </script>
-
         <link rel="preload" as="image" href="<%= require("./images/initial-sequence.gif") %>">
         <link rel="preload" as="image" href="<%= require("./images/bowl.png") %>">
         <% /* We don't preload the bowl since it's only a div background */ %>
diff --git a/package-lock.json b/package-lock.json
index 543338b1..dd760333 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2834,6 +2834,7 @@
       "version": "7.10.3",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.10.3.tgz",
       "integrity": "sha512-RzGO0RLSdokm9Ipe/YD+7ww8X2Ro79qiXZF3HU9ljrM+qnJmH1Vqth+hbiQZy761LnMJTMitHDuKVYTk3k4dLw==",
+      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.4"
       }
@@ -3037,6 +3038,16 @@
       "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
       "dev": true
     },
+    "@emoji-mart/data": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@emoji-mart/data/-/data-1.1.2.tgz",
+      "integrity": "sha512-1HP8BxD2azjqWJvxIaWAMyTySeZY0Osr83ukYjltPVkNXeJvTz7yDrPLBtnrD5uqJ3tg4CcLuuBW09wahqL/fg=="
+    },
+    "@emoji-mart/react": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@emoji-mart/react/-/react-1.1.1.tgz",
+      "integrity": "sha512-NMlFNeWgv1//uPsvLxvGQoIerPuVdXwK/EUek8OOkJ6wVOWPUizRBJU0hDqWZCOROVpfBgCemaC3m6jDOXi03g=="
+    },
     "@google-cloud/common": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/@google-cloud/common/-/common-2.4.0.tgz",
@@ -4970,15 +4981,6 @@
       "integrity": "sha512-nv+GSx77ZtXiJzwKdsASqi+YQ5Z7vwHsTP0JY2SiQgjGckkBRKZnk8nIM+7oUZ1VCtuTz0+By4qVR7fqzp/Dfg==",
       "dev": true
     },
-    "@types/emoji-mart": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmjs.org/@types/emoji-mart/-/emoji-mart-3.0.12.tgz",
-      "integrity": "sha512-ff8xM0+98PhhX15xjDseOWGDz413QvCK6D+yes88u0GJ7DoH3qR5AdMI9CbYA7/jE25WxSvX2SsGnI8Mw1Wbkw==",
-      "dev": true,
-      "requires": {
-        "@types/react": "*"
-      }
-    },
     "@types/emscripten": {
       "version": "1.39.10",
       "resolved": "https://registry.npmjs.org/@types/emscripten/-/emscripten-1.39.10.tgz",
@@ -9915,13 +9917,9 @@
       }
     },
     "emoji-mart": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/emoji-mart/-/emoji-mart-3.0.1.tgz",
-      "integrity": "sha512-sxpmMKxqLvcscu6mFn9ITHeZNkGzIvD0BSNFE/LJESPbCA8s1jM6bCDPjWbV31xHq7JXaxgpHxLB54RCbBZSlg==",
-      "requires": {
-        "@babel/runtime": "^7.0.0",
-        "prop-types": "^15.6.0"
-      }
+      "version": "5.5.2",
+      "resolved": "https://registry.npmjs.org/emoji-mart/-/emoji-mart-5.5.2.tgz",
+      "integrity": "sha512-Sqc/nso4cjxhOwWJsp9xkVm8OF5c+mJLZJFoFfzRuKO+yWiN7K8c96xmtughYb0d/fZ8UC6cLIQ/p4BR6Pv3/A=="
     },
     "emoji-regex": {
       "version": "9.2.2",
@@ -19527,7 +19525,8 @@
     "regenerator-runtime": {
       "version": "0.13.5",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz",
-      "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA=="
+      "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==",
+      "dev": true
     },
     "regenerator-transform": {
       "version": "0.14.5",
@@ -23899,4 +23898,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 71021666..12afd3b1 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,6 @@
     "@svgr/webpack": "^5.5.0",
     "@types/dompurify": "^2.4.0",
     "@types/ejs": "^3.1.5",
-    "@types/emoji-mart": "^3.0.12",
     "@types/emscripten": "^1.39.10",
     "@types/fs-extra": "^8.1.5",
     "@types/html-minifier": "^3.5.3",
@@ -98,6 +97,8 @@
   },
   "homepage": "https://www.teaspeak.de",
   "dependencies": {
+    "@emoji-mart/data": "^1.1.2",
+    "@emoji-mart/react": "^1.1.1",
     "@types/crypto-js": "^4.2.1",
     "broadcastchannel-polyfill": "^1.0.1",
     "buffer": "^6.0.3",
@@ -105,7 +106,7 @@
     "crypto-js": "^4.2.0",
     "detect-browser": "^5.3.0",
     "dompurify": "^2.4.7",
-    "emoji-mart": "^3.0.1",
+    "emoji-mart": "^5.5.2",
     "emoji-regex": "^9.2.2",
     "highlight.js": "^10.7.3",
     "ip-regex": "^4.3.0",
diff --git a/shared/img/smiley.png b/shared/img/smiley.png
new file mode 100644
index 00000000..84f9c5b9
Binary files /dev/null and b/shared/img/smiley.png differ
diff --git a/shared/js/Bookmarks.ts b/shared/js/Bookmarks.ts
index e8bf474e..3d141dfe 100644
--- a/shared/js/Bookmarks.ts
+++ b/shared/js/Bookmarks.ts
@@ -1,14 +1,14 @@
 import * as loader from "tc-loader";
-import {Stage} from "tc-loader";
-import {ignorePromise, WritableKeys} from "tc-shared/proto";
-import {LogCategory, logDebug, logError, logInfo, logTrace, logWarn} from "tc-shared/log";
-import {guid} from "tc-shared/crypto/uid";
-import {Registry} from "tc-events";
-import {server_connections} from "tc-shared/ConnectionManager";
-import {defaultConnectProfile, findConnectProfile} from "tc-shared/profiles/ConnectionProfile";
-import {ConnectionState} from "tc-shared/ConnectionHandler";
+import { Stage } from "tc-loader";
+import { ignorePromise, WritableKeys } from "tc-shared/proto";
+import { LogCategory, logDebug, logError, logInfo, logTrace, logWarn } from "tc-shared/log";
+import { guid } from "tc-shared/crypto/uid";
+import { Registry } from "tc-events";
+import { server_connections } from "tc-shared/ConnectionManager";
+import { defaultConnectProfile, findConnectProfile } from "tc-shared/profiles/ConnectionProfile";
+import { ConnectionState } from "tc-shared/ConnectionHandler";
 import * as _ from "lodash";
-import {getStorageAdapter} from "tc-shared/StorageAdapter";
+import { getStorageAdapter } from "tc-shared/StorageAdapter";
 
 type BookmarkBase = {
     readonly uniqueId: string,
@@ -64,9 +64,9 @@ export class BookmarkManager {
 
     async loadBookmarks() {
         const bookmarksJson = await getStorageAdapter().get(kStorageKey);
-        if(typeof bookmarksJson !== "string") {
+        if (typeof bookmarksJson !== "string") {
             const oldBookmarksJson = await getStorageAdapter().get("bookmarks");
-            if(typeof oldBookmarksJson === "string") {
+            if (typeof oldBookmarksJson === "string") {
                 logDebug(LogCategory.BOOKMARKS, tr("Found no new bookmarks but found old bookmarks. Trying to import."));
                 try {
                     this.importOldBookmarks(oldBookmarksJson);
@@ -83,7 +83,7 @@ export class BookmarkManager {
         } else {
             try {
                 const storageData = JSON.parse(bookmarksJson);
-                if(storageData.version !== 2) {
+                if (storageData.version !== 2) {
                     throw tr("bookmark storage has an invalid version");
                 }
 
@@ -99,7 +99,7 @@ export class BookmarkManager {
             }
         }
 
-        if(!this.defaultBookmarkCreated && this.registeredBookmarks.length === 0) {
+        if (!this.defaultBookmarkCreated && this.registeredBookmarks.length === 0) {
             this.defaultBookmarkCreated = true;
 
             logDebug(LogCategory.BOOKMARKS, tr("No bookmarks found. Registering default bookmark."));
@@ -107,12 +107,12 @@ export class BookmarkManager {
                 connectOnStartup: false,
                 connectProfile: "default",
 
-                displayName: "Official TeaSpeak - Test server",
+                displayName: "Our LanPart<",
 
                 parentEntry: undefined,
                 previousEntry: undefined,
 
-                serverAddress: "ts.teaspeak.de",
+                serverAddress: "tea.lp.kle.li",
                 serverPasswordHash: undefined,
 
                 defaultChannel: undefined,
@@ -123,21 +123,21 @@ export class BookmarkManager {
 
     private importOldBookmarks(jsonData: string) {
         const data = JSON.parse(jsonData);
-        if(typeof data?.root_bookmark !== "object") {
+        if (typeof data?.root_bookmark !== "object") {
             throw tr("missing root bookmark");
         }
 
-        if(!Array.isArray(data?.root_bookmark?.content)) {
+        if (!Array.isArray(data?.root_bookmark?.content)) {
             throw tr("Missing root bookmarks content");
         }
 
-        const registerBookmarks = (parentEntry: string, previousEntry: string, entry: any) : string | undefined => {
-            if(typeof entry.display_name !== "string") {
+        const registerBookmarks = (parentEntry: string, previousEntry: string, entry: any): string | undefined => {
+            if (typeof entry.display_name !== "string") {
                 logWarn(LogCategory.BOOKMARKS, tr("Missing display_name in old bookmark entry. Skipping entry."));
                 return undefined;
             }
 
-            if("content" in entry) {
+            if ("content" in entry) {
                 /* it was a directory */
                 const directory = this.createDirectory({
                     previousEntry,
@@ -152,23 +152,23 @@ export class BookmarkManager {
                 });
             } else {
                 /* it was a normal entry */
-                if(typeof entry.connect_profile !== "string") {
+                if (typeof entry.connect_profile !== "string") {
                     logWarn(LogCategory.BOOKMARKS, tr("Missing connect_profile in old bookmark entry. Skipping entry."));
                     return undefined;
                 }
 
-                if(typeof entry.server_properties?.server_address !== "string") {
+                if (typeof entry.server_properties?.server_address !== "string") {
                     logWarn(LogCategory.BOOKMARKS, tr("Missing server_address in old bookmark entry. Skipping entry."));
                     return undefined;
                 }
 
-                if(typeof entry.server_properties?.server_port !== "number") {
+                if (typeof entry.server_properties?.server_port !== "number") {
                     logWarn(LogCategory.BOOKMARKS, tr("Missing server_port in old bookmark entry. Skipping entry."));
                     return undefined;
                 }
 
                 let serverAddress;
-                if(entry.server_properties.server_address.indexOf(":") !== -1) {
+                if (entry.server_properties.server_address.indexOf(":") !== -1) {
                     serverAddress = `[${entry.server_properties.server_address}]`;
                 } else {
                     serverAddress = entry.server_properties.server_address;
@@ -209,23 +209,23 @@ export class BookmarkManager {
         }));
     }
 
-    getRegisteredBookmarks() : BookmarkEntry[] {
+    getRegisteredBookmarks(): BookmarkEntry[] {
         return this.registeredBookmarks;
     }
 
-    getOrderedRegisteredBookmarks() : OrderedBookmarkEntry[] {
+    getOrderedRegisteredBookmarks(): OrderedBookmarkEntry[] {
         const unorderedBookmarks = this.registeredBookmarks.slice(0);
         const orderedBookmarks: OrderedBookmarkEntry[] = [];
 
         const orderTreeLayer = (entries: BookmarkEntry[]): BookmarkEntry[] => {
-            if(entries.length === 0) {
+            if (entries.length === 0) {
                 return [];
             }
 
             const result = [];
-            while(entries.length > 0) {
+            while (entries.length > 0) {
                 let head = entries.find(entry => !entry.previousEntry) || entries[0];
-                while(head) {
+                while (head) {
                     result.push(head);
                     entries.remove(head);
                     head = entries.find(entry => entry.previousEntry === head.uniqueId);
@@ -240,7 +240,7 @@ export class BookmarkManager {
             children.forEach(child => unorderedBookmarks.remove(child));
 
             const childCount = children.length;
-            for(const entry of orderTreeLayer(children)) {
+            for (const entry of orderTreeLayer(children)) {
                 let orderedEntry: OrderedBookmarkEntry = {
                     entry: entry,
                     depth: depth,
@@ -264,11 +264,11 @@ export class BookmarkManager {
         return orderedBookmarks;
     }
 
-    findBookmark(uniqueId: string) : BookmarkEntry | undefined {
+    findBookmark(uniqueId: string): BookmarkEntry | undefined {
         return this.registeredBookmarks.find(entry => entry.uniqueId === uniqueId);
     }
 
-    createBookmark(properties: Pick<BookmarkInfo, WritableKeys<BookmarkInfo>>) : BookmarkInfo {
+    createBookmark(properties: Pick<BookmarkInfo, WritableKeys<BookmarkInfo>>): BookmarkInfo {
         this.validateHangInPoint(properties);
         const bookmark = Object.assign(properties, {
             uniqueId: guid(),
@@ -284,7 +284,7 @@ export class BookmarkManager {
         this.doEditBookmark(uniqueId, newValues);
     }
 
-    createDirectory(properties: Pick<BookmarkInfo, WritableKeys<BookmarkDirectory>>) : BookmarkDirectory {
+    createDirectory(properties: Pick<BookmarkInfo, WritableKeys<BookmarkDirectory>>): BookmarkDirectory {
         this.validateHangInPoint(properties);
         const bookmark = Object.assign(properties, {
             uniqueId: guid(),
@@ -300,20 +300,20 @@ export class BookmarkManager {
         this.doEditBookmark(uniqueId, newValues);
     }
 
-    directoryContents(uniqueId: string) : BookmarkEntry[] {
+    directoryContents(uniqueId: string): BookmarkEntry[] {
         return this.registeredBookmarks.filter(bookmark => bookmark.parentEntry === uniqueId);
     }
 
     deleteEntry(uniqueId: string) {
         const index = this.registeredBookmarks.findIndex(entry => entry.uniqueId === uniqueId);
-        if(index === -1) {
+        if (index === -1) {
             return;
         }
 
-        const [ entry ] = this.registeredBookmarks.splice(index, 1);
-        const children = [], pendingChildren = [ entry ];
+        const [entry] = this.registeredBookmarks.splice(index, 1);
+        const children = [], pendingChildren = [entry];
 
-        while(pendingChildren[0]) {
+        while (pendingChildren[0]) {
             const child = pendingChildren.pop_front();
             children.push(child);
 
@@ -329,12 +329,12 @@ export class BookmarkManager {
 
     executeConnect(uniqueId: string, newTab: boolean) {
         const bookmark = this.findBookmark(uniqueId);
-        if(!bookmark || bookmark.type !== "entry") {
+        if (!bookmark || bookmark.type !== "entry") {
             return;
         }
 
         const connection = newTab ? server_connections.spawnConnectionHandler() : server_connections.getActiveConnectionHandler();
-        if(!connection) {
+        if (!connection) {
             return;
         }
 
@@ -360,12 +360,12 @@ export class BookmarkManager {
 
     executeAutoConnect() {
         let newTab = server_connections.getActiveConnectionHandler().connection_state !== ConnectionState.UNCONNECTED;
-        for(const entry of this.getOrderedRegisteredBookmarks()) {
-            if(entry.entry.type !== "entry") {
+        for (const entry of this.getOrderedRegisteredBookmarks()) {
+            if (entry.entry.type !== "entry") {
                 continue;
             }
 
-            if(!entry.entry.connectOnStartup) {
+            if (!entry.entry.connectOnStartup) {
                 continue;
             }
 
@@ -374,14 +374,14 @@ export class BookmarkManager {
         }
     }
 
-    exportBookmarks() : string {
+    exportBookmarks(): string {
         return JSON.stringify({
             version: 1,
             bookmarks: this.registeredBookmarks
         });
     }
 
-    importBookmarks(filePayload: string) : number {
+    importBookmarks(filePayload: string): number {
         let data;
         try {
             data = JSON.parse(filePayload)
@@ -389,26 +389,26 @@ export class BookmarkManager {
             throw tr("failed to parse bookmarks");
         }
 
-        if(data?.version !== 1) {
+        if (data?.version !== 1) {
             throw tr("supplied data contains invalid version");
         }
 
         const newBookmarks = data.bookmarks as BookmarkEntry[];
-        if(!Array.isArray(newBookmarks)) {
+        if (!Array.isArray(newBookmarks)) {
             throw tr("missing bookmarks");
         }
 
         /* TODO: Validate integrity? */
-        for(const knownBookmark of this.registeredBookmarks) {
+        for (const knownBookmark of this.registeredBookmarks) {
             const index = newBookmarks.findIndex(entry => entry.uniqueId === knownBookmark.uniqueId);
-            if(index === -1) {
+            if (index === -1) {
                 continue;
             }
 
             newBookmarks.splice(index, 1);
         }
 
-        if(newBookmarks.length === 0) {
+        if (newBookmarks.length === 0) {
             return;
         }
 
@@ -420,26 +420,26 @@ export class BookmarkManager {
 
     private doEditBookmark(uniqueId: string, newValues: any) {
         const bookmarkInfo = this.findBookmark(uniqueId);
-        if(!bookmarkInfo) {
+        if (!bookmarkInfo) {
             return;
         }
 
         const originalProperties = _.cloneDeep(bookmarkInfo);
-        for(const key of Object.keys(newValues)) {
+        for (const key of Object.keys(newValues)) {
             bookmarkInfo[key] = newValues[key];
         }
         this.validateHangInPoint(bookmarkInfo);
 
         const editedKeys = [];
-        for(const key of Object.keys(newValues)) {
-            if(_.isEqual(bookmarkInfo[key], originalProperties[key])) {
+        for (const key of Object.keys(newValues)) {
+            if (_.isEqual(bookmarkInfo[key], originalProperties[key])) {
                 continue;
             }
 
             editedKeys.push(key);
         }
 
-        if(editedKeys.length === 0) {
+        if (editedKeys.length === 0) {
             return;
         }
 
@@ -448,12 +448,12 @@ export class BookmarkManager {
     }
 
     private validateHangInPoint(entry: Partial<BookmarkBase>) {
-        if(entry.previousEntry) {
+        if (entry.previousEntry) {
             const previousEntry = this.findBookmark(entry.previousEntry);
-            if(!previousEntry) {
+            if (!previousEntry) {
                 logError(LogCategory.BOOKMARKS, tr("New bookmark previous entry does not exists. Clearing it."));
                 entry.previousEntry = undefined;
-            } else if(previousEntry.parentEntry !== entry.parentEntry) {
+            } else if (previousEntry.parentEntry !== entry.parentEntry) {
                 logWarn(LogCategory.BOOKMARKS, tr("Previous entries parent does not match our entries parent. Updating our parent from %s to %s"), entry.parentEntry, previousEntry.parentEntry);
                 entry.parentEntry = previousEntry.parentEntry;
             }
@@ -461,13 +461,13 @@ export class BookmarkManager {
 
             const openList = this.registeredBookmarks.filter(e1 => e1.parentEntry === entry.parentEntry);
             let currentEntry = entry;
-            while(true) {
-                if(!currentEntry.previousEntry) {
+            while (true) {
+                if (!currentEntry.previousEntry) {
                     break;
                 }
 
                 const previousEntry = openList.find(entry => entry.uniqueId === currentEntry.previousEntry);
-                if(!previousEntry) {
+                if (!previousEntry) {
                     logError(LogCategory.BOOKMARKS, tr("Found circular dependency within the previous entry or one of the previous entries does not exists. Clearing out previous entry."));
                     entry.previousEntry = undefined;
                     break;
@@ -478,22 +478,22 @@ export class BookmarkManager {
             }
         }
 
-        if(entry.parentEntry) {
+        if (entry.parentEntry) {
             const parentEntry = this.findBookmark(entry.parentEntry);
-            if(!parentEntry) {
+            if (!parentEntry) {
                 logError(LogCategory.BOOKMARKS, tr("Missing parent entry %s. Clearing it."), entry.parentEntry);
                 entry.parentEntry = undefined;
             }
 
             const openList = this.registeredBookmarks.slice();
             let currentEntry = entry;
-            while(true) {
-                if(!currentEntry.parentEntry) {
+            while (true) {
+                if (!currentEntry.parentEntry) {
                     break;
                 }
 
                 const parentEntry = openList.find(entry => entry.uniqueId === currentEntry.parentEntry);
-                if(!parentEntry) {
+                if (!parentEntry) {
                     logError(LogCategory.BOOKMARKS, tr("Found circular dependency within a parent or one of the parents does not exists. Clearing out parent."));
                     entry.parentEntry = undefined;
                     break;
@@ -504,9 +504,9 @@ export class BookmarkManager {
             }
         }
 
-        if(entry.previousEntry) {
+        if (entry.previousEntry) {
             this.registeredBookmarks.forEach(bookmark => {
-                if(bookmark.previousEntry === entry.previousEntry && bookmark !== entry) {
+                if (bookmark.previousEntry === entry.previousEntry && bookmark !== entry) {
                     bookmark.previousEntry = bookmark.uniqueId;
                 }
             });
diff --git a/shared/js/settings.ts b/shared/js/settings.ts
index 98cb2a0e..d8ef500f 100644
--- a/shared/js/settings.ts
+++ b/shared/js/settings.ts
@@ -364,7 +364,7 @@ export class Settings {
     static readonly KEY_I18N_DEFAULT_REPOSITORY: ValuedRegistryKey<string> = {
         key: "i18n.default_repository",
         valueType: "string",
-        defaultValue: "https://web.teaspeak.de/i18n/"
+        defaultValue: "i18n/"
     };
 
     /* Default client states */
diff --git a/shared/js/ui/modal/connect/Controller.ts b/shared/js/ui/modal/connect/Controller.ts
index 50a99a7a..ece66462 100644
--- a/shared/js/ui/modal/connect/Controller.ts
+++ b/shared/js/ui/modal/connect/Controller.ts
@@ -1,25 +1,25 @@
-import {Registry} from "tc-shared/events";
+import { Registry } from "tc-shared/events";
 import {
     ConnectUiEvents,
     ConnectUiVariables,
 } from "tc-shared/ui/modal/connect/Definitions";
-import {LogCategory, logError, logWarn} from "tc-shared/log";
+import { LogCategory, logError, logWarn } from "tc-shared/log";
 import {
     availableConnectProfiles,
     ConnectionProfile,
     defaultConnectProfile,
     findConnectProfile
 } from "tc-shared/profiles/ConnectionProfile";
-import {Settings, settings} from "tc-shared/settings";
-import {connectionHistory, ConnectionHistoryEntry} from "tc-shared/connectionlog/History";
-import {createErrorModal} from "tc-shared/ui/elements/Modal";
-import {ConnectionHandler} from "tc-shared/ConnectionHandler";
-import {server_connections} from "tc-shared/ConnectionManager";
-import {parseServerAddress} from "tc-shared/tree/Server";
-import {spawnSettingsModal} from "tc-shared/ui/modal/ModalSettings";
-import {UiVariableProvider} from "tc-shared/ui/utils/Variable";
-import {createIpcUiVariableProvider} from "tc-shared/ui/utils/IpcVariable";
-import {spawnModal} from "tc-shared/ui/react-elements/modal";
+import { Settings, settings } from "tc-shared/settings";
+import { connectionHistory, ConnectionHistoryEntry } from "tc-shared/connectionlog/History";
+import { createErrorModal } from "tc-shared/ui/elements/Modal";
+import { ConnectionHandler } from "tc-shared/ConnectionHandler";
+import { server_connections } from "tc-shared/ConnectionManager";
+import { parseServerAddress } from "tc-shared/tree/Server";
+import { spawnSettingsModal } from "tc-shared/ui/modal/ModalSettings";
+import { UiVariableProvider } from "tc-shared/ui/utils/Variable";
+import { createIpcUiVariableProvider } from "tc-shared/ui/utils/IpcVariable";
+import { spawnModal } from "tc-shared/ui/react-elements/modal";
 import ipRegex from "ip-regex";
 
 const kRegexDomain = /^(localhost|((([a-zA-Z0-9_-]{0,63}\.){0,253})?[a-zA-Z0-9_-]{0,63}\.[a-zA-Z]{2,64}))$/i;
@@ -61,7 +61,8 @@ class ConnectController {
     private validateNickname: boolean;
     private validateAddress: boolean;
 
-    constructor(uiVariables: UiVariableProvider<ConnectUiVariables>) {7
+    constructor(uiVariables: UiVariableProvider<ConnectUiVariables>) {
+        7
         this.uiEvents = new Registry<ConnectUiEvents>();
         this.uiEvents.enableDebug("modal-connect");
 
@@ -71,7 +72,7 @@ class ConnectController {
         this.validateNickname = false;
         this.validateAddress = false;
 
-        this.defaultAddress = "ts.teaspeak.de";
+        this.defaultAddress = "tea.lp.kle.li";
         this.historyShown = settings.getValue(Settings.KEY_CONNECT_SHOW_HISTORY);
 
         this.currentAddress = settings.getValue(Settings.KEY_CONNECT_ADDRESS);
@@ -109,11 +110,11 @@ class ConnectController {
         }));
 
         this.uiVariables.setVariableProvider("server_address_valid", () => {
-            if(this.validateAddress) {
+            if (this.validateAddress) {
                 const address = this.currentAddress || this.defaultAddress || "";
                 const parsedAddress = parseServerAddress(address);
 
-                if(parsedAddress) {
+                if (parsedAddress) {
                     kRegexDomain.lastIndex = 0;
                     return kRegexDomain.test(parsedAddress.host) || ipRegex({ exact: true }).test(parsedAddress.host);
                 } else {
@@ -125,7 +126,7 @@ class ConnectController {
         });
 
         this.uiVariables.setVariableEditor("server_address", newValue => {
-            if(this.currentAddress === newValue.currentAddress) {
+            if (this.currentAddress === newValue.currentAddress) {
                 return false;
             }
 
@@ -139,7 +140,7 @@ class ConnectController {
         }));
 
         this.uiVariables.setVariableProvider("nickname_valid", () => {
-            if(this.validateNickname) {
+            if (this.validateNickname) {
                 const nickname = this.currentNickname || this.currentProfile?.connectUsername() || "";
                 return nickname.length >= 3 && nickname.length <= 30;
             } else {
@@ -148,7 +149,7 @@ class ConnectController {
         });
 
         this.uiVariables.setVariableEditor("nickname", newValue => {
-            if(this.currentNickname === newValue.currentNickname) {
+            if (this.currentNickname === newValue.currentNickname) {
                 return false;
             }
 
@@ -166,7 +167,7 @@ class ConnectController {
         }));
 
         this.uiVariables.setVariableEditor("password", newValue => {
-            if(this.currentPassword === newValue.password) {
+            if (this.currentPassword === newValue.password) {
                 return false;
             }
 
@@ -179,7 +180,7 @@ class ConnectController {
 
         this.uiVariables.setVariableProvider("historyShown", () => this.historyShown);
         this.uiVariables.setVariableEditor("historyShown", newValue => {
-            if(this.historyShown === newValue) {
+            if (this.historyShown === newValue) {
                 return false;
             }
 
@@ -188,8 +189,8 @@ class ConnectController {
             return true;
         });
 
-        this.uiVariables.setVariableProvider("history",async () => {
-            if(!this.history) {
+        this.uiVariables.setVariableProvider("history", async () => {
+            if (!this.history) {
                 this.history = await connectionHistory.lastConnectedServers(10);
             }
 
@@ -237,7 +238,7 @@ class ConnectController {
 
         this.uiVariables.setVariableEditor("profiles", newValue => {
             const profile = findConnectProfile(newValue.selected);
-            if(!profile) {
+            if (!profile) {
                 createErrorModal(tr("Invalid profile"), tr("Target connect profile is missing.")).open();
                 return false;
             }
@@ -252,16 +253,16 @@ class ConnectController {
         this.uiVariables.destroy();
     }
 
-    generateConnectParameters() : ConnectParameters | undefined {
-        if(!this.uiVariables.getVariableSync("nickname_valid", undefined, true)) {
+    generateConnectParameters(): ConnectParameters | undefined {
+        if (!this.uiVariables.getVariableSync("nickname_valid", undefined, true)) {
             return undefined;
         }
 
-        if(!this.uiVariables.getVariableSync("server_address_valid", undefined, true)) {
+        if (!this.uiVariables.getVariableSync("server_address_valid", undefined, true)) {
             return undefined;
         }
 
-        if(!this.uiVariables.getVariableSync("profile_valid", undefined, true)) {
+        if (!this.uiVariables.getVariableSync("profile_valid", undefined, true)) {
             return undefined;
         }
 
@@ -279,7 +280,7 @@ class ConnectController {
     }
 
     setSelectedHistoryId(id: number | -1) {
-        if(this.selectedHistoryId === id) {
+        if (this.selectedHistoryId === id) {
             return;
         }
 
@@ -287,7 +288,7 @@ class ConnectController {
         this.uiVariables.sendVariable("history");
 
         const historyEntry = this.history?.find(entry => entry.id === id);
-        if(!historyEntry) { return; }
+        if (!historyEntry) { return; }
 
         this.currentAddress = historyEntry.targetAddress;
         this.currentNickname = historyEntry.nickname;
@@ -300,12 +301,12 @@ class ConnectController {
     }
 
     setSelectedAddress(address: string | undefined, validate: boolean, updateUi: boolean) {
-        if(this.currentAddress !== address) {
+        if (this.currentAddress !== address) {
             this.currentAddress = address;
             settings.setValue(Settings.KEY_CONNECT_ADDRESS, address);
             this.setSelectedHistoryId(-1);
 
-            if(updateUi) {
+            if (updateUi) {
                 this.uiVariables.sendVariable("server_address");
             }
         }
@@ -315,7 +316,7 @@ class ConnectController {
     }
 
     setSelectedProfile(profile: ConnectionProfile | undefined) {
-        if(this.currentProfile === profile) {
+        if (this.currentProfile === profile) {
             return;
         }
 
@@ -347,11 +348,11 @@ export function spawnConnectModalNew(options: ConnectModalOptions) {
     const variableProvider = createIpcUiVariableProvider();
     const controller = new ConnectController(variableProvider);
 
-    if(typeof options.selectedAddress === "string") {
+    if (typeof options.selectedAddress === "string") {
         controller.setSelectedAddress(options.selectedAddress, false, true);
     }
 
-    if(typeof options.selectedProfile === "object") {
+    if (typeof options.selectedProfile === "object") {
         controller.setSelectedProfile(options.selectedProfile);
     }
 
@@ -363,7 +364,7 @@ export function spawnConnectModalNew(options: ConnectModalOptions) {
 
     controller.uiEvents.on("action_connect", event => {
         const parameters = controller.generateConnectParameters();
-        if(!parameters) {
+        if (!parameters) {
             /* invalid parameters detected */
             return;
         }
@@ -371,14 +372,14 @@ export function spawnConnectModalNew(options: ConnectModalOptions) {
         modal.destroy();
 
         let connection: ConnectionHandler;
-        if(event.newTab) {
+        if (event.newTab) {
             connection = server_connections.spawnConnectionHandler();
             server_connections.setActiveConnectionHandler(connection);
         } else {
             connection = server_connections.getActiveConnectionHandler();
         }
 
-        if(!connection) {
+        if (!connection) {
             return;
         }
 
diff --git a/shared/js/ui/react-elements/ChatBox.tsx b/shared/js/ui/react-elements/ChatBox.tsx
index 8f3b2ec1..32c4b331 100644
--- a/shared/js/ui/react-elements/ChatBox.tsx
+++ b/shared/js/ui/react-elements/ChatBox.tsx
@@ -1,14 +1,16 @@
 import * as React from "react";
-import {useEffect, useRef, useState} from "react";
-import {Registry} from "tc-shared/events";
+import { useEffect, useRef, useState } from "react";
+import { Registry } from "tc-shared/events";
+
+import { settings, Settings } from "tc-shared/settings";
+import { Translatable } from "tc-shared/ui/react-elements/i18n";
+
+import Picker from '@emoji-mart/react'
+import data from '@emoji-mart/data'
+import { Emoji, init } from "emoji-mart";
+
+init({ data })
 
-import '!style-loader!css-loader!emoji-mart/css/emoji-mart.css'
-import {Picker, emojiIndex} from 'emoji-mart'
-import {settings, Settings} from "tc-shared/settings";
-import {Translatable} from "tc-shared/ui/react-elements/i18n";
-import {getTwenmojiHashFromNativeEmoji} from "tc-shared/text/bbcode/EmojiUtil";
-import {BaseEmoji} from "emoji-mart";
-import {useGlobalSetting} from "tc-shared/ui/react-elements/Helper";
 
 const cssStyle = require("./ChatBox.scss");
 
@@ -28,34 +30,26 @@ interface ChatBoxEvents {
 }
 
 const LastUsedEmoji = () => {
-    const settingValue = useGlobalSetting(Settings.KEY_CHAT_LAST_USED_EMOJI);
-    const lastEmoji: BaseEmoji = (emojiIndex.emojis[settingValue] || emojiIndex.emojis["joy"]) as any;
-    if(!lastEmoji?.native) {
-        return <img key={"fallback"} alt={""} src={"img/smiley-smile.svg"} />;
-    }
-
-    return (
-        <img draggable={false} src={"https://twemoji.maxcdn.com/v/12.1.2/72x72/" + getTwenmojiHashFromNativeEmoji(lastEmoji.native) + ".png"} alt={lastEmoji.native} className={cssStyle.emoji} />
-    )
+    return <img key={"fallback"} alt={""} src={"img/smiley.png"} />;
 }
 
 const EmojiButton = (props: { events: Registry<ChatBoxEvents> }) => {
-    const [ shown, setShown ] = useState(false);
-    const [ enabled, setEnabled ] = useState(false);
+    const [shown, setShown] = useState(false);
+    const [enabled, setEnabled] = useState(false);
 
     const refContainer = useRef();
 
     useEffect(() => {
-        if(!shown) {
+        if (!shown) {
             return;
         }
 
         const clickListener = (event: MouseEvent) => {
             let target = event.target as HTMLElement;
-            while(target && target !== refContainer.current)
+            while (target && target !== refContainer.current)
                 target = target.parentElement;
 
-            if(target === refContainer.current && target)
+            if (target === refContainer.current && target)
                 return;
 
             setShown(false);
@@ -76,22 +70,21 @@ const EmojiButton = (props: { events: Registry<ChatBoxEvents> }) => {
             <div className={cssStyle.picker} style={{ display: shown ? undefined : "none" }}>
                 {!shown ? undefined :
                     <Picker
+                        data={data}
                         key={"picker"}
-                        set={"twitter"}
-                        theme={"light"}
+                        set={"native"}
+                        noCountryFlags={true}
                         showPreview={true}
                         title={""}
-                        showSkinTones={true}
-                        useButton={false}
-                        native={false}
+                        skinTonePosition={"none"}
 
-                        onSelect={(emoji: any) => {
-                            if(enabled) {
-                                settings.setValue(Settings.KEY_CHAT_LAST_USED_EMOJI, emoji.id as string);
+                        onEmojiSelect={(emoji: any) => {
+                            if (enabled) {
                                 props.events.fire("action_insert_text", { text: emoji.native, focus: true });
                             }
                         }}
                     />
+
                 }
             </div>
         </div>
@@ -101,27 +94,27 @@ const EmojiButton = (props: { events: Registry<ChatBoxEvents> }) => {
 const pasteTextTransformElement = document.createElement("div");
 
 const nodeToText = (element: Node) => {
-    if(element instanceof Text) {
+    if (element instanceof Text) {
         return element.textContent;
-    } else if(element instanceof HTMLElement) {
-        if(element instanceof HTMLImageElement) {
+    } else if (element instanceof HTMLElement) {
+        if (element instanceof HTMLImageElement) {
             return element.alt || element.title;
-        } else if(element instanceof HTMLBRElement) {
+        } else if (element instanceof HTMLBRElement) {
             return '\n';
-        } else if(element instanceof HTMLAnchorElement) {
+        } else if (element instanceof HTMLAnchorElement) {
             const content = [...element.childNodes].map(nodeToText).join("");
 
-            if(element.href) {
-                if(settings.getValue(Settings.KEY_CHAT_ENABLE_MARKDOWN)) {
-                    if(content && element.title) {
+            if (element.href) {
+                if (settings.getValue(Settings.KEY_CHAT_ENABLE_MARKDOWN)) {
+                    if (content && element.title) {
                         return `[${content}](${element.href} "${element.title}")`;
-                    } else if(content) {
+                    } else if (content) {
                         return `[${content}](${element.href})`;
                     } else {
                         return `[${element.href}](${element.href})`;
                     }
-                } else if(settings.getValue(Settings.KEY_CHAT_ENABLE_BBCODE)) {
-                    if(content) {
+                } else if (settings.getValue(Settings.KEY_CHAT_ENABLE_BBCODE)) {
+                    if (content) {
                         return `[url=${element.href}]${content}"[/url]`;
                     } else {
                         return `[url]${element.href}"[/url]`;
@@ -134,11 +127,11 @@ const nodeToText = (element: Node) => {
             }
         }
 
-        if(element.children.length > 0) {
+        if (element.children.length > 0) {
             return [...element.childNodes].map(nodeToText).join("");
         }
 
-        return typeof(element.innerText) === "string" ? element.innerText : "";
+        return typeof (element.innerText) === "string" ? element.innerText : "";
     } else {
         return "";
     }
@@ -146,19 +139,19 @@ const nodeToText = (element: Node) => {
 
 const htmlEscape = (message: string) => {
     pasteTextTransformElement.innerText = message;
-    message =  pasteTextTransformElement.innerHTML;
+    message = pasteTextTransformElement.innerHTML;
     return message.replace(/ /g, '&nbsp;');
 };
 
 const TextInput = (props: { events: Registry<ChatBoxEvents>, enabled?: boolean, placeholder?: string }) => {
-    const [ enabled, setEnabled ] = useState(!!props.enabled);
-    const [ historyIndex, setHistoryIndex ] = useState(-1);
+    const [enabled, setEnabled] = useState(!!props.enabled);
+    const [historyIndex, setHistoryIndex] = useState(-1);
     const history = useRef([]);
     const refInput = useRef<HTMLInputElement>();
     const typingTimeout = useRef(undefined);
 
     const triggerTyping = () => {
-        if(typeof typingTimeout.current === "number")
+        if (typeof typingTimeout.current === "number")
             return;
 
         props.events.fire("notify_typing");
@@ -182,7 +175,7 @@ const TextInput = (props: { events: Registry<ChatBoxEvents>, enabled?: boolean,
         event.preventDefault();
 
         const clipboard = event.clipboardData || (window as any).clipboardData;
-        if(!clipboard) return;
+        if (!clipboard) return;
 
         const rawText = clipboard.getData('text/plain');
         const selection = window.getSelection();
@@ -191,7 +184,7 @@ const TextInput = (props: { events: Registry<ChatBoxEvents>, enabled?: boolean,
         }
 
         let htmlXML = clipboard.getData('text/html');
-        if(!htmlXML) {
+        if (!htmlXML) {
             pasteTextTransformElement.textContent = rawText;
             htmlXML = pasteTextTransformElement.innerHTML;
         }
@@ -235,33 +228,33 @@ const TextInput = (props: { events: Registry<ChatBoxEvents>, enabled?: boolean,
         triggerTyping();
 
         const inputEmpty = refInput.current.innerText.trim().length === 0;
-        if(event.key === "Enter" && !event.shiftKey) {
-            if(inputEmpty) {
+        if (event.key === "Enter" && !event.shiftKey) {
+            if (inputEmpty) {
                 return;
             }
 
             const text = refInput.current.innerText;
             props.events.fire("action_submit_message", { message: text });
             history.current.push(text);
-            while(history.current.length > 10) {
+            while (history.current.length > 10) {
                 history.current.pop_front();
             }
 
             refInput.current.innerText = "";
             setHistoryIndex(-1);
             event.preventDefault();
-        } else if(event.key === "ArrowUp") {
+        } else if (event.key === "ArrowUp") {
             const inputOriginal = history.current[historyIndex] === refInput.current.innerText;
-            if(inputEmpty && (historyIndex === -1 || !inputOriginal)) {
+            if (inputEmpty && (historyIndex === -1 || !inputOriginal)) {
                 setHistory(history.current.length - 1);
                 event.preventDefault();
-            } else if(historyIndex > 0 && inputOriginal) {
+            } else if (historyIndex > 0 && inputOriginal) {
                 setHistory(historyIndex - 1);
                 event.preventDefault();
             }
-        } else if(event.key === "ArrowDown") {
-            if(history.current[historyIndex] === refInput.current.innerText) {
-                if(historyIndex < history.current.length - 1) {
+        } else if (event.key === "ArrowDown") {
+            if (history.current[historyIndex] === refInput.current.innerText) {
+                if (historyIndex < history.current.length - 1) {
                     setHistory(historyIndex + 1);
                 } else {
                     setHistory(-1);
@@ -273,7 +266,7 @@ const TextInput = (props: { events: Registry<ChatBoxEvents>, enabled?: boolean,
 
     props.events.reactUse("action_request_focus", () => refInput.current?.focus());
     props.events.reactUse("notify_typing", () => {
-        if(typeof typingTimeout.current === "number") {
+        if (typeof typingTimeout.current === "number") {
             return;
         }
 
@@ -281,15 +274,15 @@ const TextInput = (props: { events: Registry<ChatBoxEvents>, enabled?: boolean,
     });
     props.events.reactUse("action_insert_text", event => {
         refInput.current.innerHTML = refInput.current.innerHTML + event.text;
-        if(event.focus) {
+        if (event.focus) {
             refInput.current.focus();
         }
     });
     props.events.reactUse("action_set_enabled", event => {
         setEnabled(event.enabled);
-        if(!event.enabled) {
+        if (!event.enabled) {
             const text = refInput.current.innerText;
-            if(text.trim().length !== 0)
+            if (text.trim().length !== 0)
                 history.current.push(text);
             refInput.current.innerText = "";
         }
@@ -324,17 +317,17 @@ export interface ChatBoxState {
 }
 
 const MarkdownFormatHelper = () => {
-    const [ visible, setVisible ] = useState(settings.getValue(Settings.KEY_CHAT_ENABLE_MARKDOWN));
+    const [visible, setVisible] = useState(settings.getValue(Settings.KEY_CHAT_ENABLE_MARKDOWN));
 
     settings.events.reactUse("notify_setting_changed", event => {
-        if(event.setting !== Settings.KEY_CHAT_ENABLE_MARKDOWN.key) {
+        if (event.setting !== Settings.KEY_CHAT_ENABLE_MARKDOWN.key) {
             return;
         }
 
         setVisible(settings.getValue(Settings.KEY_CHAT_ENABLE_MARKDOWN));
     });
 
-    if(visible) {
+    if (visible) {
         return (
             <div key={"help"} className={cssStyle.containerHelp}>*italic*, **bold**, ~~strikethrough~~, `code`, <Translatable>and more</Translatable>...</div>
         );
@@ -380,7 +373,7 @@ export class ChatBox extends React.Component<ChatBoxProperties, ChatBoxState> {
     }
 
     componentDidUpdate(prevProps: Readonly<ChatBoxProperties>, prevState: Readonly<ChatBoxState>, snapshot?: any): void {
-        if(prevState.enabled !== this.state.enabled) {
+        if (prevState.enabled !== this.state.enabled) {
             this.events.fire_react("action_set_enabled", { enabled: this.state.enabled });
         }
     }