diff --git a/data/ascii-draw.gresource.xml b/data/ascii-draw.gresource.xml
index 7840215..4b846d9 100644
--- a/data/ascii-draw.gresource.xml
+++ b/data/ascii-draw.gresource.xml
@@ -22,6 +22,7 @@
     <file preprocess="xml-stripblanks">icons/16x16/actions/line-style-symbolic.svg</file>
     <file preprocess="xml-stripblanks">icons/16x16/actions/edit-undo-symbolic.svg</file>
     <file preprocess="xml-stripblanks">icons/16x16/actions/fill-tool-symbolic.svg</file>
+    <file preprocess="xml-stripblanks">icons/16x16/actions/right-large-symbolic.svg</file>
 
     <file preprocess="xml-stripblanks">ui/eraser_sidebar.ui</file>
     <file preprocess="xml-stripblanks">ui/freehand_sidebar.ui</file>
diff --git a/data/icons/16x16/actions/right-large-symbolic.svg b/data/icons/16x16/actions/right-large-symbolic.svg
new file mode 100644
index 0000000..3d76598
--- /dev/null
+++ b/data/icons/16x16/actions/right-large-symbolic.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px"><path d="m 5.707031 1.292969 l 6 6 c 0.390625 0.390625 0.390625 1.023437 0 1.414062 l -6 6 c -0.390625 0.390625 -1.023437 0.390625 -1.414062 0 s -0.390625 -1.023437 0 -1.414062 l 5.292969 -5.292969 l -5.292969 -5.292969 c -0.390625 -0.390625 -0.390625 -1.023437 0 -1.414062 s 1.023437 -0.390625 1.414062 0 z m 0 0" fill="#222222" fill-rule="evenodd"/></svg>
diff --git a/data/style-dark.css b/data/style-dark.css
index 7c0e279..20f23c6 100644
--- a/data/style-dark.css
+++ b/data/style-dark.css
@@ -10,6 +10,6 @@
         linear-gradient(to bottom, #333333 1px, transparent 1px);
     box-shadow:
         inset 0px 0px 0px 1px #555555,
-        0px 0px 10px 10px @headerbar_shade_color;
+        0px 0px 6px 6px @headerbar_shade_color;
     opacity:0.4;
 }
