diff --git a/atomic_defi_design/Dex/Exchange/Trade/OrderBook/ListDelegate.qml b/atomic_defi_design/Dex/Exchange/Trade/OrderBook/ListDelegate.qml
index 5ce557fc6b..2e21b85061 100644
--- a/atomic_defi_design/Dex/Exchange/Trade/OrderBook/ListDelegate.qml
+++ b/atomic_defi_design/Dex/Exchange/Trade/OrderBook/ListDelegate.qml
@@ -35,6 +35,7 @@ Item
                 color: Qaterial.Colors.amber
             }
 
+            // Insufficient funds tooltip
             DexLabel
             {
                 id: tooltip_text
@@ -101,6 +102,7 @@ Item
         anchors.fill: parent
         hoverEnabled: true
 
+        // Populate form with selected order
         onClicked:
         {
             if (is_mine) return
@@ -119,6 +121,7 @@ Item
             }
         }
 
+        // Highlight row on mouseover
         AnimatedRectangle
         {
             visible: mouse_area.containsMouse
@@ -128,16 +131,6 @@ Item
             opacity: 0.1
         }
 
-        Rectangle
-        {
-            anchors.verticalCenter: parent.verticalCenter
-            width: 6
-            height: 6
-            radius: width / 2
-            visible: is_mine
-            color: isAsk ? Dex.CurrentTheme.warningColor : Dex.CurrentTheme.okColor
-        }
-
         // Progress bar
         Rectangle
         {
@@ -161,98 +154,111 @@ Item
             }
         }
 
-        Row
+        // Price, Qty & Total text values
+        RowLayout
         {
             id: row
             anchors.fill: parent
-            anchors.horizontalCenter: parent.horizontalCenter
             onWidthChanged: progress.width = ((depth * 100) * (width + 40)) / 100
-            spacing: 0
+            spacing: 3
+
+            // Dot on the left side of the row to indicate own order
+            Rectangle
+            {
+                Layout.leftMargin: 6
+                Layout.alignment: Qt.AlignVCenter
+                opacity: is_mine ? 1 : 0
+                width: 6
+                height: 6
+                radius: 3
+                color: isAsk ? Dex.CurrentTheme.warningColor : Dex.CurrentTheme.okColor
+            }
 
+            // Price
             Dex.ElidableText
             {
-                anchors.verticalCenter: parent.verticalCenter
-                width: parent.width * 0.31
+                Layout.fillHeight: true
+                Layout.minimumWidth: 90
+                Layout.alignment: Qt.AlignVCenter
                 text: { new BigNumber(price).toFixed(8) }
                 font.family: DexTypo.fontFamily
                 font.pixelSize: 12
                 color: isAsk ? Dex.CurrentTheme.warningColor : Dex.CurrentTheme.okColor
                 horizontalAlignment: Text.AlignRight
+                verticalAlignment: Text.AlignVCenter
                 wrapMode: Text.NoWrap
             }
 
-            Item { width: parent.width * 0.01 }
-
             // Quantity
             Dex.ElidableText
             {
-                anchors.verticalCenter: parent.verticalCenter
-                width: parent.width * 0.37
+                Layout.fillHeight: true
+                Layout.minimumWidth: 90
+                Layout.alignment: Qt.AlignVCenter
                 text: { new BigNumber(base_max_volume).toFixed(6) }
                 font.family: DexTypo.fontFamily
                 font.pixelSize: 12
                 horizontalAlignment: Text.AlignRight
+                verticalAlignment: Text.AlignVCenter
                 onTextChanged: depth_bar.width = ((depth * 100) * (mouse_area.width + 40)) / 100
                 wrapMode: Text.NoWrap
             }
 
-            Item { width: parent.width * 0.01 }
-
             // Total
             Dex.ElidableText
             {
-                anchors.verticalCenter: parent.verticalCenter
-                width: parent.width * 0.30
-                rightPadding: (is_mine) && (mouse_area.containsMouse || cancel_button.containsMouse) ? 30 : 0
+                id: total_text
+                Layout.fillHeight: true
+                Layout.minimumWidth: 90
+                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignVCenter
                 font.family: DexTypo.fontFamily
                 font.pixelSize: 12
                 text: { new BigNumber(total).toFixed(6) }
                 horizontalAlignment: Text.AlignRight
+                verticalAlignment: Text.AlignVCenter
                 wrapMode: Text.NoWrap
-
-                Behavior on rightPadding { NumberAnimation { duration: 150 } }
             }
-        }
-    }
-
-    Qaterial.ColorIcon
-    {
-        id: cancel_button_text
-        property bool requested_cancel: false
-
-        visible: is_mine && !requested_cancel
 
-        anchors.verticalCenter: parent.verticalCenter
-        anchors.verticalCenterOffset: 1
-        anchors.right: parent.right
-        anchors.rightMargin:  mouse_area.containsMouse || cancel_button.containsMouse ? 12 : 6
 
-        Behavior on iconSize
-        {
-            NumberAnimation
+            // Cancel button
+            Item
             {
-                duration: 200
-            }
-        }
-
-        iconSize: mouse_area.containsMouse || cancel_button.containsMouse? 16 : 0
+                id: cancel_flat_btn
+                Layout.fillHeight: true
+                width: 30
+                Layout.alignment: Qt.AlignVCenter
 
-        color: cancel_button.containsMouse ?
-            Qaterial.Colors.red : mouse_area.containsMouse ?
-            DexTheme.foregroundColor: Qaterial.Colors.red
+                MouseArea
+                {
+                    id: cancel_mouse_area
+                    anchors.fill: parent
+                    cursorShape: Qt.PointingHandCursor
+                    hoverEnabled: true
+                }
 
-        DefaultMouseArea
-        {
-            id: cancel_button
-            anchors.fill: parent
-            hoverEnabled: true
+                Qaterial.FlatButton
+                {
+                    id: cancel_button_orderbook
+                    anchors.centerIn: parent
+                    anchors.fill: parent
+                    opacity: is_mine ? 1 : 0
 
-            onClicked:
-            {
-                if (!is_mine) return
+                    onClicked: {
+                        if (uuid) cancelOrder(uuid);
+                    }
 
-                cancel_button_text.requested_cancel = true
-                cancelOrder(uuid)
+                    Qaterial.ColorIcon
+                    {
+                        anchors.centerIn: parent
+                        iconSize: 16
+                        color: Dex.CurrentTheme.warningColor
+                        source: Qaterial.Icons.close
+                        visible: is_mine
+                        scale: is_mine && mouse_area.containsMouse ? 1 : 0
+                        Behavior on scale { NumberAnimation { duration: 150 } }
+                    }
+                }
             }
         }
     }