diff --git a/crates/app/src/assets.rs b/crates/app/src/assets.rs
index c3a8d69..8dd050f 100644
--- a/crates/app/src/assets.rs
+++ b/crates/app/src/assets.rs
@@ -93,6 +93,7 @@ pub const MOD_WARNINGS: &str = include_str!("./public/html/mod/warnings.html");
 pub const CHATS_APP: &str = include_str!("./public/html/chats/app.html");
 pub const CHATS_STREAM: &str = include_str!("./public/html/chats/stream.html");
 pub const CHATS_MESSAGE: &str = include_str!("./public/html/chats/message.html");
+pub const CHATS_CHANNELS: &str = include_str!("./public/html/chats/channels.html");
 
 // langs
 pub const LANG_EN_US: &str = include_str!("./langs/en-US.toml");
@@ -260,6 +261,7 @@ pub(crate) async fn write_assets(config: &Config) -> PathBufD {
     write_template!(html_path->"chats/app.html"(crate::assets::CHATS_APP) -d "chats" --config=config);
     write_template!(html_path->"chats/stream.html"(crate::assets::CHATS_STREAM) --config=config);
     write_template!(html_path->"chats/message.html"(crate::assets::CHATS_MESSAGE) --config=config);
+    write_template!(html_path->"chats/channels.html"(crate::assets::CHATS_CHANNELS) --config=config);
 
     html_path
 }
diff --git a/crates/app/src/public/html/chats/app.html b/crates/app/src/public/html/chats/app.html
index fef59cb..e9e0f94 100644
--- a/crates/app/src/public/html/chats/app.html
+++ b/crates/app/src/public/html/chats/app.html
@@ -90,58 +90,13 @@
             {{ icon "plus" }}
             <span>{{ text "communities:action.create_channel" }}</span>
         </a>
-        {% endif %} {% for channel in channels %} {% if selected_community == 0
-        %}
-        <div class="flex flex-row gap-1">
-            <a
-                class="w-full justify-start button {% if selected_channel == channel.id %}quaternary{% else %}camo{% endif %}"
-                href="/chats/{{ selected_community }}/{{ channel.id }}"
-                data-turbo="{{ selected_community == '0' }}"
-            >
-                {{ icon "rss" }}
-                <b class="name shortest">{{ channel.title }}</b>
-            </a>
+        {% endif %}
 
-            <div class="dropdown">
-                <button
-                    class="big_icon {% if selected_channel == channel.id %}quaternary{% else %}camo{% endif %}"
-                    onclick="trigger('atto::hooks::dropdown', [event])"
-                    exclude="dropdown"
-                    style="width: 32px"
-                >
-                    {{ icon "ellipsis" }}
-                </button>
-
-                <div class="inner">
-                    {% if user.id == channel.owner %}
-                    <button
-                        onclick="delete_channel('{{ channel.id }}')"
-                        class="red"
-                    >
-                        {{ icon "trash" }}
-                        <span>{{ text "general:action.delete" }}</span>
-                    </button>
-                    {% else %}
-                    <button
-                        onclick="kick_member('{{ channel.id }}', '{{ user.id }}')"
-                        class="red"
-                    >
-                        {{ icon "door-open" }}
-                        <span>{{ text "chats:action.leave" }}</span>
-                    </button>
-                    {% endif %}
-                </div>
-            </div>
-        </div>
-        {% else %}
-        <a
-            class="w-full justify-start button {% if selected_channel == channel.id %}quaternary{% else %}camo{% endif %}"
-            href="/chats/{{ selected_community }}/{{ channel.id }}"
-        >
-            {{ icon "rss" }}
-            <b class="name shortest">{{ channel.title }}</b>
-        </a>
-        {% endif %} {% endfor %}
+        <turbo-frame
+            id="channels_list_frame"
+            src="/chats/{{ selected_community }}/{{ selected_channel }}/_channels"
+            target="_top"
+        ></turbo-frame>
     </div>
 
     {% if channel %}
