diff --git a/native/MainPage.qml b/native/MainPage.qml
index 0b23aba..ce0b010 100644
--- a/native/MainPage.qml
+++ b/native/MainPage.qml
@@ -99,6 +99,7 @@ Rectangle {
 
             Rectangle {
                 height: 50
+                id: rect1
                 width: parent.width
                 color: getColors().midlight
 
@@ -116,28 +117,36 @@ Rectangle {
                 }
             }
 
-            ListView {
-                id: listView
+            ScrollView {
+                anchors {
+                    top: rect1.bottom
+                }
                 Layout.fillWidth: true
                 Layout.fillHeight: true
-                model: filteredApiDataModel // Use the filtered model
 
-                delegate: Rectangle {
-                    width: listView.width
-                    height: 50
-                    color: (index % 2 === 0) ? getColors().button : getColors().highlight // Alternating row colors
+                ListView {
+                    id: listView
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+                    model: filteredApiDataModel // Use the filtered model
 
-                    RowLayout {
-                        anchors.fill: parent
-                        spacing: 10
-                        anchors.margins: 5
+                    delegate: Rectangle {
+                        width: listView.width
+                        height: 50
+                        color: (index % 2 === 0) ? getColors().button : getColors().highlight // Alternating row colors
 
-                        Text { text: model.name; color: getColors().text; Layout.preferredWidth: 150; elide: Text.ElideRight }
-                        Text { text: model.key; color: getColors().text; Layout.preferredWidth: 150; elide: Text.ElideRight }
-                        Text { text: model.amount; color: getColors().text; Layout.preferredWidth: 100; elide: Text.ElideRight }
-                        Text { text: model.start; color: getColors().text; Layout.preferredWidth: 100; elide: Text.ElideRight }
-                        Text { text: model.end; color: getColors().text; Layout.preferredWidth: 100; elide: Text.ElideRight }
-                        Text { text: model.group; color: getColors().text; Layout.preferredWidth: 150; elide: Text.ElideRight }
+                        RowLayout {
+                            anchors.fill: parent
+                            spacing: 10
+                            anchors.margins: 5
+
+                            Text { text: model.name; color: getColors().text; Layout.preferredWidth: 150; elide: Text.ElideRight }
+                            Text { text: model.key; color: getColors().text; Layout.preferredWidth: 150; elide: Text.ElideRight }
+                            Text { text: model.amount; color: getColors().text; Layout.preferredWidth: 100; elide: Text.ElideRight }
+                            Text { text: model.start; color: getColors().text; Layout.preferredWidth: 100; elide: Text.ElideRight }
+                            Text { text: model.end; color: getColors().text; Layout.preferredWidth: 100; elide: Text.ElideRight }
+                            Text { text: model.group; color: getColors().text; Layout.preferredWidth: 150; elide: Text.ElideRight }
+                        }
                     }
                 }
             }