diff --git a/docs/godot/first-step.md b/docs/godot/1-first-step.md
similarity index 100%
rename from docs/godot/first-step.md
rename to docs/godot/1-first-step.md
diff --git a/docs/godot/custom-signals.md b/docs/godot/10-custom-signals.md
similarity index 100%
rename from docs/godot/custom-signals.md
rename to docs/godot/10-custom-signals.md
diff --git a/docs/godot/scenes-inside-node.md b/docs/godot/11-scenes-inside-node.md
similarity index 100%
rename from docs/godot/scenes-inside-node.md
rename to docs/godot/11-scenes-inside-node.md
diff --git a/docs/godot/rigid-body-2D.md b/docs/godot/12-rigid-body-2D.md
similarity index 100%
rename from docs/godot/rigid-body-2D.md
rename to docs/godot/12-rigid-body-2D.md
diff --git a/docs/godot/camera.md b/docs/godot/13-camera.md
similarity index 100%
rename from docs/godot/camera.md
rename to docs/godot/13-camera.md
diff --git a/docs/godot/physics-layer.md b/docs/godot/14-physics-layer.md
similarity index 100%
rename from docs/godot/physics-layer.md
rename to docs/godot/14-physics-layer.md
diff --git a/docs/godot/tilemap.md b/docs/godot/15-tilemap.md
similarity index 99%
rename from docs/godot/tilemap.md
rename to docs/godot/15-tilemap.md
index 1f6059d..9e81e69 100644
--- a/docs/godot/tilemap.md
+++ b/docs/godot/15-tilemap.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 14
+sidebar_position: 15
 ---
 
 # Tilemap
diff --git a/docs/godot/particles.md b/docs/godot/16-particles.md
similarity index 98%
rename from docs/godot/particles.md
rename to docs/godot/16-particles.md
index 4677c1b..cee241f 100644
--- a/docs/godot/particles.md
+++ b/docs/godot/16-particles.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 15
+sidebar_position: 16
 ---
 
 # Particles
diff --git a/docs/godot/light.md b/docs/godot/17-light.md
similarity index 99%
rename from docs/godot/light.md
rename to docs/godot/17-light.md
index 531e16d..d8d83d0 100644
--- a/docs/godot/light.md
+++ b/docs/godot/17-light.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 16
+sidebar_position: 17
 ---
 
 # Light
diff --git a/docs/godot/animations.md b/docs/godot/18-animations.md
similarity index 99%
rename from docs/godot/animations.md
rename to docs/godot/18-animations.md
index 105d715..b1fb860 100644
--- a/docs/godot/animations.md
+++ b/docs/godot/18-animations.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 17
+sidebar_position: 18
 ---
 
 # Animations
diff --git a/docs/godot/tweens.md b/docs/godot/19-tweens.md
similarity index 98%
rename from docs/godot/tweens.md
rename to docs/godot/19-tweens.md
index a2897bf..003d7cf 100644
--- a/docs/godot/tweens.md
+++ b/docs/godot/19-tweens.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 18
+sidebar_position: 19
 ---
 
 # Tweens
diff --git a/docs/godot/create-node-scene.md b/docs/godot/2-create-node-scene.md
similarity index 100%
rename from docs/godot/create-node-scene.md
rename to docs/godot/2-create-node-scene.md
diff --git a/docs/godot/laser.md b/docs/godot/20-laser.md
similarity index 97%
rename from docs/godot/laser.md
rename to docs/godot/20-laser.md
index 8d6dbc1..64608d3 100644
--- a/docs/godot/laser.md
+++ b/docs/godot/20-laser.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 19
+sidebar_position: 20
 ---
 
 # Lasers
diff --git a/docs/godot/multiple-level.md b/docs/godot/21-multiple-level.md
similarity index 97%
rename from docs/godot/multiple-level.md
rename to docs/godot/21-multiple-level.md
index f6c3590..be388b8 100644
--- a/docs/godot/multiple-level.md
+++ b/docs/godot/21-multiple-level.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 20
+sidebar_position: 21
 ---
 
 # Create multiple levels
diff --git a/docs/godot/level-transition.md b/docs/godot/22-level-transition.md
similarity index 98%
rename from docs/godot/level-transition.md
rename to docs/godot/22-level-transition.md
index 98ed38c..71f5359 100644
--- a/docs/godot/level-transition.md
+++ b/docs/godot/22-level-transition.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 21
+sidebar_position: 22
 ---
 
 # Level transition
