diff --git a/.gitignore b/.gitignore
index d1bb19a0..0c832a0b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -58,4 +58,4 @@ Carthage/Build/
 .com.apple.timemachine.donotpresent
 
 
-deployment-**.log
\ No newline at end of file
+deployment-**.log
diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md
index f28526ab..b3c957d7 100644
--- a/ARCHITECTURE.md
+++ b/ARCHITECTURE.md
@@ -28,11 +28,19 @@ graph TD
 
 ## Key Components
 
+- **actix-api:** Rust-based backend server using Actix Web framework
+- **videocall-types:** Shared data types and protocol definitions
+
 ### 1. Client Applications
 
 - **Web Client**: Built with Yew (Rust-to-WebAssembly framework)
+  - **`yew-ui`** Web frontend built with the Yew framework and compiled to WebAssembly
+  - **`tailwind-yew`** css
+  - **`videocall-client`** Client library for native integration
 - **CLI Client**: Native Rust client for headless devices
+  - **`videocall-cli`** Command-line interface for headless video streaming
 - **Mobile Clients**: Native mobile applications (in development)
+  - **`videocall-sdk`**
 
 ### 2. Transport Servers
 
diff --git a/Makefile b/Makefile
index fbb598c7..ce95c629 100644
--- a/Makefile
+++ b/Makefile
@@ -35,4 +35,4 @@ check:
 
 clean:
 		docker compose -f docker/docker-compose.yaml down --remove-orphans \
-			--volumes --rmi all
\ No newline at end of file
+			--volumes --rmi all
diff --git a/docker/Dockerfile.website b/docker/Dockerfile.website
index f20710a3..03523bd7 100644
--- a/docker/Dockerfile.website
+++ b/docker/Dockerfile.website
@@ -9,6 +9,7 @@ RUN apt-get update && apt-get install -y \
     libssl-dev \
     pkg-config \
     g++ \
