diff --git a/resources/web/guide/21/21.css b/resources/web/guide/21/21.css
index 24b2ec51aa..5e9c2132c8 100644
--- a/resources/web/guide/21/21.css
+++ b/resources/web/guide/21/21.css
@@ -67,21 +67,14 @@
 	height: 20px;
 	right: 10px;
 	top: 10px;
-    border:1px solid #ADADAD;
-	background-color: #FFF;
-	padding: 1px;
 	cursor: pointer;
+	background-image: url("../img/emptycheck.svg");
+	background-size: cover;
 }
 
-.ModelCheckBox.ModelCheckBoxSelected img
+.ModelCheckBox.ModelCheckBoxSelected
 {
-	display:inline;
-}
-
-.ModelCheckBox img
-{
-	width:100%;
-	display: none;
+	background-image: url("../img/greencheck.svg");
 }
 
 img.ModelThumbnail
diff --git a/resources/web/guide/21/21.js b/resources/web/guide/21/21.js
index 2ed4090345..89c40837cd 100644
--- a/resources/web/guide/21/21.js
+++ b/resources/web/guide/21/21.js
@@ -112,7 +112,7 @@ function HandleModelList( pVal )
 		ModelHtml[strVendor]+='<div class="PrinterBlock" onClick="ChooseModel(\''+strVendor+'\',\''+OneModel['model']+'\')">'+
         '<div class="PImg">'+
 		    '<img class="ModelThumbnail" src="'+CoverImage+'" />'+
-			'<div class="ModelCheckBox" vendor="' +strVendor+ '" model="'+OneModel['model']+'"><img src="../img/greencheck.svg" /></div>'+
+			'<div class="ModelCheckBox" vendor="' +strVendor+ '" model="'+OneModel['model']+'"></div>'+
 		'</div>'+
         '    <div class="PName">'+OneModel['name']+'</div>'+ 
 		'</div>';