@@ -149,6 +104,7 @@
         <turbo-frame
             id="stream_body_frame"
             src="/chats/{{ selected_community }}/{{ selected_channel }}/_stream?page={{ page }}"
+            target="_top"
         ></turbo-frame>
 
         <form
@@ -368,6 +324,11 @@
             membership_role: Number.parseInt("{{ membership_role }}"),
         };
 
+        window.SIDEBARS_OPEN = false;
+        if (new URLSearchParams(window.location.search).get("nav") === "true") {
+            window.SIDEBARS_OPEN = true;
+        }
+
         if (
             window.SIDEBARS_OPEN &&
             !document.body.classList.contains("sidebars_shown")
@@ -376,8 +337,22 @@
             window.SIDEBARS_OPEN = true;
         }
 
+        for (const anchor of document.querySelectorAll("[data-turbo=false]")) {
+            anchor.href += `?nav=${window.SIDEBARS_OPEN}`;
+        }
+
         function toggle_sidebars() {
             window.SIDEBARS_OPEN = !window.SIDEBARS_OPEN;
+
+            for (const anchor of document.querySelectorAll(
+                "[data-turbo=false]",
+            )) {
+                anchor.href = anchor.href.replace(
+                    `?nav=${!window.SIDEBARS_OPEN}`,
+                    `?nav=${window.SIDEBARS_OPEN}`,
+                );
+            }
+
             const community_list = document.getElementById("community_list");
             const channels_list = document.getElementById("channels_list");
 
@@ -452,16 +427,16 @@
                 console.log("closed lingering");
             }
 
-            if ("{{ selected_community }}" !== "0") {
-                const endpoint = `${window.location.origin.replace("http", "ws")}/api/v1/_connect/{{ selected_community }}`;
+            if (window.CHAT_PROPS.selected_community !== "0") {
+                const endpoint = `${window.location.origin.replace("http", "ws")}/api/v1/_connect/${window.CHAT_PROPS.selected_community}`;
                 const socket = new WebSocket(endpoint);
                 window.socket = socket;
-                window.socket_id = "{{ selected_community }}";
+                window.socket_id = window.CHAT_PROPS.selected_community;
             } else {
-                const endpoint = `${window.location.origin.replace("http", "ws")}/api/v1/_connect/{{ selected_channel }}`;
+                const endpoint = `${window.location.origin.replace("http", "ws")}/api/v1/_connect/${window.CHAT_PROPS.selected_channel}`;
                 const socket = new WebSocket(endpoint);
                 window.socket = socket;
-                window.socket_id = "{{ selected_channel }}";
+                window.socket_id = window.CHAT_PROPS.selected_channel;
             }
 
             window.socket.addEventListener("open", () => {
@@ -477,6 +452,117 @@
                     }),
                 );
             });
