diff --git a/lib/livebook_web/live/session_live.ex b/lib/livebook_web/live/session_live.ex
index fd70c2fb3..e35cd126c 100644
--- a/lib/livebook_web/live/session_live.ex
+++ b/lib/livebook_web/live/session_live.ex
@@ -137,7 +137,15 @@ defmodule LivebookWeb.SessionLive do
       </div>
       <div class="grow overflow-y-auto relative" data-el-notebook>
         <div data-el-js-view-iframes phx-update="ignore" id="js-view-iframes"></div>
-        <div class="w-full max-w-screen-lg pl-8 md:pl-16 pr-16 mx-auto py-7" data-el-notebook-content>
+        <LivebookWeb.SessionLive.IndicatorsComponent.render
+          socket={@socket}
+          session_id={@session.id}
+          file={@data_view.file}
+          dirty={@data_view.dirty}
+          autosave_interval_s={@data_view.autosave_interval_s}
+          runtime={@data_view.runtime}
+          global_status={@data_view.global_status} />
+        <div class="w-full max-w-screen-lg px-4 sm:pl-8 sm:pr-16 md:pl-16 pt-4 sm:py-7 mx-auto" data-el-notebook-content>
           <div class="flex items-center pb-4 mb-2 space-x-4 border-b border-gray-200"
             data-el-notebook-headline
             data-focusable-id="notebook"
@@ -222,16 +230,6 @@ defmodule LivebookWeb.SessionLive do
           </div>
         </div>
       </div>
-      <div class="fixed bottom-[0.4rem] right-[1.5rem]">
-        <LivebookWeb.SessionLive.IndicatorsComponent.render
-          socket={@socket}
-          session_id={@session.id}
-          file={@data_view.file}
-          dirty={@data_view.dirty}
-          autosave_interval_s={@data_view.autosave_interval_s}
-          runtime={@data_view.runtime}
-          global_status={@data_view.global_status} />
-      </div>
     </div>
 
     <.current_user_modal return_to={@self_path} current_user={@current_user} />
diff --git a/lib/livebook_web/live/session_live/indicators_component.ex b/lib/livebook_web/live/session_live/indicators_component.ex
index 6110b0683..800f267c8 100644
--- a/lib/livebook_web/live/session_live/indicators_component.ex
+++ b/lib/livebook_web/live/session_live/indicators_component.ex
@@ -1,69 +1,47 @@
 defmodule LivebookWeb.SessionLive.IndicatorsComponent do
-  use LivebookWeb, :live_component
+  use Phoenix.Component
+
+  alias Phoenix.LiveView.JS
+  alias LivebookWeb.Router.Helpers, as: Routes
+
+  import LivebookWeb.LiveHelpers
 
