diff --git a/public/index.html b/public/index.html
index c370a6f..b438cc2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -477,7 +477,7 @@
                 <div class="center file-preview"></div>
                 <div class="row-reverse center btn-row wrap">
                     <button id="share-btn" class="btn btn-rounded btn-grey" data-i18n-key="dialogs.share" data-i18n-attrs="text" hidden></button>
-                    <button id="download-btn" class="btn btn-rounded btn-grey" data-i18n-key="dialogs.download" data-i18n-attrs="text" autofocus disabled></button>
+                    <button id="download-btn" class="btn btn-rounded btn-grey" data-i18n-key="dialogs.download" data-i18n-attrs="text" autofocus disabled hidden></button>
                     <button class="btn btn-rounded btn-grey" data-i18n-key="dialogs.close" data-i18n-attrs="text" close></button>
                 </div>
             </x-paper>
@@ -774,7 +774,7 @@
     <script src="scripts/ui-main.js" defer></script>
     <script src="scripts/main.js" defer></script>
     <!-- Sounds -->
-    <audio id="blop" autobuffer="true">
+    <audio id="blop" preload="metadata" disableremoteplayback="true" x-webkit-airplay="deny" muted>
         <source src="sounds/blop.mp3" type="audio/mpeg">
         <source src="sounds/blop.ogg" type="audio/ogg">
     </audio>
diff --git a/public/lang/ar.json b/public/lang/ar.json
index a3c333e..390b3d7 100644
--- a/public/lang/ar.json
+++ b/public/lang/ar.json
@@ -48,7 +48,6 @@
         "pairing-cleared": "جميع الأجهزة غير مقترنة",
         "notifications-enabled": "تم تمكين الإشعارات",
         "online-requirement-pairing": "يجب أن تكون متصلاً بالإنترنت لإقران الأجهزة",
-        "ios-memory-limit": "لا يمكن إرسال ملفات إلى iOS إلا بحجم يصل إلى 200 ميجابايت مرة واحدة",
         "online-requirement-public-room": "يجب أن تكون متصلاً بالإنترنت لإنشاء غرفة عامة",
         "copied-text-error": "فشلت الكتابة من الحافظة. انسخ يدويًا!",
         "download-successful": "تم تحميل {{descriptor}}",
diff --git a/public/lang/ca.json b/public/lang/ca.json
index c04e68f..fe2ead2 100644
--- a/public/lang/ca.json
+++ b/public/lang/ca.json
@@ -145,7 +145,6 @@
         "pairing-cleared": "Tots els dispositius desvinculats",
         "notifications-enabled": "Notificacions habilitades",
         "online-requirement-pairing": "Has d'estar en línia per vincular dispositius",
-        "ios-memory-limit": "Tan sols és possible enviar fitxers de fins a 200 MB a iOS",
         "online-requirement-public-room": "Cal que estiguis en línia per poder crear una sala pública",
         "room-url-copied-to-clipboard": "Enllaç a la sala pública copiat al porta-retalls",
         "copied-text-error": "L'escriptura al porta-retalls ha fallat. Copiar manualment!",
diff --git a/public/lang/de.json b/public/lang/de.json
index 30239b8..d1c2f50 100644
--- a/public/lang/de.json
+++ b/public/lang/de.json
@@ -138,7 +138,6 @@
         "message-transfer-completed": "Nachricht übertragen",
         "rate-limit-join-key": "Rate Limit erreicht. Warte 10 Sekunden und versuche es erneut.",
         "selected-peer-left": "Ausgewählter Peer ist gegangen",
-        "ios-memory-limit": "Für Übertragungen an iOS Geräte beträgt die maximale Dateigröße 200 MB",
         "public-room-left": "Öffentlichen Raum {{publicRoomId}} verlassen",
         "copied-to-clipboard-error": "Konnte nicht kopieren. Kopiere manuell.",
         "public-room-id-invalid": "Ungültige Raum-ID",
diff --git a/public/lang/en.json b/public/lang/en.json
index 54a05c6..4a1bd7b 100644
--- a/public/lang/en.json
+++ b/public/lang/en.json
@@ -158,11 +158,13 @@
         "connecting": "Connecting…",
         "files-incorrect": "Files are incorrect",
         "file-transfer-completed": "File transfer completed",
-        "ios-memory-limit": "Sending files to iOS is only possible up to 200 MB at once",
         "message-transfer-completed": "Message transfer completed",
         "unfinished-transfers-warning": "There are unfinished transfers. Are you sure you want to close PairDrop?",
         "rate-limit-join-key": "Rate limit reached. Wait 10 seconds and try again.",
-        "selected-peer-left": "Selected peer left"
+        "selected-peer-left": "Selected peer left",
+        "error-sharing-size": "Files too big to be shared. They can be downloaded instead.",
+        "error-sharing-default": "Error while sharing. It can be downloaded instead.",
+        "ram-exceed-ios": "One of the files is bigger than 250 MB and will crash the page on iOS. Use https and do not use private tabs on the iOS device to prevent this."
     },
     "document-titles": {
         "file-received": "File Received",
@@ -176,9 +178,14 @@
         "click-to-send-share-mode": "Click to send {{descriptor}}",
         "click-to-send": "Click to send files or right click to send a message",
         "connection-hash": "To verify the security of the end-to-end encryption, compare this security number on both devices",
+        "connecting": "Connecting…",
         "preparing": "Preparing…",
         "waiting": "Waiting…",
         "processing": "Processing…",
-        "transferring": "Transferring…"
+        "transferring": "Sending…",
+        "receiving": "Receiving…",
+        "transfer-complete": "Sent",
+        "receive-complete": "Received",
+        "error": "Error"
     }
 }
diff --git a/public/lang/es.json b/public/lang/es.json
index cbed16a..7df466c 100644
--- a/public/lang/es.json
+++ b/public/lang/es.json
@@ -64,7 +64,6 @@
         "pairing-cleared": "Todos los dispositivos han sido desemparejados",
         "notifications-enabled": "Notificaciones habilitadas",
         "online-requirement-pairing": "Debes estar en línea para emparejar dispositivos",
-        "ios-memory-limit": "Enviar archivos a iOS sólo admite hasta 200 MB a la vez",
         "online-requirement-public-room": "Debes estar en línea para crear una sala pública",
         "copied-text-error": "Error al escribir en el portapapeles. ¡Cópielo manualmente!",
         "download-successful": "{{descriptor}} descargado",
diff --git a/public/lang/fr.json b/public/lang/fr.json
index 3c782ea..9c782d8 100644
--- a/public/lang/fr.json
+++ b/public/lang/fr.json
@@ -156,7 +156,6 @@
         "connecting": "Connexion…",
         "files-incorrect": "Les fichiers sont incorrects",
         "file-transfer-completed": "Transfert de fichier terminé",
-        "ios-memory-limit": "L'envoi de fichiers vers iOS n'est possible que jusqu'à 200 Mo à la fois",
         "message-transfer-completed": "Transfert de message terminé",
         "unfinished-transfers-warning": "Il y a des transferts inachevés. Êtes-vous sûr de vouloir fermer PairDrop ?",
         "rate-limit-join-key": "Limite de débit atteinte. Attendez 10 secondes et réessayez.",
diff --git a/public/lang/id.json b/public/lang/id.json
index ba921a1..e218ec2 100644
--- a/public/lang/id.json
+++ b/public/lang/id.json
@@ -48,7 +48,6 @@
         "pairing-cleared": "Semua Perangkat dilepaskan",
         "notifications-enabled": "Notifikasi diaktifkan",
         "online-requirement-pairing": "Anda harus online untuk memasangkan perangkat",
-        "ios-memory-limit": "Mengirim file ke iOS hanya dapat dilakukan hingga 200 MB sekaligus",
         "online-requirement-public-room": "Anda harus online untuk membuat ruang publik",
         "copied-text-error": "Menyalin ke papan klip gagal. Salinlah secara manual!",
         "download-successful": "{{descriptor}} diunduh",
diff --git a/public/lang/it.json b/public/lang/it.json
index c89880f..f24a882 100644
--- a/public/lang/it.json
+++ b/public/lang/it.json
@@ -143,7 +143,6 @@
         "pairing-cleared": "Tutti i dispositivi sono stati dissociati",
         "notifications-enabled": "Notifiche attivate",
         "online-requirement-pairing": "Devi essere online per associare dispositivi",
-        "ios-memory-limit": "L'invio di file a dispositivi iOS è possibile solo 200 MB alla volta",
         "online-requirement-public-room": "Devi essere online per creare una stanza pubblica",
         "copied-text-error": "Scrittura negli appunti fallita. Copia manualmente!",
         "download-successful": "{{descriptor}} scaricato",
diff --git a/public/lang/ja.json b/public/lang/ja.json
index c6a5dad..09c9153 100644
--- a/public/lang/ja.json
+++ b/public/lang/ja.json
@@ -48,7 +48,6 @@
         "pairing-cleared": "全てのデバイスとのペアリングを解除しました",
         "notifications-enabled": "通知が有効になりました",
         "online-requirement-pairing": "ペアリングするにはオンラインである必要があります",
-        "ios-memory-limit": "iOSへのファイル送信は一度に200MBまでしかできません",
         "online-requirement-public-room": "公開ルームを作成するにはオンラインである必要があります",
         "copied-text-error": "クリップボードにコピーできませんでした。手動でコピーしてください。",
         "download-successful": "{{descriptor}}をダウンロードしました",
diff --git a/public/lang/kn.json b/public/lang/kn.json
index 2407b0c..8b353a8 100644
--- a/public/lang/kn.json
+++ b/public/lang/kn.json
@@ -128,7 +128,6 @@
         "pairing-cleared": "ಎಲ್ಲಾ ಸಾಧನಗಳನ್ನು ಜೋಡಿಯಾಗಿ ತೆಗೆಯಲಾಗಿದೆ",
         "notifications-enabled": "ಸೂಚನೆಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ",
         "online-requirement-pairing": "ಸಾಧನಗಳನ್ನು ಜೋಡಿಸಲು ನೀವು ಆನ್‌ಲೈನ್‌ ಇರಬೇಕು",
-        "ios-memory-limit": "iOSಗೆ ಫೈಲ್‌ಗಳನ್ನು ಕಳುಹಿಸುವುದು ಒಂದೇ ಬಾರಿಗೆ 200 MB ವರೆಗೆ ಮಾತ್ರ ಸಾಧ್ಯವಾಗಿದೆ",
         "online-requirement-public-room": "ಸಾರ್ವಜನಿಕ ಕೊಠಡಿಯನ್ನು ರಚಿಸಲು ನೀವು ಆನ್‌ಲೈನ್‌ ಇರಬೇಕು",
         "room-url-copied-to-clipboard": "ಸಾರ್ವಜನಿಕ ಕೊಠಡಿಯ ಲಿಂಕ್ ಅನ್ನು ಕ್ಲಿಪ್‌ಬೋರ್ಡ್‌ಗೆ ನಕಲಿಸಲಾಗಿದೆ",
         "copied-text-error": "ಕ್ಲಿಪ್‌ಬೋರ್ಡ್‌ಗೆ ಬರೆಯುವುದು ವಿಫಲವಾಗಿದೆ. ಕೈಯಾರೆ ನಕಲಿಸಿ!",
diff --git a/public/lang/nb.json b/public/lang/nb.json
index d9a4022..fc7c13d 100644
--- a/public/lang/nb.json
+++ b/public/lang/nb.json
@@ -116,7 +116,6 @@
         "request-title": "{{name}} ønsker å overføre {{count}} {{descriptor}}",
         "message-received": "Melding mottatt av {{name}} - Klikk for å åpne",
         "files-incorrect": "Filene er uriktige",
-        "ios-memory-limit": "Forsendelse av filer til iOS er kun mulig opptil 200 MB av gangen",
         "unfinished-transfers-warning": "Lukk med ufullførte overføringer?",
         "rate-limit-join-key": "Forsøksgrense overskredet. Vent 10 sek. og prøv igjen."
     },
diff --git a/public/lang/nl.json b/public/lang/nl.json
index 801c34a..9fac9be 100644
--- a/public/lang/nl.json
+++ b/public/lang/nl.json
@@ -48,7 +48,6 @@
         "pairing-cleared": "Alle apparaten ontkoppeld",
         "notifications-enabled": "Meldingen geactiveerd",
         "online-requirement-pairing": "U moet online zijn om apparaten te koppelen",
-        "ios-memory-limit": "Bestandsoverdrachten naar iOS kunnen slechts met 200 MB per keer",
         "online-requirement-public-room": "U moet online zijn om een openbare kamer te maken",
         "copied-text-error": "Schrijven naar klembord mislukt. Kopieer handmatig!",
         "download-successful": "{{descriptor}} downloaden",
diff --git a/public/lang/pt-BR.json b/public/lang/pt-BR.json
index fa1b50d..e73960f 100644
--- a/public/lang/pt-BR.json
+++ b/public/lang/pt-BR.json
@@ -153,7 +153,6 @@
         "connecting": "Conectando…",
         "files-incorrect": "Os arquivos estão incorretos",
         "file-transfer-completed": "Transferência de arquivo concluída",
-        "ios-memory-limit": "Enviar arquivos para iOS só é possível até 200 MB de uma vez",
         "message-transfer-completed": "Transferência de mensagem concluída",
         "unfinished-transfers-warning": "Há transferências inacabadas. Tem certeza de que deseja fechar o PairDrop?",
         "rate-limit-join-key": "Limite de taxa atingido. Aguarde 10 segundos e tente novamente.",
diff --git a/public/lang/ro.json b/public/lang/ro.json
index 70b8ceb..dfb7a26 100644
--- a/public/lang/ro.json
+++ b/public/lang/ro.json
@@ -48,7 +48,6 @@
         "pairing-cleared": "Toate dispozitivele sunt decuplate",
         "notifications-enabled": "Notificări activate",
         "online-requirement-pairing": "Trebuie să fiți online pentru a asocia dispozitivele",
-        "ios-memory-limit": "Trimiterea de fișiere pe iOS este posibilă doar până la 200 MB simultan",
         "online-requirement-public-room": "Trebuie să fiți online pentru a crea o cameră publică",
         "copied-text-error": "Scrierea în clipboard a eșuat. Copiați manual!",
         "download-successful": "{{descriptor}} descărcat",
diff --git a/public/lang/ru.json b/public/lang/ru.json
index 5e7b041..29ce346 100644
--- a/public/lang/ru.json
+++ b/public/lang/ru.json
@@ -124,7 +124,6 @@
         "online-requirement": "Для сопряжения устройств вам нужно быть в сети.",
         "files-incorrect": "Файлы неверны",
         "message-transfer-completed": "Передача сообщения завершена",
-        "ios-memory-limit": "Отправка файлов на iOS устройства возможна только до 200 МБ за один раз",
         "selected-peer-left": "Выбранный узел вышел",
         "request-title": "{{name}} хотел бы передать {{count}} {{descriptor}}",
         "rate-limit-join-key": "Достигнут предел скорости. Подождите 10 секунд и повторите попытку.",
diff --git a/public/lang/zh-CN.json b/public/lang/zh-CN.json
index 53e0a1b..35907f7 100644
--- a/public/lang/zh-CN.json
+++ b/public/lang/zh-CN.json
@@ -154,7 +154,6 @@
         "files-incorrect": "文件不正确",
         "file-transfer-completed": "文件传输已完成",
         "connecting": "连接中…",
-        "ios-memory-limit": "向 iOS 发送文件 一次最多只能发送 200 MB",
         "rate-limit-join-key": "已达连接限制。请等待 10秒 后再试。",
         "public-room-left": "已退出公共房间 {{publicRoomId}}",
         "copied-to-clipboard-error": "无法复制。请手动复制。",
diff --git a/public/manifest.json b/public/manifest.json
index 63a9bb9..4a3239b 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -28,7 +28,7 @@
     "background_color": "#efefef",
     "start_url": "/",
     "scope": "/",
