diff --git a/resources/web/guide/css/home.css b/resources/web/guide/css/home.css
index 4b70331..4d5ab21 100644
--- a/resources/web/guide/css/home.css
+++ b/resources/web/guide/css/home.css
@@ -71,7 +71,7 @@ body
 {
 	/*border-right-width: 1px;
 	border-right-style: solid;*/
-	background:#9B9DA3;
+	background:#414345;
 	width: 248px;
 	height: 100%;
 }
@@ -148,6 +148,7 @@ body
 	display: flex;
 	justify-content:flex-start;
 	cursor: pointer;
+	color:#ffffff;
 }
 
 .BtnItem:hover
@@ -247,6 +248,70 @@ body
 	}
 }
 
+#IssueBoard {
+	overflow-y: auto;
+	padding: 0px 40px;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	align-items: center;
+	margin: 30px 40px;
+	position: relative;
+	top: 0px;
+	bottom: 0px;
+	right: 0px;
+	left: 0px;
+}
+
+@media screen and (max-width: 1100px) {
+	.PrintBlock {
+		text-align:center;
+		width: calc(50% - 20px);
+		margin: 0px 10px 40px 10px;
+		cursor: pointer;
+	}
+}
+
+@media screen and ( min-width:1101px) and ( max-width:1680px ) {
+	.PrintBlock {
+		width: calc(33% - 20px);
+		margin: 0px 10px 40px 10px;
+		cursor: pointer;
+	}
+}
+
+@media screen and ( min-width:1681px) and (max-width:2120px ) {
+	.PrintBlock {
+		width: calc(25% - 20px);
+		margin: 0px 10px 40px 10px;
+		cursor: pointer;
+	}
+}
+
+@media screen and ( min-width:2121px) and (max-width:2620px ) {
+	.PrintBlock {
+		width: calc(20% - 20px);
+		margin: 0px 10px 40px 10px;
+		cursor: pointer;
+	}
+}
+
+@media screen and (min-width:2621px ) and (max-width:3120px ) {
+	.PrintBlock {
+		width: calc(16.6% - 20px);
+		margin: 0px 10px 40px 10px;
+		cursor: pointer;
+	}
+}
+
+@media screen and (min-width:3121px ) {
+	.PrintBlock {
+		width: calc(14.2% - 20px);
+		margin: 0px 10px 40px 10px;
+		cursor: pointer;
+	}
+}
+
 #HotspotWEB
 {
 	width:100%;
@@ -306,6 +371,7 @@ body
 
 .UG_TITLE
 {
+	text-align:center;
 	font-size: 18px;
 	font-weight: 700;
 	line-height: 25px;
@@ -317,7 +383,36 @@ body
 
 .UG_DESC
 {
+	font-size: 14px;
 	width: 100%;
 	line-height: 20px;
+}
+
+.UG_CDESC
+{
+	text-align:center;
 	font-size: 14px;
+	width: 100%;
+	line-height: 20px;
+}
+
+.UG_B_TITLE
+{
+	text-align:center;
+	font-size: 36px;
+	font-weight: 700;
+	line-height: 25px;
+	width: 100%;
+	margin-top: 20px;
+	margin-bottom: 4px;
+	color: #4479FB;
+}
+
+.UG_B_DESC
+{
+	font-size: 16px;
+	width: 100%;
+	line-height: 20px;
+	margin-top: 30px;
+	margin-bottom: 50px;
 }
\ No newline at end of file
diff --git a/resources/web/guide/img/AddSupport.gif b/resources/web/guide/img/AddSupport.gif
new file mode 100644
index 0000000..3544585
Binary files /dev/null and b/resources/web/guide/img/AddSupport.gif differ
diff --git a/resources/web/guide/img/ConnectDevice.gif b/resources/web/guide/img/ConnectDevice.gif
new file mode 100644
index 0000000..9e1f772
Binary files /dev/null and b/resources/web/guide/img/ConnectDevice.gif differ
diff --git a/resources/web/guide/img/FirstPrint.gif b/resources/web/guide/img/FirstPrint.gif
new file mode 100644
index 0000000..7344105
Binary files /dev/null and b/resources/web/guide/img/FirstPrint.gif differ
diff --git a/resources/web/guide/img/WifiSend.gif b/resources/web/guide/img/WifiSend.gif
new file mode 100644
index 0000000..8831a3a
Binary files /dev/null and b/resources/web/guide/img/WifiSend.gif differ
diff --git a/resources/web/guide/img/X-MAX3.png b/resources/web/guide/img/X-MAX3.png
index da56762..9d57ac7 100644
Binary files a/resources/web/guide/img/X-MAX3.png and b/resources/web/guide/img/X-MAX3.png differ
diff --git a/resources/web/guide/img/X-Plus3.png b/resources/web/guide/img/X-Plus3.png
index 653231c..6c4e8ea 100644
Binary files a/resources/web/guide/img/X-Plus3.png and b/resources/web/guide/img/X-Plus3.png differ
diff --git a/resources/web/guide/img/X-Smart3.png b/resources/web/guide/img/X-Smart3.png
index 6a09623..ee42b18 100644
Binary files a/resources/web/guide/img/X-Smart3.png and b/resources/web/guide/img/X-Smart3.png differ
diff --git a/resources/web/guide/index.html b/resources/web/guide/index.html
index 76f6177..d7155c0 100644
--- a/resources/web/guide/index.html
+++ b/resources/web/guide/index.html
@@ -23,24 +23,32 @@
 	<div id="Guide1">
 		<div id="Icon1"><img id="QDIcon" src="img/logo.png" /></div>
 		<div menu="userguide" class="TbItem" onClick="GotoMain('userguide')">
-			<div class="trans" tid="t2">UserGuide</div>
+			<div class="trans" tid="t1">UserGuide</div>
 		</div>
 	</div>
 	</div>
 
 	<div id="BtnArea">
 		<div menu="firstprint" class="BtnItem" onClick="GotoMenu('firstprint')">
+			<div class="BtnIcon "><img class="LeftIcon" src="img/i1.svg" /></div>
+			<div class="trans" tid="t2">UserGuide</div>
+		</div>
+		<div menu="addsupport" class="BtnItem" onClick="GotoMenu('addsupport')">
 			<div class="BtnIcon "><img class="LeftIcon" src="img/i1.svg" /></div>
 			<div class="trans" tid="t3">UserGuide</div>
 		</div>
-		<div menu="supportgenerate" class="BtnItem" onClick="GotoMenu('supportgenerate')">
+		<div menu="connectdevice" class="BtnItem" onClick="GotoMenu('connectdevice')">
 			<div class="BtnIcon "><img class="LeftIcon" src="img/i1.svg" /></div>
 			<div class="trans" tid="t4">UserGuide</div>
 		</div>
-		<div menu="issuereport" class="BtnItem" onClick="GotoMenu('issuereport')">
+		<div menu="wifisend" class="BtnItem" onClick="GotoMenu('wifisend')">
 			<div class="BtnIcon "><img class="LeftIcon" src="img/i1.svg" /></div>
 			<div class="trans" tid="t5">UserGuide</div>
 		</div>
+		<div menu="issuereport" class="BtnItem" onClick="GotoMenu('issuereport')">
+			<div class="BtnIcon "><img class="LeftIcon" src="img/i1.svg" /></div>
+			<div class="trans" tid="t6">UserGuide</div>
+		</div>
 	</div>
 </div>
 
@@ -48,13 +56,19 @@
 <div id="ThumbBoard" class="ZScrol" board="userguide">
 	<div class="GuideBlock" onClick="GotoMenu('firstprint')">
 		<div class="UG_IMG"><img src="img/FirstPrint.gif" /></div>
-		<div class="UG_TITLE trans TextS1" tid="t3">FP</div>
-		<div class="UG_DESC trans" tid="wk2">This gif introduces the most basic usage of QIDISlicer. It guides users to configure software, create projects, and complete the first printing task step by step. </div>
+		<div class="UG_TITLE trans TextS1" tid="t2">FirstPrint</div>
 	</div>
-	<div class="GuideBlock" onClick="GotoMenu('supportgenerate')">
-		<div class="UG_IMG"><img src="img/SupportGenerate.gif" /></div>
-		<div class="UG_TITLE trans TextS1" tid="t4">SG</div>
-		<div class="UG_DESC trans" tid="wk4">When your model of choice has overhangs, the printed product is terrible, and this gif will teach you how to use support generation.</div>
+	<div class="GuideBlock" onClick="GotoMenu('addsupport')">
+		<div class="UG_IMG"><img src="img/AddSupport.gif" /></div>
+		<div class="UG_TITLE trans TextS1" tid="t3">AddSupport</div>
+	</div>
+	<div class="GuideBlock" onClick="GotoMenu('connectdevice')">
+		<div class="UG_IMG"><img src="img/ConnectDevice.gif" /></div>
+		<div class="UG_TITLE trans TextS1" tid="t4">ConnectDevice</div>
+	</div>
+	<div class="GuideBlock" onClick="GotoMenu('wifisend')">
+		<div class="UG_IMG"><img src="img/WifiSend.gif" /></div>
+		<div class="UG_TITLE trans TextS1" tid="t5">WifiSend</div>
 	</div>
 </div>
 
@@ -66,10 +80,26 @@
 </div>
 </div>
 
-<div id="GifBigBoard" board="supportgenerate">
+<div id="GifBigBoard" board="addsupport">
 <div id="GifBoard" >
 	<div class="GifBlock">
-		<div class="UG_IMG"><img src="img/SupportGenerate.gif" /></div>
+		<div class="UG_IMG"><img src="img/AddSupport.gif" /></div>
+	</div>
+</div>
+</div>
+
+<div id="GifBigBoard" board="connectdevice">
+<div id="GifBoard" >
+	<div class="GifBlock">
+		<div class="UG_IMG"><img src="img/ConnectDevice.gif" /></div>
+	</div>
+</div>
+</div>
+
+<div id="GifBigBoard" board="wifisend">
+<div id="GifBoard" >
+	<div class="GifBlock">
+		<div class="UG_IMG"><img src="img/WifiSend.gif" /></div>
 	</div>
 </div>
 </div>
@@ -77,12 +107,47 @@
 <div id="GifBigBoard" board="issuereport">
 <div id="GifBoard" >
 	<div class="GifBlock">
-		<div class="UG_PRINTER"><img src="img/X-MAX3.png" /><img /><img src="img/X-Plus3.png" /><img /><img src="img/X-Smart3.png" /></div>
-		<div class="UG_TITLE trans TextS1" tid="wk1">Issue Report</div>
-		<div class="UG_DESC trans" tid="wk2">You can copy the email address or skype to get in touch with us by clicking Help - Requirements Report. Please try to tell us your requirements in the form of video or pictures, and provide 3MF file, G-code file, machine number and other necessary information. </div>
+		<div class="UG_B_TITLE trans TextS1" tid="wk1">Issue Report</div>
+		<div class="UG_B_DESC trans" tid="wk2">If you have any questions about the Printer or QIDISlicer, please contact us via the appropriate E-mail address or Skype.<br />
+		Note: please try to tell us your requirements in the form of video or pictures, and provide 3MF file, G-code file, machine number and other necessary information.</div>
+	</div>
+</div>
+<div id="IssueBoard">
+	<div class="PrintBlock">
+		<div class="UG_IMG"><img src="img/X-MAX3.png" /></div>
+		<div class="UG_TITLE">X-MAX 3</div>
+		<div class="UG_DESC">E-mail:</div>
+		<div class="UG_CDESC">MAX3support@qd3dprinter.com<br>MAX3AMS@qd3dprinter.com</div>
+		<div class="UG_DESC">Skype:</div>
+		<div class="UG_CDESC">MAX3support@qd3dprinter.com</div>
+	</div>
+	<div class="PrintBlock">
+		<div class="UG_IMG"><img src="img/X-Plus3.png" /></div>
+		<div class="UG_TITLE">X-Plus 3</div>
+		<div class="UG_DESC">E-mail:</div>
+		<div class="UG_CDESC">Plus3support@qd3dprinter.com<br>Plus3AMS@qd3dprinter.com</div>
+		<div class="UG_DESC">Skype:</div>
+		<div class="UG_CDESC">Plus3support@qd3dprinter.com</div>
+	</div>
+	<div class="PrintBlock">
+		<div class="UG_IMG"><img src="img/X-Smart3.png" /></div>
+		<div class="UG_TITLE">X-Smart 3</div>
+		<div class="UG_DESC">E-mail:</div>
+		<div class="UG_CDESC">Smart3support@qd3dprinter.com<br>Smart3AMS@qd3dprinter.com</div>
+		<div class="UG_DESC">Skype:</div>
+		<div class="UG_CDESC">Smart3support@qd3dprinter.com</div>
 	</div>
 </div>
 </div>
+<!--<div id="GifBigBoard" board="issuereport">
+<div id="GifBoard" >
+	<div class="GifBlock">
+		<div class="UG_B_TITLE trans TextS1" tid="wk1">Issue Report</div>
+		<div class="UG_B_DESC trans" tid="wk2">You can copy the email address or skype to get in touch with us by clicking Help - Requirements Report. Please try to tell us your requirements in the form of video or pictures, and provide 3MF file, G-code file, machine number and other necessary information. </div>
+		<div class="UG_PRINTER"><img src="img/X-MAX3.png" /><img /><img src="img/X-Plus3.png" /><img /><img src="img/X-Smart3.png" /></div>
+	</div>
+</div>
+</div>-->
 	
 </div>	
 </body>