diff --git a/images/classicScene.jpeg b/images/classicScene.jpeg
new file mode 100644
index 000000000..5a3fe480e
Binary files /dev/null and b/images/classicScene.jpeg differ
diff --git a/images/classicScene.png b/images/classicScene.png
deleted file mode 100644
index d90570feb..000000000
Binary files a/images/classicScene.png and /dev/null differ
diff --git a/index.html b/index.html
index 79971b06e..ccb3e7331 100644
--- a/index.html
+++ b/index.html
@@ -27,7 +27,7 @@
 
 <h3>
 <a id="为什么需要sky-walking" class="anchor" href="#%E4%B8%BA%E4%BB%80%E4%B9%88%E9%9C%80%E8%A6%81sky-walking" aria-hidden="true"><span class="octicon octicon-link"></span></a>为什么需要Sky Walking?</h3>
-<p><img src="images/classicScene.png"/></p>
+<p><img src="images/classicScene.jpeg"/></p>
 <p>目前主流的应用系统或者互联网系统，都是由各种不同职责的系统构成的大规模集群(如上图所示)，通过分布式调用（rest、webservice、dubbo、消息等）的模式，支持前台系统。系统间关系复杂，无法预先设计与规划。调用链路繁多，通过日志分析难度很大。<br/>
 <br/>
 分布式系统的开发者和维护人员，希望在系统出现业务错误时，得到邮件通知，并能从全局角度追踪调用关系，而不用在庞大的分布式日志中，寻找关联关系和错误原因。<br/>
diff --git a/sample-code/codeView.html b/sample-code/codeView.html
index 0f19d0869..289842b1e 100644
--- a/sample-code/codeView.html
+++ b/sample-code/codeView.html
@@ -2,7 +2,7 @@
 <html lang="en-us">
   <head>
     <meta charset="UTF-8">
-    <title>Sky Walking Code View</title>
+    <title>Sky Walking API Guide</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <link rel="stylesheet" type="text/css" href="../stylesheets/normalize.css" media="screen">
diff --git a/sample-code/images/skywalkingClusterDeploy.jpeg b/sample-code/images/skywalkingClusterDeploy.jpeg
new file mode 100644
index 000000000..7ece343c1
Binary files /dev/null and b/sample-code/images/skywalkingClusterDeploy.jpeg differ
diff --git a/sample-code/uiView.html b/sample-code/uiView.html
index 43ea48067..93cd1d62c 100755
--- a/sample-code/uiView.html
+++ b/sample-code/uiView.html
@@ -19,7 +19,7 @@
 </head>
   <body style="font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;margin:0;padding:0;font-size:16px;line-height:1.5">
   	<section class="page-header" style="background-image: url(../images/backgroud.png);padding: 0.5rem 1rem;text-align:center;">
-      <h2 style="color:#fff;font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;line-height:1.5">Sky Walking UI Preview（暂未开放）</h2>
+      <h2 style="color:#fff;font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;line-height:1.5">Sky Walking UI Preview</h2>
     </section>
     
     <section class="main-content">
@@ -27,11 +27,11 @@
 <section id="gallery">
 	<div class="container">
 		<ul id="myRoundabout">
+	  <li><img src="images/skywalkingClusterDeploy.jpeg" alt=""></li>
+		<li><img src="images/slide1.jpg" alt=""></li>
+		<li><img src="images/slide1.jpg" alt=""></li>
+		<li><img src="images/slide1.jpg" alt=""></li>
 		<li><img src="images/sampleAppClusterView.jpeg" alt=""></li>
-		<li><img src="images/slide1.jpg" alt=""></li>
-		<li><img src="images/slide1.jpg" alt=""></li>
-		<li><img src="images/slide1.jpg" alt=""></li>
-		<li><img src="images/slide1.jpg" alt=""></li>
 	  </ul>
 	</div>
 </section>	