-    "display": "minimal-ui",
+    "display": "standalone",
     "theme_color": "#3367d6",
     "screenshots" : [
         {
diff --git a/public/scripts/browser-tabs-connector.js b/public/scripts/browser-tabs-connector.js
index da9c43e..c4cfc49 100644
--- a/public/scripts/browser-tabs-connector.js
+++ b/public/scripts/browser-tabs-connector.js
@@ -2,18 +2,27 @@ class BrowserTabsConnector {
     constructor() {
         this.bc = new BroadcastChannel('pairdrop');
         this.bc.addEventListener('message', e => this._onMessage(e));
-        Events.on('broadcast-send', e => this._broadcastSend(e.detail));
+        Events.on('broadcast-send', e => this._broadcastSend(e.detail.type, e.detail.data));
+        Events.on('broadcast-self-display-name-changed', e => this._onBroadcastSelfDisplayNameChanged(e.detail.displayName));
     }
 
-    _broadcastSend(message) {
-        this.bc.postMessage(message);
+    _broadcastSend(type, data) {
+        this.bc.postMessage({ type, data });
+    }
+
+    _onBroadcastSelfDisplayNameChanged(displayName) {
+        this._broadcastSend('self-display-name-changed', { displayName: displayName });
     }
 
     _onMessage(e) {
-        console.log('Broadcast:', e.data)
-        switch (e.data.type) {
+        const type = e.data.type;
+        const data = e.data.data;
+
+        Logger.debug('Broadcast:', type, data);
+
+        switch (type) {
             case 'self-display-name-changed':
-                Events.fire('self-display-name-changed', e.data.detail);
+                Events.fire('self-display-name-changed', data.displayName);
                 break;
         }
     }
@@ -25,6 +34,11 @@ class BrowserTabsConnector {
             : false;
     }
 
+    static isOnlyTab() {
+        let peerIdsBrowser = JSON.parse(localStorage.getItem('peer_ids_browser'));
+        return peerIdsBrowser.length <= 1;
+    }
+
     static async addPeerIdToLocalStorage() {
         const peerId = sessionStorage.getItem('peer_id');
         if (!peerId) return false;
diff --git a/public/scripts/localization.js b/public/scripts/localization.js
index 72b3453..def67df 100644
--- a/public/scripts/localization.js
+++ b/public/scripts/localization.js
@@ -2,28 +2,28 @@ class Localization {
     constructor() {
         Localization.$htmlRoot = document.querySelector('html');
 
-        Localization.defaultLocale = "en";
-        Localization.supportedLocales = ["ar", "be", "ca", "da", "de", "en", "es", "fr", "he", "hu", "id", "it", "ja", "kn", "nb", "nl", "pl", "pt-BR", "ro", "ru", "tr", "zh-CN", "zh-TW"];
-        Localization.supportedLocalesRtl = ["ar", "he"];
+        Localization.localeDefault = "en";
+        Localization.localesSupported = ["ar", "be", "ca", "da", "de", "en", "es", "fr", "he", "hu", "id", "it", "ja", "kn", "nb", "nl", "pl", "pt-BR", "ro", "ru", "tr", "zh-CN", "zh-TW"];
+        Localization.localesRtl = ["ar", "he"];
 
         Localization.translations = {};
         Localization.translationsDefaultLocale = {};
 
-        Localization.systemLocale = Localization.getSupportedOrDefaultLocales(navigator.languages);
+        Localization.localeSystem = Localization.getSupportedOrDefaultLocales(navigator.languages);
 
         let storedLanguageCode = localStorage.getItem('language_code');
 
-        Localization.initialLocale = storedLanguageCode && Localization.localeIsSupported(storedLanguageCode)
+        Localization.localeInitial = storedLanguageCode && Localization.localeIsSupported(storedLanguageCode)
             ? storedLanguageCode
-            : Localization.systemLocale;
+            : Localization.localeSystem;
     }
 
     static localeIsSupported(locale) {
-        return Localization.supportedLocales.indexOf(locale) > -1;
+        return Localization.localesSupported.indexOf(locale) > -1;
     }
 
     static localeIsRtl(locale) {
-        return Localization.supportedLocalesRtl.indexOf(locale) > -1;
+        return Localization.localesRtl.indexOf(locale) > -1;
     }
 
     static currentLocaleIsRtl() {
@@ -31,7 +31,7 @@ class Localization {
     }
 
     static currentLocaleIsDefault() {
-        return Localization.locale === Localization.defaultLocale
+        return Localization.locale === Localization.localeDefault
     }
 
     static getSupportedOrDefaultLocales(locales) {
@@ -44,15 +44,15 @@ class Localization {
         // If there is no perfect match for browser locales, try generic locales first before resorting to the default locale
         return locales.find(Localization.localeIsSupported)
             || localesGeneric.find(Localization.localeIsSupported)
-            || Localization.defaultLocale;
+            || Localization.localeDefault;
     }
 
     async setInitialTranslation() {
-        await Localization.setTranslation(Localization.initialLocale)
+        await Localization.setTranslation(Localization.localeInitial)
     }
 
     static async setTranslation(locale) {
-        if (!locale) locale = Localization.systemLocale;
+        if (!locale) locale = Localization.localeSystem;
 
         await Localization.setLocale(locale)
         await Localization.translatePage();
@@ -67,8 +67,8 @@ class Localization {
         Localization.$htmlRoot.setAttribute('lang', locale);
 
 
-        console.log("Page successfully translated",
-            `System language: ${Localization.systemLocale}`,
+        Logger.debug("Page successfully translated",
+            `System language: ${Localization.localeSystem}`,
             `Selected language: ${locale}`
         );
 
@@ -78,7 +78,7 @@ class Localization {
     static async setLocale(newLocale) {
         if (newLocale === Localization.locale) return false;
 
-        Localization.defaultTranslations = await Localization.fetchTranslationsFor(Localization.defaultLocale);
+        Localization.translationsDefaultLocale = await Localization.fetchTranslationsFor(Localization.localeDefault);
 
         const newTranslations = await Localization.fetchTranslationsFor(newLocale);
 
@@ -145,7 +145,7 @@ class Localization {
             translation = translationObj[lastKey];
 
         } catch (e) {
-            console.error(e);
+            Logger.error(e);
         }
 
         if (!translation) {
@@ -179,7 +179,7 @@ class Localization {
         }
         catch (e) {
             // Log warnings and help calls
-            console.warn(e);
+            Logger.warn(e);
             Localization.logTranslationMissingOrBroken(key, attr, data, useDefault);
             Localization.logHelpCallKey(key, attr);
             Localization.logHelpCall();
@@ -192,7 +192,7 @@ class Localization {
             else {
                 // Is not default locale yet
                 // Get translation for default language with same arguments
-                console.log(`Using default language ${Localization.defaultLocale.toUpperCase()} instead.`);
+                Logger.debug(`Using default language ${Localization.localeDefault.toUpperCase()} instead.`);
                 translation = this.getTranslation(key, attr, data, true);
             }
         }
@@ -202,14 +202,14 @@ class Localization {
 
     static logTranslationMissingOrBroken(key, attr, data, useDefault) {
         let usedLocale = useDefault
-            ? Localization.defaultLocale.toUpperCase()
+            ? Localization.localeDefault.toUpperCase()
             : Localization.locale.toUpperCase();
 
-        console.warn(`Missing or broken translation for language ${usedLocale}.\n`, 'key:', key, 'attr:', attr, 'data:', data);
+        Logger.warn(`Missing or broken translation for language ${usedLocale}.\n`, 'key:', key, 'attr:', attr, 'data:', data);
     }
 
     static logHelpCall() {
-        console.log("Help translating PairDrop: https://hosted.weblate.org/engage/pairdrop/");
+        Logger.warn("Help translating PairDrop: https://hosted.weblate.org/engage/pairdrop/");
     }
 
     static logHelpCallKey(key, attr) {
@@ -219,7 +219,7 @@ class Localization {
             ? key
             : `${key}_${attr}`;
 
-        console.warn(`Translate this string here: https://hosted.weblate.org/browse/pairdrop/pairdrop-spa/${locale}/?q=${keyComplete}`);
+        Logger.warn(`Translate this string here: https://hosted.weblate.org/browse/pairdrop/pairdrop-spa/${locale}/?q=${keyComplete}`);
     }
 
     static escapeHTML(unsafeText) {
diff --git a/public/scripts/main.js b/public/scripts/main.js
index 8960ed2..750d7f9 100644
--- a/public/scripts/main.js
+++ b/public/scripts/main.js
@@ -1,3 +1,23 @@
+class Logger {
+
+    static debug(message, ...optionalParams) {
+        if (window.debugMode) {
+            console.debug("DEBUG:", message, ...optionalParams);
+        }
+    }
+    static log(message, ...optionalParams) {
+        console.log("LOG:", message, ...optionalParams);
+    }
+
+    static warn(message, ...optionalParams) {
+        console.warn("WARN:", message, ...optionalParams);
+    }
+
+    static error(message, ...optionalParams) {
+        console.error("ERROR:", message, ...optionalParams);
+    }
+}
+
 class PairDrop {
 
     constructor() {
@@ -34,14 +54,14 @@ class PairDrop {
 
         this.initialize()
             .then(_ => {
-                console.log("Initialization completed.");
+                Logger.log("Initialization completed.");
             });
     }
 
     async initialize() {
         // Translate page before fading in
         await this.localization.setInitialTranslation()
-        console.log("Initial translation successful.");
+        Logger.log("Initial translation successful.");
 
         // Show "Loading..." until connected to WsServer
         await this.footerUI.showLoading();
@@ -56,16 +76,16 @@ class PairDrop {
         await this.backgroundCanvas.fadeIn();
 
         // Load deferred assets
-        console.log("Load deferred assets...");
+        Logger.log("Load deferred assets...");
         await this.loadDeferredAssets();
-        console.log("Loading of deferred assets completed.");
+        Logger.log("Loading of deferred assets completed.");
 
-        console.log("Hydrate UI...");
+        Logger.log("Hydrate UI...");
         await this.hydrate();
-        console.log("UI hydrated.");
+        Logger.log("UI hydrated.");
 
         // Evaluate url params as soon as ws is connected
-        console.log("Evaluate URL params as soon as websocket connection is established.");
+        Logger.log("Evaluate URL params as soon as websocket connection is established.");
         Events.on('ws-connected', _ => this.evaluateUrlParams(), {once: true});
     }
 
@@ -74,14 +94,14 @@ class PairDrop {
             navigator.serviceWorker
                 .register('service-worker.js')
                 .then(serviceWorker => {
-                    console.log('Service Worker registered');
+                    Logger.log('Service Worker registered');
                     window.serviceWorker = serviceWorker
                 });
         }
     }
 
     onPwaInstallable(e) {
-        if (!window.matchMedia('(display-mode: minimal-ui)').matches) {
+        if (!window.matchMedia('(display-mode: standalone)').matches) {
             // only display install btn when not installed
             this.$headerInstallBtn.removeAttribute('hidden');
             this.$headerInstallBtn.addEventListener('click', () => {
@@ -117,6 +137,7 @@ class PairDrop {
             let stylesheet = document.createElement('link');
             stylesheet.rel = 'preload';
             stylesheet.as = 'style';
+            stylesheet.defer = true;
             stylesheet.href = url;
             stylesheet.onload = _ => {
                 stylesheet.onload = null;
@@ -133,10 +154,10 @@ class PairDrop {
         return new Promise( async (resolve) => {
             try {
                 await this.loadStyleSheet(url);
-                console.log(`Stylesheet loaded successfully: ${url}`);
+                Logger.log(`Stylesheet loaded successfully: ${url}`);
                 resolve();
             } catch (error) {
-                console.error('Error loading stylesheet:', error);
+                Logger.error('Error loading stylesheet:', error);
             }
         });
     }
@@ -156,10 +177,10 @@ class PairDrop {
         return new Promise( async (resolve) => {
             try {
                 await this.loadScript(url);
-                console.log(`Script loaded successfully: ${url}`);
+                Logger.log(`Script loaded successfully: ${url}`);
                 resolve();
             } catch (error) {
-                console.error('Error loading script:', error);
+                Logger.error('Error loading script:', error);
             }
         });
     }
@@ -229,12 +250,17 @@ class PairDrop {
                 this.publicRoomDialog._createPublicRoom();
             }
         }
+        else if (urlParams.has("debug") && urlParams.get("debug") === "true") {
+            window.debugMode = true;
+        }
 
-        // remove url params from url
-        const urlWithoutParams = getUrlWithoutArguments();
-        window.history.replaceState({}, "Rewrite URL", urlWithoutParams);
+        if (!window.debugMode) {
+            // remove url params from url
+            const urlWithoutParams = getUrlWithoutArguments();
+            window.history.replaceState({}, "Rewrite URL", urlWithoutParams);
+        }
 
-        console.log("URL params evaluated.");
+        Logger.log("URL params evaluated.");
     }
 }
 
diff --git a/public/scripts/network.js b/public/scripts/network.js
index 9128442..63daa31 100644
--- a/public/scripts/network.js
+++ b/public/scripts/network.js
@@ -27,16 +27,16 @@ class ServerConnection {
     }
 
     _getConfig() {
-        console.log("Loading config...")
+        Logger.log("Loading config...")
         return new Promise((resolve, reject) => {
             let xhr = new XMLHttpRequest();
             xhr.addEventListener("load", () => {
                 if (xhr.status === 200) {
                     // Config received
                     let config = JSON.parse(xhr.responseText);
-                    console.log("Config loaded:", config)
-                    this._config = config;
-                    Events.fire('config', config);
+                    Logger.log("Config loaded:", config)
+                    window._config = config;
+                    Events.fire('config-loaded');
                     resolve()
                 } else if (xhr.status < 200 || xhr.status >= 300) {
                     retry(xhr);
@@ -69,7 +69,7 @@ class ServerConnection {
 
     _connect() {
         clearTimeout(this._reconnectTimer);
-        if (this._isConnected() || this._isConnecting() || this._isOffline()) return;
+        if (this._isConnected() || this._isConnecting()) return;
         if (this._isReconnect) {
             Events.fire('notify-user', {
                 message: Localization.getTranslation("notifications.connecting"),
@@ -86,9 +86,11 @@ class ServerConnection {
     }
 
     _onOpen() {
-        console.log('WS: server connected');
+        Logger.log('WS: server connected');
         Events.fire('ws-connected');
-        if (this._isReconnect) Events.fire('notify-user', Localization.getTranslation("notifications.connected"));
+        if (this._isReconnect) {
+            Events.fire('notify-user', Localization.getTranslation("notifications.connected"));
+        }
     }
 
     _onPairDeviceInitiate() {
@@ -101,6 +103,7 @@ class ServerConnection {
 
     _onPairDeviceJoin(pairKey) {
         if (!this._isConnected()) {
+            // Todo: instead use pending outbound ws queue
             setTimeout(() => this._onPairDeviceJoin(pairKey), 1000);
             return;
         }
@@ -131,88 +134,82 @@ class ServerConnection {
         this.send({ type: 'leave-public-room' });
     }
 
-    _onMessage(msg) {
-        msg = JSON.parse(msg);
-        if (msg.type !== 'ping') console.log('WS receive:', msg);
-        switch (msg.type) {
+    _onMessage(message) {
+        const messageJSON = JSON.parse(message);
+        if (messageJSON.type !== 'ping' && messageJSON.type !== 'ws-relay') {
+            Logger.debug('WS receive:', messageJSON);
+        }
+        switch (messageJSON.type) {
             case 'ws-config':
-                this._setWsConfig(msg.wsConfig);
+                this._setWsConfig(messageJSON.wsConfig);
                 break;
             case 'peers':
-                this._onPeers(msg);
+                this._onPeers(messageJSON);
                 break;
             case 'peer-joined':
-                Events.fire('peer-joined', msg);
+                Events.fire('peer-joined', messageJSON);
                 break;
             case 'peer-left':
-                Events.fire('peer-left', msg);
+                Events.fire('peer-left', messageJSON);
                 break;
             case 'signal':
-                Events.fire('signal', msg);
+                Events.fire('signal', messageJSON);
                 break;
             case 'ping':
                 this.send({ type: 'pong' });
                 break;
             case 'display-name':
-                this._onDisplayName(msg);
+                this._onDisplayName(messageJSON);
                 break;
             case 'pair-device-initiated':
-                Events.fire('pair-device-initiated', msg);
+                Events.fire('pair-device-initiated', messageJSON);
                 break;
             case 'pair-device-joined':
-                Events.fire('pair-device-joined', msg);
+                Events.fire('pair-device-joined', messageJSON);
                 break;
             case 'pair-device-join-key-invalid':
                 Events.fire('pair-device-join-key-invalid');
                 break;
             case 'pair-device-canceled':
-                Events.fire('pair-device-canceled', msg.pairKey);
+                Events.fire('pair-device-canceled', messageJSON.pairKey);
                 break;
             case 'join-key-rate-limit':
                 Events.fire('notify-user', Localization.getTranslation("notifications.rate-limit-join-key"));
                 break;
             case 'secret-room-deleted':
-                Events.fire('secret-room-deleted', msg.roomSecret);
+                Events.fire('secret-room-deleted', messageJSON.roomSecret);
                 break;
             case 'room-secret-regenerated':
-                Events.fire('room-secret-regenerated', msg);
+                Events.fire('room-secret-regenerated', messageJSON);
                 break;
             case 'public-room-id-invalid':
-                Events.fire('public-room-id-invalid', msg.publicRoomId);
+                Events.fire('public-room-id-invalid', messageJSON.publicRoomId);
                 break;
             case 'public-room-created':
-                Events.fire('public-room-created', msg.roomId);
+                Events.fire('public-room-created', messageJSON.roomId);
                 break;
             case 'public-room-left':
                 Events.fire('public-room-left');
                 break;
-            case 'request':
-            case 'header':
-            case 'partition':
-            case 'partition-received':
-            case 'progress':
-            case 'files-transfer-response':
-            case 'file-transfer-complete':
-            case 'message-transfer-complete':
-            case 'text':
-            case 'display-name-changed':
-            case 'ws-chunk':
+            case 'ws-relay':
                 // ws-fallback
                 if (this._wsConfig.wsFallback) {
-                    Events.fire('ws-relay', JSON.stringify(msg));
+                    Events.fire('ws-relay', {peerId: messageJSON.sender.id, message: message});
                 }
                 else {
-                    console.log("WS receive: message type is for websocket fallback only but websocket fallback is not activated on this instance.")
+                    Logger.warn("WS receive: message type is for websocket fallback only but websocket fallback is not activated on this instance.")
                 }
                 break;
             default:
-                console.error('WS receive: unknown message type', msg);
+                Logger.error('WS receive: unknown message type', messageJSON);
         }
     }
 
     send(msg) {
         if (!this._isConnected()) return;
-        if (msg.type !== 'pong') console.log("WS send:", msg)
+        if (msg.type !== 'pong' && msg.type !== 'ws-relay') {
+            Logger.debug("WS send:", msg)
+        }
         this._socket.send(JSON.stringify(msg));
     }
 
@@ -230,7 +227,7 @@ class ServerConnection {
             .addPeerIdToLocalStorage()
             .then(peerId => {
                 if (!peerId) return;
-                console.log("successfully added peerId to localStorage");
+                Logger.debug("successfully added peerId to localStorage");
 
                 // Only now join rooms
                 Events.fire('join-ip-room');
@@ -246,8 +243,8 @@ class ServerConnection {
     _endpoint() {
         const protocol = location.protocol.startsWith('https') ? 'wss' : 'ws';
         // Check whether the instance specifies another signaling server otherwise use the current instance for signaling
-        let wsServerDomain = this._config.signalingServer
-            ? this._config.signalingServer
+        let wsServerDomain = window._config.signalingServer
+            ? window._config.signalingServer
             : location.host + location.pathname;
 
         let wsUrl = new URL(protocol + '://' + wsServerDomain + 'server');
@@ -271,7 +268,7 @@ class ServerConnection {
         BrowserTabsConnector
             .removePeerIdFromLocalStorage(peerId)
             .then(_ => {
-                console.log("successfully removed peerId from localStorage");
+                Logger.debug("successfully removed peerId from localStorage");
             });
 
         if (!this._socket) return;
@@ -284,7 +281,7 @@ class ServerConnection {
     }
 
     _onDisconnect() {
-        console.log('WS: server disconnected');
+        Logger.log('WS: server disconnected');
         setTimeout(() => {
             this._isReconnect = true;
             Events.fire('ws-disconnected');
@@ -310,7 +307,7 @@ class ServerConnection {
     }
 
     _onError(e) {
-        console.error(e);
+        Logger.error(e);
     }
 
     _reconnect() {
@@ -321,6 +318,14 @@ class ServerConnection {
 
 class Peer {
 
+    static STATE_IDLE = 'idle';
+    static STATE_PREPARE = 'prepare';
+    static STATE_TRANSFER_REQUEST_SENT = 'transfer-request-sent';
+    static STATE_TRANSFER_REQUEST_RECEIVED = 'transfer-request-received';
+    static STATE_RECEIVE_PROCEEDING = 'receive-proceeding';
+    static STATE_TRANSFER_PROCEEDING = 'transfer-proceeding';
+    static STATE_TEXT_SENT = 'text-sent';
+
     constructor(serverConnection, isCaller, peerId, roomType, roomId) {
         this._server = serverConnection;
         this._isCaller = isCaller;
@@ -332,19 +337,71 @@ class Peer {
         this._filesQueue = [];
         this._busy = false;
 
+        this._state = Peer.STATE_IDLE;
+
         // evaluate auto accept
         this._evaluateAutoAccept();
+
+        Events.on('beforeunload', e => this._onBeforeUnload(e));
+        Events.on('pagehide', _ => this._onPageHide());
     }
 
-    sendJSON(message) {
-        this._send(JSON.stringify(message));
+    _reset() {
+        this._state = Peer.STATE_IDLE;
+        this._busy = false;
+
+        clearInterval(this._updateStatusTextInterval);
+
+        this._updateStatusTextInterval = null;
+        this._bytesTotal = 0;
+        this._bytesReceivedFiles = 0;
+        this._timeStartTransferComplete = null;
+        this._timeStartTransferFile = null;
+        this._byteLogs = [];
+
+        // tidy up sender
+        this._filesRequested = null;
+        this._chunker = null;
+
+        // tidy up receiver
+        this._pendingRequest = null;
+        this._acceptedRequest = null;
+        this._filesReceived = [];
+
+        if (this._digester) {
+            this._digester.cleanUp();
+            this._digester = null;
+        }
+
+        // disable NoSleep if idle
+        Events.fire('evaluate-no-sleep');
     }
 
-    // Is overwritten in expanding classes
-    _send(message) {}
+    _refresh() {}
 
-    sendDisplayName(displayName) {
-        this.sendJSON({type: 'display-name-changed', displayName: displayName});
+    _disconnect() {
+        Events.fire('peer-disconnected', this._peerId);
+    }
+
+    _onDisconnected() {
+        this._reset();
+    }
+
+    _onBeforeUnload(e) {
+        if (this._busy) {
+            e.preventDefault();
+            return Localization.getTranslation("notifications.unfinished-transfers-warning");
+        }
+    }
+
+    _onPageHide() {
+        this._disconnect();
+    }
+
+    _onServerSignalMessage(message) {}
+
+    _setIsCaller(isCaller) {
+        this._isCaller = isCaller;
     }
 
     _isSameBrowser() {
@@ -381,7 +438,9 @@ class Peer {
             PersistentStorage
                 .deleteRoomSecret(this._getPairSecret())
                 .then(deletedRoomSecret => {
-                    if (deletedRoomSecret) console.log("Successfully deleted duplicate room secret with same peer: ", deletedRoomSecret);
+                    if (deletedRoomSecret) {
+                        Logger.debug("Successfully deleted duplicate room secret with same peer: ", deletedRoomSecret);
+                    }
                 });
         }
 
@@ -394,7 +453,7 @@ class Peer {
             &&  this._isCaller) {
             // increase security by initiating the increase of the roomSecret length
             // from 64 chars (<v1.7.0) to 256 chars (v1.7.0+)
-            console.log('RoomSecret is regenerated to increase security')
+            Logger.debug('RoomSecret is regenerated to increase security')
             Events.fire('regenerate-room-secret', this._getPairSecret());
         }
     }
@@ -433,14 +492,238 @@ class Peer {
             : false;
     }
 
-    async requestFileTransfer(files) {
+    _onPeerConnected() {
+        this._sendState();
+    }
+
+    _sendMessage(message) {}
+
+    _sendData(data) {}
+
+    async _onMessage(message) {
+        switch (message.type) {
+            case 'display-name-changed':
+                this._onDisplayNameChanged(message);
+                break;
+            case 'state':
+                await this._onState(message.state);
+                break;
+            case 'transfer-request':
+                await this._onTransferRequest(message);
+                break;
+            case 'transfer-request-response':
+                this._onTransferRequestResponse(message);
+                break;
+            case 'transfer-header':
+                this._onTransferHeader(message);
+                break;
+            case 'receive-confirmation':
+                this._onReceiveConfirmation(message.bytesReceived);
+                break;
+            case 'resend-request':
+                this._onResendRequest(message.offset);
+                break;
+            case 'file-receive-complete':
+                this._onFileReceiveComplete(message);
+                break;
+            case 'text':
+                this._onText(message);
+                break;
+            case 'text-receive-complete':
+                this._onTextReceiveComplete();
+                break;
+            default:
+                Logger.warn('RTC: Unknown message type:', message.type);
+        }
+    }
+    
+    _sendDisplayName(displayName) {
+        this._sendMessage({type: 'display-name-changed', displayName: displayName});
+    }
+
+    _onDisplayNameChanged(message) {
+        const displayNameHasChanged = message.displayName !== this._displayName;
+
+        if (!message.displayName || !displayNameHasChanged) return;
+
+        this._displayName = message.displayName;
+
+        const roomSecret = this._getPairSecret();
+
+        if (roomSecret) {
+            PersistentStorage
+                .updateRoomSecretDisplayName(roomSecret, message.displayName)
+                .then(roomSecretEntry => {
+                    Logger.debug(`Successfully updated DisplayName for roomSecretEntry ${roomSecretEntry.key}`);
+                })
+        }
+
+        Events.fire('peer-display-name-changed', {peerId: this._peerId, displayName: message.displayName});
+        Events.fire('notify-display-name-changed', { recipient: this._peerId });
+    }
+
+    _sendState() {
+        this._sendMessage({type: 'state', state: this._state})
+    }
+
+    async _onState(peerState) {
+        if (this._state === Peer.STATE_TRANSFER_PROCEEDING) {
+            this._onStateIfSender(peerState);
+        }
+        else if (this._state === Peer.STATE_RECEIVE_PROCEEDING) {
+            this._onStateIfReceiver(peerState);
+        }
+        else if (this._state === Peer.STATE_TRANSFER_REQUEST_SENT) {
+            await this._onStateIfTransferRequestSent(peerState);
+        }
+        else if (this._state === Peer.STATE_TRANSFER_REQUEST_RECEIVED) {
+            this._onStateIfTransferRequestReceived(peerState);
+        }
+    }
+
+    _onStateIfSender(peerState) {
+        // this peer is sender
+        if (peerState !== Peer.STATE_RECEIVE_PROCEEDING) {
+            this._abortTransfer();
+        }
+    }
+
+    _onStateIfReceiver(peerState) {
+        // this peer is receiver
+        switch (peerState) {
+            case Peer.STATE_TRANSFER_REQUEST_SENT:
+                // Reconnection during file transfer request. Send acceptance again.
+                this._sendTransferRequestResponse(true);
+                break;
+            case Peer.STATE_TRANSFER_PROCEEDING:
+                // Reconnection during receiving of file. Send request for resending
+                if (!this._digester) {
+                    this._abortTransfer();
+                }
+                const offset = this._digester._bytesReceived;
+                this._sendResendRequest(offset);
+                break;
+            default:
+                this._abortTransfer();
+        }
+    }
+
+    async _onStateIfTransferRequestSent(peerState) {
+        // This peer has sent a transfer request
+        // If other peer is still idle -> send request again
+        if (peerState === Peer.STATE_IDLE) {
+            await this._sendFileTransferRequest(this._filesRequested);
+        }
+    }
+
+    _onStateIfTransferRequestReceived(peerState) {
+        // This peer has received a transfer request
+        // If other peer is not in "STATE_TRANSFER_REQUEST_SENT" anymore -> reset and hide request from user
+        if (peerState !== Peer.STATE_TRANSFER_REQUEST_SENT) {
+            this._reset();
+            Events.fire('files-transfer-request-abort', {
+                peerId: this._peerId
+            })
+        }
+    }
+
+    _abortTransfer() {
+        Events.fire('set-progress', {peerId: this._peerId, progress: 0, status: 'error'});
+
+        if (this._digester) {
+            this._digester.abort();
+        }
+
+        this._reset();
+    }
+
+    _addLog(bytesReceivedTotal) {
+        const now = Date.now();
+
+        // Add log
+        this._byteLogs.push({
+            time: now,
+            bytesReceived: bytesReceivedTotal
+        });
+
+        // Always include at least 5 entries (2.5 MB) to increase precision
+        if (this._byteLogs.length < 5) return;
+
+        // Move running average to calculate with a window of 20s
+        while (now - this._byteLogs[0].time > 20000) {
+            this._byteLogs.shift();
+        }
+    }
+
+    _updateStatusText() {
+        const secondsSinceStart = Math.round((Date.now() - this._timeStartTransferComplete) / 1000);
+
+        // Wait for 10s to only show info on longer transfers and to increase precision
+        if (secondsSinceStart < 10) return;
+
+        // mode: 0 -> speed, 1 -> time left, 2 -> receive/transfer (statusText = null)
+        const mode = Math.round((secondsSinceStart - 10) / 5) % 3;
+        let statusText = null;
+
+        if (mode === 0) {
+            statusText = this._getSpeedString();
+        }
+        else if (mode === 1) {
+            statusText = this._getTimeString();
+        }
+
+        this._statusText = statusText;
+    }
+
+    _getSpeedKbPerSecond() {
+        const timeDifferenceSeconds = (this._byteLogs[this._byteLogs.length - 1].time - this._byteLogs[0].time) / 1000;
+        const bytesDifferenceKB = (this._byteLogs[this._byteLogs.length - 1].bytesReceived - this._byteLogs[0].bytesReceived) / 1000;
+        return Math.round(bytesDifferenceKB / timeDifferenceSeconds);
+    }
+
+    _getBytesLeft() {
+        return this._bytesTotal - this._byteLogs[this._byteLogs.length - 1].bytesReceived;
+    }
+
+    _getSecondsLeft() {
+        return Math.round(this._getBytesLeft() / this._getSpeedKbPerSecond() / 1000);
+    }
+
+    _getSpeedString() {
+        const speedKBs = this._getSpeedKbPerSecond();
+
+        if (speedKBs >= 1000) {
+            let speedMBs = Math.round(speedKBs / 100) / 10;
+            return `${speedMBs} MB/s`; // e.g. "2.2 MB/s"
+        }
+
+        return `${speedKBs} kB/s`; // e.g. "522 kB/s"
+    }
+
+    _getTimeString() {
+        const seconds = this._getSecondsLeft();
+        if (seconds > 60) {
+            let minutes = Math.floor(seconds / 60);
+            let secondsLeft = Math.floor(seconds % 60);
+            return `${minutes} min ${secondsLeft}s`; // e.g. // "1min 20s"
+        }
+        else {
+            return `${seconds}s`; // e.g. "35s"
+        }
+    }
+
+    // File Sender Only
+    async _sendFileTransferRequest(files) {
+        this._state = Peer.STATE_PREPARE;
+        Events.fire('set-progress', {peerId: this._peerId, progress: 0, status: 'prepare'});
+
         let header = [];
         let totalSize = 0;
-        let imagesOnly = true
-        for (let i=0; i<files.length; i++) {
-            Events.fire('set-progress', {peerId: this._peerId, progress: 0.8*i/files.length, status: 'prepare'})
+        let imagesOnly = true;
+
+        for (let i = 0; i < files.length; i++) {
             header.push({
-                name: files[i].name,
+                displayName: files[i].name,
                 mime: files[i].type,
                 size: files[i].size
             });
@@ -448,36 +731,68 @@ class Peer {
             if (files[i].type.split('/')[0] !== 'image') imagesOnly = false;
         }
 
-        Events.fire('set-progress', {peerId: this._peerId, progress: 0.8, status: 'prepare'})
-
-        let dataUrl = '';
+        let dataUrl = "";
         if (files[0].type.split('/')[0] === 'image') {
             try {
                 dataUrl = await getThumbnailAsDataUrl(files[0], 400, null, 0.9);
             } catch (e) {
-                console.error(e);
+                Logger.error(e);
             }
         }
 
-        Events.fire('set-progress', {peerId: this._peerId, progress: 1, status: 'prepare'})
+        this._state = Peer.STATE_TRANSFER_REQUEST_SENT;
+        Events.fire('set-progress', {peerId: this._peerId, progress: 0, status: 'wait'});
 
         this._filesRequested = files;
+        this._bytesTotal = totalSize;
 
-        this.sendJSON({type: 'request',
+        this._sendMessage({type: 'transfer-request',
             header: header,
             totalSize: totalSize,
             imagesOnly: imagesOnly,
             thumbnailDataUrl: dataUrl
         });
-        Events.fire('set-progress', {peerId: this._peerId, progress: 0, status: 'wait'})
+
+    }
+    
+    _onTransferRequestResponse(message) {
+        if (this._state !== Peer.STATE_TRANSFER_REQUEST_SENT) {
+            this._sendState();
+            return;
+        }
+
+        if (!message.accepted) {
+            if (message.reason === 'ram-exceed-ios') {
+                Events.fire('notify-user', Localization.getTranslation('notifications.ram-exceed-ios'));
+            }
+            Events.fire('set-progress', {peerId: this._peerId, progress: 0, status: 'idle'});
+            this._reset();
+            return;
+        }
+
+        Events.fire('file-transfer-accepted');
+        Events.fire('set-progress', {peerId: this._peerId, progress: 0, status: 'transfer'});
+        this._state = Peer.STATE_TRANSFER_PROCEEDING;
+        this._sendFiles();
     }
 
-    async sendFiles() {
-        for (let i=0; i<this._filesRequested.length; i++) {
+    _sendFiles() {
+        for (let i = 0; i < this._filesRequested.length; i++) {
             this._filesQueue.push(this._filesRequested[i]);
         }
         this._filesRequested = null
+
         if (this._busy) return;
+
+        this._byteLogs = [];
+        this._bytesReceivedFiles = 0;
+        this._timeStartTransferComplete = Date.now();
+
+        Events.fire('set-progress', {peerId: this._peerId, progress: 0, status: 'transfer'});
+
+        this._statusText = null;
+        this._updateStatusTextInterval = setInterval(() => this._updateStatusText(), 1000);
+
         this._dequeueFile();
     }
 
@@ -487,235 +802,322 @@ class Peer {
         this._sendFile(file);
     }
 
-    async _sendFile(file) {
-        this.sendJSON({
-            type: 'header',
+    _sendHeader(file) {
+        this._sendMessage({
+            type: 'transfer-header',
             size: file.size,
-            name: file.name,
+            displayName: file.name,
             mime: file.type
         });
-        this._chunker = new FileChunker(file,
-            chunk => this._send(chunk),
-            offset => this._onPartitionEnd(offset));
-        this._chunker.nextPartition();
     }
 
-    _onPartitionEnd(offset) {
-        this.sendJSON({ type: 'partition', offset: offset });
-    }
+    _sendFile(file) {}
 
-    _onReceivedPartitionEnd(offset) {
-        this.sendJSON({ type: 'partition-received', offset: offset });
-    }
-
-    _sendNextPartition() {
-        if (!this._chunker || this._chunker.isFileEnd()) return;
-        this._chunker.nextPartition();
-    }
-
-    _sendProgress(progress) {
-        this.sendJSON({ type: 'progress', progress: progress });
-    }
-
-    _onMessage(message) {
-        if (typeof message !== 'string') {
-            this._onChunkReceived(message);
+    _onResendRequest(offset) {
+        if (this._state !== Peer.STATE_TRANSFER_PROCEEDING || !this._chunker) {
+            this._sendTransferAbortion();
             return;
         }
-        const messageJSON = JSON.parse(message);
-        switch (messageJSON.type) {
-            case 'request':
-                this._onFilesTransferRequest(messageJSON);
-                break;
-            case 'header':
-                this._onFileHeader(messageJSON);
-                break;
-            case 'partition':
-                this._onReceivedPartitionEnd(messageJSON);
-                break;
-            case 'partition-received':
-                this._sendNextPartition();
-                break;
-            case 'progress':
-                this._onDownloadProgress(messageJSON.progress);
-                break;
-            case 'files-transfer-response':
-                this._onFileTransferRequestResponded(messageJSON);
-                break;
-            case 'file-transfer-complete':
-                this._onFileTransferCompleted();
-                break;
-            case 'message-transfer-complete':
-                this._onMessageTransferCompleted();
-                break;
-            case 'text':
-                this._onTextReceived(messageJSON);
-                break;
-            case 'display-name-changed':
-                this._onDisplayNameChanged(messageJSON);
-                break;
-        }
+        Logger.debug("Resend requested from offset:", offset)
+        this._chunker._resendFromOffset(offset);
     }
 
-    _onFilesTransferRequest(request) {
-        if (this._requestPending) {
-            // Only accept one request at a time per peer
-            this.sendJSON({type: 'files-transfer-response', accepted: false});
+    _onReceiveConfirmation(bytesReceived) {
+        if (!this._chunker || this._state !== Peer.STATE_TRANSFER_PROCEEDING) {
+            this._sendState();
             return;
         }
-        if (window.iOS && request.totalSize >= 200*1024*1024) {
-            // iOS Safari can only put 400MB at once to memory.
-            // Request to send them in chunks of 200MB instead:
-            this.sendJSON({type: 'files-transfer-response', accepted: false, reason: 'ios-memory-limit'});
+        this._chunker._onReceiveConfirmation(bytesReceived);
+
+        const bytesReceivedTotal = this._bytesReceivedFiles + bytesReceived;
+        const progress = Math.round(1e4 * bytesReceivedTotal / this._bytesTotal) / 1e4;
+
+        this._addLog(bytesReceivedTotal);
+
+        Events.fire('set-progress', {peerId: this._peerId, progress: progress, status: 'transfer', statusText: this._statusText});
+    }
+
+    _onFileReceiveComplete(message) {
+        if (this._state !== Peer.STATE_TRANSFER_PROCEEDING) {
+            this._sendState();
             return;
         }
 
-        this._requestPending = request;
+        this._bytesReceivedFiles += this._chunker._file.size;
 
+        this._chunker = null;
+
+        if (!message.success) {
+            Logger.warn('File could not be sent');
+            Events.fire('set-progress', {peerId: this._peerId, progress: 0, status: 'idle'});
+            this._reset();
+            return;
+        }
+
+        Logger.log(`File sent.\n\nSize: ${message.size} MB\tDuration: ${message.duration} s\tSpeed: ${message.speed} MB/s`);
+
+        if (this._filesQueue.length) {
+            this._dequeueFile();
+            return;
+        }
+
+        // No more files in queue. Transfer is complete
+        this._reset();
+        Events.fire('set-progress', {peerId: this._peerId, progress: 1, status: 'transfer-complete'});
+        Events.fire('notify-user', Localization.getTranslation("notifications.file-transfer-completed"));
+        Events.fire('files-sent'); // used by 'Snapdrop & PairDrop for Android' app
+    }
+
+    // File Receiver Only
+    async _onTransferRequest(request) {
+        // Only accept one request at a time per peer
+        if (this._pendingRequest) {
+            this._sendTransferRequestResponse(false);
+            return;
+        }
+
+        this.fileDigesterWorkerSupported = await SWFileDigester.isSupported();
+
+        Logger.debug('Digesting files via service workers is', this.fileDigesterWorkerSupported ? 'supported' : 'NOT supported');
+
+        // Check if each file must be loaded into RAM completely. This might lead to a page crash (Memory limit iOS Safari: ~380 MB)
+        if (!this.fileDigesterWorkerSupported) {
+            Logger.warn('Big file transfers might exceed the RAM of the receiver. Use a secure context (https) and do not use private tabs to prevent this.');
+
+            // Check if page will crash on iOS
+            if (window.iOS && await this._filesTooBigForSwOnIOS(request.header)) {
+                Events.fire('notify-user', Localization.getTranslation('notifications.ram-exceed-ios'));
+
+                // Would exceed RAM -> decline request
+                this._sendTransferRequestResponse(false, 'ram-exceed-ios');
+                return;
+            }
+        }
+
+        this._state = Peer.STATE_TRANSFER_REQUEST_RECEIVED;
+        this._pendingRequest = request;
+
+        // Automatically accept request if auto-accept is set to true via the Edit Paired Devices Dialog
         if (this._autoAccept) {
-            // auto accept if set via Edit Paired Devices Dialog
-            this._respondToFileTransferRequest(true);
+            this._sendTransferRequestResponse(true);
             return;
         }
 
-        // default behavior: show user transfer request
+        // Default behavior: show transfer request to user
         Events.fire('files-transfer-request', {
             request: request,
             peerId: this._peerId
         });
     }
 
-    _respondToFileTransferRequest(accepted) {
-        this.sendJSON({type: 'files-transfer-response', accepted: accepted});
+    async _filesTooBigForSwOnIOS(files) {
+        // Files over 250 MB crash safari if not handled via a service worker
+        for (let i = 0; i < files.length; i++) {
+            if (files[i].size > 250000000) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    _sendTransferRequestResponse(accepted, reason = null) {
+        let message = {type: 'transfer-request-response', accepted: accepted};
+
+        if (reason) {
+            message.reason = reason;
+        }
+
         if (accepted) {
-            this._requestAccepted = this._requestPending;
-            this._totalBytesReceived = 0;
+            this._state = Peer.STATE_RECEIVE_PROCEEDING;
             this._busy = true;
+            this._byteLogs = [];
             this._filesReceived = [];
+            this._acceptedRequest = this._pendingRequest;
+
+            this._bytesTotal = this._acceptedRequest.totalSize;
+            this._bytesReceivedFiles = 0;
+
+            Events.fire('set-progress', {peerId: this._peerId, progress: 0, status: 'receive'});
+
+            this._timeStartTransferComplete = Date.now();
+            this._statusText = null;
+            this._updateStatusTextInterval = setInterval(() => this._updateStatusText(), 1000);
         }
-        this._requestPending = null;
+
+        this._sendMessage(message);
     }
 
-    _onFileHeader(header) {
-        if (this._requestAccepted && this._requestAccepted.header.length) {
-            this._lastProgress = 0;
-            this._digester = new FileDigester({size: header.size, name: header.name, mime: header.mime},
-                this._requestAccepted.totalSize,
-                this._totalBytesReceived,
-                fileBlob => this._onFileReceived(fileBlob)
-            );
+    _onTransferHeader(header) {
+        if (this._state !== Peer.STATE_RECEIVE_PROCEEDING) {
+            this._sendState();
+            return;
         }
+
+        if (!this._fitsAcceptedHeader(header)) {
+            this._abortTransfer();
+            Events.fire('notify-user', Localization.getTranslation("notifications.files-incorrect"));
+            Logger.error("Received files differ from requested files. Abort!");
+            return;
+        }
+
+        this._timeStartTransferFile = Date.now();
+
+        this._addFileDigester(header);
     }
 
-    _abortTransfer() {
-        Events.fire('set-progress', {peerId: this._peerId, progress: 1, status: 'wait'});
-        Events.fire('notify-user', Localization.getTranslation("notifications.files-incorrect"));
-        this._filesReceived = [];
-        this._requestAccepted = null;
-        this._digester = null;
-        throw new Error("Received files differ from requested files. Abort!");
+    _addFileDigester(header) {
+        this._digester = this.fileDigesterWorkerSupported
+            ?   new FileDigesterViaWorker(
+                    {
+                        size: header.size,
+                        name: header.displayName,
+                        mime: header.mime
+                    },
+                file => this._fileReceived(file),
+                    bytesReceived => this._sendReceiveConfirmation(bytesReceived)
+                )
+            :   new FileDigesterViaBuffer(
+                    {
+                        size: header.size,
+                        name: header.displayName,
+                        mime: header.mime
+                    },
+                    file => this._fileReceived(file),
+                    bytesReceived => this._sendReceiveConfirmation(bytesReceived)
+                );
+    }
+
+    _sendReceiveConfirmation(bytesReceived) {
+        this._sendMessage({type: 'receive-confirmation', bytesReceived: bytesReceived});
+
+        const bytesReceivedTotal = this._bytesReceivedFiles + bytesReceived;
+        const progress = Math.round(1e4 * bytesReceivedTotal / this._bytesTotal) / 1e4;
+
+        this._addLog(bytesReceivedTotal);
+
+        Events.fire('set-progress', {peerId: this._peerId, progress: progress, status: 'receive', statusText: this._statusText});
+    }
+
+    _sendResendRequest(offset) {
+        this._sendMessage({ type: 'resend-request', offset: offset });
+    }
+
+    _sendTransferAbortion() {
+        this._sendMessage({type: 'file-receive-complete', success: false});
+    }
+
+    _onData(data) {
+        this._onChunkReceived(data);
     }
 
     _onChunkReceived(chunk) {
-        if(!this._digester || !(chunk.byteLength || chunk.size)) return;
-
-        this._digester.unchunk(chunk);
-        const progress = this._digester.progress;
-
-        if (progress > 1) {
-            this._abortTransfer();
-        }
-
-        this._onDownloadProgress(progress);
-
-        // occasionally notify sender about our progress
-        if (progress - this._lastProgress < 0.005 && progress !== 1) return;
-        this._lastProgress = progress;
-        this._sendProgress(progress);
-    }
-
-    _onDownloadProgress(progress) {
-        Events.fire('set-progress', {peerId: this._peerId, progress: progress, status: 'transfer'});
-    }
-
-    async _onFileReceived(fileBlob) {
-        const acceptedHeader = this._requestAccepted.header.shift();
-        this._totalBytesReceived += fileBlob.size;
-
-        this.sendJSON({type: 'file-transfer-complete'});
-
-        const sameSize = fileBlob.size === acceptedHeader.size;
-        const sameName = fileBlob.name === acceptedHeader.name
-        if (!sameSize || !sameName) {
-            this._abortTransfer();
-        }
-
-        // include for compatibility with 'Snapdrop & PairDrop for Android' app
-        Events.fire('file-received', fileBlob);
-
-        this._filesReceived.push(fileBlob);
-        if (!this._requestAccepted.header.length) {
-            this._busy = false;
-            Events.fire('set-progress', {peerId: this._peerId, progress: 0, status: 'process'});
-            Events.fire('files-received', {peerId: this._peerId, files: this._filesReceived, imagesOnly: this._requestAccepted.imagesOnly, totalSize: this._requestAccepted.totalSize});
-            this._filesReceived = [];
-            this._requestAccepted = null;
-        }
-    }
-
-    _onFileTransferCompleted() {
-        this._chunker = null;
-        if (!this._filesQueue.length) {
-            this._busy = false;
-            Events.fire('notify-user', Localization.getTranslation("notifications.file-transfer-completed"));
-            Events.fire('files-sent'); // used by 'Snapdrop & PairDrop for Android' app
-        }
-        else {
-            this._dequeueFile();
-        }
-    }
-
-    _onFileTransferRequestResponded(message) {
-        if (!message.accepted) {
-            Events.fire('set-progress', {peerId: this._peerId, progress: 1, status: 'wait'});
-            this._filesRequested = null;
-            if (message.reason === 'ios-memory-limit') {
-                Events.fire('notify-user', Localization.getTranslation("notifications.ios-memory-limit"));
-            }
+        if (this._state !== Peer.STATE_RECEIVE_PROCEEDING || !this._digester || !chunk.byteLength) {
+            this._sendState();
             return;
         }
-        Events.fire('file-transfer-accepted');
-        Events.fire('set-progress', {peerId: this._peerId, progress: 0, status: 'transfer'});
-        this.sendFiles();
+
+        try {
+            this._digester.unchunk(chunk);
+        }
+        catch (e) {
+            this._abortTransfer();
+            Logger.error(e);
+        }
     }
 
-    _onMessageTransferCompleted() {
+    _fileReceived(file) {
+        // File transfer complete
+        this._singleFileReceiveComplete(file);
+
+        // If less files received than header accepted -> wait for next file
+        if (this._filesReceived.length < this._acceptedRequest.header.length) return;
+
+        // We are done receiving
+        Events.fire('set-progress', {peerId: this._peerId, progress: 1, status: 'receive'});
+        Events.fire('set-progress', {peerId: this._peerId, progress: 0, status: 'process'});
+        this._allFilesReceiveComplete();
+    }
+
+    _fitsAcceptedHeader(header) {
+        if (!this._acceptedRequest) {
+            return false;
+        }
+
+        const positionFile = this._filesReceived.length;
+
+        if (positionFile > this._acceptedRequest.header.length - 1) {
+            return false;
+        }
+
+        // Check if file header fits
+        const acceptedHeader = this._acceptedRequest.header[positionFile];
+
+        const sameSize = header.size === acceptedHeader.size;
+        const sameType = header.mime === acceptedHeader.mime;
+        const sameName = header.displayName === acceptedHeader.displayName;
+
+        return sameSize && sameType && sameName;
+    }
+
+    _singleFileReceiveComplete(file) {
+        this._digester._fileCompleteCallback = null;
+        this._digester._sendReceiveConfimationCallback = null;
+        this._digester = null;
+
+        this._bytesReceivedFiles += file.size;
+
+        const duration = (Date.now() - this._timeStartTransferFile) / 1000; // s
+        const size = Math.round(10 * file.size / 1e6) / 10; // MB
+        const speed = Math.round(100 * size / duration) / 100; // MB/s
+
+        // Log speed from request to receive
+        Logger.log(`File received.\n\nSize: ${size} MB\tDuration: ${duration} s\tSpeed: ${speed} MB/s`);
+
+        // include for compatibility with 'Snapdrop & PairDrop for Android' app
+        Events.fire('file-received', {name: file.displayName, size: file.size});
+
+        this._filesReceived.push(file);
+
+        this._sendMessage({type: 'file-receive-complete', success: true, duration: duration, size: size, speed: speed});
+    }
+
+    _allFilesReceiveComplete() {
+        Events.fire('files-received', {
+            peerId: this._peerId,
+            files: this._filesReceived,
+            imagesOnly: this._acceptedRequest.imagesOnly,
+            totalSize: this._acceptedRequest.totalSize
+        });
+        this._reset();
+    }
+
+    // Message Sender Only
+    _sendText(text) {
+        this._state = Peer.STATE_TEXT_SENT;
+        const unescaped = btoa(unescape(encodeURIComponent(text)));
+        this._sendMessage({ type: 'text', text: unescaped });
+    }
+
+    _onTextReceiveComplete() {
+        if (this._state !== Peer.STATE_TEXT_SENT) {
+            this._sendState();
+            return;
+        }
+        this._reset();
         Events.fire('notify-user', Localization.getTranslation("notifications.message-transfer-completed"));
     }
 
-    sendText(text) {
-        const unescaped = btoa(unescape(encodeURIComponent(text)));
-        this.sendJSON({ type: 'text', text: unescaped });
-    }
-
-    _onTextReceived(message) {
+    // Message Receiver Only
+    _onText(message) {
         if (!message.text) return;
-        const escaped = decodeURIComponent(escape(atob(message.text)));
-        Events.fire('text-received', { text: escaped, peerId: this._peerId });
-        this.sendJSON({ type: 'message-transfer-complete' });
-    }
-
-    _onDisplayNameChanged(message) {
-        const displayNameHasChanged = this._displayName !== message.displayName
-
-        if (message.displayName && displayNameHasChanged) {
-            this._displayName = message.displayName;
+        try {
+            const escaped = decodeURIComponent(escape(atob(message.text)));
+            Events.fire('text-received', { text: escaped, peerId: this._peerId });
+            this._sendMessage({ type: 'text-receive-complete' });
+        }
+        catch (e) {
+            Logger.error(e);
         }
-
-        Events.fire('peer-display-name-changed', {peerId: this._peerId, displayName: message.displayName});
-
-        if (!displayNameHasChanged) return;
-        Events.fire('notify-peer-display-name-changed', this._peerId);
     }
 }
 
@@ -725,99 +1127,349 @@ class RTCPeer extends Peer {
         super(serverConnection, isCaller, peerId, roomType, roomId);
 
         this.rtcSupported = true;
-        this.rtcConfig = rtcConfig
+        this.rtcConfig = rtcConfig;
+
+        this.pendingInboundServerSignalMessages = [];
+        this.pendingOutboundMessages = [];
 
-        if (!this._isCaller) return; // we will listen for a caller
         this._connect();
     }
 
-    _connect() {
-        if (!this._conn || this._conn.signalingState === "closed") this._openConnection();
+    _connected() {
+        return this._conn && this._conn.connectionState === 'connected';
+    }
 
-        if (this._isCaller) {
-            this._openChannel();
-        }
-        else {
-            this._conn.ondatachannel = e => this._onChannelOpened(e);
-        }
+    _connecting() {
+        return this._conn
+            && (
+                this._conn.connectionState === 'new'
+                || this._conn.connectionState === 'connecting'
+            );
+    }
+
+    _messageChannelOpen() {
+        return this._messageChannel && this._messageChannel.readyState === 'open';
+    }
+
+    _dataChannelOpen() {
+        return this._dataChannel && this._dataChannel.readyState === 'open';
+    }
+
+    _messageChannelConnecting() {
+        return this._messageChannel && this._messageChannel.readyState === 'connecting';
+    }
+
+    _dataChannelConnecting() {
+        return this._dataChannel && this._dataChannel.readyState === 'connecting';
+    }
+
+    _channelOpen() {
+        return this._messageChannelOpen() && this._dataChannelOpen();
+    }
+
+    _channelConnecting() {
+        return (this._dataChannelConnecting() || this._dataChannelOpen())
+            && (this._messageChannelConnecting() || this._messageChannelOpen());
+    }
+
+    _stable() {
+        return this._connected() && this._channelOpen();
+    }
+
+    _connect() {
+        if (this._stable()) return;
+
+        Events.fire('peer-connecting', this._peerId);
+
+        this._openConnection();
+        this._openMessageChannel();
+        this._openDataChannel();
+
+        this._evaluatePendingInboundServerMessages()
+            .then((count) => {
+                if (count) {
+                    Logger.debug("Pending inbound messages evaluated.");
+                }
+            });
     }
 
     _openConnection() {
-        this._conn = new RTCPeerConnection(this.rtcConfig);
-        this._conn.onicecandidate = e => this._onIceCandidate(e);
-        this._conn.onicecandidateerror = e => this._onError(e);
-        this._conn.onconnectionstatechange = _ => this._onConnectionStateChange();
-        this._conn.oniceconnectionstatechange = e => this._onIceConnectionStateChange(e);
+        const conn = new RTCPeerConnection(this.rtcConfig);
+        conn.onnegotiationneeded = _ => this._onNegotiationNeeded();
+        conn.onsignalingstatechange = _ => this._onSignalingStateChanged();
+        conn.oniceconnectionstatechange = _ => this._onIceConnectionStateChange();
+        conn.onicegatheringstatechange = _ => this._onIceGatheringStateChanged();
+        conn.onconnectionstatechange = _ => this._onConnectionStateChange();
+        conn.onicecandidate = e => this._onIceCandidate(e);
+        conn.onicecandidateerror = e => this._onIceCandidateError(e);
+
+        this._conn = conn;
     }
 
-    _openChannel() {
-        if (!this._conn) return;
+    async _onNegotiationNeeded() {
+        Logger.debug('RTC: Negotiation needed');
 
-        const channel = this._conn.createDataChannel('data-channel', {
-            ordered: true,
-            reliable: true // Obsolete. See https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannel/reliable
-        });
-        channel.onopen = e => this._onChannelOpened(e);
-        channel.onerror = e => this._onError(e);
-
-        this._conn
-            .createOffer()
-            .then(d => this._onDescription(d))
-            .catch(e => this._onError(e));
+        if (this._isCaller) {
+            // Creating offer if required
+            Logger.debug('RTC: Creating offer');
+            const description = await this._conn.createOffer();
+            await this._handleLocalDescription(description);
+        }
     }
 
-    _onDescription(description) {
-        // description.sdp = description.sdp.replace('b=AS:30', 'b=AS:1638400');
-        this._conn
-            .setLocalDescription(description)
-            .then(_ => this._sendSignal({ sdp: description }))
-            .catch(e => this._onError(e));
+    _onSignalingStateChanged() {
+        Logger.debug('RTC: Signaling state changed:', this._conn.signalingState);
+    }
+
+    _onIceConnectionStateChange() {
+        Logger.debug('RTC: ICE connection state changed:', this._conn.iceConnectionState);
+    }
+
+    _onIceGatheringStateChanged() {
+        Logger.debug('RTC: ICE gathering state changed:', this._conn.iceConnectionState);
+    }
+
+    _onConnectionStateChange() {
+        Logger.debug('RTC: Connection state changed:', this._conn.connectionState);
+        switch (this._conn.connectionState) {
+            case 'disconnected':
+                this._refresh();
+                break;
+            case 'failed':
+                Logger.warn('RTC connection failed');
+                // Todo: if error is "TURN server needed" -> fallback to WS if activated
+                this._refresh();
+        }
     }
 
     _onIceCandidate(event) {
-        if (!event.candidate) return;
-        this._sendSignal({ ice: event.candidate });
+        this._handleLocalCandidate(event.candidate);
     }
 
-    onServerMessage(message) {
-        if (!this._conn) this._connect();
-
-        if (message.sdp) {
-            this._conn
-                .setRemoteDescription(message.sdp)
-                .then(_ => {
-                    if (message.sdp.type === 'offer') {
-                        return this._conn
-                            .createAnswer()
-                            .then(d => this._onDescription(d));
-                    }
-                })
-                .catch(e => this._onError(e));
-        }
-        else if (message.ice) {
-            this._conn
-                .addIceCandidate(new RTCIceCandidate(message.ice))
-                .catch(e => this._onError(e));
-        }
+    _onIceCandidateError(error) {
+        Logger.error(error);
     }
 
-    _onChannelOpened(event) {
-        console.log('RTC: channel opened with', this._peerId);
-        const channel = event.channel || event.target;
-        channel.binaryType = 'arraybuffer';
-        channel.onmessage = e => this._onMessage(e.data);
-        channel.onclose = _ => this._onChannelClosed();
-        this._channel = channel;
-        Events.on('beforeunload', e => this._onBeforeUnload(e));
-        Events.on('pagehide', _ => this._onPageHide());
+    _openMessageChannel() {
+        const messageCallback = e => this._onMessage(e.data);
+        this._messageChannel = this._openChannel("message-channel", 1, "json", messageCallback);
+    }
+
+    _openDataChannel() {
+        const messageCallback = e => this._onData(e.data);
+        this._dataChannel = this._openChannel("data-channel", 0, "raw", messageCallback);
+    }
+
+    _openChannel(label, id, protocol, messageCallback) {
+        const channel = this._conn.createDataChannel(label, {
+            ordered: true,
+            negotiated: true,
+            id: id,
+            protocol: protocol
+        });
+        channel.binaryType = "arraybuffer";
+        channel.onopen = e => this._onChannelOpened(e);
+        channel.onclose = e => this._onChannelClosed(e);
+        channel.onerror = e => this._onChannelError(e);
+        channel.onmessage = messageCallback;
+
+        return channel;
+    }
+
+    _onChannelOpened(e) {
+        Logger.debug(`RTC: Channel ${e.target.label} opened with`, this._peerId);
+
+        // wait until all channels are open
+        if (!this._stable()) return;
+
         Events.fire('peer-connected', {peerId: this._peerId, connectionHash: this.getConnectionHash()});
+        super._onPeerConnected();
+
+        this._sendPendingOutboundMessaged();
     }
 
-    _onMessage(message) {
-        if (typeof message === 'string') {
-            console.log('RTC:', JSON.parse(message));
+    _sendPendingOutboundMessaged() {
+        while (this._stable() && this.pendingOutboundMessages.length > 0) {
+            this._sendViaMessageChannel(this.pendingOutboundMessages.shift());
         }
-        super._onMessage(message);
+    }
+
+    _onChannelClosed(e) {
+        Logger.debug(`RTC: Channel ${e.target.label} closed`, this._peerId);
+        this._refresh();
+    }
+
+    _onChannelError(e) {
+        Logger.warn(`RTC: Channel ${e.target.label} error`, this._peerId);
+        Logger.error(e.error);
+    }
+
+    async _handleLocalDescription(localDescription) {
+        await this._conn.setLocalDescription(localDescription);
+
+        Logger.debug("RTC: Sending local description");
+        this._sendSignal({ signalType: 'description', description: localDescription });
+    }
+
+    async _handleRemoteDescription(remoteDescription) {
+        Logger.debug("RTC: Received remote description");
+        await this._conn.setRemoteDescription(remoteDescription);
+
+        if (!this._isCaller) {
+            // Creating answer if required
+            Logger.debug('RTC: Creating answer');
+            const localDescription = await this._conn.createAnswer();
+            await this._handleLocalDescription(localDescription);
+        }
+    }
+
+    _handleLocalCandidate(candidate) {
+        Logger.debug("RTC: Local candidate created", candidate);
+
+        if (candidate === null) {
+            return;
+        }
+
+        this._sendSignal({ signalType: 'candidate', candidate: candidate });
+    }
+
+    async _handleRemoteCandidate(candidate) {
+        Logger.debug("RTC: Received remote candidate", candidate);
+
+        if (candidate === null) {
+            return;
+        }
+
+        await this._conn.addIceCandidate(candidate);
+    }
+
+    async _evaluatePendingInboundServerMessages() {
+        let inboundMessagesEvaluatedCount = 0;
+        while (this.pendingInboundServerSignalMessages.length > 0) {
+            const message = this.pendingInboundServerSignalMessages.shift();
+
+            Logger.debug("Evaluate pending inbound message:", message);
+
+            await this._onServerSignalMessage(message);
+
+            inboundMessagesEvaluatedCount++;
+        }
+        return inboundMessagesEvaluatedCount;
+    }
+
+    async _onServerSignalMessage(message) {
+        if (this._conn === null) {
+            this.pendingInboundServerSignalMessages.push(message);
+            return;
+        }
+
+        switch (message.signalType) {
+            case 'description':
+                await this._handleRemoteDescription(message.description);
+                break;
+            case 'candidate':
+                await this._handleRemoteCandidate(message.candidate);
+                break;
+            default:
+                Logger.warn('Unknown signalType:', message.signalType);
+                break;
+        }
+    }
+
+
+    _refresh() {
+        Events.fire('peer-connecting', this._peerId);
+        this._closeChannelAndConnection();
+
+        this._connect(); // reopen the channel
+    }
+
+    _onDisconnected() {
+        super._onDisconnected();
+        this._closeChannelAndConnection();
+    }
+
+    _closeChannelAndConnection() {
+        if (this._dataChannel) {
+            this._dataChannel.onopen = null;
+            this._dataChannel.onclose = null;
+            this._dataChannel.onerror = null;
+            this._dataChannel.onmessage = null;
+            this._dataChannel.close();
+            this._dataChannel = null;
+        }
+        if (this._messageChannel) {
+            this._messageChannel.onopen = null;
+            this._messageChannel.onclose = null;
+            this._messageChannel.onerror = null;
+            this._messageChannel.onmessage = null;
+            this._messageChannel.close();
+            this._messageChannel = null;
+        }
+        if (this._conn) {
+            this._conn.onnegotiationneeded = null;
+            this._conn.onsignalingstatechange = null;
+            this._conn.oniceconnectionstatechange = null;
+            this._conn.onicegatheringstatechange = null;
+            this._conn.onconnectionstatechange = null;
+            this._conn.onicecandidate = null;
+            this._conn.onicecandidateerror = null;
+            this._conn.close();
+            this._conn = null;
+        }
+    }
+
+    _sendMessage(message) {
+        if (!this._stable() || this.pendingOutboundMessages.length > 0) {
+            // queue messages if not connected OR if connected AND queue is not empty
+            this.pendingOutboundMessages.push(message);
+            return;
+        }
+        this._sendViaMessageChannel(message);
+    }
+
+    _sendViaMessageChannel(message) {
+        Logger.debug('RTC Send:', message);
+        this._messageChannel.send(JSON.stringify(message));
+    }
+
+    _sendData(data) {
+        this._sendViaDataChannel(data)
+    }
+
+    _sendViaDataChannel(data) {
+        this._dataChannel.send(data);
+    }
+
+    _sendSignal(message) {
+        message.type = 'signal';
+        message.to = this._peerId;
+        message.roomType = this._getRoomTypes()[0];
+        message.roomId = this._roomIds[this._getRoomTypes()[0]];
+        this._server.send(message);
+    }
+
+    async _sendFile(file) {
+        this._chunker = new FileChunkerRTC(
+            file,
+            chunk => this._sendData(chunk),
+            this._conn,
+            this._dataChannel
+        );
+        this._chunker._readChunk();
+        this._sendHeader(file);
+        this._state = Peer.STATE_TRANSFER_PROCEEDING;
+    }
+
+    async _onMessage(message) {
+        Logger.debug('RTC Receive:', JSON.parse(message));
+        try {
+            message = JSON.parse(message);
+        } catch (e) {
+            Logger.warn("RTCPeer: Received JSON is malformed");
+            return;
+        }
+        await super._onMessage(message);
     }
 
     getConnectionHash() {
@@ -845,96 +1497,6 @@ class RTCPeer extends Peer {
         }
         return hash;
     }
-
-    _onBeforeUnload(e) {
-        if (this._busy) {
-            e.preventDefault();
-            return Localization.getTranslation("notifications.unfinished-transfers-warning");
-        }
-    }
-
-    _onPageHide() {
-        this._disconnect();
-    }
-
-    _disconnect() {
-        if (this._conn && this._channel) {
-            this._channel.onclose = null;
-            this._channel.close();
-        }
-        Events.fire('peer-disconnected', this._peerId);
-    }
-
-    _onChannelClosed() {
-        console.log('RTC: channel closed', this._peerId);
-        Events.fire('peer-disconnected', this._peerId);
-        if (!this._isCaller) return;
-        this._connect(); // reopen the channel
-    }
-
-    _onConnectionStateChange() {
-        console.log('RTC: state changed:', this._conn.connectionState);
-        switch (this._conn.connectionState) {
-            case 'disconnected':
-                Events.fire('peer-disconnected', this._peerId);
-                this._onError('rtc connection disconnected');
-                break;
-            case 'failed':
-                Events.fire('peer-disconnected', this._peerId);
-                this._onError('rtc connection failed');
-                break;
-        }
-    }
-
-    _onIceConnectionStateChange() {
-        switch (this._conn.iceConnectionState) {
-            case 'failed':
-                this._onError('ICE Gathering failed');
-                break;
-            default:
-                console.log('ICE Gathering', this._conn.iceConnectionState);
-        }
-    }
-
-    _onError(error) {
-        console.error(error);
-    }
-
-    _send(message) {
-        if (!this._channel) this.refresh();
-        this._channel.send(message);
-    }
-
-    _sendSignal(signal) {
-        signal.type = 'signal';
-        signal.to = this._peerId;
-        signal.roomType = this._getRoomTypes()[0];
-        signal.roomId = this._roomIds[this._getRoomTypes()[0]];
-        this._server.send(signal);
-    }
-
-    refresh() {
-        // check if channel is open. otherwise create one
-        if (this._isConnected() || this._isConnecting()) return;
-
-        // only reconnect if peer is caller
-        if (!this._isCaller) return;
-
-        this._connect();
-    }
-
-    _isConnected() {
-        return this._channel && this._channel.readyState === 'open';
-    }
-
-    _isConnecting() {
-        return this._channel && this._channel.readyState === 'connecting';
-    }
-
-    sendDisplayName(displayName) {
-        if (!this._isConnected()) return;
-        super.sendDisplayName(displayName);
-    }
 }
 
 class WSPeer extends Peer {
@@ -943,19 +1505,38 @@ class WSPeer extends Peer {
         super(serverConnection, isCaller, peerId, roomType, roomId);
 
         this.rtcSupported = false;
+        this.signalSuccessful = false;
 
         if (!this._isCaller) return; // we will listen for a caller
+
         this._sendSignal();
     }
 
-    _send(chunk) {
-        this.sendJSON({
-            type: 'ws-chunk',
-            chunk: arrayBufferToBase64(chunk)
+    _sendFile(file) {
+        this._sendHeader(file);
+        this._chunker = new FileChunkerWS(
+            file,
+            chunk => this._sendData(chunk)
+        );
+        this._chunker._readChunk();
+    }
+
+    _sendData(data) {
+        this._sendMessage({
+            type: 'chunk',
+            chunk: arrayBufferToBase64(data)
         });
     }
 
-    sendJSON(message) {
+    _sendMessage(message) {
+        message = {
+            type: 'ws-relay',
+            message: message
+        };
+        this._sendMessageViaServer(message);
+    }
+
+    _sendMessageViaServer(message) {
         message.to = this._peerId;
         message.roomType = this._getRoomTypes()[0];
         message.roomId = this._roomIds[this._getRoomTypes()[0]];
@@ -963,16 +1544,58 @@ class WSPeer extends Peer {
     }
 
     _sendSignal(connected = false) {
-        this.sendJSON({type: 'signal', connected: connected});
+        this._sendMessageViaServer({type: 'signal', connected: connected});
     }
 
-    onServerMessage(message) {
+    _onServerSignalMessage(message) {
         this._peerId = message.sender.id;
-        Events.fire('peer-connected', {peerId: message.sender.id, connectionHash: this.getConnectionHash()})
-        if (message.connected) return;
+
+        Events.fire('peer-connected', {peerId: this._peerId, connectionHash: this.getConnectionHash()})
+
+        if (message.connected) {
+            this.signalSuccessful = true;
+            return;
+        }
+
         this._sendSignal(true);
     }
 
+    async _onMessage(message) {
+        Logger.debug('WS Receive:', message);
+        await super._onMessage(message);
+    }
+
+    _onWsRelay(message) {
+        try {
+            message = JSON.parse(message).message;
+        }
+        catch (e) {
+            Logger.warn("WSPeer: Received JSON is malformed");
+            return;
+        }
+
+        if (message.type === 'chunk') {
+            const data = base64ToArrayBuffer(message.chunk);
+            this._onData(data);
+        }
+        else {
+            this._onMessage(message);
+        }
+    }
+
+    _refresh() {
+        this.signalSuccessful = true;
+
+        if (!this._isCaller) return; // we will listen for a caller
+
+        this._sendSignal();
+    }
+
+    _onDisconnected() {
+        super._onDisconnected();
+        this.signalSuccessful = false;
+    }
+
     getConnectionHash() {
         // Todo: implement SubtleCrypto asymmetric encryption and create connectionHash from public keys
         return "";
@@ -982,47 +1605,81 @@ class WSPeer extends Peer {
 class PeersManager {
 
     constructor(serverConnection) {
-        this.peers = {};
         this._server = serverConnection;
-        Events.on('signal', e => this._onMessage(e.detail));
+        this.peers = {};
+        this._device = {
+            originalDisplayName: '',
+            displayName: '',
+            publicRoomId: null
+        };
+
+        Events.on('signal', e => this._onSignal(e.detail));
         Events.on('peers', e => this._onPeers(e.detail));
-        Events.on('files-selected', e => this._onFilesSelected(e.detail));
-        Events.on('respond-to-files-transfer-request', e => this._onRespondToFileTransferRequest(e.detail))
-        Events.on('send-text', e => this._onSendText(e.detail));
         Events.on('peer-left', e => this._onPeerLeft(e.detail));
         Events.on('peer-joined', e => this._onPeerJoined(e.detail));
         Events.on('peer-connected', e => this._onPeerConnected(e.detail.peerId));
         Events.on('peer-disconnected', e => this._onPeerDisconnected(e.detail));
 
+        // ROOMS
+        Events.on('join-public-room', e => this._onJoinPublicRoom(e.detail.roomId));
+
         // this device closes connection
         Events.on('room-secrets-deleted', e => this._onRoomSecretsDeleted(e.detail));
-        Events.on('leave-public-room', e => this._onLeavePublicRoom(e.detail));
+        Events.on('leave-public-room', _ => this._onLeavePublicRoom());
 
         // peer closes connection
         Events.on('secret-room-deleted', e => this._onSecretRoomDeleted(e.detail));
-
         Events.on('room-secret-regenerated', e => this._onRoomSecretRegenerated(e.detail));
+
+        // peer
         Events.on('display-name', e => this._onDisplayName(e.detail.displayName));
-        Events.on('self-display-name-changed', e => this._notifyPeersDisplayNameChanged(e.detail));
-        Events.on('notify-peer-display-name-changed', e => this._notifyPeerDisplayNameChanged(e.detail));
+        Events.on('self-display-name-changed', e => this._notifyPeersDisplayNameChanged(e.detail.displayName));
+        Events.on('notify-display-name-changed', e => this._notifyPeerDisplayNameChanged(e.detail.recipient));
         Events.on('auto-accept-updated', e => this._onAutoAcceptUpdated(e.detail.roomSecret, e.detail.autoAccept));
+
+        // transfer
+        Events.on('send-text', e => this._onSendText(e.detail));
+        Events.on('files-selected', e => this._onFilesSelected(e.detail));
+        Events.on('respond-to-files-transfer-request', e => this._onRespondToFileTransferRequest(e.detail))
+
+        // websocket connection
         Events.on('ws-disconnected', _ => this._onWsDisconnected());
-        Events.on('ws-relay', e => this._onWsRelay(e.detail));
+        Events.on('ws-relay', e => this._onWsRelay(e.detail.peerId, e.detail.message));
         Events.on('ws-config', e => this._onWsConfig(e.detail));
+
+        // no-sleep
+        Events.on('evaluate-no-sleep', _ => this._onEvaluateNoSleep());
+
+        // clean up on page hide
+        Events.on('pagehide', _ => this._onPageHide());
     }
 
     _onWsConfig(wsConfig) {
         this._wsConfig = wsConfig;
     }
 
-    _onMessage(message) {
+    _onSignal(message) {
         const peerId = message.sender.id;
-        this.peers[peerId].onServerMessage(message);
+        this.peers[peerId]._onServerSignalMessage(message);
     }
 
-    _refreshPeer(peerId, roomType, roomId) {
-        if (!this._peerExists(peerId)) return false;
+    _onEvaluateNoSleep() {
+        // Evaluate if NoSleep should be disabled
+        for (let i = 0; i < this.peers.length; i++) {
+            if (this.peers[i]._busy) return;
+        }
 
+        NoSleepUI.disable();
+    }
+
+    _onPageHide() {
+        // Clear OPFS directory ONLY if this is the last PairDrop Browser tab
+        if (!BrowserTabsConnector.isOnlyTab()) return;
+
+        SWFileDigester.clearDirectory();
+    }
+
+    _refreshPeer(isCaller, peerId, roomType, roomId) {
         const peer = this.peers[peerId];
         const roomTypesDiffer = Object.keys(peer._roomIds)[0] !== roomType;
         const roomIdsDiffer = peer._roomIds[roomType] !== roomId;
@@ -1036,17 +1693,22 @@ class PeersManager {
             return true;
         }
 
-        peer.refresh();
+        // reconnect peer - caller/waiter might be switched
+        peer._setIsCaller(isCaller);
+        peer._refresh();
 
         return true;
     }
 
     _createOrRefreshPeer(isCaller, peerId, roomType, roomId, rtcSupported) {
         if (this._peerExists(peerId)) {
-            this._refreshPeer(peerId, roomType, roomId);
-            return;
+            this._refreshPeer(isCaller, peerId, roomType, roomId);
+        } else {
+            this._createPeer(isCaller, peerId, roomType, roomId, rtcSupported);
         }
+    }
 
+    _createPeer(isCaller, peerId, roomType, roomId, rtcSupported) {
         if (window.isRtcSupported && rtcSupported) {
             this.peers[peerId] = new RTCPeer(this._server, isCaller, peerId, roomType, roomId, this._wsConfig.rtcConfig);
         }
@@ -1054,7 +1716,7 @@ class PeersManager {
             this.peers[peerId] = new WSPeer(this._server, isCaller, peerId, roomType, roomId);
         }
         else {
-            console.warn("Websocket fallback is not activated on this instance.\n" +
+            Logger.warn("Websocket fallback is not activated on this instance.\n" +
                 "Activate WebRTC in this browser or ask the admin of this instance to activate the websocket fallback.")
         }
     }
@@ -1069,30 +1731,32 @@ class PeersManager {
         })
     }
 
-    _onWsRelay(message) {
+    _onWsRelay(peerId, message) {
         if (!this._wsConfig.wsFallback) return;
 
-        const messageJSON = JSON.parse(message);
-        if (messageJSON.type === 'ws-chunk') message = base64ToArrayBuffer(messageJSON.chunk);
-        this.peers[messageJSON.sender.id]._onMessage(message);
+        const peer = this.peers[peerId];
+
+        if (!peer || peer.rtcSupported) return;
+
+        peer._onWsRelay(message);
     }
 
     _onRespondToFileTransferRequest(detail) {
-        this.peers[detail.to]._respondToFileTransferRequest(detail.accepted);
+        this.peers[detail.to]._sendTransferRequestResponse(detail.accepted);
     }
 
     async _onFilesSelected(message) {
         let files = await mime.addMissingMimeTypesToFiles(message.files);
-        await this.peers[message.to].requestFileTransfer(files);
+        await this.peers[message.to]._sendFileTransferRequest(files);
     }
 
     _onSendText(message) {
-        this.peers[message.to].sendText(message.text);
+        this.peers[message.to]._sendText(message.text);
     }
 
     _onPeerLeft(message) {
-        if (this._peerExists(message.peerId) && this._webRtcSupported(message.peerId)) {
-            console.log('WSPeer left:', message.peerId);
+        if (this._peerExists(message.peerId) && !this._webRtcSupported(message.peerId)) {
+            Logger.debug('WSPeer left:', message.peerId);
         }
         if (message.disconnect === true) {
             // if user actively disconnected from PairDrop server, disconnect all peer to peer connections immediately
@@ -1105,7 +1769,7 @@ class PeersManager {
                     .removeOtherPeerIdsFromLocalStorage()
                     .then(peerIds => {
                         if (!peerIds) return;
-                        console.log("successfully removed other peerIds from localStorage");
+                        Logger.debug("successfully removed other peerIds from localStorage");
                     });
             }
         }
@@ -1136,33 +1800,44 @@ class PeersManager {
     _onPeerDisconnected(peerId) {
         const peer = this.peers[peerId];
         delete this.peers[peerId];
-        if (!peer || !peer._conn) return;
-        if (peer._channel) peer._channel.onclose = null;
-        peer._conn.close();
-        peer._busy = false;
-        peer._roomIds = {};
+
+        if (!peer) return;
+
+        peer._onDisconnected();
     }
 
     _onRoomSecretsDeleted(roomSecrets) {
-        for (let i=0; i<roomSecrets.length; i++) {
+        for (let i = 0; i < roomSecrets.length; i++) {
             this._disconnectOrRemoveRoomTypeByRoomId('secret', roomSecrets[i]);
         }
     }
 
-    _onLeavePublicRoom(publicRoomId) {
-        this._disconnectOrRemoveRoomTypeByRoomId('public-id', publicRoomId);
+    _onJoinPublicRoom(roomId) {
+        if (roomId !== this._device.publicRoomId) {
+            this._disconnectFromPublicRoom();
+        }
+        this._device.publicRoomId = roomId;
+    }
+
+    _onLeavePublicRoom() {
+        this._disconnectFromPublicRoom();
     }
 
     _onSecretRoomDeleted(roomSecret) {
         this._disconnectOrRemoveRoomTypeByRoomId('secret', roomSecret);
     }
 
+    _disconnectFromPublicRoom() {
+        this._disconnectOrRemoveRoomTypeByRoomId('public-id', this._device.publicRoomId);
+        this._device.publicRoomId = null;
+    }
+
     _disconnectOrRemoveRoomTypeByRoomId(roomType, roomId) {
         const peerIds = this._getPeerIdsFromRoomId(roomId);
 
         if (!peerIds.length) return;
 
-        for (let i=0; i<peerIds.length; i++) {
+        for (let i = 0; i < peerIds.length; i++) {
             this._disconnectOrRemoveRoomTypeByPeerId(peerIds[i], roomType);
         }
     }
@@ -1170,7 +1845,7 @@ class PeersManager {
     _disconnectOrRemoveRoomTypeByPeerId(peerId, roomType) {
         const peer = this.peers[peerId];
 
-        if (!peer) return;
+        if (!peer || !peer._getRoomTypes().includes(roomType)) return;
 
         if (peer._getRoomTypes().length > 1) {
             peer._removeRoomType(roomType);
@@ -1184,13 +1859,16 @@ class PeersManager {
         PersistentStorage
             .updateRoomSecret(message.oldRoomSecret, message.newRoomSecret)
             .then(_ => {
-                console.log("successfully regenerated room secret");
+                Logger.debug("successfully regenerated room secret");
                 Events.fire("room-secrets", [message.newRoomSecret]);
             })
     }
 
     _notifyPeersDisplayNameChanged(newDisplayName) {
-        this._displayName = newDisplayName ? newDisplayName : this._originalDisplayName;
+        this._device.displayName = newDisplayName
+            ? newDisplayName
+            : this._device.originalDisplayName;
+
         for (const peerId in this.peers) {
             this._notifyPeerDisplayNameChanged(peerId);
         }
@@ -1199,23 +1877,35 @@ class PeersManager {
     _notifyPeerDisplayNameChanged(peerId) {
         const peer = this.peers[peerId];
         if (!peer) return;
-        this.peers[peerId].sendDisplayName(this._displayName);
+        this.peers[peerId]._sendDisplayName(this._device.displayName);
     }
 
     _onDisplayName(displayName) {
-        this._originalDisplayName = displayName;
+        this._device.originalDisplayName = displayName;
         // if the displayName has not been changed (yet) set the displayName to the original displayName
-        if (!this._displayName) this._displayName = displayName;
+        if (!this._device.displayName) this._device.displayName = displayName;
     }
 
     _onAutoAcceptUpdated(roomSecret, autoAccept) {
-        const peerId = this._getPeerIdsFromRoomId(roomSecret)[0];
+        let peerIds = this._getPeerIdsFromRoomId(roomSecret);
+        const peerId = this._removePeerIdsSameBrowser(peerIds)[0];
 
         if (!peerId) return;
 
         this.peers[peerId]._setAutoAccept(autoAccept);
     }
 
+    _removePeerIdsSameBrowser(peerIds) {
+        let peerIdsNotSameBrowser = [];
+        for (let i = 0; i < peerIds.length; i++) {
+            const peer = this.peers[peerIds[i]];
+            if (!peer._isSameBrowser()) {
+                peerIdsNotSameBrowser.push(peerIds[i]);
+            }
+        }
+        return peerIdsNotSameBrowser;
+    }
+
     _getPeerIdsFromRoomId(roomId) {
         if (!roomId) return [];
 
@@ -1234,81 +1924,395 @@ class PeersManager {
 
 class FileChunker {
 
-    constructor(file, onChunk, onPartitionEnd) {
-        this._chunkSize = 64000; // 64 KB
-        this._maxPartitionSize = 1e6; // 1 MB
-        this._offset = 0;
-        this._partitionSize = 0;
+    constructor(file, onChunkCallback) {
+        this._chunkSize = 65536; // 64 KB
+        this._maxBytesSentWithoutConfirmation = 1048576; // 1 MB
+
+        this._bytesSent = 0;
+        this._bytesReceived = 0;
+
         this._file = file;
-        this._onChunk = onChunk;
-        this._onPartitionEnd = onPartitionEnd;
+        this._onChunk = onChunkCallback;
+
         this._reader = new FileReader();
         this._reader.addEventListener('load', e => this._onChunkRead(e.target.result));
-    }
 
-    nextPartition() {
-        this._partitionSize = 0;
-        this._readChunk();
+        this._currentlySending = false;
     }
 
     _readChunk() {
-        const chunk = this._file.slice(this._offset, this._offset + this._chunkSize);
+        if (this._currentlySending || !this._bufferHasSpaceForChunk() || this._isFileEnd()) return;
+
+        this._currentlySending = true;
+        const chunk = this._file.slice(this._bytesSent, this._bytesSent + this._chunkSize);
         this._reader.readAsArrayBuffer(chunk);
     }
 
     _onChunkRead(chunk) {
-        this._offset += chunk.byteLength;
-        this._partitionSize += chunk.byteLength;
+        if (!chunk.byteLength) return;
+
+        this._currentlySending = false;
+
         this._onChunk(chunk);
-        if (this.isFileEnd()) return;
-        if (this._isPartitionEnd()) {
-            this._onPartitionEnd(this._offset);
-            return;
-        }
+        this._bytesSent += chunk.byteLength;
+
+        // Pause sending when reaching the high watermark or file end
+        if (!this._bufferHasSpaceForChunk() || this._isFileEnd()) return;
+
         this._readChunk();
     }
 
-    repeatPartition() {
-        this._offset -= this._partitionSize;
-        this.nextPartition();
+    _bufferHasSpaceForChunk() {}
+
+    _onReceiveConfirmation(bytesReceived) {}
+
+    _resendFromOffset(offset) {
+        this._bytesSent = offset;
+        this._readChunk();
     }
 
-    _isPartitionEnd() {
-        return this._partitionSize >= this._maxPartitionSize;
+    _isFileEnd() {
+        return this._bytesSent >= this._file.size;
+    }
+}
+
+class FileChunkerRTC extends FileChunker {
+
+    constructor(file, onChunkCallback, peerConnection, dataChannel) {
+        super(file, onChunkCallback);
+
+        this._chunkSize = peerConnection && peerConnection.sctp
+            ? Math.min(peerConnection.sctp.maxMessageSize, 1048576) // 1 MB max
+            : 262144; // 256 KB
+
+        this._peerConnection = peerConnection;
+        this._dataChannel = dataChannel;
+
+        this._highWatermark = 10485760; // 10 MB
+        this._lowWatermark = 4194304; // 4 MB
+
+        // Set buffer threshold
+        this._dataChannel.bufferedAmountLowThreshold = this._lowWatermark;
+        this._dataChannel.addEventListener('bufferedamountlow', _ => this._readChunk());
     }
 
-    isFileEnd() {
-        return this._offset >= this._file.size;
+    _bufferHasSpaceForChunk() {
+        return this._dataChannel.bufferedAmount + this._chunkSize < this._highWatermark;
+    }
+
+    _onReceiveConfirmation(bytesReceived) {
+        this._bytesReceived = bytesReceived;
+    }
+}
+
+class FileChunkerWS extends FileChunker {
+
+    constructor(file, onChunkCallback) {
+        super(file, onChunkCallback);
+    }
+
+    _bytesCurrentlySent() {
+        return this._bytesSent - this._bytesReceived;
+    }
+
+    _bufferHasSpaceForChunk() {
+        return this._bytesCurrentlySent() + this._chunkSize <= this._maxBytesSentWithoutConfirmation;
+    }
+
+    _onReceiveConfirmation(bytesReceived) {
+        this._bytesReceived = bytesReceived;
+        this._readChunk();
     }
 }
 
 class FileDigester {
 
-    constructor(meta, totalSize, totalBytesReceived, callback) {
-        this._buffer = [];
+    constructor(meta, fileCompleteCallback, sendReceiveConfirmationCallback) {
         this._bytesReceived = 0;
+        this._bytesReceivedSinceLastTime = 0;
+        this._maxBytesWithoutConfirmation = 1048576; // 1 MB
         this._size = meta.size;
         this._name = meta.name;
         this._mime = meta.mime;
-        this._totalSize = totalSize;
-        this._totalBytesReceived = totalBytesReceived;
-        this._callback = callback;
+        this._fileCompleteCallback = fileCompleteCallback;
+        this._sendReceiveConfimationCallback = sendReceiveConfirmationCallback;
+    }
+
+    unchunk(chunk) {}
+
+    evaluateChunkSize(chunk) {
+        this._bytesReceived += chunk.byteLength;
+        this._bytesReceivedSinceLastTime += chunk.byteLength;
+
+        if (this._bytesReceived > this._size) {
+            throw new Error("Too many bytes received. Abort!");
+        }
+
+        // If more than half of maxBytesWithoutConfirmation received -> send confirmation
+        if (2 * this._bytesReceivedSinceLastTime > this._maxBytesWithoutConfirmation) {
+            this._sendReceiveConfimationCallback(this._bytesReceived);
+            this._bytesReceivedSinceLastTime = 0;
+        }
+    }
+
+    isFileReceivedCompletely() {
+        return this._bytesReceived >= this._size;
+    }
+
+    cleanUp() {}
+
+    abort() {}
+}
+
+class FileDigesterViaBuffer extends FileDigester {
+    constructor(meta, fileCompleteCallback, sendReceiveConfirmationCallback) {
+        super(meta, fileCompleteCallback, sendReceiveConfirmationCallback);
+        this._buffer = [];
     }
 
     unchunk(chunk) {
         this._buffer.push(chunk);
-        this._bytesReceived += chunk.byteLength || chunk.size;
-        this.progress = (this._totalBytesReceived + this._bytesReceived) / this._totalSize;
-        if (isNaN(this.progress)) this.progress = 1
+        this.evaluateChunkSize(chunk);
 
-        if (this._bytesReceived < this._size) return;
-        // we are done
-        const blob = new Blob(this._buffer)
-        this._buffer = null;
-        this._callback(new File([blob], this._name, {
-            type: this._mime,
-            lastModified: new Date().getTime()
-        }));
+        // If file is not completely received -> Wait for next chunk.
+        if (!this.isFileReceivedCompletely()) return;
+
+        this.processFileViaMemory();
     }
 
+    processFileViaMemory() {
+        // Loads complete file into RAM which might lead to a page crash (Memory limit iOS Safari: ~380 MB)
+        const file = new File(
+            this._buffer,
+            this._name,
+            {
+                type: this._mime,
+                lastModified: new Date().getTime()
+            }
+        );
+        file.displayName = this._name
+
+        this._fileCompleteCallback(file);
+    }
+
+    cleanUp() {
+        this._buffer = [];
+    }
+
+    abort() {
+        this.cleanUp();
+    }
 }
+
+class FileDigesterViaWorker extends FileDigester {
+    constructor(meta, fileCompleteCallback, sendReceiveConfirmationCallback) {
+        super(meta, fileCompleteCallback, sendReceiveConfirmationCallback);
+        this._fileDigesterWorker = new SWFileDigester();
+    }
+
+    unchunk(chunk) {
+        this._fileDigesterWorker
+            .nextChunk(chunk, this._bytesReceived)
+            .then(_ => {
+                this.evaluateChunkSize(chunk);
+
+                // If file is not completely received -> Wait for next chunk.
+                if (!this.isFileReceivedCompletely()) return;
+
+                this.processFileViaWorker();
+            });
+    }
+
+    processFileViaWorker() {
+        this._fileDigesterWorker
+            .getFile()
+            .then(file => {
+                // Save id and displayName to file to be able to truncate file later
+                file.id = file.name;
+                file.displayName = this._name;
+
+                this._fileCompleteCallback(file);
+            })
+            .catch(e => {
+                Logger.error("Error in SWFileDigester:", e);
+                this.cleanUp();
+            });
+    }
+
+    cleanUp() {
+        this._fileDigesterWorker.cleanUp();
+    }
+
+    abort() {
+        // delete and clean up (included in deletion)
+        this._fileDigesterWorker.deleteFile().then((id) => {
+            Logger.debug("File deleted after abort:", id);
+        });
+    }
+}
+
+
+class SWFileDigester {
+
+    static fileWorkers = [];
+
+    constructor(id = null) {
+        // Use service worker to prevent loading the complete file into RAM
+        // Uses origin private file system (OPFS) as storage endpoint
+
+        if (!id) {
+            // Generate random uuid to save file on disk
+            // Create only one service worker per file to prevent problems with accessHandles
+            id = generateUUID();
+            SWFileDigester.fileWorkers[id] = new Worker("scripts/sw-file-digester.js");
+        }
+
+        this.id = id;
+        this.fileWorker = SWFileDigester.fileWorkers[id];
+
+        this.fileWorker.onmessage = (e) => {
+            switch (e.data.type) {
+                case "support":
+                    this.onSupport(e.data.supported);
+                    break;
+                case "chunk-written":
+                    this.onChunkWritten(e.data.offset);
+                    break;
+                case "file":
+                    this.onFile(e.data.file);
+                    break;
+                case "file-deleted":
+                    this.onFileDeleted(e.data.id);
+                    break;
+                case "error":
+                    this.onError(e.data.error);
+                    break;
+                case "directory-cleared":
+                    this.onDirectoryCleared();
+                    break;
+            }
+        }
+    }
+
+    onError(error) {
+        // an error occurred.
+        Logger.error(error);
+    }
+
+    static isSupported() {
+        // Check if web worker is supported and supports specific functions
+        return new Promise(async resolve => {
+            if (!window.Worker || !window.isSecureContext) {
+                resolve(false);
+                return;
+            }
+
+            const fileDigesterWorker = new SWFileDigester();
+
+            resolve(await fileDigesterWorker.checkSupport());
+
+            fileDigesterWorker.fileWorker.terminate();
+        })
+    }
+
+    checkSupport() {
+        return new Promise(resolve => {
+            this.resolveSupport = resolve;
+            this.fileWorker.postMessage({
+                type: "check-support"
+            });
+        })
+    }
+
+    onSupport(supported) {
+        if (!this.resolveSupport) return;
+
+        this.resolveSupport(supported);
+        this.resolveSupport = null;
+    }
+
+    nextChunk(chunk, offset) {
+        return new Promise(resolve => {
+            this.digestChunk(chunk, offset);
+            resolve();
+        });
+    }
+
+    digestChunk(chunk, offset) {
+        this.fileWorker.postMessage({
+            type: "chunk",
+            id: this.id,
+            chunk: chunk,
+            offset: offset
+        });
+    }
+
+    onChunkWritten(chunkOffset) {
+        Logger.debug("Chunk written at offset", chunkOffset);
+    }
+
+    getFile() {
+        return new Promise(resolve => {
+            this.resolveFile = resolve;
+
+            this.fileWorker.postMessage({
+                type: "get-file",
+                id: this.id,
+            });
+        })
+    }
+
+    async getFileById(id) {
+        const swFileDigester = new SWFileDigester(id);
+        return await swFileDigester.getFile();
+    }
+
+    onFile(file) {
+        this.resolveFile(file);
+    }
+
+    deleteFile() {
+        return new Promise(resolve => {
+            this.resolveDeletion = resolve;
+            this.fileWorker.postMessage({
+                type: "delete-file",
+                id: this.id
+            });
+        });
+    }
+
+    static async deleteFileById(id) {
+        const swFileDigester = new SWFileDigester(id);
+        return await swFileDigester.deleteFile();
+    }
+
+    cleanUp() {
+        // terminate service worker
+        this.fileWorker.terminate();
+        delete SWFileDigester.fileWorkers[this.id];
+    }
+
+    onFileDeleted(id) {
+        // File Digestion complete -> Tidy up
+        Logger.debug("File deleted:", id);
+        this.resolveDeletion(id);
+        this.cleanUp();
+    }
+
+    static clearDirectory() {
+        for (let i = 0; i < SWFileDigester.fileWorkers.length; i++) {
+            SWFileDigester.fileWorkers[i].terminate();
+        }
+        SWFileDigester.fileWorkers = [];
+
+        const swFileDigester = new SWFileDigester();
+        swFileDigester.fileWorker.postMessage({
+            type: "clear-directory",
+        });
+    }
+
+    onDirectoryCleared() {
+        Logger.debug("All files on OPFS truncated.");
+        this.cleanUp();
+    }
+}
\ No newline at end of file
diff --git a/public/scripts/persistent-storage.js b/public/scripts/persistent-storage.js
index 72c30fb..b9b670b 100644
--- a/public/scripts/persistent-storage.js
+++ b/public/scripts/persistent-storage.js
@@ -7,19 +7,18 @@ class PersistentStorage {
         const DBOpenRequest = window.indexedDB.open('pairdrop_store', 5);
         DBOpenRequest.onerror = e => {
             PersistentStorage.logBrowserNotCapable();
-            console.log('Error initializing database: ');
-            console.log(e)
+            Logger.error('Error initializing database:', e);
         };
         DBOpenRequest.onsuccess = _ => {
-            console.log('Database initialised.');
+            Logger.debug('Database initialised.');
         };
         DBOpenRequest.onupgradeneeded = async e => {
             const db = e.target.result;
             const txn = e.target.transaction;
 
-            db.onerror = e => console.log('Error loading database: ' + e);
+            db.onerror = e => Logger.error('Error loading database:', e);
 
-            console.log(`Upgrading IndexedDB database from version ${e.oldVersion} to version ${e.newVersion}`);
+            Logger.debug(`Upgrading IndexedDB database from version ${e.oldVersion} to version ${e.newVersion}`);
 
             if (e.oldVersion === 0) {
                 // initiate v1
@@ -54,7 +53,7 @@ class PersistentStorage {
     }
 
     static logBrowserNotCapable() {
-        console.log("This browser does not support IndexedDB. Paired devices will be gone after the browser is closed.");
+        Logger.log("This browser does not support IndexedDB. Paired devices will be gone after the browser is closed.");
     }
 
     static set(key, value) {
@@ -66,7 +65,7 @@ class PersistentStorage {
                 const objectStore = transaction.objectStore('keyval');
                 const objectStoreRequest = objectStore.put(value, key);
                 objectStoreRequest.onsuccess = _ => {
-                    console.log(`Request successful. Added key-pair: ${key} - ${value}`);
+                    Logger.debug(`Request successful. Added key-pair: ${key} - ${value}`);
                     resolve(value);
                 };
             }
@@ -85,7 +84,7 @@ class PersistentStorage {
                 const objectStore = transaction.objectStore('keyval');
                 const objectStoreRequest = objectStore.get(key);
                 objectStoreRequest.onsuccess = _ => {
-                    console.log(`Request successful. Retrieved key-pair: ${key} - ${objectStoreRequest.result}`);
+                    Logger.debug(`Request successful. Retrieved key-pair: ${key} - ${objectStoreRequest.result}`);
                     resolve(objectStoreRequest.result);
                 }
             }
@@ -104,7 +103,7 @@ class PersistentStorage {
                 const objectStore = transaction.objectStore('keyval');
                 const objectStoreRequest = objectStore.delete(key);
                 objectStoreRequest.onsuccess = _ => {
-                    console.log(`Request successful. Deleted key: ${key}`);
+                    Logger.debug(`Request successful. Deleted key: ${key}`);
                     resolve();
                 };
             }
@@ -128,7 +127,7 @@ class PersistentStorage {
                     'auto_accept': false
                 });
                 objectStoreRequest.onsuccess = e => {
-                    console.log(`Request successful. RoomSecret added: ${e.target.result}`);
+                    Logger.debug(`Request successful. RoomSecret added: ${e.target.result}`);
                     resolve();
                 }
             }
@@ -145,7 +144,7 @@ class PersistentStorage {
             for (let i = 0; i < roomSecrets.length; i++) {
                 secrets.push(roomSecrets[i].secret);
             }
-            console.log(`Request successful. Retrieved ${secrets.length} room_secrets`);
+            Logger.debug(`Request successful. Retrieved ${secrets.length} room_secrets`);
             return(secrets);
         } catch (e) {
             this.logBrowserNotCapable();
@@ -182,13 +181,13 @@ class PersistentStorage {
                 objectStoreRequestKey.onsuccess = e => {
                     const key = e.target.result;
                     if (!key) {
-                        console.log(`Nothing to retrieve. Entry for room_secret not existing: ${roomSecret}`);
+                        Logger.debug(`Nothing to retrieve. Entry for room_secret not existing: ${roomSecret}`);
                         resolve();
                         return;
                     }
                     const objectStoreRequestRetrieval = objectStore.get(key);
                     objectStoreRequestRetrieval.onsuccess = e => {
-                        console.log(`Request successful. Retrieved entry for room_secret: ${key}`);
+                        Logger.debug(`Request successful. Retrieved entry for room_secret: ${key}`);
                         resolve({
                             "entry": e.target.result,
                             "key": key
@@ -215,14 +214,14 @@ class PersistentStorage {
                 const objectStoreRequestKey = objectStore.index("secret").getKey(roomSecret);
                 objectStoreRequestKey.onsuccess = e => {
                     if (!e.target.result) {
-                        console.log(`Nothing to delete. room_secret not existing: ${roomSecret}`);
+                        Logger.debug(`Nothing to delete. room_secret not existing: ${roomSecret}`);
                         resolve();
                         return;
                     }
                     const key = e.target.result;
                     const objectStoreRequestDeletion = objectStore.delete(key);
                     objectStoreRequestDeletion.onsuccess = _ => {
-                        console.log(`Request successful. Deleted room_secret: ${key}`);
+                        Logger.debug(`Request successful. Deleted room_secret: ${key}`);
                         resolve(roomSecret);
                     }
                     objectStoreRequestDeletion.onerror = e => {
@@ -245,7 +244,7 @@ class PersistentStorage {
                 const objectStore = transaction.objectStore('room_secrets');
                 const objectStoreRequest = objectStore.clear();
                 objectStoreRequest.onsuccess = _ => {
-                    console.log('Request successful. All room_secrets cleared');
+                    Logger.debug('Request successful. All room_secrets cleared');
                     resolve();
                 };
             }
@@ -255,15 +254,15 @@ class PersistentStorage {
         })
     }
 
-    static updateRoomSecretNames(roomSecret, displayName, deviceName) {
-        return this.updateRoomSecret(roomSecret, undefined, displayName, deviceName);
+    static updateRoomSecretDisplayName(roomSecret, displayName) {
+        return this.updateRoomSecret(roomSecret, null, displayName, null);
     }
 
     static updateRoomSecretAutoAccept(roomSecret, autoAccept) {
-        return this.updateRoomSecret(roomSecret, undefined, undefined, undefined, autoAccept);
+        return this.updateRoomSecret(roomSecret, null, null, null, autoAccept);
     }
 
-    static updateRoomSecret(roomSecret, updatedRoomSecret = undefined, updatedDisplayName = undefined, updatedDeviceName = undefined, updatedAutoAccept = undefined) {
+    static updateRoomSecret(roomSecret, updatedRoomSecret = null, updatedDisplayName = null, updatedDeviceName = null, updatedAutoAccept = null) {
         return new Promise((resolve, reject) => {
             const DBOpenRequest = window.indexedDB.open('pairdrop_store');
             DBOpenRequest.onsuccess = e => {
@@ -278,16 +277,16 @@ class PersistentStorage {
                         const objectStore = transaction.objectStore('room_secrets');
                         // Do not use `updatedRoomSecret ?? roomSecretEntry.entry.secret` to ensure compatibility with older browsers
                         const updatedRoomSecretEntry = {
-                            'secret': updatedRoomSecret !== undefined ? updatedRoomSecret : roomSecretEntry.entry.secret,
-                            'display_name': updatedDisplayName !== undefined ? updatedDisplayName : roomSecretEntry.entry.display_name,
-                            'device_name': updatedDeviceName !== undefined ? updatedDeviceName : roomSecretEntry.entry.device_name,
-                            'auto_accept': updatedAutoAccept !== undefined ? updatedAutoAccept : roomSecretEntry.entry.auto_accept
+                            'secret': updatedRoomSecret !== null ? updatedRoomSecret : roomSecretEntry.entry.secret,
+                            'display_name': updatedDisplayName !== null ? updatedDisplayName : roomSecretEntry.entry.display_name,
+                            'device_name': updatedDeviceName !== null ? updatedDeviceName : roomSecretEntry.entry.device_name,
+                            'auto_accept': updatedAutoAccept !== null ? updatedAutoAccept : roomSecretEntry.entry.auto_accept
                         };
 
                         const objectStoreRequestUpdate = objectStore.put(updatedRoomSecretEntry, roomSecretEntry.key);
 
                         objectStoreRequestUpdate.onsuccess = e => {
-                            console.log(`Request successful. Updated room_secret: ${roomSecretEntry.key}`);
+                            Logger.debug(`Request successful. Updated room_secret: ${roomSecretEntry.key}`);
                             resolve({
                                 "entry": updatedRoomSecretEntry,
                                 "key": roomSecretEntry.key
diff --git a/public/scripts/sw-file-digester.js b/public/scripts/sw-file-digester.js
new file mode 100644
index 0000000..ba5e544
--- /dev/null
+++ b/public/scripts/sw-file-digester.js
@@ -0,0 +1,131 @@
+self.accessHandle = undefined;
+self.messageQueue = [];
+self.busy = false;
+
+
+self.addEventListener('message', async e => {
+    // Put message into queue if busy
+    if (self.busy) {
+        self.messageQueue.push(e.data);
+        return;
+    }
+
+    await digestMessage(e.data);
+});
+
+async function digestMessage(message) {
+    self.busy = true;
+    try {
+        switch (message.type) {
+            case "check-support":
+                await checkSupport();
+                break;
+            case "chunk":
+                await onChunk(message.id, message.chunk, message.offset);
+                break;
+            case "get-file":
+                await onGetFile(message.id);
+                break;
+            case "delete-file":
+                await onDeleteFile(message.id);
+                break;
+            case "clear-directory":
+                await onClearDirectory();
+                break;
+        }
+    }
+    catch (e) {
+        self.postMessage({type: "error", error: e});
+    }
+
+    // message is digested. Digest next message.
+    await messageDigested();
+}
+
+async function messageDigested() {
+    if (!self.messageQueue.length) {
+        // no chunk in queue -> set flag to false and stop
+        this.busy = false;
+        return;
+    }
+
+    // Digest next message in queue
+    await this.digestMessage(self.messageQueue.pop());
+}
+
+async function checkSupport() {
+    try {
+        const accessHandle = await getAccessHandle("test");
+        self.postMessage({type: "support", supported: true});
+        accessHandle.close();
+    }
+    catch (e) {
+        self.postMessage({type: "support", supported: false});
+    }
+}
+
+async function getFileHandle(id) {
+    const dirHandle = await navigator.storage.getDirectory();
+    return await dirHandle.getFileHandle(id, {create: true});
+}
+
+async function getAccessHandle(id) {
+    const fileHandle = await getFileHandle(id);
+
+    if (!self.accessHandle) {
+        // Create FileSystemSyncAccessHandle on the file.
+        self.accessHandle = await fileHandle.createSyncAccessHandle();
+    }
+
+    return self.accessHandle;
+}
+
+async function onChunk(id, chunk, offset) {
+    const accessHandle = await getAccessHandle(id);
+
+    // Write the message to the end of the file.
+    let encodedMessage = new DataView(chunk);
+    accessHandle.write(encodedMessage, { at: offset });
+
+    self.postMessage({type: "chunk-written", offset: offset});
+}
+
+async function onGetFile(id) {
+    const fileHandle = await getFileHandle(id);
+    let file = await fileHandle.getFile();
+
+    self.postMessage({type: "file", file: file});
+}
+
+async function onDeleteFile(id) {
+    const accessHandle = await getAccessHandle(id);
+
+    // Truncate the file to 0 bytes
+    accessHandle.truncate(0);
+
+    // Persist changes to disk.
+    accessHandle.flush();
+
+    // Always close FileSystemSyncAccessHandle if done.
+    accessHandle.close();
+
+    self.postMessage({type: "file-deleted", id: id});
+}
+
+async function onClearDirectory() {
+    const dirHandle = await navigator.storage.getDirectory();
+
+    // Iterate through directory entries and truncate all entries to 0
+    for await (const [id, fileHandle] of dirHandle.entries()) {
+        const accessHandle = await fileHandle.createSyncAccessHandle();
+
+        // Truncate the file to 0 bytes
+        accessHandle.truncate(0);
+
+        // Persist changes to disk.
+        accessHandle.flush();
+
+        // Always close FileSystemSyncAccessHandle if done.
+        accessHandle.close();
+    }
+}
\ No newline at end of file
diff --git a/public/scripts/ui-main.js b/public/scripts/ui-main.js
index c7a27e5..a43e727 100644
--- a/public/scripts/ui-main.js
+++ b/public/scripts/ui-main.js
@@ -205,7 +205,7 @@ class FooterUI {
         this.$displayName.addEventListener('blur', e => this._saveDisplayName(e.target.innerText));
 
         Events.on('display-name', e => this._onDisplayName(e.detail.displayName));
-        Events.on('self-display-name-changed', e => this._insertDisplayName(e.detail));
+        Events.on('self-display-name-changed', e => this._insertDisplayName(e.detail.displayName));
 
         // Load saved display name on page load
         Events.on('ws-connected', _ => this._loadSavedDisplayName());
@@ -238,8 +238,8 @@ class FooterUI {
 
         if (!displayName) return;
 
-        console.log("Retrieved edited display name:", displayName)
-        Events.fire('self-display-name-changed', displayName);
+        Logger.debug("Retrieved edited display name:", displayName)
+        Events.fire('self-display-name-changed', { displayName: displayName });
     }
 
     _onDisplayName(displayName){
@@ -275,25 +275,25 @@ class FooterUI {
                     Events.fire('notify-user', Localization.getTranslation("notifications.display-name-changed-permanently"));
                 })
                 .catch(_ => {
-                    console.log("This browser does not support IndexedDB. Use localStorage instead.");
+                    Logger.debug("This browser does not support IndexedDB. Use localStorage instead.");
                     localStorage.setItem('edited_display_name', newDisplayName);
                     Events.fire('notify-user', Localization.getTranslation("notifications.display-name-changed-temporarily"));
                 })
                 .finally(() => {
-                    Events.fire('self-display-name-changed', newDisplayName);
-                    Events.fire('broadcast-send', {type: 'self-display-name-changed', detail: newDisplayName});
+                    Events.fire('self-display-name-changed', { displayName: newDisplayName });
+                    Events.fire('broadcast-self-display-name-changed', { displayName: newDisplayName });
                 });
         }
         else {
             PersistentStorage.delete('edited_display_name')
                 .catch(_ => {
-                    console.log("This browser does not support IndexedDB. Use localStorage instead.")
+                    Logger.debug("This browser does not support IndexedDB. Use localStorage instead.")
                     localStorage.removeItem('edited_display_name');
                 })
                 .finally(() => {
                     Events.fire('notify-user', Localization.getTranslation("notifications.display-name-random-again"));
-                    Events.fire('self-display-name-changed', '');
-                    Events.fire('broadcast-send', {type: 'self-display-name-changed', detail: ''});
+                    Events.fire('self-display-name-changed', { displayName: '' });
+                    Events.fire('broadcast-self-display-name-changed', { displayName: '' });
                 });
         }
     }
diff --git a/public/scripts/ui.js b/public/scripts/ui.js
index c9bd365..7bb5bdc 100644
--- a/public/scripts/ui.js
+++ b/public/scripts/ui.js
@@ -16,7 +16,7 @@ class PeersUI {
         this.$shareModeCancelBtn = $$('.shr-panel .cancel-btn');
         this.$shareModeEditBtn = $$('.shr-panel .edit-btn');
 
-        this.peers = {};
+        this.peerUIs = {};
 
         this.shareMode = {};
         this.shareMode.active = false;
@@ -24,12 +24,12 @@ class PeersUI {
         this.shareMode.files = [];
         this.shareMode.text = "";
 
-        Events.on('peer-joined', e => this._onPeerJoined(e.detail));
-        Events.on('peer-added', _ => this._evaluateOverflowingPeers());
+        Events.on('peer-joined', e => this._onPeerJoined(e.detail.peer, e.detail.roomType, e.detail.roomId));
         Events.on('peer-connected', e => this._onPeerConnected(e.detail.peerId, e.detail.connectionHash));
+        Events.on('peer-connecting', e => this._onPeerConnecting(e.detail));
         Events.on('peer-disconnected', e => this._onPeerDisconnected(e.detail));
         Events.on('peers', e => this._onPeers(e.detail));
-        Events.on('set-progress', e => this._onSetProgress(e.detail));
+        Events.on('set-progress', e => this._onSetProgress(e.detail.peerId, e.detail.progress, e.detail.status, e.detail.statusText));
 
         Events.on('drop', e => this._onDrop(e));
         Events.on('keydown', e => this._onKeyDown(e));
@@ -43,21 +43,21 @@ class PeersUI {
         Events.on('activate-share-mode', e => this._activateShareMode(e.detail.files, e.detail.text));
         Events.on('translation-loaded', _ => this._reloadShareMode());
         Events.on('room-type-removed', e => this._onRoomTypeRemoved(e.detail.peerId, e.detail.roomType));
-
+        Events.on('room-secret-added', e => this._onRoomSecretAdded(e.detail.peerId, e.detail.roomSecret));
 
         this.$shareModeCancelBtn.addEventListener('click', _ => this._deactivateShareMode());
 
-        Events.on('peer-display-name-changed', e => this._onPeerDisplayNameChanged(e));
+        Events.on('peer-display-name-changed', e => this._onPeerDisplayNameChanged(e.detail.peerId, e.detail.displayName));
 
         Events.on('ws-config', e => this._evaluateRtcSupport(e.detail))
     }
 
     _evaluateRtcSupport(wsConfig) {
         if (wsConfig.wsFallback) {
-            this.$wsFallbackWarning.hidden = false;
+            this.$wsFallbackWarning.removeAttribute("hidden");
         }
         else {
-            this.$wsFallbackWarning.hidden = true;
+            this.$wsFallbackWarning.setAttribute("hidden", true);
             if (!window.isRtcSupported) {
                 alert(Localization.getTranslation("instructions.webrtc-requirement"));
             }
@@ -65,15 +65,17 @@ class PeersUI {
     }
 
     _changePeerDisplayName(peerId, displayName) {
-        this.peers[peerId].name.displayName = displayName;
-        const peerIdNode = $(peerId);
-        if (peerIdNode && displayName) peerIdNode.querySelector('.name').textContent = displayName;
-        this._redrawPeerRoomTypes(peerId);
+        const peerUI = this.peerUIs[peerId];
+
+        if (!peerUI) return;
+
+        peerUI._setDisplayName(displayName);
     }
 
-    _onPeerDisplayNameChanged(e) {
-        if (!e.detail.displayName) return;
-        this._changePeerDisplayName(e.detail.peerId, e.detail.displayName);
+    _onPeerDisplayNameChanged(peerId, displayName) {
+        if (!peerId || !displayName) return;
+
+        this._changePeerDisplayName(peerId, displayName);
     }
 
     async _onKeyDown(e) {
@@ -89,50 +91,48 @@ class PeersUI {
         }
     }
 
-    _onPeerJoined(msg) {
-        this._joinPeer(msg.peer, msg.roomType, msg.roomId);
+    _onPeerJoined(peer, roomType, roomId) {
+        this._joinPeer(peer, roomType, roomId);
     }
 
     _joinPeer(peer, roomType, roomId) {
-        const existingPeer = this.peers[peer.id];
-        if (existingPeer) {
-            // peer already exists. Abort but add roomType to GUI
-            existingPeer._roomIds[roomType] = roomId;
-            this._redrawPeerRoomTypes(peer.id);
+        const existingPeerUI = this.peerUIs[peer.id];
+        if (existingPeerUI) {
+            // peerUI already exists. Abort but add roomType to GUI
+            existingPeerUI._addRoomId(roomType, roomId);
             return;
         }
 
-        peer._isSameBrowser = () => BrowserTabsConnector.peerIsSameBrowser(peer.id);
-        peer._roomIds = {};
-
-        peer._roomIds[roomType] = roomId;
-        this.peers[peer.id] = peer;
-    }
-
-    _onPeerConnected(peerId, connectionHash) {
-        if (!this.peers[peerId] || $(peerId)) return;
-
-        const peer = this.peers[peerId];
-
-        new PeerUI(peer, connectionHash, {
+        const peerUI = new PeerUI(peer, roomType, roomId, {
             active: this.shareMode.active,
             descriptor: this.shareMode.descriptor,
         });
+        this.peerUIs[peer.id] = peerUI;
     }
 
-    _redrawPeerRoomTypes(peerId) {
-        const peer = this.peers[peerId];
-        const peerNode = $(peerId);
+    _onPeerConnected(peerId, connectionHash) {
+        const peerUI = this.peerUIs[peerId];
 
-        if (!peer || !peerNode) return;
+        if (!peerUI) return;
 
-        peerNode.classList.remove('type-ip', 'type-secret', 'type-public-id', 'type-same-browser');
+        peerUI._peerConnected(true, connectionHash);
 
-        if (peer._isSameBrowser()) {
-            peerNode.classList.add(`type-same-browser`);
-        }
+        this._addPeerUIIfMissing(peerUI);
+    }
 
-        Object.keys(peer._roomIds).forEach(roomType => peerNode.classList.add(`type-${roomType}`));
+    _addPeerUIIfMissing(peerUI) {
+        if (this.$xPeers.contains(peerUI.$el)) return;
+
+        this.$xPeers.appendChild(peerUI.$el);
+        this._evaluateOverflowingPeers();
+    }
+
+    _onPeerConnecting(peerId) {
+        const peerUI = this.peerUIs[peerId];
+
+        if (!peerUI) return;
+
+        peerUI._peerConnected(false);
     }
 
     _evaluateOverflowingPeers() {
@@ -149,26 +149,48 @@ class PeersUI {
     }
 
     _onPeerDisconnected(peerId) {
-        const $peer = $(peerId);
-        if (!$peer) return;
-        $peer.remove();
+        const peerUI = this.peerUIs[peerId];
+
+        if (!peerUI) return;
+
+        peerUI._removeDom();
+
+        delete this.peerUIs[peerId];
+
         this._evaluateOverflowingPeers();
     }
 
     _onRoomTypeRemoved(peerId, roomType) {
-        const peer = this.peers[peerId];
+        const peerUI = this.peerUIs[peerId];
 
-        if (!peer) return;
+        if (!peerUI) return;
 
-        delete peer._roomIds[roomType];
-
-        this._redrawPeerRoomTypes(peerId)
+        peerUI._removeRoomId(roomType);
     }
 
-    _onSetProgress(progress) {
-        const $peer = $(progress.peerId);
-        if (!$peer) return;
-        $peer.ui.setProgress(progress.progress, progress.status)
+
+    _onRoomSecretAdded(peerId, roomSecret) {
+        // If a device is paired that is already connected we must update the displayName saved for the roomSecret
+        // here as the "display-name-changed" message has already been received
+        const peerUI = this.peerUIs[peerId];
+
+        if (!peerUI || !peerUI._connected) return;
+
+        const displayName = peerUI._displayName();
+
+        PersistentStorage
+            .updateRoomSecretDisplayName(roomSecret, displayName)
+            .then(roomSecretEntry => {
+                Logger.debug(`Successfully updated DisplayName for roomSecretEntry ${roomSecretEntry.key}`);
+            })
+    }
+
+    _onSetProgress(peerId, progress, status, statusText) {
+        const peerUI = this.peerUIs[peerId];
+
+        if (!peerUI) return;
+
+        peerUI.queueProgressStatus(progress, status, statusText);
     }
 
     _onDrop(e) {
@@ -287,7 +309,7 @@ class PeersUI {
 
                     this.$shareModeImageThumb.removeAttribute('hidden');
                 } catch (e) {
-                    console.error(e);
+                    Logger.error(e);
                     this.$shareModeFileThumb.removeAttribute('hidden');
                 }
             } else {
@@ -319,7 +341,7 @@ class PeersUI {
         this.shareMode.files = files;
         this.shareMode.text = text;
 
-        console.log('Share mode activated.');
+        Logger.debug('Share mode activated.');
 
         Events.fire('share-mode-changed', {
             active: true,
@@ -367,7 +389,7 @@ class PeersUI {
         this.$shareModeEditBtn.removeEventListener('click', this._editShareTextCallback);
         this.$shareModeEditBtn.setAttribute('hidden', true);
 
-        console.log('Share mode deactivated.')
+        Logger.debug('Share mode deactivated.')
         Events.fire('share-mode-changed', { active: false });
     }
 
@@ -395,35 +417,63 @@ class PeersUI {
 class PeerUI {
 
     static _badgeClassNames = ["badge-room-ip", "badge-room-secret", "badge-room-public-id"];
-    static _shareMode = {
-        active: false,
-        descriptor: ""
-    };
 
-    constructor(peer, connectionHash, shareMode) {
+    constructor(peer, roomType, roomId, shareMode = {active: false, descriptor: ""}) {
         this.$xInstructions = $$('x-instructions');
-        this.$xPeers = $$('x-peers');
 
         this._peer = peer;
-        this._connectionHash =
-            `${connectionHash.substring(0, 4)} ${connectionHash.substring(4, 8)} ${connectionHash.substring(8, 12)} ${connectionHash.substring(12, 16)}`;
+        this._connectionHash = "";
+        this._connected = false;
 
-        // This is needed if the ShareMode is started BEFORE the PeerUI is drawn.
-        PeerUI._shareMode = shareMode;
+        this._currentProgress = 0;
+        this._currentStatus = 'idle';
+        this._oldStatus = 'idle';
 
+        this._progressQueue = [];
+
+        this._roomIds = {}
+        this._roomIds[roomType] = roomId;
+
+        this._shareMode = shareMode;
+
+        this._createCallbacks();
         this._initDom();
 
-        this.$xPeers.appendChild(this.$el);
-        Events.fire('peer-added');
-
         // ShareMode
         Events.on('share-mode-changed', e => this._onShareModeChanged(e.detail.active, e.detail.descriptor));
     }
 
+    _initDom() {
+        this.$el = document.createElement('x-peer');
+        this.$el.id = this._peer.id;
+        this.$el.ui = this;
+        this.$el.classList.add('center');
+
+        this.html();
+
+        this.$icon = this.$el.querySelector('svg use');
+        this.$displayName = this.$el.querySelector('.name');
+        this.$deviceName = this.$el.querySelector('.device-name');
+        this.$label = this.$el.querySelector('label');
+        this.$input = this.$el.querySelector('input');
+        this.$progress = this.$el.querySelector('.progress');
+
+        this.$icon.setAttribute('xlink:href', this._icon());
+        this.$displayName.textContent = this._displayName();
+        this.$deviceName.textContent = this._deviceName();
+
+        this.updateTypesClassList();
+
+        this._evaluateShareMode();
+        this._bindListeners();
+    }
+
+    _removeDom() {
+        this.$el.remove();
+    }
+
     html() {
-        let title= PeerUI._shareMode.active
-            ? Localization.getTranslation("peer-ui.click-to-send-share-mode", null, {descriptor: PeerUI._shareMode.descriptor})
-            : Localization.getTranslation("peer-ui.click-to-send");
+        let title= Localization.getTranslation("peer-ui.click-to-send");
 
         this.$el.innerHTML = `
             <label class="column center pointer" title="${title}">
@@ -448,45 +498,37 @@ class PeerUI {
                     <div class="status font-body2"></div>
                 </div>
             </label>`;
-
-        this.$el.querySelector('svg use').setAttribute('xlink:href', this._icon());
-        this.$el.querySelector('.name').textContent = this._displayName();
-        this.$el.querySelector('.device-name').textContent = this._deviceName();
-
-        this.$label = this.$el.querySelector('label');
-        this.$input = this.$el.querySelector('input');
     }
 
-    addTypesToClassList() {
-        if (this._peer._isSameBrowser()) {
+    updateTypesClassList() {
+        // Remove all classes
+        this.$el.classList.remove('type-ip', 'type-secret', 'type-public-id', 'type-same-browser', 'ws-peer');
+
+        // Add classes accordingly
+        Object.keys(this._roomIds).forEach(roomType => this.$el.classList.add(`type-${roomType}`));
+
+        if (BrowserTabsConnector.peerIsSameBrowser(this._peer.id)) {
             this.$el.classList.add(`type-same-browser`);
         }
 
-        Object.keys(this._peer._roomIds).forEach(roomType => this.$el.classList.add(`type-${roomType}`));
-
-        if (!this._peer.rtcSupported || !window.isRtcSupported) this.$el.classList.add('ws-peer');
+        if (!this._peer.rtcSupported || !window.isRtcSupported) {
+            this.$el.classList.add('ws-peer');
+        }
     }
 
-    _initDom() {
-        this.$el = document.createElement('x-peer');
-        this.$el.id = this._peer.id;
-        this.$el.ui = this;
-        this.$el.classList.add('center');
+    _addRoomId(roomType, roomId) {
+        this._roomIds[roomType] = roomId;
+        this.updateTypesClassList();
+    }
 
-        this.addTypesToClassList();
-
-        this.html();
-
-        this._createCallbacks();
-
-        this._evaluateShareMode();
-        this._bindListeners();
+    _removeRoomId(roomType) {
+        delete this._roomIds[roomType];
+        this.updateTypesClassList();
     }
 
     _onShareModeChanged(active = false, descriptor = "") {
-        // This is needed if the ShareMode is started AFTER the PeerUI is drawn.
-        PeerUI._shareMode.active = active;
-        PeerUI._shareMode.descriptor = descriptor;
+        this._shareMode.active = active;
+        this._shareMode.descriptor = descriptor;
 
         this._evaluateShareMode();
         this._bindListeners();
@@ -494,12 +536,12 @@ class PeerUI {
 
     _evaluateShareMode() {
         let title;
-        if (!PeerUI._shareMode.active) {
+        if (!this._shareMode.active) {
             title = Localization.getTranslation("peer-ui.click-to-send");
             this.$input.removeAttribute('disabled');
         }
         else {
-            title =  Localization.getTranslation("peer-ui.click-to-send-share-mode", null, {descriptor: PeerUI._shareMode.descriptor});
+            title =  Localization.getTranslation("peer-ui.click-to-send-share-mode", null, {descriptor: this._shareMode.descriptor});
             this.$input.setAttribute('disabled', true);
         }
         this.$label.setAttribute('title', title);
@@ -507,8 +549,6 @@ class PeerUI {
 
     _createCallbacks() {
         this._callbackInput = e => this._onFilesSelected(e);
-        this._callbackClickSleep = _ => NoSleepUI.enable();
-        this._callbackTouchStartSleep = _ => NoSleepUI.enable();
         this._callbackDrop = e => this._onDrop(e);
         this._callbackDragEnd = e => this._onDragEnd(e);
         this._callbackDragLeave = e => this._onDragEnd(e);
@@ -520,14 +560,12 @@ class PeerUI {
     }
 
     _bindListeners() {
-        if(!PeerUI._shareMode.active) {
+        if(!this._shareMode.active) {
             // Remove Events Share mode
             this.$el.removeEventListener('pointerdown', this._callbackPointerDown);
 
             // Add Events Normal Mode
-            this.$el.querySelector('input').addEventListener('change', this._callbackInput);
-            this.$el.addEventListener('click', this._callbackClickSleep);
-            this.$el.addEventListener('touchstart', this._callbackTouchStartSleep);
+            this.$input.addEventListener('change', this._callbackInput);
             this.$el.addEventListener('drop', this._callbackDrop);
             this.$el.addEventListener('dragend', this._callbackDragEnd);
             this.$el.addEventListener('dragleave', this._callbackDragLeave);
@@ -538,8 +576,7 @@ class PeerUI {
         }
         else {
             // Remove Events Normal Mode
-            this.$el.removeEventListener('click', this._callbackClickSleep);
-            this.$el.removeEventListener('touchstart', this._callbackTouchStartSleep);
+            this.$input.removeEventListener('change', this._callbackInput);
             this.$el.removeEventListener('drop', this._callbackDrop);
             this.$el.removeEventListener('dragend', this._callbackDragEnd);
             this.$el.removeEventListener('dragleave', this._callbackDragLeave);
@@ -562,6 +599,37 @@ class PeerUI {
         });
     }
 
+    _peerConnected(connected = true, connectionHash = "") {
+        if (connected) {
+            this._connected = true;
+
+            // on reconnect: reset status to saved status
+            this.queueProgressStatus(null, this._oldStatus);
+            this._oldStatus = 'idle';
+
+            this._connectionHash = connectionHash;
+        }
+        else {
+            this._connected = false;
+
+            // when connecting: / connection is lost during transfer: save old status
+            if (this._isTransferringStatus(this._currentStatus)) {
+                this._oldStatus = this._currentStatus;
+            }
+            this.queueProgressStatus(null, "connect");
+
+            this._connectionHash = "";
+        }
+    }
+
+    getConnectionHashWithSpaces()  {
+        if (this._connectionHash.length !== 16) {
+            return ""
+        }
+
+        return `${this._connectionHash.substring(0, 4)} ${this._connectionHash.substring(4, 8)} ${this._connectionHash.substring(8, 12)} ${this._connectionHash.substring(12, 16)}`;
+    }
+
     _displayName() {
         return this._peer.name.displayName;
     }
@@ -570,13 +638,26 @@ class PeerUI {
         return this._peer.name.deviceName;
     }
 
+    _setDisplayName(displayName) {
+        this._peer.name.displayName = displayName;
+        this.$displayName.textContent = displayName;
+    }
+
+    _roomTypes() {
+        return Object.keys(this._roomIds);
+    }
+
     _badgeClassName() {
-        const roomTypes = Object.keys(this._peer._roomIds);
-        return roomTypes.includes('secret')
-            ? 'badge-room-secret'
-            : roomTypes.includes('ip')
-                ? 'badge-room-ip'
-                : 'badge-room-public-id';
+        const roomTypes = this._roomTypes();
+        if (roomTypes.includes('secret')) {
+            return 'badge-room-secret';
+        }
+        else if (roomTypes.includes('ip')) {
+            return 'badge-room-ip';
+        }
+        else {
+            return 'badge-room-public-id';
+        }
     }
 
     _icon() {
@@ -596,6 +677,13 @@ class PeerUI {
 
         if (files.length === 0) return;
 
+        let totalSize = 0;
+        for (let i = 0; i < files.length; i++) {
+            totalSize += files[i].size;
+        }
+        // Prevent device from sleeping
+        NoSleepUI.enable();
+
         Events.fire('files-selected', {
             files: files,
             to: this._peer.id
@@ -603,40 +691,151 @@ class PeerUI {
         $input.files = null; // reset input
     }
 
-    setProgress(progress, status) {
-        const $progress = this.$el.querySelector('.progress');
-        if (0.5 < progress && progress < 1) {
-            $progress.classList.add('over50');
-        }
-        else {
-            $progress.classList.remove('over50');
-        }
-        if (progress < 1) {
-            if (status !== this.currentStatus) {
-                let statusName = {
-                    "prepare": Localization.getTranslation("peer-ui.preparing"),
-                    "transfer": Localization.getTranslation("peer-ui.transferring"),
-                    "process": Localization.getTranslation("peer-ui.processing"),
-                    "wait": Localization.getTranslation("peer-ui.waiting")
-                }[status];
+    queueProgressStatus(progress = null, status = null, statusText = null) {
+        clearTimeout(this._progressIdleTimeout);
 
-                this.$el.setAttribute('status', status);
-                this.$el.querySelector('.status').innerText = statusName;
-                this.currentStatus = status;
+        // if progress is higher than progress in queue -> overwrite in queue and cut queue at this position
+        for (let i = 0; i < this._progressQueue.length; i++) {
+            if (this._progressQueue[i].progress <= progress && this._progressQueue[i].status === status) {
+                this._progressQueue[i] = {progress, status, statusText};
+                this._progressQueue.splice(i + 1);
+                return;
             }
         }
-        else {
-            this.$el.removeAttribute('status');
-            this.$el.querySelector('.status').innerHTML = '';
-            progress = 0;
-            this.currentStatus = null;
+        this._progressQueue.push({progress, status, statusText});
+
+        // only dequeue if not already dequeuing
+        if (this._progressAnimatingTimeout) return;
+
+        this.dequeueProgressStatus();
+    }
+
+    setNextProgressStatus() {
+        if (!this._progressQueue.length) {
+            // Queue is empty
+            this._progressAnimatingTimeout = null;
+            return;
         }
-        const degrees = `rotate(${360 * progress}deg)`;
-        $progress.style.setProperty('--progress', degrees);
+
+        // Queue is not empty -> set next progress
+        this.dequeueProgressStatus();
+    }
+
+    dequeueProgressStatus() {
+        clearTimeout(this._progressAnimatingTimeout);
+
+        let {progress, status, statusText} = this._progressQueue.shift();
+
+        // On complete status: set progress to 0 after 250ms and status to idle after 10s
+        if (this._isCompletedStatus(status)) {
+            this._progressQueue.unshift({progress: 0});
+            this._progressIdleTimeout = setTimeout(() => this.setStatus("idle"), 10000);
+        }
+
+        // After animation has finished -> set next progress in queue
+        this._progressAnimatingTimeout = setTimeout(() => this.setNextProgressStatus(), 250); // 200 ms animation + buffer
+
+
+        // Only change status if explicitly set
+        if (status) {
+            this.setStatus(status, statusText);
+        }
+
+        // Only change progress if explicitly set and differs from current
+        if (progress === null || progress === this._currentProgress) return;
+
+        const progressSpillsOverHalf = this._currentProgress < 0.5 && 0.5 < progress; // 0.5 slips through
+        const progressSpillsOverFull = progress <= 0.5 && 0.5 <= this._currentProgress && this._currentProgress < 1;
+
+        // If spills over half: go to 0.5 first
+        // If spills over full: go to 1 first
+        if (progressSpillsOverHalf) {
+            this._progressQueue.unshift({progress: 0.5}, {progress: progress});
+            this.dequeueProgressStatus();
+            return;
+        }
+        else if (progressSpillsOverFull) {
+            this._progressQueue.unshift({progress: 1}, {progress: progress});
+            this.dequeueProgressStatus();
+            return;
+        }
+
+        // Clear progress after setting it to 1
+        if (progress === 1) {
+            this._progressQueue.unshift({progress: 0});
+        }
+
+        // Set progress to 1 before setting to 0 if not error
+        if (progress === 0 && this._currentProgress !== 1 && status !== 'error') {
+            this._progressQueue.unshift({progress: 1});
+            this.dequeueProgressStatus();
+            return;
+        }
+
+        // under 0.5 -> remove second circle
+        // over 0.5 -> add second circle
+        if (progress < 0.5) {
+            this.$progress.classList.remove('animate');
+            this.$progress.classList.remove('over50');
+            this.$progress.classList.add('animate');
+        }
+        else if (progress > 0.5 && this._currentProgress === 0.5) {
+            this.$progress.classList.remove('animate');
+            this.$progress.classList.add('over50');
+            this.$progress.classList.add('animate');
+        }
+
+        // Do not animate when setting progress to lower value
+        if (progress < this._currentProgress && this._currentProgress === 1) {
+            this.$progress.classList.remove('animate');
+        }
+
+        // If document is in background do not animate to prevent flickering on focus
+        if (!document.hasFocus()) {
+            this.$progress.classList.remove('animate');
+        }
+
+        this._currentProgress = progress;
+        this.$progress.style.setProperty('--progress', `rotate(${360 * progress}deg)`);
+    }
+
+    setStatus(status, statusText = null) {
+        this._currentStatus = status;
+
+        if (status === 'idle') {
+            this.$el.removeAttribute('status');
+            this.$el.querySelector('.status').innerText = '';
+            return;
+        }
+
+        if (!statusText) {
+            statusText = {
+                "connect": Localization.getTranslation("peer-ui.connecting"),
+                "prepare": Localization.getTranslation("peer-ui.preparing"),
+                "transfer": Localization.getTranslation("peer-ui.transferring"),
+                "receive": Localization.getTranslation("peer-ui.receiving"),
+                "process": Localization.getTranslation("peer-ui.processing"),
+                "wait": Localization.getTranslation("peer-ui.waiting"),
+                "transfer-complete": Localization.getTranslation("peer-ui.transfer-complete"),
+                "receive-complete": Localization.getTranslation("peer-ui.receive-complete"),
+                "error": Localization.getTranslation("peer-ui.error")
+            }[status];
+        }
+
+        this.$el.setAttribute('status', status);
+        this.$el.querySelector('.status').innerText = statusText;
+    }
+
+    _isCompletedStatus(status) {
+        return status && (status.endsWith("-complete") || status === "error")
+    }
+
+    _isTransferringStatus(status) {
+        return status !== "connect" && !this._isCompletedStatus(status);
     }
 
     _onDrop(e) {
-        if (PeerUI._shareMode.active || Dialog.anyDialogShown()) return;
+        if (this._shareMode.active || Dialog.anyDialogShown()) return;
 
         e.preventDefault();
 
@@ -830,44 +1029,48 @@ class ReceiveDialog extends Dialog {
     }
 
     _formatFileSize(bytes) {
-        // 1 GB = 1024 MB = 1024^2 KB = 1024^3 B
-        // 1024^2 = 104876; 1024^3 = 1073741824
-        if (bytes >= 1073741824) {
-            return Math.round(10 * bytes / 1073741824) / 10 + ' GB';
+        // 1 GB = 1e3 MB = 1e6 KB = 1e9 B
+        if (bytes >= 1e9) {
+            const rndGigabytes = Math.round(10 * bytes / 1e9) / 10;
+            return `${rndGigabytes} GB`;
         }
-        else if (bytes >= 1048576) {
-            return Math.round(bytes / 1048576) + ' MB';
+        else if (bytes >= 1e6) {
+            const rndMegabytes = Math.round(10 * bytes / 1e6) / 10;
+            return `${rndMegabytes} MB`;
         }
-        else if (bytes > 1024) {
-            return Math.round(bytes / 1024) + ' KB';
+        else if (bytes >= (1e3)) {
+            const rndKilobytes = Math.round(10 * bytes / 1e3) / 10;
+            return `${rndKilobytes} KB`;
         }
         else {
-            return bytes + ' Bytes';
+            return `${bytes} bytes`;
         }
     }
 
     _parseFileData(displayName, connectionHash, files, imagesOnly, totalSize, badgeClassName) {
         let fileOther = "";
-
         if (files.length === 2) {
             fileOther = imagesOnly
                 ? Localization.getTranslation("dialogs.file-other-description-image")
                 : Localization.getTranslation("dialogs.file-other-description-file");
         }
-        else if (files.length >= 2) {
+        else if (files.length > 2) {
             fileOther = imagesOnly
                 ? Localization.getTranslation("dialogs.file-other-description-image-plural", null, {count: files.length - 1})
                 : Localization.getTranslation("dialogs.file-other-description-file-plural", null, {count: files.length - 1});
         }
 
-        this.$fileOther.innerText = fileOther;
-
-        const fileName = files[0].name;
+        const fileName = files[0].displayName;
         const fileNameSplit = fileName.split('.');
         const fileExtension = '.' + fileNameSplit[fileNameSplit.length - 1];
-        this.$fileStem.innerText = fileName.substring(0, fileName.length - fileExtension.length);
+        const fileStem = fileName.substring(0, fileName.length - fileExtension.length);
+
+        const fileSize = this._formatFileSize(totalSize);
+
+        this.$fileOther.innerText = fileOther;
+        this.$fileStem.innerText = fileStem;
         this.$fileExtension.innerText = fileExtension;
-        this.$fileSize.innerText = this._formatFileSize(totalSize);
+        this.$fileSize.innerText = fileSize;
         this.$displayName.innerText = displayName;
         this.$displayName.title = connectionHash;
         this.$displayName.classList.remove("badge-room-ip", "badge-room-secret", "badge-room-public-id");
@@ -884,34 +1087,104 @@ class ReceiveFileDialog extends ReceiveDialog {
         this.$shareBtn = this.$el.querySelector('#share-btn');
 
         Events.on('files-received', e => this._onFilesReceived(e.detail.peerId, e.detail.files, e.detail.imagesOnly, e.detail.totalSize));
-        this._filesQueue = [];
+        this._filesDataQueue = [];
     }
 
     async _onFilesReceived(peerId, files, imagesOnly, totalSize) {
+        const descriptor = this._getDescriptor(files, imagesOnly);
         const displayName = $(peerId).ui._displayName();
         const connectionHash = $(peerId).ui._connectionHash;
         const badgeClassName = $(peerId).ui._badgeClassName();
 
-        this._filesQueue.push({
+        this._filesDataQueue.push({
             peerId: peerId,
-            displayName: displayName,
-            connectionHash: connectionHash,
             files: files,
             imagesOnly: imagesOnly,
             totalSize: totalSize,
+            descriptor: descriptor,
+            displayName: displayName,
+            connectionHash: connectionHash,
             badgeClassName: badgeClassName
         });
 
-        window.blop.play();
+        audioPlayer.playBlop();
 
-        await this._nextFiles();
+        await this._processFiles();
     }
 
-    async _nextFiles() {
-        if (this._busy || !this._filesQueue.length) return;
+    canShareFilesViaMenu(files) {
+        return window.isMobile && !!navigator.share && navigator.canShare({files});
+    }
+
+    async _processFiles() {
+        if (this._busy || !this._filesDataQueue.length) return;
+
         this._busy = true;
-        const {peerId, displayName, connectionHash, files, imagesOnly, totalSize, badgeClassName} = this._filesQueue.shift();
-        await this._displayFiles(peerId, displayName, connectionHash, files, imagesOnly, totalSize, badgeClassName);
+
+        Events.fire('set-progress', {peerId: this._peerId, progress: 0, status: 'process'});
+
+        this._data = this._filesDataQueue.shift();
+
+        const documentTitleTranslation = this._data.files.length === 1
+            ? `${ Localization.getTranslation("document-titles.file-received") } - PairDrop`
+            : `${ Localization.getTranslation("document-titles.file-received-plural", null, {count: this._data.files.length}) } - PairDrop`;
+
+        // If possible, share via menu - else download files
+        let shareViaMenu = this.canShareFilesViaMenu(this._data.files);
+
+        if (shareViaMenu && this._filesTooBigForRam()) {
+            // Files too big to share on iOS -> Download instead
+            shareViaMenu = false;
+            Events.fire('notify-user', Localization.getTranslation("notifications.error-sharing-size"));
+        }
+
+        this._parseFileData(
+            this._data.displayName,
+            this._data.connectionHash,
+            this._data.files,
+            this._data.imagesOnly,
+            this._data.totalSize,
+            this._data.badgeClassName
+        );
+        this._setTitle(this._data.descriptor);
+
+        await this._addFileToPreviewBox(this._data.files[0]);
+
+        document.title = documentTitleTranslation;
+        changeFavicon("images/favicon-96x96-notification.png");
+
+        if (shareViaMenu) {
+            await this._setupShareMenu();
+        }
+        else {
+            await this._setupDownload();
+        }
+
+        Events.fire('set-progress', {peerId: this._data.peerId, progress: 0, status: "receive-complete"});
+    }
+
+    _filesTooBigForRam() {
+        // Pages crash on iOS if RAM exceeds 250 MB
+        return window.iOS && this._data.totalSize > 250000000;
+    }
+
+    _getDescriptor(files, imagesOnly) {
+        let descriptor;
+        if (files.length === 1) {
+            descriptor = imagesOnly
+                ? Localization.getTranslation("dialogs.title-image")
+                : Localization.getTranslation("dialogs.title-file");
+        }
+        else {
+            descriptor = imagesOnly
+                ? Localization.getTranslation("dialogs.title-image-plural")
+                : Localization.getTranslation("dialogs.title-file-plural");
+        }
+        return descriptor;
+    }
+
+    _setTitle(descriptor) {
+        this.$receiveTitle.innerText = Localization.getTranslation("dialogs.receive-title", null, {descriptor: descriptor});
     }
 
     createPreviewElement(file) {
@@ -925,164 +1198,251 @@ class ReceiveFileDialog extends ReceiveDialog {
                 }
 
                 if (Object.keys(previewElement).indexOf(mime) === -1) {
-                    resolve(false);
-                }
-                else {
-                    let element = document.createElement(previewElement[mime]);
-                    element.controls = true;
-                    element.onload = _ => {
-                        this.$previewBox.appendChild(element);
-                        resolve(true);
-                    };
-                    element.onloadeddata = _ => {
-                        this.$previewBox.appendChild(element);
-                        resolve(true);
-                    };
-                    element.onerror = _ => {
-                        reject(`${mime} preview could not be loaded from type ${file.type}`);
-                    };
-                    element.src = URL.createObjectURL(file);
+                    reject('Preview is only supported for images, audio and video');
+                    return;
                 }
+
+                let element = document.createElement(previewElement[mime]);
+                let timeout = setTimeout(_ => {
+                    reject('Preview could not be loaded: timeout', file.type);
+                }, 1000);
+
+                element.controls = true;
+                element.onload = _ => {
+                    clearTimeout(timeout);
+                    resolve(element);
+                };
+                element.onloadeddata = _ => {
+                    clearTimeout(timeout);
+                    resolve(element);
+                };
+                element.onerror = _ => {
+                    clearTimeout(timeout);
+                    reject('Preview could not be loaded from type', file.type);
+                };
+                element.src = URL.createObjectURL(file);
             } catch (e) {
-                reject(`preview could not be loaded from type ${file.type}`);
+                reject('Preview could not be loaded from type', file.type);
             }
         });
     }
 
-    async _displayFiles(peerId, displayName, connectionHash, files, imagesOnly, totalSize, badgeClassName) {
-        this._parseFileData(displayName, connectionHash, files, imagesOnly, totalSize, badgeClassName);
-
-        let descriptor, url, filenameDownload;
-        if (files.length === 1) {
-            descriptor = imagesOnly
-                ? Localization.getTranslation("dialogs.title-image")
-                : Localization.getTranslation("dialogs.title-file");
-        }
-        else {
-            descriptor = imagesOnly
-                ? Localization.getTranslation("dialogs.title-image-plural")
-                : Localization.getTranslation("dialogs.title-file-plural");
-        }
-        this.$receiveTitle.innerText = Localization.getTranslation("dialogs.receive-title", null, {descriptor: descriptor});
-
-        const canShare = (window.iOS || window.android) && !!navigator.share && navigator.canShare({files});
-        if (canShare) {
-            this.$shareBtn.removeAttribute('hidden');
-            this.$shareBtn.onclick = _ => {
-                navigator.share({files: files})
-                    .catch(err => {
-                        console.error(err);
-                    });
-            }
-        }
-
-        let downloadZipped = false;
-        if (files.length > 1) {
-            downloadZipped = true;
-            try {
-                let bytesCompleted = 0;
-                zipper.createNewZipWriter();
-                for (let i=0; i<files.length; i++) {
-                    await zipper.addFile(files[i], {
-                        onprogress: (progress) => {
-                            Events.fire('set-progress', {
-                                peerId: peerId,
-                                progress: (bytesCompleted + progress) / totalSize,
-                                status: 'process'
-                            })
-                        }
-                    });
-                    bytesCompleted += files[i].size;
-                }
-                url = await zipper.getBlobURL();
-
-                let now = new Date(Date.now());
-                let year = now.getFullYear().toString();
-                let month = (now.getMonth()+1).toString();
-                month = month.length < 2 ? "0" + month : month;
-                let date = now.getDate().toString();
-                date = date.length < 2 ? "0" + date : date;
-                let hours = now.getHours().toString();
-                hours = hours.length < 2 ? "0" + hours : hours;
-                let minutes = now.getMinutes().toString();
-                minutes = minutes.length < 2 ? "0" + minutes : minutes;
-                filenameDownload = `PairDrop_files_${year+month+date}_${hours+minutes}.zip`;
-            } catch (e) {
-                console.error(e);
-                downloadZipped = false;
-            }
-        }
-
-        this.$downloadBtn.removeAttribute('disabled');
-        this.$downloadBtn.innerText = Localization.getTranslation("dialogs.download");
-        this.$downloadBtn.onclick = _ => {
-            if (downloadZipped) {
-                let tmpZipBtn = document.createElement("a");
-                tmpZipBtn.download = filenameDownload;
-                tmpZipBtn.href = url;
-                tmpZipBtn.click();
-            }
-            else {
-                this._downloadFilesIndividually(files);
-            }
-
-            if (!canShare) {
-                this.$downloadBtn.innerText = Localization.getTranslation("dialogs.download-again");
-            }
-            Events.fire('notify-user', Localization.getTranslation("notifications.download-successful", null, {descriptor: descriptor}));
-
-            // Prevent clicking the button multiple times
-            this.$downloadBtn.style.pointerEvents = "none";
-            setTimeout(() => this.$downloadBtn.style.pointerEvents = "unset", 2000);
-        };
-
-        document.title = files.length === 1
-            ? `${ Localization.getTranslation("document-titles.file-received") } - PairDrop`
-            : `${ Localization.getTranslation("document-titles.file-received-plural", null, {count: files.length}) } - PairDrop`;
-        changeFavicon("images/favicon-96x96-notification.png");
-
-        Events.fire('set-progress', {peerId: peerId, progress: 1, status: 'process'})
-        this.show();
+    _disableButton($button, duration) {
+        $button.style.pointerEvents = "none";
 
         setTimeout(() => {
-            // wait for the dialog to be shown
-            if (canShare) {
-                this.$shareBtn.click();
-            }
-            else {
-                this.$downloadBtn.click();
-            }
-        }, 500);
-
-        this.createPreviewElement(files[0])
-            .then(canPreview => {
-                if (canPreview) {
-                    console.log('the file is able to preview');
-                }
-                else {
-                    console.log('the file is not able to preview');
-                }
-            })
-            .catch(r => console.error(r));
+            $button.style.pointerEvents = "unset";
+        }, duration);
     }
 
-    _downloadFilesIndividually(files) {
+    async _setShareButton() {
+        this.$shareBtn.onclick = _ => {
+            navigator.share({files: this._data.files})
+                .catch(async err => {
+                    Logger.error(err);
+
+                    if (err.name === 'AbortError' && err.message === 'Abort due to cancellation of share.') {
+                        return;
+                    }
+                    else if (err.name === 'NotAllowedError' && err.message === 'The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.') {
+                        return;
+                    }
+
+                    // Fallback to download
+                    if (err.name === 'AbortError' && err.message === 'Abort due to error while reading files.') {
+                        Events.fire('notify-user', Localization.getTranslation("notifications.error-sharing-size"));
+                    }
+                    else {
+                        Events.fire('notify-user', Localization.getTranslation("notifications.error-sharing-default"));
+                    }
+
+                    this._tidyUpButtons();
+                    await this._setupDownload()
+                });
+
+            // Prevent clicking the button multiple times
+            this._disableButton(this.$shareBtn, 2000);
+        }
+        this.$shareBtn.removeAttribute('disabled');
+        this.$shareBtn.removeAttribute('hidden');
+    }
+
+    async _processDataAsZip() {
+        let zipObjectUrl = "";
+        let zipName = "";
+        let sendAsZip = false;
+
+        if (this._data.files.length > 1 && !this._filesTooBigForRam()) {
+            Events.fire('set-progress', {
+                peerId: this._data.peerId,
+                progress: 0,
+                status: 'process'
+            });
+
+            zipObjectUrl = await zipper.getObjectUrlOfZipFile(this._data.files,zipProgress => {
+                    Events.fire('set-progress', {
+                        peerId: this._data.peerId,
+                        progress: zipProgress / this._data.totalSize,
+                        status: 'process'
+                    });
+                });
+            zipName = this._createZipFilename();
+
+            sendAsZip = !!zipObjectUrl;
+        }
+        return {sendAsZip, zipObjectUrl, zipName};
+    }
+
+    _setDownloadButtonToZip(zipFileUrl, zipFileName) {
+        const downloadSuccessfulTranslation = Localization.getTranslation("notifications.download-successful", null, {descriptor: this._data.descriptor});
+        this.downloadSuccessful = false;
+        this.$downloadBtn.onclick = _ => {
+            this._downloadFileFromUrl(zipFileUrl, zipFileName)
+
+            Events.fire('notify-user', downloadSuccessfulTranslation);
+            this.downloadSuccessful = true;
+
+            this.hide();
+        };
+    }
+
+    _setDownloadButtonToFiles(files) {
+        const downloadTranslation = Localization.getTranslation("dialogs.download");
+        const downloadSuccessfulTranslation = Localization.getTranslation("notifications.download-successful", null, {descriptor: this._data.descriptor});
+
+        this.$downloadBtn.innerText = files.length === 1
+            ? downloadTranslation
+            : `${downloadTranslation} 1/${files.length}`;
+
+        this.downloadSuccessful = false;
+        let i = 0;
+
+        this.$downloadBtn.onclick = _ => {
+            this._disableButton(this.$shareBtn, 2000);
+
+            this._downloadFiles([files[i]]);
+
+            if (i < files.length - 1) {
+                i++;
+                this.$downloadBtn.innerText = `${downloadTranslation} ${i + 1}/${files.length}`;
+                return
+            }
+
+            Events.fire('notify-user', downloadSuccessfulTranslation);
+            this.downloadSuccessful = true;
+
+            this.hide();
+        };
+    }
+
+    async _addFileToPreviewBox(file) {
+        try {
+            const previewElement = await this.createPreviewElement(file)
+            this.$previewBox.appendChild(previewElement);
+        }
+        catch (e) {
+            Logger.log(e);
+        }
+    }
+
+    _downloadFileFromUrl(url, name) {
+        let tmpZipBtn = document.createElement("a");
+        tmpZipBtn.download = name;
+        tmpZipBtn.href = url;
+        tmpZipBtn.click();
+    }
+
+    _downloadFiles(files) {
         let tmpBtn = document.createElement("a");
-        for (let i=0; i<files.length; i++) {
-            tmpBtn.download = files[i].name;
+        for (let i = 0; i < files.length; i++) {
+            tmpBtn.download = files[i].displayName;
             tmpBtn.href = URL.createObjectURL(files[i]);
             tmpBtn.click();
         }
     }
 
+    _createZipFilename() {
+        let now = new Date(Date.now());
+        let year = now.getFullYear().toString();
+        let month = (now.getMonth()+1).toString();
+        let date = now.getDate().toString();
+        let hours = now.getHours().toString();
+        let minutes = now.getMinutes().toString();
+
+        // Pad single letter strings with preceding "0"
+        month = month.length < 2 ? "0" + month : month;
+        date = date.length < 2 ? "0" + date : date;
+        hours = hours.length < 2 ? "0" + hours : hours;
+        minutes = minutes.length < 2 ? "0" + minutes : minutes;
+
+        return `PairDrop_files_${year}${month}${date}_${hours}${minutes}.zip`;
+    }
+
+    async _setupShareMenu() {
+        await this._setShareButton();
+
+        // always show dialog
+        this.show();
+
+        // open share menu automatically
+        setTimeout(() => {
+            this.$shareBtn.click();
+        }, 500);
+    }
+
+    async _setupDownload() {
+        this.$downloadBtn.innerText = Localization.getTranslation("dialogs.download");
+        this.$downloadBtn.removeAttribute('disabled');
+        this.$downloadBtn.removeAttribute('hidden');
+
+        let {sendAsZip, zipObjectUrl, zipName} = await this._processDataAsZip();
+
+        // If single file or zipping failed or file size exceeds memory -> download files individually -> else download zip
+        if (sendAsZip) {
+            this._setDownloadButtonToZip(zipObjectUrl, zipName);
+        } else {
+            this._setDownloadButtonToFiles(this._data.files);
+        }
+
+        if (!sendAsZip) {
+            this.show();
+            return;
+        }
+
+        // download automatically if zipped or if only one file is received
+        this.$downloadBtn.click();
+
+        // if automatic download fails -> show dialog after 1 s
+        setTimeout(() => {
+            if (!this.downloadSuccessful) {
+                this.show();
+            }
+        }, 1000);
+    }
+
+    _tidyUpButtons() {
+        this.$shareBtn.setAttribute('disabled', true);
+        this.$shareBtn.setAttribute('hidden', true);
+        this.$shareBtn.onclick = null;
+        this.$downloadBtn.setAttribute('disabled', true);
+        this.$downloadBtn.setAttribute('hidden', true);
+        this.$downloadBtn.onclick = null;
+    }
+
+    _tidyUpPreviewBox() {
+        this.$previewBox.innerHTML = '';
+    }
+
     hide() {
         super.hide();
+
         setTimeout(async () => {
-            this.$shareBtn.setAttribute('hidden', true);
-            this.$downloadBtn.setAttribute('disabled', true);
-            this.$previewBox.innerHTML = '';
+            this._tidyUpButtons();
+            this._tidyUpPreviewBox();
+
             this._busy = false;
-            await this._nextFiles();
+
+            await this._processFiles();
         }, 300);
     }
 }
@@ -1097,9 +1457,12 @@ class ReceiveRequestDialog extends ReceiveDialog {
         this.$acceptRequestBtn.addEventListener('click', _ => this._respondToFileTransferRequest(true));
         this.$declineRequestBtn.addEventListener('click', _ => this._respondToFileTransferRequest(false));
 
-        Events.on('files-transfer-request', e => this._onRequestFileTransfer(e.detail.request, e.detail.peerId))
-        Events.on('keydown', e => this._onKeyDown(e));
         this._filesTransferRequestQueue = [];
+        this._currentRequest = null;
+
+        Events.on('files-transfer-request', e => this._onRequestFileTransfer(e.detail.request, e.detail.peerId))
+        Events.on('files-transfer-request-abort', e => this._onRequestFileTransferAbort(e.detail.peerId));
+        Events.on('keydown', e => this._onKeyDown(e));
     }
 
     _onKeyDown(e) {
@@ -1116,35 +1479,57 @@ class ReceiveRequestDialog extends ReceiveDialog {
         this._dequeueRequests();
     }
 
+    _onRequestFileTransferAbort(peerId) {
+        // Remove file transfer request from this peer from queue
+        for (let i = 0; i < this._filesTransferRequestQueue.length; i++) {
+            if (this._filesTransferRequestQueue[i].peerId === peerId) {
+                this._filesTransferRequestQueue.splice(i, 1);
+                break;
+            }
+        }
+
+        // Hide dialog if the currently open transfer request is from this peer
+        if (this.isShown() && this.correspondingPeerId === peerId) {
+            this.hide();
+            Events.fire('notify-user', Localization.getTranslation("notifications.selected-peer-left"));
+        }
+    }
+
     _dequeueRequests() {
-        if (!this._filesTransferRequestQueue.length) return;
+        if (!this._filesTransferRequestQueue.length) {
+            this._currentRequest = null;
+            return;
+        }
         let {request, peerId} = this._filesTransferRequestQueue.shift();
-        this._showRequestDialog(request, peerId)
+        this._currentRequest = request;
+        this._showRequestDialog(request, peerId);
+    }
+
+    _addThumbnailToPreviewBox(thumbnailData) {
+        if (thumbnailData && thumbnailData.substring(0, 22) === "data:image/jpeg;base64") {
+            let element = document.createElement('img');
+            element.src = thumbnailData;
+            this.$previewBox.appendChild(element)
+        }
     }
 
     _showRequestDialog(request, peerId) {
         this.correspondingPeerId = peerId;
 
-        const displayName = $(peerId).ui._displayName();
-        const connectionHash = $(peerId).ui._connectionHash;
-
-        const badgeClassName = $(peerId).ui._badgeClassName();
-
-        this._parseFileData(displayName, connectionHash, request.header, request.imagesOnly, request.totalSize, badgeClassName);
-
-        if (request.thumbnailDataUrl && request.thumbnailDataUrl.substring(0, 22) === "data:image/jpeg;base64") {
-            let element = document.createElement('img');
-            element.src = request.thumbnailDataUrl;
-            this.$previewBox.appendChild(element)
-        }
-
-        const transferRequestTitle= request.imagesOnly
+        const transferRequestTitleTranslation = request.imagesOnly
             ? Localization.getTranslation('document-titles.image-transfer-requested')
             : Localization.getTranslation('document-titles.file-transfer-requested');
 
-        this.$receiveTitle.innerText = transferRequestTitle;
+        const displayName = $(peerId).ui._displayName();
+        const connectionHash = $(peerId).ui._connectionHash;
+        const badgeClassName = $(peerId).ui._badgeClassName();
 
-        document.title =  `${transferRequestTitle} - PairDrop`;
+        this._parseFileData(displayName, connectionHash, request.header, request.imagesOnly, request.totalSize, badgeClassName);
+        this._addThumbnailToPreviewBox(request.thumbnailDataUrl);
+
+        this.$receiveTitle.innerText = transferRequestTitleTranslation;
+
+        document.title =  `${transferRequestTitleTranslation} - PairDrop`;
         changeFavicon("images/favicon-96x96-notification.png");
 
         this.$acceptRequestBtn.removeAttribute('disabled');
@@ -1158,6 +1543,8 @@ class ReceiveRequestDialog extends ReceiveDialog {
         })
         if (accepted) {
             Events.fire('set-progress', {peerId: this.correspondingPeerId, progress: 0, status: 'wait'});
+
+            // Prevent device from sleeping
             NoSleepUI.enable();
         }
         this.hide();
@@ -1320,8 +1707,8 @@ class PairDeviceDialog extends Dialog {
         Events.on('ws-disconnected', _ => this.hide());
         Events.on('pair-device-initiated', e => this._onPairDeviceInitiated(e.detail));
         Events.on('pair-device-joined', e => this._onPairDeviceJoined(e.detail.peerId, e.detail.roomSecret));
-        Events.on('peers', e => this._onPeers(e.detail));
-        Events.on('peer-joined', e => this._onPeerJoined(e.detail));
+        Events.on('peers', e => this._onPeers(e.detail.peers, e.detail.roomType, e.detail.roomId));
+        Events.on('peer-joined', e => this._onPeerJoined(e.detail.peer, e.detail.roomType, e.detail.roomId));
         Events.on('pair-device-join-key-invalid', _ => this._onPublicRoomJoinKeyInvalid());
         Events.on('pair-device-canceled', e => this._onPairDeviceCanceled(e.detail));
         Events.on('evaluate-number-room-secrets', _ => this._evaluateNumberRoomSecrets())
@@ -1431,18 +1818,19 @@ class PairDeviceDialog extends Dialog {
         };
     }
 
-    _onPeers(message) {
-        message.peers.forEach(messagePeer => {
-            this._evaluateJoinedPeer(messagePeer.id, message.roomType, message.roomId);
+    _onPeers(peers, roomType, roomId) {
+        peers.forEach(messagePeer => {
+            this._evaluateJoinedPeer(messagePeer, roomType, roomId);
         });
     }
 
-    _onPeerJoined(message) {
-        this._evaluateJoinedPeer(message.peer.id, message.roomType, message.roomId);
+    _onPeerJoined(peer, roomType, roomId) {
+        this._evaluateJoinedPeer(peer, roomType, roomId);
     }
 
-    _evaluateJoinedPeer(peerId, roomType, roomId) {
+    _evaluateJoinedPeer(peer, roomType, roomId) {
         const noPairPeerSaved = !Object.keys(this.pairPeer);
+        const peerId = peer.id;
 
         if (!peerId || !roomType || !roomId || noPairPeerSaved) return;
 
@@ -1452,18 +1840,13 @@ class PairDeviceDialog extends Dialog {
 
         if (!samePeerId || !sameRoomSecret || !typeIsSecret) return;
 
-        this._onPairPeerJoined(peerId, roomId);
+        this._onPairPeerJoined(peer, roomId);
         this.pairPeer = {};
     }
 
-    _onPairPeerJoined(peerId, roomSecret) {
-        // if devices are paired that are already connected we must save the names at this point
-        const $peer = $(peerId);
-        let displayName, deviceName;
-        if ($peer) {
-            displayName = $peer.ui._peer.name.displayName;
-            deviceName = $peer.ui._peer.name.deviceName;
-        }
+    _onPairPeerJoined(peer, roomSecret) {
+        const displayName = peer.name.displayName;
+        const deviceName = peer.name.deviceName;
 
         PersistentStorage
             .addRoomSecret(roomSecret, displayName, deviceName)
@@ -1479,6 +1862,7 @@ class PairDeviceDialog extends Dialog {
                 Events.fire('notify-user', Localization.getTranslation("notifications.pairing-not-persistent"));
                 PersistentStorage.logBrowserNotCapable();
             });
+        Events.fire('room-secret-added', {peerId: peer.id, roomSecret: roomSecret})
     }
 
     _onPublicRoomJoinKeyInvalid() {
@@ -1536,11 +1920,11 @@ class EditPairedDevicesDialog extends Dialog {
         super('edit-paired-devices-dialog');
         this.$pairedDevicesWrapper = this.$el.querySelector('.paired-devices-wrapper');
         this.$footerBadgePairedDevices = $$('.discovery-wrapper .badge-room-secret');
+        this.$editPairedDevices = $('edit-paired-devices');
 
-        $('edit-paired-devices').addEventListener('click', _ => this._onEditPairedDevices());
+        this.$editPairedDevices.addEventListener('click', _ => this._onEditPairedDevices());
         this.$footerBadgePairedDevices.addEventListener('click', _ => this._onEditPairedDevices());
 
-        Events.on('peer-display-name-changed', e => this._onPeerDisplayNameChanged(e));
         Events.on('keydown', e => this._onKeyDown(e));
     }
 
@@ -1646,23 +2030,6 @@ class EditPairedDevicesDialog extends Dialog {
                     })
             });
     }
-
-    _onPeerDisplayNameChanged(e) {
-        const peerId = e.detail.peerId;
-        const peerNode = $(peerId);
-
-        if (!peerNode) return;
-
-        const peer = peerNode.ui._peer;
-
-        if (!peer || !peer._roomIds["secret"]) return;
-
-        PersistentStorage
-            .updateRoomSecretNames(peer._roomIds["secret"], peer.name.displayName, peer.name.deviceName)
-            .then(roomSecretEntry => {
-                console.log(`Successfully updated DisplayName and DeviceName for roomSecretEntry ${roomSecretEntry.key}`);
-            })
-    }
 }
 
 class PublicRoomDialog extends Dialog {
@@ -1696,8 +2063,8 @@ class PublicRoomDialog extends Dialog {
 
         Events.on('keydown', e => this._onKeyDown(e));
         Events.on('public-room-created', e => this._onPublicRoomCreated(e.detail));
-        Events.on('peers', e => this._onPeers(e.detail));
-        Events.on('peer-joined', e => this._onPeerJoined(e.detail));
+        Events.on('peers', e => this._onPeers(e.detail.peers, e.detail.roomId));
+        Events.on('peer-joined', e => this._onPeerJoined(e.detail.roomId));
         Events.on('public-room-id-invalid', e => this._onPublicRoomIdInvalid(e.detail));
         Events.on('public-room-left', _ => this._onPublicRoomLeft());
         this.$el.addEventListener('paste', e => this._onPaste(e));
@@ -1827,29 +2194,30 @@ class PublicRoomDialog extends Dialog {
         }
     }
 
-    _onPeers(message) {
-        message.peers.forEach(messagePeer => {
-            this._evaluateJoinedPeer(messagePeer.id, message.roomId);
-        });
+    _onPeers(peers, roomId) {
+        // Do not evaluate if creating new room
+        if (this.roomId && !peers.length) return;
+
+        this._evaluateJoinedPeer(roomId);
     }
 
-    _onPeerJoined(message) {
-        this._evaluateJoinedPeer(message.peer.id, message.roomId);
+    _onPeerJoined(roomId) {
+        this._evaluateJoinedPeer(roomId);
     }
 
-    _evaluateJoinedPeer(peerId, roomId) {
-        const isInitiatedRoomId = roomId === this.roomId;
-        const isJoinedRoomId = roomId === this.roomIdJoin;
+    _evaluateJoinedPeer(roomId) {
+        const peerJoinedThisRoom = roomId === this.roomId;
+        const switchedToOtherRoom = roomId === this.roomIdJoin;
 
-        if (!peerId || !roomId || !(isInitiatedRoomId || isJoinedRoomId)) return;
+        if (!roomId || (!peerJoinedThisRoom && !switchedToOtherRoom)) return;
 
         this.hide();
 
         sessionStorage.setItem('public_room_id', roomId);
 
-        if (isJoinedRoomId) {
+        if (switchedToOtherRoom) {
+            this.roomIdJoin = null;
             this.roomId = roomId;
-            this.roomIdJoin = false;
             this._setKeyAndQrCode();
         }
     }
@@ -1862,7 +2230,7 @@ class PublicRoomDialog extends Dialog {
     }
 
     _leavePublicRoom() {
-        Events.fire('leave-public-room', this.roomId);
+        Events.fire('leave-public-room');
     }
 
     _onPublicRoomLeft() {
@@ -2036,7 +2404,7 @@ class ReceiveTextDialog extends Dialog {
     }
 
     _onText(text, peerId) {
-        window.blop.play();
+        audioPlayer.playBlop();
         this._receiveTextQueue.push({text: text, peerId: peerId});
         this._setDocumentTitleMessages();
         changeFavicon("images/favicon-96x96-notification.png");
@@ -2285,18 +2653,23 @@ class Base64Dialog extends Dialog {
         this.$pasteBtn.innerText = Localization.getTranslation("dialogs.base64-processing");
     }
 
-    preparePasting(type) {
+    preparePasting(type, useFallback = false) {
         const translateType = type === 'text'
             ? Localization.getTranslation("dialogs.base64-text")
             : Localization.getTranslation("dialogs.base64-files");
 
-        if (navigator.clipboard.readText) {
+        if (navigator.clipboard.readText && !useFallback) {
             this.$pasteBtn.innerText = Localization.getTranslation("dialogs.base64-tap-to-paste", null, {type: translateType});
             this._clickCallback = _ => this.processClipboard(type);
-            this.$pasteBtn.addEventListener('click', _ => this._clickCallback());
+            this.$pasteBtn.addEventListener('click', _ => {
+                this._clickCallback()
+                    .catch(_ => {
+                        this.preparePasting(type, true);
+                    })
+            });
         }
         else {
-            console.log("`navigator.clipboard.readText()` is not available on your browser.\nOn Firefox you can set `dom.events.asyncClipboard.readText` to true under `about:config` for convenience.")
+            Logger.log("`navigator.clipboard.readText()` is not available on your browser.\nOn Firefox you can set `dom.events.asyncClipboard.readText` to true under `about:config` for convenience.")
             this.$pasteBtn.setAttribute('hidden', true);
             this.$fallbackTextarea.setAttribute('placeholder', Localization.getTranslation("dialogs.base64-paste-to-send", null, {type: translateType}));
             this.$fallbackTextarea.removeAttribute('hidden');
@@ -2328,7 +2701,7 @@ class Base64Dialog extends Dialog {
         }
         catch(e) {
             Events.fire('notify-user', Localization.getTranslation("notifications.clipboard-content-incorrect"));
-            console.log("Clipboard content is incorrect.")
+            Logger.warn("Clipboard content is incorrect.")
         }
         this.hide();
     }
@@ -2347,7 +2720,7 @@ class Base64Dialog extends Dialog {
         }
         catch (e) {
             Events.fire('notify-user', Localization.getTranslation("notifications.text-content-incorrect"));
-            console.log("Text content incorrect.");
+            Logger.warn("Text content incorrect.");
         }
 
         this.hide();
@@ -2362,7 +2735,7 @@ class Base64Dialog extends Dialog {
         }
         catch (e) {
             Events.fire('notify-user', Localization.getTranslation("notifications.file-content-incorrect"));
-            console.log("File content incorrect.");
+            Logger.warn("File content incorrect.");
         }
 
         this.hide();
@@ -2385,10 +2758,11 @@ class AboutUI {
         this.$blueskyBtn = $('bluesky-btn');
         this.$customBtn = $('custom-btn');
         this.$privacypolicyBtn = $('privacypolicy-btn');
-        Events.on('config', e => this._onConfig(e.detail.buttons));
+        Events.on('config-loaded', _ => this._onConfigLoaded());
     }
 
-    async _onConfig(btnConfig) {
+    async _onConfigLoaded() {
+        const btnConfig = window._config.buttons
         await this._evaluateBtnConfig(this.$donationBtn, btnConfig.donation_button);
         await this._evaluateBtnConfig(this.$twitterBtn, btnConfig.twitter_button);
         await this._evaluateBtnConfig(this.$mastodonBtn, btnConfig.mastodon_button);
@@ -2464,8 +2838,9 @@ class Notifications {
 
 
         Events.on('text-received', e => this._messageNotification(e.detail.text, e.detail.peerId));
-        Events.on('files-received', e => this._downloadNotification(e.detail.files));
+        Events.on('files-received', e => this._downloadNotification(e.detail.files, e.detail.imagesOnly));
         Events.on('files-transfer-request', e => this._requestNotification(e.detail.request, e.detail.peerId));
+        // Todo on 'files-transfer-request-abort' remove notification
     }
 
     async _requestPermission() {
@@ -2520,31 +2895,30 @@ class Notifications {
         }
     }
 
-    _downloadNotification(files) {
-        if (document.visibilityState !== 'visible') {
-            let imagesOnly = files.every(file => file.type.split('/')[0] === 'image');
-            let title;
+    _downloadNotification(files, imagesOnly) {
+        if (document.visibilityState === 'visible') return;
 
-            if (files.length === 1) {
-                title = `${files[0].name}`;
+        let title, fileOther;
+        const fileName = files[0].name;
+
+        if (files.length === 1) {
+            title = `${fileName}`;
+        }
+        else {
+            if (files.length === 2) {
+                fileOther = imagesOnly
+                    ? Localization.getTranslation("dialogs.file-other-description-image")
+                    : Localization.getTranslation("dialogs.file-other-description-file");
             }
             else {
-                let fileOther;
-                if (files.length === 2) {
-                    fileOther = imagesOnly
-                        ? Localization.getTranslation("dialogs.file-other-description-image")
-                        : Localization.getTranslation("dialogs.file-other-description-file");
-                }
-                else {
-                    fileOther = imagesOnly
-                        ? Localization.getTranslation("dialogs.file-other-description-image-plural", null, {count: files.length - 1})
-                        : Localization.getTranslation("dialogs.file-other-description-file-plural", null, {count: files.length - 1});
-                }
-                title = `${files[0].name} ${fileOther}`
+                fileOther = imagesOnly
+                    ? Localization.getTranslation("dialogs.file-other-description-image-plural", null, {count: files.length - 1})
+                    : Localization.getTranslation("dialogs.file-other-description-file-plural", null, {count: files.length - 1});
             }
-            const notification = this._notify(title, Localization.getTranslation("notifications.click-to-download"));
-            this._bind(notification, _ => this._download(notification));
+            title = `${fileName} ${fileOther}`
         }
+        const notification = this._notify(title, Localization.getTranslation("notifications.click-to-download"));
+        this._bind(notification, _ => this._download(notification));
     }
 
     _requestNotification(request, peerId) {
@@ -2679,7 +3053,7 @@ class WebFileHandlersUI {
         if (!"launchQueue" in window) return;
 
         launchQueue.setConsumer(async launchParams => {
-            console.log("Launched with: ", launchParams);
+            Logger.log("Launched with: ", launchParams);
 
             if (!launchParams.files.length) return;
 
@@ -2700,19 +3074,18 @@ class WebFileHandlersUI {
 class NoSleepUI {
     constructor() {
         NoSleepUI._nosleep = new NoSleep();
+        NoSleepUI._active = false;
     }
 
     static enable() {
-        if (!this._interval) {
-            NoSleepUI._nosleep.enable();
-            NoSleepUI._interval = setInterval(() => NoSleepUI.disable(), 10000);
-        }
+        if (NoSleepUI._active) return;
+
+        NoSleepUI._nosleep.enable();
+        NoSleepUI._active = true;
     }
 
     static disable() {
-        if ($$('x-peer[status]') === null) {
-            clearInterval(NoSleepUI._interval);
-            NoSleepUI._nosleep.disable();
-        }
+        NoSleepUI._nosleep.disable();
+        NoSleepUI._active = false;
     }
 }
diff --git a/public/scripts/util.js b/public/scripts/util.js
index fc418ff..de7e2a0 100644
--- a/public/scripts/util.js
+++ b/public/scripts/util.js
@@ -62,41 +62,67 @@ window.isMobile = window.iOS || window.android;
 
 
 // Helper functions
+
+const audioPlayer = (() => {
+    const blop = document.getElementById('blop');
+    blop.addEventListener('ended', _ => {
+        blop.muted = true
+    });
+
+
+    return {
+        playBlop() {
+            if (window.isMobile) return;
+
+            blop.muted = false;
+            blop.play();
+        }
+    }
+})();
+
 const zipper = (() => {
 
-    let zipWriter;
     return {
-        createNewZipWriter() {
-            zipWriter = new zip.ZipWriter(new zip.BlobWriter("application/zip"), { bufferedWrite: true, level: 0 });
-        },
-        addFile(file, options) {
-            return zipWriter.add(file.name, new zip.BlobReader(file), options);
-        },
-        async getBlobURL() {
-            if (zipWriter) {
-                const blobURL = URL.createObjectURL(await zipWriter.close());
-                zipWriter = null;
-                return blobURL;
+        async getObjectUrlOfZipFile(files, onZipProgressCallback){
+            try {
+                const zipWriter = new zip.ZipWriter(new zip.BlobWriter("application/zip"));
+
+                let bytesProcessed = 0;
+                for (let i = 0; i < files.length; i++) {
+                    await zipWriter.add(
+                        files[i].name,
+                        new zip.BlobReader(files[i]),
+                        {
+                            onprogress: (progress) => onZipProgressCallback(bytesProcessed + progress)
+                        }
+                    );
+                    bytesProcessed += files[i].size;
+                }
+
+                return URL.createObjectURL(await zipWriter.close());
             }
-            else {
-                throw new Error("Zip file closed");
-            }
-        },
-        async getZipFile(filename = "archive.zip") {
-            if (zipWriter) {
-                const file = new File([await zipWriter.close()], filename, {type: "application/zip"});
-                zipWriter = null;
-                return file;
-            }
-            else {
-                throw new Error("Zip file closed");
+            catch (e) {
+                Logger.error(e);
+                return false;
             }
         },
         async getEntries(file, options) {
-            return await (new zip.ZipReader(new zip.BlobReader(file))).getEntries(options);
+            try {
+                return await (new zip.ZipReader(new zip.BlobReader(file))).getEntries(options);
+            }
+            catch (e) {
+                Logger.error(e);
+                return false;
+            }
         },
         async getData(entry, options) {
-            return await entry.getData(new zip.BlobWriter(), options);
+            try {
+                return await entry.getData(new zip.BlobWriter(), options);
+            }
+            catch (e) {
+                Logger.error(e);
+                return false;
+            }
         },
     };
 
@@ -521,7 +547,7 @@ function getThumbnailAsDataUrl(file, width = undefined, height = undefined, qual
             let dataUrl = canvas.toDataURL("image/jpeg", quality);
             resolve(dataUrl);
         } catch (e) {
-            console.error(e);
+            Logger.error(e);
             reject(new Error(`Could not create an image thumbnail from type ${file.type}`));
         }
     })
@@ -593,4 +619,27 @@ function isUrlValid(url) {
     catch (e) {
         return false;
     }
+}
+
+// polyfill for crypto.randomUUID()
+// Credits: @Briguy37 - https://stackoverflow.com/a/8809472/14678591
+function generateUUID() {
+    return crypto && crypto.randomUUID()
+        ? crypto.randomUUID()
+        : () => {
+            let
+                d = new Date().getTime(),
+                d2 = ((typeof performance !== 'undefined') && performance.now && (performance.now() * 1000)) || 0;
+            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
+                let r = Math.random() * 16;
+                if (d > 0) {
+                    r = (d + r) % 16 | 0;
+                    d = Math.floor(d / 16);
+                } else {
+                    r = (d2 + r) % 16 | 0;
+                    d2 = Math.floor(d2 / 16);
+                }
+                return (c == 'x' ? r : (r & 0x7 | 0x8)).toString(16);
+            });
+        };
 }
\ No newline at end of file
diff --git a/public/styles/styles-deferred.css b/public/styles/styles-deferred.css
index dd1106e..3b62af4 100644
--- a/public/styles/styles-deferred.css
+++ b/public/styles/styles-deferred.css
@@ -104,6 +104,8 @@ x-peer {
     padding: 8px;
     align-content: start;
     flex-wrap: wrap;
+    transition: transform 150ms;
+    will-change: transform;
 }
 
 x-peer input[type="file"] {
@@ -121,8 +123,6 @@ x-peer label {
 x-peer x-icon {
     --icon-size: 40px;
     margin-bottom: 4px;
-    transition: transform 150ms;
-    will-change: transform;
     display: flex;
     flex-direction: column;
 }
@@ -148,7 +148,7 @@ x-peer:not(.type-ip):not(.type-secret).type-public-id .icon-wrapper {
 .highlight-wrapper {
     align-self: center;
     align-items: center;
-    margin: 7px auto 0;
+    margin: 10px auto 0;
     height: 6px;
 }
 
@@ -187,14 +187,16 @@ x-peer:not(.type-public-id) .highlight-room-public-id {
     display: none;
 }
 
-x-peer:not([status]):hover x-icon,
-x-peer:not([status]):focus x-icon {
+x-peer:is(:not([status]), [status$=-complete], [status=error]):hover,
+x-peer:is(:not([status]), [status$=-complete], [status=error]):focus {
     transform: scale(1.05);
 }
 
-x-peer[status] x-icon {
+x-peer[status]:not([status$=-complete]) x-icon {
     box-shadow: none;
-    opacity: 0.8;
+}
+
+x-peer[status] {
     transform: scale(1);
 }
 
@@ -237,7 +239,7 @@ x-peer.ws-peer .highlight-wrapper {
 
 .status,
 .device-name {
-    opacity: 0.7;
+    color: color-mix(in srgb, rgb(var(--text-color)) 30%, grey);
     white-space: nowrap;
 }
 
@@ -246,14 +248,22 @@ x-peer[status] .device-name {
     display: none;
 }
 
-x-peer[status] {
+x-peer[status]:not([status$=-complete]):not([status=error]) {
     pointer-events: none;
 }
 
-x-peer x-icon {
+x-peer {
     animation: pop 600ms ease-out 1;
 }
 
+x-peer[status$=-complete] .status {
+    color: var(--primary-color);
+}
+
+x-peer[status=error] .status {
+    color: var(--error-color);
+}
+
 @keyframes pop {
     0% {
         transform: scale(0.7);
@@ -744,7 +754,6 @@ x-dialog .dialog-subheader {
     top: -8px;
     clip: rect(0px, 80px, 80px, 40px);
     --progress: rotate(0deg);
-    transition: transform 200ms;
 }
 
 .circle {
@@ -758,6 +767,10 @@ x-dialog .dialog-subheader {
     transform: var(--progress);
 }
 
+.animate .circle {
+    transition: transform 200ms linear;
+}
+
 .over50 {
     clip: rect(auto, auto, auto, auto);
 }
diff --git a/public/styles/styles-main.css b/public/styles/styles-main.css
index fd5b836..15faf3e 100644
--- a/public/styles/styles-main.css
+++ b/public/styles/styles-main.css
@@ -924,6 +924,7 @@ x-peers:empty~x-instructions {
 body {
     /* Constant colors */
     --primary-color: #4285f4;
+    --error-color: #ff6b6b;
     --paired-device-color: #00a69c;
     --public-room-color: #ed9d01;
     --accent-color: var(--primary-color);
diff --git a/server/ws-server.js b/server/ws-server.js
index da24375..a55b55d 100644
--- a/server/ws-server.js
+++ b/server/ws-server.js
@@ -89,22 +89,12 @@ export default class PairDropWsServer {
                 this._onLeavePublicRoom(sender);
                 break;
             case 'signal':
-                this._signalAndRelay(sender, message);
+                this._signalAndWsRelay(sender, message);
                 break;
-            case 'request':
-            case 'header':
-            case 'partition':
-            case 'partition-received':
-            case 'progress':
-            case 'files-transfer-response':
-            case 'file-transfer-complete':
-            case 'message-transfer-complete':
-            case 'text':
-            case 'display-name-changed':
-            case 'ws-chunk':
+            case 'ws-relay':
                 // relay ws-fallback
                 if (this._conf.wsFallback) {
-                    this._signalAndRelay(sender, message);
+                    this._signalAndWsRelay(sender, message);
                 }
                 else {
                     console.log("Websocket fallback is not activated on this instance.")
@@ -112,7 +102,7 @@ export default class PairDropWsServer {
         }
     }
 
-    _signalAndRelay(sender, message) {
+    _signalAndWsRelay(sender, message) {
         const room = message.roomType === 'ip'
             ? sender.ip
             : message.roomId;
@@ -261,7 +251,6 @@ export default class PairDropWsServer {
             return;
         }
 
-        this._leavePublicRoom(sender);
         this._joinPublicRoom(sender, message.publicRoomId);
     }
 
@@ -322,7 +311,7 @@ export default class PairDropWsServer {
 
     _joinPublicRoom(peer, publicRoomId) {
         // prevent joining of 2 public rooms simultaneously
-        this._leavePublicRoom(peer);
+        this._leavePublicRoom(peer, true);
 
         this._joinRoom(peer, 'public-id', publicRoomId);