diff --git a/docs/godot/23-user-interface.md b/docs/godot/23-user-interface.md
new file mode 100644
index 0000000..5643054
--- /dev/null
+++ b/docs/godot/23-user-interface.md
@@ -0,0 +1,67 @@
+---
+sidebar_position: 23
+---
+
+# User interface
+
+There are 4 kinds of Nodes:
+- 2D 🔵
+- 3D 🔴
+- Control 🟢
+- Other ⚪️
+
+## Control Nodes
+
+Labels, images, progress bars, buttons, areas with colors, text input, graphs, menus, videos.
+
+2D Nodes are placed via pixel positions.
+Control Nodes work via anchors and container.
+
+Create a new scene, select a **Canvas Layer** that will contain all our UI elements. The canvas will be positioned on top of the game.
+So every label, texture, etc. will be visible inside the screen game.
+
+There are 2 ways to place a control node.
+Anchors and Containers
+
+Anchors are the green needles in the topleft of a control node
+
+Containers are parent nodes that determine the position of their children
+
+(You can also use x and y properties or drag the Control Node to the position you want but that is almost never a good idea)
+
+### Anchors
+
+We have acces to panel of anchors on top of the screen.
+
+![Anchors](/img/anchors.png)
+
+But we can also use the **Layout** menu to setup the anchors.
+
+![Layout](/img/layout.png)
+
+Is like in css, we have **Anchor Points** with top, bottom, left, right.
+The value inside `right` is calculated from the left position of the node.
+So `left: 0` and `right: 0` will make the node with no width.
+However, if we set `left: 0` and `right: 100`, the node will have a width of 100.
+For the `top` and `bottom` is the same. The `bottom` value is calculated from the `top` position of the node.
+And `top: 0.5` and `bottom: 0.5` will make the node at the center of the screen, with no height.
+However, if we set `top: 0.5` and `bottom: 0.6`, the node will have a height of 0.1. etc.
+
+Remember, in 2D, x and y are the top left corner of the node.
+The start position are (0, 0) and the end position are (1, 1).
+So we navigate between this number.
+
+### Containers
+
+It's like flexbox or Grid in css.
+
+We can use **HBoxContainer** or **VBoxContainer**. It's working with children.
+You have **GridContainer** it's workin like a grid in css with column.
+
+## Progress bar
+
+We need to add a progress bar, Godot has 2: A plain one and a textured one.
+They are both set in the same way.
+The textured need 3 images: background, over and progress image.
+
+To position the progress bar, we can use container and the best container for that is **MarginContainer**. It's like a div with margin in css. If we position the progress bar on bottom center, with the margin, the progress bar will be always at the bottom center of the screen with the good margin.
\ No newline at end of file
diff --git a/docs/godot/working-code-part-1.md b/docs/godot/3-working-code-part-1.md
similarity index 100%
rename from docs/godot/working-code-part-1.md
rename to docs/godot/3-working-code-part-1.md
diff --git a/docs/godot/working-code-part-2.md b/docs/godot/4-working-code-part-2.md
similarity index 100%
rename from docs/godot/working-code-part-2.md
rename to docs/godot/4-working-code-part-2.md
diff --git a/docs/godot/delta.md b/docs/godot/5-delta.md
similarity index 100%
rename from docs/godot/delta.md
rename to docs/godot/5-delta.md
diff --git a/docs/godot/input.md b/docs/godot/6-input.md
similarity index 100%
rename from docs/godot/input.md
rename to docs/godot/6-input.md
diff --git a/docs/godot/more-nodes.md b/docs/godot/7-more-nodes.md
similarity index 100%
rename from docs/godot/more-nodes.md
rename to docs/godot/7-more-nodes.md
diff --git a/docs/godot/physics.md b/docs/godot/8-physics.md
similarity index 100%
rename from docs/godot/physics.md
rename to docs/godot/8-physics.md
diff --git a/docs/godot/signals.md b/docs/godot/9-signals.md
similarity index 100%
rename from docs/godot/signals.md
rename to docs/godot/9-signals.md
diff --git a/static/img/anchors.png b/static/img/anchors.png
new file mode 100644
index 0000000..94ea27e
Binary files /dev/null and b/static/img/anchors.png differ
diff --git a/static/img/layout.png b/static/img/layout.png
new file mode 100644
index 0000000..23b3242
Binary files /dev/null and b/static/img/layout.png differ