diff --git a/ScStwSrc/resources/qml/main.qml b/ScStwSrc/resources/qml/main.qml
index bca19c5..94a1c74 100644
--- a/ScStwSrc/resources/qml/main.qml
+++ b/ScStwSrc/resources/qml/main.qml
@@ -177,90 +177,21 @@ Window {
                 }
             }
 
-            Column {
-                id: timerCol
-
+            TimerColumn {
                 anchors.fill: parent
+                anchors.topMargin: app.landscape() ? 0:parent.height * 0.1
                 anchors.bottomMargin: app.landscape() ? 0:parent.height * 0.1
 
+                timers: speedBackend.race.timers
+                colors: appTheme.theme.colors
+                fontName: appTheme.theme.fonts.timers
+                showTimerLetter: speedBackend.race.state === ScStwRace.STOPPED
+
+                // make text smaller for much better performance
+                textScale: 0.7
+
                 opacity: ( speedBackend.race.state < ScStwRace.RUNNING ) ? 0:1
 
-                spacing: height * 0.05
-
-                Repeater {
-                    id: timerRep
-
-                    model: speedBackend.race.timers.length
-
-                    delegate: Item {
-                        id: timerDel
-
-                        width: parent.width
-                        height: timerRep.model > 1 ? ( timerCol.height * 0.9 ) / timerRep.model:timerCol.height
-
-                        Label {
-                            id: timerTextLa
-
-                            anchors.centerIn: parent
-
-                            width: ( parent.width * 0.8 )
-                            height: parent.height
-
-                            elide: "ElideRight"
-                            color: [ScStwTimer.WON].includes(speedBackend.race.timers[index]["state"]) ? appTheme.theme.colors.success :
-                                   [ScStwTimer.LOST, ScStwTimer.FAILED].includes(speedBackend.race.timers[index]["state"]) ? appTheme.theme.colors.error:
-                                   appTheme.theme.colors.text
-
-                            enabled: speedBackend.race.timers[index]["state"] !== ScStwTimer.DISABLED
-
-                            text: speedBackend.race.timers[index]["text"]
-
-                            fontSizeMode: Text.Fit
-
-                            verticalAlignment: Text.AlignVCenter
-                            horizontalAlignment: Text.AlignHCenter
-
-                            font.pixelSize: app.landscape() ? parent.width * 0.15 : parent.height * 0.4
-
-                            minimumPixelSize: 1
-
-                            /*Behavior on text {
-                                enabled: !["RUNNING", "STOPPED", "WON", "LOST", "FAILED", "CANCELLED"].includes(app.state)
-                                FadeAnimation {
-                                    target: timerTextLa
-                                }
-                            }*/
-                        }
-
-                        Label {
-                            id: react_time
-
-                            property int rtime: speedBackend.race.timers[index]["reactionTime"]
-
-                            anchors {
-                                centerIn: parent
-                                verticalCenterOffset: timerTextLa.font.pixelSize * 0.5 + react_time.font.pixelSize * 0.5
-                            }
-
-                            width: ( parent.width * 0.6 )
-                            height: parent.height
-
-                            fontSizeMode: Text.Fit
-
-                            verticalAlignment: Text.AlignVCenter
-                            horizontalAlignment: Text.AlignHCenter
-
-                            text: "reaction time (ms):  " + Math.round(rtime)
-
-                            opacity: (app.state === "RUNNING" || app.state === "STOPPED") && rtime !== 0 ? 1:0
-
-                            color: appTheme.theme.colors.text
-
-                            font.pixelSize: timerTextLa.font.pixelSize * 0.5
-                        }
-                    }
-                }
-
                 Behavior on opacity {
                     NumberAnimation {
                         duration: 200
@@ -287,6 +218,8 @@ Window {
                 rightMargin: app.landscape() ? parent.width * 0.8:0
             }
 
+            opacity: speedBackend.race.state === ScStwRace.IDLE ? 1:0
+
             ConnectionIcon {
                 id: baseConnConnIcon
 
@@ -372,6 +305,13 @@ Window {
                     }
                 }
             }
+
+            Behavior on opacity {
+                NumberAnimation {
+                    duration: 200
+                }
+            }
+
         }
 
         Rectangle {
@@ -404,10 +344,10 @@ Window {
                 rightMargin: app.width * 0.5 - width * 0.5
             }
 
-            height: app.landscape() ? (size > parent.height * 0.9 ? parent.height * 0.9:size) : (size > parent.width * 0.9 ? parent.width * 0.9:size)
+            height: app.landscape() ? Math.min(size, parent.height * 0.9) : Math.min(size, parent.width * 0.9)
             width: height
 
-            Label {
+            Text {
                 id: startButt_text
                 text: startButt.text
                 anchors.centerIn: parent
@@ -500,7 +440,8 @@ Window {
                         }
                     }
                 }
-            }}
+            }
+        }
 
         ProgressCircle {
             id: prog
@@ -558,7 +499,7 @@ Window {
                 }
             }
 
-            Label {
+            Text {
                 id: cancelButt_text
                 text: cancelButt.text
                 anchors.centerIn: parent
@@ -800,7 +741,7 @@ Window {
                 name: "RUNNING"
                 //state when the timer is running
                 PropertyChanges { target: startButt; enabled: true;
-                    text: speedBackend.baseStationState === "connected" ? "cancel":"stop"
+                    text: speedBackend.scStwClient.state === ScStwClient.CONNECTED ? "cancel":"stop"
                     anchors.rightMargin: app.landscape() ? parent.width * 0.05:parent.width * 0.5 - startButt.width * 0.5 //put the button more to the right to hide the menu (only in landscape mode)
                     anchors.bottomMargin: app.landscape() ? parent.height * 0.5 - startButt.height * 0.5:parent.height * 0.1 //put the button lower to hide the menu (only in portrait mode)
                 }
diff --git a/shared-libraries b/shared-libraries
index 81ee198..75c6756 160000
--- a/shared-libraries
+++ b/shared-libraries
@@ -1 +1 @@
-Subproject commit 81ee19819c8698054279557090c94280c43ea41d
+Subproject commit 75c6756162e0b14ea9a4eb78568d6aaf01e4e0dd