Index: sources/gui/qml/pages/treatment/sections/TreatmentUltrafiltration.qml
===================================================================
diff -u -ra5760947d3ed0d2748ba023a1c25e3c6aa0b1de1 -r7805806e4370be4d9207872e916f478875bd4ba6
--- sources/gui/qml/pages/treatment/sections/TreatmentUltrafiltration.qml	(.../TreatmentUltrafiltration.qml)	(revision a5760947d3ed0d2748ba023a1c25e3c6aa0b1de1)
+++ sources/gui/qml/pages/treatment/sections/TreatmentUltrafiltration.qml	(.../TreatmentUltrafiltration.qml)	(revision 7805806e4370be4d9207872e916f478875bd4ba6)
@@ -21,62 +21,148 @@
 //  Qml imports
 import "qrc:/globals"
 import "qrc:/components"
+import "qrc:/pages/treatment"
 
 /*!
  * \brief   Treatment Screen Ultrafiltration section
  */
-TouchArea { id: _root
+
+TreatmentSection { id: _root
     readonly property real minimum  : vTreatmentUltrafiltration.minimum
     readonly property real maximum  : vTreatmentUltrafiltration.maximum
     readonly property real value    : vTreatmentUltrafiltration.ultrafiltration_RefUFVol
+    readonly property int topTextFontSize       : 30
+    readonly property int bottomTextFontSize    : 72
 
-    clip    : false
+    property string ufButtonText    : qsTr("Isolated UF in Progress")   // TODO
+    property color ufButtonColor    : "#C3F9FF"                         // TODO
 
-    x       : 0
-    y       : 0
-    width   : 200
-    height  : 200
+    header.title: qsTr("Ultrafiltration") + " (" + qsTr("UF") + ")"
 
-    isTouchable : ! isSBInProgress
-    title   : qsTr("ULTRAFILTRATION VOLUME") + " " + Variables.unitTextUltrafiltrationVolume
-    notification {
-        visible     : true
-        text        : ufInfoText
-        textColor   : ufInfoTextColor
-    }
+    contentItem: Row { id: _row
+        spacing     : Variables.defaultMargin * 6
+        rightPadding: Variables.defaultMargin
+        leftPadding : Variables.defaultMargin
 
-    Text { id: _ufCurrentRateText
-        anchors  {
-            right: parent.right
-            rightMargin: Variables.arrowWidth * 2 // Aligning text to be beyond the arrow
-            top: parent.top
+        Column { id: _leftColumn
+            spacing     : Variables.defaultMargin * 6
+            width   : contentItem.width * 0.2
+            height  : _root.height
+
+            LabelValue { id: _ufVolume
+                height: 40
+                width: contentItem.width * 0.2
+                topTextFont.pixelSize: topTextFontSize
+                topTextFont.weight: Font.Normal
+                topText: qsTr("UF Volume")
+                bottomText: "1.00"// TODO
+                bottomTextFont.pixelSize: bottomTextFontSize
+                bottomTextFont.weight: Font.DemiBold
+                showCenterText: true
+                leftAlign: true
+                centerText: "Isolated UF"       // TODO
+                unitText: Variables.unitVolume
+            }
+
+            LabelValue { id: _ufRate
+                height: 40
+                width: contentItem.width * 0.2
+                topTextFont.pixelSize: topTextFontSize
+                topTextFont.weight: Font.Normal
+                topText: qsTr("UF Rate")
+                bottomText: vTreatmentUltrafiltration.ultrafiltration_UfCurrentRate.toFixed(0)
+                bottomTextFont.pixelSize: bottomTextFontSize
+
+                bottomTextFont.weight: Font.DemiBold
+                leftAlign: true
+                unitText: Variables.unitTextRate
+            }
         }
-        horizontalAlignment : Text.AlignRight
-        verticalAlignment   : Text.AlignVCenter
-        height              : Variables.arrowHeight
 
-        text: qsTr("(%1 %2)").arg(vTreatmentUltrafiltration.ultrafiltration_UfCurrentRate.toFixed(0))
-                             .arg(Variables.unitTextUltrafiltrationRate                             )
-        font.pixelSize: Fonts.fontPixelUltrafiltrationRateUnit
-        color: Colors.touchTextAreaTitle
-    }
+        Column { id: _rightColumn
+            topPadding  : Variables.defaultMargin * 7
+            width       : contentItem.width
+            height      : _root.height
 
-    ProgressBarEx { id: _progressbarex
-        enabled : _root.isTouchable
-        y       : 75
-        width   : parent.width
-        height  : Variables.ultraFiltrationProgressBarHeight
 
-        onClicked           : _root.clicked()
-        onProgressClicked   : _root.clicked()
-        onExtraClicked      : _root.clicked()
+            ProgressBarEx { id: _progressbarex
+                enabled : ! isSBInProgress
+                width   : contentItem.width * 0.6
+                height  : Variables.ultraFiltrationProgressBarHeight
 
-        decimal : Variables.ultrafiltrationPrecision
-        minimum : _root.minimum
-        maximum : _root.maximum
-        value   : _root.value
-        valueEx : 0
+                decimal : Variables.ultrafiltrationPrecision
+                minimum : _root.minimum
+                maximum : _root.maximum
+                value   : _root.value
+                valueEx : 0
 
-        marker.color : isUFPaused ? "dimgray" : Colors.rangeMarker
+                gradientStart   : "#2184FA"
+                gradientEnd     : "#67ACFF"
+
+                marker.color    : isUFPaused ? "dimgray" : Colors.rangeMarker
+                marker.font {
+                    weight      : Font.DemiBold
+                    pixelSize   : 40
+                }
+
+                marker.valueOnTop : true
+
+                minText.color: "#818181"
+                minText.font {
+                    pixelSize   : 18
+                    weight      : Font.Normal
+                }
+
+                maxText.color: "#818181"
+                maxText.font {
+                    pixelSize   : 18
+                    weight      : Font.Normal
+                }
+
+                Text { id: _volumeRemovedText
+                    anchors {
+                        top: parent.bottom
+                        topMargin: Variables.defaultMargin * 2
+                        right: parent.right
+                    }
+                    text: qsTr("Volume Removed")
+                    color: Colors.textTextRectLabel
+                    font.pixelSize: topTextFontSize
+                    font.weight: Font.Medium
+                }
+            }
+        }
     }
+
+    TouchRect { id: _isolatedUFButton
+        anchors {
+            top             : header.bottom
+            topMargin       : Variables.defaultMargin
+            right           : parent.right
+            rightMargin     : Variables.defaultMargin * 2
+        }
+
+        width   : 250
+        height  : 60
+        radius  : height
+        text.text: ufButtonText
+        backgroundColor: Colors.backgroundMain
+        borderColor    : backgroundColor
+        textColor: ufButtonColor
+        text.font {
+            weight: Font.DemiBold
+            pixelSize       : 20
+        }
+        onPressed : {
+            // TODO
+        }
+    }
+
+    // TODO
+//    notification {
+//        visible     : true
+//        text        : ufInfoText
+//        textColor   : ufInfoTextColor
+//    }
+
 }