-  @impl true
   def render(assigns) do
     ~H"""
-    <div class="flex flex-col items-center space-y-2" data-el-notebook-indicators>
-      <.code_zen_indicator />
-      <%= if @file do %>
-        <%= if @dirty do %>
-          <%= if @autosave_interval_s do %>
-            <span class="tooltip left" data-tooltip="Autosave pending">
-              <%= live_patch to: Routes.session_path(@socket, :file_settings, @session_id),
-                    class: "icon-button icon-outlined-button border-blue-400 hover:bg-blue-50 focus:bg-blue-50",
-                    aria_label: "autosave pending, click to open file settings" do %>
-                <.remix_icon icon="save-line" class="text-xl text-blue-500" />
-              <% end %>
-            </span>
-          <% else %>
-            <span class="tooltip left" data-tooltip="No autosave configured, make sure to save manually">
-              <%= live_patch to: Routes.session_path(@socket, :file_settings, @session_id),
-                    class: "icon-button icon-outlined-button border-yellow-bright-200 hover:bg-red-50 focus:bg-red-50",
-                    aria_label: "no autosave configured, click to open file settings" do %>
-                <.remix_icon icon="save-line" class="text-xl text-yellow-bright-300" />
-              <% end %>
-            </span>
-          <% end %>
-        <% else %>
-          <span class="tooltip left" data-tooltip="Notebook saved">
-            <%= live_patch to: Routes.session_path(@socket, :file_settings, @session_id),
-                  class: "icon-button icon-outlined-button border-green-bright-300 hover:bg-green-bright-50 focus:bg-green-bright-50",
-                  aria_label: "notebook saved, click to open file settings" do %>
-              <.remix_icon icon="save-line" class="text-xl text-green-bright-400" />
-            <% end %>
-          </span>
-        <% end %>
-      <% else %>
-        <span class="tooltip left" data-tooltip="Choose a file to save the notebook">
-          <%= live_patch to: Routes.session_path(@socket, :file_settings, @session_id),
-                class: "icon-button icon-outlined-button border-gray-200 hover:bg-gray-100 focus:bg-gray-100",
-                aria_label: "choose a file to save the notebook" do %>
-            <.remix_icon icon="save-line" class="text-xl text-gray-400" />
-          <% end %>
-        </span>
-      <% end %>
+    <div class="flex items-center justify-between sticky px-2 top-0 left-0 right-0 z-[500] bg-white border-b border-gray-200">
+      <div class="sm:hidden text-2xl text-gray-400 hover:text-gray-600 focus:text-gray-600 rounded-xl h-10 w-10 flex items-center justify-center">
+        <button
+          aria-label="hide sidebar"
+          data-el-toggle-sidebar
+          phx-click={JS.add_class("hidden sm:flex", to: "[data-el-sidebar]") |> JS.toggle(to: "[data-el-toggle-sidebar]", display: "flex")}>
+            <.remix_icon icon="menu-fold-line" />
+        </button>
 
-      <%= if Livebook.Runtime.connected?(@runtime) do %>
-        <.global_status
-          status={elem(@global_status, 0)}
-          cell_id={elem(@global_status, 1)} />
-      <% else %>
-        <span class="tooltip left" data-tooltip="Choose a runtime to run the notebook in">
-          <%= live_patch to: Routes.session_path(@socket, :runtime_settings, @session_id),
-                class: "icon-button icon-outlined-button border-gray-200 hover:bg-gray-100 focus:bg-gray-100",
-                aria_label: "choose a runtime to run the notebook in" do %>
-            <.remix_icon icon="loader-3-line" class="text-xl text-gray-400" />
-          <% end %>
-        </span>
-      <% end %>
-
-      <%# Note: this indicator is shown/hidden using CSS based on the current mode %>
-      <span class="tooltip left" data-tooltip="Insert mode" data-el-insert-mode-indicator>
-        <span class="text-sm font-medium text-gray-400 cursor-default">
-          ins
-        </span>
-      </span>
+        <button
+          class="hidden"
+          aria-label="show sidebar"
+          data-el-toggle-sidebar
+          phx-click={JS.remove_class("hidden sm:flex", to: "[data-el-sidebar]") |> JS.toggle(to: "[data-el-toggle-sidebar]", display: "flex")}>
+            <.remix_icon icon="menu-unfold-line" />
+        </button>
+      </div>
+      <div class="sm:fixed bottom-[0.4rem] right-[1.5rem]">
+        <div class="flex flex-row-reverse sm:flex-col items-center justify-end p-2 sm:p-0 space-x-2 space-x-reverse sm:space-x-0 sm:space-y-2" data-el-notebook-indicators>
+          <.code_zen_indicator />
+          <.persistence_indicator
+            file={@file}
+            dirty={@dirty}
+            autosave_interval_s={@autosave_interval_s}
+            socket={@socket}
+            session_id={@session_id} />
+          <.runtime_indicator
+            runtime={@runtime}
+            global_status={@global_status}
+            socket={@socket}
+            session_id={@session_id} />
+          <.insert_mode_indicator />
+        </div>
+      </div>
     </div>
     """
   end