+
+            setTimeout(() => {
+                window.socket.addEventListener("message", async (event) => {
+                    if (event.data === "Ping") {
+                        return socket.send("Pong");
+                    }
+
+                    const msg = JSON.parse(event.data);
+                    const [channel_id, data] = JSON.parse(msg.data);
+
+                    if (msg.method === "Message" && window.CURRENT_PAGE === 0) {
+                        if (channel_id !== window.CHAT_PROPS.selected_channel) {
+                            // message not for us... maybe send notification later
+                            // something like /api/v1/messages/{id}/mark_unread
+                            return;
+                        }
+
+                        if (document.getElementById("stream_body")) {
+                            const element = document.createElement("div");
+                            element.style.display = "contents";
+                            element.innerHTML = await (
+                                await fetch(
+                                    `/chats/${window.CHAT_PROPS.selected_community}/${window.CHAT_PROPS.selected_channel}/_render`,
+                                    {
+                                        method: "POST",
+                                        headers: {
+                                            "Content-Type": "application/json",
+                                        },
+                                        body: JSON.stringify({
+                                            data: msg.data,
+                                        }),
+                                    },
+                                )
+                            ).text();
+
+                            document
+                                .getElementById("stream_body")
+                                .prepend(element);
+                            clean_text();
+                        } else {
+                            console.log("abandoned remote");
+                            socket.close();
+                        }
+                    } else if (msg.method === "Delete") {
+                        if (document.getElementById(`message-${data.id}`)) {
+                            document
+                                .getElementById(`message-${data.id}`)
+                                .remove();
+                        }
+                    }
+                });
+
+                globalThis.create_message_from_form = async (e) => {
+                    e.preventDefault();
+                    await trigger("atto::debounce", ["messages::create"]);
+
+                    fetch("/api/v1/messages", {
+                        method: "POST",
+                        headers: {
+                            "Content-Type": "application/json",
+                        },
+                        body: JSON.stringify({
+                            content: e.target.content.value,
+                            channel: window.CHAT_PROPS.selected_channel,
+                        }),
+                    })
+                        .then((res) => res.json())
+                        .then((res) => {
+                            if (!res.ok) {
+                                trigger("atto::toast", ["error", res.message]);
+                            }
+
+                            e.target.reset();
+                        });
+                };
+
+                globalThis.delete_message = async (id) => {
+                    if (
+                        !(await trigger("atto::confirm", [
+                            "Are you sure you would like to do this?",
+                        ]))
+                    ) {
+                        return;
+                    }
+
+                    fetch(`/api/v1/messages/${id}`, {
+                        method: "DELETE",
+                    })
+                        .then((res) => res.json())
+                        .then((res) => {
+                            trigger("atto::toast", [
+                                res.ok ? "success" : "error",
+                                res.message,
+                            ]);
+                        });
+                };
+
+                const clean_text = () => {
+                    trigger("atto::clean_date_codes");
+                    trigger("atto::hooks::online_indicator");
+                };
+
+                document.addEventListener(
+                    "turbo:before-frame-render",
+                    (event) => {
+                        setTimeout(clean_text, 50);
+                    },
+                );
+
+                setTimeout(clean_text, 150);
+            }, 250);
         };
     </script>
 
@@ -497,108 +583,6 @@
                 }
             }
         }, 100);
-
-        setTimeout(() => {
-            window.socket.addEventListener("message", async (event) => {
-                if (event.data === "Ping") {
-                    return socket.send("Pong");
-                }
-
-                const msg = JSON.parse(event.data);
-                const [channel_id, data] = JSON.parse(msg.data);
-
-                if (msg.method === "Message" && window.CURRENT_PAGE === 0) {
-                    if (channel_id !== "{{ selected_channel }}") {
-                        // message not for us... maybe send notification later
-                        // something like /api/v1/messages/{id}/mark_unread
-                        return;
-                    }
-
-                    if (document.getElementById("stream_body")) {
-                        const element = document.createElement("div");
-                        element.style.display = "contents";
-                        element.innerHTML = await (
-                            await fetch(
-                                "/chats/{{ selected_community }}/{{ selected_channel }}/_render",
-                                {
-                                    method: "POST",
-                                    headers: {
-                                        "Content-Type": "application/json",
-                                    },
-                                    body: JSON.stringify({ data: msg.data }),
-                                },
-                            )
-                        ).text();
-
-                        document.getElementById("stream_body").prepend(element);
-                        clean_text();
-                    } else {
-                        console.log("abandoned remote");
-                        socket.close();
-                    }
-                } else if (msg.method === "Delete") {
-                    if (document.getElementById(`message-${data.id}`)) {
-                        document.getElementById(`message-${data.id}`).remove();
-                    }
-                }
-            });
-
-            globalThis.create_message_from_form = async (e) => {
-                e.preventDefault();
-                await trigger("atto::debounce", ["messages::create"]);
-
-                fetch("/api/v1/messages", {
-                    method: "POST",
-                    headers: {
-                        "Content-Type": "application/json",
-                    },
-                    body: JSON.stringify({
-                        content: e.target.content.value,
-                        channel: "{{ selected_channel }}",
-                    }),
-                })
-                    .then((res) => res.json())
-                    .then((res) => {
-                        if (!res.ok) {
-                            trigger("atto::toast", ["error", res.message]);
-                        }
-
-                        e.target.reset();
-                    });
-            };
-
-            globalThis.delete_message = async (id) => {
-                if (
-                    !(await trigger("atto::confirm", [
-                        "Are you sure you would like to do this?",
-                    ]))
-                ) {
-                    return;
-                }
-
-                fetch(`/api/v1/messages/${id}`, {
-                    method: "DELETE",
-                })
-                    .then((res) => res.json())
-                    .then((res) => {
-                        trigger("atto::toast", [
-                            res.ok ? "success" : "error",
-                            res.message,
-                        ]);
-                    });
-            };
-
-            const clean_text = () => {
-                trigger("atto::clean_date_codes");
-                trigger("atto::hooks::online_indicator");
-            };
-
-            document.addEventListener("turbo:before-frame-render", (event) => {
-                setTimeout(clean_text, 50);
-            });
-
-            setTimeout(clean_text, 150);
-        }, 250);
     </script>
     {% endif %}
 </div>
