diff --git a/README.md b/README.md
index a27ea59..c0ac4d5 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 # GuiLite 揭示UI原理，打造你自己的UI（框架）- 开发者qq群：527251257
 ![Demo](doc/demo.gif)
 
-![编译方法](doc/HowToBuild.md)
+![编译方法](doc/HowToBuild.md)，[界面布局方法](doc/HowLayoutWork.md)，[消息传递方法](doc/HowMessageWork.md)
 
 超轻量UI框架 - GuiLite是由6千行左右的C/C++代码编写而成，它像MFC，QT一样为开发者提供界面支持。
 
diff --git a/doc/HowLayoutWork.md b/doc/HowLayoutWork.md
new file mode 100644
index 0000000..7a246c5
--- /dev/null
+++ b/doc/HowLayoutWork.md
@@ -0,0 +1,10 @@
+# How to layout widgets for GuiLiteSamples::HostMonitor?
+
+All widgets was description with struce WND_TREE and ?.xml.cpp files
+
+## How to layout slid group?
+![Layout slides group](layout_slide_group.png)
+## How to layout single slide?
+![Layout single slide](layout_single_slide.png)
+## How to layout dialog?
+![Layout dialog](layout_dialog.png)
\ No newline at end of file
diff --git a/doc/HowMessageWork.md b/doc/HowMessageWork.md
new file mode 100644
index 0000000..d8615e9
--- /dev/null
+++ b/doc/HowMessageWork.md
@@ -0,0 +1,10 @@
+# How messages work for GuiLiteSamples::HostMonitor?
+
+## How real time message(draw waves) work?
+![Callstack for drawing waves](draw_wav.png)
+
+## How click button message work?
+![Callstack for clicking button](click_button.png)
+
+## How left/right flip message work?
+![Callstack for fliping slides](flip.png)
\ No newline at end of file
diff --git a/doc/click_button.png b/doc/click_button.png
new file mode 100644
index 0000000..ffc27cf
Binary files /dev/null and b/doc/click_button.png differ
diff --git a/doc/draw_wav.png b/doc/draw_wav.png
new file mode 100644
index 0000000..9e203f6
Binary files /dev/null and b/doc/draw_wav.png differ
diff --git a/doc/flip.png b/doc/flip.png
new file mode 100644
index 0000000..53a71a0
Binary files /dev/null and b/doc/flip.png differ
diff --git a/doc/layout_dialog.png b/doc/layout_dialog.png
new file mode 100644
index 0000000..b7f28de
Binary files /dev/null and b/doc/layout_dialog.png differ
diff --git a/doc/layout_single_slide.png b/doc/layout_single_slide.png
new file mode 100644
index 0000000..a6c13af
Binary files /dev/null and b/doc/layout_single_slide.png differ
diff --git a/doc/layout_slide_group.png b/doc/layout_slide_group.png
new file mode 100644
index 0000000..b84a18b
Binary files /dev/null and b/doc/layout_slide_group.png differ