diff --git a/qml/AppControls2/AppItem.qml b/qml/AppControls2/AppItem.qml
new file mode 100644
index 0000000..3952343
--- /dev/null
+++ b/qml/AppControls2/AppItem.qml
@@ -0,0 +1,24 @@
+import QtQuick 2.0
+import QtQuick.Layouts 1.12
+
+Item {
+    RowLayout {
+        anchors.fill: parent
+        Image {
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            Layout.preferredWidth: 32
+            Layout.preferredHeight: 32
+            source: icon
+        }
+
+        Text {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            Layout.leftMargin: 5
+
+            horizontalAlignment: Qt.AlignLeft
+            verticalAlignment: Qt.AlignVCenter
+            text: name
+        }
+    }
+}
diff --git a/qml/AppControls2/FolderItem.qml b/qml/AppControls2/FolderItem.qml
new file mode 100644
index 0000000..3952343
--- /dev/null
+++ b/qml/AppControls2/FolderItem.qml
@@ -0,0 +1,24 @@
+import QtQuick 2.0
+import QtQuick.Layouts 1.12
+
+Item {
+    RowLayout {
+        anchors.fill: parent
+        Image {
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            Layout.preferredWidth: 32
+            Layout.preferredHeight: 32
+            source: icon
+        }
+
+        Text {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            Layout.leftMargin: 5
+
+            horizontalAlignment: Qt.AlignLeft
+            verticalAlignment: Qt.AlignVCenter
+            text: name
+        }
+    }
+}
diff --git a/qml/AppControls2/LabelItem.qml b/qml/AppControls2/LabelItem.qml
new file mode 100644
index 0000000..273c04b
--- /dev/null
+++ b/qml/AppControls2/LabelItem.qml
@@ -0,0 +1,24 @@
+import QtQuick 2.0
+import QtQuick.Layouts 1.12
+
+Item {
+    RowLayout {
+        anchors.fill: parent
+        Text {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            Layout.leftMargin: 5
+
+            horizontalAlignment: Qt.AlignLeft
+            verticalAlignment: Qt.AlignVCenter
+            text: name
+        }
+
+        Image {
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            Layout.preferredWidth: 32
+            Layout.preferredHeight: 32
+            source: icon
+        }
+    }
+}
diff --git a/qml/AppControls2/qmldir b/qml/AppControls2/qmldir
index e31575a..5101b70 100644
--- a/qml/AppControls2/qmldir
+++ b/qml/AppControls2/qmldir
@@ -1,5 +1,7 @@
 module AppControls2
-AppTest 1.0 App.qml
 StyleBackground 1.0 StyleBackground.qml
 StyleText 1.0 StyleText.qml
 ScrollBar 1.0 ScrollBar.qml
+AppItem 1.0 AppItem.qml
+FolderItem 1.0 FolderItem.qml
+LabelItem 1.0 LabelItem.qml
diff --git a/qml/AppUI/AppList.qml b/qml/AppUI/AppList.qml
new file mode 100644
index 0000000..7f7436b
--- /dev/null
+++ b/qml/AppUI/AppList.qml
@@ -0,0 +1,64 @@
+/*
+ * Copyright (C) 2023, KylinSoft Co., Ltd.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ */
+
+import QtQuick 2.0
+import QtQml 2.12
+
+import AppControls2 1.0 as AppControls2
+import org.ukui.menu.core 1.0
+
+ListView {
+    property string title: ""
+    model: modelManager.getAppModel()
+    delegate: Component {
+        Loader {
+            width: ListView.view ? ListView.view.width : 0
+            height: 40
+            property int index: model.index
+            property int type: model.type
+            property string name: model.name
+            property string icon: model.icon
+            sourceComponent: {
+                if (type === DataType.Normal) {
+                    return appItem;
+                }
+                if (type === DataType.Folder) {
+                    return folderItem;
+                }
+                if (type === DataType.Label) {
+                    return labelItem;
+                }
+            }
+        }
+    }
+
+    Component {
+        id: appItem
+        AppControls2.AppItem {}
+    }
+
+    Component {
+        id: labelItem
+        AppControls2.LabelItem {}
+    }
+
+    Component {
+        id: folderItem
+        AppControls2.FolderItem {}
+    }
+}
diff --git a/qml/AppUI/AppPage.qml b/qml/AppUI/AppPage.qml
index 430f0d7..3f02d99 100644
--- a/qml/AppUI/AppPage.qml
+++ b/qml/AppUI/AppPage.qml
@@ -1,21 +1,42 @@
-import QtQuick 2.0
+/*
+ * Copyright (C) 2023, KylinSoft Co., Ltd.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ */
 
