diff --git a/resources/web/homepage/css/home.css b/resources/web/homepage/css/home.css
index 294648fa4b..a1c8b53bc2 100644
--- a/resources/web/homepage/css/home.css
+++ b/resources/web/homepage/css/home.css
@@ -370,14 +370,15 @@ body
 {
 	position: absolute;
 	margin: 0px;
-	padding: 0px;
+	padding: 10px;
 	border: 0px;
 	min-width: 100px;
     top: 800px;
 	border: 1px solid #C3C3C3;
+	border-radius: 5px;
 	color: #323A3D;
 	background-color: #fff;
-        display: none;
+    display: none;
 }
 
 .CT_Item
@@ -385,15 +386,16 @@ body
 	padding: 2px 10px;
 	display: flex;
 	flex-direction: row;
-	align-content: center;
 	align-items: center;
 	border: 2px solid #fff;
+	border-radius: 4px;	
 }
 
 .CT_Item:hover
 {
 	cursor: pointer;
-	border: 2px solid #00AE42;
+	background-color: #0078D4;
+	color: #fff;
 }
 
 
@@ -401,19 +403,33 @@ body
 {
 	margin-right: 6px;
 	width: 16px;
-	height: 16px;		
+	height: 16px;	
+}
+
+#CT_Delete_Bar:hover  .CT_Delete
+{
+	background: url("../img/remove2.svg");
+	background-repeat: no-repeat;
+	background-size: contain;	
 }
 
 .CT_Delete
 {
-	background: url("../img/delete.png");
+	background: url("../img/remove.svg");
+	background-repeat: no-repeat;
+	background-size: contain;	
+}
+
+#CT_Folder_Bar:hover .CT_Explore
+{
+	background: url("../img/open_folder2.svg");
 	background-repeat: no-repeat;
 	background-size: contain;	
 }
 
 .CT_Explore
 {
-	background: url("../img/folder.png");
+	background: url("../img/open_folder.svg");
 	background-repeat: no-repeat;
 	background-size: contain;		
 }
@@ -426,7 +442,9 @@ body
 
 .CT_Text
 {
-
+	line-height: 20px;
+	height: 20px;	
+	display: block;
 }
 
 /*--------Mall------*/
diff --git a/resources/web/homepage/img/open_folder2.svg b/resources/web/homepage/img/open_folder2.svg
new file mode 100644
index 0000000000..c5c3a6c845
--- /dev/null
+++ b/resources/web/homepage/img/open_folder2.svg
@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.34801 3.82127C8.71179 4.19206 9.20969 4.40069 9.7295 4.40069H11.3196C11.4502 4.40069 11.5773 4.41559 11.7 4.44276V3.14981C11.7 2.62475 11.274 2.19873 10.749 2.19873H7.00335C6.92533 2.19873 6.8517 2.211 6.77895 2.22853C6.79385 2.24256 6.80875 2.25483 6.82277 2.26886L8.34801 3.82127Z" stroke="white" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M11.7 4.44284C11.5773 4.41566 11.4502 4.40076 11.3196 4.40076H9.72951C9.2097 4.40076 8.71268 4.19214 8.34803 3.82135L6.82279 2.26893C6.80876 2.25491 6.79298 2.24176 6.77896 2.22861C6.45726 1.92269 6.03036 1.75 5.58419 1.75H2.34787C1.374 1.75 0.583328 2.53979 0.583328 3.51455V10.6402C0.583328 11.615 1.37312 12.4048 2.34787 12.4048H11.3196C12.2944 12.4048 13.0842 11.615 13.0842 10.6402V6.16531C13.0842 5.32117 12.4916 4.61728 11.7 4.44284Z" stroke="white" stroke-miterlimit="10" stroke-linecap="round"/>
+</svg>
diff --git a/resources/web/homepage/img/remove2.svg b/resources/web/homepage/img/remove2.svg
new file mode 100644
index 0000000000..7c913c0019
--- /dev/null
+++ b/resources/web/homepage/img/remove2.svg
@@ -0,0 +1,14 @@
+<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_7844_34237)">
+<path d="M11.8245 5.10425V13.1577C11.8245 13.431 11.5708 13.6544 11.2604 13.6544H2.73973C2.42934 13.6544 2.17566 13.431 2.17566 13.1577V5.10425" stroke="white" stroke-width="0.8" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M0.965012 3.55176H13.0353" stroke="white" stroke-width="0.8" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M4.31033 1.55829C4.31033 1.55829 4.31033 1.38921 4.31033 1.18246C4.31033 0.975717 4.56401 0.806641 4.8744 0.806641H9.1263C9.43668 0.806641 9.69036 0.975717 9.69036 1.18246C9.69036 1.38921 9.69036 1.55829 9.69036 1.55829" stroke="white" stroke-width="0.8" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M5.23859 5.29443V12.0461" stroke="white" stroke-width="0.8" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M8.76242 5.29443V12.0461" stroke="white" stroke-width="0.8" stroke-miterlimit="10" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_7844_34237">
+<rect width="14" height="15" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/resources/web/homepage/index.html b/resources/web/homepage/index.html
index 2a216f23ce..26ae6fdd4c 100644
--- a/resources/web/homepage/index.html
+++ b/resources/web/homepage/index.html
@@ -139,18 +139,18 @@
 				<div class="FileImg"><img src="img/b.jpg"/></div>
 				<a>abcd12334.3mf</a>
 				<div class="FileDate">2021/12/27 09:22</div>
-			</div>			-->	
+			</div>-->				
 		</div>
 	</div>
 	
     <div style="height: 14px;"></div>	
 	
 	<div id="recnet_context_menu">
-		<div class="CT_Item" onClick="OnDeleteRecentFile()">
+		<div id="CT_Delete_Bar" class="CT_Item" onClick="OnDeleteRecentFile()">
 			<div class="CT_Icon CT_Delete"></div>
 			<div class="CT_Text trans" tid="t88">clear</div>
 		</div>
-		<div class="CT_Item " onClick="OnExploreRecentFile()" >
+		<div id="CT_Folder_Bar" class="CT_Item " onClick="OnExploreRecentFile()" >
 			<div class="CT_Icon CT_Explore"></div>
 			<div class="CT_Text trans" tid="t89">open in explorer </div>
 		</div>				
diff --git a/resources/web/homepage/js/home.js b/resources/web/homepage/js/home.js
index a37539bef0..d88c07d927 100644
--- a/resources/web/homepage/js/home.js
+++ b/resources/web/homepage/js/home.js
@@ -4,10 +4,10 @@
 function OnInit()
 {	
 	//-----Test-----
-    //$("#Login1").hide();
-	//$("#UserName").text("ZZZZZZZZ");
-	//$("#Login2").css("display","flex");
+	//Set_RecentFile_MouseRightBtn_Event();
 	
+	
+	//-----Official-----
     TranslatePage();
 
 	SendMsg_GetLoginInfo();