diff --git a/src/gui/gcal-window.c b/src/gui/gcal-window.c
index 171c44e3..cc0a7331 100644
--- a/src/gui/gcal-window.c
+++ b/src/gui/gcal-window.c
@@ -97,20 +97,20 @@ struct _GcalWindow
   AdwApplicationWindow parent;
 
   /* upper level widgets */
-  GtkWidget          *main_box;
+  GtkWidget              *main_box;
 
-  GtkWidget          *header_bar;
-  AdwToastOverlay    *overlay;
-  AdwViewStack       *views_stack;
-  GtkWidget          *week_view;
-  GtkWidget          *month_view;
-  GtkWidget          *agenda_view;
-  GtkWidget          *date_chooser;
-  GtkWidget          *action_bar;
-  GcalSyncIndicator  *sync_indicator;
-  GcalToolbarEnd     *toolbar_end;
-  GcalToolbarEnd     *sidebar_toolbar_end;
-  AdwLeaflet         *leaflet;
+  GtkWidget              *header_bar;
+  AdwToastOverlay        *overlay;
+  AdwViewStack           *views_stack;
+  GtkWidget              *week_view;
+  GtkWidget              *month_view;
+  GtkWidget              *agenda_view;
+  GtkWidget              *date_chooser;
+  GtkWidget              *action_bar;
+  GcalSyncIndicator      *sync_indicator;
+  GcalToolbarEnd         *toolbar_end;
+  GcalToolbarEnd         *sidebar_toolbar_end;
+  AdwNavigationSplitView *split_view;
 
   /* header_bar widets */
   GtkWidget          *calendars_button;
@@ -328,6 +328,17 @@ hide_widget (GtkWidget *widget)
   gtk_widget_set_visible (widget, FALSE);
 }
 
+static char *
+content_title (GcalWindow     *self,
+               GcalWindowView  active_view)
+{
+  /* We check for NULL so we get the right page name during initialization */
+  if (active_view == GCAL_WINDOW_VIEW_WEEK)
+    return g_strdup (_("Week"));
+  else
+    return g_strdup (_("Month"));
+}
+
 /*
  * Callbacks
  */
@@ -1053,10 +1064,10 @@ gcal_window_class_init (GcalWindowClass *klass)
   gtk_widget_class_bind_template_child (widget_class, GcalWindow, quick_add_popover);
   gtk_widget_class_bind_template_child (widget_class, GcalWindow, calendar_management_dialog);
   gtk_widget_class_bind_template_child (widget_class, GcalWindow, overlay);
+  gtk_widget_class_bind_template_child (widget_class, GcalWindow, sidebar_toolbar_end);
+  gtk_widget_class_bind_template_child (widget_class, GcalWindow, split_view);
   gtk_widget_class_bind_template_child (widget_class, GcalWindow, sync_indicator);
   gtk_widget_class_bind_template_child (widget_class, GcalWindow, toolbar_end);
-  gtk_widget_class_bind_template_child (widget_class, GcalWindow, sidebar_toolbar_end);
-  gtk_widget_class_bind_template_child (widget_class, GcalWindow, leaflet);
   gtk_widget_class_bind_template_child (widget_class, GcalWindow, views_stack);
   gtk_widget_class_bind_template_child (widget_class, GcalWindow, views_switcher);
   gtk_widget_class_bind_template_child (widget_class, GcalWindow, weather_settings);
@@ -1065,12 +1076,13 @@ gcal_window_class_init (GcalWindowClass *klass)
   gtk_widget_class_bind_template_callback (widget_class, view_changed);
 
   /* Event creation related */
-  gtk_widget_class_bind_template_callback (widget_class, edit_event);
-  gtk_widget_class_bind_template_callback (widget_class, create_event_detailed_cb);
-  gtk_widget_class_bind_template_callback (widget_class, show_new_event_widget);
   gtk_widget_class_bind_template_callback (widget_class, close_new_event_widget);
+  gtk_widget_class_bind_template_callback (widget_class, content_title);
+  gtk_widget_class_bind_template_callback (widget_class, create_event_detailed_cb);
   gtk_widget_class_bind_template_callback (widget_class, day_selected);
+  gtk_widget_class_bind_template_callback (widget_class, edit_event);
   gtk_widget_class_bind_template_callback (widget_class, event_activated);
+  gtk_widget_class_bind_template_callback (widget_class, show_new_event_widget);
 
   /* Edit dialog related */
   gtk_widget_class_bind_template_callback (widget_class, on_event_editor_dialog_remove_event_cb);
