diff --git a/app/qml/components/MMTextBubble.qml b/app/qml/components/MMTextBubble.qml
index 9a50b8e5d..f72270e99 100644
--- a/app/qml/components/MMTextBubble.qml
+++ b/app/qml/components/MMTextBubble.qml
@@ -14,57 +14,61 @@ import QtQuick.Layouts
 Item {
   id: root
 
-  height: 100
-  width: 300
+  height: row.height
 
-  required property var title
-  required property var description
+  required property string title
+  required property string description
 
   Rectangle {
-      width: root.width
-      height: root.height
-      color: __style.whiteColor
-      radius: 15
+    width: root.width
+    height: row.height
+    color: __style.whiteColor
+    radius: __style.inputRadius
   }
 
   Row {
-      padding: 10
-      spacing: 10
-      anchors.fill: parent
+    id: row
 
-      Rectangle {
-          implicitWidth: radius * 2
-          implicitHeight: radius * 2
-          // x: control.leftPadding
-          y: parent.height / 2 - height / 2
-          radius: 20
-          color: __style.forestColor
+    padding: 20 * __dp
+    spacing: 10 * __dp
 
-          MMIcon {
-            id: icon
-            anchors.centerIn: parent
-            source: __style.bubbleIcon
-          }
-        }
+    Rectangle {
+      width: 50 * __dp
+      height: width
+      radius: height / 2
+      color: __style.forestColor
 
-      Column {
-          id: column
-          width: 2* root.width / 3
-          spacing: 10
-          Label {
-              text: root.title
-              font: __style.t1
-              color: __style.nightColor
-              wrapMode: Label.WordWrap
-          }
+      Image {
+        id: icon
+        anchors.centerIn: parent
+        source: __style.bubbleIcon
+      }
+    }
+
+    Column {
+      id: column
+
+      width: root.width - icon.width - 4 * row.spacing - 2 * row.padding
+      spacing: 10 * __dp
+
+      Text {
+        width: parent.width
+
+        text: root.title
+        font: __style.t3
+        color: __style.deepOceanColor
+        wrapMode: Label.WordWrap
+      }
+
+      Text {
+        width: column.width
 
-          Label {
-              text:root.description
-              font: __style.p5
-              color: __style.forestColor
-              wrapMode: Label.WordWrap
-              width: column.width
-          }
+        text: root.description
+        font: __style.p6
+        color: __style.deepOceanColor
+        wrapMode: Label.WordWrap
+        lineHeight: 1.5
       }
+    }
   }
 }
diff --git a/gallery/qml/pages/MiscPage.qml b/gallery/qml/pages/MiscPage.qml
index f24a61c9c..ce29be52c 100644
--- a/gallery/qml/pages/MiscPage.qml
+++ b/gallery/qml/pages/MiscPage.qml
@@ -190,8 +190,9 @@ ScrollView {
         spacing: 20
         anchors.fill: parent
         MMTextBubble {
-          title: "My text is great"
-          description: "My text is great. y text is great My text is great. y text is great. y text is great"
+          width: page.width - 64
+          title: "Tip from Mergin Maps"
+          description: "A good candidate for a workspace name is the name of your team or organisation"
         }
       }
     }