diff --git a/examples/component/gallery.cpp b/examples/component/gallery.cpp
index ca73f6b..a9b497d 100644
--- a/examples/component/gallery.cpp
+++ b/examples/component/gallery.cpp
@@ -22,18 +22,16 @@ class MyComponent : public Component {
   MyComponent() {
     Add(&container);
     menu.entries = {
-        L"Browse the web",
-        L"Meditate",
-        L"Sleep",
-        L"Eat",
+        L"Menu 1",
+        L"Menu 2",
+        L"Menu 3",
+        L"Menu 4",
     };
     container.Add(&menu);
 
     toggle.entries = {
-        L"Browse the web",
-        L"Meditate",
-        L"Sleep",
-        L"Eat",
+        L"Toggle_1",
+        L"Toggle_2",
     };
     container.Add(&toggle);
 
@@ -44,10 +42,10 @@ class MyComponent : public Component {
     checkbox_container.Add(&checkbox2);
 
     radiobox.entries = {
-        L"Browse the web",
-        L"Meditate",
-        L"Sleep",
-        L"Eat",
+        L"Radiobox 1",
+        L"Radiobox 2",
+        L"Radiobox 3",
+        L"Radiobox 4",
     };
     container.Add(&radiobox);
 
@@ -56,7 +54,7 @@ class MyComponent : public Component {
   }
 
   Element Render(std::wstring name, Component& component) {
-    return hbox(text(name) | size(10,1), separator(), component.Render());
+    return hbox(text(name) | size(8,1), separator(), component.Render());
   }
 
   Element Render() override {
@@ -76,7 +74,7 @@ class MyComponent : public Component {
 };
 
 int main(int argc, const char* argv[]) {
-  auto screen = ScreenInteractive::TerminalOutput();
+  auto screen = ScreenInteractive::FitComponent();
   MyComponent component;
   screen.Loop(&component);
 
diff --git a/ftxui/include/ftxui/component/checkbox.hpp b/ftxui/include/ftxui/component/checkbox.hpp
index 9a2c325..6e880cf 100644
--- a/ftxui/include/ftxui/component/checkbox.hpp
+++ b/ftxui/include/ftxui/component/checkbox.hpp
@@ -20,6 +20,9 @@ class CheckBox : public Component {
   std::wstring checked = L"☑ ";
   std::wstring unchecked = L"☐ ";
 
+  Decorator focused_style = inverted;
+  Decorator unfocused_style = nothing;
+
   // State update callback.
   std::function<void()> on_change = [](){};
 
diff --git a/ftxui/include/ftxui/component/screen_interactive.hpp b/ftxui/include/ftxui/component/screen_interactive.hpp
index b69e313..5553a1b 100644
--- a/ftxui/include/ftxui/component/screen_interactive.hpp
+++ b/ftxui/include/ftxui/component/screen_interactive.hpp
@@ -12,6 +12,7 @@ class ScreenInteractive : public Screen {
   public:
     static ScreenInteractive FixedSize(size_t dimx, size_t dimy);
     static ScreenInteractive Fullscreen();
+    static ScreenInteractive FitComponent();
     static ScreenInteractive TerminalOutput();
 
     ~ScreenInteractive();
@@ -23,9 +24,10 @@ class ScreenInteractive : public Screen {
    bool quit_ = false;
 
    enum class Dimension {
+     FitComponent,
      Fixed,
-     TerminalOutput,
      Fullscreen,
+     TerminalOutput,
    };
    Dimension dimension_ = Dimension::Fixed;
    ScreenInteractive(size_t dimx, size_t dimy, Dimension dimension);
diff --git a/ftxui/include/ftxui/screen/screen.hpp b/ftxui/include/ftxui/screen/screen.hpp
index 28fb51b..d491d9d 100644
--- a/ftxui/include/ftxui/screen/screen.hpp
+++ b/ftxui/include/ftxui/screen/screen.hpp
@@ -50,6 +50,8 @@ class Screen {
   // Fill with space.
   void Clear();
 
+  void ApplyShader();
+
  protected:
   size_t dimx_;
   size_t dimy_;
diff --git a/ftxui/src/ftxui/component/checkbox.cpp b/ftxui/src/ftxui/component/checkbox.cpp
index a879a06..b6b6a49 100644
--- a/ftxui/src/ftxui/component/checkbox.cpp
+++ b/ftxui/src/ftxui/component/checkbox.cpp
@@ -4,8 +4,8 @@
 namespace ftxui {
 
 Element CheckBox::Render() {
-  auto style = Focused() ? bold : nothing;
-  return text((state ? checked : unchecked) + label) | style;
+  auto style = Focused() ? focused_style : unfocused_style;
+  return hbox(text(state ? checked : unchecked), text(label) | style);
 }
 
 bool CheckBox::OnEvent(Event event) {
diff --git a/ftxui/src/ftxui/component/screen_interactive.cpp b/ftxui/src/ftxui/component/screen_interactive.cpp
index 7f49b15..6407a04 100644
--- a/ftxui/src/ftxui/component/screen_interactive.cpp
+++ b/ftxui/src/ftxui/component/screen_interactive.cpp
@@ -65,6 +65,11 @@ ScreenInteractive ScreenInteractive::TerminalOutput() {
   return ScreenInteractive(0, 0, Dimension::TerminalOutput);
 }
 
+// static
+ScreenInteractive ScreenInteractive::FitComponent() {
+  return ScreenInteractive(0, 0, Dimension::FitComponent);
+}
+
 void ScreenInteractive::Loop(Component* component) {
   //std::cout << "\033[?9h";    [> Send Mouse Row & Column on Button Press <]
   //std::cout << "\033[?1000h"; [> Send Mouse X & Y on button press and release <]
@@ -114,10 +119,14 @@ void ScreenInteractive::Draw(Component* component) {
       dimy = document->requirement().min.y;
       break;
     case Dimension::Fullscreen:
-      document->ComputeRequirement();
       dimx = Terminal::Size().dimx;
       dimy = Terminal::Size().dimy;
       break;
+    case Dimension::FitComponent:
+      document->ComputeRequirement();
+      dimx = document->requirement().min.x;
+      dimy = document->requirement().min.y;
+      break;
   }
 
   if (dimx != dimx_ || dimy != dimy_) {
diff --git a/ftxui/src/ftxui/dom/frame.cpp b/ftxui/src/ftxui/dom/frame.cpp
index 7879470..c6282fb 100644
--- a/ftxui/src/ftxui/dom/frame.cpp
+++ b/ftxui/src/ftxui/dom/frame.cpp
@@ -61,20 +61,6 @@ class Frame : public Node {
       screen.at(box_.right,y) = charset[5];
     }
 
-    // Try to merge with separator.
-    for(float x = box_.left + 1; x<box_.right; ++x) {
-      if (screen.at(x, box_.top + 1) == charset[5])
-        screen.at(x, box_.top) = charset[6];
-      if (screen.at(x, box_.bottom - 1) == charset[5])
-        screen.at(x, box_.bottom) = charset[7];
-    }
-    for(float y = box_.top + 1; y<box_.bottom; ++y) {
-      if (screen.at(box_.left+1, y) == charset[4])
-        screen.at(box_.left, y) = charset[9];
-      if (screen.at(box_.right-1, y) == charset[4])
-        screen.at(box_.right,y) = charset[8];
-    }
-
     // Draw title.
     if (children.size() == 2)
       children[1]->Render(screen);
diff --git a/ftxui/src/ftxui/dom/node.cpp b/ftxui/src/ftxui/dom/node.cpp
index 1a7245f..cc2e5da 100644
--- a/ftxui/src/ftxui/dom/node.cpp
+++ b/ftxui/src/ftxui/dom/node.cpp
@@ -38,6 +38,9 @@ void Render(Screen& screen, Node* node) {
 
   // Step 3: Draw the element.
   node->Render(screen);
+
+  // Step 4: Apply shaders
+  screen.ApplyShader();
 }
 
 };  // namespace ftxui
diff --git a/ftxui/src/ftxui/screen/screen.cpp b/ftxui/src/ftxui/screen/screen.cpp
index 5d2ff01..33c8fb2 100644
--- a/ftxui/src/ftxui/screen/screen.cpp
+++ b/ftxui/src/ftxui/screen/screen.cpp
@@ -22,6 +22,10 @@ static const wchar_t* BLINK_RESET = L"\e[25m";
 static const wchar_t* INVERTED_SET = L"\e[7m";
 static const wchar_t* INVERTED_RESET = L"\e[27m";
 
+static const char* MOVE_LEFT = "\r";
+static const char* MOVE_UP = "\e[1A";
+static const char* CLEAR_LINE = "\e[2K";
+
 Screen::Screen(size_t dimx, size_t dimy)
     : dimx_(dimx), dimy_(dimy), pixels_(dimy, std::vector<Pixel>(dimx)) {}
 
@@ -94,9 +98,9 @@ Screen Screen::TerminalOutput(std::unique_ptr<Node>& element) {
 
 std::string Screen::ResetPosition() {
   std::stringstream ss;
-  ss << '\r';
+  ss << MOVE_LEFT << CLEAR_LINE;
   for (size_t y = 1; y < dimy_; ++y) {
-    ss << "\e[2K\r\e[1A";
+    ss << MOVE_UP << CLEAR_LINE;
   }
   return ss.str();
 }
@@ -106,4 +110,37 @@ void Screen::Clear() {
                                             std::vector<Pixel>(dimx_, Pixel()));
 }
 
+void Screen::ApplyShader() {
+
+  // Merge box characters togethers.
+  for(size_t y = 1; y<dimy_; ++y) {
+    for(size_t x = 1; x<dimx_; ++x) {
+      wchar_t& left = at(x - 1, y);
+      wchar_t& top = at(x, y - 1);
+      wchar_t& cur = at(x, y);
+
+      // Left vs current
+      if (cur== U'│' && left == U'─')
+        cur= U'┤';
+      if (cur== U'─' && left == U'│')
+        left = U'├';
+      if (cur== U'├' && left == U'─')
+        cur= U'┼';
+      if (cur== U'─' && left == U'┤')
+        left = U'┼';
+
+      // Top vs current
+      if (cur== U'─' && top == U'│')
+        cur= U'┴';
+      if (cur== U'│' && top == U'─')
+        top = U'┬';
+      if (cur== U'┬' && top == U'│')
+        cur= U'┼';
+      if (cur== U'│' && top == U'┴')
+        top = U'┼';
+    }
+  }
+}
+
+
 };  // namespace ftxui
diff --git a/tutorial.md b/tutorial.md
index a37a065..dd0bf62 100644
--- a/tutorial.md
+++ b/tutorial.md
@@ -1,17 +1,23 @@
-Table of content.
+- [Introduction](#introduction)
 - [DOM](#dom)
   * [Style](#style)
   * [Layout](#layout)
+    + [Examples](#examples)
   * [Widget.](#widget)
     + [text](#text)
     + [frame](#frame)
     + [separator](#separator)
     + [gauge](#gauge)
+  * [Decorator](#decorator)
 - [Components.](#components)
   * [Input](#input)
   * [Menu](#menu)
   * [Toggle.](#toggle)
 
+## Introduction
+I highly recommand to not take too long on the tutorial, instead you should try
+to understand the /example/*.
+
 ## DOM
 All the dom element are declared in one header:
 ~~~cpp
@@ -22,18 +28,22 @@ It declares the following set of elements:
 
 ~~~cpp
 // --- Layout ----
-Element vbox(Children);
-Element hbox(Children);
-Element dbox(Children);
+Element vbox(Elements);
+Element hbox(Elements);
+Element dbox(Elements);
+
+// -- Flexibility --
 Element filler();
 Element flex(Element);
+Decorator size(size_t width, size_t height);
 
 // --- Widget --
 Element text(std::wstring text);
 Element separator();
 Element gauge(float ratio);
 Element frame(Element);
-Element window(Child title, Child content);
+Element window(Element title, Element content);
+Element spinner(int charset_index, size_t image_index);
 
 // -- Decorator ---
 Element bold(Element);
@@ -41,15 +51,17 @@ Element dim(Element);
 Element inverted(Element);
 Element underlined(Element);
 Element blink(Element);
-Element color(Color, Element);
-Element bgcolor(Color, Element);
+
 Decorator color(Color);
 Decorator bgcolor(Color);
+Element color(Color, Element);
+Element bgcolor(Color, Element);
 
 // --- Util ---
 Element hcenter(Element);
 Element vcenter(Element);
 Element center(Element);
+Element align_right(Element);
 
 // --- Util ---
 Element nothing(Element element);
@@ -74,21 +86,21 @@ Element bgcolor(Color, Element);
 
 * vbox (Vertical-box)
 * hbox (Horizontal-box)
-* fbox (Depth-box)
+* dbox (Depth-box)
 are containers. They are used to compose all the elements together. Each
 children are put side by side. If the container is flexible, the extra space
 available will be shared among the remaining flexible children.
 
-flex(element) can be used to make a non-flexible element flexible.
-filler() is a flexible empty element. You can use it to children on one side of
-the container.
+flex(element) can be used to make a non-flexible element flexible. filler() is a
+flexible empty element. You can use it align children on one side of the
+container.
 
 #### Examples
 ~~~cpp
   hbox(
-    frame(text(L"left")),
-    flex(frame(text(L"middle"))),
-    frame(text(L"right"))
+    text(L"left") | frame ,
+    text(L"middle") | frame | flex,
+    text(L"right") | frame
   );
 ~~~
 ~~~bash
@@ -99,9 +111,9 @@ the container.
 
 ~~~cpp
   hbox(
-    frame(text(L"left")),
-    flex(frame(text(L"middle"))),
-    flex(frame(text(L"right")))
+    text(L"left") | frame ,
+    text(L"middle") | frame | flex,
+    text(L"right") | frame | flex
   );
 ~~~
 ~~~bash
@@ -190,6 +202,7 @@ text(L"This text is bold")) | bold | underlined
 
 ## Components.
 
+dom element are stateless. 
 ### Input
   TODO(arthursonzogni): Add Video
 ### Menu