diff --git a/src/hi/hi.js b/src/hi/icon.js
similarity index 93%
rename from src/hi/hi.js
rename to src/hi/icon.js
index edd25e84..b4d8c6fd 100644
--- a/src/hi/hi.js
+++ b/src/hi/icon.js
@@ -14,6 +14,7 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg) {
 		back: {16: [27, 185], 18: [30, 208], 20: [33, 232], 24: [40, 278]},
 		"goto": {16: [82, 185], 18: [92, 208], 20: [102, 232], 24: [123, 278]},
 	})
+	can.page.Append(can, can._output, [{text: "\u2715", style: {"font-size": "24px"}}])
 	can.page.Append(can, can._output, [{view: html.IMG, style: {"background": "url(/publish/icon/full.jpg)", "background-size": "480px", height: 1290, width: 480}}])
 	can.sup.onimport.size(can.sup, can.ConfHeight()+html.ACTION_HEIGHT, can.sup.ConfWidth(480)), can.sup.onaction._output(can.sup, msg)
 }})
diff --git a/src/hi/layout.js b/src/hi/layout.js
new file mode 100644
index 00000000..28b81e9d
--- /dev/null
+++ b/src/hi/layout.js
@@ -0,0 +1,10 @@
+Volcanos(chat.ONIMPORT, {_init: function(can, msg) {
+	can.onappend.layout(can, can._output, "flex", [
+		{view: ["hi", html.DIV, "he"]},
+		{view: ["he", html.DIV, "he"]},
+		[
+			{view: ["hi", html.DIV, "he"]},
+			{view: ["he", html.DIV, "he"]},
+		],
+	]).layout(can.ConfWidth(), can.ConfHeight())
+}})
diff --git a/src/main.shy b/src/main.shy
index b654ed2e..362b1e2c 100644
--- a/src/main.shy
+++ b/src/main.shy
@@ -12,6 +12,8 @@ https://www.w3schools.com/colors/colors_names.asp
 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors
 https://docs.tizen.org/platform/what-is-tizen/overview/
 https://www.cnblogs.com/cl1234/p/5545290.html
+http://www.unicode.org/charts/
+https://www.w3schools.com/charsets/ref_html_utf8.asp
 `
 
 chapter "实践"