diff --git a/public/index.html b/public/index.html
index b438cc2..8024bfe 100644
--- a/public/index.html
+++ b/public/index.html
@@ -767,6 +767,10 @@
             <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.-->
             <path d="M256 0c4.6 0 9.2 1 13.4 2.9L457.7 82.8c22 9.3 38.4 31 38.3 57.2c-.5 99.2-41.3 280.7-213.6 363.2c-16.7 8-36.1 8-52.8 0C57.3 420.7 16.5 239.2 16 140c-.1-26.2 16.3-47.9 38.3-57.2L242.7 2.9C246.8 1 251.4 0 256 0zm0 66.8V444.8C394 378 431.1 230.1 432 141.4L256 66.8l0 0z"></path>
         </symbol>
+        <symbol id="turn-indicator" viewBox="0 0 576 512">
+            <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+            <path d="M0 80C0 53.5 21.5 32 48 32h96c26.5 0 48 21.5 48 48V96H384V80c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v96c0 26.5-21.5 48-48 48H432c-26.5 0-48-21.5-48-48V160H192v16c0 1.7-.1 3.4-.3 5L272 288h96c26.5 0 48 21.5 48 48v96c0 26.5-21.5 48-48 48H272c-26.5 0-48-21.5-48-48V336c0-1.7 .1-3.4 .3-5L144 224H48c-26.5 0-48-21.5-48-48V80z"></path>
+        </symbol>
     </svg>
     <!-- Scripts -->
     <script src="scripts/localization.js" defer></script>
diff --git a/public/lang/en.json b/public/lang/en.json
index 4a1bd7b..a31826e 100644
--- a/public/lang/en.json
+++ b/public/lang/en.json
@@ -178,6 +178,7 @@
         "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",
+        "turn-indicator": "Transfer over the Internet",
         "connecting": "Connecting…",
         "preparing": "Preparing…",
         "waiting": "Waiting…",
diff --git a/public/scripts/network.js b/public/scripts/network.js
index 45fb6e5..124b0ad 100644
--- a/public/scripts/network.js
+++ b/public/scripts/network.js
@@ -1147,6 +1147,33 @@ class RTCPeer extends Peer {
             );
     }
 
+    async _connectionType() {
+        if (!this._conn) return "";
+
+        const stats = await this._conn.getStats(null);
+
+        let id;
+        stats.forEach((report) => {
+            if (report.type === "candidate-pair" && report.state === "succeeded") {
+                id = report.localCandidateId;
+            }
+        });
+
+        if (!id) return "";
+
+        let connectionType;
+        stats.forEach((report) => {
+            if (report.id === id) {
+                connectionType = report.candidateType;
+            }
+        });
+        return connectionType;
+    }
+
+    async _isTurn() {
+        return await this._connectionType() === "relay";
+    }
+
     _messageChannelOpen() {
         return this._messageChannel && this._messageChannel.readyState === 'open';
     }
@@ -1276,13 +1303,13 @@ class RTCPeer extends Peer {
         return channel;
     }
 
-    _onChannelOpened(e) {
+    async _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()});
+        Events.fire('peer-connected', {peerId: this._peerId, connectionHash: this.getConnectionHash(), connectionType: await this._connectionType()});
         super._onPeerConnected();
 
         this._sendPendingOutboundMessaged();
diff --git a/public/scripts/ui.js b/public/scripts/ui.js
index 989b1d7..325c5b4 100644
--- a/public/scripts/ui.js
+++ b/public/scripts/ui.js
@@ -25,7 +25,7 @@ class PeersUI {
         this.shareMode.text = "";
 
         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-connected', e => this._onPeerConnected(e.detail.peerId, e.detail.connectionHash, e.detail.connectionType));
         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));
@@ -110,12 +110,12 @@ class PeersUI {
         this.peerUIs[peer.id] = peerUI;
     }
 
