diff --git a/daras_ai_v2/base.py b/daras_ai_v2/base.py
index c3b9b42ca..d8b0a265f 100644
--- a/daras_ai_v2/base.py
+++ b/daras_ai_v2/base.py
@@ -91,6 +91,7 @@
 )
 from routers.root import PREVIEW_ROUTE_WORKFLOWS
 
+from widgets.sidebar import render_default_sidebar, sidebar_mobile_header
 
 MAX_SEED = 4294967294
 gooey_rng = Random()
@@ -194,6 +195,9 @@ def __init__(
         self.tab = tab
         self.request = request
 
+    def render_sidebar(self, request, sidebar_ref):
+        render_default_sidebar(sidebar_ref, request)
+
     @classmethod
     def api_endpoint(cls) -> str:
         return f"/v2/{cls.slug_versions[0]}"
@@ -391,7 +395,8 @@ def render(self):
             self.render_report_form()
             return
 
-        header_placeholder = gui.div(className="my-3 w-100")
+        sidebar_mobile_header(self.request)
+        header_placeholder = gui.div(className="my-1 w-100")
         with (
             gui.styled(NAV_TABS_CSS),
             gui.div(className="position-relative", id="recipe-nav-tabs"),
diff --git a/daras_ai_v2/icons.py b/daras_ai_v2/icons.py
index 1acaf65db..ea7fa9f3d 100644
--- a/daras_ai_v2/icons.py
+++ b/daras_ai_v2/icons.py
@@ -53,6 +53,8 @@
 info = "<i class='fa-regular fa-circle-info'></i>"
 search = '<i class="fa-solid fa-magnifying-glass"></i>'
 library = '<i class="fa-solid fa-book"></i>'
+sidebar_flip = "<i class='fa-light fa-sidebar-flip'></i>"
+arrow_up_right = "<i class='fa-regular fa-arrow-up-right'></i>"
 
 # brands
 github = '<i class="fa-brands fa-github"></i>'
diff --git a/daras_ai_v2/settings.py b/daras_ai_v2/settings.py
index dc139857c..5b837e28e 100644
--- a/daras_ai_v2/settings.py
+++ b/daras_ai_v2/settings.py
@@ -262,6 +262,7 @@
 GOOEY_LOGO_IMG = "https://storage.googleapis.com/dara-c1b52.appspot.com/daras_ai/media/2a3aacb4-0941-11ee-b236-02420a0001fb/thumbs/logo%20black.png_400x400.png"
 GOOEY_LOGO_IMG_WHITE = "https://storage.googleapis.com/dara-c1b52.appspot.com/daras_ai/media/ea26bc06-7eda-11ef-89fa-02420a0001f6/gooey-white-logo.png"
 GOOEY_LOGO_RECT = "https://storage.googleapis.com/dara-c1b52.appspot.com/daras_ai/media/d628be8a-9207-11ef-8aee-02420a000186/984x272%20rect%20gooey%20logo.png"
+GOOEY_LOGO_FACE = "https://storage.googleapis.com/dara-c1b52.appspot.com/daras_ai/media/bb2587e4-66eb-11f0-a197-02420a00013e/gooey-logo-robo.png"
 
 os.environ["REPLICATE_API_TOKEN"] = config("REPLICATE_API_TOKEN", default="")
 
@@ -310,7 +311,18 @@
     ("/pricing", "Pricing"),
     (CONTACT_URL, "Contact"),
 ]
-HEADER_ICONS = {}
+
+SIDEBAR_LINKS = [
+    # ("/explore/", "Search", "<i class='fa-solid fa-magnifying-glass'></i>"),
+    (DOCS_URL, "Docs", "<i class='fa-regular fa-book'></i>"),
+    ("/api/", "API", "<i class='fa-regular fa-code'></i>"),
+    (BLOG_URL, "Blog", "<i class='fa-regular fa-newspaper'></i>"),
+    ("/pricing", "Pricing", "<i class='fa-regular fa-circle-dollar'></i>"),
+    (CONTACT_URL, "Contact", "<i class='fa-regular fa-envelope'></i>"),
+]
+SIDEBAR_ICON_SIZE = "32px"
+
+HEADER_ICONS = {"/explore/": '<i class="fa-solid fa-magnifying-glass"></i>'}
 
 GPU_SERVER_1 = furl(config("GPU_SERVER_1", "http://gpu-1.gooey.ai"))
 
diff --git a/routers/account.py b/routers/account.py
index f633eeab3..e7f9c88a8 100644
--- a/routers/account.py
+++ b/routers/account.py
@@ -27,6 +27,7 @@
 from workspaces.models import Workspace, WorkspaceInvite
 from workspaces.views import invitation_page, workspaces_page
 from workspaces.widgets import get_current_workspace, SWITCH_WORKSPACE_KEY
+from widgets.sidebar import sidebar_mobile_header
 
 if typing.TYPE_CHECKING:
     from app_users.models import AppUser
@@ -381,7 +382,7 @@ def account_page_wrapper(request: Request, current_tab: TabData):
         raise gui.RedirectException(str(redirect_url))
 
     with page_wrapper(request) as current_workspace:
-        gui.div(className="mt-5")
+        sidebar_mobile_header(request)
         with gui.nav_tabs():
             for tab in AccountTabs.get_tabs_for_user(request.user, current_workspace):
                 with gui.nav_item(tab.url_path, active=tab == current_tab):
diff --git a/routers/root.py b/routers/root.py
index 0bae2977c..04f7aa191 100644
--- a/routers/root.py
+++ b/routers/root.py
@@ -47,6 +47,7 @@
 from routers.static_pages import serve_static_file
 from widgets.workflow_search import SearchFilters, render_search_bar_with_redirect
 from workspaces.widgets import global_workspace_selector, workspace_selector_link
+from widgets.sidebar import render_default_sidebar, sidebar_layout, use_sidebar
 
 app = CustomAPIRouter()
 
@@ -250,7 +251,7 @@ def explore_page(
 ):
     from widgets import explore
 
-    with page_wrapper(request, search_filters=search_filters, show_search_bar=False):
+    with page_wrapper(request):
         explore.render(request, search_filters)
 
     return {
@@ -689,7 +690,7 @@ def render_recipe_page(
     if not gui.session_state:
         gui.session_state.update(page.current_sr_to_session_state())
 
-    with page_wrapper(request):
+    with page_wrapper(request, page=page):
         page.render()
 
     return dict(
@@ -709,75 +710,138 @@ def get_og_url_path(request) -> str:
 def page_wrapper(
     request: Request,
     className="",
-    search_filters: typing.Optional[SearchFilters] = None,
-    show_search_bar: bool = True,
+    page=None,
 ):
-    from routers.account import explore_in_current_workspace
-
-    context = {"request": request, "block_incognito": True}
-
-    with gui.div(className="d-flex flex-column min-vh-100"):
-        gui.html(templates.get_template("gtag.html").render(**context))
-
-        with (
-            gui.div(className="header"),
-            gui.div(className="navbar navbar-expand-xl bg-transparent p-0 m-0"),
-            gui.div(className="container-xxl my-2"),
-            gui.div(
-                className="position-relative w-100 d-flex justify-content-between gap-2"
-            ),
-        ):
-            with (
-                gui.div(className="d-md-block"),
-                gui.tag("a", href="/"),
-            ):
-                gui.tag(
-                    "img",
-                    src=settings.GOOEY_LOGO_IMG,
-                    width="300",
-                    height="142",
-                    className="img-fluid logo d-none d-sm-block",
-                )
-                gui.tag(
-                    "img",
-                    src=settings.GOOEY_LOGO_RECT,
-                    width="145",
-                    height="40",
-                    className="img-fluid logo d-sm-none",
-                )
-
-            if show_search_bar:
-                _render_mobile_search_button(request, search_filters)
+    context = {
+        "request": request,
+        "block_incognito": True,
+    }
 
+    sidebar_ref = use_sidebar("main-sidebar", request.session, default_open=True)
+    sidebar_container, pane_container = sidebar_layout(sidebar_ref)
+
+    container = page if page else None
+    with sidebar_container:
+        with gui.styled("""
+            .gooey-sidebar-closed:hover {
+                & .hover-btn {
+                    display: block !important;
+                }
+                & .logo-face {
+                    display: none !important;
+                }
+            }
+        """):
             with gui.div(
-                className="d-flex gap-2 justify-content-end flex-wrap align-items-center"
+                className="flex-grow-1 position-relative",
+                id="sidebar-click-container",
             ):
-                for url, label in settings.HEADER_LINKS:
-                    render_header_link(
-                        url=url, label=label, icon=settings.HEADER_ICONS.get(url)
+                with gui.div(
+                    className="d-flex px-md-2 px-3 py-2 align-items-center justify-content-between text-nowrap",
+                    style={"height": "54px"},
+                ):
+                    # sidebar header
+                    gui.tag(
+                        "img",
+                        src=settings.GOOEY_LOGO_FACE,
+                        width=settings.SIDEBAR_ICON_SIZE,
+                        height=settings.SIDEBAR_ICON_SIZE,
+                        className=" logo-face d-none d-md-block",
                     )
-
-                if request.user and not request.user.is_anonymous:
-                    render_header_link(
-                        url=get_route_path(explore_in_current_workspace),
-                        label="Saved",
-                        icon=icons.save,
+                    open_sidebar_btn = gui.button(
+                        label=icons.sidebar_flip,
+                        className="m-0 d-none hover-btn gooey-btn",
+                        unsafe_allow_html=True,
+                        type="tertiary",
                     )
+                    if open_sidebar_btn:
+                        sidebar_ref.set_open(True)
+                        raise gui.RerunException()
 
-                    current_workspace = global_workspace_selector(
-                        request.user, request.session
+                    current_workspace = None
+                    with (
+                        gui.styled(
+                            """
+                        & > button {
+                            max-width: 100%;
+                            overflow-x: hidden;
+                            text-overflow: ellipsis;
+                            white-space: nowrap;
+                            height: 100%;
+                            margin: auto;
+                        }
+                    """,
+                        ),
+                        gui.div(
+                            className="position-relative", style={"maxWidth": "50%"}
+                        ),
+                    ):
+                        if sidebar_ref.is_open:
+                            if request.user and not request.user.is_anonymous:
+                                current_workspace = global_workspace_selector(
+                                    request.user, request.session
+                                )
+                            else:
+                                current_workspace = None
+                                anonymous_login_container(request, context)
+
+                    close_mobile_sidebar = gui.button(
+                        label=icons.cancel,
+                        className="m-0 d-md-none gooey-btn",
+                        unsafe_allow_html=True,
+                        type="tertiary",
                     )
+                    if close_mobile_sidebar:
+                        sidebar_ref.set_mobile_open(False)
+                        raise gui.RerunException()
+
+                    if sidebar_ref.is_open:
+                        close_sidebar = gui.button(
+                            label=icons.sidebar_flip,
+                            className="m-0 d-none d-md-block gooey-btn",
+                            unsafe_allow_html=True,
+                            type="tertiary",
+                        )
+                        if close_sidebar:
+                            sidebar_ref.set_open(False)
+                            raise gui.RerunException()
+
+                if container:
+                    container.render_sidebar(request, sidebar_ref)
                 else:
-                    current_workspace = None
-                    anonymous_login_container(request, context)
+                    render_default_sidebar(sidebar_ref, request)
 
-        gui.html(copy_to_clipboard_scripts)
+            # Bottom section with workspace selector when sidebar is closed
+            with (
+                gui.styled(
+                    "& img { width: 32px !important; height: 32px !important; }"
+                ),
+                gui.div(
+                    className="p-3 position-absolute bottom-0 d-md-block d-none",
+                    style={"width": "100%", "zIndex": 1000},
+                ),
+            ):
+                if not sidebar_ref.is_open:
+                    if request.user and not request.user.is_anonymous:
+                        current_workspace = global_workspace_selector(
+                            request.user, request.session, hide_name=True
+                        )
+                    else:
+                        current_workspace = None
+                        anonymous_login_container(request, context, hide_sign_in=True)
+
+    # Main content pane
+    with pane_container:
+        with gui.div(className="d-flex flex-column min-vh-100 w-100 pt-md-2"):
+            gui.html(templates.get_template("gtag.html").render(**context))
 
-        with gui.div(id="main-content", className="container-xxl " + className):
-            yield current_workspace
+            gui.html(copy_to_clipboard_scripts)
 
-        gui.html(templates.get_template("footer.html").render(**context))
-        gui.html(templates.get_template("login_scripts.html").render(**context))
+            with gui.div(id="main-content", className="px-3 " + className):
+                yield current_workspace
+
+            gui.html(templates.get_template("footer.html").render(**context))
+            gui.html(templates.get_template("login_scripts.html").render(**context))
 
 
 def _render_mobile_search_button(request: Request, search_filters: SearchFilters):
@@ -787,6 +851,7 @@ def _render_mobile_search_button(request: Request, search_filters: SearchFilters
         gui.button(
             icons.search,
             type="tertiary",
+            unsafe_allow_html=True,
             className="m-0",
             onClick=JS_SHOW_MOBILE_SEARCH,
         )
@@ -829,16 +894,18 @@ def _render_mobile_search_button(request: Request, search_filters: SearchFilters
 """
 
 
-def anonymous_login_container(request: Request, context: dict):
+def anonymous_login_container(
+    request: Request, context: dict, hide_sign_in: bool = False
+):
     next_url = str(furl(request.url).set(origin=None))
     login_url = str(furl("/login/", query_params=dict(next=next_url)))
 
-    with gui.tag("a", href=login_url, className="pe-2 d-none d-lg-block"):
-        gui.html("Sign In")
-
     popover, content = gui.popover(interactive=True)
 
-    with popover, gui.div(className="d-flex align-items-center"):
+    with popover, gui.div(className="d-flex align-items-center overflow-hidden"):
+        if not hide_sign_in:
+            with gui.tag("a", href=login_url, className="pe-2"):
+                gui.html("Sign In")
         gui.html(
             templates.get_template("google_one_tap_button.html").render(**context)
             + '<i class="ps-2 fa-regular fa-chevron-down d-xl-none"></i>'
diff --git a/static/css/app.css b/static/css/app.css
index 2daec1019..f916ce7ce 100644
--- a/static/css/app.css
+++ b/static/css/app.css
@@ -618,11 +618,6 @@ a.text-primary:hover {
     font-size: 14px;
 }
 
-html {
-    /* fix for jumping scrollbar issue - https://css-tricks.com/elegant-fix-jumping-scrollbar-issue/ */
-    margin-left: calc(100vw - 100%);
-}
-
 .gui-img {
     width: 100%;
     max-width: 450px;
diff --git a/templates/google_one_tap_button.html b/templates/google_one_tap_button.html
index 397e1e512..44022e742 100644
--- a/templates/google_one_tap_button.html
+++ b/templates/google_one_tap_button.html
@@ -7,8 +7,8 @@
 </style>
 
 <span class="pe-2" style="min-width: 40px; max-width: 200px;" data-replace-login-spinner>
-    <span id="g_id_signin_desktop" class="d-none d-md-inline"></span>
-    <span id="g_id_signin_mobile" class="d-md-none"></span>
+    <!-- <span id="g_id_signin_desktop" class="d-none d-md-inline"></span> -->
+    <span id="g_id_signin_mobile"></span>
 </span>
 
 <script>
diff --git a/widgets/explore.py b/widgets/explore.py
index 3deac0cef..4c8c77d3b 100644
--- a/widgets/explore.py
+++ b/widgets/explore.py
@@ -16,6 +16,7 @@
     render_search_filters,
     render_search_results,
 )
+from widgets.sidebar import sidebar_mobile_header
 
 META_TITLE = "Explore AI Workflows"
 META_DESCRIPTION = "Find, fork and run your field’s favorite AI recipes on Gooey.AI"
@@ -52,6 +53,7 @@ def build_meta_tags(url: str, search_filters: SearchFilters | None):
 
 
 def render(request: Request, search_filters: SearchFilters | None):
+    sidebar_mobile_header(request)
     with gui.div(className="my-4"):
         # note: using css instead of `if not search_filters: ...` stops re-render
         # of the search bar. this preserves focus/blur between query-param redirects
diff --git a/widgets/sidebar.py b/widgets/sidebar.py
new file mode 100644
index 000000000..c874b1695
--- /dev/null
+++ b/widgets/sidebar.py
@@ -0,0 +1,320 @@
+from starlette.requests import Request
+import gooey_gui as gui
+from daras_ai_v2 import settings
+from textwrap import dedent
+from daras_ai_v2 import icons
+
+
+class SidebarRef:
+    def __init__(
+        self,
+        key: str,
+        session: dict,
+        is_open: bool = True,
+        is_mobile_open: bool = False,
+    ):
+        self.key = key
+        self.session = session
+        self.is_open = is_open
+        self.is_mobile_open = is_mobile_open
+
+    def set_open(self, value: bool):
+        self.is_open = self.session[self.key] = value
+
+    def set_mobile_open(self, value: bool):
+        self.is_mobile_open = self.session[self.mobile_key] = value
+        self.set_open(value)
+
+    @property
+    def mobile_key(self):
+        return self.key + ":mobile"
+
+
+def use_sidebar(key: str, session: dict, default_open: bool = True) -> SidebarRef:
+    """Create or get a sidebar reference with state management."""
+    import time
+
+    # Check if this is a fresh page load by comparing timestamps
+    last_load_time = session.get(f"{key}:last_load_time", 0)
+    current_time = time.time()
+
+    # If more than 1 second has passed since last load, consider it a fresh page load
+    if current_time - last_load_time > 0.5:
+        # Fresh page load - clear mobile state
+        mobile_key = key + ":mobile"
+        if mobile_key in session:
+            del session[mobile_key]
+
+    # Update the last load time
+    session[f"{key}:last_load_time"] = current_time
+
+    ref = SidebarRef(
+        key=key,
+        session=session,
+        is_open=bool(session.get(key, default_open)),
+        is_mobile_open=bool(session.get(key + ":mobile", False)),
+    )
+
+    return ref
+
+
+def sidebar_list_item(
+    icon, title, is_sidebar_open, url=None, hover_icon=None, current_url=None
+):
+    is_selected = current_url and url and current_url.startswith(url)
+    with (
+        gui.styled(
+            """
+            & a {
+                font-size: 1rem;
+                text-decoration: none;
+            }
+            & .sidebar-list-item {
+                border-radius: 8px;
+                height: 36px;
+                width: min-content;
+                padding: 6px 10px;
+            }
+            & .sidebar-list-item-hover-icon {
+                display: none;
+            }
+            & .sidebar-list-item:hover {
+                background-color: #f0f0f0;
+                .sidebar-list-item-hover-icon {
+                    display: block;
+                }
+            }
+            & .sidebar-list-item.selected {
+                background-color: #ddd;
+            }
+            & .sidebar-list-item-title {
+                font-size: 0.875rem;
+            }
+        """
+        ),
+        gui.div(),
+    ):
+        link_classes = "d-block sidebar-list-item ms-2"
+        if is_sidebar_open:
+            link_classes += " d-flex align-items-baseline justify-content-between w-100"
+        if is_selected:
+            link_classes += " selected"
+        with gui.tag(
+            "a",
+            href=url,
+            className=link_classes,
+        ):
+            with gui.div(className="d-flex align-items-baseline"):
+                icon_classes = "d-block sidebar-list-item-icon"
+                if is_sidebar_open:
+                    icon_classes += " me-2"
+
+                if icon:
+                    gui.html(
+                        icon,
+                        className=icon_classes,
+                    )
+                if is_sidebar_open:
+                    gui.html(title, className="sidebar-list-item-title d-block")
+
+            if hover_icon:
+                with gui.div(className="sidebar-list-item-hover-icon"):
+                    gui.html(hover_icon, className="text-secondary")
+
+
+def sidebar_item_list(is_sidebar_open, current_url=None):
+    for i, (url, label, icon) in enumerate(settings.SIDEBAR_LINKS):
+        if icon:
+            with gui.div():
+                sidebar_list_item(
+                    icon, label, is_sidebar_open, url, icons.arrow_up_right, current_url
+                )
+        else:
+            with gui.div(
+                className="d-inline-block me-2 small",
+            ):
+                gui.html("&nbsp;")
+            gui.html(label)
+
+
+def render_default_sidebar(sidebar_ref: SidebarRef, request=None):
+    is_sidebar_open = sidebar_ref.is_open
+    current_url = request.url.path if request else None
+
+    with gui.div(
+        className=f"d-flex flex-column flex-grow-1 {'pe-3' if is_sidebar_open else ''} my-3 text-nowrap",
+    ):
+        with gui.div(className="mb-4"):
+            sidebar_list_item(
+                "<i class='fa-regular fa-floppy-disk'></i>",
+                "Saved",
+                is_sidebar_open,
+                "/account/saved/",
+                current_url=current_url,
+            )
+            sidebar_list_item(
+                icons.search,
+                "Explore",
+                is_sidebar_open,
+                "/explore/",
+                current_url=current_url,
+            )
+
+        if is_sidebar_open:
+            sidebar_item_list(is_sidebar_open, current_url)
+
+
+def sidebar_mobile_header(request: Request):
+    from routers.root import anonymous_login_container
+
+    with gui.div(
+        className="d-flex align-items-center justify-content-between d-md-none me-2 w-100 py-2",
+        style={"height": "54px"},
+    ):
+        sidebar_ref = use_sidebar("main-sidebar", request.session)
+        gui.tag(
+            "img",
+            src=settings.GOOEY_LOGO_RECT,
+            width="120px",
+            height="auto",
+            className=" logo-face",
+        )
+        with gui.div(className="d-flex align-items-center gap-2"):
+            anonymous_login_container(
+                request,
+                context={
+                    "request": request,
+                    "block_incognito": True,
+                },
+            )
+            open_mobile_sidebar = gui.button(
+                label=icons.sidebar_flip,
+                className="m-0",
+                unsafe_allow_html=True,
+                type="tertiary",
+                style={"padding": "6px 10px"},
+            )
+            if open_mobile_sidebar:
+                sidebar_ref.set_mobile_open(True)
+                raise gui.RerunException()
+
+
+# Sidebar width variables
+sidebar_open_width = "245px"
+sidebar_closed_width = "53px"
+sidebar_mobile_width = "80vw"
+
+
+def sidebar_layout(sidebar_ref: SidebarRef):
+    is_mobile_open = sidebar_ref.is_mobile_open
+    sidebar_funtion_classes = (
+        "gooey-sidebar-open" if sidebar_ref.is_open else "gooey-sidebar-closed"
+    )
+
+    side_bar_styles = dedent(
+        f"""
+            html {{
+                /* override margin-left from app.css */
+                margin-left: 0 !important;
+            }}
+            & .gooey-btn {{
+                padding: 6px 10px !important;
+            }}
+            & .gooey-btn:hover {{
+                background-color: #f0f0f0 !important;
+            }}
+
+            & .gooey-sidebar {{
+                transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.2s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+                background-color: #f9f9f9;
+                position: sticky;
+                top: 0;
+                left: 0;
+                bottom: 0;
+                z-index: 999;
+                border-right: 1px solid #e0e0e0;
+            }}
+
+            & .gooey-sidebar-open {{
+                min-width: {sidebar_open_width};
+                width: {sidebar_open_width};
+                max-width: {sidebar_open_width};
+            }}
+            & .gooey-sidebar-closed {{
+                min-width: {sidebar_closed_width};
+                width: {sidebar_closed_width};
+                max-width: {sidebar_closed_width};
+            }}
+
+            & .gooey-sidebar-closed:hover {{
+                cursor: e-resize;
+            }}
+
+            @media (max-width: 767px) {{
+                & .gooey-sidebar-open {{
+                    position: fixed;
+                    right: 0;
+                    left: auto;
+                    min-width: {sidebar_mobile_width};
+                    width: {sidebar_mobile_width};
+                    max-width: {sidebar_mobile_width};
+                    z-index: 2000;
+                    border-left: 1px solid #e0e0e0;
+                    border-right: none;
+                }}
+                & .gooey-sidebar-closed {{
+                    position: fixed;
+                    right: 0;
+                    left: auto;
+                    min-width: 0px;
+                    width: 0px;
+                    max-width: 0px;
+                    overflow: hidden;
+                }}
+            }}
+        """
+    )
+    if not is_mobile_open:
+        side_bar_styles += dedent(
+            """
+            @media (max-width: 767px) {
+                & .gooey-sidebar-open {
+                    display: none !important;
+                    position: fixed;
+                    max-width: 0px !important;
+                }
+            }
+        """
+        )
+
+    with (
+        gui.styled(side_bar_styles),
+        gui.div(
+            className="d-flex w-100 h-100 position-relative sidebar-click-container",
+            style={"height": "100dvh"},
+            onClick=dedent(
+                """
+                if (event.target.id === "sidebar-click-container") {
+                    document.getElementById("sidebar-hidden-btn").click();
+                }
+                """
+                if not sidebar_ref.is_open
+                else ""
+            ),
+        ),
+    ):
+        open_sidebar_btn = gui.button(
+            label="",
+            className="d-none",
+            id="sidebar-hidden-btn",
+        )
+        if open_sidebar_btn:
+            sidebar_ref.set_open(True)
+            raise gui.RerunException()
+
+        sidebar_content_placeholder = gui.div(
+            className=f"d-flex flex-column flex-grow-1 gooey-sidebar {sidebar_funtion_classes}",
+            style={"height": "100dvh"},
+        )
+        pane_content_placeholder = gui.div(className="d-flex flex-grow-1 mw-100")
+    return sidebar_content_placeholder, pane_content_placeholder
diff --git a/workspaces/widgets.py b/workspaces/widgets.py
index a6d485e8b..a8212f12c 100644
--- a/workspaces/widgets.py
+++ b/workspaces/widgets.py
@@ -18,7 +18,7 @@
 SWITCH_WORKSPACE_KEY = "--switch-workspace"
 
 
-def global_workspace_selector(user: AppUser, session: dict):
+def global_workspace_selector(user: AppUser, session: dict, hide_name: bool = False):
     from routers.account import (
         members_route,
         profile_route,
@@ -47,8 +47,9 @@ def global_workspace_selector(user: AppUser, session: dict):
     except (KeyError, IndexError):
         current = workspaces[0]
 
-    with gui.styled("& > button { padding-top: 5px; }"), gui.div():
-        popover, content = gui.popover(interactive=True, placement="bottom")
+    popover, content = gui.popover(
+        interactive=True, placement="bottom", className="w-100"
+    )
 
     with popover:
         if current.is_personal and current.created_by_id == user.id:
@@ -57,23 +58,28 @@ def global_workspace_selector(user: AppUser, session: dict):
             else:
                 display_name = "Personal"
         else:
-            display_name = current.display_name(user)
-        with gui.div(className="d-inline-flex align-items-center gap-2 text-truncate"):
-            gui.html(f"{current.html_icon()}")
-            gui.html(
-                html.escape(display_name),
-                className="d-none d-md-inline text-truncate",
-                style={"maxWidth": "150px"},
-            )
-            gui.html('<i class="ps-1 fa-regular fa-chevron-down"></i>')
+            display_name = html.escape(current.display_name(user))
+        gui.html(
+            " ".join(
+                [
+                    current.html_icon(),
+                    display_name if not hide_name else "",
+                ],
+            ),
+        )
 
     with (
         content,
         gui.div(
-            className="d-flex flex-column bg-white border border-dark rounded shadow mx-2 overflow-hidden",
+            className="d-flex flex-column flex-nowrap bg-white border border-dark rounded shadow mx-2 position-relative",
+            style={
+                "width": "max-content",
+                "max-height": "80dvh",
+                "overflow-y": "auto",
+            },
         ),
     ):
-        row_height = "2.2rem"
+        row_height = "36px"
 
         for workspace in workspaces:
             with gui.tag(
@@ -82,7 +88,7 @@ def global_workspace_selector(user: AppUser, session: dict):
                 name=SWITCH_WORKSPACE_KEY,
                 type="submit",
                 value=str(workspace.id),
-                style=dict(height=row_height),
+                style=dict(minHeight=row_height),
             ):
                 with gui.div(className="row align-items-center"):
                     with gui.div(className="col-2 d-flex justify-content-center"):