diff --git a/resources/qml/SettingsDialog/SettingsBaseStationPage.qml b/resources/qml/SettingsDialog/SettingsBaseStationPage.qml
index 1ab1d24..f82ef9b 100644
--- a/resources/qml/SettingsDialog/SettingsBaseStationPage.qml
+++ b/resources/qml/SettingsDialog/SettingsBaseStationPage.qml
@@ -226,7 +226,9 @@ Column {
                 text: qsTr("volume")
 
                 width: parent.width
-                height: parentObj.delegateHeight
+                height: parentObj.delegateHeight * 0.8
+
+                font.pixelSize: height * 0.5
 
                 sliderValue: setting.value
 
@@ -236,6 +238,19 @@ Column {
                     enabled = true
                 }
             }
+
+            NextPageDelegate {
+                text: qsTr("extensions")
+
+                width: parent.width
+                height: parentObj.delegateHeight * 0.8
+
+                font.pixelSize: height * 0.5
+
+                onClicked: {
+                    parentObj.push(extensions)
+                }
+            }
         }
     }
 }
diff --git a/resources/qml/SettingsDialog/SettingsExtensionsPage.qml b/resources/qml/SettingsDialog/SettingsExtensionsPage.qml
new file mode 100644
index 0000000..47940c9
--- /dev/null
+++ b/resources/qml/SettingsDialog/SettingsExtensionsPage.qml
@@ -0,0 +1,106 @@
+import QtQuick 2.9
+import QtMultimedia 5.8
+import QtQuick.Window 2.2
+import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.3
+import QtGraphicalEffects 1.0
+import QtQuick.Controls.Styles 1.4
+import "../components"
+
+ListView {
+    id: control
+
+    property string title: qsTr("extensions")
+    property var parentObj
+
+    spacing: parentObj.delegateHeight * 0.3
+    boundsBehavior: Flickable.StopAtBounds
+
+    clip: true
+
+    model: Object.keys(speedBackend.scStwClient.extensions)
+
+    header: Rectangle {
+        // for top spacing
+        width: parent.width
+        height: control.spacing
+        color: appTheme.theme.colors.view
+    }
+
+    delegate: Rectangle {
+        id: laneContainerRect
+
+        property string thisLane: modelData
+
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        width: parent.width * 0.98
+        height: parentObj.delegateHeight * extensionsList.model.length
+
+        radius: width * 0.05
+
+        border.width: 1
+        border.color: appTheme.theme.colors.line
+
+        color: appTheme.theme.colors.view
+
+        Rectangle {
+            id: laneLabelRect
+
+            anchors {
+                left: parent.left
+                leftMargin: parent.radius * 1
+                verticalCenter: parent.top
+            }
+
+            height: parentObj.delegateHeight * 0.5
+            width: laneLabel.font.pixelSize * 4
+
+            color: appTheme.theme.colors.view
+
+            Label {
+                id: laneLabel
+
+                height: parent.height
+                width: parent.width
+
+                leftPadding: laneContainerRect.width * 0.02
+                rightPadding: laneContainerRect.width * 0.02
+
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment:  Text.AlignVCenter
+
+                fontSizeMode: Text.Fit
+                font.pixelSize: height * 0.5
+
+                color: appTheme.theme.colors.text
+
+                text: "Lane " + laneContainerRect.thisLane
+            }
+
+        }
+
+        ListView {
+            id: extensionsList
+
+            anchors.fill: parent
+            anchors.margins: width * 0.04
+
+            interactive: false
+
+            model: speedBackend.scStwClient.extensions[parent.thisLane]
+
+            delegate: ConnectionDelegate {
+                property var thisExtension: modelData
+                property var stateTranslations: ["disconnected", "connecting", "connecting", "connected"]
+
+                height: extensionsList.height / extensionsList.model.length
+
+                enabled: true
+
+                text: thisExtension["type"] === 0 ? "StartPad":"TopPad" // TODO: make dynamic with ScStw::extensionTypeToString()
+                status: {'status': stateTranslations[thisExtension["state"]]}
+            }
+        }
+    }
+}
diff --git a/resources/qml/SettingsDialog/SettingsStack.qml b/resources/qml/SettingsDialog/SettingsStack.qml
index af80d1a..e63725a 100644
--- a/resources/qml/SettingsDialog/SettingsStack.qml
+++ b/resources/qml/SettingsDialog/SettingsStack.qml
@@ -47,6 +47,14 @@ StackView {
 
     }
 