+    git-all \
     && rm -rf /var/lib/apt/lists/*
 
 RUN cargo install --locked cargo-leptos@0.2.29
@@ -34,4 +35,4 @@ ENV LEPTOS_SITE_ADDR="0.0.0.0:8080"
 ENV LEPTOS_SITE_ROOT="site"
 EXPOSE 8080
 
-CMD ["/app/leptos_website"]
\ No newline at end of file
+CMD ["/app/leptos_website"]
diff --git a/docker/Dockerfile.website.dev b/docker/Dockerfile.website.dev
index 83f294e7..69551fc9 100644
--- a/docker/Dockerfile.website.dev
+++ b/docker/Dockerfile.website.dev
@@ -6,6 +6,7 @@ RUN apt-get update && apt-get install -y \
     libssl-dev \
     pkg-config \
     g++ \
+    git-all \
     && rm -rf /var/lib/apt/lists/*
 
 RUN cargo install --locked cargo-leptos@0.2.29
diff --git a/docker/docker-compose.yaml b/docker/docker-compose.yaml
index 374a7434..939f0923 100644
--- a/docker/docker-compose.yaml
+++ b/docker/docker-compose.yaml
@@ -22,6 +22,7 @@ services:
       - LOGIN_URL=http://localhost:${ACTIX_PORT:-8080}/login
       - RUSTFLAGS=--cfg=web_sys_unstable_apis
       - RUST_BACKTRACE=1
+      - RUST_LOG=debug
       - WEBTRANSPORT_ENABLED=${WEBTRANSPORT_ENABLED:-false}
       - E2EE_ENABLED=${E2EE_ENABLED:-false}
       - USERS_ALLOWED_TO_STREAM=${USERS_ALLOWED_TO_STREAM:-}
diff --git a/yew-ui/src/components/attendants.rs b/yew-ui/src/components/attendants.rs
index d9abd646..8a6a74d1 100644
--- a/yew-ui/src/components/attendants.rs
+++ b/yew-ui/src/components/attendants.rs
@@ -81,6 +81,7 @@ pub enum Msg {
     ToggleForceDesktopGrid,
     HangUp,
     ShowCopyToast(bool),
+    RegisterHostToggleName(Callback<MouseEvent>),
 }
 
 impl From<WsAction> for Msg {
@@ -145,6 +146,7 @@ pub struct AttendantsComponent {
     force_desktop_grid_on_mobile: bool,
     simulation_info_message: Option<String>,
     show_copy_toast: bool,
+    host_toggle_change_name: Option<Callback<MouseEvent>>,
     show_dropdown: bool,
 }
 
@@ -357,6 +359,7 @@ impl Component for AttendantsComponent {
             force_desktop_grid_on_mobile: true,
             simulation_info_message: None,
             show_copy_toast: false,
+            host_toggle_change_name: None,
             show_dropdown: false,
         };
         if let Err(e) = crate::constants::app_config() {
@@ -578,6 +581,10 @@ impl Component for AttendantsComponent {
                 let _ = window().location().reload(); // Refresh page for clean state
                 true
             }
+            Msg::RegisterHostToggleName(callback) => {
+                self.host_toggle_change_name = Some(callback);
+                true
+            }
         }
     }
 
@@ -593,6 +600,13 @@ impl Component for AttendantsComponent {
         let mut display_peers_vec = real_peers_vec.clone();
         display_peers_vec.extend(self.fake_peer_ids.iter().cloned());
 
+        // // ✅ Ensure host (the current user) appears in the peers list
+        let my_email = ctx.props().email.clone();
+        if !display_peers_vec.contains(&my_email) {
+            // Insert host at the beginning so they appear first in the grid
+            display_peers_vec.insert(0, my_email.clone() + " (You)");
+        }
+
         let num_display_peers = display_peers_vec.len();
         // Cap the number of peers used for styling at CANVAS_LIMIT
         let num_peers_for_styling = num_display_peers.min(CANVAS_LIMIT);
@@ -600,14 +614,32 @@ impl Component for AttendantsComponent {
         // Determine if the "Add Fake Peer" button should be disabled
         let add_fake_peer_disabled = num_display_peers >= CANVAS_LIMIT;
 
+        let on_encoder_settings_update = ctx.link().callback(WsAction::EncoderSettingsUpdated);
+
         let rows: Vec<Html> = display_peers_vec
             .iter()
             .take(CANVAS_LIMIT)
             .enumerate()
             .map(|(i, peer_id)| {
-                let full_bleed = display_peers_vec.len() == 1
-                    && !self.client.is_screen_share_enabled_for_peer(peer_id);
-                html!{ <PeerTile key={format!("tile-{}-{}", i, peer_id)} peer_id={peer_id.clone()} client={self.client.clone()} full_bleed={full_bleed} /> }
+                let is_host = peer_id == &(email.clone() + " (You)");
+                let full_bleed = (display_peers_vec.len() == 1
+                    && !self.client.is_screen_share_enabled_for_peer(peer_id))
+                    || num_display_peers == 1;
+                let on_toggle_change_name = if is_host {
+                    self.host_toggle_change_name.clone()
+                } else {
+                    None
+                };
+                html! {
+                    <PeerTile
+                        key={format!("tile-{}-{}", i, peer_id)}
+                        peer_id={peer_id.clone()}
+                        client={self.client.clone()}
+                        full_bleed={full_bleed}
+                        is_host={is_host}
+                        on_toggle_change_name={on_toggle_change_name}
+                    />
+                }
             })
             .collect();
 
@@ -617,8 +649,6 @@ impl Component for AttendantsComponent {
             num_peers_for_styling.max(1)
         );
 
-        let on_encoder_settings_update = ctx.link().callback(WsAction::EncoderSettingsUpdated);
-
         // Compute meeting link for invitation overlay
         let meeting_link = {
             let origin_result = window().location().origin();
@@ -777,6 +807,7 @@ impl Component for AttendantsComponent {
                                 <nav class="host">
                                     <div class="controls">
                                         <nav class="video-controls-container">
+                                            // Mic mute/unmute button
                                             <button
                                                 class={classes!("video-control-button", self.mic_enabled.then_some("active"))}
                                                 onclick={ctx.link().callback(|_| MeetingAction::ToggleMicMute)}>
@@ -807,6 +838,7 @@ impl Component for AttendantsComponent {
                                                     }
                                                 }
                                             </button>
+                                            // Video on/off button
                                             <button
                                                 class={classes!("video-control-button", self.video_enabled.then_some("active"))}
                                                 onclick={ctx.link().callback(|_| MeetingAction::ToggleVideoOnOff)}>
@@ -834,8 +866,7 @@ impl Component for AttendantsComponent {
                                                     }
                                                 }
                                             </button>
-
-                                            // Hide screen share button on Safari/iOS devices
+                                            // Screen share button (hide on Safari/iOS devices)
                                             {
                                                 if !is_ios() {
                                                     html! {
@@ -874,6 +905,7 @@ impl Component for AttendantsComponent {
                                                     html! {}
                                                 }
                                             }
+                                            // peer list button
                                             <button
                                                 class={classes!("video-control-button", self.peer_list_open.then_some("active"))}
                                                 onclick={toggle_peer_list.clone()}>
@@ -906,6 +938,7 @@ impl Component for AttendantsComponent {
                                                     }
                                                 }
                                             </button>
+                                            // diagnostics button
                                             <button
                                                 class={classes!("video-control-button", self.diagnostics_open.then_some("active"))}
                                                 onclick={toggle_diagnostics.clone()}>
@@ -932,6 +965,7 @@ impl Component for AttendantsComponent {
                                                     }
                                                 }
                                             </button>
+                                            // device settings button (mobile only)
                                             <button
                                                 class={classes!("video-control-button", "mobile-only-device-settings", self.device_settings_open.then_some("active"))}
                                                 onclick={ctx.link().callback(|_| UserScreenToggleAction::DeviceSettings)}>
@@ -959,6 +993,7 @@ impl Component for AttendantsComponent {
                                                     }
                                                 }
                                             </button>
+                                            // hang up button
                                             <button
                                                 class="video-control-button danger"
                                                 onclick={ctx.link().callback(|_| Msg::HangUp)}>
@@ -969,18 +1004,17 @@ impl Component for AttendantsComponent {
                                             </button>
                                             { self.view_grid_toggle(ctx) }
                                             { self.view_fake_peer_buttons(ctx, add_fake_peer_disabled) }
-
                                         </nav>
                                         { html!{} }
-                                                                {
-                            if let Some(message) = &self.simulation_info_message {
-                                html!{
-                                    <p class="simulation-info-message">{ message }</p>
-                                }
-                            } else {
-                                html!{}
-                            }
-                        }
+                                        {
+                                            if let Some(message) = &self.simulation_info_message {
+                                                html!{
+                                                    <p class="simulation-info-message">{ message }</p>
+                                                }
+                                            } else {
+                                                html!{}
+                                            }
+                                        }
                                     </div>
                                     {
                                         if let Some(err) = &self.mic_error {
@@ -1001,23 +1035,25 @@ impl Component for AttendantsComponent {
                                         } else { html!{} }
                                     }
                                     {
-                                         if media_access_granted {
-                                             html! {<Host
-                                                 client={self.client.clone()}
-                                                 share_screen={self.share_screen}
-                                                 mic_enabled={self.mic_enabled}
-                                                 video_enabled={self.video_enabled}
-                                                 on_encoder_settings_update={on_encoder_settings_update}
-                                                 device_settings_open={self.device_settings_open}
-                                                 on_device_settings_toggle={ctx.link().callback(|_| UserScreenToggleAction::DeviceSettings)}
-                                                 on_microphone_error={ctx.link().callback(Msg::OnMicrophoneError)}
-                                             />}
-                                         } else {
-                                             html! {<></>}
-                                         }
+                                        if media_access_granted {
+                                            html! {
+                                                <Host
+                                                    client={self.client.clone()}
+                                                    share_screen={self.share_screen}
+                                                    mic_enabled={self.mic_enabled}
+                                                    video_enabled={self.video_enabled}
+                                                    on_encoder_settings_update={on_encoder_settings_update}
+                                                    device_settings_open={self.device_settings_open}
+                                                    on_device_settings_toggle={ctx.link().callback(|_| UserScreenToggleAction::DeviceSettings)}
+                                                    on_microphone_error={ctx.link().callback(Msg::OnMicrophoneError)}
+                                                    register_toggle_change_name={ctx.link().callback(Msg::RegisterHostToggleName)}
+                                                />
+                                            }
+                                        } else {
+                                            html! {<></>}
+                                        }
                                     }
                                     <div class={classes!("connection-led", if self.client.is_connected() { "connected" } else { "connecting" })} title={if self.client.is_connected() { "Connected" } else { "Connecting" }}></div>
-
                                 </nav>
                             }
                         } else {
diff --git a/yew-ui/src/components/canvas_generator.rs b/yew-ui/src/components/canvas_generator.rs
index 857b64db..7c96f225 100644
--- a/yew-ui/src/components/canvas_generator.rs
+++ b/yew-ui/src/components/canvas_generator.rs
@@ -27,15 +27,19 @@ use web_sys::{window, CanvasRenderingContext2d, HtmlCanvasElement};
 use yew::prelude::*;
 use yew::{html, Html};
 
-/// Render a single peer tile. If `full_bleed` is true and the peer is not screen sharing,
-/// the video tile will occupy the full grid area.
-pub fn generate_for_peer(client: &VideoCallClient, key: &String, full_bleed: bool) -> Html {
+pub fn generate_canvas_tile(
+    client: &VideoCallClient,
+    key: &String,
+    full_bleed: bool,
+    is_host: bool,
+    on_toggle_change_name: Option<Callback<MouseEvent>>,
+) -> Html {
     let allowed = users_allowed_to_stream().unwrap_or_default();
     if !allowed.is_empty() && !allowed.iter().any(|host| host == key) {
         return html! {};
     }
 
-    let is_video_enabled_for_peer = client.is_video_enabled_for_peer(key);
+    let is_video_enabled_for_peer = client.is_video_enabled_for_peer(key) || is_host;
     let is_audio_enabled_for_peer = client.is_audio_enabled_for_peer(key);
     let is_screen_share_enabled_for_peer = client.is_screen_share_enabled_for_peer(key);
 
@@ -50,8 +54,35 @@ pub fn generate_for_peer(client: &VideoCallClient, key: &String, full_bleed: boo
                         move |_| { if is_mobile_viewport() { toggle_pinned_div(&div_id) } }
                     })}
                 >
-                    { if is_video_enabled_for_peer { html!{ <UserVideo id={key.clone()} hidden={false}/> } } else { html!{ <div class=""><div class="placeholder-content"><PeerIcon/><span class="placeholder-text">{"Camera Off"}</span></div></div> } } }
-                    <h4 class="floating-name" title={key.clone()} dir={"auto"}>{key.clone()}</h4>
+                    {
+                        if is_video_enabled_for_peer {
+                            if is_host {
+                                html!{ <video class="self-camera" autoplay=true id={"webcam"} playsinline={true} controls={false}></video> }
+                            } else {
+                                html!{ <UserVideo id={key.clone()} hidden={false}/> }
+                            }
+                        } else {
+                            html!{ <></> }
+                        }
+                    }
+                    {
+                        if is_host {
+                            if let Some(cb) = on_toggle_change_name.clone() {
+                                html! {
+                                    <div class="host-floating-header">
+                                        <h4 class="floating-name" title={key.clone()} dir={"auto"}>{key.clone()}</h4>
+                                        <button class="change-name-fab" title="Change name" onclick={cb}>
+                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>
+                                        </button>
+                                    </div>
+                                }
+                            } else {
+                                html! { <h4 class="floating-name" title={key.clone()} dir={"auto"}>{key.clone()}</h4> }
+                            }
+                        } else {
+                            html! { <h4 class="floating-name" title={key.clone()} dir={"auto"}>{key.clone()}</h4> }
+                        }
+                    }
                     <div class="audio-indicator"><MicIcon muted={!is_audio_enabled_for_peer}/></div>
                     <button onclick={Callback::from(move |_| { toggle_pinned_div(&(*peer_video_div_id).clone()); })} class="pin-icon"><PushPinIcon/></button>
                 </div>
@@ -95,14 +126,35 @@ pub fn generate_for_peer(client: &VideoCallClient, key: &String, full_bleed: boo
                     })}
                 >
                     if is_video_enabled_for_peer {
-                        <UserVideo id={key.clone()} hidden={false}></UserVideo>
+                        if is_host {
+                            <video class="self-camera" autoplay=true id={"webcam"} playsinline={true} controls={false}></video>
+                        } else {
+                            <UserVideo id={key.clone()} hidden={false}></UserVideo>
+                        }
                     } else {
                         <div class="placeholder-content">
                             <PeerIcon/>
                             <span class="placeholder-text">{"Video Disabled"}</span>
                         </div>
                     }
-                    <h4 class="floating-name" title={key.clone()} dir={"auto"}>{key.clone()}</h4>
+                    {
+                        if is_host {
+                            if let Some(cb) = on_toggle_change_name.clone() {
+                                html! {
+                                    <div class="host-floating-header">
+                                        <h4 class="floating-name" title={key.clone()} dir={"auto"}>{key.clone()}</h4>
+                                        <button class="change-name-fab" title="Change name" onclick={cb}>
+                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>
+                                        </button>
+                                    </div>
+                                }
+                            } else {
+                                html! { <h4 class="floating-name" title={key.clone()} dir={"auto"}>{key.clone()}</h4> }
+                            }
+                        } else {
+                            html! { <h4 class="floating-name" title={key.clone()} dir={"auto"}>{key.clone()}</h4> }
+                        }
+                    }
                     <div class="audio-indicator">
                         <MicIcon muted={!is_audio_enabled_for_peer}/>
                     </div>
diff --git a/yew-ui/src/components/host.rs b/yew-ui/src/components/host.rs
index 85b8eae5..64496df4 100644
--- a/yew-ui/src/components/host.rs
+++ b/yew-ui/src/components/host.rs
@@ -118,6 +118,9 @@ pub struct MeetingProps {
     /// The parent should disable the mic and optionally display an error.
     #[prop_or_default]
     pub on_microphone_error: Callback<String>,
+
+    #[prop_or_default]
+    pub register_toggle_change_name: Callback<Callback<MouseEvent>>,
 }
 
 impl Component for Host {
@@ -184,6 +187,11 @@ impl Component for Host {
         // Load devices
         media_devices.load();
 
+        ctx.props().register_toggle_change_name.emit(
+            ctx.link()
+                .callback(|_: MouseEvent| Msg::ToggleChangeNameModal),
+        );
+
         Self {
             camera,
             microphone,
@@ -465,36 +473,6 @@ impl Component for Host {
 
         html! {
             <>
-                {
-                    if ctx.props().video_enabled {
-                        html! {
-                            <div class="host-video-wrapper" style="position:relative;">
-                                <video class="self-camera" autoplay=true id={VIDEO_ELEMENT_ID} playsinline={true} controls={false}></video>
-                                <button class="change-name-fab" title="Change name"
-                                    onclick={ctx.link().callback(|_| Msg::ToggleChangeNameModal)}>
-                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>
-                                </button>
-                            </div>
-                        }
-                    } else {
-                        html! {
-                            <div class="" style="padding:1rem; display:flex; align-items:center; justify-content:center; border-radius: 1rem; position:relative;">
-                                <div class="placeholder-content">
-                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                        <path d="M16 16v1a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2m5.66 0H14a2 2 0 0 1 2 2v3.34l1 1L23 7v10"></path>
-                                        <line x1="1" y1="1" x2="23" y2="23"></line>
-                                    </svg>
-                                    <span class="placeholder-text">{"Camera Off"}</span>
-                                </div>
-                                <button class="change-name-fab" title="Change name"
-                                    onclick={ctx.link().callback(|_| Msg::ToggleChangeNameModal)}>
-                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>
-                                </button>
-                            </div>
-                        }
-                    }
-                }
-
                 // Device Settings Menu Button (positioned outside the host video)
                 <button
                     class="device-settings-menu-button btn-apple btn-secondary"
diff --git a/yew-ui/src/components/peer_list.rs b/yew-ui/src/components/peer_list.rs
index a8aa111b..e5fc6e1d 100644
--- a/yew-ui/src/components/peer_list.rs
+++ b/yew-ui/src/components/peer_list.rs
@@ -17,7 +17,6 @@
  */
 
 use crate::components::peer_list_item::PeerListItem;