@@ -105,6 +83,72 @@ defmodule LivebookWeb.SessionLive.IndicatorsComponent do
     """
   end
 
+  defp persistence_indicator(%{file: nil} = assigns) do
+    ~H"""
+    <span class="tooltip left" data-tooltip="Choose a file to save the notebook">
+      <%= live_patch to: Routes.session_path(@socket, :file_settings, @session_id),
+            class: "icon-button icon-outlined-button border-gray-200 hover:bg-gray-100 focus:bg-gray-100",
+            aria_label: "choose a file to save the notebook" do %>
+        <.remix_icon icon="save-line" class="text-xl text-gray-400" />
+      <% end %>
+    </span>
+    """
+  end
+
+  defp persistence_indicator(%{dirty: false} = assigns) do
+    ~H"""
+    <span class="tooltip left" data-tooltip="Notebook saved">
+      <%= live_patch to: Routes.session_path(@socket, :file_settings, @session_id),
+            class: "icon-button icon-outlined-button border-green-bright-300 hover:bg-green-bright-50 focus:bg-green-bright-50",
+            aria_label: "notebook saved, click to open file settings" do %>
+        <.remix_icon icon="save-line" class="text-xl text-green-bright-400" />
+      <% end %>
+    </span>
+    """
+  end
+
+  defp persistence_indicator(%{autosave_interval_s: nil} = assigns) do
+    ~H"""
+    <span class="tooltip left" data-tooltip="No autosave configured, make sure to save manually">
+      <%= live_patch to: Routes.session_path(@socket, :file_settings, @session_id),
+            class: "icon-button icon-outlined-button border-yellow-bright-200 hover:bg-red-50 focus:bg-red-50",
+            aria_label: "no autosave configured, click to open file settings" do %>
+        <.remix_icon icon="save-line" class="text-xl text-yellow-bright-300" />
+      <% end %>
+    </span>
+    """
+  end
+
+  defp persistence_indicator(assigns) do
+    ~H"""
+    <span class="tooltip left" data-tooltip="Autosave pending">
+      <%= live_patch to: Routes.session_path(@socket, :file_settings, @session_id),
+            class: "icon-button icon-outlined-button border-blue-400 hover:bg-blue-50 focus:bg-blue-50",
+            aria_label: "autosave pending, click to open file settings" do %>
+        <.remix_icon icon="save-line" class="text-xl text-blue-500" />
+      <% end %>
+    </span>
+    """
+  end
+
+  defp runtime_indicator(assigns) do
+    ~H"""
+    <%= if Livebook.Runtime.connected?(@runtime) do %>
+      <.global_status
+        status={elem(@global_status, 0)}
+        cell_id={elem(@global_status, 1)} />
+    <% else %>
+      <span class="tooltip left" data-tooltip="Choose a runtime to run the notebook in">
+        <%= live_patch to: Routes.session_path(@socket, :runtime_settings, @session_id),
+              class: "icon-button icon-outlined-button border-gray-200 hover:bg-gray-100 focus:bg-gray-100",
+              aria_label: "choose a runtime to run the notebook in" do %>
+          <.remix_icon icon="loader-3-line" class="text-xl text-gray-400" />
+        <% end %>
+      </span>
+    <% end %>
+    """
+  end
+
   defp global_status(%{status: :evaluating} = assigns) do
     ~H"""
     <span class="tooltip left" data-tooltip="Go to evaluating cell">
@@ -154,4 +198,15 @@ defmodule LivebookWeb.SessionLive.IndicatorsComponent do
     </span>
     """
   end
+
+  defp insert_mode_indicator(assigns) do
+    ~H"""
+    <%# Note: this indicator is shown/hidden using CSS based on the current mode %>
+    <span class="tooltip left" data-tooltip="Insert mode" data-el-insert-mode-indicator>
+      <span class="text-sm font-medium text-gray-400 cursor-default">
+        ins
+      </span>
+    </span>
+    """
+  end
 end
diff --git a/lib/livebook_web/live/sidebar_helpers.ex b/lib/livebook_web/live/sidebar_helpers.ex
index e37f3f6fb..e72fa94b6 100644
--- a/lib/livebook_web/live/sidebar_helpers.ex
+++ b/lib/livebook_web/live/sidebar_helpers.ex
@@ -15,7 +15,7 @@ defmodule LivebookWeb.SidebarHelpers do
   """
   def sidebar(assigns) do
     ~H"""
-    <nav class="w-16 flex flex-col items-center space-y-4 px-3 py-7 bg-gray-900" aria-label="sidebar">
+    <nav class="w-16 flex flex-col items-center px-3 py-1 space-y-2 sm:space-y-4 sm:py-7 bg-gray-900" aria-label="sidebar" data-el-sidebar>
       <%= render_slot(@inner_block) %>
     </nav>
     """