@@ -236,7 +236,7 @@ function FilterModelList(keyword) {
 		ModelHtml[strVendor] += '<div class="PrinterBlock" onClick="ChooseModel(\''+strVendor+'\',\''+OneModel['model']+'\')">'+
         '<div class="PImg">'+
 		    '<img class="ModelThumbnail" src="'+CoverImage+'" />'+
-			'<div class="ModelCheckBox" vendor="' +strVendor+ '" model="'+OneModel['model']+'"><img src="../img/greencheck.svg" /></div>'+
+			'<div class="ModelCheckBox" vendor="' +strVendor+ '" model="'+OneModel['model']+'"></div>'+
 		'</div>'+
         '    <div class="PName">'+OneModel['name']+'</div>'+ 
 		'</div>';
diff --git a/resources/web/guide/21/index.html b/resources/web/guide/21/index.html
index 79693dbc8c..53b6bf2d6c 100644
--- a/resources/web/guide/21/index.html
+++ b/resources/web/guide/21/index.html
@@ -44,7 +44,7 @@
 <div class="PrinterBlock">
 	<div class="PImg">
 		<img class="ModelThumbnail" src="p2.jpg"  />
-        <div class="ModelCheckBox ModelCheckBoxSelected" model="BBL-3DP-V5NORMAL" onClick="ChooseModel('BBL-3DP-V5NORMAL')"><img class="" src="../img/greencheck.svg" /></div>		
+        <div class="ModelCheckBox ModelCheckBoxSelected" model="BBL-3DP-V5NORMAL" onClick="ChooseModel('BBL-3DP-V5NORMAL')"></div>		
 	</div>	
     <div class="PName">BBL-3DP-V4NORMAL</div>
     <div class="pNozzel TextS2"><input id="ZZ" type="checkbox" model="BBL-3DP-V4NORMAL" nozzel="0.4" vendor="BBL" />0.4mm nozzle</div>
@@ -53,7 +53,7 @@
 <div class="PrinterBlock">
 	<div class="PImg">
 		<img class="ModelThumbnail" src="p2.jpg"  />
-        <div class="ModelCheckBox"><img class="" src="../img/greencheck.svg" /></div>		
+        <div class="ModelCheckBox"></div>
 	</div>	
     <div class="PName">BBL-3DP-V4NORMAL</div>
     <div class="pNozzel TextS2"><input type="checkbox" model="BBL-3DP-V5NORMAL" nozzel="0.4" vendor="BBL" />0.4mm nozzle</div>
@@ -63,7 +63,7 @@
 <div class="PrinterBlock">
 	<div class="PImg">
 		<img class="ModelThumbnail" src="p2.jpg"  />
-        <div class="ModelCheckBox"><img class="" src="../img/greencheck.svg" /></div>		
+        <div class="ModelCheckBox"></div>
 	</div>	
     <div class="PName">BBL-3DP-V4NORMAL</div>
     <div class="pNozzel TextS2"><input id="ZZ" type="checkbox" model="BBL-3DP-V4NORMAL" nozzel="0.4" vendor="BBL" />0.4mm nozzle</div>
@@ -72,7 +72,7 @@
 <div class="PrinterBlock">
 	<div class="PImg">
 		<img class="ModelThumbnail" src="p2.jpg"  />
-        <div class="ModelCheckBox ModelCheckBoxSelected"><img class="" src="../img/greencheck.svg" /></div>		
+        <div class="ModelCheckBox ModelCheckBoxSelected"></div>		
 	</div>	
     <div class="PName">BBL-3DP-V4NORMAL</div>
     <div class="pNozzel TextS2"><input type="checkbox" model="BBL-3DP-V5NORMAL" nozzel="0.4" vendor="BBL" />0.4mm nozzle</div>
@@ -98,7 +98,7 @@
 <div class="PrinterBlock">
 	<div class="PImg">
 		<img class="ModelThumbnail" src="p2.jpg"  />
-        <div class="ModelCheckBox ModelCheckBoxSelected"><img class="" src="../img/greencheck.svg" /></div>		
+        <div class="ModelCheckBox ModelCheckBoxSelected"></div>		
 	</div>	
     <div class="PName TextS1">BBL-3DP-V4NORMAL</div>
     <div class="pNozzel TextS2"><input type="checkbox" model="BBL-3DP-V4NORMAL" nozzel="0.4" vendor="BAMBU" />0.4mm nozzle</div>
@@ -107,7 +107,7 @@
 <div class="PrinterBlock">
 	<div class="PImg">
 		<img class="ModelThumbnail" src="p2.jpg"  />
-        <div class="ModelCheckBox ModelCheckBoxSelected"><img class="" src="../img/greencheck.svg" /></div>		
+        <div class="ModelCheckBox ModelCheckBoxSelected"></div>		
 	</div>	
     <div class="PName TextS1">BBL-3DP-V4NORMAL</div>
     <div class="pNozzel TextS2"><input type="checkbox" model="BBL-3DP-V5NORMAL" nozzel="0.4" vendor="BAMBU" />0.4mm nozzle</div>
diff --git a/resources/web/guide/24/24.css b/resources/web/guide/24/24.css
index 0f246736e6..7c7b797b10 100644
--- a/resources/web/guide/24/24.css
+++ b/resources/web/guide/24/24.css
@@ -90,21 +90,14 @@
 	height: 20px;
 	right: 10px;
 	top: 10px;
-    border:1px solid #ADADAD;
-	background-color: #FFF;
-	padding: 1px;
 	cursor: pointer;
+	background-image: url("../img/emptycheck.svg");
+	background-size: cover;
 }
 
-.ModelCheckBox.ModelCheckBoxSelected img
+.ModelCheckBox.ModelCheckBoxSelected
 {
-	display:inline;
-}
-
-.ModelCheckBox img
-{
-	width:100%;
-	display: none;
+	background-image: url("../img/greencheck.svg");
 }
 
 img.ModelThumbnail
diff --git a/resources/web/guide/24/24.js b/resources/web/guide/24/24.js
index 2ea01274b4..12dd9694eb 100644
--- a/resources/web/guide/24/24.js
+++ b/resources/web/guide/24/24.js
@@ -112,7 +112,7 @@ function HandleModelList( pVal )
 		ModelHtml[strVendor]+='<div class="PrinterBlock" onClick="ChooseModel(\''+strVendor+'\',\''+OneModel['model']+'\')">'+
         '<div class="PImg">'+
 		    '<img class="ModelThumbnail" src="'+CoverImage+'" />'+