-use crate::context::UsernameCtx;
 use web_sys::HtmlInputElement;
 use yew::prelude::*;
 use yew::{html, Component, Context};
@@ -73,14 +72,6 @@ impl Component for PeerList {
             PeerListMsg::UpdateSearchQuery(input.value())
         });
 
-        // Get username from context and append (You)
-        let display_name: String = ctx
-            .link()
-            .context::<UsernameCtx>(Callback::noop())
-            .and_then(|(state, _handle)| state.as_ref().cloned())
-            .map(|name| format!("{name} (You)"))
-            .unwrap_or_else(|| "(You)".to_string());
-
         html! {
             <>
                 <div class="sidebar-header">
@@ -101,9 +92,6 @@ impl Component for PeerList {
                         <h3>{ "In call" }</h3>
                         <div class="peer-list">
                             <ul>
-                                // show self as the first item with actual username
-                                <li><PeerListItem name={display_name.clone()} /></li>
-
                                 { for filtered_peers.iter().map(|peer|
                                     html!{
                                         <li><PeerListItem name={peer.clone()}/></li>
diff --git a/yew-ui/src/components/peer_tile.rs b/yew-ui/src/components/peer_tile.rs
index 089f25b5..6b683a89 100644
--- a/yew-ui/src/components/peer_tile.rs
+++ b/yew-ui/src/components/peer_tile.rs
@@ -16,7 +16,7 @@
  * conditions.
  */
 
-use crate::components::canvas_generator::generate_for_peer;
+use crate::components::canvas_generator::generate_canvas_tile;
 use futures::future::{AbortHandle, Abortable};
 use videocall_client::VideoCallClient;
 use videocall_diagnostics::{subscribe, DiagEvent, MetricValue};
@@ -29,6 +29,9 @@ pub struct PeerTileProps {
     /// True when layout has only this peer and no screen share; affects styling
     #[prop_or(false)]
     pub full_bleed: bool,
+    pub is_host: bool,
+    #[prop_or_default]
+    pub on_toggle_change_name: Option<Callback<MouseEvent>>,
 }
 
 pub enum Msg {
@@ -138,11 +141,19 @@ impl Component for PeerTile {
     }
 
     fn view(&self, ctx: &Context<Self>) -> Html {
+        log::info!(
+            "YEW-UI: Rendering Peer Tile: {} {}",
+            &ctx.props().peer_id,
+            if ctx.props().is_host { "(host)" } else { "" }
+        );
+
         // Delegate rendering to the existing canvas generator so DOM structure and CSS remain consistent
-        generate_for_peer(
+        generate_canvas_tile(
             &ctx.props().client,
             &ctx.props().peer_id,
             ctx.props().full_bleed,
+            ctx.props().is_host,
+            ctx.props().on_toggle_change_name.clone(),
         )
     }
 
diff --git a/yew-ui/static/global.css b/yew-ui/static/global.css
index aba3c09c..c9f424c4 100644
--- a/yew-ui/static/global.css
+++ b/yew-ui/static/global.css
@@ -14,20 +14,20 @@
   position: absolute;
   top: 12px;
   left: 12px;
-  width: 36px;
-  height: 36px;
+  width: 30px;
+  height: 30px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 9999px;
   background: rgba(28,28,30,0.9);
-  border: 1px solid #48484A;
+  /* border: 1px solid #48484A; */
   color: #FFFFFF;
-  box-shadow: 0 8px 20px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
+  /* box-shadow: 0 8px 20px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05); */
   z-index: 10;
 }
 .change-name-fab:hover { background:#2C2C2E; }
-.change-name-fab svg { width: 18px; height: 18px; }
+.change-name-fab svg { width: 20px; height: 20px; }
 .top-bar a img { filter: grayscale(20%); opacity: 0.9; }
 .top-bar .w-8 svg { opacity: 0.9; }
 /* Full-bleed single peer tile */
diff --git a/yew-ui/static/style.css b/yew-ui/static/style.css
index 73985325..bc107bc5 100644
--- a/yew-ui/static/style.css
+++ b/yew-ui/static/style.css
@@ -490,7 +490,7 @@ canvas {
   min-width: 150px; /* Min width to ensure it's usable, increased to accommodate selectors */
   /* height: auto; */ /* Let content dictate height with flex */
   /* aspect-ratio: 16/9; */ /* Aspect ratio might be tricky with added selectors, manage via video element */
-  border: 2px solid #444;
+  /* border: 2px solid #444; */
   border-radius: 8px;
   /* overflow: hidden; */ /* Remove to prevent clipping, flexbox will manage layout */
   z-index: 10; /* Make sure it's above the grid items if any overlap occurs */
@@ -552,6 +552,37 @@ canvas {
   background-color: rgba(0, 0, 0, 0.44);
 }
 
+.host-floating-header {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  right: 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  max-width: calc(100% - 24px);
+  z-index: 2;
+}
+
+.host-floating-header .floating-name {
+  position: static;
+  top: auto;
+  left: auto;
+  margin: 0;
+  flex: 0 0 auto;
+  min-width: auto;
+  max-width: none;
+  overflow: visible;
+  text-overflow: initial;
+}
+
+.host-floating-header .change-name-fab {
+  position: static;
+  top: auto;
+  left: auto;
+  flex: 0 0 auto;
+}
+
 /* Speaker/full-bleed view: already top-left */
 .grid-item.full-bleed .floating-name { top: 12px; }
 
@@ -599,7 +630,7 @@ canvas {
   background-color: rgba(30, 30, 30, 0.85); /* Darker, slightly transparent background for the selectors area */
   flex-shrink: 0; /* ADDED: Prevent this container from shrinking */
   border-top: 1px solid #444; /* Separator line if video is above */
-  border-radius: 0 0 6px 6px; /* Rounded bottom corners */
+  border-radius: 6px;
 }
 
 .device-selector-wrapper label {
@@ -1408,4 +1439,3 @@ select {
     right: 6px;
   }
 }
-