+    Component {
+        id: extensions
+
+        SettingsExtensionsPage {
+            parentObj: control
+        }
+    }
+
     /*-----Custom animations-----*/
     pushEnter: Transition {
         NumberAnimation {
diff --git a/resources/qml/components/ConnectionDelegate.qml b/resources/qml/components/ConnectionDelegate.qml
index f8c96d0..9285c81 100644
--- a/resources/qml/components/ConnectionDelegate.qml
+++ b/resources/qml/components/ConnectionDelegate.qml
@@ -6,7 +6,7 @@ SmoothItemDelegate {
 
     property var status
     property string oldState: ""
-    property var connect
+    property var connect: null
     property var disconnect
 
     property string type
@@ -16,12 +16,14 @@ SmoothItemDelegate {
     enabled: (status.status === "disconnected" && control.connect !== undefined) || ( status.status === "connected" && control.disconnect !== undefined )
 
     onClicked: {
-        if(status.status === "disconnected"){
+        if(connect == null)
+            return;
+
+        if(status.status === "disconnected")
             connect()
-        }
-        else {
+        else
             disconnect()
-        }
+
     }
 
     onStatusChanged: {
diff --git a/resources/qml/main.qml b/resources/qml/main.qml
index 9d13f04..1f319f6 100644
--- a/resources/qml/main.qml
+++ b/resources/qml/main.qml
@@ -248,7 +248,7 @@ Window {
             }
 
             Row {
-                id: connectedExtensionsRow
+                id: extensionStatusRow
 
                 anchors {
                     top: parent.top
@@ -257,49 +257,51 @@ Window {
                     leftMargin: 1
                 }
 
-                height: parent.height
-                width: parent.width
+                height: baseConnConnIcon.height * 0.4
+                spacing: 5
 
                 Repeater {
-                    id: connectedExtensionsRep
-                    anchors.fill: parent
-                    model: speedBackend.scStwClient.extensions.length
-                    delegate: ConnectionIcon {
-                        id: buzzerConnIcon
-                        status: speedBackend.scStwClient.extensions[index]["state"]
+                    id: extensionStatusRep
 
-                        source: {
-                            var source
-                            switch(speedBackend.scStwClient.extensions[index]["type"]){
-                            case "STARTPAD":
-                                source = appTheme.theme.images.startpadIcon
-                                break
-                            case "TOPPAD":
-                                source = appTheme.theme.images.buzzerIcon
-                                break
-                            }
-                        }
+                    model: Object.keys(speedBackend.scStwClient.extensions)
+                    delegate: Rectangle {
+                        property string thisLetter: modelData
 
-                        scale: 0
+                        width: height
+                        height: parent.height
 
-                        height: !app.landscape()? parent.height*0.17:parent.width*0.17
-                        width: status === "disconnected" ? 0:height
+                        radius: width * 0.1
+
+                        color: appTheme.theme.colors.success // TODO
 
                         Component.onCompleted: {
-                            scale = 1
+                            refreshConnectionState()
                         }
 
-                        Behavior on scale {
-                            NumberAnimation {
-                                duration: 200
+                        function refreshConnectionState() {
+                            var extensions = speedBackend.scStwClient.extensions[modelData]
+
+                            for(var i = 0; i < extensions.length; i++) {
+                                console.log(JSON.stringify(extensions[i]))
+                                // TODO!!
                             }
                         }
 
-                        Behavior on width {
-                            NumberAnimation {
-                                duration: 200
-                            }
+                        Text {
+                            anchors.fill: parent
+
+                            text: parent.thisLetter
+
+                            fontSizeMode: Text.Fit
+                            font.pixelSize: height
+                            font.bold: true
+
+                            color: appTheme.theme.colors.background
+
+                            verticalAlignment: Text.AlignVCenter
+                            horizontalAlignment: Text.AlignHCenter
                         }
+
                     }
                 }
             }
diff --git a/resources/qml/qml.qrc b/resources/qml/qml.qrc
index 526b689..43f6541 100644
--- a/resources/qml/qml.qrc
+++ b/resources/qml/qml.qrc
@@ -21,5 +21,6 @@
         <file>SettingsDialog/StartPage.qml</file>
         <file>SettingsDialog/SettingsStartSequencePage.qml</file>
         <file>SettingsDialog/SettingsBaseStationPage.qml</file>
+        <file>SettingsDialog/SettingsExtensionsPage.qml</file>
     </qresource>
 </RCC>