-			'<div class="ModelCheckBox" vendor="' +strVendor+ '" model="'+OneModel['model']+'"><img src="../img/greencheck.svg" /></div>'+
+			'<div class="ModelCheckBox" vendor="' +strVendor+ '" model="'+OneModel['model']+'"></div>'+
 		'</div>'+
         '    <div class="PName">'+OneModel['name']+'</div>'+ 
 		'</div>';
@@ -236,7 +236,7 @@ function FilterModelList(keyword) {
 		ModelHtml[strVendor] += '<div class="PrinterBlock" onClick="ChooseModel(\''+strVendor+'\',\''+OneModel['model']+'\')">'+
         '<div class="PImg">'+
 		    '<img class="ModelThumbnail" src="'+CoverImage+'" />'+
-			'<div class="ModelCheckBox" vendor="' +strVendor+ '" model="'+OneModel['model']+'"><img src="../img/greencheck.svg" /></div>'+
+			'<div class="ModelCheckBox" vendor="' +strVendor+ '" model="'+OneModel['model']+'"></div>'+
 		'</div>'+
         '    <div class="PName">'+OneModel['name']+'</div>'+ 
 		'</div>';
diff --git a/resources/web/guide/img/emptycheck.svg b/resources/web/guide/img/emptycheck.svg
new file mode 100644
index 0000000000..259a060498
--- /dev/null
+++ b/resources/web/guide/img/emptycheck.svg
@@ -0,0 +1,5 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 1H27V27H1V1ZM2 2V26H26V2H2Z" fill="#ACACAC"/>
+<path d="M2 2H26V26H2V2Z" fill="white" fill-opacity="0.3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25 3H3V25H25V3ZM2 2V26H26V2H2Z" fill="white"/>
+</svg>
diff --git a/resources/web/guide/img/greencheck.svg b/resources/web/guide/img/greencheck.svg
index 65e8b8705e..79e6871a8a 100644
--- a/resources/web/guide/img/greencheck.svg
+++ b/resources/web/guide/img/greencheck.svg
@@ -1 +1,7 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1740057651953" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1463" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M910.222222 0a113.777778 113.777778 0 0 1 113.777778 113.777778v796.444444a113.777778 113.777778 0 0 1-113.777778 113.777778H113.777778a113.777778 113.777778 0 0 1-113.777778-113.777778V113.777778a113.777778 113.777778 0 0 1 113.777778-113.777778h796.444444z m-114.915555 320.739556a45.909333 45.909333 0 0 0-65.080889 0l-310.897778 310.897777-135.907556-135.964444a45.909333 45.909333 0 0 0-65.080888 0 45.909333 45.909333 0 0 0 0 65.137778l168.561777 168.448a45.909333 45.909333 0 0 0 65.080889 0l343.608889-343.552a45.738667 45.738667 0 0 0-0.284444-64.967111z" fill="#00AE42" p-id="1464"></path></svg>
\ No newline at end of file
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 2H26V26H2V2Z" fill="#00AE42"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 1H27V27H1V1ZM2 2V26H26V2H2Z" fill="#ACACAC"/>
+<path d="M2 2H26V26H2V2Z" fill="#00AE42"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25 3H3V25H25V3ZM2 2V26H26V2H2Z" fill="white"/>
+<path d="M22.7168 8.2832C23.0944 8.66079 23.0944 9.27137 22.7168 9.64495L12.112 20.2537C11.7344 20.6313 11.1239 20.6313 10.7503 20.2537L5.2832 14.7907C4.9056 14.4131 4.9056 13.8025 5.2832 13.4289C5.66079 13.0553 6.27137 13.0513 6.64495 13.4289L11.4251 18.2091L21.351 8.2832C21.7286 7.9056 22.3392 7.9056 22.7128 8.2832H22.7168Z" fill="white"/>
+</svg>