@@ -1149,7 +1161,7 @@ gcal_window_set_search_query (GcalWindow  *self,
 
   g_return_if_fail (GCAL_IS_WINDOW (self));
 
-  if (adw_leaflet_get_folded (self->leaflet))
+  if (adw_navigation_split_view_get_collapsed (self->split_view))
     toolbar_end = self->sidebar_toolbar_end;
   else
     toolbar_end = self->toolbar_end;
diff --git a/src/gui/gcal-window.ui b/src/gui/gcal-window.ui
index d86e582a..4b9c4874 100644
--- a/src/gui/gcal-window.ui
+++ b/src/gui/gcal-window.ui
@@ -4,6 +4,7 @@
     <property name="title" translatable="yes">Calendar</property>
     <property name="default_width">800</property>
     <property name="default_height">600</property>
+    <property name="width_request">360</property>
     <property name="height_request">600</property>
 
     <!-- Shortcuts -->
@@ -98,180 +99,190 @@
     <child>
       <object class="AdwToastOverlay" id="overlay">
         <child>
-          <object class="AdwLeaflet" id="leaflet">
-            <property name="homogeneous">False</property>
-
+          <object class="AdwNavigationSplitView" id="split_view">
             <!-- Sidebar -->
-            <child>
-              <object class="AdwToolbarView">
-                <property name="hexpand">False</property>
-
-                <child type="top">
-                  <object class="GtkBox">
-                    <property name="orientation">vertical</property>
-
-                    <child>
-                      <object class="AdwHeaderBar">
-                        <property name="show-end-title-buttons" bind-source="leaflet" bind-property="folded" bind-flags="sync-create"/>
-                        <child type="start">
-                          <object class="GcalSyncIndicator" id="sync_indicator" />
-                        </child>
-                        <property name="title-widget">
-                          <object class="GcalCalendarButton" id="calendars_button" />
-                        </property>
-                        <child type="end">
-                          <object class="GtkMenuButton" id="menu_button">
-                            <property name="icon-name">open-menu-symbolic</property>
-                            <property name="popover">win_menu</property>
-                            <property name="tooltip-text" translatable="yes">Main Menu</property>
-                            <property name="primary">True</property>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-
-                    <child>
-                      <object class="GcalDateChooser" id="date_chooser">
-                        <property name="split-month-year">False</property>
-                        <property name="vexpand">False</property>
-                        <property name="active-date" bind-source="GcalWindow" bind-property="active-date" bind-flags="bidirectional"/>
-                        <signal name="day-selected" handler="day_selected" object="GcalWindow" swapped="yes"/>
-                      </object>
-                    </child>
-
-                  </object>
-
-                </child>
-
-                <property name="content">
-                  <object class="GcalAgendaView" id="agenda_view">
-                    <property name="vexpand">True</property>
-                    <property name="active-date" bind-source="GcalWindow" bind-property="active-date" bind-flags="bidirectional"/>
-                    <signal name="create-event" handler="show_new_event_widget" object="GcalWindow" swapped="no"/>
-                    <signal name="event-activated" handler="event_activated" object="GcalWindow" swapped="no"/>
-                  </object>
-                </property>
-
-                <child type="bottom">
-                  <object class="GtkActionBar" id="action_bar">
-                    <property name="revealed" bind-source="leaflet" bind-property="folded" bind-flags="sync-create"/>
-                    <child type="start">
-                      <object class="GtkButton">
-                        <property name="action-name">win.today</property>
-                        <property name="child">
-                          <object class="AdwButtonContent">
-                            <property name="label" translatable="yes">_Today</property>
-                            <property name="use-underline">True</property>
-                            <property name="icon-name">calendar-today-symbolic</property>
-                          </object>
-                        </property>
-                      </object>
-                    </child>
-                    <child type="end">
-                      <object class="GcalToolbarEnd" id="sidebar_toolbar_end"/>
-                    </child>
-                  </object>
-                </child>
-              </object>
-            </child>
-            <child>
-              <object class="AdwLeafletPage">
-                <property name="navigatable">True</property>
+            <property name="sidebar">
+              <object class="AdwNavigationPage">
+                <property name="title" translatable="yes">Calendar</property>
                 <property name="child">
-                  <object class="GtkSeparator"/>
+                  <object class="AdwToolbarView">
+                    <child type="top">
+                      <object class="GtkBox">
+                        <property name="orientation">vertical</property>
+
+                        <child>
+                          <object class="AdwHeaderBar">
+                            <child type="start">
+                              <object class="GcalSyncIndicator" id="sync_indicator" />
+                            </child>
+                            <property name="title-widget">
+                              <object class="GcalCalendarButton" id="calendars_button" />
+                            </property>
+                            <child type="end">
+                              <object class="GtkMenuButton" id="menu_button">
+                                <property name="icon-name">open-menu-symbolic</property>
+                                <property name="popover">win_menu</property>
+                                <property name="tooltip-text" translatable="yes">Main Menu</property>
+                                <property name="primary">True</property>
+                              </object>
+                            </child>
+                          </object>
+                        </child>
+
+                        <child>
+                          <object class="GcalDateChooser" id="date_chooser">
+                            <property name="split-month-year">False</property>
+                            <property name="vexpand">False</property>
+                            <property name="active-date" bind-source="GcalWindow" bind-property="active-date" bind-flags="bidirectional"/>
+                            <signal name="day-selected" handler="day_selected" object="GcalWindow" swapped="yes"/>
+                          </object>
+                        </child>
+
+                      </object>
+
+                    </child>
+
+                    <property name="content">
+                      <object class="GcalAgendaView" id="agenda_view">
+                        <property name="vexpand">True</property>
+                        <property name="active-date" bind-source="GcalWindow" bind-property="active-date" bind-flags="bidirectional"/>
+                        <signal name="create-event" handler="show_new_event_widget" object="GcalWindow" swapped="no"/>
+                        <signal name="event-activated" handler="event_activated" object="GcalWindow" swapped="no"/>
+                      </object>
+                    </property>
+
+                    <child type="bottom">
+                      <object class="GtkActionBar" id="action_bar">
+                        <property name="revealed">False</property>
+                        <child type="start">
+                          <object class="GtkButton">
+                            <property name="action-name">win.today</property>
+                            <property name="child">
+                              <object class="AdwButtonContent">
+                                <property name="label" translatable="yes">_Today</property>
+                                <property name="use-underline">True</property>
+                                <property name="icon-name">calendar-today-symbolic</property>
+                              </object>
+                            </property>
+                          </object>
+                        </child>
+                        <child type="end">
+                          <object class="GcalToolbarEnd" id="sidebar_toolbar_end"/>
+                        </child>
+                      </object>
+                    </child>
+                  </object>
                 </property>
               </object>
-            </child>
+            </property>
 
             <!-- Main content -->
-            <child>
-              <object class="AdwToolbarView">
-                <style>
-                  <class name="view" />
-                </style>
+            <property name="content">
+              <object class="AdwNavigationPage" id="content_page">
+                <binding name="title">
+                  <closure type="gchararray" function="content_title">
+                    <lookup type="GcalWindow" name="active-view"/>
+                  </closure>
+                </binding>
+                <property name="child">
+                  <object class="AdwToolbarView">
+                    <style>
+                      <class name="view" />
+                    </style>
 
-                <child type="top">
-                  <object class="AdwHeaderBar" id="header_bar">
-                    <property name="show-start-title-buttons" bind-source="leaflet" bind-property="folded" bind-flags="sync-create"/>
-                    <child>
-                      <object class="GtkButton">
-                        <property name="action-name">win.today</property>
-                        <property name="child">
-                          <object class="AdwButtonContent">
-                            <property name="label" translatable="yes">_Today</property>
-                            <property name="use-underline">True</property>
-                            <property name="icon-name">calendar-today-symbolic</property>
+                    <child type="top">
+                      <object class="AdwHeaderBar" id="header_bar">
+                        <child>
+                          <object class="GtkButton">
+                            <property name="action-name">win.today</property>
+                            <property name="child">
+                              <object class="AdwButtonContent">
+                                <property name="label" translatable="yes">_Today</property>
+                                <property name="use-underline">True</property>
+                                <property name="icon-name">calendar-today-symbolic</property>
+                              </object>
+                            </property>
                           </object>
-                        </property>
+                        </child>
+                        <child type="title">
+                          <object class="AdwViewSwitcher" id="views_switcher">
+                            <property name="stack">views_stack</property>
+                            <property name="policy">wide</property>
+                          </object>
+                        </child>
+                        <child type="end">
+                          <object class="GcalToolbarEnd" id="toolbar_end" />
+                        </child>
                       </object>
                     </child>
-                    <child type="title">
-                      <object class="AdwViewSwitcher" id="views_switcher">
-                        <property name="stack">views_stack</property>
-                        <property name="policy">wide</property>
-                      </object>
-                    </child>
-                    <child type="end">
-                      <object class="GcalToolbarEnd" id="toolbar_end" />
-                    </child>
-                  </object>
-                </child>
 
-                <property name="content">
-                  <object class="GtkBox" id="main_box">
-                    <property name="hexpand">True</property>
-                    <property name="vexpand">True</property>
-                    <property name="orientation">vertical</property>
-                    <child>
-                      <object class="AdwViewStack" id="views_stack">
+                    <property name="content">
+                      <object class="GtkBox" id="main_box">
                         <property name="hexpand">True</property>
                         <property name="vexpand">True</property>
-                        <signal name="notify::visible-child" handler="view_changed" object="GcalWindow" swapped="no"/>
-                        <style>
-                          <class name="view"/>
-                        </style>
+                        <property name="orientation">vertical</property>
                         <child>
-                          <object class="AdwViewStackPage">
-                            <property name="name">week</property>
-                            <property name="title" translatable="yes">_Week</property>
-                            <property name="use-underline">True</property>
-                            <property name="icon_name">calendar-week-symbolic</property>
-                            <property name="child">
-                              <object class="GcalWeekView" id="week_view">
-                                <property name="active-date" bind-source="GcalWindow" bind-property="active-date" bind-flags="bidirectional"/>
-                                <signal name="create-event" handler="show_new_event_widget" object="GcalWindow" swapped="no"/>
-                                <signal name="event-activated" handler="event_activated" object="GcalWindow" swapped="no"/>
+                          <object class="AdwViewStack" id="views_stack">
+                            <property name="hexpand">True</property>
+                            <property name="vexpand">True</property>
+                            <signal name="notify::visible-child" handler="view_changed" object="GcalWindow" swapped="no"/>
+                            <style>
+                              <class name="view"/>
+                            </style>
+                            <child>
+                              <object class="AdwViewStackPage">
+                                <property name="name">week</property>
+                                <property name="title" translatable="yes">_Week</property>
+                                <property name="use-underline">True</property>
+                                <property name="icon_name">calendar-week-symbolic</property>
+                                <property name="child">
+                                  <object class="GcalWeekView" id="week_view">
+                                    <property name="active-date" bind-source="GcalWindow" bind-property="active-date" bind-flags="bidirectional"/>
+                                    <signal name="create-event" handler="show_new_event_widget" object="GcalWindow" swapped="no"/>
+                                    <signal name="event-activated" handler="event_activated" object="GcalWindow" swapped="no"/>
+                                  </object>
+                                </property>
                               </object>
-                            </property>
-                          </object>
-                        </child>
-                        <child>
-                          <object class="AdwViewStackPage">
-                            <property name="name">month</property>
-                            <property name="title" translatable="yes">_Month</property>
-                            <property name="use-underline">True</property>
-                            <property name="icon_name">calendar-month-symbolic</property>
-                            <property name="child">
-                              <object class="GcalMonthView" id="month_view">
-                                <property name="active-date" bind-source="GcalWindow" bind-property="active-date" bind-flags="bidirectional"/>
-                                <signal name="create-event" handler="show_new_event_widget" object="GcalWindow" swapped="no"/>
-                                <signal name="create-event-detailed" handler="create_event_detailed_cb" object="GcalWindow" swapped="no"/>
-                                <signal name="event-activated" handler="event_activated" object="GcalWindow" swapped="no"/>
+                            </child>
+                            <child>
+                              <object class="AdwViewStackPage">
+                                <property name="name">month</property>
+                                <property name="title" translatable="yes">_Month</property>
+                                <property name="use-underline">True</property>
+                                <property name="icon_name">calendar-month-symbolic</property>
+                                <property name="child">
+                                  <object class="GcalMonthView" id="month_view">
+                                    <property name="active-date" bind-source="GcalWindow" bind-property="active-date" bind-flags="bidirectional"/>
+                                    <signal name="create-event" handler="show_new_event_widget" object="GcalWindow" swapped="no"/>
+                                    <signal name="create-event-detailed" handler="create_event_detailed_cb" object="GcalWindow" swapped="no"/>
+                                    <signal name="event-activated" handler="event_activated" object="GcalWindow" swapped="no"/>
+                                  </object>
+                                </property>
                               </object>
-                            </property>
+                            </child>
                           </object>
                         </child>
                       </object>
-                    </child>
+                    </property>
+
                   </object>
                 </property>
-
               </object>
-            </child>
+            </property>
           </object>
         </child>
       </object>
     </child>
+
+    <child>
+      <object class="AdwBreakpoint">
+        <condition>max-width: 700sp</condition>
+        <setter object="split_view" property="collapsed">True</setter>
+        <setter object="action_bar" property="revealed">True</setter>
+        <!-- This needs to be set so that focus does not stay in the content pane when folding. -->
+        <setter object="content_page" property="sensitive">False</setter>
+      </object>
+    </child>
   </template>
   <object class="GcalQuickAddPopover" id="quick_add_popover">
     <signal name="edit-event" handler="edit_event" object="GcalWindow" swapped="no"/>
diff --git a/src/theme/style.css b/src/theme/style.css
index ff681e2d..1d27d8d1 100644
--- a/src/theme/style.css
+++ b/src/theme/style.css
@@ -375,6 +375,11 @@ agenda-view list > label {
   padding: 6px 12px;
 }
 
+.sidebar-pane agenda-view .background {
+  background: none;
+  color: inherit;
+}
+
 label.no-events {
   font-style: italic;
 }