-    _onPeerConnected(peerId, connectionHash) {
+    _onPeerConnected(peerId, connectionHash, connectionType) {
         const peerUI = this.peerUIs[peerId];
 
         if (!peerUI) return;
 
-        peerUI._peerConnected(true, connectionHash);
+        peerUI._peerConnected(true, connectionHash, connectionType);
 
         this._addPeerUIIfMissing(peerUI);
     }
@@ -462,7 +462,9 @@ class PeerUI {
         this.$displayName.textContent = this._displayName();
         this.$deviceName.textContent = this._deviceName();
 
-        this.updateTypesClassList();
+        this._updateRoomTypeClasses();
+        this._updateSameBrowserClass();
+        this._updateWsPeerClass();
 
         this._evaluateShareMode();
         this._bindListeners();
@@ -473,14 +475,18 @@ class PeerUI {
     }
 
     html() {
-        let title= Localization.getTranslation("peer-ui.click-to-send");
+        const titleLabelTranslation= Localization.getTranslation("peer-ui.click-to-send");
+        const titleTurnTranslation= Localization.getTranslation("peer-ui.turn-indicator");
 
         this.$el.innerHTML = `
-            <label class="column center pointer" title="${title}">
+            <label class="column center pointer" title="${titleLabelTranslation}">
                 <input type="file" multiple/>
                 <x-icon>
                     <div class="icon-wrapper" shadow="1">
                         <svg class="icon"><use xlink:href="#"/></svg>
+                        <div class="turn-indicator-wrapper center" title="${titleTurnTranslation}">
+                            <svg class="turn-indicator"><use xlink:href="#turn-indicator"/></svg>
+                        </div>
                     </div>
                     <div class="highlight-wrapper center">
                         <div class="highlight highlight-room-ip" shadow="1"></div>
@@ -500,30 +506,49 @@ class PeerUI {
             </label>`;
     }
 
-    updateTypesClassList() {
+    _updateRoomTypeClasses() {
         // Remove all classes
-        this.$el.classList.remove('type-ip', 'type-secret', 'type-public-id', 'type-same-browser', 'ws-peer');
+        this.$el.classList.remove('type-ip', 'type-secret', 'type-public-id');
 
         // Add classes accordingly
         Object.keys(this._roomIds).forEach(roomType => this.$el.classList.add(`type-${roomType}`));
+    }
 
+    _updateSameBrowserClass() {
         if (BrowserTabsConnector.peerIsSameBrowser(this._peer.id)) {
-            this.$el.classList.add(`type-same-browser`);
+            this.$el.classList.add('same-browser');
         }
+        else {
+            this.$el.classList.remove('same-browser');
+        }
+    }
 
+    _updateWsPeerClass() {
         if (!this._peer.rtcSupported || !window.isRtcSupported) {
             this.$el.classList.add('ws-peer');
         }
+        else {
+            this.$el.classList.remove('ws-peer');
+        }
+    }
+
+    _updateTurnClass() {
+        if (this._connectionType === "relay") {
+            this.$el.classList.add('turn');
+        }
+        else {
+            this.$el.classList.remove('turn');
+        }
     }
 
     _addRoomId(roomType, roomId) {
         this._roomIds[roomType] = roomId;
-        this.updateTypesClassList();
+        this._updateRoomTypeClasses();
     }
 
     _removeRoomId(roomType) {
         delete this._roomIds[roomType];
-        this.updateTypesClassList();
+        this._updateRoomTypeClasses();
     }
 
     _onShareModeChanged(active = false, descriptor = "") {
@@ -599,7 +624,7 @@ class PeerUI {
         });
     }
 
-    _peerConnected(connected = true, connectionHash = "") {
+    _peerConnected(connected, connectionHash = "", connectionType = "") {
         if (connected) {
             this._connected = true;
 
@@ -608,6 +633,11 @@ class PeerUI {
             this._oldStatus = 'idle';
 
             this._connectionHash = connectionHash;
+            this._connectionType = connectionType;
+
+            this._updateSameBrowserClass();
+            this._updateWsPeerClass();
+            this._updateTurnClass();
         }
         else {
             this._connected = false;
@@ -619,6 +649,7 @@ class PeerUI {
             this.queueProgressStatus(null, "connect");
 
             this._connectionHash = "";
+            this._connectionType = "";
         }
     }
 
diff --git a/public/styles/styles-deferred.css b/public/styles/styles-deferred.css
index 3b62af4..1df6d0f 100644
--- a/public/styles/styles-deferred.css
+++ b/public/styles/styles-deferred.css
@@ -278,6 +278,40 @@ x-peer[drop] x-icon {
     transform: scale(1.1);
 }
 
+x-peer:not(.turn) .turn-indicator-wrapper {
+    display: none;
+}
+
+x-peer .turn-indicator-wrapper {
+    z-index: 0;
+    display: flex;
+    position: absolute;
+    top: 43px;
+    right: 23px;
+    width: 22px;
+    height: 22px;
+}
+
+x-peer .turn-indicator-wrapper:before {
+    z-index: -1;
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: white;
+    border-radius: 50%;
+    border: solid 2px var(--primary-color);
+}
+
+x-peer .turn-indicator {
+    margin: auto;
+    width: calc(var(--icon-size) / 3);
+    height: calc(var(--icon-size) / 3);
+    fill: var(--primary-color);
+}
+
 /* Checkboxes as slider */
 
 .switch {