diff --git a/storybook/directorieswatcher.cpp b/storybook/directorieswatcher.cpp
index 8a8b56bdc4..8a8452548f 100644
--- a/storybook/directorieswatcher.cpp
+++ b/storybook/directorieswatcher.cpp
@@ -13,7 +13,8 @@ DirectoriesWatcher::DirectoriesWatcher(QObject *parent)
 void DirectoriesWatcher::addPaths(const QStringList &paths)
 {
     for (auto& path : paths) {
-        QDirIterator it(path, QDir::AllDirs | QDir::NoDotAndDotDot, QDirIterator::Subdirectories);
+        QDirIterator it(path, QDir::AllDirs | QDir::NoDotAndDotDot,
+                        QDirIterator::Subdirectories);
 
         while (it.hasNext()) {
             const auto& subpath = it.filePath();
diff --git a/storybook/main.qml b/storybook/main.qml
index 671a872eb7..d2b5beaf1b 100644
--- a/storybook/main.qml
+++ b/storybook/main.qml
@@ -47,6 +47,15 @@ ApplicationWindow {
         ListElement {
             title: "LanguageCurrencySettings"
         }
+        ListElement {
+            title: "CommunityProfilePopupInviteFriendsPanel"
+        }
+        ListElement {
+            title: "CommunityProfilePopupInviteMessagePanel"
+        }
+        ListElement {
+            title: "InviteFriendsToCommunityPopup"
+        }
     }
 
     SplitView {
diff --git a/storybook/pages/CommunityProfilePopupInviteFriendsPanelPage.qml b/storybook/pages/CommunityProfilePopupInviteFriendsPanelPage.qml
new file mode 100644
index 0000000000..7a14380118
--- /dev/null
+++ b/storybook/pages/CommunityProfilePopupInviteFriendsPanelPage.qml
@@ -0,0 +1,89 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+
+import AppLayouts.Chat.panels.communities 1.0
+import utils 1.0
+
+Item {
+    property bool globalUtilsReady: false
+    property bool mainModuleReady: false
+
+    QtObject {
+        function getCompressedPk(publicKey) {
+            return "compressed"
+        }
+
+        function getColorHashAsJson(publicKey) {
+            return JSON.stringify([{colorId: 0, segmentLength: 1},
+                                   {colorId: 19, segmentLength: 2}])
+        }
+
+        Component.onCompleted: {
+            Utils.globalUtilsInst = this
+            globalUtilsReady = true
+
+        }
+        Component.onDestruction: {
+            globalUtilsReady = false
+            Utils.globalUtilsInst = {}
+        }
+    }
+
+    QtObject {
+        function getContactDetailsAsJson() {
+            return JSON.stringify({})
+        }
+
+        Component.onCompleted: {
+            mainModuleReady = true
+            Utils.mainModuleInst = this
+        }
+        Component.onDestruction: {
+            mainModuleReady = false
+            Utils.mainModuleInst = {}
+        }
+    }
+
+    Frame {
+        anchors.centerIn: parent
+
+        Loader {
+            active: globalUtilsReady && mainModuleReady
+            sourceComponent: CommunityProfilePopupInviteFriendsPanel {
+                id: panel
+
+                community: ({ id: "communityId" })
+
+                rootStore: QtObject {
+                    function communityHasMember(communityId, pubKey) {
+                        return false
+                    }
+                }
+
+                contactsStore: QtObject {
+                    readonly property ListModel myContactsModel: ListModel {
+                        Component.onCompleted: {
+                            const keys = []
+
+                            for (let i = 0; i < 20; i++) {
+                                const key = `pub_key_${i}`
+
+                                append({
+                                    alias: "",
+                                    colorId: "1",
+                                    displayName: `contact ${i}`,
+                                    ensName: "",
+                                    icon: "",
+                                    isContact: true,
+                                    localNickname: "",
+                                    onlineStatus: 1,
+                                    pubKey: key
+                                })
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/storybook/pages/CommunityProfilePopupInviteMessagePanelPage.qml b/storybook/pages/CommunityProfilePopupInviteMessagePanelPage.qml
new file mode 100644
index 0000000000..b782387c90
--- /dev/null
+++ b/storybook/pages/CommunityProfilePopupInviteMessagePanelPage.qml
@@ -0,0 +1,89 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+
+import AppLayouts.Chat.panels.communities 1.0
+import utils 1.0
+
+Item {
+    property bool globalUtilsReady: false
+    property bool mainModuleReady: false
+
+    QtObject {
+        function getCompressedPk(publicKey) {
+            return "compressed"
+        }
+
+        function getColorHashAsJson(publicKey) {
+            return JSON.stringify([{colorId: 0, segmentLength: 1},
+                                   {colorId: 19, segmentLength: 2}])
+        }
+
+        Component.onCompleted: {
+            Utils.globalUtilsInst = this
+            globalUtilsReady = true
+        }
+
+        Component.onDestruction: {
+            globalUtilsReady = false
+            Utils.globalUtilsInst = {}
+        }
+    }
+
+    QtObject {
+        function getContactDetailsAsJson() {
+            return JSON.stringify({})
+        }
+
+        Component.onCompleted: {
+            Utils.mainModuleInst = this
+            mainModuleReady = true
+        }
+
+        Component.onDestruction: {
+            mainModuleReady = false
+            Utils.mainModuleInst = {}
+        }
+    }
+
+    Frame {
+        anchors.centerIn: parent
+
+        height: parent.height * 0.8
+        width: parent.width * 0.8
+
+        Loader {
+            active: globalUtilsReady && mainModuleReady
+
+            anchors.fill: parent
+
+            sourceComponent: CommunityProfilePopupInviteMessagePanel {
+                id: panel
+
+                contactsStore: QtObject {
+                    readonly property ListModel myContactsModel: ListModel {
+                        Component.onCompleted: {
+                            const keys = []
+
+                            for (let i = 0; i < 20; i++) {
+                                const key = `pub_key_${i}`
+
+                                append({
+                                    isContact: true,
+                                    onlineStatus: 1,
+                                    displayName: `contact ${i}`,
+                                    icon: "",
+                                    colorId: "1",
+                                    pubKey: key
+                                })
+
+                                keys.push(key)
+                            }
+
+                            panel.pubKeys = keys
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/storybook/pages/InviteFriendsToCommunityPopupPage.qml b/storybook/pages/InviteFriendsToCommunityPopupPage.qml
new file mode 100644
index 0000000000..757afbde47
--- /dev/null
+++ b/storybook/pages/InviteFriendsToCommunityPopupPage.qml
@@ -0,0 +1,96 @@
+import QtQuick 2.14
+
+import AppLayouts.Chat.popups 1.0
+import utils 1.0
+
+Item {
+    Rectangle {
+        color: 'lightgray'
+        anchors.fill: parent
+    }
+
+    property bool globalUtilsReady: false
+    property bool mainModuleReady: false
+
+    QtObject {
+        function getCompressedPk(publicKey) {
+            return "compressed"
+        }
+
+        function getColorHashAsJson(publicKey) {
+            return JSON.stringify([{colorId: 0, segmentLength: 1},
+                                   {colorId: 19, segmentLength: 2}])
+        }
+
+        Component.onCompleted: {
+            Utils.globalUtilsInst = this
+            globalUtilsReady = true
+
+        }
+        Component.onDestruction: {
+            globalUtilsReady = false
+            Utils.globalUtilsInst = {}
+        }
+    }
+
+    QtObject {
+        function getContactDetailsAsJson() {
+            return JSON.stringify({})
+        }
+
+        Component.onCompleted: {
+            mainModuleReady = true
+            Utils.mainModuleInst = this
+        }
+        Component.onDestruction: {
+            mainModuleReady = false
+            Utils.mainModuleInst = {}
+        }
+    }
+
+    Loader {
+        active: globalUtilsReady && mainModuleReady
+        anchors.fill: parent
+
+        sourceComponent: InviteFriendsToCommunityPopup {
+            parent: parent
+            modal: false
+            anchors.centerIn: parent
+
+            community: ({
+                id: "communityId",
+                name: "community-name"
+            })
+
+            rootStore: QtObject {
+                function communityHasMember(communityId, pubKey) {
+                    return false
+                }
+            }
+
+            contactsStore: QtObject {
+                readonly property ListModel myContactsModel: ListModel {
+                    Component.onCompleted: {
+                        for (let i = 0; i < 20; i++) {
+                            const key = `pub_key_${i}`
+
+                            append({
+                                alias: "",
+                                colorId: "1",
+                                displayName: `contact ${i}`,
+                                ensName: "",
+                                icon: "",
+                                isContact: true,
+                                localNickname: "",
+                                onlineStatus: 1,
+                                pubKey: key
+                            })
+                        }
+                    }
+                }
+            }
+
+            Component.onCompleted: open()
+        }
+    }
+}
diff --git a/storybook/src/Storybook/LogsView.qml b/storybook/src/Storybook/LogsView.qml
index 37d09561d6..f5aacebbf5 100644
--- a/storybook/src/Storybook/LogsView.qml
+++ b/storybook/src/Storybook/LogsView.qml
@@ -1,7 +1,5 @@
 import QtQuick 2.14
 
-import StatusQ.Core.Theme 0.1
-
 Flickable {
     id: root
 
@@ -17,7 +15,7 @@ Flickable {
 
     TextEdit {
         id: logTextEdit
-        font.family: Theme.palette.monoFont.name
+        font.family: "courier"
         font.letterSpacing: 1.2
         readOnly: true
         selectByMouse: true
diff --git a/ui/app/AppLayouts/Chat/panels/communities/qmldir b/ui/app/AppLayouts/Chat/panels/communities/qmldir
new file mode 100644
index 0000000000..f48616f797
--- /dev/null
+++ b/ui/app/AppLayouts/Chat/panels/communities/qmldir
@@ -0,0 +1,2 @@
+CommunityProfilePopupInviteFriendsPanel 1.0 CommunityProfilePopupInviteFriendsPanel.qml
+CommunityProfilePopupInviteMessagePanel 1.0 CommunityProfilePopupInviteMessagePanel.qml