diff --git a/ui/app/AppLayouts/Chat/components/PrivateChatPopup.qml b/ui/app/AppLayouts/Chat/components/PrivateChatPopup.qml
index 78711fc0f1..c4e99cb10a 100644
--- a/ui/app/AppLayouts/Chat/components/PrivateChatPopup.qml
+++ b/ui/app/AppLayouts/Chat/components/PrivateChatPopup.qml
@@ -5,133 +5,66 @@ import "../../../../imports"
 import "../../../../shared"
 import "./"
 
-Item {
-  function open() {
-    popup.open()
-    chatKey.text = "";
-    chatKey.forceActiveFocus(Qt.MouseFocusReason)
-  }
-
-  function close() {
-    popup.close()
-  }
-
-  Popup {
+ModalPopup {
     id: popup
-    modal: true
-    closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
-    Overlay.modal: Rectangle {
-        color: "#60000000"
-    }
-    parent: Overlay.overlay
-    x: Math.round((parent.width - width) / 2)
-    y: Math.round((parent.height - height) / 2)
-    width: 480
-    height: 509
-    background: Rectangle {
-        color: Theme.white
+    title: qsTr("New chat")
+
+    Rectangle {
+        id: chatKeyBox
+        height: 44
+        color: Theme.grey
+        anchors.top: separator.bottom
+        anchors.topMargin: 16
         radius: 8
-    }
-    padding: 0
-    contentItem: Item {
-        Text {
-            id: modalDialogTitle
-            text: qsTr("New chat")
-            anchors.top: parent.top
-            anchors.left: parent.left
-            font.bold: true
-            font.pixelSize: 17
-            anchors.leftMargin: 16
-            anchors.topMargin: 16
-        }
+        anchors.right: parent.right
+        anchors.rightMargin: 16
+        anchors.left: parent.left
+        anchors.leftMargin: 16
 
-        Image {
-            id: closeModalImg
-            anchors.top: parent.top
-            anchors.right: parent.right
-            anchors.rightMargin: 16
-            anchors.topMargin: 16
-            source: "../../../img/close.svg"
-            MouseArea {
-                id: closeModalMouseArea
-                cursorShape: Qt.PointingHandCursor
-                anchors.fill: parent
-                onClicked : {
-                    popup.close()
-                }
-            }
-        }
-        
-        Separator {
-            id: separator
-            anchors.top: modalDialogTitle.bottom
-        }
-
-        Rectangle {
-            id: chatKeyBox
-            height: 44
-            color: Theme.grey
-            anchors.top: separator.bottom
-            anchors.topMargin: 16
-            radius: 8
-            anchors.right: parent.right
-            anchors.rightMargin: 16
+        TextField {
+            id: chatKey
+            placeholderText: qsTr("Enter ENS username or chat key")
             anchors.left: parent.left
             anchors.leftMargin: 16
-
-            TextField {
-                id: chatKey
-                placeholderText: qsTr("Enter ENS username or chat key")
-                anchors.left: parent.left
-                anchors.leftMargin: 16
-                anchors.verticalCenter: parent.verticalCenter
-                font.pixelSize: 15
-                background: Rectangle {
-                    color: "#00000000"
-                }
-                width: popup.width - 65
-            }
-
-            MouseArea {
-                id: mouseArea
-                anchors.fill: parent
-                onClicked : {
-                    chatKey.forceActiveFocus(Qt.MouseFocusReason)
-                }
-            }
-        }
-
-        Separator {
-            id: separator2
-            anchors.bottom: parent.bottom
-            anchors.bottomMargin: 75
-        }
-
-        Button {
-            id: btnNewChat
-            anchors.bottom: parent.bottom
-            anchors.right: parent.right
-            anchors.bottomMargin: 16
-            anchors.rightMargin: 16
-            width: 44
-            height: 44
-            Image {
-              source: chatKey.text == "" ? "../../../img/arrow-button-inactive.svg" : "../../../img/arrow-btn-active.svg"
-            }
+            anchors.verticalCenter: parent.verticalCenter
+            font.pixelSize: 15
             background: Rectangle {
-              color: "transparent"
+                color: "#00000000"
             }
-            MouseArea {
-                id: btnMAnewChat
-                cursorShape: Qt.PointingHandCursor
-                anchors.fill: parent
-                onClicked : {
-                    if(chatKey.text === "") return;
-                    chatsModel.joinChat(chatKey.text, Constants.chatTypeOneToOne);
-                    popup.close();
-                }
+            width: chatKeyBox.width - 32
+        }
+
+        MouseArea {
+            id: mouseArea
+            anchors.fill: parent
+            onClicked : {
+                chatKey.forceActiveFocus(Qt.MouseFocusReason)
+            }
+        }
+    }
+
+
+
+    footer: Button {
+        width: 44
+        height: 44
+        anchors.bottom: parent.bottom
+        anchors.right: parent.right
+        Image {
+            source: chatKey.text == "" ? "../../../img/arrow-button-inactive.svg" : "../../../img/arrow-btn-active.svg"
+        }
+        background: Rectangle {
+            color: "transparent"
+        }
+        MouseArea {
+            id: btnMAnewChat
+            cursorShape: Qt.PointingHandCursor
+            anchors.fill: parent
+            onClicked : {
+                if(chatKey.text === "") return;
+                chatsModel.joinChat(chatKey.text, Constants.chatTypeOneToOne);
+                popup.close();
             }
         }
     }
-  }
 }
diff --git a/ui/app/AppLayouts/Chat/components/PublicChatPopup.qml b/ui/app/AppLayouts/Chat/components/PublicChatPopup.qml
index 4fc0f8450a..b4e586fde4 100644
--- a/ui/app/AppLayouts/Chat/components/PublicChatPopup.qml
+++ b/ui/app/AppLayouts/Chat/components/PublicChatPopup.qml
@@ -5,195 +5,125 @@ import "../../../../imports"
 import "../../../../shared"
 import "./"
 
-Item {
-  function open(){
-    popup.open()
-    channelName.text = "";
-    channelName.forceActiveFocus(Qt.MouseFocusReason)
-  }
 
-  function close(){
-    popup.close()
-  }
-
-  Popup {
+ModalPopup {
     id: popup
-    modal: true
-    closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
-    Overlay.modal: Rectangle {
-        color: "#60000000"
-    }
-    parent: Overlay.overlay
-    x: Math.round((parent.width - width) / 2)
-    y: Math.round((parent.height - height) / 2)
-    width: 480
-    height: 509
-    background: Rectangle {
-        color: Theme.white
-        radius: 8
-    }
-    padding: 0
-    contentItem: Item {
+    title: qsTr("Join public chat")
+    
+    Row {
+        id: description
+        Layout.fillHeight: false
+        Layout.fillWidth: true
+        width: parent.width
+        padding: 20
+
         Text {
-            id: modalDialogTitle
-            text: qsTr("Join public chat")
-            anchors.top: parent.top
+            width: parent.width - 20
+            font.pixelSize: 15
+            text: qsTr("A public chat is where you get to hang out with others, make friends and talk about subjects of your interest.")
+            wrapMode: Text.WordWrap
+            verticalAlignment: Text.AlignTop
+        }
+    }
+
+    Rectangle {
+        id: channelNameBox
+        height: 44
+        color: Theme.grey
+        anchors.top: description.bottom
+        radius: 8
+        anchors.right: parent.right
+        anchors.rightMargin: 16
+        anchors.left: parent.left
+        anchors.leftMargin: 16
+
+        TextField {
+            id: channelName
+            placeholderText: qsTr("chat-name")
             anchors.left: parent.left
-            font.bold: true
-            font.pixelSize: 17
-            anchors.leftMargin: 16
-            anchors.topMargin: 16
+            anchors.leftMargin: 32
+            anchors.verticalCenter: parent.verticalCenter
+            font.pixelSize: 15
+            background: Rectangle {
+                color: "#00000000"
+            }
+            width: channelNameBox.width - 32
         }
 
         Image {
-            id: closeModalImg
-            anchors.top: parent.top
-            anchors.right: parent.right
-            anchors.rightMargin: 16
-            anchors.topMargin: 16
-            source: "../../../img/close.svg"
-            MouseArea {
-                id: closeModalMouseArea
-                cursorShape: Qt.PointingHandCursor
-                anchors.fill: parent
-                onClicked : {
-                    popup.close()
-                }
-            }
-        }
-        
-        Separator {
-            id: separator
-            anchors.top: modalDialogTitle.bottom
+            id: image4
+            anchors.left: parent.left
+            anchors.leftMargin: 10
+            anchors.verticalCenter: parent.verticalCenter
+            fillMode: Image.PreserveAspectFit
+            source: "../../../img/hash.svg"
         }
 
-        Row {
-            id: description
+        MouseArea {
+            id: mouseArea
+            anchors.fill: parent
+            onClicked : {
+                channelName.forceActiveFocus(Qt.MouseFocusReason)
+            }
+        }
+    }
+
+    RowLayout {
+        id: row
+        Layout.fillHeight: false
+        Layout.fillWidth: true
+        anchors.right: parent.right
+        anchors.rightMargin: 65
+        anchors.left: parent.left
+        anchors.leftMargin: 65
+        anchors.top: channelNameBox.bottom
+        anchors.topMargin: 37
+
+        Flow {
             Layout.fillHeight: false
             Layout.fillWidth: true
-            anchors.top: separator.bottom
-            anchors.left: parent.left
-            anchors.right: parent.right
-            width: parent.width
-            padding: 20
+            spacing: 20
 
-            Text {
-                width: parent.width - 20
-                font.pixelSize: 15
-                text: qsTr("A public chat is where you get to hang out with others, make friends and talk about subjects of your interest.")
-                wrapMode: Text.WordWrap
-                verticalAlignment: Text.AlignTop
-            }
+            SuggestedChannel { channel: "ethereum" }
+            SuggestedChannel { channel: "status" }
+            SuggestedChannel { channel: "general" }
+            SuggestedChannel { channel: "dapps" }
+            SuggestedChannel { channel: "crypto" }
+            SuggestedChannel { channel: "introductions" }
+            SuggestedChannel { channel: "tech" }
+            SuggestedChannel { channel: "ama" }
+            SuggestedChannel { channel: "gaming" }
+            SuggestedChannel { channel: "sexychat" }
+            SuggestedChannel { channel: "nsfw" }
+            SuggestedChannel { channel: "science" }
+            SuggestedChannel { channel: "music" }
+            SuggestedChannel { channel: "movies" }
+            SuggestedChannel { channel: "sports" }
+            SuggestedChannel { channel: "politics" }
         }
+    }
 
-        Rectangle {
-            id: channelNameBox
-            height: 44
-            color: Theme.grey
-            anchors.top: description.bottom
-            radius: 8
-            anchors.right: parent.right
-            anchors.rightMargin: 16
-            anchors.left: parent.left
-            anchors.leftMargin: 16
-
-            TextField {
-                id: channelName
-                placeholderText: qsTr("chat-name")
-                anchors.left: parent.left
-                anchors.leftMargin: 32
-                anchors.verticalCenter: parent.verticalCenter
-                font.pixelSize: 15
-                background: Rectangle {
-                    color: "#00000000"
-                }
-                width: popup.width - 65
-            }
-
-            Image {
-                id: image4
-                anchors.left: parent.left
-                anchors.leftMargin: 10
-                anchors.verticalCenter: parent.verticalCenter
-                fillMode: Image.PreserveAspectFit
-                source: "../../../img/hash.svg"
-            }
-
-            MouseArea {
-                id: mouseArea
-                anchors.fill: parent
-                onClicked : {
-                    channelName.forceActiveFocus(Qt.MouseFocusReason)
-                }
-            }
+    footer: Button {
+        width: 44
+        height: 44
+        anchors.bottom: parent.bottom
+        anchors.right: parent.right
+        background: Rectangle {
+            color: "transparent"
         }
-
-        RowLayout {
-            id: row
-            Layout.fillHeight: false
-            Layout.fillWidth: true
-            anchors.right: parent.right
-            anchors.rightMargin: 65
-            anchors.left: parent.left
-            anchors.leftMargin: 65
-            anchors.top: channelNameBox.bottom
-            anchors.topMargin: 37
-
-            Flow {
-                Layout.fillHeight: false
-                Layout.fillWidth: true
-                spacing: 20
-
-                SuggestedChannel { channel: "ethereum" }
-                SuggestedChannel { channel: "status" }
-                SuggestedChannel { channel: "general" }
-                SuggestedChannel { channel: "dapps" }
-                SuggestedChannel { channel: "crypto" }
-                SuggestedChannel { channel: "introductions" }
-                SuggestedChannel { channel: "tech" }
-                SuggestedChannel { channel: "ama" }
-                SuggestedChannel { channel: "gaming" }
-                SuggestedChannel { channel: "sexychat" }
-                SuggestedChannel { channel: "nsfw" }
-                SuggestedChannel { channel: "science" }
-                SuggestedChannel { channel: "music" }
-                SuggestedChannel { channel: "movies" }
-                SuggestedChannel { channel: "sports" }
-                SuggestedChannel { channel: "politics" }
-            }
+        Image {
+            source: channelName.text == "" ? "../../../img/arrow-button-inactive.svg" : "../../../img/arrow-btn-active.svg"
         }
-
-        Separator {
-            id: separator2
-            anchors.bottom: parent.bottom
-            anchors.bottomMargin: 75
-        }
-
-        Button {
-            id: btnJoinChat
-            anchors.bottom: parent.bottom
-            anchors.right: parent.right
-            anchors.bottomMargin: 16
-            anchors.rightMargin: 16
-            width: 44
-            height: 44
-            Image {
-              source: channelName.text == "" ? "../../../img/arrow-button-inactive.svg" : "../../../img/arrow-btn-active.svg"
-            }
-            background: Rectangle {
-              color: "transparent"
-            }
-            MouseArea {
-                id: btnMAJoinChat
-                cursorShape: Qt.PointingHandCursor
-                anchors.fill: parent
-                onClicked : {
-                    if(channelName.text === "") return;
+        MouseArea {
+            id: btnMAJoinChat
+            cursorShape: Qt.PointingHandCursor
+            anchors.fill: parent
+            onClicked : {
+                if(channelName.text === "") return;
                     chatsModel.joinChat(channelName.text, Constants.chatTypePublic);
                     popup.close();
                 }
             }
         }
-    }
-  }
+    
 }
diff --git a/ui/nim-status-client.pro b/ui/nim-status-client.pro
index 815b65d211..8acd509a9b 100644
--- a/ui/nim-status-client.pro
+++ b/ui/nim-status-client.pro
@@ -142,6 +142,7 @@ DISTFILES += \
     onboarding/img/wallet@3x.jpg \
     onboarding/qmldir \
     shared/Input.qml \
+    shared/ModalPopup.qml \
     shared/PopupMenu.qml \
     shared/Separator.qml \
     shared/StatusTabButton.qml \
diff --git a/ui/shared/ModalPopup.qml b/ui/shared/ModalPopup.qml
new file mode 100644
index 0000000000..fa6196bd2e
--- /dev/null
+++ b/ui/shared/ModalPopup.qml
@@ -0,0 +1,121 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.3
+import QtQuick.Layouts 1.3
+import "../imports"
+import "./"
+
+Item {
+  function open(){
+    popup.open()
+    channelName.text = "";
+    channelName.forceActiveFocus(Qt.MouseFocusReason)
+  }
+
+  function close(){
+    popup.close()
+  }
+
+  property alias title: modalDialogTitle.text
+  
+  default property alias content : popupContent.children
+
+  property alias footer : footerContent.children
+
+  Popup {
+    id: popup
+    modal: true
+
+    Overlay.modal: Rectangle {
+        color: "#60000000"
+    }
+    closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
+    parent: Overlay.overlay
+    x: Math.round((parent.width - width) / 2)
+    y: Math.round((parent.height - height) / 2)
+    width: 480
+    height: 509
+    background: Rectangle {
+        color: Theme.white
+        radius: 8
+    }
+    padding: 0
+    contentItem: Item {
+        Text {
+            id: modalDialogTitle
+            text: "Default Title"
+            anchors.top: parent.top
+            anchors.left: parent.left
+            font.bold: true
+            font.pixelSize: 17
+            anchors.leftMargin: 16
+            anchors.topMargin: 16
+        }
+
+        Rectangle {
+            id: closeButton
+            height: 32
+            width: 32
+            anchors.top: parent.top
+            anchors.topMargin: Theme.padding
+            anchors.rightMargin: Theme.padding
+            anchors.right: parent.right
+            radius: 8
+
+            Image {
+                id: closeModalImg
+                source: "../../../img/close.svg"
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.verticalCenter: parent.verticalCenter
+            }
+
+            MouseArea {
+                id: closeModalMouseArea
+                cursorShape: Qt.PointingHandCursor
+                anchors.fill: parent
+                hoverEnabled: true
+                onExited: {
+                    closeButton.color = Theme.white
+                }
+                onEntered:{
+                    closeButton.color = Theme.grey
+                }
+                onClicked : {
+                    popup.close()
+                }
+            }
+        }
+        
+        Separator {
+            id: separator
+            anchors.top: modalDialogTitle.bottom
+        }
+
+        Item {
+          id: popupContent
+          anchors.top: separator.bottom
+          anchors.bottom: separator2.top
+          anchors.left: popup.left
+          anchors.right: popup.right
+          width: popup.width
+        }
+
+        Separator {
+            id: separator2
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: 75
+        }
+
+        Item {
+          id: footerContent
+          width: parent.width
+          anchors.top: separator2.bottom
+          anchors.left: parent.left
+          anchors.right: parent.right
+          anchors.bottom: parent.bottom
+          anchors.bottomMargin: Theme.padding
+          anchors.rightMargin: Theme.padding
+          anchors.leftMargin: Theme.padding
+        }
+    }
+  }
+}
diff --git a/ui/shared/qmldir b/ui/shared/qmldir
index a3205740f2..640ee36bef 100644
--- a/ui/shared/qmldir
+++ b/ui/shared/qmldir
@@ -1,5 +1,6 @@
 StyledButton 1.0 StyledButton.qml
 RoundedIcon 1.0 RoundedIcon.qml
+ModalPopup 1.0 ModalPopup.qml
 PopupMenu 1.0 PopupMenu.qml
 Separator 1.0 Separator.qml
 StatusTabButton 1.0 StatusTabButton.qml