-Item {
-    ListView {
+import QtQuick 2.0
+import QtQuick.Layouts 1.12
+
+import AppControls2 1.0 as AppControls2
+import org.ukui.menu.core 1.0
+
+AppControls2.StyleBackground {
+    paletteRole: Palette.Window
+    radius: 12
+
+    ColumnLayout {
         anchors.fill: parent
-        clip: true
-        model: modelManager.getAppModel()
-        delegate: Rectangle {
-            width: ListView.view.width;
-            height: 40;
-            color: "lightblue"
-            Text {
-                anchors.fill: parent;
-                horizontalAlignment: Qt.AlignHCenter;
-                verticalAlignment: Qt.AlignVCenter;
-                text: model.name
-            }
+        anchors.topMargin: parent.radius
+        spacing: 4
+
+        AppList {
+            id: appList
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            Layout.leftMargin: 16
+            clip: true
         }
     }
-
 }
diff --git a/qml/AppUI/qmldir b/qml/AppUI/qmldir
index f4c42e2..ebe7e45 100644
--- a/qml/AppUI/qmldir
+++ b/qml/AppUI/qmldir
@@ -1,5 +1,6 @@
 module AppUI
 AppPage 1.0 AppPage.qml
+AppList 1.0 AppList.qml
 Sidebar 1.0 Sidebar.qml
 NormalUI 1.0 NormalUI.qml
 FullScreenUI 1.0 FullScreenUI.qml
diff --git a/qml/qml.qrc b/qml/qml.qrc
index 5cbd41a..a328b2e 100644
--- a/qml/qml.qrc
+++ b/qml/qml.qrc
@@ -9,6 +9,7 @@
         <file>AppUI/FullScreenUI.qml</file>
         <file>AppUI/AppPage.qml</file>
         <file>AppUI/Sidebar.qml</file>
+        <file>AppUI/AppList.qml</file>
         <file>AppControls2/qmldir</file>
         <file>AppControls2/App.qml</file>
         <file>AppControls2/ScrollBar.qml</file>
@@ -16,6 +17,9 @@
         <file>AppControls2/StyleBackground.qml</file>
         <file>AppControls2/StyleText.qml</file>
         <file>AppControls2/IconLabel.qml</file>
+        <file>AppControls2/AppItem.qml</file>
+        <file>AppControls2/LabelItem.qml</file>
+        <file>AppControls2/FolderItem.qml</file>
         <file>extensions/FolderExtension.qml</file>
         <file>extensions/RecentFileExtension.qml</file>
     </qresource>
diff --git a/res/res.qrc b/res/res.qrc
index 72f745e..743f0c5 100644
--- a/res/res.qrc
+++ b/res/res.qrc
@@ -1,5 +1,6 @@
 <RCC>
     <qresource prefix="/res">
         <file>icon/application-x-desktop.png</file>
+        <file>icon/pad_mainpower.svg</file>
     </qresource>
 </RCC>
diff --git a/src/model/model.cpp b/src/model/model.cpp
index 022f85b..6ee5ffa 100644
--- a/src/model/model.cpp
+++ b/src/model/model.cpp
@@ -17,6 +17,7 @@
  */
 
 #include "model.h"
+#include "data-provider-manager.h"
 
 #include <QObject>
 #include <QString>
@@ -26,23 +27,52 @@ namespace UkuiMenu {
 
 AppModel::AppModel(QObject *parent) : QAbstractListModel(parent)
 {
-
+    m_apps.append(DataProviderManager::instance()->data());
+    connect(DataProviderManager::instance(), &DataProviderManager::dataChanged, this, [this] (QVector<DataEntity> data) {
+        Q_EMIT beginResetModel();
+        m_apps.swap(data);
+        Q_EMIT endResetModel();
+    });
 }
 
 int AppModel::rowCount(const QModelIndex &parent) const
 {
-    return 30;
+    return m_apps.size();
 }
 
 QVariant AppModel::data(const QModelIndex &index, int role) const
 {
-    return QString("test data = %1.").arg(index.row());
+    int i = index.row();
+    if (i < 0 || i >= m_apps.size()) {
+        return {};
+    }
+
+    switch (role) {
+        case DataEntity::Type:
+            return m_apps.at(i).type();
+        case DataEntity::Icon:
+            return m_apps.at(i).icon();
+        case DataEntity::Name:
+            return m_apps.at(i).name();
+        case DataEntity::Comment:
+            return m_apps.at(i).comment();
+        case DataEntity::ExtraData:
+            return m_apps.at(i).extraData();
+        default:
+            break;
+    }
+
+    return {};
 }
 
 QHash<int, QByteArray> AppModel::roleNames() const
 {
     QHash<int, QByteArray> names;
-    names.insert(0, "name");
+    names.insert(DataEntity::Type, "type");
+    names.insert(DataEntity::Icon, "icon");
+    names.insert(DataEntity::Name, "name");
+    names.insert(DataEntity::Comment, "comment");
+    names.insert(DataEntity::ExtraData, "extraData");
     return names;
 }
 
diff --git a/src/model/model.h b/src/model/model.h
index 5a7b937..6e501e7 100644
--- a/src/model/model.h
+++ b/src/model/model.h
@@ -37,6 +37,9 @@ public:
     QHash<int, QByteArray> roleNames() const override;
 
     Q_INVOKABLE QVariantList folderApps(const QString &folderName);
+
+private:
+    QVector<DataEntity> m_apps;
 };
 
 } // UkuiMenu