diff --git a/crates/app/src/public/html/chats/channels.html b/crates/app/src/public/html/chats/channels.html
new file mode 100644
index 0000000..01d1dd0
--- /dev/null
+++ b/crates/app/src/public/html/chats/channels.html
@@ -0,0 +1,53 @@
+<turbo-frame id="channels_list_frame">
+    {% for channel in channels %} {% if selected_community == 0 %}
+    <div class="flex flex-row gap-1">
+        <a
+            class="w-full justify-start button {% if selected_channel == channel.id %}quaternary{% else %}camo{% endif %}"
+            href="/chats/{{ selected_community }}/{{ channel.id }}"
+            data-turbo="{{ selected_community == '0' }}"
+        >
+            {{ icon "rss" }}
+            <b class="name shortest">{{ channel.title }}</b>
+        </a>
+
+        <div class="dropdown">
+            <button
+                class="big_icon {% if selected_channel == channel.id %}quaternary{% else %}camo{% endif %}"
+                onclick="trigger('atto::hooks::dropdown', [event])"
+                exclude="dropdown"
+                style="width: 32px"
+            >
+                {{ icon "ellipsis" }}
+            </button>
+
+            <div class="inner">
+                {% if user.id == channel.owner %}
+                <button
+                    onclick="delete_channel('{{ channel.id }}')"
+                    class="red"
+                >
+                    {{ icon "trash" }}
+                    <span>{{ text "general:action.delete" }}</span>
+                </button>
+                {% else %}
+                <button
+                    onclick="kick_member('{{ channel.id }}', '{{ user.id }}')"
+                    class="red"
+                >
+                    {{ icon "door-open" }}
+                    <span>{{ text "chats:action.leave" }}</span>
+                </button>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+    {% else %}
+    <a
+        class="w-full justify-start button {% if selected_channel == channel.id %}quaternary{% else %}camo{% endif %}"
+        href="/chats/{{ selected_community }}/{{ channel.id }}"
+    >
+        {{ icon "rss" }}
+        <b class="name shortest">{{ channel.title }}</b>
+    </a>
+    {% endif %} {% endfor %}
+</turbo-frame>
diff --git a/crates/app/src/routes/pages/chats.rs b/crates/app/src/routes/pages/chats.rs
index 0f03f8c..7401fd8 100644
--- a/crates/app/src/routes/pages/chats.rs
+++ b/crates/app/src/routes/pages/chats.rs
@@ -1,4 +1,4 @@
-use super::{render_error, PaginatedQuery};
+use super::{render_error, ChatsAppQuery, PaginatedQuery};
 use crate::{State, assets::initial_context, get_lang, get_user_from_token};
 use axum::{
     extract::{Path, Query},
@@ -28,7 +28,7 @@ pub async fn app_request(
     jar: CookieJar,
     Extension(data): Extension<State>,
     Path((selected_community, selected_channel)): Path<(usize, usize)>,
-    Query(props): Query<PaginatedQuery>,
+    Query(props): Query<ChatsAppQuery>,
 ) -> impl IntoResponse {
     let data = data.read().await;
     let user = match get_user_from_token!(jar, data.0) {
@@ -60,17 +60,19 @@ pub async fn app_request(
         Err(e) => return Err(Html(render_error(e, &jar, &data, &Some(user)).await)),
     };
 
-    let channels = if selected_community == 0 {
-        match data.0.get_channels_by_user(user.id).await {
+    if selected_community != 0 && selected_channel == 0 {
+        let channels = match data.0.get_channels_by_community(selected_community).await {
             Ok(p) => p,
             Err(e) => return Err(Html(render_error(e, &jar, &data, &Some(user)).await)),
+        };
+
+        if let Some(ref channel) = channels.get(0) {
+            return Ok(Html(format!(
+                "<!doctype html><html><head><meta http-equiv=\"refresh\" content=\"0; url=/chats/{}/{}?nav={}\" /></head></html>",
+                selected_community, channel.id, props.nav
+            )));
         }
-    } else {
-        match data.0.get_channels_by_community(selected_community).await {
-            Ok(p) => p,
-            Err(e) => return Err(Html(render_error(e, &jar, &data, &Some(user)).await)),
-        }
-    };
+    }
 
     let community = if selected_community != 0 {
         match data.0.get_community_by_id(selected_community).await {
@@ -130,9 +132,7 @@ pub async fn app_request(
 
     context.insert("community", &community);
     context.insert("channel", &channel);
-
     context.insert("communities", &communities);
-    context.insert("channels", &channels);
 
     // return
     Ok(Html(data.1.render("chats/app.html", &context).unwrap()))
@@ -249,3 +249,47 @@ pub async fn message_request(
     // return
     Ok(Html(data.1.render("chats/message.html", &context).unwrap()))
 }
+
+/// `/chats/{community}/{channel/_channels`
+pub async fn channels_request(
+    jar: CookieJar,
+    Extension(data): Extension<State>,
+    Path((community, channel)): Path<(usize, usize)>,
+    Query(props): Query<PaginatedQuery>,
+) -> impl IntoResponse {
+    let data = data.read().await;
+    let user = match get_user_from_token!(jar, data.0) {
+        Some(ua) => ua,
+        None => {
+            return Err(Html(
+                render_error(Error::NotAllowed, &jar, &data, &None).await,
+            ));
+        }
+    };
+
+    let channels = if community == 0 {
+        match data.0.get_channels_by_user(user.id).await {
+            Ok(p) => p,
+            Err(e) => return Err(Html(render_error(e, &jar, &data, &Some(user)).await)),
+        }
+    } else {
+        match data.0.get_channels_by_community(community).await {
+            Ok(p) => p,
+            Err(e) => return Err(Html(render_error(e, &jar, &data, &Some(user)).await)),
+        }
+    };
+
+    let lang = get_lang!(jar, data.0);
+    let mut context = initial_context(&data.0.0, lang, &Some(user)).await;
+
+    context.insert("channels", &channels);
+    context.insert("page", &props.page);
+
+    context.insert("selected_community", &community);
+    context.insert("selected_channel", &channel);
+
+    // return
+    Ok(Html(
+        data.1.render("chats/channels.html", &context).unwrap(),
+    ))
+}
diff --git a/crates/app/src/routes/pages/mod.rs b/crates/app/src/routes/pages/mod.rs
index c2dec85..9986e7c 100644
--- a/crates/app/src/routes/pages/mod.rs
+++ b/crates/app/src/routes/pages/mod.rs
@@ -99,6 +99,10 @@ pub fn routes() -> Router {
             "/chats/{community}/{channel}/_render",
             post(chats::message_request),
         )
+        .route(
+            "/chats/{community}/{channel}/_channels",
+            get(chats::channels_request),
+        )
 }
 
 pub async fn render_error(
@@ -119,6 +123,14 @@ pub struct PaginatedQuery {
     pub page: usize,
 }
 
+#[derive(Deserialize)]
+pub struct ChatsAppQuery {
+    #[serde(default)]
+    pub page: usize,
+    #[serde(default)]
+    pub nav: bool,
+}
+
 #[derive(Deserialize)]
 pub struct ProfileQuery {
     #[serde(default)]