diff --git a/CHANGELOG.md b/CHANGELOG.md
index bf252ece2a..524bc9b90e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 * Add support for new format of invitation link: `c=<cid>&t=<token>&s=<serverAddress>&i=<inviterAddress>` ([#2310](https://github.com/TryQuiet/quiet/issues/2310))
 * Use server for downloading initial community metadata if v2 invitation link is detected ([#2295](https://github.com/TryQuiet/quiet/issues/2295))
+* Adds connection status information to messages panel on desktop when no peers are connected ([#1706](https://github.com/TryQuiet/quiet/
 
 # Refactorings:
 
@@ -25,6 +26,7 @@
 # Refactorings:
 
 * Use ack for CREATE_NETWORK and simplify
+* Logging from all sources can be written to node console
 * Move Community model to the backend
 
 # Fixes:
diff --git a/bs.log b/bs.log
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/package.json b/package.json
index c9e44e9828..1f87134098 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,11 @@
     "postpublish": "node copy-changelog.js && git add . && git commit -m 'Update packages CHANGELOG.md' && git push",
     "start:desktop": "lerna run --scope @quiet/desktop start",
     "lint:all": "lerna run lint",
-    "distAndRunE2ETests:mac:local": "lerna run --scope @quiet/desktop distMac:local && lerna run --scope e2e-tests test:localBinary --",
+    "clean": "lerna clean",
+    "bootstrap": "lerna bootstrap",
+    "bootstrap:clean": "npm run clean && npm run bootstrap",
+    "lerna:run:desktop": "lerna run --scope @quiet/desktop",
+    "distAndRunE2ETests:mac:local": "npm run lerna:run:desktop distMac:local && lerna run --scope e2e-tests test:localBinary --",
     "e2e:linux:build": "lerna run --scope @quiet/backend webpack:prod && lerna run --scope @quiet/desktop distUbuntu && lerna run --scope e2e-tests linux:copy",
     "e2e:linux:run": "lerna run --scope e2e-tests test --",
     "prepare": "husky",
diff --git a/packages/backend/CHANGELOG.md b/packages/backend/CHANGELOG.md
index 13228c2b77..73dd1dc142 100644
--- a/packages/backend/CHANGELOG.md
+++ b/packages/backend/CHANGELOG.md
@@ -12,6 +12,10 @@
 
 * Refactor: Consolidate profile photo validation and match magic byte check to type check
 
+* Refactor: Updates peer connecting events to include updating peers DB and refactors some payload types ([#1706](https://github.com/TryQuiet/quiet/issues/1706))
+
+* Refactor: Update Tor initialized status when Tor is connected ([#1706](https://github.com/TryQuiet/quiet/issues/1706))
+
 [2.0.3-alpha.6]
 
 * Fix: filter out invalid peer addresses in peer list. Update peer list in localdb.
diff --git a/packages/backend/src/nest/connections-manager/connections-manager.service.ts b/packages/backend/src/nest/connections-manager/connections-manager.service.ts
index 0489557f08..bc34eeb2d1 100644
--- a/packages/backend/src/nest/connections-manager/connections-manager.service.ts
+++ b/packages/backend/src/nest/connections-manager/connections-manager.service.ts
@@ -45,6 +45,7 @@ import {
   type SavedOwnerCertificatePayload,
   type UserProfile,
   type UserProfilesStoredEvent,
+  PeersNetworkDataPayload,
 } from '@quiet/types'
 import Logger from '../common/logger'
 import { CONFIG_OPTIONS, QUIET_DIR, SERVER_IO_PROVIDER, SOCKS_PROXY_AGENT } from '../const'
@@ -565,7 +566,21 @@ export class ConnectionsManagerService extends EventEmitter implements OnModuleI
     await this.libp2pService.createInstance(params)
 
     // Libp2p event listeners
-    this.libp2pService.on(Libp2pEvents.PEER_CONNECTED, (payload: { peers: string[] }) => {
+    this.libp2pService.on(Libp2pEvents.PEER_CONNECTED, async (payload: PeersNetworkDataPayload) => {
+      const peerStats: { [peerId: string]: NetworkStats } = await payload.peers.reduce(
+        async (updateObj, peer) => {
+          return {
+            ...(await updateObj),
+            [peer.peer]: {
+              peerId: peer.peer,
+              lastSeen: peer.lastSeen,
+              connectionTime: peer.connectionDuration,
+            } as NetworkStats,
+          }
+        },
+        Promise.resolve({} as { [peerId: string]: NetworkStats })
+      )
+      await this.localDbService.update(LocalDBKeys.PEERS, peerStats)
       this.serverIoProvider.io.emit(SocketActionTypes.PEER_CONNECTED, payload)
     })
 
diff --git a/packages/backend/src/nest/libp2p/libp2p.service.ts b/packages/backend/src/nest/libp2p/libp2p.service.ts
index c4129e9888..c185218d38 100644
--- a/packages/backend/src/nest/libp2p/libp2p.service.ts
+++ b/packages/backend/src/nest/libp2p/libp2p.service.ts
@@ -5,7 +5,13 @@ import { mplex } from '@libp2p/mplex'
 import { multiaddr } from '@multiformats/multiaddr'
 import { Inject, Injectable } from '@nestjs/common'
 import { createLibp2pAddress, createLibp2pListenAddress } from '@quiet/common'
-import { ConnectionProcessInfo, type NetworkDataPayload, PeerId, SocketActionTypes } from '@quiet/types'
+import {
+  ConnectionProcessInfo,
+  type NetworkDataPayload,
+  PeerId,
+  SocketActionTypes,
+  PeersNetworkDataPayload,
+} from '@quiet/types'
 import crypto from 'crypto'
 import { EventEmitter } from 'events'
 import { Agent } from 'https'
@@ -153,20 +159,32 @@ export class Libp2pService extends EventEmitter {
     })
 
     this.libp2pInstance.addEventListener('peer:connect', async peer => {
+      this.logger(`Connecting peer: ${JSON.stringify(peer)}`)
       const remotePeerId = peer.detail.remotePeer.toString()
       const localPeerId = peerId.toString()
       this.logger(`${localPeerId} connected to ${remotePeerId}`)
 
-      this.connectedPeers.set(remotePeerId, DateTime.utc().valueOf())
-      this.logger(`${localPeerId} is connected to ${this.connectedPeers.size} peers`)
+      const now = DateTime.utc()
+      this.connectedPeers.set(remotePeerId, now.valueOf())
+      this.logger(`${localPeerId} is now connected to ${this.connectedPeers.size} peers`)
       this.logger(`${localPeerId} has ${this.libp2pInstance?.getConnections().length} open connections`)
 
-      this.emit(Libp2pEvents.PEER_CONNECTED, {
-        peers: [remotePeerId],
-      })
+      const payload: PeersNetworkDataPayload = {
+        peers: [
+          {
+            peer: remotePeerId,
+            lastSeen: now.toSeconds(),
+            connectionDuration: 0,
+          },
+        ],
+      }
+
+      this.logger(`Emitting ${Libp2pEvents.PEER_CONNECTED} event with payload ${JSON.stringify(payload)}`)
+      this.emit(Libp2pEvents.PEER_CONNECTED, payload)
     })
 
     this.libp2pInstance.addEventListener('peer:disconnect', async peer => {
+      this.logger(`Disconnecting peer: ${JSON.stringify(peer)}`)
       const remotePeerId = peer.detail.remotePeer.toString()
       const localPeerId = peerId.toString()
       this.logger(`${localPeerId} disconnected from ${remotePeerId}`)
@@ -187,12 +205,14 @@ export class Libp2pService extends EventEmitter {
       const connectionDuration: number = connectionEndTime - connectionStartTime
 
       this.connectedPeers.delete(remotePeerId)
-      this.logger(`${localPeerId} is connected to ${this.connectedPeers.size} peers`)
+      this.logger(`${localPeerId} is now connected to ${this.connectedPeers.size} peers`)
       const peerStat: NetworkDataPayload = {
         peer: remotePeerId,
         connectionDuration,
         lastSeen: connectionEndTime,
       }
+
+      this.logger(`Emitting ${Libp2pEvents.PEER_DISCONNECTED} event with payload ${JSON.stringify(peerStat)}`)
       this.emit(Libp2pEvents.PEER_DISCONNECTED, peerStat)
     })
 
diff --git a/packages/backend/src/nest/tor/tor-control.service.ts b/packages/backend/src/nest/tor/tor-control.service.ts
index b83040c7a4..4cea2a2075 100644
--- a/packages/backend/src/nest/tor/tor-control.service.ts
+++ b/packages/backend/src/nest/tor/tor-control.service.ts
@@ -1,9 +1,10 @@
 import { Inject, Injectable } from '@nestjs/common'
 import net from 'net'
-import { CONFIG_OPTIONS, TOR_CONTROL_PARAMS } from '../const'
-import { ConfigOptions } from '../types'
+import { CONFIG_OPTIONS, SERVER_IO_PROVIDER, TOR_CONTROL_PARAMS } from '../const'
+import { ConfigOptions, ServerIoProviderTypes } from '../types'
 import { TorControlAuthType, TorControlParams } from './tor.types'
 import Logger from '../common/logger'
+import { SocketActionTypes } from '@quiet/types'
 
 @Injectable()
 export class TorControl {
@@ -14,7 +15,8 @@ export class TorControl {
 
   constructor(
     @Inject(TOR_CONTROL_PARAMS) public torControlParams: TorControlParams,
-    @Inject(CONFIG_OPTIONS) public configOptions: ConfigOptions
+    @Inject(CONFIG_OPTIONS) public configOptions: ConfigOptions,
+    @Inject(SERVER_IO_PROVIDER) public readonly serverIoProvider: ServerIoProviderTypes
   ) {
     this.isSending = false
   }
@@ -63,6 +65,7 @@ export class TorControl {
         this.logger(`Connecting to Tor, host: ${this.torControlParams.host} port: ${this.torControlParams.port}`)
         await this._connect()
         this.logger('Tor connected')
+        this.serverIoProvider.io.emit(SocketActionTypes.TOR_INITIALIZED)
         return
       } catch (e) {
         this.logger(e)
diff --git a/packages/backend/tsconfig.build.json b/packages/backend/tsconfig.build.json
index e8c62532d1..975dfc9768 100644
--- a/packages/backend/tsconfig.build.json
+++ b/packages/backend/tsconfig.build.json
@@ -4,7 +4,7 @@
     "target": "ES2020",
     "module": "ES2022",
     "strict": true,
-        "declaration": true,
+    "declaration": true,
     "removeComments": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
diff --git a/packages/desktop/CHANGELOG.md b/packages/desktop/CHANGELOG.md
index e5ad80e5c2..3f4b361c9f 100644
--- a/packages/desktop/CHANGELOG.md
+++ b/packages/desktop/CHANGELOG.md
@@ -2,8 +2,13 @@
 
 # New features:
 
+* Adds connection status information to messages panel when no peers are connected ([#1706](https://github.com/TryQuiet/quiet/issues/1706))
+
 # Refactorings:
 
+* Updates all logging from renderer to write to the node console
+* Updates usages of `act` in tests to use `@testing-library/react` to avoid errors/warnings
+
 # Fixes:
 
 [2.2.0]
diff --git a/packages/desktop/package-lock.json b/packages/desktop/package-lock.json
index 8c5ca79ed2..e4cd07c031 100644
--- a/packages/desktop/package-lock.json
+++ b/packages/desktop/package-lock.json
@@ -28,6 +28,7 @@
         "@babel/core": "^7.22.5",
         "@babel/plugin-proposal-class-properties": "^7.18.6",
         "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+        "@babel/plugin-transform-block-scoping": "7.5.5",
         "@babel/preset-env": "^7.22.5",
         "@babel/preset-react": "^7.22.5",
         "@cypress/react18": "2.0.0",
@@ -1490,15 +1491,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-block-scoping": {
-      "version": "7.15.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.15.3.tgz",
-      "integrity": "sha512-nBAzfZwZb4DkaGtOes1Up1nOAp9TDRRFw4XBzBBSG9QK7KVFmYzgj9o9sbPv7TX5ofL4Auq4wZnxCoPnI/lz2Q==",
+      "version": "7.5.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.5.5.tgz",
+      "integrity": "sha512-82A3CLRRdYubkG85lKwhZB0WZoHxLGsJdux/cOVaJCJpvYFl1LVzAIFyRsa7CvXqW8rBM4Zf3Bfn8PHt5DP0Sg==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "lodash": "^4.17.13"
       },
       "peerDependencies": {
         "@babel/core": "^7.0.0-0"
@@ -9515,6 +9514,30 @@
         "@babel/core": "^7.4.0-0"
       }
     },
+    "node_modules/@storybook/builder-webpack5/node_modules/@babel/helper-plugin-utils": {
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.0.tgz",
+      "integrity": "sha512-9cUznXMG0+FxRuJfvL82QlTqIzhVW9sL0KjMPHhAOOvpQGL8QtdxnBKILjBqxlHyliz0yCa1G903ZXI/FuHy2w==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@storybook/builder-webpack5/node_modules/@babel/plugin-transform-block-scoping": {
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.24.1.tgz",
+      "integrity": "sha512-h71T2QQvDgM2SmT29UYU6ozjMlAt7s7CSs5Hvy8f8cf/GM/Z4a2zMfN+fjVGaieeCrXR3EdQl6C4gQG+OgmbKw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@storybook/builder-webpack5/node_modules/@storybook/addons": {
       "version": "6.5.15",
       "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.5.15.tgz",
@@ -11415,6 +11438,30 @@
         "@babel/core": "^7.4.0-0"
       }
     },
+    "node_modules/@storybook/core-common/node_modules/@babel/helper-plugin-utils": {
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.0.tgz",
+      "integrity": "sha512-9cUznXMG0+FxRuJfvL82QlTqIzhVW9sL0KjMPHhAOOvpQGL8QtdxnBKILjBqxlHyliz0yCa1G903ZXI/FuHy2w==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@storybook/core-common/node_modules/@babel/plugin-transform-block-scoping": {
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.24.1.tgz",
+      "integrity": "sha512-h71T2QQvDgM2SmT29UYU6ozjMlAt7s7CSs5Hvy8f8cf/GM/Z4a2zMfN+fjVGaieeCrXR3EdQl6C4gQG+OgmbKw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@storybook/core-common/node_modules/@webassemblyjs/ast": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.0.tgz",
@@ -13709,6 +13756,30 @@
         "@babel/core": "^7.4.0-0"
       }
     },
+    "node_modules/@storybook/manager-webpack5/node_modules/@babel/helper-plugin-utils": {
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.0.tgz",
+      "integrity": "sha512-9cUznXMG0+FxRuJfvL82QlTqIzhVW9sL0KjMPHhAOOvpQGL8QtdxnBKILjBqxlHyliz0yCa1G903ZXI/FuHy2w==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@storybook/manager-webpack5/node_modules/@babel/plugin-transform-block-scoping": {
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.24.1.tgz",
+      "integrity": "sha512-h71T2QQvDgM2SmT29UYU6ozjMlAt7s7CSs5Hvy8f8cf/GM/Z4a2zMfN+fjVGaieeCrXR3EdQl6C4gQG+OgmbKw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@storybook/manager-webpack5/node_modules/@storybook/addons": {
       "version": "6.5.15",
       "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.5.15.tgz",
@@ -47880,12 +47951,13 @@
       }
     },
     "@babel/plugin-transform-block-scoping": {
-      "version": "7.15.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.15.3.tgz",
-      "integrity": "sha512-nBAzfZwZb4DkaGtOes1Up1nOAp9TDRRFw4XBzBBSG9QK7KVFmYzgj9o9sbPv7TX5ofL4Auq4wZnxCoPnI/lz2Q==",
+      "version": "7.5.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.5.5.tgz",
+      "integrity": "sha512-82A3CLRRdYubkG85lKwhZB0WZoHxLGsJdux/cOVaJCJpvYFl1LVzAIFyRsa7CvXqW8rBM4Zf3Bfn8PHt5DP0Sg==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5"
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "lodash": "^4.17.13"
       }
     },
     "@babel/plugin-transform-classes": {
@@ -53767,6 +53839,21 @@
             "semver": "^6.1.2"
           }
         },
+        "@babel/helper-plugin-utils": {
+          "version": "7.24.0",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.0.tgz",
+          "integrity": "sha512-9cUznXMG0+FxRuJfvL82QlTqIzhVW9sL0KjMPHhAOOvpQGL8QtdxnBKILjBqxlHyliz0yCa1G903ZXI/FuHy2w==",
+          "dev": true
+        },
+        "@babel/plugin-transform-block-scoping": {
+          "version": "7.24.1",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.24.1.tgz",
+          "integrity": "sha512-h71T2QQvDgM2SmT29UYU6ozjMlAt7s7CSs5Hvy8f8cf/GM/Z4a2zMfN+fjVGaieeCrXR3EdQl6C4gQG+OgmbKw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.24.0"
+          }
+        },
         "@storybook/addons": {
           "version": "6.5.15",
           "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.5.15.tgz",
@@ -55152,6 +55239,21 @@
             "semver": "^6.1.2"
           }
         },
+        "@babel/helper-plugin-utils": {
+          "version": "7.24.0",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.0.tgz",
+          "integrity": "sha512-9cUznXMG0+FxRuJfvL82QlTqIzhVW9sL0KjMPHhAOOvpQGL8QtdxnBKILjBqxlHyliz0yCa1G903ZXI/FuHy2w==",
+          "dev": true
+        },
+        "@babel/plugin-transform-block-scoping": {
+          "version": "7.24.1",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.24.1.tgz",
+          "integrity": "sha512-h71T2QQvDgM2SmT29UYU6ozjMlAt7s7CSs5Hvy8f8cf/GM/Z4a2zMfN+fjVGaieeCrXR3EdQl6C4gQG+OgmbKw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.24.0"
+          }
+        },
         "@webassemblyjs/ast": {
           "version": "1.9.0",
           "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.0.tgz",
@@ -56928,6 +57030,21 @@
             "semver": "^6.1.2"
           }
         },
+        "@babel/helper-plugin-utils": {
+          "version": "7.24.0",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.0.tgz",
+          "integrity": "sha512-9cUznXMG0+FxRuJfvL82QlTqIzhVW9sL0KjMPHhAOOvpQGL8QtdxnBKILjBqxlHyliz0yCa1G903ZXI/FuHy2w==",
+          "dev": true
+        },
+        "@babel/plugin-transform-block-scoping": {
+          "version": "7.24.1",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.24.1.tgz",
+          "integrity": "sha512-h71T2QQvDgM2SmT29UYU6ozjMlAt7s7CSs5Hvy8f8cf/GM/Z4a2zMfN+fjVGaieeCrXR3EdQl6C4gQG+OgmbKw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.24.0"
+          }
+        },
         "@storybook/addons": {
           "version": "6.5.15",
           "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.5.15.tgz",
diff --git a/packages/desktop/package.json b/packages/desktop/package.json
index 303b5cbb7b..d7d1c3dedd 100644
--- a/packages/desktop/package.json
+++ b/packages/desktop/package.json
@@ -89,7 +89,7 @@
     "copyBinariesDarwin": "cp -R ../../3rd-party/tor/$SOURCE_PATH/ ./tor/ && chmod 775 ./tor/arm64/tor ./tor/x64/tor",
     "copyBinariesWin": "xcopy ..\\..\\3rd-party\\tor\\win32 .\\tor\\",
     "pullLibs": "wget -N https://zbay-binaries.s3.us-east-2.amazonaws.com/$SOURCE_PATH/libssl.so -P ./ && chmod 775 ./libssl.so",
-    "distMac:local": "export DEBUG=* SOURCE_PATH=darwin TEST_MODE=true IS_LOCAL=true && npm run copyBinariesDarwin && npm run build:dev:dist && electron-builder --mac -p never -c.mac.type=development -c.mac.identity=null",
+    "distMac:local": "export DEBUG=* SOURCE_PATH=darwin TEST_MODE=true IS_LOCAL=true && npm run copyBinariesDarwin && ./scripts/shell/clear_electron_builds.sh && npm run build:dev:dist && electron-builder --mac -p never -c.mac.type=development -c.mac.identity=null",
     "dist": "npm run distMac",
     "distMac": "export SOURCE_PATH=darwin TEST_MODE=true && npm run copyBinariesDarwin && npm run build:prod && electron-builder --mac",
     "distUbuntu": "export SOURCE_PATH=linux TEST_MODE=true && npm run setMainEnvs && npm run copyBinaries && npm run pullLibs && npm run build:prod && electron-builder --linux",
@@ -151,6 +151,7 @@
     "@babel/core": "^7.22.5",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+    "@babel/plugin-transform-block-scoping": "7.5.5",
     "@babel/preset-env": "^7.22.5",
     "@babel/preset-react": "^7.22.5",
     "@cypress/react18": "2.0.0",
diff --git a/packages/desktop/scripts/shell/clear_electron_builds.sh b/packages/desktop/scripts/shell/clear_electron_builds.sh
new file mode 100755
index 0000000000..8ee4b66916
--- /dev/null
+++ b/packages/desktop/scripts/shell/clear_electron_builds.sh
@@ -0,0 +1,3 @@
+#! /bin/zsh
+set -o kshglob
+rm -rf dist/*.(zip|blockmap|dmg) || true
\ No newline at end of file
diff --git a/packages/desktop/src/renderer/components/ChangeUsername/ChangeUsername.component.tsx b/packages/desktop/src/renderer/components/ChangeUsername/ChangeUsername.component.tsx
index 669eaa1391..f59af39bbb 100644
--- a/packages/desktop/src/renderer/components/ChangeUsername/ChangeUsername.component.tsx
+++ b/packages/desktop/src/renderer/components/ChangeUsername/ChangeUsername.component.tsx
@@ -16,6 +16,7 @@ import { TextInput } from '../../forms/components/textInput'
 import { userNameField } from '../../forms/fields/createUserFields'
 
 import { parseName } from '@quiet/common'
+import { defaultLogger } from '../../logger'
 
 const PREFIX = 'ChangeUsername-'
 
@@ -174,7 +175,7 @@ export const ChangeUsername: React.FC<ChangeUsernameProps> = ({
   const onSubmit = useCallback(
     (values: ChangeUserNameValues) => {
       if (errors.userName) {
-        console.error('Cannot submit form with errors')
+        defaultLogger.error('Cannot submit form with errors')
         return
       }
 
diff --git a/packages/desktop/src/renderer/components/Channel/Channel.stories.cy.tsx b/packages/desktop/src/renderer/components/Channel/Channel.stories.cy.tsx
index b9c82b83be..87b1fad56b 100644
--- a/packages/desktop/src/renderer/components/Channel/Channel.stories.cy.tsx
+++ b/packages/desktop/src/renderer/components/Channel/Channel.stories.cy.tsx
@@ -12,6 +12,7 @@ import { DisplayableMessage } from '@quiet/types'
 
 import ChannelComponent from './ChannelComponent'
 import { payloadDuplicated, payloadUnregistered } from '../widgets/userLabel/UserLabel.types'
+import { DateTime } from 'luxon'
 
 const Template: ComponentStory<typeof ChannelComponent> = () => {
   const [messages, setMessages] = useState<{
@@ -21,6 +22,8 @@ const Template: ComponentStory<typeof ChannelComponent> = () => {
     }
   }>(mock_messages())
 
+  const [connectedPeers, setConnectedPeers] = useState<string[] | undefined>(["peer"])
+
   const onInputEnter = (message: string) => {
     const _message: DisplayableMessage = {
       id: '32',
@@ -62,7 +65,7 @@ const Template: ComponentStory<typeof ChannelComponent> = () => {
               privateKey: 'privateKey',
             },
             peerId: {
-              id: 'id',
+              id: 'peer',
               privKey: 'privKey',
               pubKey: 'pubKey',
             },
@@ -79,6 +82,10 @@ const Template: ComponentStory<typeof ChannelComponent> = () => {
             joinTimestamp: null,
           }}
           isCommunityInitialized={true}
+          connectedPeers={connectedPeers}
+          communityPeerList={connectedPeers}
+          lastConnectedTime={DateTime.utc().toSeconds()}
+          allPeersDisconnectedTime={undefined}
           uploadedFileModal={{
             open: false,
             handleOpen: function (_args?: any): any {},
diff --git a/packages/desktop/src/renderer/components/Channel/Channel.stories.tsx b/packages/desktop/src/renderer/components/Channel/Channel.stories.tsx
index 948bfc678a..21df63e2e8 100644
--- a/packages/desktop/src/renderer/components/Channel/Channel.stories.tsx
+++ b/packages/desktop/src/renderer/components/Channel/Channel.stories.tsx
@@ -11,6 +11,7 @@ import { HTML5Backend } from 'react-dnd-html5-backend'
 import ChannelComponent, { ChannelComponentProps } from './ChannelComponent'
 import { UploadFilesPreviewsProps } from './File/UploadingPreview'
 import { DownloadState } from '@quiet/types'
+import { DateTime } from 'luxon'
 
 const args: Partial<ChannelComponentProps & UploadFilesPreviewsProps> = {
   user: {
@@ -54,6 +55,7 @@ const args: Partial<ChannelComponentProps & UploadFilesPreviewsProps> = {
     pubKey: 'pubKey',
   },
   pendingMessages: {},
+  lastConnectedTime: DateTime.utc().toMillis(),
   channelId: 'general',
   channelName: 'general',
   lazyLoading: function (_load: boolean): void {},
diff --git a/packages/desktop/src/renderer/components/Channel/Channel.tsx b/packages/desktop/src/renderer/components/Channel/Channel.tsx
index 0b56f29188..f93f3048be 100644
--- a/packages/desktop/src/renderer/components/Channel/Channel.tsx
+++ b/packages/desktop/src/renderer/components/Channel/Channel.tsx
@@ -3,7 +3,7 @@ import React, { useCallback, useEffect } from 'react'
 import { shell, ipcRenderer } from 'electron'
 
 import { useDispatch, useSelector } from 'react-redux'
-import { identity, messages, publicChannels, communities, files, network } from '@quiet/state-manager'
+import { identity, messages, publicChannels, communities, files, network, connection } from '@quiet/state-manager'
 import { FileMetadata, CancelDownload, FileContent, FilePreviewData } from '@quiet/types'
 
 import ChannelComponent, { ChannelComponentProps } from './ChannelComponent'
@@ -38,6 +38,10 @@ const Channel = () => {
 
   const initializedCommunities = useSelector(network.selectors.initializedCommunities)
   const isCommunityInitialized = Boolean(community && initializedCommunities[community.id])
+  const communityPeerList = useSelector(communities.selectors.peerList)
+  const connectedPeers = useSelector(network.selectors.connectedPeers)
+  const lastConnectedTime = useSelector(network.selectors.communityLastConnectedAt)
+  const allPeersDisconnectedTime = useSelector(network.selectors.allPeersDisconnectedAt)
 
   const pendingGeneralChannelRecreationSelector = useSelector(publicChannels.selectors.pendingGeneralChannelRecreation)
 
@@ -194,7 +198,7 @@ const Channel = () => {
   if (!user || !currentChannelId) return null
 
   const channelComponentProps: ChannelComponentProps = {
-    user: user,
+    user,
     channelId: currentChannelId,
     channelName: currentChannelName,
     messages: {
@@ -202,7 +206,7 @@ const Channel = () => {
       groups: currentChannelDisplayableMessages,
     },
     newestMessage: newestCurrentChannelMessage,
-    pendingMessages: pendingMessages,
+    pendingMessages,
     downloadStatuses: downloadStatusesMapping,
     lazyLoading: lazyLoading,
     onInputChange: onInputChange,
@@ -210,11 +214,15 @@ const Channel = () => {
     openUrl: openUrl,
     handleFileDrop: handleFileDrop,
     openFilesDialog: openFilesDialog,
-    isCommunityInitialized: isCommunityInitialized,
+    isCommunityInitialized,
+    communityPeerList,
+    connectedPeers,
+    lastConnectedTime,
+    allPeersDisconnectedTime,
     handleClipboardFiles: handleClipboardFiles,
-    uploadedFileModal: uploadedFileModal,
+    uploadedFileModal,
     openContextMenu: openContextMenu,
-    pendingGeneralChannelRecreation: pendingGeneralChannelRecreation,
+    pendingGeneralChannelRecreation,
     unregisteredUsernameModalHandleOpen,
     duplicatedUsernameModalHandleOpen,
   }
diff --git a/packages/desktop/src/renderer/components/Channel/ChannelComponent.tsx b/packages/desktop/src/renderer/components/Channel/ChannelComponent.tsx
index 752a06f0e1..82543b59cf 100644
--- a/packages/desktop/src/renderer/components/Channel/ChannelComponent.tsx
+++ b/packages/desktop/src/renderer/components/Channel/ChannelComponent.tsx
@@ -26,6 +26,8 @@ import { NewMessagesInfoComponent } from './NewMessagesInfo/NewMessagesInfoCompo
 import { FileActionsProps } from './File/FileComponent/FileComponent'
 import { UseModalType } from '../../containers/hooks'
 import { HandleOpenModalType } from '../widgets/userLabel/UserLabel.types'
+import { defaultLogger } from '../../logger'
+import ChannelNetworkStatus from '../widgets/channels/ChannelNetworkStatus'
 
 const ChannelMessagesWrapperStyled = styled(Grid)(({ theme }) => ({
   position: 'relative',
@@ -51,6 +53,10 @@ export interface ChannelComponentProps {
   openFilesDialog: () => void
   handleFileDrop: (arg: any) => void
   isCommunityInitialized: boolean
+  connectedPeers: string[] | undefined
+  communityPeerList: string[] | undefined
+  lastConnectedTime: number
+  allPeersDisconnectedTime: number | undefined
   handleClipboardFiles: (arg: ArrayBuffer, ext: string, name: string) => void
   uploadedFileModal?: UseModalType<{
     src: string
@@ -84,6 +90,10 @@ export const ChannelComponent: React.FC<ChannelComponentProps & UploadFilesPrevi
   handleFileDrop,
   filesData,
   isCommunityInitialized = true,
+  connectedPeers,
+  communityPeerList,
+  lastConnectedTime,
+  allPeersDisconnectedTime,
   openFilesDialog,
   handleClipboardFiles,
   uploadedFileModal,
@@ -107,6 +117,37 @@ export const ChannelComponent: React.FC<ChannelComponentProps & UploadFilesPrevi
 
   const [mathMessagesRendered, onMathMessageRendered] = React.useState<number>(0)
 
+  const checkForConnectedPeers = (connectedPeers: string[] | undefined) => {
+    if (connectedPeers && connectedPeers.length > 0) {
+      return true
+    }
+    return false
+  }
+
+  const checkForCommunityPeers = (peerList: string[] | undefined) => {
+    defaultLogger.info(peerList, peerList?.length)
+    if (peerList && peerList.length > 1) {
+      return true
+    }
+    return false
+  }
+
+  const [isConnectedToOtherPeers, onConnectedPeersChange] = React.useState<boolean>(
+    checkForConnectedPeers(connectedPeers)
+  )
+
+  const [communityHasPeers, onCommunityPeerListChanged] = React.useState<boolean>(
+    checkForCommunityPeers(communityPeerList)
+  )
+
+  useEffect(() => {
+    onConnectedPeersChange(checkForConnectedPeers(connectedPeers))
+  }, [connectedPeers])
+
+  useEffect(() => {
+    onCommunityPeerListChanged(checkForCommunityPeers(communityPeerList))
+  }, [communityPeerList])
+
   const updateMathMessagesRendered = () => {
     // To rerender Channel on each call
     onMathMessageRendered(mathMessagesRendered + 1)
@@ -227,6 +268,10 @@ export const ChannelComponent: React.FC<ChannelComponentProps & UploadFilesPrevi
           <ChannelMessagesComponent
             messages={messages.groups}
             pendingMessages={pendingMessages}
+            connectedPeers={connectedPeers}
+            communityPeerList={communityPeerList}
+            lastConnectedTime={lastConnectedTime}
+            allPeersDisconnectedTime={allPeersDisconnectedTime}
             downloadStatuses={downloadStatuses}
             scrollbarRef={scrollbarRef}
             onScroll={onScroll}
@@ -241,6 +286,11 @@ export const ChannelComponent: React.FC<ChannelComponentProps & UploadFilesPrevi
             duplicatedUsernameModalHandleOpen={duplicatedUsernameModalHandleOpen}
           />
         </ChannelMessagesWrapperStyled>
+        <ChannelNetworkStatus
+          channelName={channelName}
+          isConnectedToOtherPeers={isConnectedToOtherPeers}
+          communityHasPeers={communityHasPeers}
+        />
         <Grid item>
           <ChannelInputComponent
             channelId={channelId}
diff --git a/packages/desktop/src/renderer/components/Channel/CreateChannel/CreateChannel.stories.tsx b/packages/desktop/src/renderer/components/Channel/CreateChannel/CreateChannel.stories.tsx
index 622150610e..847e298941 100644
--- a/packages/desktop/src/renderer/components/Channel/CreateChannel/CreateChannel.stories.tsx
+++ b/packages/desktop/src/renderer/components/Channel/CreateChannel/CreateChannel.stories.tsx
@@ -3,6 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react'
 
 import { withTheme } from '../../../storybook/decorators'
 import CreateChannelComponent, { CreateChannelProps } from './CreateChannelComponent'
+import { defaultLogger } from '../../../logger'
 
 const Template: ComponentStory<typeof CreateChannelComponent> = args => {
   return <CreateChannelComponent {...args} />
@@ -13,7 +14,7 @@ export const Component = Template.bind({})
 const args: CreateChannelProps = {
   open: true,
   createChannel: function (name: string): void {
-    console.log('creating channel: ', name)
+    defaultLogger.info('creating channel: ', name)
   },
   handleClose: function (): void {},
   clearErrorsDispatch: function (): void {},
diff --git a/packages/desktop/src/renderer/components/Channel/CreateChannel/CreateChannel.test.tsx b/packages/desktop/src/renderer/components/Channel/CreateChannel/CreateChannel.test.tsx
index 59a36aa431..b54d71f586 100644
--- a/packages/desktop/src/renderer/components/Channel/CreateChannel/CreateChannel.test.tsx
+++ b/packages/desktop/src/renderer/components/Channel/CreateChannel/CreateChannel.test.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import '@testing-library/jest-dom/extend-expect'
 import userEvent from '@testing-library/user-event'
 import { screen, waitFor } from '@testing-library/dom'
-import { act } from 'react-dom/test-utils'
+import { act } from '@testing-library/react'
 import { take } from 'typed-redux-saga'
 import MockedSocket from 'socket.io-mock'
 import { ioMock } from '../../../../shared/setupTests'
@@ -16,6 +16,7 @@ import { ModalName } from '../../../sagas/modals/modals.types'
 import { modalsActions } from '../../../sagas/modals/modals.slice'
 
 import { getFactory, identity, publicChannels } from '@quiet/state-manager'
+import { defaultLogger } from '../../../logger'
 
 describe('Add new channel', () => {
   let socket: MockedSocket
@@ -50,7 +51,7 @@ describe('Add new channel', () => {
       async () =>
         await waitFor(() => {
           user.click(screen.getByText('Create Channel')).catch(e => {
-            console.error(e)
+            defaultLogger.error(e)
           })
         })
     )
diff --git a/packages/desktop/src/renderer/components/Channel/CreateChannel/CreateChannel.tsx b/packages/desktop/src/renderer/components/Channel/CreateChannel/CreateChannel.tsx
index 3d72eb91d1..9f45e5ff3b 100644
--- a/packages/desktop/src/renderer/components/Channel/CreateChannel/CreateChannel.tsx
+++ b/packages/desktop/src/renderer/components/Channel/CreateChannel/CreateChannel.tsx
@@ -8,6 +8,7 @@ import { useModal } from '../../../containers/hooks'
 import { ModalName } from '../../../sagas/modals/modals.types'
 import { flushSync } from 'react-dom'
 import { generateChannelId } from '@quiet/common'
+import { defaultLogger } from '../../../logger'
 
 export const CreateChannel = () => {
   const dispatch = useDispatch()
@@ -46,7 +47,7 @@ export const CreateChannel = () => {
     // Clear errors
     clearErrors()
     if (!user) {
-      console.error('No identity found')
+      defaultLogger.error('No identity found')
       dispatch(
         errors.actions.addError({
           type: SocketActionTypes.CREATE_CHANNEL,
diff --git a/packages/desktop/src/renderer/components/Channel/DeleteChannel/DeleteChannel.stories.tsx b/packages/desktop/src/renderer/components/Channel/DeleteChannel/DeleteChannel.stories.tsx
index bd498ae0d9..6fec7b8839 100644
--- a/packages/desktop/src/renderer/components/Channel/DeleteChannel/DeleteChannel.stories.tsx
+++ b/packages/desktop/src/renderer/components/Channel/DeleteChannel/DeleteChannel.stories.tsx
@@ -5,6 +5,7 @@ import { withTheme } from '../../../storybook/decorators'
 import { useModal } from '../../../containers/hooks'
 
 import DeleteChannelComponent, { DeleteChannelProps } from './DeleteChannelComponent'
+import { defaultLogger } from '../../../logger'
 
 const Template: ComponentStory<typeof DeleteChannelComponent> = args => {
   return <DeleteChannelComponent {...args} />
@@ -15,7 +16,7 @@ export const Component = Template.bind({})
 const args: ReturnType<typeof useModal> & DeleteChannelProps = {
   channelName: 'general',
   deleteChannel: () => {
-    console.log('deleting channel')
+    defaultLogger.info('deleting channel')
   },
   open: true,
   // @ts-expect-error
diff --git a/packages/desktop/src/renderer/components/Channel/DropZone/DropZoneComponent.tsx b/packages/desktop/src/renderer/components/Channel/DropZone/DropZoneComponent.tsx
index 0773af35d9..ba69e0e1ea 100644
--- a/packages/desktop/src/renderer/components/Channel/DropZone/DropZoneComponent.tsx
+++ b/packages/desktop/src/renderer/components/Channel/DropZone/DropZoneComponent.tsx
@@ -7,6 +7,7 @@ import Icon from '../../ui/Icon/Icon'
 import dropFiles from '../../../static/images/dropFiles.svg'
 import { DropTargetMonitor, useDrop } from 'react-dnd'
 import { NativeTypes } from 'react-dnd-html5-backend'
+import { defaultLogger } from '../../../logger'
 
 const StyledDropZoneComponent = styled(Grid)(() => ({
   position: 'relative',
@@ -55,7 +56,7 @@ export const DropZoneComponent: React.FC<DropZoneComponentProps> = ({ children,
             if (fs.statSync(item.files[0].path).isDirectory()) return
           } catch (e) {
             // See: https://github.com/react-dnd/react-dnd/issues/3458
-            console.error('drop error: ', e.message)
+            defaultLogger.error('drop error: ', e.message)
             return
           }
           handleFileDrop(item)
@@ -67,7 +68,7 @@ export const DropZoneComponent: React.FC<DropZoneComponentProps> = ({ children,
       collect: (monitor: DropTargetMonitor) => {
         const item: any = monitor.getItem()
         if (item) {
-          console.log('collect', item.files, item.items)
+          defaultLogger.info('collect', item.files, item.items)
         }
 
         return {
diff --git a/packages/desktop/src/renderer/components/Channel/File/FileComponent/FileComponent.stories.tsx b/packages/desktop/src/renderer/components/Channel/File/FileComponent/FileComponent.stories.tsx
index 0c33e712ab..f134f34831 100644
--- a/packages/desktop/src/renderer/components/Channel/File/FileComponent/FileComponent.stories.tsx
+++ b/packages/desktop/src/renderer/components/Channel/File/FileComponent/FileComponent.stories.tsx
@@ -3,6 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react'
 import FileComponent, { FileComponentProps } from './FileComponent'
 import { withTheme } from '../../../../storybook/decorators'
 import { DownloadState } from '@quiet/types'
+import { defaultLogger } from '../../../../logger'
 
 const Template: ComponentStory<typeof FileComponent> = args => {
   return (
@@ -56,6 +57,7 @@ const args: FileComponentProps = {
     downloadState: DownloadState.Ready,
     downloadProgress: undefined,
   },
+  isUnsent: false,
 }
 
 Uploading.args = {
@@ -97,13 +99,13 @@ Queued.args = {
     },
   },
   cancelDownload: () => {
-    console.log('cancel download')
+    defaultLogger.info('cancel download')
   },
 }
 Ready.args = {
   ...args,
   downloadFile: () => {
-    console.log('download file')
+    defaultLogger.info('download file')
   },
 }
 Downloading.args = {
@@ -119,7 +121,7 @@ Downloading.args = {
     },
   },
   cancelDownload: () => {
-    console.log('cancel download')
+    defaultLogger.info('cancel download')
   },
 }
 Canceling.args = {
@@ -151,7 +153,7 @@ Completed.args = {
     },
   },
   openContainingFolder: () => {
-    console.log('show in folder')
+    defaultLogger.info('show in folder')
   },
 }
 Malicious.args = {
diff --git a/packages/desktop/src/renderer/components/Channel/File/FileComponent/FileComponent.test.tsx b/packages/desktop/src/renderer/components/Channel/File/FileComponent/FileComponent.test.tsx
index 3fe8c311fc..1edcc86790 100644
--- a/packages/desktop/src/renderer/components/Channel/File/FileComponent/FileComponent.test.tsx
+++ b/packages/desktop/src/renderer/components/Channel/File/FileComponent/FileComponent.test.tsx
@@ -38,13 +38,14 @@ describe('FileComponent', () => {
           downloadState: DownloadState.Ready,
           downloadProgress: undefined,
         }}
+        isUnsent={false}
       />
     )
     expect(result.baseElement).toMatchInlineSnapshot(`
       <body>
         <div>
           <div
-            class="css-4fpo3t"
+            class="css-17r12jj"
             data-testid="QmWUCSApiy76nW9DAk5M9QbH1nkW5XCYwxUHRSULjATyqs-fileComponent"
           >
             <span>
@@ -82,6 +83,113 @@ describe('FileComponent', () => {
               </div>
             </span>
             <div
+              class=""
+              style="padding-top: 16px; display: block;"
+            >
+              <div
+                style="cursor: pointer;"
+              >
+                <div
+                  class="css-1vnortn"
+                >
+                  <img
+                    class="FileComponentactionIcon"
+                    src="test-file-stub"
+                  />
+                  <p
+                    class="MuiTypography-root MuiTypography-body2 css-16d47hw-MuiTypography-root"
+                    style="color: rgb(103, 191, 211); margin-left: 8px;"
+                  >
+                    Download file
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </body>
+    `)
+  })
+
+  it('renders component as unsent', () => {
+    const result = renderComponent(
+      <FileComponent
+        message={{
+          id: '32',
+          type: 2,
+          isDuplicated: false,
+          isRegistered: true,
+          pubKey: 'string',
+          media: {
+            cid: 'QmWUCSApiy76nW9DAk5M9QbH1nkW5XCYwxUHRSULjATyqs',
+            message: {
+              channelId: 'general',
+              id: 'wgtlstx3u7',
+            },
+            ext: '.zip',
+            name: 'my-file-name-goes-here-an-isnt-truncated',
+            size: 2048,
+            width: 1200,
+            height: 580,
+            path: 'files/my-file-name-goes-here-an-isnt-truncated.zip',
+          },
+          message: '',
+          createdAt: 0,
+          date: '12:46',
+          nickname: 'vader',
+        }}
+        downloadStatus={{
+          mid: '32',
+          cid: 'QmWUCSApiy76nW9DAk5M9QbH1nkW5XCYwxUHRSULjATyqs',
+          downloadState: DownloadState.Ready,
+          downloadProgress: undefined,
+        }}
+        isUnsent={true}
+      />
+    )
+    expect(result.baseElement).toMatchInlineSnapshot(`
+      <body>
+        <div>
+          <div
+            class="css-17r12jj"
+            data-testid="QmWUCSApiy76nW9DAk5M9QbH1nkW5XCYwxUHRSULjATyqs-fileComponent"
+          >
+            <span>
+              <div
+                aria-label=""
+                class="FileComponentunsent"
+                data-mui-internal-clone-element="true"
+                style="display: flex;"
+              >
+                <div
+                  class="FileComponenticon"
+                >
+                  <img
+                    class="FileComponentfileIcon"
+                    src="test-file-stub"
+                  />
+                </div>
+                <div
+                  class="FileComponentfilename"
+                >
+                  <h5
+                    class="MuiTypography-root MuiTypography-h5 css-11l3dv4-MuiTypography-root"
+                    style="line-height: 20px;"
+                  >
+                    my-file-name-goes-here-an-isnt-truncated
+                    .zip
+                  </h5>
+                  <p
+                    class="MuiTypography-root MuiTypography-body2 css-16d47hw-MuiTypography-root"
+                    style="line-height: 20px; color: rgb(127, 127, 127);"
+                  >
+                    2 KB
+                  </p>
+                </div>
+              </div>
+            </span>
+            <div
+              class="FileComponentunsent"
               style="padding-top: 16px; display: block;"
             >
               <div
diff --git a/packages/desktop/src/renderer/components/Channel/File/FileComponent/FileComponent.tsx b/packages/desktop/src/renderer/components/Channel/File/FileComponent/FileComponent.tsx
index abb1818f39..fbe7c230c5 100644
--- a/packages/desktop/src/renderer/components/Channel/File/FileComponent/FileComponent.tsx
+++ b/packages/desktop/src/renderer/components/Channel/File/FileComponent/FileComponent.tsx
@@ -15,6 +15,7 @@ import cancelIconGray from '../../../../static/images/cancelIconGray.svg'
 import cancelIconRed from '../../../../static/images/cancelIconRed.svg'
 import pauseIconGray from '../../../../static/images/pauseIconGray.svg'
 import Tooltip from '../../../ui/Tooltip/Tooltip'
+import classNames from 'classnames'
 
 const PREFIX = 'FileComponent'
 
@@ -23,6 +24,7 @@ const classes = {
   fileIcon: `${PREFIX}fileIcon`,
   filename: `${PREFIX}filename`,
   actionIcon: `${PREFIX}actionIcon`,
+  unsent: `${PREFIX}unsent`,
 }
 
 const FileComponentStyled = styled('div')(({ theme }) => ({
@@ -52,6 +54,10 @@ const FileComponentStyled = styled('div')(({ theme }) => ({
   [`& .${classes.filename}`]: {
     marginLeft: '16px',
   },
+
+  [`& .${classes.unsent}`]: {
+    opacity: 0.5,
+  },
 }))
 
 const ActionIndicatorStyled = styled('div')(() => ({
@@ -126,6 +132,7 @@ const ActionIndicator: React.FC<{
 export interface FileComponentProps {
   message: DisplayableMessage
   downloadStatus?: DownloadStatus
+  isUnsent: boolean
 }
 
 export interface FileActionsProps {
@@ -137,6 +144,7 @@ export interface FileActionsProps {
 export const FileComponent: React.FC<FileComponentProps & FileActionsProps> = ({
   message,
   downloadStatus,
+  isUnsent,
   openContainingFolder,
   downloadFile,
   cancelDownload,
@@ -343,7 +351,7 @@ export const FileComponent: React.FC<FileComponentProps & FileActionsProps> = ({
         }
         placement='top'
       >
-        <div style={{ display: 'flex', width: 'fit-content' }}>
+        <div style={{ display: 'flex', width: 'fit-content' }} className={classNames({ [classes.unsent]: isUnsent })}>
           <div className={classes.icon}>{renderIcon()}</div>
           <div className={classes.filename}>
             <Typography variant={'h5'} style={{ lineHeight: '20px' }}>
@@ -362,6 +370,7 @@ export const FileComponent: React.FC<FileComponentProps & FileActionsProps> = ({
           width: 'fit-content',
           display: downloadState ? 'block' : 'none',
         }}
+        className={classNames({ [classes.unsent]: isUnsent })}
       >
         {renderActionIndicator()}
       </div>
diff --git a/packages/desktop/src/renderer/components/Channel/File/UploadedImage/UploadedImage.test.tsx b/packages/desktop/src/renderer/components/Channel/File/UploadedImage/UploadedImage.test.tsx
index be24ec1abf..ddca4bd69d 100644
--- a/packages/desktop/src/renderer/components/Channel/File/UploadedImage/UploadedImage.test.tsx
+++ b/packages/desktop/src/renderer/components/Channel/File/UploadedImage/UploadedImage.test.tsx
@@ -52,7 +52,7 @@ describe('UploadedFile', () => {
       <body>
         <div>
           <div
-            class="css-gd4qex"
+            class="css-1clc91l"
           >
             <div
               class="css-1i8wbh6"
@@ -129,7 +129,7 @@ describe('UploadedFile', () => {
       <body>
         <div>
           <div
-            class="css-gd4qex"
+            class="css-1clc91l"
           >
             <div
               class="UploadedImagecontainer"
@@ -155,4 +155,122 @@ describe('UploadedFile', () => {
       </body>
     `)
   })
+
+  it('renders an unsent placeholder if image is not finished downloading yet', () => {
+    const result = renderComponent(
+      <UploadedImage
+        // @ts-expect-error
+        media={message.media}
+        downloadStatus={downloadStatus}
+        isUnsent={true}
+      />
+    )
+    expect(result.baseElement).toMatchInlineSnapshot(`
+      <body>
+        <div>
+          <div
+            class="css-1clc91l"
+          >
+            <div
+              class="css-ytr8bc"
+              data-testid="abcd1234-imagePlaceholder"
+            >
+              <p
+                class="css-h94c3"
+              >
+                test.png
+              </p>
+              <div
+                class="UploadedImagePlaceholderplaceholder"
+                style="width: 400px;"
+              >
+                <span>
+                  <div
+                    aria-label=""
+                    class=""
+                    data-mui-internal-clone-element="true"
+                    style="display: flex;"
+                  >
+                    <img
+                      class="UploadedImagePlaceholderplaceholderIcon"
+                      src="test-file-stub"
+                    />
+                    <div
+                      class="UploadedImagePlaceholdericon"
+                    >
+                      <span
+                        class="MuiCircularProgress-root MuiCircularProgress-indeterminate MuiCircularProgress-colorPrimary css-9a4009-MuiCircularProgress-root"
+                        role="progressbar"
+                        style="width: 18px; height: 18px; position: absolute; color: rgb(178, 178, 178);"
+                      >
+                        <svg
+                          class="MuiCircularProgress-svg css-1idz92c-MuiCircularProgress-svg"
+                          viewBox="22 22 44 44"
+                        >
+                          <circle
+                            class="MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate css-176wh8e-MuiCircularProgress-circle"
+                            cx="44"
+                            cy="44"
+                            fill="none"
+                            r="20"
+                            stroke-width="4"
+                          />
+                        </svg>
+                      </span>
+                    </div>
+                  </div>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </body>
+    `)
+  })
+  it('renders unsent image if image is downloaded', () => {
+    // @ts-expect-error
+    message.media.path = 'path/to/file/test.png'
+    // @ts-expect-error
+    message.media.message = {
+      id: 'string',
+      channelId: 'general',
+    }
+    const result = renderComponent(
+      <UploadedImage
+        // @ts-expect-error
+        media={message.media}
+        downloadStatus={downloadStatus}
+        isUnsent={true}
+      />
+    )
+    expect(result.baseElement).toMatchInlineSnapshot(`
+      <body>
+        <div>
+          <div
+            class="css-1clc91l"
+          >
+            <div
+              class="UploadedImagecontainer UploadedImageunsent"
+            >
+              <div
+                class="UploadedImageimage"
+                data-testid="abcd1234-imageVisual"
+              >
+                <p
+                  class="css-h94c3"
+                >
+                  test.png
+                </p>
+                <img
+                  class="UploadedImageimage"
+                  src="path/to/file/test.png"
+                  style="width: 400px;"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </body>
+    `)
+  })
 })
diff --git a/packages/desktop/src/renderer/components/Channel/File/UploadedImage/UploadedImage.tsx b/packages/desktop/src/renderer/components/Channel/File/UploadedImage/UploadedImage.tsx
index e93c3beb23..5afadfb30c 100644
--- a/packages/desktop/src/renderer/components/Channel/File/UploadedImage/UploadedImage.tsx
+++ b/packages/desktop/src/renderer/components/Channel/File/UploadedImage/UploadedImage.tsx
@@ -1,6 +1,9 @@
 import React, { useEffect, useState } from 'react'
+import classNames from 'classnames'
 import { styled } from '@mui/material/styles'
+
 import { DownloadStatus, FileMetadata } from '@quiet/types'
+
 import { UseModalType } from '../../../../containers/hooks'
 import UploadedFileModal from './UploadedImagePreview'
 import { UploadedFilename, UploadedImagePlaceholder } from '../UploadedImagePlaceholder/UploadedImagePlaceholder'
@@ -10,6 +13,8 @@ const PREFIX = 'UploadedImage'
 const classes = {
   image: `${PREFIX}image`,
   container: `${PREFIX}container`,
+  pending: `${PREFIX}pending`,
+  unsent: `${PREFIX}unsent`,
 }
 
 const Root = styled('div')(() => ({
@@ -22,6 +27,14 @@ const Root = styled('div')(() => ({
     maxWidth: '400px',
     cursor: 'pointer',
   },
+
+  [`& .${classes.pending}`]: {
+    opacity: 0.5,
+  },
+
+  [`& .${classes.unsent}`]: {
+    opacity: 0.5,
+  },
 }))
 
 export interface UploadedImageProps {
@@ -31,9 +44,10 @@ export interface UploadedImageProps {
   }>
 
   downloadStatus?: DownloadStatus
+  isUnsent?: boolean
 }
 
-export const UploadedImage: React.FC<UploadedImageProps> = ({ media, uploadedFileModal, downloadStatus }) => {
+export const UploadedImage: React.FC<UploadedImageProps> = ({ media, uploadedFileModal, downloadStatus, isUnsent }) => {
   const [showImage, setShowImage] = useState<boolean>(false)
   const { cid, path, name, ext } = media
 
@@ -62,7 +76,11 @@ export const UploadedImage: React.FC<UploadedImageProps> = ({ media, uploadedFil
       {path ? (
         <>
           <div
-            className={classes.container}
+            className={classNames({
+              [classes.container]: true,
+              [classes.pending]: showImage,
+              [classes.unsent]: isUnsent,
+            })}
             onClick={() => {
               setShowImage(true)
             }}
diff --git a/packages/desktop/src/renderer/components/ContextMenu/ContextMenu.stories.tsx b/packages/desktop/src/renderer/components/ContextMenu/ContextMenu.stories.tsx
index cb75dfd915..0fa54d6c62 100644
--- a/packages/desktop/src/renderer/components/ContextMenu/ContextMenu.stories.tsx
+++ b/packages/desktop/src/renderer/components/ContextMenu/ContextMenu.stories.tsx
@@ -3,6 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react'
 import { withTheme } from '../../storybook/decorators'
 import { ContextMenu, ContextMenuItemList } from './ContextMenu.component'
 import { ContextMenuItemProps, ContextMenuProps } from './ContextMenu.types'
+import { defaultLogger } from '../../logger'
 
 const Template: ComponentStory<typeof ContextMenu> = args => {
   return <ContextMenu {...args} />
@@ -14,7 +15,7 @@ const channel_items: ContextMenuItemProps[] = [
   {
     title: 'Delete',
     action: () => {
-      console.log('clicked on delete channel')
+      defaultLogger.info('clicked on delete channel')
     },
   },
 ]
@@ -24,7 +25,7 @@ const args: ContextMenuProps = {
   children: <ContextMenuItemList items={channel_items} />,
   visible: true,
   handleClose: () => {
-    console.log('closing menu')
+    defaultLogger.info('closing menu')
   },
 }
 
diff --git a/packages/desktop/src/renderer/components/ContextMenu/menus/UserProfileContextMenu.container.tsx b/packages/desktop/src/renderer/components/ContextMenu/menus/UserProfileContextMenu.container.tsx
index 31ab730701..3ea516b294 100644
--- a/packages/desktop/src/renderer/components/ContextMenu/menus/UserProfileContextMenu.container.tsx
+++ b/packages/desktop/src/renderer/components/ContextMenu/menus/UserProfileContextMenu.container.tsx
@@ -13,6 +13,7 @@ import { ContextMenuItemProps, ContextMenuProps } from '../ContextMenu.types'
 import { MenuName } from '../../../../const/MenuNames.enum'
 import { ModalName } from '../../../sagas/modals/modals.types'
 import Jdenticon from '../../Jdenticon/Jdenticon'
+import { defaultLogger } from '../../../logger'
 
 const PREFIX = 'UserProfileContextMenu'
 
@@ -345,21 +346,21 @@ export const UserProfileMenuEditView: FC<UserProfileMenuEditViewProps> = ({
       ;({ width, height } = await getImageSize(photo))
     } catch (err) {
       const msg = 'Failed to get image size'
-      console.error(msg)
+      defaultLogger.error(msg)
       setError(msg)
       return
     }
 
     if (width === 0 || height === 0) {
       const msg = `Image has invalid dimensions: width: ${width}, height: ${height}`
-      console.error(msg)
+      defaultLogger.error(msg)
       setError(msg)
       return
     }
 
     if (width > 200 || height > 200) {
       const msg = 'Image dimensions must be less than or equal to 200px by 200px'
-      console.error(msg)
+      defaultLogger.error(msg)
       setError(msg)
       return
     }
@@ -367,7 +368,7 @@ export const UserProfileMenuEditView: FC<UserProfileMenuEditViewProps> = ({
     // 200 KB = 204800 B limit
     if (photo.size > 204800) {
       const msg = 'Image size must be less than or equal to 200KB'
-      console.error(msg)
+      defaultLogger.error(msg)
       setError(msg)
       return
     }
diff --git a/packages/desktop/src/renderer/components/CreateJoinCommunity/CreateCommunity/CreateCommunity.stories.tsx b/packages/desktop/src/renderer/components/CreateJoinCommunity/CreateCommunity/CreateCommunity.stories.tsx
index 01188395c6..239206803f 100644
--- a/packages/desktop/src/renderer/components/CreateJoinCommunity/CreateCommunity/CreateCommunity.stories.tsx
+++ b/packages/desktop/src/renderer/components/CreateJoinCommunity/CreateCommunity/CreateCommunity.stories.tsx
@@ -5,6 +5,7 @@ import { withTheme } from '../../../storybook/decorators'
 
 import PerformCommunityActionComponent, { PerformCommunityActionProps } from '../PerformCommunityActionComponent'
 import { CommunityOwnership } from '@quiet/types'
+import { defaultLogger } from '../../../logger'
 
 const Template: ComponentStory<typeof PerformCommunityActionComponent> = args => {
   return <PerformCommunityActionComponent {...args} />
@@ -16,10 +17,10 @@ const args: PerformCommunityActionProps = {
   open: true,
   communityOwnership: CommunityOwnership.Owner,
   handleCommunityAction: function (value: string): void {
-    console.log('Creating community: ', value)
+    defaultLogger.info('Creating community: ', value)
   },
   handleRedirection: function (): void {
-    console.log('Redirected to join community')
+    defaultLogger.info('Redirected to join community')
   },
   handleClose: function (): void {},
   isCloseDisabled: false,
diff --git a/packages/desktop/src/renderer/components/CreateJoinCommunity/CreateCommunity/CreateCommunity.test.tsx b/packages/desktop/src/renderer/components/CreateJoinCommunity/CreateCommunity/CreateCommunity.test.tsx
index aef565bf9a..970a329aac 100644
--- a/packages/desktop/src/renderer/components/CreateJoinCommunity/CreateCommunity/CreateCommunity.test.tsx
+++ b/packages/desktop/src/renderer/components/CreateJoinCommunity/CreateCommunity/CreateCommunity.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import '@testing-library/jest-dom/extend-expect'
 import { screen, waitFor } from '@testing-library/dom'
-import { act } from 'react-dom/test-utils'
+import { act } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { renderComponent } from '../../../testUtils/renderComponent'
 import { prepareStore } from '../../../testUtils/prepareStore'
diff --git a/packages/desktop/src/renderer/components/CreateJoinCommunity/JoinCommunity/JoinCommunity.stories.tsx b/packages/desktop/src/renderer/components/CreateJoinCommunity/JoinCommunity/JoinCommunity.stories.tsx
index 070d6e674f..2e862cde99 100644
--- a/packages/desktop/src/renderer/components/CreateJoinCommunity/JoinCommunity/JoinCommunity.stories.tsx
+++ b/packages/desktop/src/renderer/components/CreateJoinCommunity/JoinCommunity/JoinCommunity.stories.tsx
@@ -5,6 +5,7 @@ import { withTheme } from '../../../storybook/decorators'
 
 import PerformCommunityActionComponent, { PerformCommunityActionProps } from '../PerformCommunityActionComponent'
 import { CommunityOwnership } from '@quiet/types'
+import { defaultLogger } from '../../../logger'
 
 const Template: ComponentStory<typeof PerformCommunityActionComponent> = args => {
   return <PerformCommunityActionComponent {...args} />
@@ -17,10 +18,10 @@ const args: PerformCommunityActionProps = {
   open: true,
   communityOwnership: CommunityOwnership.User,
   handleCommunityAction: function (value: string): void {
-    console.log('Joining community: ', value)
+    defaultLogger.info('Joining community: ', value)
   },
   handleRedirection: function (): void {
-    console.log('Redirected to create community')
+    defaultLogger.info('Redirected to create community')
   },
   handleClose: function (): void {},
   isCloseDisabled: false,
diff --git a/packages/desktop/src/renderer/components/CreateJoinCommunity/JoinCommunity/JoinCommunity.test.tsx b/packages/desktop/src/renderer/components/CreateJoinCommunity/JoinCommunity/JoinCommunity.test.tsx
index 6d3d270fc8..a3fadcab17 100644
--- a/packages/desktop/src/renderer/components/CreateJoinCommunity/JoinCommunity/JoinCommunity.test.tsx
+++ b/packages/desktop/src/renderer/components/CreateJoinCommunity/JoinCommunity/JoinCommunity.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import '@testing-library/jest-dom/extend-expect'
 import { screen, waitFor } from '@testing-library/dom'
-import { act } from 'react-dom/test-utils'
+import { act } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { renderComponent } from '../../../testUtils/renderComponent'
 import { prepareStore } from '../../../testUtils/prepareStore'
diff --git a/packages/desktop/src/renderer/components/CreateJoinCommunity/PerformCommunityActionComponent.tsx b/packages/desktop/src/renderer/components/CreateJoinCommunity/PerformCommunityActionComponent.tsx
index b1e3546e60..fd243697b9 100644
--- a/packages/desktop/src/renderer/components/CreateJoinCommunity/PerformCommunityActionComponent.tsx
+++ b/packages/desktop/src/renderer/components/CreateJoinCommunity/PerformCommunityActionComponent.tsx
@@ -22,6 +22,7 @@ import VisibilityOff from '@mui/icons-material/VisibilityOff'
 import Visibility from '@mui/icons-material/Visibility'
 import { parseName } from '@quiet/common'
 import { getInvitationCodes } from '@quiet/state-manager'
+import { defaultLogger } from '../../logger'
 
 const PREFIX = 'PerformCommunityActionComponent'
 
@@ -192,7 +193,7 @@ export const PerformCommunityActionComponent: React.FC<PerformCommunityActionPro
       try {
         data = getInvitationCodes(values.name.trim())
       } catch (e) {
-        console.warn(`Could not parse invitation code, reason: ${e.message}`)
+        defaultLogger.warn(`Could not parse invitation code, reason: ${e.message}`)
       }
 
       if (!data) {
diff --git a/packages/desktop/src/renderer/components/CreateUsername/CreateUsername.stories.tsx b/packages/desktop/src/renderer/components/CreateUsername/CreateUsername.stories.tsx
index e298655534..f52fc21599 100644
--- a/packages/desktop/src/renderer/components/CreateUsername/CreateUsername.stories.tsx
+++ b/packages/desktop/src/renderer/components/CreateUsername/CreateUsername.stories.tsx
@@ -4,6 +4,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react'
 import { withTheme } from '../../storybook/decorators'
 
 import CreateUsernameComponent, { CreateUsernameComponentProps } from './CreateUsernameComponent'
+import { defaultLogger } from '../../logger'
 
 const Template: ComponentStory<typeof CreateUsernameComponent> = args => {
   return <CreateUsernameComponent {...args} />
@@ -15,7 +16,7 @@ const args: CreateUsernameComponentProps = {
   open: true,
   handleClose: function (): void {},
   registerUsername: function (nickname: string): void {
-    console.log('Registering username: ', nickname)
+    defaultLogger.info('Registering username: ', nickname)
   },
 }
 
diff --git a/packages/desktop/src/renderer/components/CreateUsername/CreateUsernameComponent.tsx b/packages/desktop/src/renderer/components/CreateUsername/CreateUsernameComponent.tsx
index a445d4c858..4cffd1748a 100644
--- a/packages/desktop/src/renderer/components/CreateUsername/CreateUsernameComponent.tsx
+++ b/packages/desktop/src/renderer/components/CreateUsername/CreateUsernameComponent.tsx
@@ -18,6 +18,7 @@ import { TextInput } from '../../forms/components/textInput'
 import { userNameField } from '../../forms/fields/createUserFields'
 
 import { parseName } from '@quiet/common'
+import { defaultLogger } from '../../logger'
 
 const PREFIX = 'CreateUsernameComponent-'
 
@@ -174,7 +175,7 @@ export const CreateUsernameComponent: React.FC<CreateUsernameComponentProps> = (
   const onSubmit = useCallback(
     (values: CreateUserValues) => {
       if (errors.userName) {
-        console.error('Cannot submit form with errors')
+        defaultLogger.error('Cannot submit form with errors')
         return
       }
 
diff --git a/packages/desktop/src/renderer/components/LoadingPanel/LoadingPanel.stories.tsx b/packages/desktop/src/renderer/components/LoadingPanel/LoadingPanel.stories.tsx
index 1107935fab..b5bed75048 100644
--- a/packages/desktop/src/renderer/components/LoadingPanel/LoadingPanel.stories.tsx
+++ b/packages/desktop/src/renderer/components/LoadingPanel/LoadingPanel.stories.tsx
@@ -4,6 +4,7 @@ import { withTheme } from '../../storybook/decorators'
 import JoiningPanelComponent, { JoiningPanelComponentProps } from './JoiningPanelComponent'
 import StartingPanelComponent, { StartingPanelComponentProps } from './StartingPanelComponent'
 import { ConnectionProcessInfo } from '@quiet/types'
+import { defaultLogger } from '../../logger'
 
 const JoiningPanelTemplate: ComponentStory<typeof JoiningPanelComponent> = args => {
   return <JoiningPanelComponent {...args} />
@@ -18,7 +19,7 @@ export const StartingPanel = StartingPanelTemplate.bind({})
 const JoiningPanelArgs: JoiningPanelComponentProps = {
   open: true,
   handleClose: function (): void {},
-  openUrl: () => console.log('OpenURL'),
+  openUrl: () => defaultLogger.info('OpenURL'),
   connectionInfo: { number: 10, text: ConnectionProcessInfo.BACKEND_MODULES },
   isOwner: false,
 }
diff --git a/packages/desktop/src/renderer/components/MathMessage/MathMessageComponent.test.tsx b/packages/desktop/src/renderer/components/MathMessage/MathMessageComponent.test.tsx
index 3a4a5afeb4..0d2ab23c52 100644
--- a/packages/desktop/src/renderer/components/MathMessage/MathMessageComponent.test.tsx
+++ b/packages/desktop/src/renderer/components/MathMessage/MathMessageComponent.test.tsx
@@ -1,19 +1,25 @@
 import React from 'react'
-import { act } from 'react-dom/test-utils'
+import { act } from '@testing-library/react'
 import { renderComponent } from '../../testUtils/renderComponent'
 import { MathMessageComponent } from './MathMessageComponent'
 
 describe('MathMessageComponent', () => {
   it('renders tex', async () => {
     const result = renderComponent(
-      <MathMessageComponent message={'$$a + b = c$$'} messageId={'1'} pending={false} openUrl={() => {}} />
+      <MathMessageComponent
+        message={'$$a + b = c$$'}
+        messageId={'1'}
+        pending={false}
+        isUnsent={false}
+        openUrl={() => {}}
+      />
     )
     await act(async () => {})
     expect(result.baseElement).toMatchInlineSnapshot(`
       <body>
         <div>
           <span
-            class="MathMessagemessage MathMessagebeginning css-y9v6re"
+            class="MathMessagemessage MathMessagebeginning css-e17gp5"
           >
             <mjx-container
               class="MathJax"
@@ -98,6 +104,7 @@ describe('MathMessageComponent', () => {
         message={'It is $$a + b = c$$ and $$a - b = d$$'}
         messageId={'1'}
         pending={false}
+        isUnsent={false}
         openUrl={() => {}}
         onMathMessageRendered={onMathMessageRendered}
       />
@@ -113,7 +120,7 @@ describe('MathMessageComponent', () => {
             It is
           </span>
           <span
-            class="MathMessagemessage MathMessagemiddle css-y9v6re"
+            class="MathMessagemessage MathMessagemiddle css-e17gp5"
           >
             <mjx-container
               class="MathJax"
@@ -193,7 +200,7 @@ describe('MathMessageComponent', () => {
             and
           </span>
           <span
-            class="MathMessagemessage MathMessagemiddle css-y9v6re"
+            class="MathMessagemessage MathMessagemiddle css-e17gp5"
           >
             <mjx-container
               class="MathJax"
@@ -278,6 +285,7 @@ describe('MathMessageComponent', () => {
         message={String.raw`$$sum_{i=0}^n i = \frac{n(n+1)}{2}$$ - look`}
         messageId={'1'}
         pending={false}
+        isUnsent={false}
         openUrl={() => {}}
         onMathMessageRendered={onMathMessageRendered}
       />
@@ -287,7 +295,7 @@ describe('MathMessageComponent', () => {
       <body>
         <div>
           <span
-            class="MathMessagemessage MathMessagebeginning css-y9v6re"
+            class="MathMessagemessage MathMessagebeginning css-e17gp5"
           >
             <mjx-container
               class="MathJax"
diff --git a/packages/desktop/src/renderer/components/MathMessage/MathMessageComponent.tsx b/packages/desktop/src/renderer/components/MathMessage/MathMessageComponent.tsx
index 6e9fc3f3dc..9dfd1abbf0 100644
--- a/packages/desktop/src/renderer/components/MathMessage/MathMessageComponent.tsx
+++ b/packages/desktop/src/renderer/components/MathMessage/MathMessageComponent.tsx
@@ -5,11 +5,13 @@ import { convertPromise, SourceLang } from './customMathJax'
 import { styled } from '@mui/material/styles'
 import theme from '../../theme'
 import classNames from 'classnames'
+import { defaultLogger } from '../../logger'
 
 const PREFIX = 'MathMessage'
 
 const classes = {
   pending: `${PREFIX}pending`,
+  unsent: `${PREFIX}unsent`,
   message: `${PREFIX}message`,
   beginning: `${PREFIX}beginning`,
   middle: `${PREFIX}middle`,
@@ -24,6 +26,10 @@ const StyledMath = styled('span')(() => ({
     color: theme.palette.colors.lightGray,
   },
 
+  [`&.${classes.unsent}`]: {
+    opacity: 0.5,
+  },
+
   [`&.${classes.middle}`]: {
     margin: '0 5px 0 5px',
   },
@@ -46,6 +52,7 @@ const MathComponent: React.FC<UseMathProps & TextMessageComponentProps> = ({
   onMathMessageRendered,
   messageId,
   pending,
+  isUnsent,
   openUrl,
   index,
 }) => {
@@ -71,7 +78,7 @@ const MathComponent: React.FC<UseMathProps & TextMessageComponentProps> = ({
     }
   }, [node, message, display])
 
-  if (error) console.error(`Error converting tex '${message}'`, error)
+  if (error) defaultLogger.error(`Error converting tex '${message}'`, error)
 
   if (isMath && !error) {
     const props = {
@@ -82,6 +89,7 @@ const MathComponent: React.FC<UseMathProps & TextMessageComponentProps> = ({
     const className = {
       [classes.message]: true,
       [classes.pending]: pending,
+      [classes.unsent]: isUnsent,
       [classes.beginning]: index === 0,
       [classes.middle]: index !== 0,
     }
@@ -92,6 +100,7 @@ const MathComponent: React.FC<UseMathProps & TextMessageComponentProps> = ({
       message={message}
       messageId={`${messageId}-${index}`}
       pending={pending}
+      isUnsent={isUnsent}
       openUrl={openUrl}
       key={`${messageId}-${index}`}
     />
@@ -107,6 +116,7 @@ export const MathMessageComponent: React.FC<TextMessageComponentProps & MathMess
   message,
   messageId,
   pending,
+  isUnsent,
   openUrl,
   display = false,
   onMathMessageRendered,
@@ -116,8 +126,16 @@ export const MathMessageComponent: React.FC<TextMessageComponentProps & MathMess
   try {
     texMessageSplit = splitByTex(String.raw`${message}`, displayMathRegex)
   } catch (e) {
-    console.error('Error extracting tex from message', e.message)
-    return <TextMessageComponent message={message} messageId={messageId} pending={pending} openUrl={openUrl} />
+    defaultLogger.error('Error extracting tex from message', e.message)
+    return (
+      <TextMessageComponent
+        message={message}
+        messageId={messageId}
+        pending={pending}
+        isUnsent={isUnsent}
+        openUrl={openUrl}
+      />
+    )
   }
 
   return (
@@ -129,6 +147,7 @@ export const MathMessageComponent: React.FC<TextMessageComponentProps & MathMess
           onMathMessageRendered={onMathMessageRendered}
           messageId={messageId}
           pending={pending}
+          isUnsent={isUnsent}
           openUrl={openUrl}
           index={index}
           key={`${messageId}-${index}`}
diff --git a/packages/desktop/src/renderer/components/MathMessage/customMathJax.ts b/packages/desktop/src/renderer/components/MathMessage/customMathJax.ts
index 165e901796..96a707a5c3 100644
--- a/packages/desktop/src/renderer/components/MathMessage/customMathJax.ts
+++ b/packages/desktop/src/renderer/components/MathMessage/customMathJax.ts
@@ -6,6 +6,7 @@ import { SVG } from 'mathjax-full/js/output/svg'
 import { browserAdaptor } from 'mathjax-full/js/adaptors/browserAdaptor'
 import { RegisterHTMLHandler } from 'mathjax-full/js/handlers/html'
 import { STATE } from 'mathjax-full/js/core/MathItem'
+import { defaultLogger } from '../../logger'
 
 export const enum SourceLang {
   MathML = 'MathML',
@@ -125,7 +126,7 @@ export function convertPromise(
       if (!(err instanceof CancelationException)) {
         throw err
       } else {
-        console.log('cancelled render!')
+        defaultLogger.info('cancelled render!')
         return null
       }
     })
diff --git a/packages/desktop/src/renderer/components/ui/AnimatedEllipsis/AnimatedEllipsis.test.tsx b/packages/desktop/src/renderer/components/ui/AnimatedEllipsis/AnimatedEllipsis.test.tsx
new file mode 100644
index 0000000000..09ac93c34e
--- /dev/null
+++ b/packages/desktop/src/renderer/components/ui/AnimatedEllipsis/AnimatedEllipsis.test.tsx
@@ -0,0 +1,48 @@
+import React from 'react'
+
+import each from 'jest-each'
+
+import { AnimatedEllipsis } from './AnimatedEllipsis'
+import { renderComponent } from '../../../testUtils/renderComponent'
+
+describe('AnimatedEllipsis', () => {
+  it('renders text followed by animated ellipsis', () => {
+    const result = renderComponent(
+      <AnimatedEllipsis content={'Sending'} color={'black'} fontSize={12} fontWeight={'regular'} />
+    )
+    expect(result.baseElement).toMatchInlineSnapshot(`
+      <body>
+        <div>
+          <div
+            class="MuiGrid-root MuiGrid-item css-1hr8piw-MuiGrid-root"
+          >
+            <div
+              class="MuiGrid-root MuiGrid-item AnimatedEllipsis-wrapper css-13i4rnv-MuiGrid-root"
+            >
+              <p
+                class="MuiTypography-root MuiTypography-body1 AnimatedEllipsis-content css-1w9s1dh-MuiTypography-root"
+              >
+                Sending
+              </p>
+              <p
+                class="MuiTypography-root MuiTypography-body1 AnimatedEllipsis-dot1 css-1w9s1dh-MuiTypography-root"
+              >
+                .
+              </p>
+              <p
+                class="MuiTypography-root MuiTypography-body1 AnimatedEllipsis-dot2 css-1w9s1dh-MuiTypography-root"
+              >
+                .
+              </p>
+              <p
+                class="MuiTypography-root MuiTypography-body1 AnimatedEllipsis-dot3 css-1w9s1dh-MuiTypography-root"
+              >
+                .
+              </p>
+            </div>
+          </div>
+        </div>
+      </body>
+    `)
+  })
+})
diff --git a/packages/desktop/src/renderer/components/ui/AnimatedEllipsis/AnimatedEllipsis.tsx b/packages/desktop/src/renderer/components/ui/AnimatedEllipsis/AnimatedEllipsis.tsx
new file mode 100644
index 0000000000..d4398aa3dd
--- /dev/null
+++ b/packages/desktop/src/renderer/components/ui/AnimatedEllipsis/AnimatedEllipsis.tsx
@@ -0,0 +1,187 @@
+import React from 'react'
+import Typography from '@mui/material/Typography'
+import { Grid } from '@mui/material'
+import { styled } from '@mui/material/styles'
+import classNames from 'classnames'
+
+const PREFIX = 'AnimatedEllipsis'
+
+const classes = {
+  wrapper: `${PREFIX}-wrapper`,
+  content: `${PREFIX}-content`,
+  dot1: `${PREFIX}-dot1`,
+  dot2: `${PREFIX}-dot2`,
+  dot3: `${PREFIX}-dot3`,
+}
+
+const getAnimationName = (className: string) => `${className}-visibility-anim`
+const getAnimationProperties = (className: string) => {
+  return {
+    animationName: getAnimationName(className),
+    animationDuration: '1800ms',
+    animationTimingFunction: 'ease-in-out',
+    animationIterationCount: 'infinite',
+  }
+}
+
+const StyledGrid = styled(Grid)(({ theme }) => ({
+  [`& .${classes.wrapper}`]: {
+    display: 'flex',
+    flexDirection: 'row',
+  },
+
+  // dot 1
+
+  [`& .${classes.dot1}`]: getAnimationProperties(classes.dot1),
+
+  [`@keyframes ${getAnimationName(classes.dot1)}`]: {
+    '0%': {
+      opacity: 1,
+    },
+    '65%': {
+      opacity: 1,
+    },
+    '66%': {
+      opacity: 0.5,
+    },
+    '75%': {
+      opacity: 0.3,
+    },
+    '90%': {
+      opacity: 0.1,
+    },
+    '100%': {
+      opacity: 0,
+    },
+  },
+
+  // dot2
+
+  [`& .${classes.dot2}`]: getAnimationProperties(classes.dot2),
+
+  [`@keyframes ${getAnimationName(classes.dot2)}`]: {
+    '0%': {
+      opacity: 0,
+    },
+    '5%': {
+      opacity: 0.1,
+    },
+    '15%': {
+      opacity: 0.25,
+    },
+    '18%': {
+      opacity: 0.5,
+    },
+    '20%': {
+      opacity: 0.75,
+    },
+    '22%': {
+      opacity: 1,
+    },
+    '65%': {
+      opacity: 1,
+    },
+    '66%': {
+      opacity: 0.5,
+    },
+    '75%': {
+      opacity: 0.3,
+    },
+    '90%': {
+      opacity: 0.1,
+    },
+    '100%': {
+      opacity: 0,
+    },
+  },
+
+  // dot 3
+
+  [`& .${classes.dot3}`]: getAnimationProperties(classes.dot3),
+
+  [`@keyframes ${getAnimationName(classes.dot3)}`]: {
+    '0%': {
+      opacity: 0,
+    },
+    '25%': {
+      opacity: 0.1,
+    },
+    '35%': {
+      opacity: 0.25,
+    },
+    '39%': {
+      opacity: 0.5,
+    },
+    '43%': {
+      opacity: 0.75,
+    },
+    '44%': {
+      opacity: 1,
+    },
+    '65%': {
+      opacity: 1,
+    },
+    '66%': {
+      opacity: 0.5,
+    },
+    '75%': {
+      opacity: 0.3,
+    },
+    '90%': {
+      opacity: 0.1,
+    },
+    '100%': {
+      opacity: 0,
+    },
+  },
+}))
+
+interface AnimatedEllipsis {
+  content: string
+  color: string
+  fontSize: number
+  fontWeight: string
+}
+
+export const AnimatedEllipsis: React.FC<AnimatedEllipsis> = ({ content, color, fontSize, fontWeight }) => {
+  return (
+    <StyledGrid item>
+      <Grid item className={classNames({ [classes.wrapper]: true })}>
+        <Typography
+          className={classNames({ [classes.content]: true })}
+          color={color}
+          fontSize={fontSize}
+          fontWeight={fontWeight}
+        >
+          {content}
+        </Typography>
+        <Typography
+          className={classNames({ [classes.dot1]: true })}
+          color={color}
+          fontSize={fontSize}
+          fontWeight={fontWeight}
+        >
+          .
+        </Typography>
+        <Typography
+          className={classNames({ [classes.dot2]: true })}
+          color={color}
+          fontSize={fontSize}
+          fontWeight={fontWeight}
+        >
+          .
+        </Typography>
+        <Typography
+          className={classNames({ [classes.dot3]: true })}
+          color={color}
+          fontSize={fontSize}
+          fontWeight={fontWeight}
+        >
+          .
+        </Typography>
+      </Grid>
+    </StyledGrid>
+  )
+}
+
+export default AnimatedEllipsis
diff --git a/packages/desktop/src/renderer/components/ui/TextWithLink/TextWithLink.stories.tsx b/packages/desktop/src/renderer/components/ui/TextWithLink/TextWithLink.stories.tsx
index 1654d78466..bc85042b95 100644
--- a/packages/desktop/src/renderer/components/ui/TextWithLink/TextWithLink.stories.tsx
+++ b/packages/desktop/src/renderer/components/ui/TextWithLink/TextWithLink.stories.tsx
@@ -4,6 +4,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react'
 import { withTheme } from '../../../storybook/decorators'
 
 import TextWithLink, { TextWithLinkProps } from './TextWithLink'
+import { defaultLogger } from '../../../logger'
 
 const Template: ComponentStory<typeof TextWithLink> = args => {
   return <TextWithLink {...args} />
@@ -18,7 +19,7 @@ const args: TextWithLinkProps = {
       tag: 'a',
       label: 'linked',
       action: () => {
-        console.log('link clicked')
+        defaultLogger.info('link clicked')
       },
     },
   ],
diff --git a/packages/desktop/src/renderer/components/ui/TextWithLink/TextWithLink.test.tsx b/packages/desktop/src/renderer/components/ui/TextWithLink/TextWithLink.test.tsx
index 6ac48c706c..1dc3d98f7b 100644
--- a/packages/desktop/src/renderer/components/ui/TextWithLink/TextWithLink.test.tsx
+++ b/packages/desktop/src/renderer/components/ui/TextWithLink/TextWithLink.test.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import { defaultLogger } from '../../../logger'
 
 import { renderComponent } from '../../../testUtils/renderComponent'
 import { TextWithLink } from './TextWithLink'
@@ -13,7 +14,7 @@ describe('TextWithLink', () => {
             tag: 'simple',
             label: 'simple',
             action: () => {
-              console.log('linked clicked')
+              defaultLogger.info('linked clicked')
             },
           },
         ]}
diff --git a/packages/desktop/src/renderer/components/widgets/WarningModal/WarningModal.stories.tsx b/packages/desktop/src/renderer/components/widgets/WarningModal/WarningModal.stories.tsx
index ec618f4f40..f2f83a0287 100644
--- a/packages/desktop/src/renderer/components/widgets/WarningModal/WarningModal.stories.tsx
+++ b/packages/desktop/src/renderer/components/widgets/WarningModal/WarningModal.stories.tsx
@@ -3,6 +3,7 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'
 
 import { withTheme } from '../../../storybook/decorators'
 import WarningModalComponent, { WarningModalComponentProps } from './WarningModal'
+import { defaultLogger } from '../../../logger'
 
 const Template: ComponentStory<typeof WarningModalComponent> = args => {
   return <WarningModalComponent {...args} />
@@ -13,7 +14,7 @@ export const Component = Template.bind({})
 const args: WarningModalComponentProps = {
   open: true,
   handleClose: function (): void {
-    console.log('Closed modal')
+    defaultLogger.info('Closed modal')
   },
   title: 'Warning title',
   subtitle: 'Warning description',
diff --git a/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.test.tsx b/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.test.tsx
index 2b9beeff3d..67c43af4e5 100644
--- a/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.test.tsx
+++ b/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.test.tsx
@@ -14,394 +14,1079 @@ describe('BasicMessage', () => {
     jest.spyOn(DateTime, 'utc').mockImplementationOnce(() => DateTime.utc(2019, 3, 7, 13, 3, 48))
   })
 
-  it('renders component', async () => {
-    const messages = generateMessages()
-    const result = renderComponent(
-      <HashRouter>
-        <Provider store={store}>
-          <BasicMessageComponent
-            duplicatedUsernameModalHandleOpen={jest.fn()}
-            unregisteredUsernameModalHandleOpen={jest.fn()}
-            messages={messages}
-            openUrl={jest.fn()}
-          />
-        </Provider>
-      </HashRouter>
-    )
-    expect(result.baseElement).toMatchInlineSnapshot(`
-      <body>
-        <div>
-          <li
-            class="MuiListItem-root MuiListItem-gutters MuiListItem-padding BasicMessageComponentwrapper css-w0zr2t-MuiListItem-root"
-          >
-            <div
-              class="MuiListItemText-root BasicMessageComponentmessageCard css-tlelie-MuiListItemText-root"
-              data-testid="userMessagesWrapper-gringo-0"
+  describe('sent messages', () => {
+    it('renders component', async () => {
+      const messages = generateMessages()
+      const result = renderComponent(
+        <HashRouter>
+          <Provider store={store}>
+            <BasicMessageComponent
+              duplicatedUsernameModalHandleOpen={jest.fn()}
+              unregisteredUsernameModalHandleOpen={jest.fn()}
+              messages={messages}
+              lastConnectedTime={DateTime.utc().toSeconds() - 1000}
+              allPeersDisconnectedTime={undefined}
+              connectedPeers={['foobar']}
+              communityPeerList={['foobar', 'barbaz']}
+              openUrl={jest.fn()}
+            />
+          </Provider>
+        </HashRouter>
+      )
+      expect(result.baseElement).toMatchInlineSnapshot(`
+        <body>
+          <div>
+            <li
+              class="MuiListItem-root MuiListItem-gutters MuiListItem-padding BasicMessageComponentwrapper css-6oh3yy-MuiListItem-root"
             >
               <div
-                class="MuiGrid-root MuiGrid-container MuiGrid-wrap-xs-nowrap css-aii0rt-MuiGrid-root"
+                class="MuiListItemText-root BasicMessageComponentmessageCard css-tlelie-MuiListItemText-root"
+                data-testid="userMessagesWrapper-gringo-0"
               >
                 <div
-                  class="MuiGrid-root MuiGrid-item BasicMessageComponentavatar css-13i4rnv-MuiGrid-root"
+                  class="MuiGrid-root MuiGrid-container MuiGrid-wrap-xs-nowrap css-aii0rt-MuiGrid-root"
                 >
                   <div
-                    class="BasicMessageComponentalignAvatar"
+                    class="MuiGrid-root MuiGrid-item BasicMessageComponentavatar css-13i4rnv-MuiGrid-root"
+                    data-testid="userAvatar-gringo-0"
                   >
-                    Jdenticon
+                    <div
+                      class="BasicMessageComponentalignAvatar"
+                    >
+                      Jdenticon
+                    </div>
+                  </div>
+                  <div
+                    class="MuiGrid-root MuiGrid-container MuiGrid-item css-1f064cs-MuiGrid-root"
+                  >
+                    <div
+                      class="MuiGrid-root MuiGrid-container MuiGrid-item css-89gxc5-MuiGrid-root"
+                    >
+                      <span
+                        class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1xya0ai-MuiTypography-root"
+                        data-testid="messagesGroupContent-0"
+                      >
+                        <div
+                          class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                        >
+                          <p
+                            class="MuiTypography-root MuiTypography-body1 BasicMessageComponentusername css-11qbl00-MuiTypography-root"
+                          >
+                            gringo
+                          </p>
+                        </div>
+                        <div
+                          class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                        >
+                          <p
+                            class="MuiTypography-root MuiTypography-body1 BasicMessageComponenttime css-ghvhpl-MuiTypography-root"
+                            data-testid="messageDateLabel-gringo-0"
+                          >
+                            string
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-1vpwcmr-MuiGrid-root"
+                      data-testid="userMessages-gringo-0"
+                      style="margin-top: -3px;"
+                    >
+                      <div
+                        class="MuiGrid-root MuiGrid-item css-8e83yq-MuiGrid-root"
+                      >
+                        <span
+                          class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-nx1df2-MuiTypography-root"
+                          data-testid="messagesGroupContent-0"
+                        >
+                          message0
+                        </span>
+                      </div>
+                    </div>
                   </div>
                 </div>
+              </div>
+            </li>
+          </div>
+        </body>
+      `)
+    })
+
+    it('renders component with multiple messages', async () => {
+      const messages = generateMessages({ amount: 2 })
+      const result = renderComponent(
+        <HashRouter>
+          <Provider store={store}>
+            <BasicMessageComponent
+              duplicatedUsernameModalHandleOpen={jest.fn()}
+              unregisteredUsernameModalHandleOpen={jest.fn()}
+              lastConnectedTime={DateTime.utc().toSeconds() - 1000}
+              allPeersDisconnectedTime={undefined}
+              messages={messages}
+              connectedPeers={['foobar']}
+              communityPeerList={['foobar', 'barbaz']}
+              openUrl={jest.fn()}
+            />
+          </Provider>
+        </HashRouter>
+      )
+      expect(result.baseElement).toMatchInlineSnapshot(`
+        <body>
+          <div>
+            <li
+              class="MuiListItem-root MuiListItem-gutters MuiListItem-padding BasicMessageComponentwrapper css-6oh3yy-MuiListItem-root"
+            >
+              <div
+                class="MuiListItemText-root BasicMessageComponentmessageCard css-tlelie-MuiListItemText-root"
+                data-testid="userMessagesWrapper-gringo-0"
+              >
                 <div
-                  class="MuiGrid-root MuiGrid-container MuiGrid-item css-1f064cs-MuiGrid-root"
+                  class="MuiGrid-root MuiGrid-container MuiGrid-wrap-xs-nowrap css-aii0rt-MuiGrid-root"
                 >
                   <div
-                    class="MuiGrid-root MuiGrid-container MuiGrid-item css-89gxc5-MuiGrid-root"
+                    class="MuiGrid-root MuiGrid-item BasicMessageComponentavatar css-13i4rnv-MuiGrid-root"
+                    data-testid="userAvatar-gringo-0"
+                  >
+                    <div
+                      class="BasicMessageComponentalignAvatar"
+                    >
+                      Jdenticon
+                    </div>
+                  </div>
+                  <div
+                    class="MuiGrid-root MuiGrid-container MuiGrid-item css-1f064cs-MuiGrid-root"
                   >
                     <div
-                      class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-wrap-xs-nowrap MuiGrid-grid-xs-true css-181g0at-MuiGrid-root"
+                      class="MuiGrid-root MuiGrid-container MuiGrid-item css-89gxc5-MuiGrid-root"
                     >
                       <div
-                        class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                        class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-wrap-xs-nowrap MuiGrid-grid-xs-true css-181g0at-MuiGrid-root"
                       >
-                        <p
-                          class="MuiTypography-root MuiTypography-body1 BasicMessageComponentusername css-11qbl00-MuiTypography-root"
+                        <div
+                          class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                         >
-                          gringo
-                        </p>
+                          <p
+                            class="MuiTypography-root MuiTypography-body1 BasicMessageComponentusername css-11qbl00-MuiTypography-root"
+                          >
+                            gringo
+                          </p>
+                        </div>
+                        <div
+                          class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                        >
+                          <p
+                            class="MuiTypography-root MuiTypography-body1 BasicMessageComponenttime css-ghvhpl-MuiTypography-root"
+                            data-testid="messageDateLabel-gringo-0"
+                          >
+                            string
+                          </p>
+                        </div>
                       </div>
+                    </div>
+                    <div
+                      class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-1vpwcmr-MuiGrid-root"
+                      data-testid="userMessages-gringo-0"
+                      style="margin-top: -3px;"
+                    >
                       <div
-                        class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                        class="MuiGrid-root MuiGrid-item css-8e83yq-MuiGrid-root"
                       >
-                        <p
-                          class="MuiTypography-root MuiTypography-body1 BasicMessageComponenttime css-ghvhpl-MuiTypography-root"
+                        <span
+                          class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-nx1df2-MuiTypography-root"
+                          data-testid="messagesGroupContent-0"
                         >
-                          string
-                        </p>
+                          message0
+                        </span>
+                      </div>
+                      <div
+                        class="MuiGrid-root MuiGrid-item css-8e83yq-MuiGrid-root"
+                      >
+                        <span
+                          class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-nx1df2-MuiTypography-root"
+                          data-testid="messagesGroupContent-1"
+                        >
+                          message1
+                        </span>
                       </div>
                     </div>
                   </div>
+                </div>
+              </div>
+            </li>
+          </div>
+        </body>
+      `)
+    })
+
+    it('renders with separate info messages', async () => {
+      const messages = generateMessages({ amount: 2, type: 3 })
+      const result = renderComponent(
+        <HashRouter>
+          <Provider store={store}>
+            <BasicMessageComponent
+              duplicatedUsernameModalHandleOpen={jest.fn()}
+              unregisteredUsernameModalHandleOpen={jest.fn()}
+              lastConnectedTime={DateTime.utc().toSeconds() - 1000}
+              allPeersDisconnectedTime={undefined}
+              messages={messages}
+              connectedPeers={['foobar']}
+              communityPeerList={['foobar', 'barbaz']}
+              openUrl={jest.fn()}
+            />
+          </Provider>
+        </HashRouter>
+      )
+      expect(result.baseElement).toMatchInlineSnapshot(`
+        <body>
+          <div>
+            <li
+              class="MuiListItem-root MuiListItem-gutters MuiListItem-padding  css-6oh3yy-MuiListItem-root"
+            >
+              <div
+                class="MuiListItemText-root BasicMessageComponentmessageCard css-tlelie-MuiListItemText-root"
+                data-testid="userMessagesWrapper-gringo-0"
+              >
+                <div
+                  class="MuiGrid-root MuiGrid-container MuiGrid-wrap-xs-nowrap css-aii0rt-MuiGrid-root"
+                >
                   <div
-                    class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-1vpwcmr-MuiGrid-root"
-                    data-testid="userMessages-gringo-0"
-                    style="margin-top: -3px;"
+                    class="MuiGrid-root MuiGrid-item BasicMessageComponentavatar css-13i4rnv-MuiGrid-root"
+                    data-testid="userAvatar-gringo-0"
                   >
                     <div
-                      class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
+                      class="BasicMessageComponentalignAvatar"
                     >
-                      <span
-                        class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1xya0ai-MuiTypography-root"
-                        data-testid="messagesGroupContent-0"
+                      <img
+                        class="BasicMessageComponentinfoIcon"
+                        src="test-file-stub"
+                      />
+                    </div>
+                  </div>
+                  <div
+                    class="MuiGrid-root MuiGrid-container MuiGrid-item css-1f064cs-MuiGrid-root"
+                  >
+                    <div
+                      class="MuiGrid-root MuiGrid-container MuiGrid-item css-89gxc5-MuiGrid-root"
+                    >
+                      <div
+                        class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-wrap-xs-nowrap MuiGrid-grid-xs-true css-181g0at-MuiGrid-root"
                       >
-                        message0
-                      </span>
+                        <div
+                          class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                        >
+                          <p
+                            class="MuiTypography-root MuiTypography-body1 BasicMessageComponentusername css-11qbl00-MuiTypography-root"
+                          >
+                            Quiet
+                          </p>
+                        </div>
+                        <div
+                          class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                        >
+                          <p
+                            class="MuiTypography-root MuiTypography-body1 BasicMessageComponenttime css-ghvhpl-MuiTypography-root"
+                            data-testid="messageDateLabel-gringo-0"
+                          >
+                            string
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-1vpwcmr-MuiGrid-root"
+                      data-testid="userMessages-gringo-0"
+                      style="margin-top: -3px;"
+                    >
+                      <div
+                        class="MuiGrid-root MuiGrid-item css-8e83yq-MuiGrid-root"
+                      >
+                        <span
+                          class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-nx1df2-MuiTypography-root"
+                          data-testid="messagesGroupContent-0"
+                        >
+                          message0
+                        </span>
+                      </div>
+                      <div
+                        class="MuiGrid-root MuiGrid-item css-8e83yq-MuiGrid-root"
+                      >
+                        <span
+                          class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-nx1df2-MuiTypography-root"
+                          data-testid="messagesGroupContent-1"
+                        >
+                          message1
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </li>
-        </div>
-      </body>
-    `)
-  })
-  it('renders component with multiple messages', async () => {
-    const messages = generateMessages({ amount: 2 })
-    const result = renderComponent(
-      <HashRouter>
-        <Provider store={store}>
-          <BasicMessageComponent
-            duplicatedUsernameModalHandleOpen={jest.fn()}
-            unregisteredUsernameModalHandleOpen={jest.fn()}
-            messages={messages}
-            openUrl={jest.fn()}
-          />
-        </Provider>
-      </HashRouter>
-    )
-    expect(result.baseElement).toMatchInlineSnapshot(`
-      <body>
-        <div>
-          <li
-            class="MuiListItem-root MuiListItem-gutters MuiListItem-padding BasicMessageComponentwrapper css-w0zr2t-MuiListItem-root"
-          >
-            <div
-              class="MuiListItemText-root BasicMessageComponentmessageCard css-tlelie-MuiListItemText-root"
-              data-testid="userMessagesWrapper-gringo-0"
+            </li>
+          </div>
+        </body>
+      `)
+    })
+
+    it('renders with basic message and info message', async () => {
+      const message1 = generateMessages()
+      const message2 = generateMessages({ type: 3 })
+      const result = renderComponent(
+        <HashRouter>
+          <Provider store={store}>
+            <BasicMessageComponent
+              duplicatedUsernameModalHandleOpen={jest.fn()}
+              unregisteredUsernameModalHandleOpen={jest.fn()}
+              lastConnectedTime={DateTime.utc().toSeconds() - 1000}
+              allPeersDisconnectedTime={undefined}
+              messages={[...message1, ...message2]}
+              connectedPeers={['foobar']}
+              communityPeerList={['foobar', 'barbaz']}
+              openUrl={jest.fn()}
+            />
+          </Provider>
+        </HashRouter>
+      )
+      expect(result.baseElement).toMatchInlineSnapshot(`
+        <body>
+          <div>
+            <li
+              class="MuiListItem-root MuiListItem-gutters MuiListItem-padding BasicMessageComponentwrapper css-6oh3yy-MuiListItem-root"
             >
               <div
-                class="MuiGrid-root MuiGrid-container MuiGrid-wrap-xs-nowrap css-aii0rt-MuiGrid-root"
+                class="MuiListItemText-root BasicMessageComponentmessageCard css-tlelie-MuiListItemText-root"
+                data-testid="userMessagesWrapper-gringo-0"
               >
                 <div
-                  class="MuiGrid-root MuiGrid-item BasicMessageComponentavatar css-13i4rnv-MuiGrid-root"
+                  class="MuiGrid-root MuiGrid-container MuiGrid-wrap-xs-nowrap css-aii0rt-MuiGrid-root"
                 >
                   <div
-                    class="BasicMessageComponentalignAvatar"
+                    class="MuiGrid-root MuiGrid-item BasicMessageComponentavatar css-13i4rnv-MuiGrid-root"
+                    data-testid="userAvatar-gringo-0"
                   >
-                    Jdenticon
+                    <div
+                      class="BasicMessageComponentalignAvatar"
+                    >
+                      Jdenticon
+                    </div>
                   </div>
-                </div>
-                <div
-                  class="MuiGrid-root MuiGrid-container MuiGrid-item css-1f064cs-MuiGrid-root"
-                >
                   <div
-                    class="MuiGrid-root MuiGrid-container MuiGrid-item css-89gxc5-MuiGrid-root"
+                    class="MuiGrid-root MuiGrid-container MuiGrid-item css-1f064cs-MuiGrid-root"
                   >
                     <div
-                      class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-wrap-xs-nowrap MuiGrid-grid-xs-true css-181g0at-MuiGrid-root"
+                      class="MuiGrid-root MuiGrid-container MuiGrid-item css-89gxc5-MuiGrid-root"
+                    >
+                      <div
+                        class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-wrap-xs-nowrap MuiGrid-grid-xs-true css-181g0at-MuiGrid-root"
+                      >
+                        <div
+                          class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                        >
+                          <p
+                            class="MuiTypography-root MuiTypography-body1 BasicMessageComponentusername css-11qbl00-MuiTypography-root"
+                          >
+                            gringo
+                          </p>
+                        </div>
+                        <div
+                          class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                        >
+                          <p
+                            class="MuiTypography-root MuiTypography-body1 BasicMessageComponenttime css-ghvhpl-MuiTypography-root"
+                            data-testid="messageDateLabel-gringo-0"
+                          >
+                            string
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-1vpwcmr-MuiGrid-root"
+                      data-testid="userMessages-gringo-0"
+                      style="margin-top: -3px;"
                     >
                       <div
-                        class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                        class="MuiGrid-root MuiGrid-item css-8e83yq-MuiGrid-root"
                       >
-                        <p
-                          class="MuiTypography-root MuiTypography-body1 BasicMessageComponentusername css-11qbl00-MuiTypography-root"
+                        <span
+                          class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-nx1df2-MuiTypography-root"
+                          data-testid="messagesGroupContent-0"
                         >
-                          gringo
-                        </p>
+                          message0
+                        </span>
                       </div>
                       <div
-                        class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                        class="MuiGrid-root MuiGrid-item css-8e83yq-MuiGrid-root"
                       >
-                        <p
-                          class="MuiTypography-root MuiTypography-body1 BasicMessageComponenttime css-ghvhpl-MuiTypography-root"
+                        <span
+                          class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-nx1df2-MuiTypography-root"
+                          data-testid="messagesGroupContent-0"
                         >
-                          string
-                        </p>
+                          message0
+                        </span>
                       </div>
                     </div>
                   </div>
+                </div>
+              </div>
+            </li>
+          </div>
+        </body>
+      `)
+    })
+
+    it('renders info messages as sent even when other messages would be unsent', async () => {
+      const nowSeconds = DateTime.utc().toSeconds()
+      const messages = generateMessages({ amount: 2, type: 3, createdAtSeconds: nowSeconds })
+      const result = renderComponent(
+        <HashRouter>
+          <Provider store={store}>
+            <BasicMessageComponent
+              duplicatedUsernameModalHandleOpen={jest.fn()}
+              unregisteredUsernameModalHandleOpen={jest.fn()}
+              lastConnectedTime={nowSeconds - 20000}
+              allPeersDisconnectedTime={nowSeconds - 100000}
+              messages={messages}
+              connectedPeers={[]}
+              communityPeerList={['foobar', 'barbaz']}
+              openUrl={jest.fn()}
+            />
+          </Provider>
+        </HashRouter>
+      )
+      expect(result.baseElement).toMatchInlineSnapshot(`
+        <body>
+          <div>
+            <li
+              class="MuiListItem-root MuiListItem-gutters MuiListItem-padding  css-6oh3yy-MuiListItem-root"
+            >
+              <div
+                class="MuiListItemText-root BasicMessageComponentmessageCard css-tlelie-MuiListItemText-root"
+                data-testid="userMessagesWrapper-gringo-0"
+              >
+                <div
+                  class="MuiGrid-root MuiGrid-container MuiGrid-wrap-xs-nowrap css-aii0rt-MuiGrid-root"
+                >
                   <div
-                    class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-1vpwcmr-MuiGrid-root"
-                    data-testid="userMessages-gringo-0"
-                    style="margin-top: -3px;"
+                    class="MuiGrid-root MuiGrid-item BasicMessageComponentavatar css-13i4rnv-MuiGrid-root"
+                    data-testid="userAvatar-gringo-0"
                   >
                     <div
-                      class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
+                      class="BasicMessageComponentalignAvatar"
                     >
-                      <span
-                        class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1xya0ai-MuiTypography-root"
-                        data-testid="messagesGroupContent-0"
+                      <img
+                        class="BasicMessageComponentinfoIcon"
+                        src="test-file-stub"
+                      />
+                    </div>
+                  </div>
+                  <div
+                    class="MuiGrid-root MuiGrid-container MuiGrid-item css-1f064cs-MuiGrid-root"
+                  >
+                    <div
+                      class="MuiGrid-root MuiGrid-container MuiGrid-item css-89gxc5-MuiGrid-root"
+                    >
+                      <div
+                        class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-wrap-xs-nowrap MuiGrid-grid-xs-true css-181g0at-MuiGrid-root"
                       >
-                        message0
-                      </span>
+                        <div
+                          class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                        >
+                          <p
+                            class="MuiTypography-root MuiTypography-body1 BasicMessageComponentusername css-11qbl00-MuiTypography-root"
+                          >
+                            Quiet
+                          </p>
+                        </div>
+                        <div
+                          class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                        >
+                          <p
+                            class="MuiTypography-root MuiTypography-body1 BasicMessageComponenttime css-ghvhpl-MuiTypography-root"
+                            data-testid="messageDateLabel-gringo-0"
+                          >
+                            string
+                          </p>
+                        </div>
+                      </div>
                     </div>
                     <div
-                      class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
+                      class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-1vpwcmr-MuiGrid-root"
+                      data-testid="userMessages-gringo-0"
+                      style="margin-top: -3px;"
                     >
-                      <span
-                        class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1xya0ai-MuiTypography-root"
-                        data-testid="messagesGroupContent-1"
+                      <div
+                        class="MuiGrid-root MuiGrid-item css-8e83yq-MuiGrid-root"
                       >
-                        message1
-                      </span>
+                        <span
+                          class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-nx1df2-MuiTypography-root"
+                          data-testid="messagesGroupContent-0"
+                        >
+                          message0
+                        </span>
+                      </div>
+                      <div
+                        class="MuiGrid-root MuiGrid-item css-8e83yq-MuiGrid-root"
+                      >
+                        <span
+                          class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-nx1df2-MuiTypography-root"
+                          data-testid="messagesGroupContent-1"
+                        >
+                          message1
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </li>
-        </div>
-      </body>
-    `)
-  })
-  it('renders with separate info messages', async () => {
-    const messages = generateMessages({ amount: 2, type: 3 })
-    const result = renderComponent(
-      <HashRouter>
-        <Provider store={store}>
-          <BasicMessageComponent
-            duplicatedUsernameModalHandleOpen={jest.fn()}
-            unregisteredUsernameModalHandleOpen={jest.fn()}
-            messages={messages}
-            openUrl={jest.fn()}
-          />
-        </Provider>
-      </HashRouter>
-    )
-    expect(result.baseElement).toMatchInlineSnapshot(`
-      <body>
-        <div>
-          <li
-            class="MuiListItem-root MuiListItem-gutters MuiListItem-padding  css-w0zr2t-MuiListItem-root"
-          >
-            <div
-              class="MuiListItemText-root BasicMessageComponentmessageCard css-tlelie-MuiListItemText-root"
-              data-testid="userMessagesWrapper-gringo-0"
+            </li>
+          </div>
+        </body>
+      `)
+    })
+
+    it('renders messages as sent when no peers are connected but community is fresh', async () => {
+      const nowSeconds = DateTime.utc().toSeconds()
+      const messages = generateMessages({ amount: 2, createdAtSeconds: nowSeconds })
+      const result = renderComponent(
+        <HashRouter>
+          <Provider store={store}>
+            <BasicMessageComponent
+              duplicatedUsernameModalHandleOpen={jest.fn()}
+              unregisteredUsernameModalHandleOpen={jest.fn()}
+              lastConnectedTime={nowSeconds - 20000}
+              allPeersDisconnectedTime={undefined}
+              messages={messages}
+              connectedPeers={[]}
+              communityPeerList={['gringo']}
+              openUrl={jest.fn()}
+            />
+          </Provider>
+        </HashRouter>
+      )
+      expect(result.baseElement).toMatchInlineSnapshot(`
+        <body>
+          <div>
+            <li
+              class="MuiListItem-root MuiListItem-gutters MuiListItem-padding BasicMessageComponentwrapper css-6oh3yy-MuiListItem-root"
             >
               <div
-                class="MuiGrid-root MuiGrid-container MuiGrid-wrap-xs-nowrap css-aii0rt-MuiGrid-root"
+                class="MuiListItemText-root BasicMessageComponentmessageCard css-tlelie-MuiListItemText-root"
+                data-testid="userMessagesWrapper-gringo-0"
               >
                 <div
-                  class="MuiGrid-root MuiGrid-item BasicMessageComponentavatar css-13i4rnv-MuiGrid-root"
+                  class="MuiGrid-root MuiGrid-container MuiGrid-wrap-xs-nowrap css-aii0rt-MuiGrid-root"
                 >
                   <div
-                    class="BasicMessageComponentalignAvatar"
+                    class="MuiGrid-root MuiGrid-item BasicMessageComponentavatar css-13i4rnv-MuiGrid-root"
+                    data-testid="userAvatar-gringo-0"
                   >
-                    <img
-                      class="BasicMessageComponentinfoIcon"
-                      src="test-file-stub"
-                    />
+                    <div
+                      class="BasicMessageComponentalignAvatar"
+                    >
+                      Jdenticon
+                    </div>
                   </div>
-                </div>
-                <div
-                  class="MuiGrid-root MuiGrid-container MuiGrid-item css-1f064cs-MuiGrid-root"
-                >
                   <div
-                    class="MuiGrid-root MuiGrid-container MuiGrid-item css-89gxc5-MuiGrid-root"
+                    class="MuiGrid-root MuiGrid-container MuiGrid-item css-1f064cs-MuiGrid-root"
                   >
                     <div
-                      class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-wrap-xs-nowrap MuiGrid-grid-xs-true css-181g0at-MuiGrid-root"
+                      class="MuiGrid-root MuiGrid-container MuiGrid-item css-89gxc5-MuiGrid-root"
+                    >
+                      <div
+                        class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-wrap-xs-nowrap MuiGrid-grid-xs-true css-181g0at-MuiGrid-root"
+                      >
+                        <div
+                          class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                        >
+                          <p
+                            class="MuiTypography-root MuiTypography-body1 BasicMessageComponentusername css-11qbl00-MuiTypography-root"
+                          >
+                            gringo
+                          </p>
+                        </div>
+                        <div
+                          class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                        >
+                          <p
+                            class="MuiTypography-root MuiTypography-body1 BasicMessageComponenttime css-ghvhpl-MuiTypography-root"
+                            data-testid="messageDateLabel-gringo-0"
+                          >
+                            string
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-1vpwcmr-MuiGrid-root"
+                      data-testid="userMessages-gringo-0"
+                      style="margin-top: -3px;"
                     >
                       <div
-                        class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                        class="MuiGrid-root MuiGrid-item css-8e83yq-MuiGrid-root"
                       >
-                        <p
-                          class="MuiTypography-root MuiTypography-body1 BasicMessageComponentusername css-11qbl00-MuiTypography-root"
+                        <span
+                          class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-nx1df2-MuiTypography-root"
+                          data-testid="messagesGroupContent-0"
                         >
-                          Quiet
-                        </p>
+                          message0
+                        </span>
                       </div>
                       <div
-                        class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                        class="MuiGrid-root MuiGrid-item css-8e83yq-MuiGrid-root"
                       >
-                        <p
-                          class="MuiTypography-root MuiTypography-body1 BasicMessageComponenttime css-ghvhpl-MuiTypography-root"
+                        <span
+                          class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-nx1df2-MuiTypography-root"
+                          data-testid="messagesGroupContent-1"
                         >
-                          string
-                        </p>
+                          message1
+                        </span>
                       </div>
                     </div>
                   </div>
+                </div>
+              </div>
+            </li>
+          </div>
+        </body>
+      `)
+    })
+  })
+
+  describe('unsent messages', () => {
+    it('renders component with unsent messages when peers disconnected this session', async () => {
+      const nowSeconds = DateTime.utc().toSeconds()
+      const messages = generateMessages({ createdAtSeconds: nowSeconds })
+      const result = renderComponent(
+        <HashRouter>
+          <Provider store={store}>
+            <BasicMessageComponent
+              duplicatedUsernameModalHandleOpen={jest.fn()}
+              unregisteredUsernameModalHandleOpen={jest.fn()}
+              messages={messages}
+              lastConnectedTime={nowSeconds - 20000}
+              allPeersDisconnectedTime={nowSeconds - 100000}
+              connectedPeers={[]}
+              communityPeerList={['foobar', 'barbaz']}
+              openUrl={jest.fn()}
+            />
+          </Provider>
+        </HashRouter>
+      )
+      expect(result.baseElement).toMatchInlineSnapshot(`
+        <body>
+          <div>
+            <li
+              class="MuiListItem-root MuiListItem-gutters MuiListItem-padding BasicMessageComponentwrapper css-6oh3yy-MuiListItem-root"
+            >
+              <div
+                class="MuiListItemText-root BasicMessageComponentmessageCard css-tlelie-MuiListItemText-root"
+                data-testid="userMessagesWrapper-gringo-0"
+              >
+                <div
+                  class="MuiGrid-root MuiGrid-container MuiGrid-wrap-xs-nowrap css-aii0rt-MuiGrid-root"
+                >
                   <div
-                    class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-1vpwcmr-MuiGrid-root"
-                    data-testid="userMessages-gringo-0"
-                    style="margin-top: -3px;"
+                    class="MuiGrid-root MuiGrid-item BasicMessageComponentavatar BasicMessageComponentunsent css-13i4rnv-MuiGrid-root"
+                    data-testid="userAvatar-gringo-0"
                   >
                     <div
-                      class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
+                      class="BasicMessageComponentalignAvatar"
+                    >
+                      Jdenticon
+                    </div>
+                  </div>
+                  <div
+                    class="MuiGrid-root MuiGrid-container MuiGrid-item css-1f064cs-MuiGrid-root"
+                  >
+                    <div
+                      class="MuiGrid-root MuiGrid-container MuiGrid-item css-89gxc5-MuiGrid-root"
                     >
                       <span
                         class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1xya0ai-MuiTypography-root"
                         data-testid="messagesGroupContent-0"
                       >
-                        message0
-                      </span>
+                        <div
+                          class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                        >
+                          <p
+                            class="MuiTypography-root MuiTypography-body1 BasicMessageComponentusername BasicMessageComponentunsent css-11qbl00-MuiTypography-root"
+                          >
+                            gringo
+                          </p>
+                        </div>
+                        <div
+                          class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                        >
+                          <p
+                            class="MuiTypography-root MuiTypography-body1 BasicMessageComponenttime BasicMessageComponentunsent css-ghvhpl-MuiTypography-root"
+                            data-testid="messageDateLabel-gringo-0"
+                          >
+                            string
+                          </p>
+                        </div>
+                        <div
+                          class="MuiGrid-root MuiGrid-item BasicMessageComponentsending css-13i4rnv-MuiGrid-root"
+                          data-testid="unsent-sending-gringo-0"
+                        >
+                          <div
+                            class="MuiGrid-root MuiGrid-item css-1hr8piw-MuiGrid-root"
+                          >
+                            <div
+                              class="MuiGrid-root MuiGrid-item AnimatedEllipsis-wrapper css-13i4rnv-MuiGrid-root"
+                            >
+                              <p
+                                class="MuiTypography-root MuiTypography-body1 AnimatedEllipsis-content css-1qmyqlf-MuiTypography-root"
+                              >
+                                Sending
+                              </p>
+                              <p
+                                class="MuiTypography-root MuiTypography-body1 AnimatedEllipsis-dot1 css-1qmyqlf-MuiTypography-root"
+                              >
+                                .
+                              </p>
+                              <p
+                                class="MuiTypography-root MuiTypography-body1 AnimatedEllipsis-dot2 css-1qmyqlf-MuiTypography-root"
+                              >
+                                .
+                              </p>
+                              <p
+                                class="MuiTypography-root MuiTypography-body1 AnimatedEllipsis-dot3 css-1qmyqlf-MuiTypography-root"
+                              >
+                                .
+                              </p>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
                     </div>
                     <div
-                      class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
+                      class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-1vpwcmr-MuiGrid-root"
+                      data-testid="userMessages-gringo-0"
+                      style="margin-top: -3px;"
                     >
                       <span
                         class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1xya0ai-MuiTypography-root"
                         data-testid="messagesGroupContent-1"
                       >
-                        message1
-                      </span>
+                        <span
+                          class="MuiTypography-root MuiTypography-body1 TextMessagemessage TextMessageunsent css-nx1df2-MuiTypography-root"
+                          data-testid="messagesGroupContent-0"
+                        >
+                          message0
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </li>
-        </div>
-      </body>
-    `)
-  })
-  it('renders with basic message and info message', async () => {
-    const message1 = generateMessages()
-    const message2 = generateMessages({ type: 3 })
-    const result = renderComponent(
-      <HashRouter>
-        <Provider store={store}>
-          <BasicMessageComponent
-            duplicatedUsernameModalHandleOpen={jest.fn()}
-            unregisteredUsernameModalHandleOpen={jest.fn()}
-            messages={[...message1, ...message2]}
-            openUrl={jest.fn()}
-          />
-        </Provider>
-      </HashRouter>
-    )
-    expect(result.baseElement).toMatchInlineSnapshot(`
-      <body>
-        <div>
-          <li
-            class="MuiListItem-root MuiListItem-gutters MuiListItem-padding BasicMessageComponentwrapper css-w0zr2t-MuiListItem-root"
-          >
-            <div
-              class="MuiListItemText-root BasicMessageComponentmessageCard css-tlelie-MuiListItemText-root"
-              data-testid="userMessagesWrapper-gringo-0"
+            </li>
+          </div>
+        </body>
+      `)
+    })
+
+    it('renders component with unsent messages when no peers seen this session', async () => {
+      const nowSeconds = DateTime.utc().toSeconds()
+      const messages = generateMessages({ createdAtSeconds: nowSeconds })
+      const result = renderComponent(
+        <HashRouter>
+          <Provider store={store}>
+            <BasicMessageComponent
+              duplicatedUsernameModalHandleOpen={jest.fn()}
+              unregisteredUsernameModalHandleOpen={jest.fn()}
+              messages={messages}
+              lastConnectedTime={nowSeconds - 20000}
+              allPeersDisconnectedTime={undefined}
+              connectedPeers={[]}
+              communityPeerList={['foobar', 'barbaz']}
+              openUrl={jest.fn()}
+            />
+          </Provider>
+        </HashRouter>
+      )
+      expect(result.baseElement).toMatchInlineSnapshot(`
+        <body>
+          <div>
+            <li
+              class="MuiListItem-root MuiListItem-gutters MuiListItem-padding BasicMessageComponentwrapper css-6oh3yy-MuiListItem-root"
             >
               <div
-                class="MuiGrid-root MuiGrid-container MuiGrid-wrap-xs-nowrap css-aii0rt-MuiGrid-root"
+                class="MuiListItemText-root BasicMessageComponentmessageCard css-tlelie-MuiListItemText-root"
+                data-testid="userMessagesWrapper-gringo-0"
               >
                 <div
-                  class="MuiGrid-root MuiGrid-item BasicMessageComponentavatar css-13i4rnv-MuiGrid-root"
+                  class="MuiGrid-root MuiGrid-container MuiGrid-wrap-xs-nowrap css-aii0rt-MuiGrid-root"
                 >
                   <div
-                    class="BasicMessageComponentalignAvatar"
+                    class="MuiGrid-root MuiGrid-item BasicMessageComponentavatar BasicMessageComponentunsent css-13i4rnv-MuiGrid-root"
+                    data-testid="userAvatar-gringo-0"
                   >
-                    Jdenticon
+                    <div
+                      class="BasicMessageComponentalignAvatar"
+                    >
+                      Jdenticon
+                    </div>
                   </div>
-                </div>
-                <div
-                  class="MuiGrid-root MuiGrid-container MuiGrid-item css-1f064cs-MuiGrid-root"
-                >
                   <div
-                    class="MuiGrid-root MuiGrid-container MuiGrid-item css-89gxc5-MuiGrid-root"
+                    class="MuiGrid-root MuiGrid-container MuiGrid-item css-1f064cs-MuiGrid-root"
                   >
                     <div
-                      class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-wrap-xs-nowrap MuiGrid-grid-xs-true css-181g0at-MuiGrid-root"
+                      class="MuiGrid-root MuiGrid-container MuiGrid-item css-89gxc5-MuiGrid-root"
                     >
-                      <div
-                        class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                      <span
+                        class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1xya0ai-MuiTypography-root"
+                        data-testid="messagesGroupContent-0"
                       >
-                        <p
-                          class="MuiTypography-root MuiTypography-body1 BasicMessageComponentusername css-11qbl00-MuiTypography-root"
+                        <div
+                          class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                        >
+                          <p
+                            class="MuiTypography-root MuiTypography-body1 BasicMessageComponentusername BasicMessageComponentunsent css-11qbl00-MuiTypography-root"
+                          >
+                            gringo
+                          </p>
+                        </div>
+                        <div
+                          class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                         >
-                          gringo
-                        </p>
+                          <p
+                            class="MuiTypography-root MuiTypography-body1 BasicMessageComponenttime BasicMessageComponentunsent css-ghvhpl-MuiTypography-root"
+                            data-testid="messageDateLabel-gringo-0"
+                          >
+                            string
+                          </p>
+                        </div>
+                        <div
+                          class="MuiGrid-root MuiGrid-item BasicMessageComponentsending css-13i4rnv-MuiGrid-root"
+                          data-testid="unsent-sending-gringo-0"
+                        >
+                          <div
+                            class="MuiGrid-root MuiGrid-item css-1hr8piw-MuiGrid-root"
+                          >
+                            <div
+                              class="MuiGrid-root MuiGrid-item AnimatedEllipsis-wrapper css-13i4rnv-MuiGrid-root"
+                            >
+                              <p
+                                class="MuiTypography-root MuiTypography-body1 AnimatedEllipsis-content css-1qmyqlf-MuiTypography-root"
+                              >
+                                Sending
+                              </p>
+                              <p
+                                class="MuiTypography-root MuiTypography-body1 AnimatedEllipsis-dot1 css-1qmyqlf-MuiTypography-root"
+                              >
+                                .
+                              </p>
+                              <p
+                                class="MuiTypography-root MuiTypography-body1 AnimatedEllipsis-dot2 css-1qmyqlf-MuiTypography-root"
+                              >
+                                .
+                              </p>
+                              <p
+                                class="MuiTypography-root MuiTypography-body1 AnimatedEllipsis-dot3 css-1qmyqlf-MuiTypography-root"
+                              >
+                                .
+                              </p>
+                            </div>
+                          </div>
+                        </div>
                       </div>
-                      <div
-                        class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                    </div>
+                    <div
+                      class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-1vpwcmr-MuiGrid-root"
+                      data-testid="userMessages-gringo-0"
+                      style="margin-top: -3px;"
+                    >
+                      <span
+                        class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1xya0ai-MuiTypography-root"
+                        data-testid="messagesGroupContent-1"
                       >
-                        <p
-                          class="MuiTypography-root MuiTypography-body1 BasicMessageComponenttime css-ghvhpl-MuiTypography-root"
+                        <span
+                          class="MuiTypography-root MuiTypography-body1 TextMessagemessage TextMessageunsent css-nx1df2-MuiTypography-root"
+                          data-testid="messagesGroupContent-0"
                         >
-                          string
-                        </p>
+                          message0
+                        </span>
                       </div>
                     </div>
                   </div>
+                </div>
+              </div>
+            </li>
+          </div>
+        </body>
+      `)
+    })
+
+    it('renders component with multiple unsent messages', async () => {
+      const nowSeconds = DateTime.utc().toSeconds()
+      const messages = generateMessages({ createdAtSeconds: nowSeconds, amount: 5 })
+      const result = renderComponent(
+        <HashRouter>
+          <Provider store={store}>
+            <BasicMessageComponent
+              duplicatedUsernameModalHandleOpen={jest.fn()}
+              unregisteredUsernameModalHandleOpen={jest.fn()}
+              messages={messages}
+              lastConnectedTime={nowSeconds - 20000}
+              allPeersDisconnectedTime={nowSeconds - 100000}
+              connectedPeers={[]}
+              communityPeerList={['foobar', 'barbaz']}
+              openUrl={jest.fn()}
+            />
+          </Provider>
+        </HashRouter>
+      )
+      expect(result.baseElement).toMatchInlineSnapshot(`
+        <body>
+          <div>
+            <li
+              class="MuiListItem-root MuiListItem-gutters MuiListItem-padding BasicMessageComponentwrapper css-6oh3yy-MuiListItem-root"
+            >
+              <div
+                class="MuiListItemText-root BasicMessageComponentmessageCard css-tlelie-MuiListItemText-root"
+                data-testid="userMessagesWrapper-gringo-0"
+              >
+                <div
+                  class="MuiGrid-root MuiGrid-container MuiGrid-wrap-xs-nowrap css-aii0rt-MuiGrid-root"
+                >
                   <div
-                    class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-1vpwcmr-MuiGrid-root"
-                    data-testid="userMessages-gringo-0"
-                    style="margin-top: -3px;"
+                    class="MuiGrid-root MuiGrid-item BasicMessageComponentavatar BasicMessageComponentunsent css-13i4rnv-MuiGrid-root"
+                    data-testid="userAvatar-gringo-0"
                   >
                     <div
-                      class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
+                      class="BasicMessageComponentalignAvatar"
+                    >
+                      Jdenticon
+                    </div>
+                  </div>
+                  <div
+                    class="MuiGrid-root MuiGrid-container MuiGrid-item css-1f064cs-MuiGrid-root"
+                  >
+                    <div
+                      class="MuiGrid-root MuiGrid-container MuiGrid-item css-89gxc5-MuiGrid-root"
                     >
                       <span
                         class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1xya0ai-MuiTypography-root"
                         data-testid="messagesGroupContent-0"
                       >
-                        message0
-                      </span>
+                        <div
+                          class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                        >
+                          <p
+                            class="MuiTypography-root MuiTypography-body1 BasicMessageComponentusername BasicMessageComponentunsent css-11qbl00-MuiTypography-root"
+                          >
+                            gringo
+                          </p>
+                        </div>
+                        <div
+                          class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                        >
+                          <p
+                            class="MuiTypography-root MuiTypography-body1 BasicMessageComponenttime BasicMessageComponentunsent css-ghvhpl-MuiTypography-root"
+                            data-testid="messageDateLabel-gringo-0"
+                          >
+                            string
+                          </p>
+                        </div>
+                        <div
+                          class="MuiGrid-root MuiGrid-item BasicMessageComponentsending css-13i4rnv-MuiGrid-root"
+                          data-testid="unsent-sending-gringo-0"
+                        >
+                          <div
+                            class="MuiGrid-root MuiGrid-item css-1hr8piw-MuiGrid-root"
+                          >
+                            <div
+                              class="MuiGrid-root MuiGrid-item AnimatedEllipsis-wrapper css-13i4rnv-MuiGrid-root"
+                            >
+                              <p
+                                class="MuiTypography-root MuiTypography-body1 AnimatedEllipsis-content css-1qmyqlf-MuiTypography-root"
+                              >
+                                Sending
+                              </p>
+                              <p
+                                class="MuiTypography-root MuiTypography-body1 AnimatedEllipsis-dot1 css-1qmyqlf-MuiTypography-root"
+                              >
+                                .
+                              </p>
+                              <p
+                                class="MuiTypography-root MuiTypography-body1 AnimatedEllipsis-dot2 css-1qmyqlf-MuiTypography-root"
+                              >
+                                .
+                              </p>
+                              <p
+                                class="MuiTypography-root MuiTypography-body1 AnimatedEllipsis-dot3 css-1qmyqlf-MuiTypography-root"
+                              >
+                                .
+                              </p>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
                     </div>
                     <div
-                      class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
+                      class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-1vpwcmr-MuiGrid-root"
+                      data-testid="userMessages-gringo-0"
+                      style="margin-top: -3px;"
                     >
                       <span
                         class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1xya0ai-MuiTypography-root"
                         data-testid="messagesGroupContent-0"
                       >
-                        message0
-                      </span>
+                        <span
+                          class="MuiTypography-root MuiTypography-body1 TextMessagemessage TextMessageunsent css-nx1df2-MuiTypography-root"
+                          data-testid="messagesGroupContent-0"
+                        >
+                          message0
+                        </span>
+                      </div>
+                      <div
+                        class="MuiGrid-root MuiGrid-item css-8e83yq-MuiGrid-root"
+                      >
+                        <span
+                          class="MuiTypography-root MuiTypography-body1 TextMessagemessage TextMessageunsent css-nx1df2-MuiTypography-root"
+                          data-testid="messagesGroupContent-1"
+                        >
+                          message1
+                        </span>
+                      </div>
+                      <div
+                        class="MuiGrid-root MuiGrid-item css-8e83yq-MuiGrid-root"
+                      >
+                        <span
+                          class="MuiTypography-root MuiTypography-body1 TextMessagemessage TextMessageunsent css-nx1df2-MuiTypography-root"
+                          data-testid="messagesGroupContent-2"
+                        >
+                          message2
+                        </span>
+                      </div>
+                      <div
+                        class="MuiGrid-root MuiGrid-item css-8e83yq-MuiGrid-root"
+                      >
+                        <span
+                          class="MuiTypography-root MuiTypography-body1 TextMessagemessage TextMessageunsent css-nx1df2-MuiTypography-root"
+                          data-testid="messagesGroupContent-3"
+                        >
+                          message3
+                        </span>
+                      </div>
+                      <div
+                        class="MuiGrid-root MuiGrid-item css-8e83yq-MuiGrid-root"
+                      >
+                        <span
+                          class="MuiTypography-root MuiTypography-body1 TextMessagemessage TextMessageunsent css-nx1df2-MuiTypography-root"
+                          data-testid="messagesGroupContent-4"
+                        >
+                          message4
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </li>
-        </div>
-      </body>
-    `)
+            </li>
+          </div>
+        </body>
+      `)
+    })
   })
 })
diff --git a/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.tsx b/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.tsx
index 1a43ad6625..3b8f9ff205 100644
--- a/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.tsx
+++ b/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import { DateTime } from 'luxon'
 import { styled } from '@mui/material/styles'
 import { Dictionary } from '@reduxjs/toolkit'
 import classNames from 'classnames'
@@ -23,6 +24,8 @@ import Icon from '../../ui/Icon/Icon'
 import { UseModalType } from '../../../containers/hooks'
 import { HandleOpenModalType, UserLabelType } from '../userLabel/UserLabel.types'
 import UserLabel from '../userLabel/UserLabel.component'
+import AnimatedEllipsis from '../../ui/AnimatedEllipsis/AnimatedEllipsis'
+import { isMessageUnsent } from '@quiet/state-manager'
 
 const PREFIX = 'BasicMessageComponent'
 
@@ -37,6 +40,7 @@ const classes = {
   broadcasted: `${PREFIX}broadcasted`,
   failed: `${PREFIX}failed`,
   avatar: `${PREFIX}avatar`,
+  avatarUnsent: `${PREFIX}avatar-unsent`,
   alignAvatar: `${PREFIX}alignAvatar`,
   moderation: `${PREFIX}moderation`,
   time: `${PREFIX}time`,
@@ -44,6 +48,8 @@ const classes = {
   pending: `${PREFIX}pending`,
   info: `${PREFIX}info`,
   infoIcon: `${PREFIX}infoIcon`,
+  unsent: `${PREFIX}unsent`,
+  sending: `${PREFIX}sending`,
 }
 
 const StyledListItem = styled(ListItem)(({ theme }) => ({
@@ -116,6 +122,7 @@ const StyledListItem = styled(ListItem)(({ theme }) => ({
     color: theme.palette.colors.lightGray,
     fontSize: 14,
     marginTop: -2,
+    marginRight: 5,
   },
 
   [`& .${classes.iconBox}`]: {
@@ -126,6 +133,15 @@ const StyledListItem = styled(ListItem)(({ theme }) => ({
     color: theme.palette.colors.lightGray,
   },
 
+  [`& .${classes.unsent}`]: {
+    opacity: 0.5,
+  },
+
+  [`& .${classes.sending}`]: {
+    color: theme.palette.colors.darkGray,
+    marginTop: -2,
+  },
+
   [`& .${classes.info}`]: {
     color: theme.palette.colors.white,
   },
@@ -161,6 +177,10 @@ const MessageProfilePhoto: React.FC<{ message: DisplayableMessage }> = ({ messag
 export interface BasicMessageProps {
   messages: DisplayableMessage[]
   pendingMessages?: Dictionary<MessageSendingStatus>
+  connectedPeers: string[] | undefined
+  communityPeerList: string[] | undefined
+  lastConnectedTime: number
+  allPeersDisconnectedTime: number | undefined
   openUrl: (url: string) => void
   downloadStatuses?: Dictionary<DownloadStatus>
   uploadedFileModal?: UseModalType<{
@@ -174,6 +194,10 @@ export interface BasicMessageProps {
 export const BasicMessageComponent: React.FC<BasicMessageProps & FileActionsProps> = ({
   messages,
   pendingMessages = {},
+  connectedPeers = [],
+  communityPeerList = [],
+  lastConnectedTime,
+  allPeersDisconnectedTime,
   downloadStatuses = {},
   uploadedFileModal,
   onMathMessageRendered,
@@ -196,6 +220,13 @@ export const BasicMessageComponent: React.FC<BasicMessageProps & FileActionsProp
 
   // Grey out sender name if the first message hasn't been sent yet
   const pending: boolean = pendingMessages[messageDisplayData.id] !== undefined
+  const isUnsent: boolean = isMessageUnsent(
+    messages[0],
+    lastConnectedTime,
+    allPeersDisconnectedTime,
+    connectedPeers,
+    communityPeerList
+  )
 
   return (
     <StyledListItem
@@ -211,7 +242,11 @@ export const BasicMessageComponent: React.FC<BasicMessageProps & FileActionsProp
         data-testid={`userMessagesWrapper-${messageDisplayData.nickname}-${messageDisplayData.id}`}
         primary={
           <Grid container direction='row' justifyContent='flex-start' alignItems='flex-start' wrap={'nowrap'}>
-            <Grid item className={classNames({ [classes.avatar]: true })}>
+            <Grid
+              item
+              className={classNames({ [classes.avatar]: true, [classes.unsent]: isUnsent })}
+              data-testid={`userAvatar-${messageDisplayData.nickname}-${messageDisplayData.id}`}
+            >
               <div className={classes.alignAvatar}>
                 {infoMessage ? (
                   <Icon src={information} className={classes.infoIcon} />
@@ -225,10 +260,11 @@ export const BasicMessageComponent: React.FC<BasicMessageProps & FileActionsProp
                 <Grid container item xs alignItems='center' wrap='nowrap'>
                   <Grid item>
                     <Typography
-                      color='textPrimary'
+                      color={'textPrimary'}
                       className={classNames({
                         [classes.username]: true,
-                        [classes.pending]: pending,
+                        [classes.pending]: pending && !isUnsent,
+                        [classes.unsent]: isUnsent,
                       })}
                     >
                       {infoMessage ? 'Quiet' : messageDisplayData.nickname}
@@ -249,12 +285,23 @@ export const BasicMessageComponent: React.FC<BasicMessageProps & FileActionsProp
                       <Typography
                         className={classNames({
                           [classes.time]: true,
+                          [classes.unsent]: isUnsent,
                         })}
+                        data-testid={`messageDateLabel-${messageDisplayData.nickname}-${messageDisplayData.id}`}
                       >
                         {messageDisplayData.date}
                       </Typography>
                     </Grid>
                   )}
+                  {isUnsent && (
+                    <Grid
+                      item
+                      className={classNames({ [classes.sending]: true })}
+                      data-testid={`unsent-sending-${messageDisplayData.nickname}-${messageDisplayData.id}`}
+                    >
+                      <AnimatedEllipsis content={'Sending'} fontSize={12} fontWeight={'regular'} />
+                    </Grid>
+                  )}
                 </Grid>
               </Grid>
               <Grid
@@ -269,6 +316,7 @@ export const BasicMessageComponent: React.FC<BasicMessageProps & FileActionsProp
                   return (
                     <NestedMessageContent
                       key={index}
+                      isUnsent={isUnsent}
                       message={message}
                       pending={pending}
                       downloadStatus={downloadStatus}
diff --git a/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/ChannelInput.stories.tsx b/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/ChannelInput.stories.tsx
index 041dec94fb..f3087a8001 100644
--- a/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/ChannelInput.stories.tsx
+++ b/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/ChannelInput.stories.tsx
@@ -5,6 +5,7 @@ import { INPUT_STATE } from './InputState.enum'
 
 import { ChannelInputComponent, ChannelInputProps } from './ChannelInput'
 import { withTheme } from '../../../../storybook/decorators'
+import { defaultLogger } from '../../../../logger'
 
 const Template: ComponentStory<typeof ChannelInputComponent> = args => {
   return (
@@ -23,7 +24,7 @@ const args: ChannelInputProps = {
   inputPlaceholder: '#general as @alice',
   onChange: function (_arg: string): void {},
   onKeyPress: function (input: string): void {
-    console.log('send message', input)
+    defaultLogger.info('send message', input)
   },
   infoClass: '',
   setInfoClass: function (_arg: string): void {},
@@ -37,7 +38,7 @@ const argsDisabledInput: ChannelInputProps = {
   inputPlaceholder: '#general as @alice',
   onChange: function (_arg: string): void {},
   onKeyPress: function (input: string): void {
-    console.log('send message', input)
+    defaultLogger.info('send message', input)
   },
   infoClass: '',
   setInfoClass: function (_arg: string): void {},
@@ -248,7 +249,7 @@ const argsLongMessage: ChannelInputProps = {
   initialMessage: initialMessage,
   onChange: function (_arg: string): void {},
   onKeyPress: function (input: string): void {
-    console.log('send message', input)
+    defaultLogger.info('send message', input)
   },
   infoClass: '',
   setInfoClass: function (_arg: string): void {},
diff --git a/packages/desktop/src/renderer/components/widgets/channels/ChannelMessages.test.tsx b/packages/desktop/src/renderer/components/widgets/channels/ChannelMessages.test.tsx
index 24b937b94d..61345bef64 100644
--- a/packages/desktop/src/renderer/components/widgets/channels/ChannelMessages.test.tsx
+++ b/packages/desktop/src/renderer/components/widgets/channels/ChannelMessages.test.tsx
@@ -36,6 +36,10 @@ describe('ChannelMessages', () => {
         duplicatedUsernameModalHandleOpen={jest.fn()}
         unregisteredUsernameModalHandleOpen={jest.fn()}
         messages={messages}
+        lastConnectedTime={1636995489}
+        allPeersDisconnectedTime={undefined}
+        connectedPeers={['foobar']}
+        communityPeerList={['foobar', 'barbaz']}
         scrollbarRef={React.createRef()}
         onScroll={jest.fn()}
         openUrl={jest.fn()}
@@ -83,7 +87,7 @@ describe('ChannelMessages', () => {
                   </div>
                 </div>
                 <li
-                  class="MuiListItem-root MuiListItem-gutters MuiListItem-padding BasicMessageComponentwrapper css-w0zr2t-MuiListItem-root"
+                  class="MuiListItem-root MuiListItem-gutters MuiListItem-padding BasicMessageComponentwrapper css-6oh3yy-MuiListItem-root"
                 >
                   <div
                     class="MuiListItemText-root BasicMessageComponentmessageCard css-tlelie-MuiListItemText-root"
@@ -94,6 +98,7 @@ describe('ChannelMessages', () => {
                     >
                       <div
                         class="MuiGrid-root MuiGrid-item BasicMessageComponentavatar css-13i4rnv-MuiGrid-root"
+                        data-testid="userAvatar-string-string"
                       >
                         <div
                           class="BasicMessageComponentalignAvatar"
@@ -124,6 +129,7 @@ describe('ChannelMessages', () => {
                             >
                               <p
                                 class="MuiTypography-root MuiTypography-body1 BasicMessageComponenttime css-ghvhpl-MuiTypography-root"
+                                data-testid="messageDateLabel-string-string"
                               >
                                 string
                               </p>
@@ -136,10 +142,196 @@ describe('ChannelMessages', () => {
                           style="margin-top: -3px;"
                         >
                           <div
-                            class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
+                            class="MuiGrid-root MuiGrid-item css-8e83yq-MuiGrid-root"
                           >
                             <span
-                              class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1xya0ai-MuiTypography-root"
+                              class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-105mmrw-MuiTypography-root"
+                              data-testid="messagesGroupContent-string"
+                            >
+                              string
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+              </div>
+            </ul>
+          </div>
+        </div>
+      </body>
+    `)
+  })
+
+  it('renders component with unsent messages', async () => {
+    const now = DateTime.utc().toSeconds()
+    const message = {
+      id: 'string',
+      type: 1,
+      message: 'string',
+      createdAt: now,
+      date: 'string',
+      nickname: 'string',
+      isDuplicated: false,
+      isRegistered: true,
+      pubKey: 'string',
+    }
+
+    jest.spyOn(DateTime, 'utc').mockImplementationOnce(() => DateTime.utc(2019, 3, 7, 13, 3, 48))
+
+    const messages = {
+      Today: [[message]],
+    }
+
+    const result = renderComponent(
+      <ChannelMessagesComponent
+        duplicatedUsernameModalHandleOpen={jest.fn()}
+        unregisteredUsernameModalHandleOpen={jest.fn()}
+        messages={messages}
+        lastConnectedTime={now - 500}
+        allPeersDisconnectedTime={now - 1500}
+        connectedPeers={[]}
+        communityPeerList={['foobar', 'barbaz']}
+        scrollbarRef={React.createRef()}
+        onScroll={jest.fn()}
+        openUrl={jest.fn()}
+      />
+    )
+
+    expect(result.baseElement).toMatchInlineSnapshot(`
+      <body>
+        <div>
+          <div
+            class="ChannelMessagesComponentscroll css-gca61p"
+            data-testid="channelContent"
+          >
+            <ul
+              class="MuiList-root ChannelMessagesComponentlist css-1mk9mw3-MuiList-root"
+              id="messages-scroll"
+              tabindex="0"
+            >
+              <div>
+                <div
+                  class="MuiGrid-root MuiGrid-container css-1nj3j97-MuiGrid-root"
+                >
+                  <div
+                    class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1vd824g-MuiGrid-root"
+                  >
+                    <div
+                      class="MessagesDividerdivider"
+                    />
+                  </div>
+                  <div
+                    class="MuiGrid-root MuiGrid-item MessagesDividertitleDiv css-13i4rnv-MuiGrid-root"
+                  >
+                    <p
+                      class="MuiTypography-root MuiTypography-body1 css-ghvhpl-MuiTypography-root"
+                    >
+                      Today
+                    </p>
+                  </div>
+                  <div
+                    class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1vd824g-MuiGrid-root"
+                  >
+                    <div
+                      class="MessagesDividerdivider"
+                    />
+                  </div>
+                </div>
+                <li
+                  class="MuiListItem-root MuiListItem-gutters MuiListItem-padding BasicMessageComponentwrapper css-6oh3yy-MuiListItem-root"
+                >
+                  <div
+                    class="MuiListItemText-root BasicMessageComponentmessageCard css-tlelie-MuiListItemText-root"
+                    data-testid="userMessagesWrapper-string-string"
+                  >
+                    <div
+                      class="MuiGrid-root MuiGrid-container MuiGrid-wrap-xs-nowrap css-aii0rt-MuiGrid-root"
+                    >
+                      <div
+                        class="MuiGrid-root MuiGrid-item BasicMessageComponentavatar BasicMessageComponentunsent css-13i4rnv-MuiGrid-root"
+                        data-testid="userAvatar-string-string"
+                      >
+                        <div
+                          class="BasicMessageComponentalignAvatar"
+                        >
+                          Jdenticon
+                        </div>
+                      </div>
+                      <div
+                        class="MuiGrid-root MuiGrid-container MuiGrid-item css-1f064cs-MuiGrid-root"
+                      >
+                        <div
+                          class="MuiGrid-root MuiGrid-container MuiGrid-item css-89gxc5-MuiGrid-root"
+                        >
+                          <div
+                            class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-wrap-xs-nowrap MuiGrid-grid-xs-true css-181g0at-MuiGrid-root"
+                          >
+                            <div
+                              class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                            >
+                              <p
+                                class="MuiTypography-root MuiTypography-body1 BasicMessageComponentusername BasicMessageComponentunsent css-11qbl00-MuiTypography-root"
+                              >
+                                string
+                              </p>
+                            </div>
+                            <div
+                              class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                            >
+                              <p
+                                class="MuiTypography-root MuiTypography-body1 BasicMessageComponenttime BasicMessageComponentunsent css-ghvhpl-MuiTypography-root"
+                                data-testid="messageDateLabel-string-string"
+                              >
+                                string
+                              </p>
+                            </div>
+                            <div
+                              class="MuiGrid-root MuiGrid-item BasicMessageComponentsending css-13i4rnv-MuiGrid-root"
+                              data-testid="unsent-sending-string-string"
+                            >
+                              <div
+                                class="MuiGrid-root MuiGrid-item css-1hr8piw-MuiGrid-root"
+                              >
+                                <div
+                                  class="MuiGrid-root MuiGrid-item AnimatedEllipsis-wrapper css-13i4rnv-MuiGrid-root"
+                                >
+                                  <p
+                                    class="MuiTypography-root MuiTypography-body1 AnimatedEllipsis-content css-1qmyqlf-MuiTypography-root"
+                                  >
+                                    Sending
+                                  </p>
+                                  <p
+                                    class="MuiTypography-root MuiTypography-body1 AnimatedEllipsis-dot1 css-1qmyqlf-MuiTypography-root"
+                                  >
+                                    .
+                                  </p>
+                                  <p
+                                    class="MuiTypography-root MuiTypography-body1 AnimatedEllipsis-dot2 css-1qmyqlf-MuiTypography-root"
+                                  >
+                                    .
+                                  </p>
+                                  <p
+                                    class="MuiTypography-root MuiTypography-body1 AnimatedEllipsis-dot3 css-1qmyqlf-MuiTypography-root"
+                                  >
+                                    .
+                                  </p>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-1vpwcmr-MuiGrid-root"
+                          data-testid="userMessages-string-string"
+                          style="margin-top: -3px;"
+                        >
+                          <div
+                            class="MuiGrid-root MuiGrid-item css-8e83yq-MuiGrid-root"
+                          >
+                            <span
+                              class="MuiTypography-root MuiTypography-body1 TextMessagemessage TextMessageunsent css-105mmrw-MuiTypography-root"
                               data-testid="messagesGroupContent-string"
                             >
                               string
diff --git a/packages/desktop/src/renderer/components/widgets/channels/ChannelMessages.tsx b/packages/desktop/src/renderer/components/widgets/channels/ChannelMessages.tsx
index 5445b7170d..5daa72fc4d 100644
--- a/packages/desktop/src/renderer/components/widgets/channels/ChannelMessages.tsx
+++ b/packages/desktop/src/renderer/components/widgets/channels/ChannelMessages.tsx
@@ -14,6 +14,7 @@ import { UseModalType } from '../../../containers/hooks'
 
 import { FileActionsProps } from '../../Channel/File/FileComponent/FileComponent'
 import { HandleOpenModalType, UserLabelType } from '../userLabel/UserLabel.types'
+import { allPeersDisconnectedAt } from 'packages/state-manager/src/sagas/network/network.selectors'
 
 const PREFIX = 'ChannelMessagesComponent'
 
@@ -73,6 +74,10 @@ export const deletingChannelMessage = 'Deleting channel...'
 export interface IChannelMessagesProps {
   messages?: MessagesDailyGroups
   pendingMessages?: Dictionary<MessageSendingStatus>
+  connectedPeers: string[] | undefined
+  communityPeerList: string[] | undefined
+  lastConnectedTime: number
+  allPeersDisconnectedTime: number | undefined
   downloadStatuses?: Dictionary<DownloadStatus>
   scrollbarRef: React.RefObject<HTMLDivElement>
   onScroll: () => void
@@ -89,6 +94,10 @@ export interface IChannelMessagesProps {
 export const ChannelMessagesComponent: React.FC<IChannelMessagesProps & FileActionsProps> = ({
   messages = {},
   pendingMessages = {},
+  connectedPeers = [],
+  communityPeerList = [],
+  lastConnectedTime,
+  allPeersDisconnectedTime,
   downloadStatuses = {},
   scrollbarRef,
   onScroll,
@@ -150,6 +159,10 @@ export const ChannelMessagesComponent: React.FC<IChannelMessagesProps & FileActi
                     key={data.id}
                     messages={items}
                     pendingMessages={pendingMessages}
+                    connectedPeers={connectedPeers}
+                    communityPeerList={communityPeerList}
+                    lastConnectedTime={lastConnectedTime}
+                    allPeersDisconnectedTime={allPeersDisconnectedTime}
                     downloadStatuses={downloadStatuses}
                     uploadedFileModal={uploadedFileModal}
                     openUrl={openUrl}
diff --git a/packages/desktop/src/renderer/components/widgets/channels/ChannelNetworkStatus.test.tsx b/packages/desktop/src/renderer/components/widgets/channels/ChannelNetworkStatus.test.tsx
new file mode 100644
index 0000000000..c6f5cc03bf
--- /dev/null
+++ b/packages/desktop/src/renderer/components/widgets/channels/ChannelNetworkStatus.test.tsx
@@ -0,0 +1,147 @@
+import React from 'react'
+
+import { renderComponent } from '../../../testUtils'
+import ChannelNetworkStatus from './ChannelNetworkStatus'
+
+describe('ChannelNetworkStatus', () => {
+  it('renders and displays when community has peers but none are connected', () => {
+    const result = renderComponent(
+      <ChannelNetworkStatus channelName={'general'} isConnectedToOtherPeers={false} communityHasPeers={true} />
+    )
+    expect(result.baseElement).toMatchInlineSnapshot(`
+      <body>
+        <div>
+          <div
+            class="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
+            data-testid="quietTryingToConnect-general"
+            style="display: flex; flex-direction: row; align-items: center; padding: 11px 16px 11px 16px; width: 100%; border-top: 1px solid #F0F0F0; border-radius: 16px 16px 0px 0px;"
+          >
+            <div
+              class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+              style="display: flex; flex-direction: row; padding-right: 12px;"
+            >
+              <span
+                class="MuiCircularProgress-root MuiCircularProgress-indeterminate MuiCircularProgress-colorInherit channelQuietConnectingSpinner css-62e83j-MuiCircularProgress-root"
+                role="progressbar"
+                style="width: 20px; height: 20px;"
+              >
+                <svg
+                  class="MuiCircularProgress-svg css-1idz92c-MuiCircularProgress-svg"
+                  viewBox="22 22 44 44"
+                >
+                  <circle
+                    class="MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate css-176wh8e-MuiCircularProgress-circle"
+                    cx="44"
+                    cy="44"
+                    fill="none"
+                    r="20.2"
+                    stroke-width="3.6"
+                  />
+                </svg>
+              </span>
+            </div>
+            <p
+              class="MuiTypography-root MuiTypography-body1 css-gn1vah-MuiTypography-root"
+            >
+              Quiet is trying to connect...
+            </p>
+          </div>
+        </div>
+      </body>
+    `)
+  })
+
+  it('renders without display when community has peers and at least one is connected', () => {
+    const result = renderComponent(
+      <ChannelNetworkStatus channelName={'general'} isConnectedToOtherPeers={true} communityHasPeers={true} />
+    )
+    expect(result.baseElement).toMatchInlineSnapshot(`
+      <body>
+        <div>
+          <div
+            class="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
+            data-testid="quietTryingToConnect-general"
+            style="display: none; flex-direction: row; align-items: center; padding: 11px 16px 11px 16px; width: 100%; border-top: 1px solid #F0F0F0; border-radius: 16px 16px 0px 0px;"
+          >
+            <div
+              class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+              style="display: flex; flex-direction: row; padding-right: 12px;"
+            >
+              <span
+                class="MuiCircularProgress-root MuiCircularProgress-indeterminate MuiCircularProgress-colorInherit channelQuietConnectingSpinner css-62e83j-MuiCircularProgress-root"
+                role="progressbar"
+                style="width: 20px; height: 20px;"
+              >
+                <svg
+                  class="MuiCircularProgress-svg css-1idz92c-MuiCircularProgress-svg"
+                  viewBox="22 22 44 44"
+                >
+                  <circle
+                    class="MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate css-176wh8e-MuiCircularProgress-circle"
+                    cx="44"
+                    cy="44"
+                    fill="none"
+                    r="20.2"
+                    stroke-width="3.6"
+                  />
+                </svg>
+              </span>
+            </div>
+            <p
+              class="MuiTypography-root MuiTypography-body1 css-gn1vah-MuiTypography-root"
+            >
+              Quiet is trying to connect...
+            </p>
+          </div>
+        </div>
+      </body>
+    `)
+  })
+
+  it('renders without display when community has no peers', () => {
+    const result = renderComponent(
+      <ChannelNetworkStatus channelName={'general'} isConnectedToOtherPeers={false} communityHasPeers={false} />
+    )
+    expect(result.baseElement).toMatchInlineSnapshot(`
+      <body>
+        <div>
+          <div
+            class="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
+            data-testid="quietTryingToConnect-general"
+            style="display: none; flex-direction: row; align-items: center; padding: 11px 16px 11px 16px; width: 100%; border-top: 1px solid #F0F0F0; border-radius: 16px 16px 0px 0px;"
+          >
+            <div
+              class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+              style="display: flex; flex-direction: row; padding-right: 12px;"
+            >
+              <span
+                class="MuiCircularProgress-root MuiCircularProgress-indeterminate MuiCircularProgress-colorInherit channelQuietConnectingSpinner css-62e83j-MuiCircularProgress-root"
+                role="progressbar"
+                style="width: 20px; height: 20px;"
+              >
+                <svg
+                  class="MuiCircularProgress-svg css-1idz92c-MuiCircularProgress-svg"
+                  viewBox="22 22 44 44"
+                >
+                  <circle
+                    class="MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate css-176wh8e-MuiCircularProgress-circle"
+                    cx="44"
+                    cy="44"
+                    fill="none"
+                    r="20.2"
+                    stroke-width="3.6"
+                  />
+                </svg>
+              </span>
+            </div>
+            <p
+              class="MuiTypography-root MuiTypography-body1 css-gn1vah-MuiTypography-root"
+            >
+              Quiet is trying to connect...
+            </p>
+          </div>
+        </div>
+      </body>
+    `)
+  })
+})
diff --git a/packages/desktop/src/renderer/components/widgets/channels/ChannelNetworkStatus.tsx b/packages/desktop/src/renderer/components/widgets/channels/ChannelNetworkStatus.tsx
new file mode 100644
index 0000000000..b8cc795b83
--- /dev/null
+++ b/packages/desktop/src/renderer/components/widgets/channels/ChannelNetworkStatus.tsx
@@ -0,0 +1,46 @@
+import React from 'react'
+import { CircularProgress, Grid, Typography } from '@mui/material'
+
+export interface IChannelNetworkStatusProps {
+  isConnectedToOtherPeers: boolean
+  communityHasPeers: boolean
+  channelName: string
+}
+
+export const ChannelNetworkStatus: React.FC<IChannelNetworkStatusProps> = ({
+  isConnectedToOtherPeers,
+  communityHasPeers,
+  channelName,
+}) => {
+  return (
+    <Grid
+      container
+      style={{
+        display: !isConnectedToOtherPeers && communityHasPeers ? 'flex' : 'none',
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: '11px 16px 11px 16px',
+        width: '100%',
+        borderTop: '1px solid #F0F0F0',
+        borderRadius: '16px 16px 0px 0px',
+      }}
+      data-testid={`quietTryingToConnect-${channelName}`}
+    >
+      <Grid
+        item
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          paddingRight: '12px',
+        }}
+      >
+        <CircularProgress color='inherit' className={'channelQuietConnectingSpinner'} size={20} />
+      </Grid>
+      <Typography fontSize={16} fontWeight={'normal'} justifyContent={'center'}>
+        Quiet is trying to connect...
+      </Typography>
+    </Grid>
+  )
+}
+
+export default ChannelNetworkStatus
diff --git a/packages/desktop/src/renderer/components/widgets/channels/NestedMessageContent.test.tsx b/packages/desktop/src/renderer/components/widgets/channels/NestedMessageContent.test.tsx
index f59ebae54f..bf1497fea4 100644
--- a/packages/desktop/src/renderer/components/widgets/channels/NestedMessageContent.test.tsx
+++ b/packages/desktop/src/renderer/components/widgets/channels/NestedMessageContent.test.tsx
@@ -9,317 +9,644 @@ import { screen } from '@testing-library/dom'
 import NestedMessageContent, { NestedMessageContentProps } from './NestedMessageContent'
 
 describe('NestedMessageContent', () => {
-  it('renders message', () => {
-    const messages = generateMessages()
-    const result = renderComponent(<NestedMessageContent pending={false} message={messages[0]} openUrl={jest.fn()} />)
-    expect(result.baseElement).toMatchInlineSnapshot(`
-      <body>
-        <div>
-          <div
-            class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
-          >
-            <span
-              class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1xya0ai-MuiTypography-root"
-              data-testid="messagesGroupContent-0"
+  describe('Sent Messages', () => {
+    it('renders message', () => {
+      const messages = generateMessages()
+      const result = renderComponent(
+        <NestedMessageContent pending={false} isUnsent={false} message={messages[0]} openUrl={jest.fn()} />
+      )
+      expect(result.baseElement).toMatchInlineSnapshot(`
+        <body>
+          <div>
+            <div
+              class="MuiGrid-root MuiGrid-item css-8e83yq-MuiGrid-root"
             >
-              message0
-            </span>
+              <span
+                class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-nx1df2-MuiTypography-root"
+                data-testid="messagesGroupContent-0"
+              >
+                message0
+              </span>
+            </div>
           </div>
-        </div>
-      </body>
-    `)
-  })
+        </body>
+      `)
+    })
 
-  it('renders pending message', () => {
-    const messages = generateMessages()
-    const result = renderComponent(<NestedMessageContent pending={true} message={messages[0]} openUrl={jest.fn()} />)
-    expect(result.baseElement).toMatchInlineSnapshot(`
-      <body>
-        <div>
-          <div
-            class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
-          >
-            <span
-              class="MuiTypography-root MuiTypography-body1 TextMessagemessage TextMessagepending css-1xya0ai-MuiTypography-root"
-              data-testid="messagesGroupContent-0"
+    it('renders pending message', () => {
+      const messages = generateMessages()
+      const result = renderComponent(
+        <NestedMessageContent pending={true} isUnsent={false} message={messages[0]} openUrl={jest.fn()} />
+      )
+      expect(result.baseElement).toMatchInlineSnapshot(`
+        <body>
+          <div>
+            <div
+              class="MuiGrid-root MuiGrid-item css-8e83yq-MuiGrid-root"
             >
-              message0
-            </span>
+              <span
+                class="MuiTypography-root MuiTypography-body1 TextMessagemessage TextMessagepending css-nx1df2-MuiTypography-root"
+                data-testid="messagesGroupContent-0"
+              >
+                message0
+              </span>
+            </div>
           </div>
-        </div>
-      </body>
-    `)
-  })
+        </body>
+      `)
+    })
 
-  it('renders proper download status for malicious file', async () => {
-    // TODO: add tests for the rest of statuses
-    const messages = generateMessages({ type: 2 })
+    it('renders proper download status for malicious file', async () => {
+      // TODO: add tests for the rest of statuses
+      const messages = generateMessages({ type: 2 })
 
-    const message = {
-      ...messages[0],
-      media: {
-        path: 'path/to/file/test.png',
-        name: 'test',
-        ext: '.png',
-        cid: 'abcd1234',
-        width: 500,
-        height: 600,
-        size: AUTODOWNLOAD_SIZE_LIMIT - 2048,
-        message: {
-          id: 'string',
-          channelId: 'general',
+      const message = {
+        ...messages[0],
+        media: {
+          path: 'path/to/file/test.png',
+          name: 'test',
+          ext: '.png',
+          cid: 'abcd1234',
+          width: 500,
+          height: 600,
+          size: AUTODOWNLOAD_SIZE_LIMIT - 2048,
+          message: {
+            id: 'string',
+            channelId: 'general',
+          },
         },
-      },
-    }
-    const downloadStatus: DownloadStatus = {
-      mid: message.id,
-      cid: message.media.cid,
-      downloadState: DownloadState.Malicious,
-      downloadProgress: {
-        size: 10000,
-        downloaded: 10000,
-        transferSpeed: 500,
-      },
-    }
-    const result = renderComponent(
-      <NestedMessageContent pending={false} message={message} downloadStatus={downloadStatus} openUrl={jest.fn()} />
-    )
-    expect(await screen.findByText('File not valid. Download canceled.')).toBeVisible()
-  })
+      }
+      const downloadStatus: DownloadStatus = {
+        mid: message.id,
+        cid: message.media.cid,
+        downloadState: DownloadState.Malicious,
+        downloadProgress: {
+          size: 10000,
+          downloaded: 10000,
+          transferSpeed: 500,
+        },
+      }
+      const result = renderComponent(
+        <NestedMessageContent
+          pending={false}
+          isUnsent={false}
+          message={message}
+          downloadStatus={downloadStatus}
+          openUrl={jest.fn()}
+        />
+      )
+      expect(await screen.findByText('File not valid. Download canceled.')).toBeVisible()
+    })
 
-  it('renders info message', () => {
-    const messages = generateMessages({ type: 3 })
-    const result = renderComponent(<NestedMessageContent pending={true} message={messages[0]} openUrl={jest.fn()} />)
-    expect(result.baseElement).toMatchInlineSnapshot(`
-      <body>
-        <div>
-          <div
-            class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
-          >
-            <span
-              class="MuiTypography-root MuiTypography-body1 TextMessagemessage TextMessagepending css-1xya0ai-MuiTypography-root"
-              data-testid="messagesGroupContent-0"
+    it('renders info message', () => {
+      const messages = generateMessages({ type: 3 })
+      const result = renderComponent(
+        <NestedMessageContent pending={true} isUnsent={false} message={messages[0]} openUrl={jest.fn()} />
+      )
+      expect(result.baseElement).toMatchInlineSnapshot(`
+        <body>
+          <div>
+            <div
+              class="MuiGrid-root MuiGrid-item css-8e83yq-MuiGrid-root"
             >
-              message0
-            </span>
+              <span
+                class="MuiTypography-root MuiTypography-body1 TextMessagemessage TextMessagepending css-nx1df2-MuiTypography-root"
+                data-testid="messagesGroupContent-0"
+              >
+                message0
+              </span>
+            </div>
           </div>
-        </div>
-      </body>
-    `)
-  })
+        </body>
+      `)
+    })
 
-  it('renders file', () => {
-    const messages = generateMessages({ type: 2 })
+    it('renders file', () => {
+      const messages = generateMessages({ type: 2 })
 
-    const message = {
-      ...messages[0],
-      media: {
-        path: 'path/to/file/test.png',
-        name: 'test',
-        ext: '.png',
-        cid: 'abcd1234',
-        width: 500,
-        height: 600,
-        size: AUTODOWNLOAD_SIZE_LIMIT - 2048,
-        message: {
-          id: 'string',
-          channelId: 'general',
+      const message = {
+        ...messages[0],
+        media: {
+          path: 'path/to/file/test.png',
+          name: 'test',
+          ext: '.png',
+          cid: 'abcd1234',
+          width: 500,
+          height: 600,
+          size: AUTODOWNLOAD_SIZE_LIMIT - 2048,
+          message: {
+            id: 'string',
+            channelId: 'general',
+          },
         },
-      },
-    }
-    const result = renderComponent(<NestedMessageContent pending={false} message={message} openUrl={jest.fn()} />)
-    expect(result.baseElement).toMatchInlineSnapshot(`
-      <body>
-        <div>
-          <div
-            class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
-          >
+      }
+      const result = renderComponent(
+        <NestedMessageContent pending={false} isUnsent={false} message={message} openUrl={jest.fn()} />
+      )
+      expect(result.baseElement).toMatchInlineSnapshot(`
+        <body>
+          <div>
             <div
-              class="NestedMessageContentmessage"
-              data-testid="messagesGroupContent-0"
+              class="MuiGrid-root MuiGrid-item css-8e83yq-MuiGrid-root"
             >
               <div
-                class="css-gd4qex"
+                class="NestedMessageContentmessage"
+                data-testid="messagesGroupContent-0"
               >
                 <div
-                  class="UploadedImagecontainer"
+                  class="css-1clc91l"
                 >
                   <div
-                    class="UploadedImageimage"
-                    data-testid="abcd1234-imageVisual"
+                    class="UploadedImagecontainer"
                   >
-                    <p
-                      class="css-h94c3"
-                    >
-                      test.png
-                    </p>
-                    <img
+                    <div
                       class="UploadedImageimage"
-                      src="path/to/file/test.png"
-                      style="width: 400px;"
-                    />
+                      data-testid="abcd1234-imageVisual"
+                    >
+                      <p
+                        class="css-h94c3"
+                      >
+                        test.png
+                      </p>
+                      <img
+                        class="UploadedImageimage"
+                        src="path/to/file/test.png"
+                        style="width: 400px;"
+                      />
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
-      </body>
-    `)
-  })
+        </body>
+      `)
+    })
 
-  it('renders large image as file', () => {
-    const messages = generateMessages({ type: 2 })
+    it('renders large image as file', () => {
+      const messages = generateMessages({ type: 2 })
 
-    const message = {
-      ...messages[0],
-      media: {
-        path: 'path/to/file/test.png',
-        name: 'test',
-        ext: '.png',
-        cid: 'abcd1234',
-        width: 500,
-        height: 600,
-        size: AUTODOWNLOAD_SIZE_LIMIT + 2048,
-        message: {
-          id: 'string',
-          channelId: 'general',
+      const message = {
+        ...messages[0],
+        media: {
+          path: 'path/to/file/test.png',
+          name: 'test',
+          ext: '.png',
+          cid: 'abcd1234',
+          width: 500,
+          height: 600,
+          size: AUTODOWNLOAD_SIZE_LIMIT + 2048,
+          message: {
+            id: 'string',
+            channelId: 'general',
+          },
         },
-      },
-    }
+      }
 
-    const fileComponentProps: NestedMessageContentProps & FileActionsProps = {
-      downloadStatus: {
-        mid: 'mid',
-        cid: 'cid',
-        downloadState: DownloadState.Downloading,
-        downloadProgress: {
-          size: AUTODOWNLOAD_SIZE_LIMIT + 2048,
-          downloaded: AUTODOWNLOAD_SIZE_LIMIT / 2,
-          transferSpeed: 1000,
+      const fileComponentProps: NestedMessageContentProps & FileActionsProps = {
+        downloadStatus: {
+          mid: 'mid',
+          cid: 'cid',
+          downloadState: DownloadState.Downloading,
+          downloadProgress: {
+            size: AUTODOWNLOAD_SIZE_LIMIT + 2048,
+            downloaded: AUTODOWNLOAD_SIZE_LIMIT / 2,
+            transferSpeed: 1000,
+          },
         },
-      },
-      openUrl: jest.fn(),
-      openContainingFolder: jest.fn(),
-      downloadFile: jest.fn(),
-      cancelDownload: jest.fn(),
-      message: message,
-      pending: false,
-    }
+        openUrl: jest.fn(),
+        openContainingFolder: jest.fn(),
+        downloadFile: jest.fn(),
+        cancelDownload: jest.fn(),
+        message: message,
+        pending: false,
+        isUnsent: false,
+      }
 
-    const result = renderComponent(<NestedMessageContent {...fileComponentProps} />)
-    expect(result.baseElement).toMatchInlineSnapshot(`
-      <body>
-        <div>
-          <div
-            class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
-          >
+      const result = renderComponent(<NestedMessageContent {...fileComponentProps} />)
+      expect(result.baseElement).toMatchInlineSnapshot(`
+        <body>
+          <div>
             <div
-              class="NestedMessageContentmessage"
-              data-testid="messagesGroupContent-0"
+              class="MuiGrid-root MuiGrid-item css-8e83yq-MuiGrid-root"
             >
               <div
-                class="css-4fpo3t"
-                data-testid="abcd1234-fileComponent"
+                class="NestedMessageContentmessage"
+                data-testid="messagesGroupContent-0"
               >
-                <span>
-                  <div
-                    class=""
-                    data-mui-internal-clone-element="true"
-                    style="display: flex;"
-                  >
+                <div
+                  class="css-17r12jj"
+                  data-testid="abcd1234-fileComponent"
+                >
+                  <span>
                     <div
-                      class="FileComponenticon"
+                      class=""
+                      data-mui-internal-clone-element="true"
+                      style="display: flex;"
                     >
-                      <span
-                        aria-valuenow="100"
-                        class="MuiCircularProgress-root MuiCircularProgress-determinate MuiCircularProgress-colorPrimary css-1036n7b-MuiCircularProgress-root"
-                        role="progressbar"
-                        style="width: 18px; height: 18px; transform: rotate(-90deg); position: absolute; color: rgb(231, 231, 231);"
+                      <div
+                        class="FileComponenticon"
                       >
-                        <svg
-                          class="MuiCircularProgress-svg css-1idz92c-MuiCircularProgress-svg"
-                          viewBox="22 22 44 44"
+                        <span
+                          aria-valuenow="100"
+                          class="MuiCircularProgress-root MuiCircularProgress-determinate MuiCircularProgress-colorPrimary css-1rhqaqh-MuiCircularProgress-root"
+                          role="progressbar"
+                          style="width: 18px; height: 18px; transform: rotate(-90deg); position: absolute; color: rgb(231, 231, 231);"
+                        >
+                          <svg
+                            class="MuiCircularProgress-svg css-1idz92c-MuiCircularProgress-svg"
+                            viewBox="22 22 44 44"
+                          >
+                            <circle
+                              class="MuiCircularProgress-circle MuiCircularProgress-circleDeterminate css-oxts8u-MuiCircularProgress-circle"
+                              cx="44"
+                              cy="44"
+                              fill="none"
+                              r="20"
+                              stroke-width="4"
+                              style="stroke-dasharray: 125.664; stroke-dashoffset: 0.000px;"
+                            />
+                          </svg>
+                        </span>
+                        <span
+                          aria-valuenow="50"
+                          class="MuiCircularProgress-root MuiCircularProgress-determinate MuiCircularProgress-colorPrimary css-1rhqaqh-MuiCircularProgress-root"
+                          role="progressbar"
+                          style="width: 18px; height: 18px; transform: rotate(-90deg); color: rgb(178, 178, 178);"
                         >
-                          <circle
-                            class="MuiCircularProgress-circle MuiCircularProgress-circleDeterminate css-oxts8u-MuiCircularProgress-circle"
-                            cx="44"
-                            cy="44"
-                            fill="none"
-                            r="20"
-                            stroke-width="4"
-                            style="stroke-dasharray: 125.664; stroke-dashoffset: 0.000px;"
-                          />
-                        </svg>
-                      </span>
-                      <span
-                        aria-valuenow="50"
-                        class="MuiCircularProgress-root MuiCircularProgress-determinate MuiCircularProgress-colorPrimary css-1036n7b-MuiCircularProgress-root"
-                        role="progressbar"
-                        style="width: 18px; height: 18px; transform: rotate(-90deg); color: rgb(178, 178, 178);"
+                          <svg
+                            class="MuiCircularProgress-svg css-1idz92c-MuiCircularProgress-svg"
+                            viewBox="22 22 44 44"
+                          >
+                            <circle
+                              class="MuiCircularProgress-circle MuiCircularProgress-circleDeterminate css-oxts8u-MuiCircularProgress-circle"
+                              cx="44"
+                              cy="44"
+                              fill="none"
+                              r="20"
+                              stroke-width="4"
+                              style="stroke-dasharray: 125.664; stroke-dashoffset: 62.838px;"
+                            />
+                          </svg>
+                        </span>
+                      </div>
+                      <div
+                        class="FileComponentfilename"
                       >
-                        <svg
-                          class="MuiCircularProgress-svg css-1idz92c-MuiCircularProgress-svg"
-                          viewBox="22 22 44 44"
+                        <h5
+                          class="MuiTypography-root MuiTypography-h5 css-11l3dv4-MuiTypography-root"
+                          style="line-height: 20px;"
                         >
-                          <circle
-                            class="MuiCircularProgress-circle MuiCircularProgress-circleDeterminate css-oxts8u-MuiCircularProgress-circle"
-                            cx="44"
-                            cy="44"
-                            fill="none"
-                            r="20"
-                            stroke-width="4"
-                            style="stroke-dasharray: 125.664; stroke-dashoffset: 62.838px;"
-                          />
-                        </svg>
-                      </span>
+                          test
+                          .png
+                        </h5>
+                        <p
+                          class="MuiTypography-root MuiTypography-body2 css-16d47hw-MuiTypography-root"
+                          style="line-height: 20px; color: rgb(127, 127, 127);"
+                        >
+                          20 MB
+                        </p>
+                      </div>
                     </div>
+                  </span>
+                  <div
+                    class=""
+                    style="padding-top: 16px; display: block;"
+                  >
                     <div
-                      class="FileComponentfilename"
+                      style="cursor: pointer;"
                     >
-                      <h5
-                        class="MuiTypography-root MuiTypography-h5 css-11l3dv4-MuiTypography-root"
-                        style="line-height: 20px;"
+                      <div
+                        class="css-1vnortn"
                       >
-                        test
-                        .png
-                      </h5>
+                        <img
+                          class="FileComponentactionIcon"
+                          src="test-file-stub"
+                        />
+                        <p
+                          class="MuiTypography-root MuiTypography-body2 css-16d47hw-MuiTypography-root"
+                          style="color: rgb(127, 127, 127); margin-left: 8px;"
+                        >
+                          Downloading...
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </body>
+      `)
+    })
+  })
+
+  describe('Unsent Messages', () => {
+    it('renders unsent message', () => {
+      const messages = generateMessages()
+      const result = renderComponent(
+        <NestedMessageContent pending={false} isUnsent={true} message={messages[0]} openUrl={jest.fn()} />
+      )
+      expect(result.baseElement).toMatchInlineSnapshot(`
+        <body>
+          <div>
+            <div
+              class="MuiGrid-root MuiGrid-item css-8e83yq-MuiGrid-root"
+            >
+              <span
+                class="MuiTypography-root MuiTypography-body1 TextMessagemessage TextMessageunsent css-nx1df2-MuiTypography-root"
+                data-testid="messagesGroupContent-0"
+              >
+                message0
+              </span>
+            </div>
+          </div>
+        </body>
+      `)
+    })
+
+    it('renders pending unsent message', () => {
+      const messages = generateMessages()
+      const result = renderComponent(
+        <NestedMessageContent pending={true} isUnsent={true} message={messages[0]} openUrl={jest.fn()} />
+      )
+      expect(result.baseElement).toMatchInlineSnapshot(`
+        <body>
+          <div>
+            <div
+              class="MuiGrid-root MuiGrid-item css-8e83yq-MuiGrid-root"
+            >
+              <span
+                class="MuiTypography-root MuiTypography-body1 TextMessagemessage TextMessagepending TextMessageunsent css-nx1df2-MuiTypography-root"
+                data-testid="messagesGroupContent-0"
+              >
+                message0
+              </span>
+            </div>
+          </div>
+        </body>
+      `)
+    })
+
+    it('renders proper download status for malicious unsent file', async () => {
+      // TODO: add tests for the rest of statuses
+      const messages = generateMessages({ type: 2 })
+
+      const message = {
+        ...messages[0],
+        media: {
+          path: 'path/to/file/test.png',
+          name: 'test',
+          ext: '.png',
+          cid: 'abcd1234',
+          width: 500,
+          height: 600,
+          size: AUTODOWNLOAD_SIZE_LIMIT - 2048,
+          message: {
+            id: 'string',
+            channelId: 'general',
+          },
+        },
+      }
+      const downloadStatus: DownloadStatus = {
+        mid: message.id,
+        cid: message.media.cid,
+        downloadState: DownloadState.Malicious,
+        downloadProgress: {
+          size: 10000,
+          downloaded: 10000,
+          transferSpeed: 500,
+        },
+      }
+      const result = renderComponent(
+        <NestedMessageContent
+          pending={false}
+          isUnsent={true}
+          message={message}
+          downloadStatus={downloadStatus}
+          openUrl={jest.fn()}
+        />
+      )
+      expect(await screen.findByText('File not valid. Download canceled.')).toBeVisible()
+    })
+
+    it('renders file as unsent', () => {
+      const messages = generateMessages({ type: 2 })
+
+      const message = {
+        ...messages[0],
+        media: {
+          path: 'path/to/file/test.png',
+          name: 'test',
+          ext: '.png',
+          cid: 'abcd1234',
+          width: 500,
+          height: 600,
+          size: AUTODOWNLOAD_SIZE_LIMIT - 2048,
+          message: {
+            id: 'string',
+            channelId: 'general',
+          },
+        },
+      }
+      const result = renderComponent(
+        <NestedMessageContent pending={false} isUnsent={true} message={message} openUrl={jest.fn()} />
+      )
+      expect(result.baseElement).toMatchInlineSnapshot(`
+        <body>
+          <div>
+            <div
+              class="MuiGrid-root MuiGrid-item css-8e83yq-MuiGrid-root"
+            >
+              <div
+                class="NestedMessageContentmessage NestedMessageContentunsent"
+                data-testid="messagesGroupContent-0"
+              >
+                <div
+                  class="css-1clc91l"
+                >
+                  <div
+                    class="UploadedImagecontainer UploadedImageunsent"
+                  >
+                    <div
+                      class="UploadedImageimage"
+                      data-testid="abcd1234-imageVisual"
+                    >
                       <p
-                        class="MuiTypography-root MuiTypography-body2 css-16d47hw-MuiTypography-root"
-                        style="line-height: 20px; color: rgb(127, 127, 127);"
+                        class="css-h94c3"
                       >
-                        20 MB
+                        test.png
                       </p>
+                      <img
+                        class="UploadedImageimage"
+                        src="path/to/file/test.png"
+                        style="width: 400px;"
+                      />
                     </div>
                   </div>
-                </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </body>
+      `)
+    })
+
+    it('renders unsent large image as file', () => {
+      const messages = generateMessages({ type: 2 })
+
+      const message = {
+        ...messages[0],
+        media: {
+          path: 'path/to/file/test.png',
+          name: 'test',
+          ext: '.png',
+          cid: 'abcd1234',
+          width: 500,
+          height: 600,
+          size: AUTODOWNLOAD_SIZE_LIMIT + 2048,
+          message: {
+            id: 'string',
+            channelId: 'general',
+          },
+        },
+      }
+
+      const fileComponentProps: NestedMessageContentProps & FileActionsProps = {
+        downloadStatus: {
+          mid: 'mid',
+          cid: 'cid',
+          downloadState: DownloadState.Downloading,
+          downloadProgress: {
+            size: AUTODOWNLOAD_SIZE_LIMIT + 2048,
+            downloaded: AUTODOWNLOAD_SIZE_LIMIT / 2,
+            transferSpeed: 1000,
+          },
+        },
+        openUrl: jest.fn(),
+        openContainingFolder: jest.fn(),
+        downloadFile: jest.fn(),
+        cancelDownload: jest.fn(),
+        message: message,
+        pending: false,
+        isUnsent: true,
+      }
+
+      const result = renderComponent(<NestedMessageContent {...fileComponentProps} />)
+      expect(result.baseElement).toMatchInlineSnapshot(`
+        <body>
+          <div>
+            <div
+              class="MuiGrid-root MuiGrid-item css-8e83yq-MuiGrid-root"
+            >
+              <div
+                class="NestedMessageContentmessage NestedMessageContentunsent"
+                data-testid="messagesGroupContent-0"
+              >
                 <div
-                  style="padding-top: 16px; display: block;"
+                  class="css-17r12jj"
+                  data-testid="abcd1234-fileComponent"
                 >
+                  <span>
+                    <div
+                      class="FileComponentunsent"
+                      data-mui-internal-clone-element="true"
+                      style="display: flex;"
+                    >
+                      <div
+                        class="FileComponenticon"
+                      >
+                        <span
+                          aria-valuenow="100"
+                          class="MuiCircularProgress-root MuiCircularProgress-determinate MuiCircularProgress-colorPrimary css-1rhqaqh-MuiCircularProgress-root"
+                          role="progressbar"
+                          style="width: 18px; height: 18px; transform: rotate(-90deg); position: absolute; color: rgb(231, 231, 231);"
+                        >
+                          <svg
+                            class="MuiCircularProgress-svg css-1idz92c-MuiCircularProgress-svg"
+                            viewBox="22 22 44 44"
+                          >
+                            <circle
+                              class="MuiCircularProgress-circle MuiCircularProgress-circleDeterminate css-oxts8u-MuiCircularProgress-circle"
+                              cx="44"
+                              cy="44"
+                              fill="none"
+                              r="20"
+                              stroke-width="4"
+                              style="stroke-dasharray: 125.664; stroke-dashoffset: 0.000px;"
+                            />
+                          </svg>
+                        </span>
+                        <span
+                          aria-valuenow="50"
+                          class="MuiCircularProgress-root MuiCircularProgress-determinate MuiCircularProgress-colorPrimary css-1rhqaqh-MuiCircularProgress-root"
+                          role="progressbar"
+                          style="width: 18px; height: 18px; transform: rotate(-90deg); color: rgb(178, 178, 178);"
+                        >
+                          <svg
+                            class="MuiCircularProgress-svg css-1idz92c-MuiCircularProgress-svg"
+                            viewBox="22 22 44 44"
+                          >
+                            <circle
+                              class="MuiCircularProgress-circle MuiCircularProgress-circleDeterminate css-oxts8u-MuiCircularProgress-circle"
+                              cx="44"
+                              cy="44"
+                              fill="none"
+                              r="20"
+                              stroke-width="4"
+                              style="stroke-dasharray: 125.664; stroke-dashoffset: 62.838px;"
+                            />
+                          </svg>
+                        </span>
+                      </div>
+                      <div
+                        class="FileComponentfilename"
+                      >
+                        <h5
+                          class="MuiTypography-root MuiTypography-h5 css-11l3dv4-MuiTypography-root"
+                          style="line-height: 20px;"
+                        >
+                          test
+                          .png
+                        </h5>
+                        <p
+                          class="MuiTypography-root MuiTypography-body2 css-16d47hw-MuiTypography-root"
+                          style="line-height: 20px; color: rgb(127, 127, 127);"
+                        >
+                          20 MB
+                        </p>
+                      </div>
+                    </div>
+                  </span>
                   <div
-                    style="cursor: pointer;"
+                    class="FileComponentunsent"
+                    style="padding-top: 16px; display: block;"
                   >
                     <div
-                      class="css-1vnortn"
+                      style="cursor: pointer;"
                     >
-                      <img
-                        class="FileComponentactionIcon"
-                        src="test-file-stub"
-                      />
-                      <p
-                        class="MuiTypography-root MuiTypography-body2 css-16d47hw-MuiTypography-root"
-                        style="color: rgb(127, 127, 127); margin-left: 8px;"
+                      <div
+                        class="css-1vnortn"
                       >
-                        Downloading...
-                      </p>
+                        <img
+                          class="FileComponentactionIcon"
+                          src="test-file-stub"
+                        />
+                        <p
+                          class="MuiTypography-root MuiTypography-body2 css-16d47hw-MuiTypography-root"
+                          style="color: rgb(127, 127, 127); margin-left: 8px;"
+                        >
+                          Downloading...
+                        </p>
+                      </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
-      </body>
-    `)
+        </body>
+      `)
+    })
   })
 })
diff --git a/packages/desktop/src/renderer/components/widgets/channels/NestedMessageContent.tsx b/packages/desktop/src/renderer/components/widgets/channels/NestedMessageContent.tsx
index 0bc230cfad..9552298de5 100644
--- a/packages/desktop/src/renderer/components/widgets/channels/NestedMessageContent.tsx
+++ b/packages/desktop/src/renderer/components/widgets/channels/NestedMessageContent.tsx
@@ -18,6 +18,7 @@ const PREFIX = 'NestedMessageContent'
 const classes = {
   message: `${PREFIX}message`,
   pending: `${PREFIX}pending`,
+  unsent: `${PREFIX}unsent`,
   info: `${PREFIX}info`,
 }
 
@@ -33,6 +34,10 @@ const StyledGrid = styled(Grid)(() => ({
     color: theme.palette.colors.lightGray,
   },
 
+  [`&.${classes.unsent}`]: {
+    opacity: 0.5,
+  },
+
   [`& .${classes.info}`]: {
     color: theme.palette.colors.white,
   },
@@ -41,6 +46,7 @@ const StyledGrid = styled(Grid)(() => ({
 export interface NestedMessageContentProps {
   message: DisplayableMessage
   pending: boolean
+  isUnsent: boolean
   downloadStatus?: DownloadStatus
   openUrl: (url: string) => void
   uploadedFileModal?: UseModalType<{
@@ -52,6 +58,7 @@ export interface NestedMessageContentProps {
 export const NestedMessageContent: React.FC<NestedMessageContentProps & FileActionsProps> = ({
   message,
   pending,
+  isUnsent,
   downloadStatus,
   uploadedFileModal,
   onMathMessageRendered,
@@ -72,6 +79,7 @@ export const NestedMessageContent: React.FC<NestedMessageContentProps & FileActi
             className={classNames({
               [classes.message]: true,
               [classes.pending]: pending,
+              [classes.unsent]: isUnsent,
             })}
             data-testid={`messagesGroupContent-${message.id}`}
           >
@@ -80,11 +88,13 @@ export const NestedMessageContent: React.FC<NestedMessageContentProps & FileActi
                 media={message.media}
                 uploadedFileModal={uploadedFileModal}
                 downloadStatus={downloadStatus}
+                isUnsent={isUnsent}
               />
             ) : (
               <FileComponent
                 message={message}
                 downloadStatus={downloadStatus}
+                isUnsent={isUnsent}
                 openContainingFolder={openContainingFolder}
                 downloadFile={downloadFile}
                 cancelDownload={cancelDownload}
@@ -98,12 +108,14 @@ export const NestedMessageContent: React.FC<NestedMessageContentProps & FileActi
             className={classNames({
               [classes.message]: true,
               [classes.pending]: pending,
+              [classes.unsent]: isUnsent,
             })}
             data-testid={`messagesGroupContent-${message.id}`}
           >
             <FileComponent
               message={message}
               downloadStatus={downloadStatus}
+              isUnsent={isUnsent}
               openContainingFolder={openContainingFolder}
               downloadFile={downloadFile}
               cancelDownload={cancelDownload}
@@ -118,6 +130,7 @@ export const NestedMessageContent: React.FC<NestedMessageContentProps & FileActi
               message={message.message}
               messageId={message.id}
               pending={pending}
+              isUnsent={isUnsent}
               openUrl={openUrl}
             />
           )
@@ -128,6 +141,7 @@ export const NestedMessageContent: React.FC<NestedMessageContentProps & FileActi
             message={message.message}
             messageId={message.id}
             pending={pending}
+            isUnsent={isUnsent}
             openUrl={openUrl}
             onMathMessageRendered={onMathMessageRendered}
           />
diff --git a/packages/desktop/src/renderer/components/widgets/channels/TextMessage.tsx b/packages/desktop/src/renderer/components/widgets/channels/TextMessage.tsx
index 51ad2dcb41..12d8064632 100644
--- a/packages/desktop/src/renderer/components/widgets/channels/TextMessage.tsx
+++ b/packages/desktop/src/renderer/components/widgets/channels/TextMessage.tsx
@@ -12,6 +12,7 @@ const classes = {
   message: `${PREFIX}message`,
   emojiMessage: `${PREFIX}emojiMessage`,
   pending: `${PREFIX}pending`,
+  unsent: `${PREFIX}unsent`,
   blockquote: `${PREFIX}blockquote`,
   code: `${PREFIX}code`,
   pre: `${PREFIX}pre`,
@@ -39,6 +40,10 @@ const StyledTypography = styled(Typography)(() => ({
     color: theme.palette.colors.lightGray,
   },
 
+  [`&.${classes.unsent}`]: {
+    opacity: 0.5,
+  },
+
   [`& .${classes.blockquote}`]: {
     lineHeight: '1em',
     whiteSpace: 'normal',
@@ -108,10 +113,17 @@ export interface TextMessageComponentProps {
   message: string
   messageId: string
   pending: boolean
+  isUnsent: boolean
   openUrl: (url: string) => void
 }
 
-export const TextMessageComponent: React.FC<TextMessageComponentProps> = ({ message, messageId, pending, openUrl }) => {
+export const TextMessageComponent: React.FC<TextMessageComponentProps> = ({
+  message,
+  messageId,
+  pending,
+  isUnsent,
+  openUrl,
+}) => {
   const componentDecorator = (decoratedHref: string, decoratedText: string, key: number): ReactNode => {
     return (
       <a
@@ -132,6 +144,7 @@ export const TextMessageComponent: React.FC<TextMessageComponentProps> = ({ mess
       className={classNames({
         [classes.message]: true,
         [classes.pending]: pending,
+        [classes.unsent]: isUnsent,
         [classes.emojiMessage]: isAllEmoji(message),
       })}
       data-testid={`messagesGroupContent-${messageId}`}
diff --git a/packages/desktop/src/renderer/components/widgets/sentryWarning/SentryWarning.stories.tsx b/packages/desktop/src/renderer/components/widgets/sentryWarning/SentryWarning.stories.tsx
index 06a9c55027..68be36798a 100644
--- a/packages/desktop/src/renderer/components/widgets/sentryWarning/SentryWarning.stories.tsx
+++ b/packages/desktop/src/renderer/components/widgets/sentryWarning/SentryWarning.stories.tsx
@@ -4,6 +4,7 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'
 import { withTheme } from '../../../storybook/decorators'
 
 import { SentryWarningComponent, SentryWarningProps } from './SentryWarningComponent'
+import { defaultLogger } from '../../../logger'
 
 const Template: ComponentStory<typeof SentryWarningComponent> = args => {
   return <SentryWarningComponent {...args} />
@@ -14,7 +15,7 @@ export const Component = Template.bind({})
 const args: SentryWarningProps = {
   open: true,
   handleClose: function (): void {
-    console.log('Closed modal')
+    defaultLogger.info('Closed modal')
   },
 }
 
diff --git a/packages/desktop/src/renderer/components/widgets/update/UpdateModalComponent.stories.tsx b/packages/desktop/src/renderer/components/widgets/update/UpdateModalComponent.stories.tsx
index d8c17ce5b9..ca2a9dae78 100644
--- a/packages/desktop/src/renderer/components/widgets/update/UpdateModalComponent.stories.tsx
+++ b/packages/desktop/src/renderer/components/widgets/update/UpdateModalComponent.stories.tsx
@@ -7,6 +7,7 @@ import { withTheme } from '../../../storybook/decorators'
 import theme from '../../../theme'
 
 import Button from '@mui/material/Button'
+import { defaultLogger } from '../../../logger'
 
 const Template: ComponentStory<typeof UpdateModal> = args => {
   return <UpdateModal {...args} />
@@ -15,7 +16,7 @@ const Template: ComponentStory<typeof UpdateModal> = args => {
 const args: UpdateModalProps = {
   open: true,
   handleClose: function (): void {
-    console.log('modal closed')
+    defaultLogger.info('modal closed')
   },
   buttons: [
     <Button
@@ -24,7 +25,7 @@ const args: UpdateModalProps = {
       color='primary'
       type='submit'
       onClick={() => {
-        console.log('submit button clicked')
+        defaultLogger.info('submit button clicked')
       }}
       style={{
         height: 55,
diff --git a/packages/desktop/src/renderer/index.tsx b/packages/desktop/src/renderer/index.tsx
index 143a3a7d12..20fa0e1639 100644
--- a/packages/desktop/src/renderer/index.tsx
+++ b/packages/desktop/src/renderer/index.tsx
@@ -5,6 +5,9 @@ import Root, { persistor } from './Root'
 import store from './store'
 import updateHandlers from './store/handlers/update'
 import { communities, connection } from '@quiet/state-manager'
+import createLogger from './logger'
+
+const logger = createLogger('index')
 
 if (window && process.env.DEBUG) {
   window.localStorage.setItem('debug', process.env.DEBUG)
diff --git a/packages/desktop/src/renderer/logger.ts b/packages/desktop/src/renderer/logger.ts
index 49f7075161..eb51015307 100644
--- a/packages/desktop/src/renderer/logger.ts
+++ b/packages/desktop/src/renderer/logger.ts
@@ -1,3 +1,5 @@
-import logger from '@quiet/logger'
+import { createQuietLogger } from '@quiet/logger'
 
-export default logger('desktop:renderer')
+const createLogger = createQuietLogger('desktop:renderer', true)
+export const defaultLogger = createLogger('default')
+export default createLogger
diff --git a/packages/desktop/src/renderer/sagas/socket/socket.saga.ts b/packages/desktop/src/renderer/sagas/socket/socket.saga.ts
index 2268578ac9..31ac8c6a37 100644
--- a/packages/desktop/src/renderer/sagas/socket/socket.saga.ts
+++ b/packages/desktop/src/renderer/sagas/socket/socket.saga.ts
@@ -5,18 +5,18 @@ import { socket as stateManager, messages, connection, Socket } from '@quiet/sta
 import { socketActions } from './socket.slice'
 import { eventChannel } from 'redux-saga'
 import { displayMessageNotificationSaga } from '../notifications/notifications.saga'
-import logger from '../../logger'
+import createLogger from '../../logger'
 import { encodeSecret } from '@quiet/common'
 import { SocketActionTypes } from '@quiet/types'
 
-const log = logger('socket')
+const logger = createLogger('socket')
 
 export function* startConnectionSaga(
   action: PayloadAction<ReturnType<typeof socketActions.startConnection>['payload']>
 ): Generator {
   const { dataPort } = action.payload
   if (!dataPort) {
-    log.error('About to start connection but no dataPort found')
+    logger.error('About to start connection but no dataPort found')
   }
 
   let socketIOSecret = yield* select(connection.selectors.socketIOSecret)
@@ -68,11 +68,11 @@ function subscribeSocketLifecycle(socket?: Socket) {
     ReturnType<typeof socketActions.setConnected> | ReturnType<typeof socketActions.suspendConnection>
   >(emit => {
     socket?.on('connect', async () => {
-      console.log('websocket connected')
+      logger.info('websocket connected')
       emit(socketActions.setConnected())
     })
     socket?.on('disconnect', () => {
-      console.log('closing socket connection')
+      logger.info('closing socket connection')
       emit(socketActions.suspendConnection())
     })
     return () => {}
@@ -80,12 +80,12 @@ function subscribeSocketLifecycle(socket?: Socket) {
 }
 
 function* cancelRootSaga(task: FixedTask<Generator>): Generator {
-  console.log('canceling root task')
+  logger.info('canceling root task')
   yield* cancel(task)
 }
 
 function* cancelObservers(task: FixedTask<Generator>): Generator {
-  console.log('canceling observers')
+  logger.info('canceling observers')
   yield* cancel(task)
 }
 
diff --git a/packages/desktop/src/renderer/store/create.ts b/packages/desktop/src/renderer/store/create.ts
index a5c7d55279..25b6eba455 100644
--- a/packages/desktop/src/renderer/store/create.ts
+++ b/packages/desktop/src/renderer/store/create.ts
@@ -10,6 +10,7 @@ import { composeWithDevTools } from 'redux-devtools-extension'
 import reducers from './reducers'
 import { errorsMiddleware } from './middlewares'
 import { Store } from '../sagas/store.types'
+import { defaultLogger } from '../logger'
 
 const testMode = process.env.TEST_MODE
 
@@ -21,7 +22,7 @@ if (testMode) {
 
 const sagaMiddleware = createSagaMiddleware({
   onError(err) {
-    console.error(err)
+    defaultLogger.error(err)
     if (testMode) {
       Sentry.captureException(err)
     }
diff --git a/packages/desktop/src/renderer/testUtils/generateMessages.tsx b/packages/desktop/src/renderer/testUtils/generateMessages.tsx
index d39d49a47b..32cffe5092 100644
--- a/packages/desktop/src/renderer/testUtils/generateMessages.tsx
+++ b/packages/desktop/src/renderer/testUtils/generateMessages.tsx
@@ -5,23 +5,25 @@ interface IGenerateMessages {
   type?: number
   message?: string
   nickname?: string
+  createdAtSeconds?: number
 }
 
-const defaults = { amount: 1, type: 1, message: 'message', nickname: 'gringo' }
+const defaults = { amount: 1, type: 1, message: 'message', nickname: 'gringo', createdAtSeconds: 0 }
 
 export const generateMessages = (options: IGenerateMessages = defaults) => {
-  let { amount, type, message, nickname } = { ...options }
+  let { amount, type, message, nickname, createdAtSeconds } = { ...options }
   amount = amount || defaults.amount
   type = type || defaults.type
   message = message || defaults.message
   nickname = nickname || defaults.nickname
+  createdAtSeconds = createdAtSeconds || defaults.createdAtSeconds
   const messages: DisplayableMessage[] = []
   for (let i = 0; i < amount; i++) {
     messages.push({
       id: `${i}`,
       type,
       message: `${message}${i}`,
-      createdAt: 0,
+      createdAt: createdAtSeconds,
       date: 'string',
       nickname,
       isDuplicated: false,
diff --git a/packages/desktop/src/renderer/testUtils/index.ts b/packages/desktop/src/renderer/testUtils/index.ts
index 8138beb934..2c4a61115b 100644
--- a/packages/desktop/src/renderer/testUtils/index.ts
+++ b/packages/desktop/src/renderer/testUtils/index.ts
@@ -1,3 +1,11 @@
 export * from './generateMessages'
 export * from './prepareStore'
 export * from './renderComponent'
+
+export const sleep = async (timeMs = 1000) => {
+  await new Promise<void>(resolve =>
+    setTimeout(() => {
+      resolve()
+    }, timeMs)
+  )
+}
diff --git a/packages/desktop/src/renderer/testUtils/renderComponent.tsx b/packages/desktop/src/renderer/testUtils/renderComponent.tsx
index b341fac9ff..21bb542f22 100644
--- a/packages/desktop/src/renderer/testUtils/renderComponent.tsx
+++ b/packages/desktop/src/renderer/testUtils/renderComponent.tsx
@@ -2,7 +2,7 @@ import React, { FC, ReactElement } from 'react'
 import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles'
 import { Provider } from 'react-redux'
 
-import { render } from '@testing-library/react'
+import { act, render } from '@testing-library/react'
 
 import theme from '../theme'
 import store from '../store'
diff --git a/packages/desktop/src/rtl-tests/app.restart.test.tsx b/packages/desktop/src/rtl-tests/app.restart.test.tsx
index 3f77fa3c67..6e2236a86b 100644
--- a/packages/desktop/src/rtl-tests/app.restart.test.tsx
+++ b/packages/desktop/src/rtl-tests/app.restart.test.tsx
@@ -14,7 +14,7 @@ import {
 import MockedSocket from 'socket.io-mock'
 import { ioMock } from '../shared/setupTests'
 import { communities, getFactory, network, publicChannels } from '@quiet/state-manager'
-import { act } from 'react-dom/test-utils'
+import { act } from '@testing-library/react'
 import { identityActions } from 'packages/state-manager/src/sagas/identity/identity.slice'
 import { LoadingPanelType } from '@quiet/types'
 
diff --git a/packages/desktop/src/rtl-tests/channel.add.test.tsx b/packages/desktop/src/rtl-tests/channel.add.test.tsx
index 027949c65c..c684810ceb 100644
--- a/packages/desktop/src/rtl-tests/channel.add.test.tsx
+++ b/packages/desktop/src/rtl-tests/channel.add.test.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import '@testing-library/jest-dom/extend-expect'
 import userEvent from '@testing-library/user-event'
 import { screen, waitFor } from '@testing-library/dom'
-import { act } from 'react-dom/test-utils'
+import { act } from '@testing-library/react'
 import { take } from 'typed-redux-saga'
 import MockedSocket from 'socket.io-mock'
 import { ioMock } from '../shared/setupTests'
diff --git a/packages/desktop/src/rtl-tests/channel.main.test.tsx b/packages/desktop/src/rtl-tests/channel.main.test.tsx
index 4e59b48dde..e0dca2cc6b 100644
--- a/packages/desktop/src/rtl-tests/channel.main.test.tsx
+++ b/packages/desktop/src/rtl-tests/channel.main.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import '@testing-library/jest-dom/extend-expect'
-import { act } from 'react-dom/test-utils'
+import { act } from '@testing-library/react'
 import { screen } from '@testing-library/dom'
 import { apply, take } from 'typed-redux-saga'
 import userEvent from '@testing-library/user-event'
@@ -38,7 +38,7 @@ import {
   SendMessagePayload,
   MessageVerificationStatus,
   DownloadStatus,
-  type MessagesLoadedPayload,
+  MessagesLoadedPayload,
   ResponseLaunchCommunityPayload,
   Community,
 } from '@quiet/types'
@@ -178,8 +178,7 @@ describe('Channel', () => {
       nickname: 'john',
     })
     expect(john.userCertificate).not.toBeNull()
-    // @ts-expect-error
-    const johnPublicKey = keyFromCertificate(parseCertificate(john.userCertificate))
+    const johnPublicKey = keyFromCertificate(parseCertificate(john.userCertificate!))
 
     const authenticMessage: ChannelMessage = {
       ...(
@@ -947,8 +946,7 @@ describe('Channel', () => {
         type: MessageType.Image,
         message: '',
         createdAt: DateTime.utc().valueOf(),
-        // @ts-expect-error
-        channelId: generalId,
+        channelId: generalId!,
         signature: '',
         pubKey: '',
         media: missingFile,
diff --git a/packages/desktop/src/rtl-tests/channel.switch.test.tsx b/packages/desktop/src/rtl-tests/channel.switch.test.tsx
index 85c36e3ff4..59798a9b6f 100644
--- a/packages/desktop/src/rtl-tests/channel.switch.test.tsx
+++ b/packages/desktop/src/rtl-tests/channel.switch.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import '@testing-library/jest-dom/extend-expect'
 import userEvent from '@testing-library/user-event'
-import { act } from 'react-dom/test-utils'
+import { act } from '@testing-library/react'
 import { screen } from '@testing-library/dom'
 import { apply } from 'typed-redux-saga'
 import { Task } from 'redux-saga'
diff --git a/packages/desktop/src/rtl-tests/community.join.test.tsx b/packages/desktop/src/rtl-tests/community.join.test.tsx
index 6e699d288e..e2e3dad7aa 100644
--- a/packages/desktop/src/rtl-tests/community.join.test.tsx
+++ b/packages/desktop/src/rtl-tests/community.join.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import '@testing-library/jest-dom/extend-expect'
-import { act } from 'react-dom/test-utils'
-import { screen } from '@testing-library/dom'
+import { act } from '@testing-library/react'
+import { fireEvent, screen } from '@testing-library/dom'
 import userEvent from '@testing-library/user-event'
 import { take } from 'typed-redux-saga'
 import { renderComponent } from '../renderer/testUtils/renderComponent'
@@ -35,6 +35,7 @@ import {
   SocketActionTypes,
 } from '@quiet/types'
 import { composeInvitationShareUrl } from '@quiet/common'
+import { sleep } from '../renderer/testUtils'
 
 jest.setTimeout(20_000)
 
@@ -122,11 +123,13 @@ describe('User', () => {
     // @ts-ignore
     socket.emitWithAck = mockEmitImpl
 
+    await sleep(2000)
     // Log all the dispatched actions in order
     const actions: AnyAction[] = []
     runSaga(function* (): Generator {
       while (true) {
         const action: AnyAction = yield* take()
+        console.log(action.type)
         actions.push(action.type)
       }
     })
diff --git a/packages/desktop/src/rtl-tests/deep.linking.test.tsx b/packages/desktop/src/rtl-tests/deep.linking.test.tsx
index 53dce50d59..17f9b4bcf8 100644
--- a/packages/desktop/src/rtl-tests/deep.linking.test.tsx
+++ b/packages/desktop/src/rtl-tests/deep.linking.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import '@testing-library/jest-dom/extend-expect'
-import { act } from 'react-dom/test-utils'
+import { act } from '@testing-library/react'
 import { AnyAction } from 'redux'
 import { take } from 'typed-redux-saga'
 import MockedSocket from 'socket.io-mock'
diff --git a/packages/desktop/src/rtl-tests/loadingPanel.test.tsx b/packages/desktop/src/rtl-tests/loadingPanel.test.tsx
index 5730507f97..3c83f93ed1 100644
--- a/packages/desktop/src/rtl-tests/loadingPanel.test.tsx
+++ b/packages/desktop/src/rtl-tests/loadingPanel.test.tsx
@@ -19,7 +19,7 @@ import {
   connection,
 } from '@quiet/state-manager'
 import { DateTime } from 'luxon'
-import { act } from 'react-dom/test-utils'
+import { act } from '@testing-library/react'
 import { modalsActions } from '../renderer/sagas/modals/modals.slice'
 import { ModalName } from '../renderer/sagas/modals/modals.types'
 
diff --git a/packages/desktop/src/rtl-tests/possibleImpersonationAttack.test.tsx b/packages/desktop/src/rtl-tests/possibleImpersonationAttack.test.tsx
index 63da5473e2..324ec6fcea 100644
--- a/packages/desktop/src/rtl-tests/possibleImpersonationAttack.test.tsx
+++ b/packages/desktop/src/rtl-tests/possibleImpersonationAttack.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import '@testing-library/jest-dom/extend-expect'
-import { act } from 'react-dom/test-utils'
+import { act } from '@testing-library/react'
 import { screen } from '@testing-library/dom'
 import { Task } from 'redux-saga'
 import MockedSocket from 'socket.io-mock'
diff --git a/packages/desktop/src/rtl-tests/searchModal.test.tsx b/packages/desktop/src/rtl-tests/searchModal.test.tsx
index 05d76c5120..73e3dd5bcb 100644
--- a/packages/desktop/src/rtl-tests/searchModal.test.tsx
+++ b/packages/desktop/src/rtl-tests/searchModal.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import '@testing-library/jest-dom/extend-expect'
 import userEvent from '@testing-library/user-event'
-import { act } from 'react-dom/test-utils'
+import { act } from '@testing-library/react'
 import { fireEvent, screen } from '@testing-library/dom'
 import { Task } from 'redux-saga'
 import MockedSocket from 'socket.io-mock'
diff --git a/packages/e2e-tests/CHANGELOG.md b/packages/e2e-tests/CHANGELOG.md
index 9c700520fc..ddf3a82c63 100644
--- a/packages/e2e-tests/CHANGELOG.md
+++ b/packages/e2e-tests/CHANGELOG.md
@@ -10,6 +10,12 @@
 
 * Add tests for JPEG and GIF profile photos
 
+* Feature: adds optional retriability to selectors
+
+* Fix: updates message finding selectors to actually return fail when messages aren't found
+
+* Adds tests for connection status element ([#1706](https://github.com/TryQuiet/quiet/issues/1706))
+
 [2.0.3-alpha.6]
 
 * Fix: filter out invalid peer addresses in peer list. Update peer list in localdb.
diff --git a/packages/e2e-tests/src/selectors.ts b/packages/e2e-tests/src/selectors.ts
index bd865d4f41..290ca4fc0e 100644
--- a/packages/e2e-tests/src/selectors.ts
+++ b/packages/e2e-tests/src/selectors.ts
@@ -1,12 +1,22 @@
-import { By, Key, type ThenableWebDriver, type WebElement, until } from 'selenium-webdriver'
-import { BuildSetup, sleep, type BuildSetupInit } from './utils'
+import { By, Key, type ThenableWebDriver, type WebElement, until, error } from 'selenium-webdriver'
+import { BuildSetup, logAndReturnError, promiseWithRetries, sleep, type BuildSetupInit } from './utils'
 import path from 'path'
 import { BACK_ARROW_DATA_TESTID } from './enums'
+import { MessageIds, RetryConfig } from './types'
 
 export class App {
   thenableWebDriver?: ThenableWebDriver
   buildSetup: BuildSetup
   isOpened: boolean
+  retryConfig: RetryConfig = {
+    attempts: 3,
+    timeoutMs: 600000,
+  }
+  shortRetryConfig: RetryConfig = {
+    ...this.retryConfig,
+    timeoutMs: 30000,
+  }
+
   constructor(buildSetupConfig?: BuildSetupInit) {
     this.buildSetup = new BuildSetup({ ...buildSetupConfig })
     this.isOpened = false
@@ -23,7 +33,7 @@ export class App {
     return this.buildSetup.dataDir
   }
 
-  async open() {
+  async open(): Promise<void> {
     console.log('opening the app', this.buildSetup.dataDir)
     this.buildSetup.resetDriver()
     await this.buildSetup.createChromeDriver()
@@ -34,7 +44,16 @@ export class App {
     await debugModal.close()
   }
 
-  async close(options?: { forceSaveState?: boolean }) {
+  async openWithRetries(overrideConfig?: RetryConfig): Promise<void> {
+    const config = {
+      ...this.retryConfig,
+      ...(overrideConfig ? overrideConfig : {}),
+    }
+    const failureReason = `Failed to open app within ${config.timeoutMs}ms`
+    await promiseWithRetries(this.open(), failureReason, config, this.close)
+  }
+
+  async close(options?: { forceSaveState?: boolean }): Promise<void> {
     if (!this.isOpened) return
     console.log('Closing the app', this.buildSetup.dataDir)
     if (options?.forceSaveState) {
@@ -327,26 +346,19 @@ export class Channel {
     return this.driver.findElement(By.xpath('//ul[@id="messages-scroll"]'))
   }
 
-  async messagesGroup() {
-    const messagesList = await this.messagesList
-    return await messagesList.findElement(By.css('li'))
-  }
-
-  async messagesGroupContent() {
-    const messagesGroup = await this.messagesGroup()
-    return await messagesGroup.findElement(By.xpath('//p[@data-testid="/messagesGroupContent-/"]'))
-  }
-
   async waitForUserMessage(username: string, messageContent: string) {
     console.log(`Waiting for user "${username}" message "${messageContent}"`)
     return this.driver.wait(async () => {
       const messages = await this.getUserMessages(username)
-      const hasMessage = messages.find(async msg => {
-        const messageText = await msg.getText()
-        console.log(`got message "${messageText}"`)
-        return messageText.includes(messageContent)
-      })
-      return hasMessage
+      for (const element of messages) {
+        const text = await element.getText()
+        console.log(`Potential message with text: ${text}`)
+        if (text.includes(messageContent)) {
+          console.log(`Found message with matching text ${text}`)
+          return element
+        }
+      }
+      throw logAndReturnError(`No message found for user ${username} and message content ${messageContent}`)
     })
   }
 
@@ -362,15 +374,74 @@ export class Channel {
     return this.driver.wait(until.elementLocated(By.xpath('//*[@data-testid="messageInput"]')))
   }
 
-  async sendMessage(message: string) {
+  async sendMessage(message: string, username: string): Promise<MessageIds> {
     const communityNameInput = await this.messageInput
     await communityNameInput.sendKeys(message)
     await communityNameInput.sendKeys(Key.ENTER)
-    await new Promise<void>(resolve =>
-      setTimeout(() => {
-        resolve()
-      }, 5000)
-    )
+    await sleep(5000)
+    return this.getMessageIdsByText(message, username)
+  }
+
+  async getMessageIdsByText(message: string, username: string): Promise<MessageIds> {
+    const messageElement = await this.waitForUserMessage(username, message)
+    if (!messageElement) {
+      throw logAndReturnError(`No message element found for message ${message}`)
+    }
+
+    let testId = await messageElement.getAttribute('data-testid')
+    console.log(`Data Test ID for message content: ${testId}`)
+    let testIdSplit = testId.split('-')
+    const parentMessageId = testIdSplit[testIdSplit.length - 1]
+
+    const contentElement = await this.waitForMessageContentByText(message, messageElement)
+    if (!contentElement) {
+      throw logAndReturnError(`No message content element found for message content ${message}`)
+    }
+
+    testId = await contentElement.getAttribute('data-testid')
+    console.log(`Data Test ID for message content: ${testId}`)
+    testIdSplit = testId.split('-')
+    const messageId = testIdSplit[testIdSplit.length - 1]
+    return {
+      messageId,
+      parentMessageId,
+    }
+  }
+
+  async verifyMessageSentStatus(messageIds: MessageIds, username: string, expectedUnsent: boolean): Promise<void> {
+    await sleep(3000)
+    const sendingAsExpected = await this.waitForSending(username, messageIds.parentMessageId, expectedUnsent)
+    if (!sendingAsExpected) {
+      throw logAndReturnError(
+        `Sending... element presence was expected to be ${expectedUnsent} due to unsent being expected to be ${expectedUnsent}`
+      )
+    }
+
+    const expectedOpacity = expectedUnsent ? '0.5' : '1'
+
+    const avatar = await this.waitForAvatar(username, messageIds.parentMessageId)
+    const avatarOpacity = await avatar.getCssValue('opacity')
+    if (avatarOpacity !== expectedOpacity) {
+      throw logAndReturnError(
+        `Opacity of avatar was expected to be ${expectedOpacity} due to unsent being expected to be ${expectedUnsent} but was ${avatarOpacity}`
+      )
+    }
+
+    const dateLabel = await this.waitForDateLabel(username, messageIds.parentMessageId)
+    const dateLabelOpacity = await dateLabel.getCssValue('opacity')
+    if (dateLabelOpacity !== expectedOpacity) {
+      throw logAndReturnError(
+        `Opacity of date label was expected to be ${expectedOpacity} due to unsent being expected to be ${expectedUnsent} but was ${dateLabelOpacity}`
+      )
+    }
+
+    const messageContent = await this.waitForMessageContentById(messageIds.messageId)
+    const messageContentOpacity = await messageContent.getCssValue('opacity')
+    if (messageContentOpacity != expectedOpacity) {
+      throw logAndReturnError(
+        `Opacity of message content was expected to be ${expectedOpacity} due to unsent being expected to be ${expectedUnsent} but was ${messageContentOpacity}`
+      )
+    }
   }
 
   async getUserMessages(username: string) {
@@ -404,6 +475,120 @@ export class Channel {
     })
   }
 
+  async waitForAvatar(username: string, messageId: string): Promise<WebElement> {
+    console.log(`Waiting for user's avatar with username ${username} for message with ID ${messageId}`)
+    const avatarElement = await this.driver.wait(
+      this.driver.findElement(By.xpath(`//*[contains(@data-testid, "userAvatar-${username}-${messageId}")]`))
+    )
+    if (avatarElement) {
+      console.log(`Found user's avatar with username ${username} for message with ID ${messageId}`)
+      return avatarElement
+    }
+
+    throw logAndReturnError(`Failed to find user's avatar with username ${username} for message with ID ${messageId}`)
+  }
+
+  async waitForDateLabel(username: string, messageId: string): Promise<WebElement> {
+    console.log(`Waiting for date for message with ID ${messageId}`)
+    const dateElement = await this.driver.wait(
+      this.driver.findElement(By.xpath(`//*[contains(@data-testid, "messageDateLabel-${username}-${messageId}")]`))
+    )
+    if (dateElement) {
+      console.log(`Found date label for message with ID ${messageId}`)
+      return dateElement
+    }
+
+    throw logAndReturnError(`Failed to find date label for message with ID ${messageId}`)
+  }
+
+  async waitForMessageContentById(messageId: string): Promise<WebElement> {
+    console.log(`Waiting for content for message with ID ${messageId}`)
+    const messageContentElement = await this.driver.wait(
+      this.driver.findElement(By.xpath(`//*[contains(@data-testid, "messagesGroupContent-${messageId}")]`))
+    )
+    if (messageContentElement) {
+      console.log(`Found content for message with ID ${messageId}`)
+      return messageContentElement
+    }
+
+    throw logAndReturnError(`Failed to find content for message with ID ${messageId}`)
+  }
+
+  async waitForMessageContentByText(messageContent: string, messageElement: WebElement): Promise<WebElement> {
+    console.log(`Waiting for content for message with text ${messageContent}`)
+    const messageContentElements = await this.driver.wait(
+      messageElement.findElements(By.xpath(`//*[contains(@data-testid, "messagesGroupContent-")]`))
+    )
+    for (const element of messageContentElements) {
+      console.log(await element.getId())
+      const text = await element.getText()
+      console.log(`Testing content: ${messageContent}`)
+      if (text.includes(messageContent)) {
+        console.log(`Found content element for message with text ${messageContent}`)
+        return element
+      }
+    }
+
+    throw logAndReturnError(`Failed to find content for message with content ${messageContent}`)
+  }
+
+  async waitForSending(username: string, messageId: string, expected: boolean): Promise<boolean> {
+    const testId = `unsent-sending-${username}-${messageId}`
+    console.log(`Waiting for 'sending...' element for message with data-testid ${testId}`)
+    try {
+      await this.driver.wait(this.driver.findElement(By.xpath(`//div[contains(@data-testid, "${testId}")]`)))
+      if (!expected) {
+        console.error(`Found 'sending...' element for message with ID ${messageId} but didn't expect to`)
+        return false
+      }
+      return true
+    } catch (e) {
+      if (e instanceof error.NoSuchElementError) {
+        if (expected) {
+          console.error(`Failed to find 'sending...' element for message with ID ${messageId} but expected to`)
+          return false
+        }
+        return true
+      }
+      console.error(`Error occurred while finding 'sending...' element for message with ID ${messageId}`, e)
+      return false
+    }
+  }
+
+  async waitForConnectionStatus(expected: boolean): Promise<boolean> {
+    console.log(
+      `Waiting for connection status element for channel with name ${this.name} with expected presence = ${expected}`
+    )
+    try {
+      const element = await this.driver.wait(
+        this.driver.findElement(By.xpath(`//*[contains(@data-testid, "quietTryingToConnect-${this.name}")]`))
+      )
+      const elementDisplayed = await element.isDisplayed()
+      if (elementDisplayed && !expected) {
+        console.error(
+          `Found connection status element for channel with name ${this.name} and it was displayed but didn't expect to see it`
+        )
+        return false
+      } else if (!elementDisplayed && expected) {
+        console.error(
+          `Found connection status element for channel with name ${this.name} and it was not displayed but expected to see it`
+        )
+        return false
+      }
+      return true
+    } catch (e) {
+      if (e instanceof error.NoSuchElementError) {
+        if (expected) {
+          console.error(`Failed to find connection status element for channel with name ${this.name} but expected to`)
+          return false
+        }
+        return true
+      }
+      console.error(`Error occurred while finding connection status element for channel with name ${this.name}`, e)
+      return false
+    }
+  }
+
   async waitForLabelsNotPresent(username: string) {
     console.log(`Waiting for user's "${username}" label to not be present`)
     await this.driver.wait(async () => {
diff --git a/packages/e2e-tests/src/tests/backwardsCompatibility.test.ts b/packages/e2e-tests/src/tests/backwardsCompatibility.test.ts
index e238cbb81a..3bffc4ae42 100644
--- a/packages/e2e-tests/src/tests/backwardsCompatibility.test.ts
+++ b/packages/e2e-tests/src/tests/backwardsCompatibility.test.ts
@@ -8,6 +8,7 @@ import {
   RegisterUsernameModal,
   Sidebar,
 } from '../selectors'
+import { MessageIds } from '../types'
 import { BACKWARD_COMPATIBILITY_BASE_VERSION, BuildSetup, copyInstallerFile, downloadInstaller } from '../utils'
 
 jest.setTimeout(1200000)
@@ -18,6 +19,8 @@ describe('Backwards Compatibility', () => {
   let secondChannel: Channel
   let messagesToCompare: WebElement[]
   let sidebar: Sidebar
+  let generalChannelMessageIds: MessageIds
+  let secondChannelMessageIds: MessageIds
 
   const dataDir = `e2e_${(Math.random() * 10 ** 18).toString(36)}`
   const communityName = 'testcommunity'
@@ -98,12 +101,18 @@ describe('Backwards Compatibility', () => {
       expect(settingVersion).toEqual(BACKWARD_COMPATIBILITY_BASE_VERSION)
       await settingsModal.close()
     })
-    it('Sends a message', async () => {
+
+    it("Owner doesn't see the connection status element in general channel", async () => {
+      const correctConnectionStatusElementPresence = await generalChannel.waitForConnectionStatus(false)
+      expect(correctConnectionStatusElementPresence).toBe(true)
+    })
+
+    it('Owner sends a message in the general channel', async () => {
       const isMessageInput = await generalChannel.messageInput.isDisplayed()
       expect(isMessageInput).toBeTruthy()
-      await generalChannel.sendMessage(ownerMessages[0])
+      generalChannelMessageIds = await generalChannel.sendMessage(ownerMessages[0], ownerUsername)
     })
-    it('Sent message is visible on general channel', async () => {
+    it('Sent message is visible on general channel for owner', async () => {
       const messages = await generalChannel.getUserMessages(ownerUsername)
       const text = await messages[1].getText()
       expect(text).toEqual(ownerMessages[0])
@@ -119,22 +128,28 @@ describe('Backwards Compatibility', () => {
       secondChannel = new Channel(ownerAppOldVersion.driver, newChannelName)
       const isMessageInput = await secondChannel.messageInput.isDisplayed()
       expect(isMessageInput).toBeTruthy()
-      await secondChannel.sendMessage(ownerMessages[1])
+      secondChannelMessageIds = await secondChannel.sendMessage(ownerMessages[1], ownerUsername)
     })
-    it('Message is visible in second channel', async () => {
+
+    it("Owner doesn't see the connection status element in second channel", async () => {
+      const correctConnectionStatusElementPresence = await secondChannel.waitForConnectionStatus(false)
+      expect(correctConnectionStatusElementPresence).toBe(true)
+    })
+
+    it('Message is visible in second channel for owner', async () => {
       const messages = await secondChannel.getUserMessages(ownerUsername)
       const text = await messages[1].getText()
       expect(text).toEqual(ownerMessages[1])
     })
 
-    it(`User sends another ${loopMessages.length} messages to second channel`, async () => {
+    it(`Owner sends another ${loopMessages.length} messages to second channel`, async () => {
       for (const message of loopMessages) {
-        await secondChannel.sendMessage(message)
+        await secondChannel.sendMessage(message, ownerUsername)
       }
 
       messagesToCompare = await secondChannel.getUserMessages(ownerUsername)
     })
-    it('User closes the old app', async () => {
+    it('Owner closes the old app', async () => {
       await ownerAppOldVersion.close()
       await new Promise<void>(resolve => setTimeout(() => resolve(), 5000))
     })
@@ -155,7 +170,7 @@ describe('Backwards Compatibility', () => {
       })
     }
 
-    it('Owener sees general channel', async () => {
+    it('Owner sees general channel', async () => {
       console.log('New version', 3)
       generalChannel = new Channel(ownerAppNewVersion.driver, 'general')
       const isGeneralChannel = await generalChannel.element.isDisplayed()
@@ -164,6 +179,15 @@ describe('Backwards Compatibility', () => {
       expect(generalChannelText).toEqual('# general')
     })
 
+    it('Owner sees correct sent status on message in general channel', async () => {
+      await generalChannel.verifyMessageSentStatus(generalChannelMessageIds, ownerUsername, false)
+    })
+
+    it("Owner doesn't see the connection status element in general channel on new version", async () => {
+      const correctConnectionStatusElementPresence = await generalChannel.waitForConnectionStatus(false)
+      expect(correctConnectionStatusElementPresence).toBe(true)
+    })
+
     it('Confirm that the opened app is the latest version', async () => {
       console.log('New version', 4)
       await new Promise<void>(resolve => setTimeout(() => resolve(), 10000))
@@ -186,5 +210,14 @@ describe('Backwards Compatibility', () => {
       const currentMessages = await secondChannel.getUserMessages(ownerUsername)
       expect(currentMessages.length).toEqual(messagesToCompare.length)
     })
+
+    it('Owner sees correct sent status on message in second channel', async () => {
+      await secondChannel.verifyMessageSentStatus(secondChannelMessageIds, ownerUsername, false)
+    })
+
+    it("Owner doesn't see the connection status element in second channel on new version", async () => {
+      const correctConnectionStatusElementPresence = await secondChannel.waitForConnectionStatus(false)
+      expect(correctConnectionStatusElementPresence).toBe(true)
+    })
   })
 })
diff --git a/packages/e2e-tests/src/tests/invitationLink.test.ts b/packages/e2e-tests/src/tests/invitationLink.test.ts
index 321bc77489..50a03b30e2 100644
--- a/packages/e2e-tests/src/tests/invitationLink.test.ts
+++ b/packages/e2e-tests/src/tests/invitationLink.test.ts
@@ -192,12 +192,11 @@ describe('New user joins using invitation link while having app opened', () => {
       const generalChannel = new Channel(ownerApp.driver, 'general')
       await generalChannel.element.isDisplayed()
 
-      const hasMessage = await generalChannel.waitForUserMessage(
-        joiningUserUsername,
-        userJoinedMessage(joiningUserUsername)
+      const messageIds = await generalChannel.getMessageIdsByText(
+        `@${joiningUserUsername} has joined and will be registered soon. 🎉 Learn more`,
+        joiningUserUsername
       )
-      const isMessageDisplayed = await hasMessage?.isDisplayed()
-      expect(isMessageDisplayed).toBeTruthy()
+      await generalChannel.verifyMessageSentStatus(messageIds, joiningUserUsername, false)
     })
   })
 })
diff --git a/packages/e2e-tests/src/tests/multipleClients.test.ts b/packages/e2e-tests/src/tests/multipleClients.test.ts
index 59fdf2ea94..470a5789e6 100644
--- a/packages/e2e-tests/src/tests/multipleClients.test.ts
+++ b/packages/e2e-tests/src/tests/multipleClients.test.ts
@@ -9,6 +9,7 @@ import {
   Sidebar,
 } from '../selectors'
 import logger from '../logger'
+import { promiseWithRetries, sleep } from '../utils'
 import { UserTestData } from '../types'
 const log = logger('ManyClients')
 
@@ -18,6 +19,7 @@ describe('Multiple Clients', () => {
   let generalChannelUser1: Channel
   let generalChannelUser3: Channel
 
+  let secondChannelOwner: Channel
   let secondChannelUser1: Channel
 
   let thirdChannelOwner: Channel
@@ -34,6 +36,7 @@ describe('Multiple Clients', () => {
   const communityName = 'testcommunity'
   const displayedCommunityName = 'Testcommunity'
   const newChannelName = 'mid-night-club'
+  const generalChannelName = 'general'
   const thirdChannelName = 'delete-this'
 
   const sleep = async (time = 1000) => {
@@ -54,7 +57,7 @@ describe('Multiple Clients', () => {
       },
       user1: {
         username: 'user-joining-1',
-        messages: ['Nice to meet you all'],
+        messages: ['Nice to meet you all', 'This appears unsent'],
         app: commonApp,
       },
       user2: {
@@ -82,344 +85,396 @@ describe('Multiple Clients', () => {
   })
 
   describe('Stages:', () => {
-    it('Owner opens the app', async () => {
-      await users.owner.app.open()
-    })
+    describe('Owner Opens App', () => {
+      it('Owner opens the app', async () => {
+        await users.owner.app.openWithRetries()
+      })
 
-    it('Owner sees "join community" modal and switches to "create community" modal', async () => {
-      const joinModal = new JoinCommunityModal(users.owner.app.driver)
-      const isJoinModal = await joinModal.element.isDisplayed()
-      expect(isJoinModal).toBeTruthy()
-      await joinModal.switchToCreateCommunity()
-    })
-    it('Owner submits valid community name', async () => {
-      const createModal = new CreateCommunityModal(users.owner.app.driver)
-      const isCreateModal = await createModal.element.isDisplayed()
-      expect(isCreateModal).toBeTruthy()
-      await createModal.typeCommunityName(communityName)
-      await createModal.submit()
-    })
-    it('Owner sees "register username" modal and submits valid username', async () => {
-      const registerModal = new RegisterUsernameModal(users.owner.app.driver)
-      const isRegisterModal = await registerModal.element.isDisplayed()
-      expect(isRegisterModal).toBeTruthy()
-      await registerModal.typeUsername(users.owner.username)
-      await registerModal.submit()
-    })
-    it('Owner registers successfully and sees general channel', async () => {
-      generalChannelOwner = new Channel(users.owner.app.driver, 'general')
-      const isGeneralChannel = await generalChannelOwner.element.isDisplayed()
-      const generalChannelText = await generalChannelOwner.element.getText()
-      expect(isGeneralChannel).toBeTruthy()
-      expect(generalChannelText).toEqual('# general')
-    })
-    it('Owner sends a message', async () => {
-      const isMessageInput = await generalChannelOwner.messageInput.isDisplayed()
-      expect(isMessageInput).toBeTruthy()
-      await generalChannelOwner.sendMessage(users.owner.messages[0])
-    })
-    it("Owner's message is visible on channel", async () => {
-      const messages = await generalChannelOwner.getUserMessages(users.owner.username)
-      const text = await messages[1].getText()
-      expect(text).toEqual(users.owner.messages[0])
-    })
-    it('Owner opens the settings tab and gets an invitation code', async () => {
-      const settingsModal = await new Sidebar(users.owner.app.driver).openSettings()
-      const isSettingsModal = await settingsModal.element.isDisplayed()
-      expect(isSettingsModal).toBeTruthy()
-      await sleep(2000)
-      await settingsModal.switchTab('invite') // TODO: Fix - the invite tab should be default for the owner
-      await sleep(2000)
-      const invitationCodeElement = await settingsModal.invitationCode()
-      await sleep(2000)
-      invitationCode = await invitationCodeElement.getText()
-      await sleep(2000)
-      console.log({ invitationCode })
-      expect(invitationCode).not.toBeUndefined()
-      log('Received invitation code:', invitationCode)
-      await settingsModal.close()
+      it('Owner sees "join community" modal and switches to "create community" modal', async () => {
+        const joinModal = new JoinCommunityModal(users.owner.app.driver)
+        const isJoinModal = await joinModal.element.isDisplayed()
+        expect(isJoinModal).toBeTruthy()
+        await joinModal.switchToCreateCommunity()
+      })
+      it('Owner submits valid community name', async () => {
+        const createModal = new CreateCommunityModal(users.owner.app.driver)
+        const isCreateModal = await createModal.element.isDisplayed()
+        expect(isCreateModal).toBeTruthy()
+        await createModal.typeCommunityName(communityName)
+        await createModal.submit()
+      })
+      it('Owner sees "register username" modal and submits valid username', async () => {
+        const registerModal = new RegisterUsernameModal(users.owner.app.driver)
+        const isRegisterModal = await registerModal.element.isDisplayed()
+        expect(isRegisterModal).toBeTruthy()
+        await registerModal.typeUsername(users.owner.username)
+        await registerModal.submit()
+      })
+      it('Owner registers successfully and sees general channel', async () => {
+        generalChannelOwner = new Channel(users.owner.app.driver, generalChannelName)
+        const isGeneralChannel = await generalChannelOwner.element.isDisplayed()
+        const generalChannelText = await generalChannelOwner.element.getText()
+        expect(isGeneralChannel).toBeTruthy()
+        expect(generalChannelText).toEqual('# general')
+      })
+      it('Owner sends a message', async () => {
+        const isMessageInput = await generalChannelOwner.messageInput.isDisplayed()
+        expect(isMessageInput).toBeTruthy()
+        const messageIds = await generalChannelOwner.sendMessage(users.owner.messages[0], users.owner.username)
+        await generalChannelOwner.verifyMessageSentStatus(messageIds, users.owner.username, false)
+      })
+      it("Owner's message is visible on channel", async () => {
+        const messages = await generalChannelOwner.getUserMessages(users.owner.username)
+        const text = await messages[1].getText()
+        expect(text).toEqual(users.owner.messages[0])
+      })
+      it('Owner opens the settings tab and gets an invitation code', async () => {
+        const settingsModal = await new Sidebar(users.owner.app.driver).openSettings()
+        const isSettingsModal = await settingsModal.element.isDisplayed()
+        expect(isSettingsModal).toBeTruthy()
+        await sleep(2000)
+        await settingsModal.switchTab('invite') // TODO: Fix - the invite tab should be default for the owner
+        await sleep(2000)
+        const invitationCodeElement = await settingsModal.invitationCode()
+        await sleep(2000)
+        invitationCode = await invitationCodeElement.getText()
+        await sleep(2000)
+        console.log({ invitationCode })
+        expect(invitationCode).not.toBeUndefined()
+        log('Received invitation code:', invitationCode)
+        await settingsModal.close()
+      })
     })
 
-    it('First user opens the app', async () => {
-      console.log('Second client')
-      await users.user1.app.open()
-    })
+    describe('First User Joins Community', () => {
+      it('First user opens the app', async () => {
+        console.log('Second client')
+        await users.user1.app.openWithRetries()
+      })
 
-    it('First user submits invitation code received from owner', async () => {
-      console.log('new user - 3')
-      const joinCommunityModal = new JoinCommunityModal(users.user1.app.driver)
-      const isJoinCommunityModal = await joinCommunityModal.element.isDisplayed()
-      expect(isJoinCommunityModal).toBeTruthy()
-      console.log({ invitationCode })
-      await joinCommunityModal.typeCommunityCode(invitationCode)
-      await joinCommunityModal.submit()
-    })
+      it('First user submits invitation code received from owner', async () => {
+        console.log('new user - 3')
+        const joinCommunityModal = new JoinCommunityModal(users.user1.app.driver)
+        const isJoinCommunityModal = await joinCommunityModal.element.isDisplayed()
+        expect(isJoinCommunityModal).toBeTruthy()
+        console.log({ invitationCode })
+        await joinCommunityModal.typeCommunityCode(invitationCode)
+        await joinCommunityModal.submit()
+      })
 
-    it('First user submits valid username', async () => {
-      console.log('new user - 5')
-      const registerModal = new RegisterUsernameModal(users.user1.app.driver)
-      const isRegisterModal = await registerModal.element.isDisplayed()
-      expect(isRegisterModal).toBeTruthy()
-      await registerModal.clearInput()
-      await registerModal.typeUsername(users.user1.username)
-      await registerModal.submit()
-      console.time(`[${users.user1.app.name}] '${users.user1.username}' joining community time`)
-    })
+      it('First user submits valid username', async () => {
+        const app = users.user1.app
+        console.log('new user - 5')
+        const registerModal = new RegisterUsernameModal(app.driver)
+        const isRegisterModal = await registerModal.element.isDisplayed()
+        expect(isRegisterModal).toBeTruthy()
+        await registerModal.clearInput()
+        await registerModal.typeUsername(users.user1.username)
+        await registerModal.submit()
+        console.time(`[${app.name}] '${users.user1.username}' joining community time`)
+      })
 
-    it('First user joins successfully sees general channel and sends a message', async () => {
-      console.log('new user - 7')
-      generalChannelUser1 = new Channel(users.user1.app.driver, 'general')
-      await generalChannelUser1.element.isDisplayed()
-      const isMessageInput2 = await generalChannelUser1.messageInput.isDisplayed()
-      expect(isMessageInput2).toBeTruthy()
-      console.timeEnd(`[${users.user1.app.name}] '${users.user1.username}' joining community time`)
-      console.log('FETCHING CHANNEL MESSAGES!')
-      await new Promise<void>(resolve =>
-        setTimeout(() => {
-          resolve()
-        }, 15000)
-      )
-      await generalChannelUser1.sendMessage(users.user1.messages[0])
-    })
-    it("First user's sent message is visible in a channel", async () => {
-      const messages2 = await generalChannelUser1.getUserMessages(users.user1.username)
-      const messages1 = await generalChannelUser1.getUserMessages(users.owner.username)
-      console.log({ messages1, messages2 })
-      const text2 = await messages2[1].getText()
-      expect(text2).toEqual(users.user1.messages[0])
-    })
-    it('First user opens the settings tab and copies updated invitation code', async () => {
-      const settingsModal = await new Sidebar(users.user1.app.driver).openSettings()
-      const isSettingsModal = await settingsModal.element.isDisplayed()
-      expect(isSettingsModal).toBeTruthy()
-      await sleep(2000)
-      await settingsModal.switchTab('invite')
-      await sleep(2000)
-      const invitationCodeElement = await settingsModal.invitationCode()
-      await sleep(2000)
-      invitationCode = await invitationCodeElement.getText()
-      await sleep(2000)
-      console.log(`${invitationCode} copied from non owner`)
-      expect(invitationCode).not.toBeUndefined()
-      await settingsModal.close()
+      it('First user joins successfully sees general channel and sends a message', async () => {
+        console.log('new user - 7')
+        const app = users.user1.app
+        const loadNewUser = async () => {
+          generalChannelUser1 = new Channel(app.driver, generalChannelName)
+          await generalChannelUser1.element.isDisplayed()
+          const isMessageInput2 = await generalChannelUser1.messageInput.isDisplayed()
+          expect(isMessageInput2).toBeTruthy()
+          console.timeEnd(`[${app.name}] '${users.user1.username}' joining community time`)
+        }
+
+        const retryConfig = app.retryConfig
+        const failureReason = `Failed to load app for new user ${users.user1.username} within ${retryConfig.timeoutMs}ms`
+        const onTimeout = async () => {
+          await app.close()
+          await app.open()
+        }
+        await promiseWithRetries(loadNewUser(), failureReason, retryConfig, onTimeout)
+
+        console.log('FETCHING CHANNEL MESSAGES!')
+        await sleep(20000)
+
+        const messageIds = await generalChannelUser1.sendMessage(users.user1.messages[0], users.user1.username)
+        await generalChannelUser1.verifyMessageSentStatus(messageIds, users.user1.username, false)
+      })
+      it("First user's sent message is visible in a channel", async () => {
+        const messages1 = await generalChannelUser1.getUserMessages(users.owner.username)
+        const usersMessageId = await generalChannelUser1.getMessageIdsByText(
+          users.user1.messages[0],
+          users.user1.username
+        )
+        console.log({ messages1, usersMessageId })
+      })
+      it('First user opens the settings tab and copies updated invitation code', async () => {
+        const settingsModal = await new Sidebar(users.user1.app.driver).openSettings()
+        const isSettingsModal = await settingsModal.element.isDisplayed()
+        expect(isSettingsModal).toBeTruthy()
+        await sleep(2000)
+        await settingsModal.switchTab('invite')
+        await sleep(2000)
+        const invitationCodeElement = await settingsModal.invitationCode()
+        await sleep(2000)
+        invitationCode = await invitationCodeElement.getText()
+        await sleep(2000)
+        console.log(`${invitationCode} copied from non owner`)
+        expect(invitationCode).not.toBeUndefined()
+        await settingsModal.close()
+      })
     })
 
-    it('Owner goes offline', async () => {
-      await users.owner.app.close()
-    })
+    describe('Owner Leaves', () => {
+      it('Owner goes offline', async () => {
+        await users.owner.app.close()
+        await sleep(30000)
+      })
 
-    it('Second user opens the app', async () => {
-      console.log('Third client')
-      await users.user3.app.open()
-      const debugModal = new DebugModeModal(users.user3.app.driver)
-      await debugModal.close()
-    })
+      it('User sees the connection status element in general channel', async () => {
+        const correctConnectionStatusElementPresence = await generalChannelUser1.waitForConnectionStatus(true)
+        expect(correctConnectionStatusElementPresence).toBe(true)
+      })
 
-    it('Second user starts to join when owner is offline', async () => {
-      const joinCommunityModal = new JoinCommunityModal(users.user3.app.driver)
-      const isJoinCommunityModal = await joinCommunityModal.element.isDisplayed()
-      expect(isJoinCommunityModal).toBeTruthy()
-      console.log({ invitationCode })
-      await joinCommunityModal.typeCommunityCode(invitationCode)
-      await joinCommunityModal.submit()
-    })
+      it(`First user sends an unsent message`, async () => {
+        const messageIds = await generalChannelUser1.sendMessage(users.user1.messages[1], users.user1.username)
+        await generalChannelUser1.verifyMessageSentStatus(messageIds, users.user1.username, true)
+      })
 
-    it('Second user submits non-valid, duplicated username', async () => {
-      console.log('duplicated user - 1')
-      const registerModal = new RegisterUsernameModal(users.user3.app.driver)
-      const isRegisterModal = await registerModal.element.isDisplayed()
-      expect(isRegisterModal).toBeTruthy()
-      await registerModal.clearInput()
-      await registerModal.typeUsername(users.user1.username)
-      await registerModal.submit()
-      console.time(`[${users.user3.app.name}] '${users.user1.username}' duplicated joining community time`)
+      it("First user's unsent message is visible in a channel", async () => {
+        await generalChannelUser1.getUserMessages(users.owner.username)
+        await generalChannelUser1.getMessageIdsByText(users.user1.messages[1], users.user1.username)
+      })
     })
 
-    it('Second user submits valid username', async () => {
-      console.log('duplicated user - 2')
-      const registerModal = new RegisterUsernameModal(users.user3.app.driver)
-      const isRegisterModal = await registerModal.elementUsernameTaken.isDisplayed()
-      expect(isRegisterModal).toBeTruthy()
-      await registerModal.clearInput()
-      await registerModal.typeUsername(users.user3.username)
-      await registerModal.submitUsernameTaken()
-      console.time(`[${users.user3.app.name}] '${users.user3.username}' joining community time`)
-    })
+    describe('Second User Joins', () => {
+      it('Second user opens the app', async () => {
+        console.log('Third client')
+        await users.user3.app.openWithRetries()
+        const debugModal = new DebugModeModal(users.user3.app.driver)
+        await debugModal.close()
+      })
 
-    it('Second user sees general channel', async () => {
-      console.log('new user - 7')
-      generalChannelUser3 = new Channel(users.user3.app.driver, 'general')
-      await generalChannelUser3.element.isDisplayed()
-      const isMessageInput = await generalChannelUser3.messageInput.isDisplayed()
-      expect(isMessageInput).toBeTruthy()
-      console.timeEnd(`[${users.user3.app.name}] '${users.user3.username}' joining community time`)
-    })
+      it('Second user starts to join when owner is offline', async () => {
+        const app = users.user3.app
+        const joinCommunityModal = new JoinCommunityModal(app.driver)
+        const isJoinCommunityModal = await joinCommunityModal.element.isDisplayed()
+        expect(isJoinCommunityModal).toBeTruthy()
+        console.log({ invitationCode })
+        await joinCommunityModal.typeCommunityCode(invitationCode)
+        await joinCommunityModal.submit()
+      })
 
-    it('Second user can send a message, they see their message tagged as "unregistered"', async () => {
-      console.log('Second guest FETCHING CHANNEL MESSAGES!')
-      await new Promise<void>(resolve =>
-        setTimeout(() => {
-          resolve()
-        }, 15000)
-      )
-      await generalChannelUser3.sendMessage(users.user3.messages[0])
-      generalChannelUser3 = new Channel(users.user3.app.driver, 'general')
-      await generalChannelUser3.waitForLabel(users.user3.username, 'Unregistered')
-    })
+      it('Second user submits non-valid, duplicated username', async () => {
+        console.log('duplicated user - 1')
+        const registerModal = new RegisterUsernameModal(users.user3.app.driver)
+        const isRegisterModal = await registerModal.element.isDisplayed()
+        expect(isRegisterModal).toBeTruthy()
+        await registerModal.clearInput()
+        await registerModal.typeUsername(users.user1.username)
+        await registerModal.submit()
+        console.time(`[${users.user3.app.name}] '${users.user1.username}' duplicated joining community time`)
+      })
 
-    it('First user sees that unregistered user\'s messages are marked as "unregistered"', async () => {
-      await generalChannelUser1.waitForLabel(users.user3.username, 'Unregistered')
-    })
+      it('Second user submits valid username', async () => {
+        const app = users.user3.app
+        console.log('duplicated user - 2')
+        const registerModal = new RegisterUsernameModal(app.driver)
+        const isRegisterModal = await registerModal.elementUsernameTaken.isDisplayed()
+        expect(isRegisterModal).toBeTruthy()
+        await registerModal.clearInput()
+        await registerModal.typeUsername(users.user3.username)
+        await registerModal.submitUsernameTaken()
+        console.time(`[${app.name}] '${users.user3.username}' joining community time`)
+      })
 
-    it('Owner goes back online', async () => {
-      await users.owner.app.open()
-      const debugModal = new DebugModeModal(users.owner.app.driver)
-      await debugModal.close()
-    })
+      it('Second user sees general channel', async () => {
+        console.log('new user - 7')
+        const app = users.user3.app
+        const loadNewUser = async () => {
+          generalChannelUser3 = new Channel(app.driver, generalChannelName)
+          await generalChannelUser3.element.isDisplayed()
+          const isMessageInput = await generalChannelUser3.messageInput.isDisplayed()
+          expect(isMessageInput).toBeTruthy()
+          console.timeEnd(`[${app.name}] '${users.user3.username}' joining community time`)
+        }
+
+        const retryConfig = app.retryConfig
+        const failureReason = `Failed to load app for new user ${users.user3.username} within ${retryConfig.timeoutMs}ms`
+        const onTimeout = async () => {
+          await app.close()
+          await app.open()
+        }
+        await promiseWithRetries(loadNewUser(), failureReason, retryConfig, onTimeout)
+      })
 
-    it('Second user receives certificate, they can see confirmation that they registered', async () => {
-      await generalChannelUser3.waitForUserMessage(
-        users.owner.username,
-        `@${users.user3.username} has joined ${displayedCommunityName}!`
-      )
-    })
+      it("Second user doesn't see the connection status element in general channel", async () => {
+        const correctConnectionStatusElementPresence = await generalChannelUser3.waitForConnectionStatus(false)
+        expect(correctConnectionStatusElementPresence).toBe(true)
+      })
 
-    it('"Unregistered" label is removed from second user\'s messages', async () => {
-      generalChannelOwner = new Channel(users.owner.app.driver, 'general')
-      await generalChannelOwner.waitForLabelsNotPresent(users.user3.username)
-    })
+      it('Second user sees "unsent" message from first user as sent', async () => {
+        await sleep(30000)
+        const user1UnsentMessageId = await generalChannelUser3.getMessageIdsByText(
+          users.user1.messages[1],
+          users.user1.username
+        )
+        await generalChannelUser3.verifyMessageSentStatus(user1UnsentMessageId, users.user1.username, false)
+      })
 
-    it('Channel creation - Owner creates second channel', async () => {
-      sidebarOwner = new Sidebar(users.owner.app.driver)
-      await sidebarOwner.addNewChannel(newChannelName)
-      await sidebarOwner.switchChannel(newChannelName)
-      const channels = await sidebarOwner.getChannelList()
-      expect(channels.length).toEqual(2)
-    })
-    it('Channel creation - Owner sends message in second channel', async () => {
-      const newChannel = new Channel(users.owner.app.driver, newChannelName)
-      const isMessageInput = await newChannel.messageInput.isDisplayed()
-      expect(isMessageInput).toBeTruthy()
-      await newChannel.sendMessage(users.owner.messages[1])
-    })
-    it('Channel creation - User reads message in second channel', async () => {
-      sidebarUser1 = new Sidebar(users.user1.app.driver)
-      await sidebarUser1.switchChannel(newChannelName)
-      secondChannelUser1 = new Channel(users.user1.app.driver, newChannelName)
-      await new Promise<void>(resolve =>
-        setTimeout(() => {
-          resolve()
-        }, 2000)
-      )
-      await secondChannelUser1.waitForUserMessage(users.owner.username, users.owner.messages[1])
-    })
-    it('Channel deletion - Owner deletes second channel', async () => {
-      channelContextMenuOwner = new ChannelContextMenu(users.owner.app.driver)
-      await channelContextMenuOwner.openMenu()
-      await channelContextMenuOwner.openDeletionChannelModal()
-      await channelContextMenuOwner.deleteChannel()
-      const channels = await sidebarOwner.getChannelList()
-      expect(channels.length).toEqual(1)
-    })
-    it('Channel deletion - User sees info about channel deletion in general channel', async () => {
-      await sleep(5000)
-      await generalChannelUser1.waitForUserMessage(
-        users.owner.username,
-        `@${users.owner.username} deleted #${newChannelName}`
-      )
-      await sidebarUser1.waitForChannels(['general'])
-    })
+      it("First user doesn't see the connection status element in general channel", async () => {
+        const correctConnectionStatusElementPresence = await generalChannelUser1.waitForConnectionStatus(false)
+        expect(correctConnectionStatusElementPresence).toBe(true)
+      })
 
-    it('Channel deletion - User can create channel with the same name and is fresh channel', async () => {
-      await sidebarUser1.addNewChannel(newChannelName)
-      await sidebarUser1.switchChannel(newChannelName)
-      const messages = await secondChannelUser1.getUserMessages(users.user1.username)
-      expect(messages.length).toEqual(1)
-      await sidebarOwner.waitForChannels(['general', newChannelName])
-    })
+      it('First user now sees their "unsent" message as sent', async () => {
+        const user1UnsentMessageId = await generalChannelUser1.getMessageIdsByText(
+          users.user1.messages[1],
+          users.user1.username
+        )
+        await generalChannelUser1.verifyMessageSentStatus(user1UnsentMessageId, users.user1.username, false)
+      })
+
+      it('Second user can send a message, they see their message tagged as "unregistered"', async () => {
+        console.log('Second guest FETCHING CHANNEL MESSAGES!')
+        await sleep(15000)
+        const messageIds = await generalChannelUser3.sendMessage(users.user3.messages[0], users.user3.username)
+        generalChannelUser3 = new Channel(users.user3.app.driver, generalChannelName)
+        await generalChannelUser3.waitForLabel(users.user3.username, 'Unregistered')
+        await generalChannelUser3.verifyMessageSentStatus(messageIds, users.user3.username, false)
+      })
 
-    it('Channel deletion - Owner creates third channel', async () => {
-      await sidebarOwner.addNewChannel(thirdChannelName)
-      await sidebarOwner.switchChannel(thirdChannelName)
-      thirdChannelOwner = new Channel(users.owner.app.driver, thirdChannelName)
-      const messages = await thirdChannelOwner.getUserMessages(users.owner.username)
-      expect(messages.length).toEqual(1)
-      await sidebarUser1.waitForChannels(['general', newChannelName, thirdChannelName])
+      it('First user sees that unregistered user\'s messages are marked as "unregistered"', async () => {
+        const user3MessageId = await generalChannelUser1.getMessageIdsByText(
+          users.user3.messages[0],
+          users.user3.username
+        )
+        await generalChannelUser1.waitForLabel(users.user3.username, 'Unregistered')
+        await generalChannelUser1.verifyMessageSentStatus(user3MessageId, users.user3.username, false)
+      })
     })
 
-    // End of tests for Windows
-    if (process.platform !== 'win32') {
-      it('User 1 closes app', async () => {
-        console.log('User 1 closes app')
-        await users.user1.app?.close()
+    describe('Second User Registers', () => {
+      it('Owner goes back online', async () => {
+        await users.owner.app.openWithRetries()
+        const debugModal = new DebugModeModal(users.owner.app.driver)
+        await debugModal.close()
+        await sleep(30000)
       })
 
-      // Delete third channel while guest is absent
-      it('Channel deletion - Owner deletes third channel', async () => {
-        console.log('TEST 2.5')
-        await new Promise<void>(resolve => setTimeout(() => resolve(), 10000))
-        const isThirdChannel = await thirdChannelOwner.messageInput.isDisplayed()
-        expect(isThirdChannel).toBeTruthy()
-        await channelContextMenuOwner.openMenu()
-        await channelContextMenuOwner.openDeletionChannelModal()
-        await channelContextMenuOwner.deleteChannel()
-        await sidebarOwner.waitForChannels(['general', newChannelName])
+      // @isla - TODO: Uncomment and validate this test when we fix the issues causing it
+      // related to : https://github.com/TryQuiet/quiet/issues/1838, https://github.com/TryQuiet/quiet/issues/2321
+      xit('Second user receives certificate, they can see confirmation that they registered', async () => {
+        const messageIds = await generalChannelUser3.getMessageIdsByText(
+          `@${users.user3.username} has joined and will be registered soon. 🎉 Learn more`,
+          users.user3.username
+        )
+        await generalChannelUser3.verifyMessageSentStatus(messageIds, users.user3.username, false)
       })
 
-      // Delete general channel while guest is absent
-      it('Channel deletion - Owner recreates general channel', async () => {
-        console.log('TEST 3')
-        await new Promise<void>(resolve => setTimeout(() => resolve(), 10000))
-        const isGeneralChannel = await generalChannelOwner.messageInput.isDisplayed()
-        expect(isGeneralChannel).toBeTruthy()
-        await channelContextMenuOwner.openMenu()
-        await channelContextMenuOwner.openDeletionChannelModal()
-        await channelContextMenuOwner.deleteChannel()
-        await sidebarOwner.waitForChannels(['general', newChannelName])
+      it('"Unregistered" label is removed from second user\'s messages', async () => {
+        generalChannelOwner = new Channel(users.owner.app.driver, generalChannelName)
+        await generalChannelOwner.waitForLabelsNotPresent(users.user3.username)
       })
+    })
 
-      it('User 1 re-opens app', async () => {
-        console.log('User 1 re-opens app')
-        await users.user1.app?.open()
-        await new Promise<void>(resolve => setTimeout(() => resolve(), 30000))
+    describe('Owner Creates New Channel', () => {
+      it('Owner creates second channel', async () => {
+        sidebarOwner = new Sidebar(users.owner.app.driver)
+        await sidebarOwner.addNewChannel(newChannelName)
+        await sidebarOwner.switchChannel(newChannelName)
+        const channels = await sidebarOwner.getChannelList()
+        expect(channels.length).toEqual(2)
       })
 
-      // Check correct channels replication
-      it('Channel deletion - User sees information about recreation general channel and see correct amount of messages (#2334)', async () => {
-        console.log('TESTING - ISSUE 2334')
-        generalChannelUser1 = new Channel(users.user1.app.driver, 'general')
-        await generalChannelUser1.element.isDisplayed()
-        console.timeEnd(`[${users.user1.app.name}] '${users.user2.username}' joining community time`)
-        await new Promise<void>(resolve =>
-          setTimeout(() => {
-            resolve()
-          }, 10000)
-        )
+      it('Owner sends message in second channel', async () => {
+        secondChannelOwner = new Channel(users.owner.app.driver, newChannelName)
+        const isMessageInput = await secondChannelOwner.messageInput.isDisplayed()
+        expect(isMessageInput).toBeTruthy()
+        await sleep(5000)
+        const messageIds = await secondChannelOwner.sendMessage(users.owner.messages[1], users.owner.username)
+        await secondChannelOwner.verifyMessageSentStatus(messageIds, users.owner.username, false)
+      })
 
-        await generalChannelUser1.waitForUserMessage(
-          users.owner.username,
-          `@${users.owner.username} deleted all messages in #general`
-        )
-        await generalChannelUser1.waitForUserMessage(
-          users.owner.username,
-          `@${users.owner.username} deleted #${thirdChannelName}`
+      it("Owner doesn't see the connection status element in second channel", async () => {
+        const correctConnectionStatusElementPresence = await secondChannelOwner.waitForConnectionStatus(false)
+        expect(correctConnectionStatusElementPresence).toBe(true)
+      })
+
+      it('User reads message in second channel', async () => {
+        sidebarUser1 = new Sidebar(users.user1.app.driver)
+        await sidebarUser1.switchChannel(newChannelName)
+        secondChannelUser1 = new Channel(users.user1.app.driver, newChannelName)
+        await sleep(2000)
+        const ownerMessageId = await secondChannelUser1.getMessageIdsByText(
+          users.owner.messages[1],
+          users.owner.username
         )
-        await generalChannelUser1.waitForUserMessage(
-          users.owner.username,
-          `@${users.user2.username} has joined Testcommunity! 🎉`
+        await secondChannelUser1.verifyMessageSentStatus(ownerMessageId, users.owner.username, false)
+      })
+
+      it("First user doesn't see the connection status element in second channel", async () => {
+        const correctConnectionStatusElementPresence = await secondChannelUser1.waitForConnectionStatus(false)
+        expect(correctConnectionStatusElementPresence).toBe(true)
+      })
+    })
+
+    describe('Channel Deletion', () => {
+      it('Owner deletes second channel', async () => {
+        channelContextMenuOwner = new ChannelContextMenu(users.owner.app.driver)
+        await channelContextMenuOwner.openMenu()
+        await channelContextMenuOwner.openDeletionChannelModal()
+        await channelContextMenuOwner.deleteChannel()
+        const channels = await sidebarOwner.getChannelList()
+        expect(channels.length).toEqual(1)
+      })
+
+      it('User sees info about channel deletion in general channel', async () => {
+        await sleep(5000)
+        const messageIds = await generalChannelUser1.getMessageIdsByText(
+          `@${users.owner.username} deleted #${newChannelName}`,
+          users.owner.username
         )
+        await generalChannelUser1.verifyMessageSentStatus(messageIds, users.owner.username, false)
       })
 
-      it('Leave community', async () => {
-        console.log('TEST 2')
-        const settingsModal = await new Sidebar(users.user1.app.driver).openSettings()
-        const isSettingsModal = await settingsModal.element.isDisplayed()
-        expect(isSettingsModal).toBeTruthy()
-        await settingsModal.openLeaveCommunityModal()
-        await settingsModal.leaveCommunityButton()
+      it('User can create channel with the same name and is fresh channel', async () => {
+        await sidebarUser1.addNewChannel(newChannelName)
+        await sidebarUser1.switchChannel(newChannelName)
+        const messages = await secondChannelUser1.getUserMessages(users.user1.username)
+        expect(messages.length).toEqual(1)
+        await sleep(2000)
+        const channels = await sidebarOwner.getChannelList()
+        expect(channels.length).toEqual(2)
       })
 
-      it('Leave community - Guest re-join to community successfully', async () => {
+      // End of tests for Windows
+      if (process.platform !== 'win32') {
+        it('Leave community', async () => {
+          console.log('TEST 2')
+          const settingsModal = await new Sidebar(users.user1.app.driver).openSettings()
+          const isSettingsModal = await settingsModal.element.isDisplayed()
+          expect(isSettingsModal).toBeTruthy()
+          await settingsModal.openLeaveCommunityModal()
+          await settingsModal.leaveCommunityButton()
+        })
+
+        // Delete general channel while guest is absent
+        it('Owner recreates general channel', async () => {
+          console.log('TEST 3')
+          await sleep(10000)
+          const isGeneralChannel = await generalChannelOwner.messageInput.isDisplayed()
+          expect(isGeneralChannel).toBeTruthy()
+          await channelContextMenuOwner.openMenu()
+          await channelContextMenuOwner.openDeletionChannelModal()
+          await channelContextMenuOwner.deleteChannel()
+          const channels = await sidebarOwner.getChannelList()
+          expect(channels.length).toEqual(2)
+        })
+      }
+    })
+
+    describe('Leave Community', () => {
+      it('Guest re-join to community successfully', async () => {
         console.log('TEST 4')
         const debugModal = new DebugModeModal(users.user1.app.driver)
         await debugModal.close()
@@ -429,7 +484,8 @@ describe('Multiple Clients', () => {
         await joinCommunityModal.typeCommunityCode(invitationCode)
         await joinCommunityModal.submit()
       })
-      it('Leave community - Guest registers new username', async () => {
+
+      it('Guest registers new username', async () => {
         console.log('TEST 5')
         const registerModal2 = new RegisterUsernameModal(users.user1.app.driver)
         const isRegisterModal2 = await registerModal2.element.isDisplayed()
@@ -440,47 +496,42 @@ describe('Multiple Clients', () => {
       })
 
       // Check correct channels replication
-      it('Channel deletion - User sees information about recreation general channel and see correct amount of messages', async () => {
+      it('User sees information about recreation general channel and see correct amount of messages', async () => {
         console.log('TEST 6')
-        generalChannelUser1 = new Channel(users.user1.app.driver, 'general')
+        generalChannelUser1 = new Channel(users.user1.app.driver, generalChannelName)
         await generalChannelUser1.element.isDisplayed()
         console.timeEnd(`[${users.user1.app.name}] '${users.user2.username}' joining community time`)
-        await new Promise<void>(resolve =>
-          setTimeout(() => {
-            resolve()
-          }, 10000)
-        )
+        await sleep(10000)
 
-        await generalChannelUser1.waitForUserMessage(
-          users.owner.username,
-          `@${users.owner.username} deleted all messages in #general`
+        let messageIds = await generalChannelUser1.getMessageIdsByText(
+          `@${users.owner.username} deleted all messages in #general`,
+          users.owner.username
         )
-        await generalChannelUser1.waitForUserMessage(
-          users.owner.username,
-          `@${users.user2.username} has joined Testcommunity! 🎉`
+        await generalChannelUser1.verifyMessageSentStatus(messageIds, users.owner.username, false)
+
+        messageIds = await generalChannelUser1.getMessageIdsByText(
+          `@${users.user2.username} has joined and will be registered soon. 🎉 Learn more`,
+          users.user2.username
         )
+        await generalChannelUser1.verifyMessageSentStatus(messageIds, users.user2.username, false)
       })
 
-      it('Leave community - Guest sends a message after rejoining community as a new user', async () => {
+      it('Guest sends a message after rejoining community as a new user and it is visible', async () => {
         console.log('TEST 7')
-        generalChannelUser1 = new Channel(users.user1.app.driver, 'general')
+        generalChannelUser1 = new Channel(users.user1.app.driver, generalChannelName)
         await generalChannelUser1.element.isDisplayed()
         const isMessageInput2 = await generalChannelUser1.messageInput.isDisplayed()
         expect(isMessageInput2).toBeTruthy()
-        await new Promise<void>(resolve =>
-          setTimeout(() => {
-            resolve()
-          }, 5000)
-        )
-        await generalChannelUser1.sendMessage(users.user2.messages[0])
-      })
-      it('Leave community - Sent message is visible in a channel', async () => {
-        console.log('TEST 8')
-        await generalChannelUser1.waitForUserMessage(users.user2.username, users.user2.messages[0])
+        await sleep(5000)
+        const messageIds = await generalChannelUser1.sendMessage(users.user2.messages[0], users.user2.username)
+        await generalChannelUser1.verifyMessageSentStatus(messageIds, users.user2.username, false)
       })
+    })
+
+    describe('Guest Closes App', () => {
       it('Owner closes app', async () => {
         await users.owner.app.close({ forceSaveState: true })
-        await new Promise<void>(resolve => setTimeout(() => resolve(), 20000))
+        await sleep(30000)
       })
 
       it('Guest closes app', async () => {
@@ -489,21 +540,23 @@ describe('Multiple Clients', () => {
       })
 
       it('Owner re-opens app', async () => {
-        await users.owner.app?.open()
-        await new Promise<void>(resolve => setTimeout(() => resolve(), 10000))
+        await users.owner.app?.openWithRetries()
+        await sleep(30000)
       })
 
-      it('Guest closes app - Owner sends another message after guest left the app', async () => {
+      it('Owner sends another message after guest left the app and it is visible', async () => {
         console.log('TEST 10')
-        generalChannelOwner = new Channel(users.owner.app.driver, 'general')
+        generalChannelOwner = new Channel(users.owner.app.driver, generalChannelName)
         const isMessageInput = await generalChannelOwner.messageInput.isDisplayed()
         expect(isMessageInput).toBeTruthy()
-        await generalChannelOwner.sendMessage(users.owner.messages[2])
+        const messageIds = await generalChannelOwner.sendMessage(users.owner.messages[2], users.owner.username)
+        await generalChannelOwner.verifyMessageSentStatus(messageIds, users.owner.username, false)
       })
-      it('Guest closes app - Check if message is visible for owner', async () => {
-        console.log('TEST 11')
-        await generalChannelOwner.waitForUserMessage(users.owner.username, users.owner.messages[2])
+
+      it('Owner sees the connection status element in general channel', async () => {
+        const correctConnectionStatusElementPresence = await generalChannelOwner.waitForConnectionStatus(false)
+        expect(correctConnectionStatusElementPresence).toBe(true)
       })
-    }
+    })
   })
 })
diff --git a/packages/e2e-tests/src/tests/oneClient.test.ts b/packages/e2e-tests/src/tests/oneClient.test.ts
index 1dab965c39..f3efe6bb4c 100644
--- a/packages/e2e-tests/src/tests/oneClient.test.ts
+++ b/packages/e2e-tests/src/tests/oneClient.test.ts
@@ -15,6 +15,10 @@ describe('One Client', () => {
   let app: App
   let dataDirPath: string
   let resourcesPath: string
+  let generalChannel: Channel
+
+  const generalChannelName = 'general'
+  const ownerUserName = 'testuser'
 
   beforeAll(async () => {
     app = new App()
@@ -38,7 +42,7 @@ describe('One Client', () => {
       expect(isJoinModal).toBeTruthy()
 
       if (!isJoinModal) {
-        const generalChannel = new Channel(app.driver, 'general')
+        const generalChannel = new Channel(app.driver, generalChannelName)
         const isGeneralChannel = await generalChannel.element.isDisplayed()
 
         expect(isGeneralChannel).toBeTruthy()
@@ -61,7 +65,7 @@ describe('One Client', () => {
 
       expect(isRegisterModal).toBeTruthy()
       console.log('Registration - vefore typeUsername')
-      await registerModal.typeUsername('testuser')
+      await registerModal.typeUsername(ownerUserName)
       console.log('Registration - before submit')
       await registerModal.submit()
       console.log('Registration - after submit')
@@ -74,11 +78,23 @@ describe('One Client', () => {
     })
 
     it('User sees general channel', async () => {
-      const generalChannel = new Channel(app.driver, 'general')
+      generalChannel = new Channel(app.driver, generalChannelName)
       const isGeneralChannel = await generalChannel.element.isDisplayed()
       const generalChannelText = await generalChannel.element.getText()
       expect(isGeneralChannel).toBeTruthy()
-      expect(generalChannelText).toEqual('# general')
+      expect(generalChannelText).toEqual(`# ${generalChannelName}`)
+    })
+
+    it('User sends a message', async () => {
+      const isMessageInput = await generalChannel.messageInput.isDisplayed()
+      expect(isMessageInput).toBeTruthy()
+      const messageIds = await generalChannel.sendMessage('this shows up as sent', ownerUserName)
+      await generalChannel.verifyMessageSentStatus(messageIds, ownerUserName, false)
+    })
+
+    it("User doesn't see the connection status element in general channel", async () => {
+      const correctConnectionStatusElementPresence = await generalChannel.waitForConnectionStatus(false)
+      expect(correctConnectionStatusElementPresence).toBe(true)
     })
   })
 
diff --git a/packages/e2e-tests/src/tests/userProfile.test.ts b/packages/e2e-tests/src/tests/userProfile.test.ts
index f37014c651..8e6f01bd49 100644
--- a/packages/e2e-tests/src/tests/userProfile.test.ts
+++ b/packages/e2e-tests/src/tests/userProfile.test.ts
@@ -91,7 +91,7 @@ describe('User Profile Feature', () => {
   it('Owner sends a message', async () => {
     const isMessageInput = await generalChannelOwner.messageInput.isDisplayed()
     expect(isMessageInput).toBeTruthy()
-    await generalChannelOwner.sendMessage(users.owner.messages[0])
+    await generalChannelOwner.sendMessage(users.owner.messages[0], users.owner.username)
   })
 
   it('Owner updates their profile photo with JPEG', async () => {
diff --git a/packages/e2e-tests/src/types.ts b/packages/e2e-tests/src/types.ts
index 65f27be1be..a2ff687f2a 100644
--- a/packages/e2e-tests/src/types.ts
+++ b/packages/e2e-tests/src/types.ts
@@ -1,5 +1,20 @@
 import { App } from './selectors'
 
+export interface MessageIds {
+  messageId: string
+  parentMessageId: string
+}
+
+export interface RetryConfig {
+  attempts: number
+  timeoutMs: number
+}
+
+export interface TimeoutMetadata {
+  id: NodeJS.Timeout
+  promise: Promise<unknown>
+}
+
 export interface UserTestData {
   username: string
   app: App
diff --git a/packages/e2e-tests/src/utils.ts b/packages/e2e-tests/src/utils.ts
index c167c02a3c..a7126a5f29 100644
--- a/packages/e2e-tests/src/utils.ts
+++ b/packages/e2e-tests/src/utils.ts
@@ -5,6 +5,7 @@ import getPort from 'get-port'
 import path from 'path'
 import fs from 'fs'
 import { DESKTOP_DATA_DIR, getAppDataPath } from '@quiet/common'
+import { RetryConfig, TimeoutMetadata } from './types'
 import { config } from 'dotenv'
 
 export const BACKWARD_COMPATIBILITY_BASE_VERSION = '2.0.1' // Pre-latest production version
@@ -331,10 +332,97 @@ export const copyInstallerFile = (file: string) => {
   return copiedFileName
 }
 
-export const sleep = async (time = 1000) => {
+export const sleep = async (timeMs = 1000) => {
   await new Promise<void>(resolve =>
     setTimeout(() => {
       resolve()
-    }, time)
+    }, timeMs)
   )
 }
+
+export class Timeout {
+  private id: NodeJS.Timeout | number | undefined = undefined
+
+  public set(timeoutMs: number, reason: string): Promise<unknown> {
+    if (this.id != null) {
+      throw new Error('Timeout already set')
+    }
+
+    return new Promise((resolve, reject) => {
+      this.id = setTimeout(() => {
+        reject(reason)
+        this.clear()
+      }, timeoutMs)
+    })
+  }
+
+  public async wrap<T>(promise: Promise<T>, timeoutMs: number, reason: string): Promise<T> {
+    return (Promise.race([promise, this.set(timeoutMs, reason)]) as Promise<T>)
+      .catch(reason => {
+        throw new Error(reason)
+      })
+      .finally(() => this.clear())
+  }
+
+  public clear(): void {
+    clearTimeout(this.id as NodeJS.Timeout)
+    this.id = undefined
+  }
+}
+
+export const promiseWithTimeout = async <T>(
+  promise: Promise<T>,
+  reason: string,
+  timeoutMs: number,
+  onTimeout?: () => Promise<void>
+): Promise<T> => {
+  const timeout = new Timeout()
+  try {
+    const result: T = await timeout.wrap(promise, timeoutMs, reason)
+    return result
+  } catch (e) {
+    if (e.message === reason) {
+      if (onTimeout != null) await onTimeout()
+      throw logAndReturnError(e)
+    }
+    throw e
+  }
+}
+
+export const promiseWithRetries = async <T>(
+  promise: Promise<T>,
+  reason: string,
+  retryConfig: RetryConfig,
+  onTimeout?: () => Promise<void>
+): Promise<T> => {
+  const attempts = 0
+  while (attempts < retryConfig.attempts) {
+    try {
+      const result: T = await promiseWithTimeout(promise, reason, retryConfig.timeoutMs, onTimeout)
+      return result
+    } catch (e) {
+      console.error(e.message)
+      if (e.message === reason) {
+        console.warn(`Timeout exceeded on promise with reason: ${reason}`)
+        continue
+      }
+      throw e
+    }
+  }
+
+  throw logAndReturnError(`Exceeded ${retryConfig.attempts} retry attempts`)
+}
+
+export const logAndReturnError = (error: string | Error): Error => {
+  let errorText: string
+  let err: Error
+  if (error instanceof Error) {
+    errorText = error.message
+    err = error
+  } else {
+    errorText = error
+    err = new Error(errorText)
+  }
+  console.error(errorText)
+  return err
+}
diff --git a/packages/logger/CHANGELOG.md b/packages/logger/CHANGELOG.md
index 2b3209af66..7f1936f474 100644
--- a/packages/logger/CHANGELOG.md
+++ b/packages/logger/CHANGELOG.md
@@ -8,6 +8,8 @@
 
 * Feature: add functionality to export chat to text document in desktop version
 
+* Feature: adds ElectronLogger for writing logs from renderer context to node console
+
 [2.0.3-alpha.6]
 
 * Fix: filter out invalid peer addresses in peer list. Update peer list in localdb.
diff --git a/packages/logger/package-lock.json b/packages/logger/package-lock.json
index df6697f7f4..896187c954 100644
--- a/packages/logger/package-lock.json
+++ b/packages/logger/package-lock.json
@@ -10,10 +10,12 @@
       "license": "GPL-3.0-or-later",
       "dependencies": {
         "cross-env": "^5.2.0",
-        "debug": "^4.3.1"
+        "debug": "^4.3.1",
+        "luxon": "^3.4.4"
       },
       "devDependencies": {
         "@types/debug": "^4.1.7",
+        "@types/luxon": "^3.4.2",
         "@types/node": "^17.0.21",
         "lint-staged": "^15.2.2",
         "typescript": "^4.9.3"
@@ -28,6 +30,12 @@
         "@types/ms": "*"
       }
     },
+    "node_modules/@types/luxon": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-3.4.2.tgz",
+      "integrity": "sha512-TifLZlFudklWlMBfhubvgqTXRzLDI5pCbGa4P8a3wPyUQSW+1xQ5eDsreP9DWHX3tjq1ke96uYG/nwundroWcA==",
+      "dev": true
+    },
     "node_modules/@types/ms": {
       "version": "0.7.31",
       "resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.31.tgz",
@@ -772,6 +780,14 @@
         "node": ">= 14"
       }
     },
+    "node_modules/luxon": {
+      "version": "3.4.4",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.4.4.tgz",
+      "integrity": "sha512-zobTr7akeGHnv7eBOXcRgMeCP6+uyYsczwmeRCauvpvaAltgNyTbLH/+VaEAPUeWBT+1GuNmz4wC/6jtQzbbVA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -852,6 +868,12 @@
         "@types/ms": "*"
       }
     },
+    "@types/luxon": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-3.4.2.tgz",
+      "integrity": "sha512-TifLZlFudklWlMBfhubvgqTXRzLDI5pCbGa4P8a3wPyUQSW+1xQ5eDsreP9DWHX3tjq1ke96uYG/nwundroWcA==",
+      "dev": true
+    },
     "@types/ms": {
       "version": "0.7.31",
       "resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.31.tgz",
@@ -1341,6 +1363,11 @@
         }
       }
     },
+    "luxon": {
+      "version": "3.4.4",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.4.4.tgz",
+      "integrity": "sha512-zobTr7akeGHnv7eBOXcRgMeCP6+uyYsczwmeRCauvpvaAltgNyTbLH/+VaEAPUeWBT+1GuNmz4wC/6jtQzbbVA=="
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
diff --git a/packages/logger/package.json b/packages/logger/package.json
index 5f166fd658..ce53d0cd81 100644
--- a/packages/logger/package.json
+++ b/packages/logger/package.json
@@ -21,13 +21,15 @@
   "devDependencies": {
     "@quiet/eslint-config": "^2.0.2-alpha.0",
     "@types/debug": "^4.1.7",
+    "@types/luxon": "^3.4.2",
     "@types/node": "^17.0.21",
     "lint-staged": "^15.2.2",
     "typescript": "^4.9.3"
   },
   "dependencies": {
     "cross-env": "^5.2.0",
-    "debug": "^4.3.1"
+    "debug": "^4.3.1",
+    "luxon": "^3.4.4"
   },
   "author": "",
   "license": "GPL-3.0-or-later",
diff --git a/packages/logger/src/index.ts b/packages/logger/src/index.ts
index 5459a0ff1c..576f26eeb8 100644
--- a/packages/logger/src/index.ts
+++ b/packages/logger/src/index.ts
@@ -1,4 +1,6 @@
 import debug from 'debug'
+import { Console } from 'console'
+import { DateTime } from 'luxon'
 
 export type Logger = debug.Debugger & {
   error: debug.Debugger
@@ -14,8 +16,78 @@ export const consoleLogger =
     return logger
   }
 
+export const nodeConsoleLogger = Console instanceof Function ? new Console(process.stdout, process.stderr) : console
+
+export class QuietLogger {
+  private isDebug: boolean
+
+  constructor(
+    public name: string,
+    public parallelConsoleLog: boolean = false
+  ) {
+    this.isDebug = debug.enabled(name)
+  }
+
+  debug(message: any, ...optionalParams: any[]): void {
+    if (!this.isDebug) return
+
+    const text = this.formatMessage(message, 'debug')
+    this.callLogMethods('debug', text, ...optionalParams)
+  }
+
+  error(message: any, ...optionalParams: any[]): void {
+    const text = this.formatMessage(message, 'error')
+    this.callLogMethods('error', text, ...optionalParams)
+  }
+
+  info(message: any, ...optionalParams: any[]): void {
+    const text = this.formatMessage(message, 'info')
+    this.callLogMethods('info', text, ...optionalParams)
+  }
+
+  log(message: any, ...optionalParams: any[]): void {
+    if (!this.isDebug) return
+    const text = this.formatMessage(message, 'log')
+    this.callLogMethods('log', text, ...optionalParams)
+  }
+
+  warn(message: any, ...optionalParams: any[]): void {
+    const text = this.formatMessage(message, 'warn')
+    this.callLogMethods('warn', text, ...optionalParams)
+  }
+
+  private callLogMethods(level: string, text: string, ...optionalParams: any[]): void {
+    // @ts-ignore
+    nodeConsoleLogger[level](text, ...optionalParams)
+    if (this.parallelConsoleLog) {
+      // @ts-ignore
+      console[level](text, ...optionalParams)
+    }
+  }
+
+  private formatMessage(message: any, level: string): string {
+    const messageText = typeof message === 'string' ? message : JSON.stringify(message, null, 2)
+    return `${DateTime.utc().toISO()} ${level.toUpperCase()} ${this.name} ${messageText}`
+  }
+}
+
+export const electronLogger =
+  (packageName: string, parallelConsoleLog: boolean = false) =>
+  (module: string): QuietLogger => {
+    const name = `${packageName}:${module}`
+    nodeConsoleLogger.info(`Initializing logger ${name}`)
+    return new QuietLogger(name, parallelConsoleLog)
+  }
+
 export const logger = (packageName: string): ((arg: string) => Logger) => {
   return consoleLogger(packageName)
 }
 
+export const createQuietLogger = (
+  packageName: string,
+  parallelConsoleLog: boolean = false
+): ((arg: string) => QuietLogger) => {
+  return electronLogger(packageName, parallelConsoleLog)
+}
+
 export default logger
diff --git a/packages/state-manager/CHANGELOG.md b/packages/state-manager/CHANGELOG.md
index 2b3209af66..1bf795fbb5 100644
--- a/packages/state-manager/CHANGELOG.md
+++ b/packages/state-manager/CHANGELOG.md
@@ -8,6 +8,14 @@
 
 * Feature: add functionality to export chat to text document in desktop version
 
+* Update logging to write to node console
+
+* Adds new selectors/reducers for getting peer connection information ([#1706](https://github.com/TryQuiet/quiet/issues/1706))
+
+* Updates message grouping to keep sent/unsent messages separate ([#1706](https://github.com/TryQuiet/quiet/issues/1706))
+
+* Update network data on peer connection ([#1706](https://github.com/TryQuiet/quiet/issues/1706))
+
 [2.0.3-alpha.6]
 
 * Fix: filter out invalid peer addresses in peer list. Update peer list in localdb.
diff --git a/packages/state-manager/src/index.ts b/packages/state-manager/src/index.ts
index 21809eecb6..06069c67d0 100644
--- a/packages/state-manager/src/index.ts
+++ b/packages/state-manager/src/index.ts
@@ -101,6 +101,8 @@ export * from './sagas/settings/settings.types'
 
 export * from './sagas/appConnection/connection.types'
 
+export * from './utils/messages/messages.utils'
+
 export const app = {
   actions: appActions,
 }
diff --git a/packages/state-manager/src/sagas/appConnection/connection.selectors.test.ts b/packages/state-manager/src/sagas/appConnection/connection.selectors.test.ts
index 184546cc84..5c953e806d 100644
--- a/packages/state-manager/src/sagas/appConnection/connection.selectors.test.ts
+++ b/packages/state-manager/src/sagas/appConnection/connection.selectors.test.ts
@@ -34,38 +34,46 @@ describe('communitiesSelectors', () => {
 
     // This peer should be first in the list as it is the most recently seen one.
     store.dispatch(
-      connectionActions.updateNetworkData({
-        peer: 'Qmd35TsAvtskei8zWY3A65ifNWcY4x4SdqkQDHMkH5xPF9',
-        connectionDuration: 50,
-        lastSeen: 1000,
-      })
+      connectionActions.updateNetworkData([
+        {
+          peer: 'Qmd35TsAvtskei8zWY3A65ifNWcY4x4SdqkQDHMkH5xPF9',
+          connectionDuration: 50,
+          lastSeen: 1000,
+        },
+      ])
     )
 
     // This peer should be second as it has the most shared uptime
     store.dispatch(
-      connectionActions.updateNetworkData({
-        peer: 'QmQEk68gnPTRhfBvRAPWXjjXjPydV1MvvZGGJF7W7w2Sv5',
-        connectionDuration: 500,
-        lastSeen: 900,
-      })
+      connectionActions.updateNetworkData([
+        {
+          peer: 'QmQEk68gnPTRhfBvRAPWXjjXjPydV1MvvZGGJF7W7w2Sv5',
+          connectionDuration: 500,
+          lastSeen: 900,
+        },
+      ])
     )
 
     // This is actually the third one on the list of last seen peers and it goes next, note that the upper peer which should go before that is already in the list.
     store.dispatch(
-      connectionActions.updateNetworkData({
-        peer: 'QmbrDuN2oCb8G2e1ajRzpfnALGbeFDYFSoVCBhUYGLSeRD',
-        connectionDuration: 200,
-        lastSeen: 500,
-      })
+      connectionActions.updateNetworkData([
+        {
+          peer: 'QmbrDuN2oCb8G2e1ajRzpfnALGbeFDYFSoVCBhUYGLSeRD',
+          connectionDuration: 200,
+          lastSeen: 500,
+        },
+      ])
     )
 
     // This is the least valuable peer so it goes last. Rmaining peers, without any network data will be concated to the end of the list.
     store.dispatch(
-      connectionActions.updateNetworkData({
-        peer: 'QmTjQLMxJq74yXWBabh1VM8hZsRNhci4wfbVz6vFhLH5am',
-        connectionDuration: 100,
-        lastSeen: 100,
-      })
+      connectionActions.updateNetworkData([
+        {
+          peer: 'QmTjQLMxJq74yXWBabh1VM8hZsRNhci4wfbVz6vFhLH5am',
+          connectionDuration: 100,
+          lastSeen: 100,
+        },
+      ])
     )
 
     const expectedArray = [
diff --git a/packages/state-manager/src/sagas/appConnection/connection.selectors.ts b/packages/state-manager/src/sagas/appConnection/connection.selectors.ts
index 9895c5f5a4..0935f9e125 100644
--- a/packages/state-manager/src/sagas/appConnection/connection.selectors.ts
+++ b/packages/state-manager/src/sagas/appConnection/connection.selectors.ts
@@ -11,6 +11,9 @@ import { areMessagesLoaded, areChannelsLoaded } from '../publicChannels/publicCh
 import { identitySelectors } from '../identity/identity.selectors'
 import { communitiesSelectors } from '../communities/communities.selectors'
 import { InvitationDataVersion } from '@quiet/types'
+import createLogger from '../../utils/logger'
+
+const logger = createLogger('connection')
 
 const connectionSlice: CreatedSelectors[StoreKeys.Connection] = (state: StoreState) => state[StoreKeys.Connection]
 
@@ -81,7 +84,9 @@ export const isJoiningCompleted = createSelector(
   areChannelsLoaded,
   areCertificatesLoaded,
   (isCommunity, areMessages, areChannels, areCertificates) => {
-    console.log({ isCommunity, areMessages, areChannels, areCertificates })
+    logger.info(
+      `Checking if joining is complete: ${(JSON.stringify({ isCommunity, areMessages, areChannels, areCertificates }), null, 2)}`
+    )
     return isCommunity && areMessages && areChannels && areCertificates
   }
 )
diff --git a/packages/state-manager/src/sagas/appConnection/connection.slice.ts b/packages/state-manager/src/sagas/appConnection/connection.slice.ts
index a5519825b3..bf75cb8135 100644
--- a/packages/state-manager/src/sagas/appConnection/connection.slice.ts
+++ b/packages/state-manager/src/sagas/appConnection/connection.slice.ts
@@ -23,14 +23,16 @@ export const connectionSlice = createSlice({
     updateUptime: (state, action) => {
       state.uptime = state.uptime + action.payload
     },
-    updateNetworkData: (state, action: PayloadAction<NetworkDataPayload>) => {
-      const prev = state.peersStats?.entities[action.payload.peer]?.connectionTime || 0
-      const _peerStats = state.peersStats || peersStatsAdapter.getInitialState()
-      peersStatsAdapter.upsertOne(_peerStats, {
-        peerId: action.payload.peer,
-        lastSeen: action.payload.lastSeen,
-        connectionTime: prev + action.payload.connectionDuration,
-      })
+    updateNetworkData: (state, action: PayloadAction<NetworkDataPayload[]>) => {
+      for (const peer of action.payload) {
+        const prev = state.peersStats?.entities[peer.peer]?.connectionTime || 0
+        const _peerStats = state.peersStats || peersStatsAdapter.getInitialState()
+        peersStatsAdapter.upsertOne(_peerStats, {
+          peerId: peer.peer,
+          lastSeen: peer.lastSeen,
+          connectionTime: prev + peer.connectionDuration,
+        })
+      }
     },
     setLastConnectedTime: (state, action: PayloadAction<number>) => {
       state.lastConnectedTime = action.payload
diff --git a/packages/state-manager/src/sagas/appConnection/uptime/uptime.saga.ts b/packages/state-manager/src/sagas/appConnection/uptime/uptime.saga.ts
index 6a9d400daa..6f40c09269 100644
--- a/packages/state-manager/src/sagas/appConnection/uptime/uptime.saga.ts
+++ b/packages/state-manager/src/sagas/appConnection/uptime/uptime.saga.ts
@@ -1,12 +1,13 @@
 import { delay, put } from 'typed-redux-saga'
-import logger from '../../../utils/logger'
+import createLogger from '../../../utils/logger'
 import { connectionActions } from '../connection.slice'
 
-const log = logger('connection')
+const logger = createLogger('connection')
 
 export function* uptimeSaga(): Generator {
   // There is no point in updating this more often as we don't need precise data here, but we want to avoid spamming redux with excess actions
   const interval = 10000
+  logger.debug(`Updating uptime on interval ${interval}ms`)
   while (true) {
     yield* put(connectionActions.updateUptime(interval))
     yield* delay(interval)
diff --git a/packages/state-manager/src/sagas/communities/communities.selectors.ts b/packages/state-manager/src/sagas/communities/communities.selectors.ts
index 8b440422a7..452b3808f1 100644
--- a/packages/state-manager/src/sagas/communities/communities.selectors.ts
+++ b/packages/state-manager/src/sagas/communities/communities.selectors.ts
@@ -3,6 +3,9 @@ import { createSelector } from 'reselect'
 import { communitiesAdapter } from './communities.adapter'
 import { type CreatedSelectors, type StoreState } from '../store.types'
 import { CertFieldsTypes, getCertFieldValue, parseCertificate } from '@quiet/identity'
+import createLogger from '../../utils/logger'
+
+const logger = createLogger('communities')
 
 // Workaround for "The inferred type of 'communitiesSelectors' cannot be named without a reference to
 // 'packages/identity/node_modules/pkijs/build'. This is likely not portable. A type annotation is necessary."
@@ -32,6 +35,10 @@ export const currentCommunityId = createSelector(communitiesSlice, reducerState
   return reducerState.currentCommunity
 })
 
+export const peerList = createSelector(currentCommunity, currentCommunity => {
+  return currentCommunity?.peerList
+})
+
 export const invitationCodes = createSelector(communitiesSlice, reducerState => {
   return reducerState.invitationCodes
 })
@@ -60,7 +67,7 @@ export const ownerNickname = createSelector(ownerCertificate, ownerCertificate =
   const nickname = getCertFieldValue(parsedCert, CertFieldsTypes.nickName)
 
   if (!nickname) {
-    console.error('Could not retrieve owner nickname from certificate')
+    logger.error('Could not retrieve owner nickname from certificate')
   }
 
   return nickname
@@ -78,4 +85,5 @@ export const communitiesSelectors = {
   ownerCertificate,
   ownerNickname,
   psk,
+  peerList,
 }
diff --git a/packages/state-manager/src/sagas/communities/createNetwork/createNetwork.saga.ts b/packages/state-manager/src/sagas/communities/createNetwork/createNetwork.saga.ts
index aa511dd2f7..bd8c00e0a5 100644
--- a/packages/state-manager/src/sagas/communities/createNetwork/createNetwork.saga.ts
+++ b/packages/state-manager/src/sagas/communities/createNetwork/createNetwork.saga.ts
@@ -14,15 +14,16 @@ import {
   InvitationDataVersion,
 } from '@quiet/types'
 import { Socket, applyEmitParams } from '../../../types'
-import logger from '../../../utils/logger'
-const log = logger('createNetwork')
+import createLogger from '../../../utils/logger'
+
+const logger = createLogger('communities:createNetwork')
 
 export function* createNetworkSaga(
   socket: Socket,
   action: PayloadAction<ReturnType<typeof communitiesActions.createNetwork>['payload']>
 ) {
   const payload = action.payload
-  log(payload)
+  logger.info('Create network', payload)
   // Community IDs are only local identifiers
   const id = yield* call(generateId)
 
diff --git a/packages/state-manager/src/sagas/communities/launchCommunity/launchCommunity.saga.ts b/packages/state-manager/src/sagas/communities/launchCommunity/launchCommunity.saga.ts
index df08376b55..f5c1422d35 100644
--- a/packages/state-manager/src/sagas/communities/launchCommunity/launchCommunity.saga.ts
+++ b/packages/state-manager/src/sagas/communities/launchCommunity/launchCommunity.saga.ts
@@ -11,6 +11,9 @@ import { connectionSelectors } from '../../appConnection/connection.selectors'
 import { networkSelectors } from '../../network/network.selectors'
 import { pairsToP2pAddresses } from '@quiet/common'
 import { type Community, type InitCommunityPayload, SocketActionTypes } from '@quiet/types'
+import createLogger from '../../../utils/logger'
+
+const logger = createLogger('communities')
 
 export function* initCommunities(): Generator {
   const joinedCommunities = yield* select(identitySelectors.joinedCommunities)
@@ -43,7 +46,7 @@ export function* launchCommunitySaga(
   const identity = yield* select(identitySelectors.selectById(communityId))
 
   if (!community || !identity?.userCsr?.userKey) {
-    console.error('Could not launch community, missing community or user private key')
+    logger.error('Could not launch community, missing community or user private key')
     return
   }
 
diff --git a/packages/state-manager/src/sagas/communities/sendCommunityCaData/sendCommunityCaData.saga.ts b/packages/state-manager/src/sagas/communities/sendCommunityCaData/sendCommunityCaData.saga.ts
new file mode 100644
index 0000000000..41aba868e8
--- /dev/null
+++ b/packages/state-manager/src/sagas/communities/sendCommunityCaData/sendCommunityCaData.saga.ts
@@ -0,0 +1,33 @@
+import { apply, select } from 'typed-redux-saga'
+import { type PayloadAction } from '@reduxjs/toolkit'
+
+import { applyEmitParams, type Socket } from '../../../types'
+import { communitiesSelectors } from '../communities.selectors'
+import { type communitiesActions } from '../communities.slice'
+import { type PermsData, SocketActionTypes } from '@quiet/types'
+import createLogger from '../../../utils/logger'
+
+const logger = createLogger('communities')
+
+export function* sendCommunityCaDataSaga(
+  socket: Socket,
+  _action: PayloadAction<ReturnType<typeof communitiesActions.sendCommunityCaData>['payload']>
+): Generator {
+  const community = yield* select(communitiesSelectors.currentCommunity)
+
+  if (!community) {
+    logger.error('Cannot send community metadata, no community')
+    return
+  }
+
+  if (!community.CA) {
+    logger.error('Cannot send community metadata, no CA in community')
+    return
+  }
+
+  const payload: PermsData = {
+    certificate: community.CA.rootCertString,
+    privKey: community.CA.rootKeyString,
+  }
+  yield* apply(socket, socket.emit, applyEmitParams(SocketActionTypes.SET_COMMUNITY_CA_DATA, payload))
+}
diff --git a/packages/state-manager/src/sagas/communities/updateCommunityMetadata/updateCommunityMetadata.saga.ts b/packages/state-manager/src/sagas/communities/updateCommunityMetadata/updateCommunityMetadata.saga.ts
new file mode 100644
index 0000000000..4e41c5cc77
--- /dev/null
+++ b/packages/state-manager/src/sagas/communities/updateCommunityMetadata/updateCommunityMetadata.saga.ts
@@ -0,0 +1,46 @@
+import { CommunityMetadata, SocketActionTypes } from '@quiet/types'
+import { type PayloadAction } from '@reduxjs/toolkit'
+import { apply, select, put, take } from 'typed-redux-saga'
+import { channel } from 'redux-saga'
+import { applyEmitParams, type Socket } from '../../../types'
+import { communitiesSelectors } from '../communities.selectors'
+import { communitiesActions } from '../communities.slice'
+import { identitySelectors } from '../../identity/identity.selectors'
+import createLogger from '../../../utils/logger'
+
+const logger = createLogger('communities')
+
+export function* sendCommunityMetadataSaga(
+  socket: Socket,
+  _action: PayloadAction<ReturnType<typeof communitiesActions.sendCommunityMetadata>['payload']>
+): Generator {
+  const identity = yield* select(identitySelectors.currentIdentity)
+  const community = yield* select(communitiesSelectors.currentCommunity)
+
+  if (!identity?.userCertificate) {
+    logger.error('Cannot send community metadata, no owner certificate')
+    return
+  }
+
+  if (!community) {
+    logger.error('Cannot send community metadata, no community')
+    return
+  }
+
+  if (!community.rootCa || !community.CA) {
+    logger.info('Cannot send community metadata, no rootCa or CA in community')
+    return
+  }
+
+  const communityMetadataPayload: CommunityMetadata = {
+    id: community.id,
+    ownerCertificate: identity.userCertificate,
+    rootCa: community.rootCa,
+  }
+
+  yield* apply(
+    socket,
+    socket.emitWithAck,
+    applyEmitParams(SocketActionTypes.SET_COMMUNITY_METADATA, communityMetadataPayload)
+  )
+}
diff --git a/packages/state-manager/src/sagas/files/autoDownloadFiles/autoDownloadFiles.saga.ts b/packages/state-manager/src/sagas/files/autoDownloadFiles/autoDownloadFiles.saga.ts
index 7fbb4f61f6..964626b8d2 100644
--- a/packages/state-manager/src/sagas/files/autoDownloadFiles/autoDownloadFiles.saga.ts
+++ b/packages/state-manager/src/sagas/files/autoDownloadFiles/autoDownloadFiles.saga.ts
@@ -7,6 +7,9 @@ import { AUTODOWNLOAD_SIZE_LIMIT } from '../../../constants'
 import { filesActions } from '../files.slice'
 import { applyEmitParams, type Socket } from '../../../types'
 import { DownloadState, MessageType, SocketActionTypes } from '@quiet/types'
+import createLogger from '../../../utils/logger'
+
+const logger = createLogger('files')
 
 export function* autoDownloadFilesSaga(
   socket: Socket,
@@ -14,7 +17,7 @@ export function* autoDownloadFilesSaga(
 ): Generator {
   const identity = yield* select(identitySelectors.currentIdentity)
   if (!identity) {
-    console.error('Could not autodownload files, no identity')
+    logger.error('Could not autodownload files, no identity')
     return
   }
 
diff --git a/packages/state-manager/src/sagas/files/broadcastHostedFile/broadcastHostedFile.saga.ts b/packages/state-manager/src/sagas/files/broadcastHostedFile/broadcastHostedFile.saga.ts
index 97db579530..0ab5b3b336 100644
--- a/packages/state-manager/src/sagas/files/broadcastHostedFile/broadcastHostedFile.saga.ts
+++ b/packages/state-manager/src/sagas/files/broadcastHostedFile/broadcastHostedFile.saga.ts
@@ -6,6 +6,9 @@ import { identitySelectors } from '../../identity/identity.selectors'
 import { messagesSelectors } from '../../messages/messages.selectors'
 import { type filesActions } from '../files.slice'
 import { instanceOfChannelMessage, SocketActionTypes } from '@quiet/types'
+import createLogger from '../../../utils/logger'
+
+const logger = createLogger('files')
 
 export function* broadcastHostedFileSaga(
   socket: Socket,
@@ -21,7 +24,7 @@ export function* broadcastHostedFileSaga(
   const message = channelMessages[action.payload.message.id]
 
   if (!message || !instanceOfChannelMessage(message)) {
-    console.error(
+    logger.error(
       `Cannot broadcast message after uploading. Draft ${action.payload.message.id} from #${action.payload.message.channelId} does not exist in local storage.`
     )
     return
diff --git a/packages/state-manager/src/sagas/files/updateMessageMedia/updateMessageMedia.ts b/packages/state-manager/src/sagas/files/updateMessageMedia/updateMessageMedia.ts
index 56c7cefac6..54f95378b7 100644
--- a/packages/state-manager/src/sagas/files/updateMessageMedia/updateMessageMedia.ts
+++ b/packages/state-manager/src/sagas/files/updateMessageMedia/updateMessageMedia.ts
@@ -4,6 +4,9 @@ import { messagesSelectors } from '../../messages/messages.selectors'
 import { messagesActions } from '../../messages/messages.slice'
 import { type filesActions } from '../files.slice'
 import { instanceOfChannelMessage } from '@quiet/types'
+import createLogger from '../../../utils/logger'
+
+const logger = createLogger('files')
 
 export function* updateMessageMediaSaga(
   action: PayloadAction<ReturnType<typeof filesActions.updateMessageMedia>['payload']>
@@ -14,7 +17,7 @@ export function* updateMessageMediaSaga(
 
   const message = channelMessages[action.payload.message.id]
   if (!message || !instanceOfChannelMessage(message)) {
-    console.error(
+    logger.error(
       `Cannot update message media. Message ${action.payload.message.id} from #${action.payload.message.channelId} does not exist in local storage.`
     )
     return
diff --git a/packages/state-manager/src/sagas/files/uploadFile/sendFileMessage.saga.ts b/packages/state-manager/src/sagas/files/uploadFile/sendFileMessage.saga.ts
index 3ec4e1d830..77c15f3491 100644
--- a/packages/state-manager/src/sagas/files/uploadFile/sendFileMessage.saga.ts
+++ b/packages/state-manager/src/sagas/files/uploadFile/sendFileMessage.saga.ts
@@ -6,6 +6,9 @@ import { messagesActions } from '../../messages/messages.slice'
 import { generateMessageId } from '../../messages/utils/message.utils'
 import { publicChannelsSelectors } from '../../publicChannels/publicChannels.selectors'
 import { DownloadState, type FileMetadata, imagesExtensions, MessageType } from '@quiet/types'
+import createLogger from '../../../utils/logger'
+
+const logger = createLogger('files')
 
 export function* sendFileMessageSaga(
   action: PayloadAction<ReturnType<typeof filesActions.uploadFile>['payload']>
@@ -23,7 +26,7 @@ export function* sendFileMessageSaga(
     filePath = decodeURIComponent(filePath.startsWith(fileProtocol) ? filePath.slice(fileProtocol.length) : filePath)
     tmpPath = tmpPath ? decodeURIComponent(tmpPath.slice(fileProtocol.length)) : undefined
   } catch (e) {
-    console.error(`Can't send file with path ${filePath}, Details: ${e.message}`)
+    logger.error(`Can't send file with path ${filePath}, Details: ${e.message}`)
     return
   }
 
diff --git a/packages/state-manager/src/sagas/identity/checkLocalCsr/checkLocalCsr.saga.ts b/packages/state-manager/src/sagas/identity/checkLocalCsr/checkLocalCsr.saga.ts
new file mode 100644
index 0000000000..910caf11f0
--- /dev/null
+++ b/packages/state-manager/src/sagas/identity/checkLocalCsr/checkLocalCsr.saga.ts
@@ -0,0 +1,48 @@
+import { select, call, put } from 'typed-redux-saga'
+import { PayloadAction } from '@reduxjs/toolkit'
+import { identityActions } from '../identity.slice'
+import { identitySelectors } from '../identity.selectors'
+import { CertFieldsTypes, getReqFieldValue, loadCSR, pubKeyFromCsr } from '@quiet/identity'
+import createLogger from '../../../utils/logger'
+
+const logger = createLogger('identity')
+
+export function* checkLocalCsrSaga(
+  action: PayloadAction<ReturnType<typeof identityActions.checkLocalCsr>['payload']>
+): Generator {
+  logger.info('Checking local CSR', action.payload.csrs)
+
+  const { csrs } = action.payload
+
+  const identity = yield* select(identitySelectors.currentIdentity)
+
+  if (!identity) {
+    logger.error('Could not check local csr, no identity.')
+    return
+  }
+
+  if (!identity.userCsr) {
+    logger.warn("Identity doesn't have userCsr.")
+    return
+  }
+
+  const pubKey = yield* call(pubKeyFromCsr, identity.userCsr.userCsr)
+
+  const storedCsr = csrs.find(csr => csr === identity.userCsr?.userCsr)
+
+  if (storedCsr) {
+    logger.info('Stored CSR with the same public key found, checking for username integirty.', pubKey)
+
+    const parsedCsr = yield* call(loadCSR, storedCsr)
+    const nickname = yield* call(getReqFieldValue, parsedCsr, CertFieldsTypes.nickName)
+
+    if (nickname == identity.nickname) {
+      logger.info('Stored CSR is equal to the local one, skipping.')
+      return
+    }
+  }
+
+  logger.info('Stored CSR differs or missing, saving local one.')
+
+  yield* put(identityActions.saveUserCsr())
+}
diff --git a/packages/state-manager/src/sagas/identity/registerCertificate/registerCertificate.saga.ts b/packages/state-manager/src/sagas/identity/registerCertificate/registerCertificate.saga.ts
new file mode 100644
index 0000000000..50d04fb67a
--- /dev/null
+++ b/packages/state-manager/src/sagas/identity/registerCertificate/registerCertificate.saga.ts
@@ -0,0 +1,37 @@
+import { applyEmitParams, type Socket } from '../../../types'
+import { type PayloadAction } from '@reduxjs/toolkit'
+import { apply, select, put } from 'typed-redux-saga'
+import { communitiesSelectors } from '../../communities/communities.selectors'
+import { identityActions } from '../identity.slice'
+import {
+  type RegisterOwnerCertificatePayload,
+  type RegisterUserCertificatePayload,
+  SocketActionTypes,
+} from '@quiet/types'
+import { communitiesActions } from '../../communities/communities.slice'
+import createLogger from '../../../utils/logger'
+
+const logger = createLogger('identity')
+
+export function* registerCertificateSaga(
+  socket: Socket,
+  action: PayloadAction<ReturnType<typeof identityActions.registerCertificate>['payload']>
+): Generator {
+  const currentCommunity = yield* select(communitiesSelectors.currentCommunity)
+  const isUsernameTaken = action.payload.isUsernameTaken
+
+  if (!currentCommunity) {
+    logger.error('Could not register certificate, no current community')
+    return
+  }
+
+  if (currentCommunity.CA?.rootCertString) {
+    yield* put(communitiesActions.createCommunity(action.payload.communityId))
+  } else {
+    if (!isUsernameTaken) {
+      yield* put(communitiesActions.launchCommunity(action.payload.communityId))
+    } else {
+      yield* put(identityActions.saveUserCsr())
+    }
+  }
+}
diff --git a/packages/state-manager/src/sagas/identity/registerUsername/registerUsername.saga.ts b/packages/state-manager/src/sagas/identity/registerUsername/registerUsername.saga.ts
index e6714f430c..4d05bb8917 100644
--- a/packages/state-manager/src/sagas/identity/registerUsername/registerUsername.saga.ts
+++ b/packages/state-manager/src/sagas/identity/registerUsername/registerUsername.saga.ts
@@ -8,6 +8,9 @@ import { Socket } from '../../../types'
 import { communitiesActions } from '../../communities/communities.slice'
 import { communitiesSelectors } from '../../communities/communities.selectors'
 import { CreateUserCsrPayload, RegisterCertificatePayload, Community } from '@quiet/types'
+import createLogger from '../../../utils/logger'
+
+const logger = createLogger('identity')
 
 export function* registerUsernameSaga(
   socket: Socket,
@@ -26,7 +29,7 @@ export function* registerUsernameSaga(
   }
   community = yield* select(communitiesSelectors.currentCommunity)
   if (!community) {
-    console.error('Could not register username, no community data')
+    logger.error('Could not register username, no community data')
     return
   }
   console.log('Found community')
@@ -38,7 +41,7 @@ export function* registerUsernameSaga(
   }
   identity = yield* select(identitySelectors.currentIdentity)
   if (!identity) {
-    console.error('Could not register username, no identity')
+    logger.error('Could not register username, no identity')
     return
   }
   console.log('Found identity')
@@ -48,7 +51,7 @@ export function* registerUsernameSaga(
   if (userCsr) {
     try {
       if (identity.userCsr?.userCsr == null || identity.userCsr.userKey == null) {
-        console.error('identity.userCsr?.userCsr == null || identity.userCsr.userKey == null')
+        logger.error('identity.userCsr?.userCsr == null || identity.userCsr.userKey == null')
         return
       }
       const _pubKey = yield* call(pubKeyFromCsr, identity.userCsr.userCsr)
@@ -68,7 +71,7 @@ export function* registerUsernameSaga(
 
       userCsr = yield* call(createUserCsr, payload)
     } catch (e) {
-      console.error(e)
+      logger.error('Error occurred while creating new CSR from existing', e)
       return
     }
   } else {
@@ -82,7 +85,7 @@ export function* registerUsernameSaga(
       }
       userCsr = yield* call(createUserCsr, payload)
     } catch (e) {
-      console.error(e)
+      logger.error('Error occurred while generating new user CSR', e)
       return
     }
   }
diff --git a/packages/state-manager/src/sagas/identity/saveUserCsr/saveUserCsr.saga.ts b/packages/state-manager/src/sagas/identity/saveUserCsr/saveUserCsr.saga.ts
index 05c371bef0..aeba0d5a89 100644
--- a/packages/state-manager/src/sagas/identity/saveUserCsr/saveUserCsr.saga.ts
+++ b/packages/state-manager/src/sagas/identity/saveUserCsr/saveUserCsr.saga.ts
@@ -2,13 +2,16 @@ import { SaveCSRPayload, SocketActionTypes } from '@quiet/types'
 import { applyEmitParams, type Socket } from '../../../types'
 import { apply, select } from 'typed-redux-saga'
 import { identitySelectors } from '../identity.selectors'
+import createLogger from '../../../utils/logger'
+
+const logger = createLogger('identity')
 
 export function* saveUserCsrSaga(socket: Socket): Generator {
   console.log('Saving user CSR')
 
   const identity = yield* select(identitySelectors.currentIdentity)
   if (!identity?.userCsr) {
-    console.error('Cannot save user csr to backend, no userCsr')
+    logger.error('Cannot save user csr to backend, no userCsr')
     return
   }
 
@@ -16,6 +19,6 @@ export function* saveUserCsrSaga(socket: Socket): Generator {
     csr: identity.userCsr?.userCsr,
   }
 
-  console.log(`Send ${SocketActionTypes.ADD_CSR}`)
+  logger.info(`Send ${SocketActionTypes.ADD_CSR}`)
   yield* apply(socket, socket.emit, applyEmitParams(SocketActionTypes.ADD_CSR, payload))
 }
diff --git a/packages/state-manager/src/sagas/messages/sendMessage/sendMessage.saga.ts b/packages/state-manager/src/sagas/messages/sendMessage/sendMessage.saga.ts
index fee94b4d50..b5b63d2216 100644
--- a/packages/state-manager/src/sagas/messages/sendMessage/sendMessage.saga.ts
+++ b/packages/state-manager/src/sagas/messages/sendMessage/sendMessage.saga.ts
@@ -10,6 +10,9 @@ import { publicChannelsSelectors } from '../../publicChannels/publicChannels.sel
 import { messagesActions } from '../messages.slice'
 import { generateMessageId, getCurrentTime } from '../utils/message.utils'
 import { type ChannelMessage, MessageType, SendingStatus, SocketActionTypes } from '@quiet/types'
+import createLogger from '../../../utils/logger'
+
+const logger = createLogger('messages')
 
 export function* sendMessageSaga(
   socket: Socket,
@@ -20,18 +23,18 @@ export function* sendMessageSaga(
 
   const identity = yield* select(identitySelectors.currentIdentity)
   if (!identity?.userCsr) {
-    console.error(`Failed to send message ${id} - user CSR is missing`)
+    logger.error(`Failed to send message ${id} - user CSR is missing`)
     return
   }
 
   const currentChannelId = yield* select(publicChannelsSelectors.currentChannelId)
   const channelId = action.payload.channelId || currentChannelId
   if (!channelId) {
-    console.error(`Failed to send message ${id} - channel ID is missing`)
+    logger.error(`Failed to send message ${id} - channel ID is missing`)
     return
   }
 
-  console.log(`Sending message ${id} to channel ${channelId}`)
+  logger.info(`Sending message ${id} to channel ${channelId}`)
 
   const pubKey = yield* call(pubKeyFromCsr, identity.userCsr.userCsr)
   const keyObject = yield* call(loadPrivateKey, identity.userCsr.userKey, config.signAlg)
@@ -51,7 +54,7 @@ export function* sendMessageSaga(
   }
 
   // Grey out message until saved in db
-  console.log('Adding pending message status')
+  logger.info('Adding pending message status')
   yield* put(
     messagesActions.addMessagesSendingStatus({
       message: message,
@@ -69,7 +72,7 @@ export function* sendMessageSaga(
   )
 
   // Display sent message immediately, to improve user experience
-  console.log('Adding message to Redux store')
+  logger.info('Adding message to Redux store')
   yield* put(
     messagesActions.addMessages({
       messages: [message],
@@ -79,7 +82,7 @@ export function* sendMessageSaga(
 
   const isUploadingFileMessage = action.payload.media?.cid?.includes('uploading')
   if (isUploadingFileMessage) {
-    console.log(`Failed to send message ${id} - file upload is in progress`)
+    logger.info(`Failed to send message ${id} - file upload is in progress`)
     return // Do not broadcast message until file is uploaded
   }
 
@@ -90,12 +93,12 @@ export function* sendMessageSaga(
   // (in a durable way).
   while (true) {
     const subscribedChannels = yield* select(publicChannelsSelectors.subscribedChannels)
-    console.log('Subscribed channels', subscribedChannels)
+    logger.info('Subscribed channels', subscribedChannels)
     if (subscribedChannels.includes(channelId)) {
-      console.log(`Channel ${channelId} subscribed`)
+      logger.info(`Channel ${channelId} subscribed`)
       break
     }
-    console.error(`Failed to send message ${id} - channel not subscribed. Waiting...`)
+    logger.error(`Failed to send message ${id} - channel not subscribed. Waiting...`)
     yield* take(publicChannelsActions.setChannelSubscribed)
   }
 
diff --git a/packages/state-manager/src/sagas/messages/verifyMessage/verifyMessages.saga.ts b/packages/state-manager/src/sagas/messages/verifyMessage/verifyMessages.saga.ts
index f21f11c00f..cb75266f5e 100644
--- a/packages/state-manager/src/sagas/messages/verifyMessage/verifyMessages.saga.ts
+++ b/packages/state-manager/src/sagas/messages/verifyMessage/verifyMessages.saga.ts
@@ -6,6 +6,9 @@ import { publicChannelsSelectors } from '../../publicChannels/publicChannels.sel
 
 import { usersSelectors } from '../../users/users.selectors'
 import { verifyUserInfoMessage } from '@quiet/common'
+import createLogger from '../../../utils/logger'
+
+const logger = createLogger('messages')
 
 export function* verifyMessagesSaga(
   action: PayloadAction<ReturnType<typeof messagesActions.addMessages>>['payload']
@@ -41,7 +44,7 @@ export function* verifyMessagesSaga(
       const expectedMessage = yield* call(verifyUserInfoMessage, user.username, channel)
 
       if (message.message !== expectedMessage) {
-        console.error(`${user.username} tried to send a malicious info message`)
+        logger.error(`${user.username} tried to send a malicious info message`)
         isVerified = false
       }
     }
diff --git a/packages/state-manager/src/sagas/network/network.selectors.ts b/packages/state-manager/src/sagas/network/network.selectors.ts
index 35a1c68cdd..dfbbfcaed4 100644
--- a/packages/state-manager/src/sagas/network/network.selectors.ts
+++ b/packages/state-manager/src/sagas/network/network.selectors.ts
@@ -20,9 +20,28 @@ export const connectedPeers = createSelector(networkSlice, reducerState => {
   return connectedPeersAdapter.getSelectors().selectAll(reducerState.connectedPeers)
 })
 
+export const communitiesLastConnectedAt = createSelector(networkSlice, reducerState => {
+  return reducerState.communitiesLastConnectedAt
+})
+
+export const communityLastConnectedAt = createSelector(
+  communitiesLastConnectedAt,
+  currentCommunity,
+  (communitiesLastConnectedAt, currentCommunity) => {
+    return currentCommunity ? communitiesLastConnectedAt[currentCommunity.id] : 0
+  }
+)
+
+export const allPeersDisconnectedAt = createSelector(networkSlice, reducerState => {
+  return reducerState.allPeersDisconnectedAt
+})
+
 export const networkSelectors = {
   initializedCommunities,
   isCurrentCommunityInitialized,
   connectedPeers,
   loadingPanelType,
+  communitiesLastConnectedAt,
+  communityLastConnectedAt,
+  allPeersDisconnectedAt,
 }
diff --git a/packages/state-manager/src/sagas/network/network.slice.ts b/packages/state-manager/src/sagas/network/network.slice.ts
index ace82febd3..d547fc72c1 100644
--- a/packages/state-manager/src/sagas/network/network.slice.ts
+++ b/packages/state-manager/src/sagas/network/network.slice.ts
@@ -2,11 +2,17 @@ import { createSlice, type EntityState, type PayloadAction } from '@reduxjs/tool
 import { StoreKeys } from '../store.keys'
 import { connectedPeersAdapter } from './network.adapter'
 import { type CommunityId, type ConnectedPeers, LoadingPanelType } from '@quiet/types'
+import { DateTime } from 'luxon'
+import createLogger from '../../utils/logger'
+
+const logger = createLogger('network')
 
 export class NetworkState {
   public initializedCommunities: Record<string, boolean> = {}
   public connectedPeers: EntityState<string> = connectedPeersAdapter.getInitialState()
   public loadingPanelType: LoadingPanelType = LoadingPanelType.StartingApplication
+  public communitiesLastConnectedAt: Record<string, number> = {}
+  public allPeersDisconnectedAt: number | undefined = undefined
 }
 
 export const networkSlice = createSlice({
@@ -18,15 +24,23 @@ export const networkSlice = createSlice({
         ...state.initializedCommunities,
         [action.payload]: true,
       }
+      state.communitiesLastConnectedAt[action.payload] = DateTime.utc().toSeconds()
     },
     removeInitializedCommunities: state => {
       state.initializedCommunities = {}
     },
     addConnectedPeers: (state, action: PayloadAction<ConnectedPeers>) => {
+      if (state.allPeersDisconnectedAt != null) {
+        state.allPeersDisconnectedAt = undefined
+      }
       connectedPeersAdapter.upsertMany(state.connectedPeers, action.payload)
     },
     removeConnectedPeer: (state, action) => {
       connectedPeersAdapter.removeOne(state.connectedPeers, action.payload)
+      const currentPeers = connectedPeersAdapter.getSelectors().selectAll(state.connectedPeers)
+      if (currentPeers.length === 0) {
+        state.allPeersDisconnectedAt = DateTime.utc().toSeconds()
+      }
     },
     setLoadingPanelType: (state, action) => {
       state.loadingPanelType = action.payload
diff --git a/packages/state-manager/src/sagas/publicChannels/channelDeletionResponse/channelDeletionResponse.saga.ts b/packages/state-manager/src/sagas/publicChannels/channelDeletionResponse/channelDeletionResponse.saga.ts
index b0d90d0182..d8a3b62971 100644
--- a/packages/state-manager/src/sagas/publicChannels/channelDeletionResponse/channelDeletionResponse.saga.ts
+++ b/packages/state-manager/src/sagas/publicChannels/channelDeletionResponse/channelDeletionResponse.saga.ts
@@ -1,18 +1,18 @@
 import { publicChannelsActions } from '../publicChannels.slice'
 import { type PayloadAction } from '@reduxjs/toolkit'
-import logger from '../../../utils/logger'
+import createLogger from '../../../utils/logger'
 import { put, delay, select } from 'typed-redux-saga'
 import { messagesActions } from '../../messages/messages.slice'
 import { communitiesSelectors } from '../../communities/communities.selectors'
 import { publicChannelsSelectors } from '../publicChannels.selectors'
 import { type PublicChannelStorage } from '@quiet/types'
 
-const log = logger('publicChannels')
+const logger = createLogger('publicChannels')
 
 export function* channelDeletionResponseSaga(
   action: PayloadAction<ReturnType<typeof publicChannelsActions.channelDeletionResponse>['payload']>
 ): Generator {
-  log(`Deleted channel ${action.payload.channelId} saga`)
+  logger.info(`Deleted channel ${action.payload.channelId} saga`)
 
   const { channelId } = action.payload
   const generalChannel = yield* select(publicChannelsSelectors.generalChannel)
@@ -20,12 +20,12 @@ export function* channelDeletionResponseSaga(
   const isChannelExist = yield* select(publicChannelsSelectors.getChannelById(channelId))
   const currentChannelId = yield* select(publicChannelsSelectors.currentChannelId)
   if (!isChannelExist) {
-    log(`Channel with id ${channelId} doesnt exist in store`)
+    logger.info(`Channel with id ${channelId} doesnt exist in store`)
     return
   }
 
   if (!generalChannel) {
-    log('General Channel doesnt exist in store')
+    logger.info('General Channel doesnt exist in store')
     return
   }
 
@@ -59,7 +59,7 @@ export function* channelDeletionResponseSaga(
     if (isGeneral && isUserOnGeneral) {
       let newGeneralChannel: PublicChannelStorage | undefined = yield* select(publicChannelsSelectors.generalChannel)
       while (!newGeneralChannel) {
-        log('General channel has not been replicated yet')
+        logger.info('General channel has not been replicated yet')
         yield* delay(1000)
         newGeneralChannel = yield* select(publicChannelsSelectors.generalChannel)
       }
diff --git a/packages/state-manager/src/sagas/publicChannels/channelsReplicated/channelsReplicated.saga.ts b/packages/state-manager/src/sagas/publicChannels/channelsReplicated/channelsReplicated.saga.ts
index ebf15f8f16..2bba5ebdf4 100644
--- a/packages/state-manager/src/sagas/publicChannels/channelsReplicated/channelsReplicated.saga.ts
+++ b/packages/state-manager/src/sagas/publicChannels/channelsReplicated/channelsReplicated.saga.ts
@@ -6,15 +6,14 @@ import { messagesSelectors } from '../../messages/messages.selectors'
 import { messagesActions } from '../../messages/messages.slice'
 import { communitiesSelectors } from '../../communities/communities.selectors'
 
-import logger from '@quiet/logger'
+import createLogger from '../../../utils/logger'
 import { type PublicChannel } from '@quiet/types'
-const log = logger('channels')
+const logger = createLogger('channels')
 
 export function* channelsReplicatedSaga(
   action: PayloadAction<ReturnType<typeof publicChannelsActions.channelsReplicated>['payload']>
 ): Generator {
-  // TODO: Refactor to use QuietLogger
-  log(`Syncing channels: ${JSON.stringify(action.payload, null, 2)}`)
+  logger.debug('Syncing channels', action.payload)
   const { channels } = action.payload
   const _locallyStoredChannels = yield* select(publicChannelsSelectors.publicChannels)
   const locallyStoredChannels = _locallyStoredChannels.map(channel => channel.id)
@@ -23,13 +22,12 @@ export function* channelsReplicatedSaga(
   const databaseStoredChannels = Object.values(channels) as PublicChannel[]
 
   const databaseStoredChannelsIds = databaseStoredChannels.map(channel => channel.id)
-  console.log({ locallyStoredChannels, databaseStoredChannelsIds })
+  logger.debug({ locallyStoredChannels, databaseStoredChannelsIds })
 
   // Upserting channels to local storage
   for (const channel of databaseStoredChannels) {
     if (!locallyStoredChannels.includes(channel.id)) {
-      // TODO: Refactor to use QuietLogger
-      log(`Adding #${channel.name} to store`)
+      logger.info(`Adding #${channel.name} to store`)
       yield* put(
         publicChannelsActions.addChannel({
           channel,
@@ -48,7 +46,7 @@ export function* channelsReplicatedSaga(
     for (const channelId of locallyStoredChannels) {
       if (!databaseStoredChannelsIds.includes(channelId)) {
         // TODO: Refactor to use QuietLogger
-        log(`Removing #${channelId} from store`)
+        logger.info(`Removing #${channelId} from store`)
         yield* put(publicChannelsActions.deleteChannel({ channelId }))
         yield* take(publicChannelsActions.completeChannelDeletion)
       }
diff --git a/packages/state-manager/src/sagas/publicChannels/createChannel/createChannel.saga.ts b/packages/state-manager/src/sagas/publicChannels/createChannel/createChannel.saga.ts
index bdd280ad22..86330c80e4 100644
--- a/packages/state-manager/src/sagas/publicChannels/createChannel/createChannel.saga.ts
+++ b/packages/state-manager/src/sagas/publicChannels/createChannel/createChannel.saga.ts
@@ -4,17 +4,17 @@ import { type PayloadAction } from '@reduxjs/toolkit'
 import { apply, put } from 'typed-redux-saga'
 
 import { type Socket, applyEmitParams } from '../../../types'
-import logger from '../../../utils/logger'
+import createLogger from '../../../utils/logger'
 
 import { SocketActionTypes, type CreateChannelResponse } from '@quiet/types'
 
-const log = logger('publicChannels')
+const logger = createLogger('publicChannels')
 
 export function* createChannelSaga(
   socket: Socket,
   action: PayloadAction<ReturnType<typeof publicChannelsActions.createChannel>['payload']>
 ): Generator {
-  log(`Creating channel ${action.payload.channel.name}`)
+  logger.info(`Creating channel ${action.payload.channel.name}`)
 
   const response = yield* apply(
     socket,
diff --git a/packages/state-manager/src/sagas/publicChannels/createGeneralChannel/createGeneralChannel.saga.ts b/packages/state-manager/src/sagas/publicChannels/createGeneralChannel/createGeneralChannel.saga.ts
index e8d84376ca..8405136959 100644
--- a/packages/state-manager/src/sagas/publicChannels/createGeneralChannel/createGeneralChannel.saga.ts
+++ b/packages/state-manager/src/sagas/publicChannels/createGeneralChannel/createGeneralChannel.saga.ts
@@ -2,19 +2,19 @@ import { select, put, call } from 'typed-redux-saga'
 import { publicChannelsActions } from '../publicChannels.slice'
 import { identitySelectors } from '../../identity/identity.selectors'
 import { DateTime } from 'luxon'
-import logger from '../../../utils/logger'
+import createLogger from '../../../utils/logger'
 import { generateChannelId } from '@quiet/common'
 import { type PublicChannel } from '@quiet/types'
 
-const log = logger('publicChannels')
+const logger = createLogger('publicChannels')
 
 export function* createGeneralChannelSaga(): Generator {
   const identity = yield* select(identitySelectors.currentIdentity)
   if (!identity) {
-    console.error('Could not create general channel. No identity')
+    logger.error('Could not create general channel. No identity')
     return
   }
-  log(`Creating general channel for ${identity.nickname}`)
+  logger.info(`Creating general channel for ${identity.nickname}`)
 
   const timestamp = yield* call(getChannelTimestamp)
   const id = yield* call(generateChannelId, 'general')
diff --git a/packages/state-manager/src/sagas/publicChannels/deleteChannel/deleteChannel.saga.ts b/packages/state-manager/src/sagas/publicChannels/deleteChannel/deleteChannel.saga.ts
index 2642db4c48..a47cd1ebcf 100644
--- a/packages/state-manager/src/sagas/publicChannels/deleteChannel/deleteChannel.saga.ts
+++ b/packages/state-manager/src/sagas/publicChannels/deleteChannel/deleteChannel.saga.ts
@@ -2,13 +2,13 @@ import { type PayloadAction } from '@reduxjs/toolkit'
 import { publicChannelsActions } from '../publicChannels.slice'
 import { apply, put, select } from 'typed-redux-saga'
 import { type Socket, applyEmitParams } from '../../../types'
-import logger from '../../../utils/logger'
+import createLogger from '../../../utils/logger'
 import { filesActions } from '../../files/files.slice'
 import { SocketActionTypes } from '@quiet/types'
 import { publicChannelsSelectors } from '../publicChannels.selectors'
 import { usersSelectors } from '../../users/users.selectors'
 
-const log = logger('publicChannels')
+const logger = createLogger('publicChannels')
 
 export function* deleteChannelSaga(
   socket: Socket,
@@ -25,7 +25,7 @@ export function* deleteChannelSaga(
 
   const isGeneral = channelId === generalChannel.id
 
-  log(`Deleting channel ${channelId}`)
+  logger.info(`Deleting channel ${channelId}`)
 
   const response = yield* apply(
     socket,
diff --git a/packages/state-manager/src/sagas/publicChannels/publicChannels.selectors.ts b/packages/state-manager/src/sagas/publicChannels/publicChannels.selectors.ts
index fb5de0ab36..01df70b2b3 100644
--- a/packages/state-manager/src/sagas/publicChannels/publicChannels.selectors.ts
+++ b/packages/state-manager/src/sagas/publicChannels/publicChannels.selectors.ts
@@ -23,6 +23,12 @@ import {
   INITIAL_CURRENT_CHANNEL_ID,
   type UserProfile,
 } from '@quiet/types'
+import { networkSelectors } from '../network/network.selectors'
+import { communitiesSelectors } from '../communities/communities.selectors'
+import createLogger from '../../utils/logger'
+import { isMessageUnsent } from '../../utils/messages/messages.utils'
+
+const logger = createLogger('publicChannels')
 
 const selectState: CreatedSelectors[StoreKeys.PublicChannels] = (state: StoreState) => state[StoreKeys.PublicChannels]
 
@@ -50,7 +56,7 @@ export const subscribedChannels = createSelector(selectChannelsSubscriptions, su
 export const selectGeneralChannel = createSelector(selectChannels, channels => {
   const draft = channels.find(item => item.name === 'general')
   if (!draft) {
-    console.error('No general channel')
+    logger.error('No general channel')
     return
   }
   const channel: PublicChannel = {
@@ -124,7 +130,7 @@ export const getChannelById = (channelId: string) =>
   createSelector(publicChannels, channels => {
     const channel = channels.find(channel => channel.id === channelId)
     if (!channel) {
-      console.log('channel dont exist')
+      logger.warn(`Channel with ID ${channelId} does not exist`)
     }
     return channel
   })
@@ -215,9 +221,21 @@ export const dailyGroupedCurrentChannelMessages = createSelector(displayableCurr
  */
 export const currentChannelMessagesMergedBySender = createSelector(
   dailyGroupedCurrentChannelMessages,
-  (groups: MessagesGroupsType) => {
+  networkSelectors.communityLastConnectedAt,
+  networkSelectors.allPeersDisconnectedAt,
+  networkSelectors.connectedPeers,
+  communitiesSelectors.peerList,
+  (
+    groups: MessagesGroupsType,
+    lastConnectedTime: number,
+    allPeersDisconnectedAt: number | undefined,
+    connectedPeers: string[],
+    communityPeerList: string[] | undefined
+  ) => {
     const result: MessagesDailyGroups = {}
+
     for (const day in groups) {
+      let lastWasUnsent = false
       result[day] = groups[day].reduce((merged: DisplayableMessage[][], message: DisplayableMessage) => {
         if (!merged.length) {
           merged.push([message])
@@ -228,17 +246,29 @@ export const currentChannelMessagesMergedBySender = createSelector(
         const index = merged.length && merged.length - 1
         const last = merged[index][0]
 
+        // Determine if a message is "unsent"
+        const isUnsent = isMessageUnsent(
+          message,
+          lastConnectedTime,
+          allPeersDisconnectedAt,
+          connectedPeers,
+          communityPeerList
+        )
+
         if (
           last?.pubKey === message?.pubKey &&
           message.createdAt - last.createdAt < 300 &&
           message.type !== MessageType.Info &&
-          last.type !== MessageType.Info
+          last.type !== MessageType.Info &&
+          isUnsent === lastWasUnsent
         ) {
           merged[index].push(message)
         } else {
           merged.push([message])
         }
 
+        lastWasUnsent = isUnsent
+
         return merged
       }, [])
     }
diff --git a/packages/state-manager/src/sagas/publicChannels/publicChannels.slice.ts b/packages/state-manager/src/sagas/publicChannels/publicChannels.slice.ts
index 9ae34b9b28..9902a90c55 100644
--- a/packages/state-manager/src/sagas/publicChannels/publicChannels.slice.ts
+++ b/packages/state-manager/src/sagas/publicChannels/publicChannels.slice.ts
@@ -7,7 +7,7 @@ import {
   publicChannelsSubscriptionsAdapter,
 } from './publicChannels.adapter'
 
-import logger from '../../utils/logger'
+import createLogger from '../../utils/logger'
 import {
   type CacheMessagesPayload,
   type DeleteChannelResponse,
@@ -30,7 +30,7 @@ import {
   type SetCurrentChannelPayload,
   type UpdateNewestMessagePayload,
 } from '@quiet/types'
-const log = logger('publicChannels')
+const logger = createLogger('publicChannels')
 
 export class PublicChannelsState {
   public currentChannelId: string = INITIAL_CURRENT_CHANNEL_ID
diff --git a/packages/state-manager/src/sagas/publicChannels/publicChannels.transform.ts b/packages/state-manager/src/sagas/publicChannels/publicChannels.transform.ts
index 9b3cb2831c..5c385bddfb 100644
--- a/packages/state-manager/src/sagas/publicChannels/publicChannels.transform.ts
+++ b/packages/state-manager/src/sagas/publicChannels/publicChannels.transform.ts
@@ -3,6 +3,9 @@ import { createTransform } from 'redux-persist'
 import { StoreKeys } from '../store.keys'
 import { publicChannelsAdapter, publicChannelsSubscriptionsAdapter } from './publicChannels.adapter'
 import { type PublicChannelsState } from './publicChannels.slice'
+import createLogger from '../../utils/logger'
+
+const logger = createLogger('publicChannels')
 
 export const PublicChannelsTransform = createTransform(
   (inboundState: PublicChannelsState, _key: any) => {
@@ -26,8 +29,8 @@ const getGeneralChannelId = (state: PublicChannelsState) => {
   const selectors = publicChannelsAdapter.getSelectors()
   const publicChannelStorage = selectors.selectAll(state.channels)
   const generalChannel = publicChannelStorage.find(channel => channel.name === 'general')
-  console.log('PublicChannelsTransform: existing general channel id', generalChannel?.id)
+  logger.info('PublicChannelsTransform: existing general channel id', generalChannel?.id)
   const generalChannelId = generalChannel?.id || INITIAL_CURRENT_CHANNEL_ID
-  console.log('PublicChannelsTransform: new general channel id', generalChannelId)
+  logger.info('PublicChannelsTransform: new general channel id', generalChannelId)
   return generalChannelId
 }
diff --git a/packages/state-manager/src/sagas/publicChannels/sendIntroductionMessage/sendIntroductionMessage.saga.ts b/packages/state-manager/src/sagas/publicChannels/sendIntroductionMessage/sendIntroductionMessage.saga.ts
index 8a485494b4..51f1b1ff7d 100644
--- a/packages/state-manager/src/sagas/publicChannels/sendIntroductionMessage/sendIntroductionMessage.saga.ts
+++ b/packages/state-manager/src/sagas/publicChannels/sendIntroductionMessage/sendIntroductionMessage.saga.ts
@@ -7,8 +7,12 @@ import { identitySelectors } from '../../identity/identity.selectors'
 import { identityActions } from '../../identity/identity.slice'
 import { userJoinedMessage } from '@quiet/common'
 import { publicChannelsActions } from '../publicChannels.slice'
+import createLogger from '../../../utils/logger'
+
+const logger = createLogger('publicChannels')
 
 export function* sendIntroductionMessageSaga(): Generator {
+  logger.info('Sending introduction message')
   const community = yield* select(communitiesSelectors.currentCommunity)
   const identity = yield* select(identitySelectors.currentIdentity)
   const generalChannel = yield* select(publicChannelsSelectors.generalChannel)
diff --git a/packages/state-manager/src/sagas/socket/startConnection/startConnection.saga.ts b/packages/state-manager/src/sagas/socket/startConnection/startConnection.saga.ts
index a64a65224c..9b47935c16 100644
--- a/packages/state-manager/src/sagas/socket/startConnection/startConnection.saga.ts
+++ b/packages/state-manager/src/sagas/socket/startConnection/startConnection.saga.ts
@@ -1,7 +1,7 @@
 import { eventChannel } from 'redux-saga'
 import { type Socket } from '../../../types'
 import { all, call, fork, put, takeEvery } from 'typed-redux-saga'
-import logger from '../../../utils/logger'
+import createLogger from '../../../utils/logger'
 import { appActions } from '../../app/app.slice'
 import { appMasterSaga } from '../../app/app.master.saga'
 import { connectionActions } from '../../appConnection/connection.slice'
@@ -43,9 +43,10 @@ import {
   type CommunityMetadata,
   type UserProfilesStoredEvent,
   SocketActionTypes,
+  PeersNetworkDataPayload,
 } from '@quiet/types'
 
-const log = logger('socket')
+const logger = createLogger('socket')
 
 export function subscribe(socket: Socket) {
   return eventChannel<
@@ -93,13 +94,15 @@ export function subscribe(socket: Socket) {
       emit(connectionActions.setConnectionProcess(payload))
     })
     // Misc
-    socket.on(SocketActionTypes.PEER_CONNECTED, (payload: { peers: string[] }) => {
-      log(`${SocketActionTypes.PEER_CONNECTED}: ${payload}`)
-      emit(networkActions.addConnectedPeers(payload.peers))
+    socket.on(SocketActionTypes.PEER_CONNECTED, (payload: PeersNetworkDataPayload) => {
+      logger.info(`${SocketActionTypes.PEER_CONNECTED}: ${JSON.stringify(payload)}`)
+      emit(networkActions.addConnectedPeers(payload.peers.map(peer => peer.peer)))
+      emit(connectionActions.updateNetworkData(payload.peers))
     })
     socket.on(SocketActionTypes.PEER_DISCONNECTED, (payload: NetworkDataPayload) => {
+      logger.info(`${SocketActionTypes.PEER_DISCONNECTED}: ${JSON.stringify(payload)}`)
       emit(networkActions.removeConnectedPeer(payload.peer))
-      emit(connectionActions.updateNetworkData(payload))
+      emit(connectionActions.updateNetworkData([payload]))
     })
     socket.on(SocketActionTypes.MIGRATION_DATA_REQUIRED, (keys: string[]) => {
       emit(appActions.loadMigrationData(keys))
@@ -136,6 +139,7 @@ export function subscribe(socket: Socket) {
     // Community
 
     socket.on(SocketActionTypes.COMMUNITY_LAUNCHED, (payload: ResponseLaunchCommunityPayload) => {
+      logger.info(`${SocketActionTypes.COMMUNITY_LAUNCHED}: ${payload}`)
       emit(filesActions.checkForMissingFiles(payload.id))
       emit(networkActions.addInitializedCommunity(payload.id))
       emit(communitiesActions.clearInvitationCodes())
@@ -151,13 +155,12 @@ export function subscribe(socket: Socket) {
       // color in the console, which makes them difficult to find.
       // Also when only printing the payload, the full trace is not
       // available.
-      log.error(payload)
-      console.error(payload, payload.trace)
+      logger.error(`Error on socket:`, payload.trace)
       emit(errorsActions.handleError(payload))
     })
     // Certificates
     socket.on(SocketActionTypes.CSRS_STORED, (payload: SendCsrsResponse) => {
-      log(`${SocketActionTypes.CSRS_STORED}`)
+      logger.info(`${SocketActionTypes.CSRS_STORED}`)
       emit(usersActions.storeCsrs(payload))
     })
     socket.on(SocketActionTypes.CERTIFICATES_STORED, (payload: SendCertificatesResponse) => {
@@ -167,7 +170,7 @@ export function subscribe(socket: Socket) {
     // User Profile
 
     socket.on(SocketActionTypes.USER_PROFILES_STORED, (payload: UserProfilesStoredEvent) => {
-      log(`${SocketActionTypes.USER_PROFILES_STORED}`)
+      logger.info(`${SocketActionTypes.USER_PROFILES_STORED}`)
       emit(usersActions.setUserProfiles(payload.profiles))
     })
 
diff --git a/packages/state-manager/src/sagas/users/userProfile/saveUserProfile.saga.ts b/packages/state-manager/src/sagas/users/userProfile/saveUserProfile.saga.ts
index 8462f3b674..5d6bdc5205 100644
--- a/packages/state-manager/src/sagas/users/userProfile/saveUserProfile.saga.ts
+++ b/packages/state-manager/src/sagas/users/userProfile/saveUserProfile.saga.ts
@@ -11,11 +11,11 @@ import { fileToBase64String } from '@quiet/common'
 
 import { config } from '../../users/const/certFieldTypes'
 import { identitySelectors } from '../../identity/identity.selectors'
-import logger from '../../../utils/logger'
+import createLogger from '../../../utils/logger'
 import { usersActions } from '../users.slice'
 import { type Socket, applyEmitParams } from '../../../types'
 
-const log = logger('saveUserProfileSaga')
+const logger = createLogger('saveUserProfileSaga')
 
 export function* saveUserProfileSaga(socket: Socket, action: PayloadAction<{ photo?: File }>): Generator {
   const identity = yield* select(identitySelectors.currentIdentity)
@@ -28,7 +28,7 @@ export function* saveUserProfileSaga(socket: Socket, action: PayloadAction<{ pho
   try {
     base64EncodedPhoto = yield* call(fileToBase64String, action.payload.photo)
   } catch (err) {
-    log.error('Failed to base64 encode profile photo', err)
+    logger.error('Failed to base64 encode profile photo', err)
     return
   }
 
@@ -47,7 +47,7 @@ export function* saveUserProfileSaga(socket: Socket, action: PayloadAction<{ pho
     pubKey,
   }
 
-  console.log('Saving user profile', userProfile)
+  logger.info(`Saving user profile: ${userProfile}`)
 
   yield* apply(socket, socket.emit, applyEmitParams(SocketActionTypes.SET_USER_PROFILE, userProfile))
 }
diff --git a/packages/state-manager/src/sagas/users/users.selectors.ts b/packages/state-manager/src/sagas/users/users.selectors.ts
index 4902482597..6727668bd7 100644
--- a/packages/state-manager/src/sagas/users/users.selectors.ts
+++ b/packages/state-manager/src/sagas/users/users.selectors.ts
@@ -7,6 +7,9 @@ import { type Certificate } from 'pkijs'
 import { type CreatedSelectors, type StoreState } from '../store.types'
 import { type UserData, User } from '@quiet/types'
 import { ownerCertificate } from '../communities/communities.selectors'
+import createLogger from '../../utils/logger'
+
+const logger = createLogger('users')
 
 const usersSlice: CreatedSelectors[StoreKeys.Users] = (state: StoreState) => state[StoreKeys.Users]
 
@@ -31,7 +34,7 @@ export const certificatesMapping = createSelector(certificates, certs => {
     const peerId = getCertFieldValue(certificate, CertFieldsTypes.peerId)
 
     if (!username || !onionAddress || !peerId) {
-      console.error(`Could not parse certificate for pubkey ${pubKey}`)
+      logger.error(`Could not parse certificate for pubkey ${pubKey}`)
       return
     }
 
@@ -58,7 +61,7 @@ export const csrsMapping = createSelector(csrs, csrs => {
     const peerId = getReqFieldValue(csr, CertFieldsTypes.peerId)
 
     if (!username || !onionAddress || !peerId) {
-      console.error(`Could not parse certificate for pubkey ${pubKey}`)
+      logger.error(`Could not parse certificate for pubkey ${pubKey}`)
       return
     }
 
diff --git a/packages/state-manager/src/utils/logger.ts b/packages/state-manager/src/utils/logger.ts
index 569eb0be2b..3f68f4ce4e 100644
--- a/packages/state-manager/src/utils/logger.ts
+++ b/packages/state-manager/src/utils/logger.ts
@@ -1,3 +1,3 @@
-import logger from '@quiet/logger'
+import { createQuietLogger } from '@quiet/logger'
 
-export default logger('state-manager')
+export default createQuietLogger('state-manager')
diff --git a/packages/state-manager/src/utils/messages/messages.utils.ts b/packages/state-manager/src/utils/messages/messages.utils.ts
new file mode 100644
index 0000000000..7d72fc0a98
--- /dev/null
+++ b/packages/state-manager/src/utils/messages/messages.utils.ts
@@ -0,0 +1,23 @@
+import { DisplayableMessage } from '@quiet/types'
+
+export const isMessageUnsent = (
+  message: DisplayableMessage,
+  lastConnectedAtSeconds: number,
+  allPeersDisconnectedAtSeconds: number | undefined | null,
+  connectedPeers: string[],
+  communityPeerList: string[] | undefined
+): boolean => {
+  // don't consider it unsent if its an info message
+  if (message.type === 3) {
+    return false
+  }
+
+  // Determine if a message is "unsent"
+  const isRecent = lastConnectedAtSeconds < message.createdAt
+  const communityHasPeers = communityPeerList != null && communityPeerList.length > 1
+  const hasConnectedPeers = connectedPeers.length > 0
+  const peersDisconnectedRecently =
+    allPeersDisconnectedAtSeconds != null && allPeersDisconnectedAtSeconds < message.createdAt
+  const noPeersThisSession = allPeersDisconnectedAtSeconds == null && communityHasPeers
+  return communityHasPeers && isRecent && !hasConnectedPeers && (noPeersThisSession || peersDisconnectedRecently)
+}
diff --git a/packages/state-manager/src/utils/tests/helpers.ts b/packages/state-manager/src/utils/tests/helpers.ts
index 266289f745..689c083ee5 100644
--- a/packages/state-manager/src/utils/tests/helpers.ts
+++ b/packages/state-manager/src/utils/tests/helpers.ts
@@ -1,11 +1,11 @@
 import { keyFromCertificate, loadPrivateKey, parseCertificate, sign } from '@quiet/identity'
-import logger from '../logger'
+import createLogger from '../logger'
 // import fs from 'fs'
 // import os from 'os'
 import { arrayBufferToString } from 'pvutils'
 import { config } from '../../sagas/users/const/certFieldTypes'
 import { type PeerId } from '@quiet/types'
-const log = logger('test')
+const logger = createLogger('test')
 
 const notBeforeDate = new Date(Date.UTC(2010, 11, 28, 10, 10, 10))
 const notAfterDate = new Date(Date.UTC(2030, 11, 28, 10, 10, 10))
diff --git a/packages/types/src/connection.ts b/packages/types/src/connection.ts
index afee30991b..c6a447ad0d 100644
--- a/packages/types/src/connection.ts
+++ b/packages/types/src/connection.ts
@@ -11,6 +11,10 @@ export interface NetworkDataPayload {
   lastSeen: number
 }
 
+export interface PeersNetworkDataPayload {
+  peers: NetworkDataPayload[]
+}
+
 export interface NetworkStats {
   peerId: string
   lastSeen: number