diff --git a/data/style.css b/data/style.css
index 7cf58c7..e6cf3a0 100644
--- a/data/style.css
+++ b/data/style.css
@@ -16,7 +16,7 @@
         linear-gradient(to bottom, #aaaaaa 1px, transparent 1px);
     box-shadow:
         inset 0px 0px 0px 1px #777777,
-        0px 0px 10px 10px @headerbar_shade_color;
+        0px 0px 6px 6px @headerbar_shade_color;
     opacity:0.4;
 }
 .ascii {
diff --git a/data/ui/unicode_tooltip.ui b/data/ui/unicode_tooltip.ui
index fcb5aeb..c8f5f02 100644
--- a/data/ui/unicode_tooltip.ui
+++ b/data/ui/unicode_tooltip.ui
@@ -13,7 +13,6 @@
         <property name="spacing">12</property>
         <child>
           <object class="GtkLabel" id="char_label">
-            <!-- <property name="css-classes">title-4</property> -->
             <property name="hexpand">True</property>
             <property name="xalign">0.0</property>
           </object>
diff --git a/data/ui/window.ui b/data/ui/window.ui
index 875abd0..aeab8dd 100644
--- a/data/ui/window.ui
+++ b/data/ui/window.ui
@@ -8,128 +8,56 @@
   <template class="AsciiDrawWindow" parent="AdwApplicationWindow">
     <property name="height-request">480</property>
     <property name="width-request">360</property>
+    <property name="title">ASCII Draw</property>
     <child>
       <object class="AdwBreakpoint">
-        <!-- Custom fragments -->
-        <condition>max-width: 530px</condition>
+        <condition>max-width: 850px</condition>
+        <setter object="toolbar_layout_box" property="orientation">vertical</setter>
+        <!-- <setter object="title_widget" property="visible">false</setter> -->
+      </object>
+    </child>
+    <child>
+      <object class="AdwBreakpoint">
+        <condition>max-width: 650px</condition>
+        <setter object="toolbar_layout_box" property="orientation">horizontal</setter>
+        <setter object="overlay_split_view" property="collapsed">true</setter>
+        <!-- <setter object="overlay_split_view" property="show-sidebar">true</setter> -->
+        <!-- <setter object="title_widget" property="visible">false</setter> -->
+      </object>
+    </child>
+    <child>
+      <object class="AdwBreakpoint">
+        <condition>max-width: 550px</condition>
         <setter object="toolbar_layout_box" property="orientation">vertical</setter>
         <setter object="overlay_split_view" property="collapsed">true</setter>
-        <setter object="overlay_split_view" property="show-sidebar">true</setter>
-        <setter object="title_widget" property="visible">false</setter>
+        <!-- <setter object="overlay_split_view" property="show-sidebar">true</setter> -->
+        <!-- <setter object="title_widget" property="visible">false</setter> -->
       </object>
     </child>
     <child>
-      <object class="AdwToolbarView" id="toolbar_view">
-        <property name="bottom-bar-style">raised</property>
+      <object class="AdwBreakpoint">
+        <condition>max-width: 400px</condition>
+        <setter object="toolbar_layout_box" property="orientation">vertical</setter>
+        <setter object="overlay_split_view" property="collapsed">true</setter>
+        <!-- <setter object="overlay_split_view" property="show-sidebar">true</setter> -->
+        <!-- <setter object="title_widget" property="visible">false</setter> -->
+        <setter object="close_sidebar_button" property="visible">true</setter>
+      </object>
+    </child>
+    <child>
+      <object class="AdwOverlaySplitView" id="overlay_split_view">
+        <property name="max-sidebar-width">360.0</property>
+        <property name="min-sidebar-width">300.0</property>
+        <property name="show-sidebar" bind-source="sidebar_show_button" bind-property="active" bind-flags="bidirectional">True</property>
+        <property name="sidebar-position">end</property>
+        <property name="sidebar-width-fraction">0.45</property>
+        <property name="sidebar-width-unit">px</property>
         <property name="content">
-          <object class="AdwOverlaySplitView" id="overlay_split_view">
-            <property name="content">
-              <object class="AdwToastOverlay" id="toast_overlay"/>
-            </property>
-            <property name="max-sidebar-width">360.0</property>
-            <property name="min-sidebar-width">300.0</property>
-            <property name="show-sidebar" bind-source="sidebar_show_button" bind-property="active" bind-flags="bidirectional">True</property>
-            <property name="sidebar">
-              <object class="AdwToolbarView">
+              <object class="AdwToolbarView" id="toolbar_view">
                 <property name="content">
-                  <object class="GtkBox">
-                    <property name="orientation">vertical</property>
-                    <child>
-                      <object class="GtkStack" id="sidebar_stack">
-                        <property name="vexpand">True</property>
-                        <child>
-                          <object class="GtkStackPage" id="character_stack_page">
-                            <property name="child">
-                              <object class="GtkBox">
-                                <property name="orientation">vertical</property>
-                                <child>
-                                  <object class="GtkBox">
-                                    <property name="margin-bottom">6</property>
-                                    <property name="margin-end">6</property>
-                                    <property name="margin-start">6</property>
-                                    <property name="spacing">6</property>
-                                    <child>
-                                      <object class="GtkButton" id="char_carousel_go_back">
-                                        <property name="icon-name">go-previous-symbolic</property>
-                                        <property name="sensitive">False</property>
-                                        <signal name="clicked" handler="char_pages_go_back"/>
-                                      </object>
-                                    </child>
-                                    <child>
-                                      <object class="GtkLabel" id="char_group_label">
-                                        <property name="hexpand">True</property>
-                                        <property name="label" translatable="yes">ASCII</property>
-                                      </object>
-                                    </child>
-                                    <child>
-                                      <object class="GtkButton" id="char_carousel_go_next">
-                                        <property name="icon-name">go-next-symbolic</property>
-                                        <signal name="clicked" handler="char_pages_go_next"/>
-                                      </object>
-                                    </child>
-                                  </object>
-                                </child>
-                                <child>
-                                  <object class="AdwCarousel" id="chars_carousel">
-                                    <property name="allow-mouse-drag">False</property>
-                                    <property name="allow-scroll-wheel">False</property>
-                                    <property name="hexpand">True</property>
-                                  </object>
-                                </child>
-                              </object>
-                            </property>
-                            <property name="icon-name">format-text-italic-symbolic</property>
-                            <property name="name">character_page</property>
-                            <property name="title" translatable="yes">Character</property>
-                          </object>
-                        </child>
-                        <child>
-                          <object class="GtkStackPage" id="style_stack_page">
-                            <property name="child">
-                              <object class="GtkScrolledWindow">
-                                <property name="hscrollbar-policy">never</property>
-                                <property name="overflow">hidden</property>
-                                <child>
-                                  <object class="GtkBox" id="lines_styles_box">
-                                    <property name="margin-bottom">6</property>
-                                    <property name="margin-end">6</property>
-                                    <property name="margin-start">6</property>
-                                    <property name="margin-top">6</property>
-                                    <property name="orientation">vertical</property>
-                                    <property name="spacing">6</property>
-                                  </object>
-                                </child>
-                              </object>
-                            </property>
-                            <property name="icon-name">line-style-symbolic</property>
-                            <property name="name">style_page</property>
-                            <property name="title" translatable="yes">Style</property>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-                  </object>
+                  <object class="AdwToastOverlay" id="toast_overlay"/>
                 </property>
                 <child type="top">
-                  <object class="GtkStackSwitcher" id="sidebar_stack_switcher">
-                    <property name="css-classes">switcher</property>
-                    <property name="hexpand">True</property>
-                    <property name="margin-bottom">6</property>
-                    <property name="margin-end">3</property>
-                    <property name="margin-start">3</property>
-                    <property name="margin-top">6</property>
-                    <property name="stack">sidebar_stack</property>
-                  </object>
-                </child>
-              </object>
-            </property>
-            <property name="sidebar-position">end</property>
-            <property name="sidebar-width-fraction">0.45</property>
-            <property name="sidebar-width-unit">px</property>
-          </object>
-        </property>
-        <property name="top-bar-style">raised</property>
-        <child type="top">
           <object class="AdwHeaderBar">
             <property name="title-widget">
               <object class="AdwWindowTitle" id="title_widget">
@@ -157,74 +85,17 @@
                 <signal name="clicked" handler="redo_last_change"/>
               </object>
             </child>
-            <child type="end">
-              <object class="GtkMenuButton">
-                <property name="icon-name">open-menu-symbolic</property>
-                <property name="menu-model">primary_menu</property>
-              </object>
-            </child>
+
             <child type="end">
               <object class="GtkToggleButton" id="sidebar_show_button">
                 <property name="active">True</property>
                 <property name="icon-name">sidebar-show-right-symbolic</property>
               </object>
             </child>
-            <child type="end">
-              <object class="GtkMenuButton">
-                <property name="icon-name">list-add-symbolic</property>
-                <property name="popover">
-                  <object class="GtkPopover">
-                    <signal name="closed" handler="on_increase_size_activated"/>
-                    <child>
-                      <object class="GtkBox">
-                        <property name="orientation">vertical</property>
-                        <child>
-                          <object class="AdwSpinRow" id="width_spin">
-                            <property name="activatable">False</property>
-                            <property name="adjustment">
-                              <object class="GtkAdjustment">
-                                <property name="lower">10.0</property>
-                                <property name="step-increment">1.0</property>
-                                <property name="upper">120.0</property>
-                                <property name="value">40.0</property>
-                              </object>
-                            </property>
-                            <property name="can-focus">False</property>
-                            <property name="title" translatable="yes">Width</property>
-                          </object>
-                        </child>
-                        <child>
-                          <object class="AdwSpinRow" id="height_spin">
-                            <property name="activatable">False</property>
-                            <property name="adjustment">
-                              <object class="GtkAdjustment">
-                                <property name="lower">5.0</property>
-                                <property name="step-increment">1.0</property>
-                                <property name="upper">60.0</property>
-                                <property name="value">20.0</property>
-                              </object>
-                            </property>
-                            <property name="can-focus">False</property>
-                            <property name="title" translatable="yes">Height</property>
-                          </object>
-                        </child>
-                        <child>
-                          <object class="GtkButton">
-                            <property name="label" translatable="yes">Change size</property>
-                            <property name="margin-top">6</property>
-                            <signal name="clicked" handler="on_change_canvas_size_btn_clicked"/>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-                  </object>
-                </property>
-              </object>
-            </child>
           </object>
-        </child>
-        <child type="bottom">
-          <object class="GtkBox" id="toolbar_layout_box">
+                </child>
+                <child type="bottom">
+<object class="GtkBox" id="toolbar_layout_box">
             <property name="margin-bottom">6</property>
             <property name="margin-end">6</property>
             <property name="margin-start">6</property>
@@ -370,8 +241,176 @@ ascii</property>
               </object>
             </child>
           </object>
-        </child>
-        <!-- Custom fragments -->
+          </child>
+              </object>
+            </property>
+        <property name="sidebar">
+          <object class="AdwToolbarView">
+            <child type="top">
+              <object class="AdwHeaderBar">
+                <child type="start">
+                <object class="GtkButton" id="close_sidebar_button">
+                  <property name="visible">false</property>
+                  <property name="icon-name">right-large-symbolic</property>
+                  <signal name="clicked" handler="close_sidebar"/>
+                </object>
+              </child>
+              <child type="end">
+                <object class="GtkMenuButton">
+                  <property name="icon-name">open-menu-symbolic</property>
+                  <property name="menu-model">primary_menu</property>
+                </object>
+              </child>
+                <child type="end">
+              <object class="GtkMenuButton">
+                <property name="icon-name">list-add-symbolic</property>
+                <property name="popover">
+                  <object class="GtkPopover">
+                    <signal name="closed" handler="on_increase_size_activated"/>
+                    <child>
+                      <object class="GtkBox">
+                        <property name="orientation">vertical</property>
+                        <child>
+                          <object class="AdwSpinRow" id="width_spin">
+                            <property name="activatable">False</property>
+                            <property name="adjustment">
+                              <object class="GtkAdjustment">
+                                <property name="lower">10.0</property>
+                                <property name="step-increment">1.0</property>
+                                <property name="upper">120.0</property>
+                                <property name="value">40.0</property>
+                              </object>
+                            </property>
+                            <property name="can-focus">False</property>
+                            <property name="title" translatable="yes">Width</property>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="AdwSpinRow" id="height_spin">
+                            <property name="activatable">False</property>
+                            <property name="adjustment">
+                              <object class="GtkAdjustment">
+                                <property name="lower">5.0</property>
+                                <property name="step-increment">1.0</property>
+                                <property name="upper">60.0</property>
+                                <property name="value">20.0</property>
+                              </object>
+                            </property>
+                            <property name="can-focus">False</property>
+                            <property name="title" translatable="yes">Height</property>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkButton">
+                            <property name="label" translatable="yes">Change size</property>
+                            <property name="margin-top">6</property>
+                            <signal name="clicked" handler="on_change_canvas_size_btn_clicked"/>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
+                  </object>
+                </property>
+              </object>
+            </child>
+              </object>
+            </child>
+            <property name="content">
+              <object class="AdwToolbarView">
+                <property name="content">
+                  <object class="GtkBox">
+                    <property name="orientation">vertical</property>
+                    <child>
+                      <object class="GtkStack" id="sidebar_stack">
+                        <property name="vexpand">True</property>
+                        <child>
+                          <object class="GtkStackPage" id="character_stack_page">
+                            <property name="child">
+                              <object class="GtkBox">
+                                <property name="orientation">vertical</property>
+                                <child>
+                                  <object class="GtkBox">
+                                    <property name="margin-bottom">6</property>
+                                    <property name="margin-end">6</property>
+                                    <property name="margin-start">6</property>
+                                    <property name="spacing">6</property>
+                                    <child>
+                                      <object class="GtkButton" id="char_carousel_go_back">
+                                        <property name="icon-name">go-previous-symbolic</property>
+                                        <property name="sensitive">False</property>
+                                        <signal name="clicked" handler="char_pages_go_back"/>
+                                      </object>
+                                    </child>
+                                    <child>
+                                      <object class="GtkLabel" id="char_group_label">
+                                        <property name="hexpand">True</property>
+                                        <property name="label" translatable="yes">ASCII</property>
+                                      </object>
+                                    </child>
+                                    <child>
+                                      <object class="GtkButton" id="char_carousel_go_next">
+                                        <property name="icon-name">go-next-symbolic</property>
+                                        <signal name="clicked" handler="char_pages_go_next"/>
+                                      </object>
+                                    </child>
+                                  </object>
+                                </child>
+                                <child>
+                                  <object class="AdwCarousel" id="chars_carousel">
+                                    <property name="allow-mouse-drag">False</property>
+                                    <property name="allow-scroll-wheel">False</property>
+                                    <property name="hexpand">True</property>
+                                  </object>
+                                </child>
+                              </object>
+                            </property>
+                            <property name="icon-name">format-text-italic-symbolic</property>
+                            <property name="name">character_page</property>
+                            <property name="title" translatable="yes">Character</property>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkStackPage" id="style_stack_page">
+                            <property name="child">
+                              <object class="GtkScrolledWindow">
+                                <property name="hscrollbar-policy">never</property>
+                                <property name="overflow">hidden</property>
+                                <child>
+                                  <object class="GtkBox" id="lines_styles_box">
+                                    <property name="margin-bottom">6</property>
+                                    <property name="margin-end">6</property>
+                                    <property name="margin-start">6</property>
+                                    <property name="margin-top">6</property>
+                                    <property name="orientation">vertical</property>
+                                    <property name="spacing">6</property>
+                                  </object>
+                                </child>
+                              </object>
+                            </property>
+                            <property name="icon-name">line-style-symbolic</property>
+                            <property name="name">style_page</property>
+                            <property name="title" translatable="yes">Style</property>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
+                  </object>
+                </property>
+                <child type="top">
+                  <object class="GtkStackSwitcher" id="sidebar_stack_switcher">
+                    <property name="css-classes">switcher</property>
+                    <property name="hexpand">True</property>
+                    <property name="margin-bottom">6</property>
+                    <property name="margin-end">3</property>
+                    <property name="margin-start">3</property>
+                    <property name="margin-top">6</property>
+                    <property name="stack">sidebar_stack</property>
+                  </object>
+                </child>
+              </object>
+            </property>
+          </object>
+        </property>
       </object>
     </child>
     <child>
diff --git a/src/window.py b/src/window.py
index e24e3c3..c08087e 100644
--- a/src/window.py
+++ b/src/window.py
@@ -39,15 +39,17 @@
 class AsciiDrawWindow(Adw.ApplicationWindow):
     __gtype_name__ = 'AsciiDrawWindow'
 
+    overlay_split_view = Gtk.Template.Child()
+
     toast_overlay = Gtk.Template.Child()
-    chars_carousel = Gtk.Template.Child()
-    char_group_label = Gtk.Template.Child()
-    char_carousel_go_back = Gtk.Template.Child()
-    char_carousel_go_next = Gtk.Template.Child()
 
+    # Headerbar
     undo_button = Gtk.Template.Child()
     redo_button = Gtk.Template.Child()
+    save_import_button = Gtk.Template.Child()
+    title_widget = Gtk.Template.Child()
 
+    # Tools
     free_button = Gtk.Template.Child()
     rectangle_button = Gtk.Template.Child()
     filled_rectangle_button = Gtk.Template.Child()
@@ -63,15 +65,16 @@ class AsciiDrawWindow(Adw.ApplicationWindow):
     primary_char_button = Gtk.Template.Child()
     secondary_char_button = Gtk.Template.Child()
 
-    save_import_button = Gtk.Template.Child()
-    lines_styles_box = Gtk.Template.Child()
-
+    # Sidebar
     sidebar_stack = Gtk.Template.Child()
-
     sidebar_stack_switcher = Gtk.Template.Child()
+    chars_carousel = Gtk.Template.Child()
+    char_group_label = Gtk.Template.Child()
+    char_carousel_go_back = Gtk.Template.Child()
+    char_carousel_go_next = Gtk.Template.Child()
+    lines_styles_box = Gtk.Template.Child()
 
-    title_widget = Gtk.Template.Child()
-
+    # Canvas side popover
     width_spin = Gtk.Template.Child()
     height_spin = Gtk.Template.Child()
 
@@ -623,6 +626,10 @@ def undo_first_change(self, *args):
     def redo_last_change(self, *args):
         self.canvas.redo()
 
+    @Gtk.Template.Callback("close_sidebar")
+    def close_sidebar(self, *args):
+        self.overlay_split_view.set_show_sidebar(False)
+
     def select_rectangle_tool(self):
         self.rectangle_button.set_active(True)