diff --git a/qml/extensions/RecentFileExtension.qml b/qml/extensions/RecentFileExtension.qml
index cc82c86..bf62361 100644
--- a/qml/extensions/RecentFileExtension.qml
+++ b/qml/extensions/RecentFileExtension.qml
@@ -17,6 +17,7 @@
  */
 
 import QtQuick 2.0
+import QtQuick.Controls 2.5
 import org.ukui.menu.extension 1.0
 import AppControls2 1.0 as AppControls2
 
@@ -26,56 +27,82 @@ UkuiMenuExtension {
         extensionData.recentFilesModel.updateData()
     }
 
-    ListView {
-        id: recentFileView
+    Item {
         anchors.fill: parent
-        anchors.leftMargin: 12
-        anchors.rightMargin: 6
-        spacing: 4
 
-        delegate: AppControls2.StyleBackground {
-            width: parent.width
-            height: 40
-            useStyleTransparent: false
-            alpha: itemArea.pressed ? 1 : itemArea.hovered ? 0.4 : 0
+        MouseArea {
+            anchors.fill: parent
+            hoverEnabled: true
+            onContainsMouseChanged: {
 
-            Row {
-                anchors.fill: parent
-                anchors.leftMargin: 4
-                spacing: 12
-
-                Image {
-                    width: 32
-                    height: 32
-                    anchors.verticalCenter: parent.verticalCenter
-                    source: model.icon
+                if (containsMouse) {
+                    scrollBar.visible = true
                 }
-
-                AppControls2.StyleText {
-                    width: parent.width - x
-                    height: 20
-                    anchors.verticalCenter: parent.verticalCenter
-                    verticalAlignment: Text.AlignVCenter
-                    text: model.name
+                else {
+                    scrollBar.visible = false
                 }
             }
 
-            MouseArea {
-                id: itemArea
-                property bool hovered
+            ListView {
+                id: recentFileView
                 anchors.fill: parent
-                hoverEnabled: true
-                onEntered: {
-                    hovered = true
+                anchors.leftMargin: 12
+                spacing: 4
+
+                ScrollBar.vertical: AppControls2.ScrollBar {
+                    id: scrollBar
+                    visible: false
+                    width: 14
+                    height: recentFileView.height
                 }
-                onExited: {
-                    hovered = false
-                }
-                onClicked: {
-                    var data = {
-                        "url": model.uri
+
+                delegate: AppControls2.StyleBackground {
+                    width: parent.width - 18
+                    height: 40
+                    useStyleTransparent: false
+                    alpha: itemArea.pressed ? 1 : itemArea.hovered ? 0.65 : 0
+                    radius: 8
+
+                    Row {
+                        anchors.fill: parent
+                        anchors.leftMargin: 4
+                        spacing: 12
+
+                        Image {
+                            width: 32
+                            height: 32
+                            anchors.verticalCenter: parent.verticalCenter
+                            source: model.icon
+                        }
+
+                        AppControls2.StyleText {
+                            width: parent.width - x
+                            height: 20
+                            anchors.verticalCenter: parent.verticalCenter
+                            verticalAlignment: Text.AlignVCenter
+                            text: model.name
+                            elide: Text.ElideRight
+                        }
+                    }
+
+                    MouseArea {
+                        id: itemArea
+                        property bool hovered
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        onEntered: {
+                            hovered = true
+                        }
+                        onExited: {
+                            hovered = false
+                        }
+                        onClicked: {
+                            var data = {
+                                "url": model.uri
+                            }
+                            send(data)
+                        }
                     }
-                    send(data)
                 }
             }
         }