diff --git a/storybook/PagesModel.qml b/storybook/PagesModel.qml
index d4702d9a3d..dc8070d44c 100644
--- a/storybook/PagesModel.qml
+++ b/storybook/PagesModel.qml
@@ -53,6 +53,10 @@ ListModel {
         title: "ImagesGridView"
         section: "Components"
     }
+    ListElement {
+        title: "ContactsListAndSearch"
+        section: "Components"
+    }
     ListElement {
          title: "BrowserSettings"
          section: "Settings"
diff --git a/storybook/pages/ContactsListAndSearchPage.qml b/storybook/pages/ContactsListAndSearchPage.qml
new file mode 100644
index 0000000000..aca03d3e9e
--- /dev/null
+++ b/storybook/pages/ContactsListAndSearchPage.qml
@@ -0,0 +1,163 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+
+import shared.controls 1.0
+import shared.stores 1.0
+
+import utils 1.0
+
+Pane {
+    QtObject {
+        id: userProfileInst
+
+        Component.onCompleted: RootStore.userProfileInst = userProfileInst
+    }
+
+    QtObject {
+        id: chatSectionChatContentInputArea
+    }
+
+    QtObject {
+        id: mainModule
+
+        signal resolvedENS
+    }
+
+    QtObject {
+        id: globalUtilsInst
+
+        function isCompressedPubKey() {
+            return true
+        }
+
+        function getCompressedPk(publicKey) {
+            return "zx3sh" + publicKey
+        }
+
+        Component.onCompleted: Utils.globalUtilsInst = globalUtilsInst
+    }
+
+    QtObject {
+        id: mainModuleInst
+
+        function isCompressedPubKey() {
+            return true
+        }
+
+        function getContactDetailsAsJson() {
+            return JSON.stringify({
+                alias: "alias",
+                isAdded: false
+            })
+        }
+
+        Component.onCompleted: Utils.mainModuleInst = mainModuleInst
+    }
+
+    ContactsListAndSearch {
+        anchors.fill: parent
+
+        community: ({ id: "communityId" })
+
+        contactsStore: QtObject {
+            readonly property ListModel myContactsModel: ListModel {
+                ListElement {
+                    pubKey: "0x02342342342"
+                    isContact: true
+                    onlineStatus: true
+                    displayName: "x1"
+                    icon: ""
+                    colorId: 0
+                    ensName: "ens name"
+                    isBlocked: false
+                    alias: "some alias"
+                    localNickname: "l1"
+                }
+                ListElement {
+                    pubKey: "0x02342342342"
+                    isContact: true
+                    onlineStatus: true
+                    displayName: "x2 sdfsd"
+                    icon: ""
+                    colorId: 0
+                    ensName: "ens name"
+                    isBlocked: false
+                    alias: "some alias"
+                    localNickname: ""
+                }
+                ListElement {
+                    pubKey: "0x02342342342"
+                    isContact: true
+                    onlineStatus: true
+                    displayName: "x3 xcvxcv"
+                    icon: ""
+                    colorId: 0
+                    ensName: "ens name"
+                    isBlocked: false
+                    alias: "some alias"
+                    localNickname: ""
+                }
+                ListElement {
+                    pubKey: "0x02342342342"
+                    isContact: true
+                    onlineStatus: true
+                    displayName: "x4 drt5"
+                    icon: ""
+                    colorId: 0
+                    ensName: "ens name"
+                    isBlocked: false
+                    alias: "some alias"
+                    localNickname: ""
+                }
+                ListElement {
+                    pubKey: "0x02342342342"
+                    isContact: true
+                    onlineStatus: true
+                    displayName: "x4 drt5e"
+                    icon: ""
+                    colorId: 0
+                    ensName: "ens name"
+                    isBlocked: false
+                    alias: "some alias"
+                    localNickname: ""
+                }
+                ListElement {
+                    pubKey: "0x02342342342"
+                    isContact: true
+                    onlineStatus: true
+                    displayName: "x4 drtew5"
+                    icon: ""
+                    colorId: 0
+                    ensName: "ens name"
+                    isBlocked: false
+                    alias: "some alias"
+                    localNickname: ""
+                }
+                ListElement {
+                    pubKey: "0x02342342342"
+                    isContact: true
+                    onlineStatus: true
+                    displayName: "x4 drt5e"
+                    icon: ""
+                    colorId: 0
+                    ensName: "ens name"
+                    isBlocked: false
+                    alias: "some alias"
+                    localNickname: ""
+                }
+                ListElement {
+                    pubKey: "0x02342342342"
+                    isContact: true
+                    onlineStatus: true
+                    displayName: "x4 drtew5"
+                    icon: ""
+                    colorId: 0
+                    ensName: "ens name"
+                    isBlocked: false
+                    alias: "some alias"
+                    localNickname: ""
+                }
+            }
+        }
+    }
+}
diff --git a/storybook/stubs/shared/stores/RootStore.qml b/storybook/stubs/shared/stores/RootStore.qml
new file mode 100644
index 0000000000..acef85e473
--- /dev/null
+++ b/storybook/stubs/shared/stores/RootStore.qml
@@ -0,0 +1,7 @@
+pragma Singleton
+
+import QtQuick 2.14
+
+QtObject {
+    property var userProfileInst
+}
diff --git a/storybook/stubs/shared/stores/qmldir b/storybook/stubs/shared/stores/qmldir
new file mode 100644
index 0000000000..3b0c907239
--- /dev/null
+++ b/storybook/stubs/shared/stores/qmldir
@@ -0,0 +1 @@
+singleton RootStore 1.0 RootStore.qml