diff --git a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatText.qml b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatText.qml
index 0825ed34fb..c195a76179 100644
--- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatText.qml
+++ b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatText.qml
@@ -1,6 +1,7 @@
 import QtQuick 2.13
 import "../../../../../shared"
 import "../../../../../imports"
+import QtGraphicalEffects 1.0
 
 Item {
     property bool longChatText: true
@@ -12,7 +13,8 @@ Item {
     id: root
     visible: contentType == Constants.messageType || isEmoji
     z: 51
-    height: visible ? (showMoreLoader.active ? childrenRect.height : chatText.height) : 0
+
+    height: visible ? (showMoreLoader.active ? childrenRect.height - 10 : chatText.height) : 0
 
     // This function is to avoid the binding loop warning
     function setWidths() {
@@ -39,6 +41,7 @@ Item {
 
     StyledTextEdit {
         id: chatText
+        visible: !root.veryLongChatText || root.readMore
         textFormat: Text.RichText
         wrapMode: Text.Wrap
         font.pixelSize: Style.current.primaryTextFontSize
@@ -104,24 +107,47 @@ Item {
         }
     }
 
+
+    Loader {
+        id: mask
+        anchors.fill: chatText
+        active: root.veryLongChatText
+        visible: false
+        sourceComponent: LinearGradient {
+            start: Qt.point(0, 0)
+            end: Qt.point(0, chatText.height)
+            gradient: Gradient {
+                GradientStop { position: 0.0; color: "white" }
+                GradientStop { position: 0.85; color: "white" }
+                GradientStop { position: 1; color: "transparent" }
+            }
+        }
+    }
+
+    Loader {
+        id: opMask
+        active: root.veryLongChatText && !root.readMore
+        anchors.fill: chatText
+        sourceComponent: OpacityMask {
+            source: chatText
+            maskSource: mask
+        }
+    }
+
     Loader {
         id: showMoreLoader
         active: root.veryLongChatText
         anchors.top: chatText.bottom
-        anchors.topMargin: Style.current.smallPadding
-        anchors.left: chatText.horizontalAlignment === Text.AlignLeft ? chatText.left : undefined
-        anchors.right: chatText.horizontalAlignment === Text.AlignLeft ? undefined : chatText.right
-
+        anchors.topMargin: - Style.current.padding
+        anchors.horizontalCenter: parent.horizontalCenter
         sourceComponent: Component {
-            StyledText {
-                text: root.readMore ?
-                          qsTr("Read less") :
-                          qsTr("Read more")
-                color: chatText.color
-                font.pixelSize: 12
-                font.underline: true
+            SVGImage {
+                id: emojiImage
+                width: 256
+                height: 44
+                fillMode: Image.PreserveAspectFit
+                source: "../../../../img/read-" + (root.readMore ? "less" : "more") + ".svg"
                 z: 100
-
                 MouseArea {
                     z: 101
                     anchors.fill: parent
diff --git a/ui/app/img/read-less.svg b/ui/app/img/read-less.svg
new file mode 100644
index 0000000000..a09fda17e4
--- /dev/null
+++ b/ui/app/img/read-less.svg
@@ -0,0 +1,26 @@
+<svg width="256" height="44" viewBox="0 0 256 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_dd)">
+<rect x="116" y="10" width="24" height="24" rx="12" fill="#4360DF"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M122.47 24.5303C122.763 24.8232 123.237 24.8232 123.53 24.5303L127.646 20.4142C127.842 20.219 128.158 20.219 128.354 20.4142L132.47 24.5303C132.763 24.8232 133.237 24.8232 133.53 24.5303C133.823 24.2374 133.823 23.7626 133.53 23.4697L128.884 18.8232C128.396 18.3351 127.604 18.3351 127.116 18.8232L122.47 23.4697C122.177 23.7626 122.177 24.2374 122.47 24.5303Z" fill="white"/>
+<defs>
+<filter id="filter0_dd" x="104" y="2" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="6"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.133333 0 0 0 0 0.2 0 0 0 0.08 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.133333 0 0 0 0 0.2 0 0 0 0.16 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear" x1="128" y1="0" x2="128" y2="44" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ECEFFC" stop-opacity="0"/>
+<stop offset="0.765745" stop-color="#ECEFFC"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/ui/app/img/read-more.svg b/ui/app/img/read-more.svg
new file mode 100644
index 0000000000..637d95904b
--- /dev/null
+++ b/ui/app/img/read-more.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="256" height="44" viewBox="0 0 256 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g filter="url(#filter0_dd)">
+    <rect x="116" y="10" width="24" height="24" rx="12" fill="#4360DF"/>
+  </g>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M 122.47 25.53 C 122.177 25.238 122.177 24.763 122.47 24.47 L 127.116 19.823 C 127.604 19.335 128.396 19.335 128.884 19.823 L 133.53 24.47 C 133.823 24.763 133.823 25.238 133.53 25.53 C 133.237 25.823 132.763 25.823 132.47 25.53 L 128.354 21.414 C 128.158 21.219 127.842 21.219 127.646 21.414 L 123.53 25.53 C 123.237 25.823 122.763 25.823 122.47 25.53 Z" fill="white" transform="matrix(-1, 0, 0, -1, 256.000008, 45.206749)"/>
+  <defs>
+    <filter id="filter0_dd" x="104" y="2" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="4"/>
+      <feGaussianBlur stdDeviation="6"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.133333 0 0 0 0 0.2 0 0 0 0.08 0"/>
+      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="2"/>
+      <feGaussianBlur stdDeviation="2"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.133333 0 0 0 0 0.2 0 0 0 0.16 0"/>
+      <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/>
+    </filter>
+  </defs>
+</svg>
\ No newline at end of file