diff --git a/Cargo.toml b/Cargo.toml
index a9a5a24a..d0007bce 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -32,8 +32,12 @@ bevy = { git = "https://github.com/bevyengine/bevy.git", rev = "a3d406dd49720525
 ] }
 bevy_derive = { git = "https://github.com/bevyengine/bevy.git", rev = "a3d406dd497205253e34ace757ab0076d50eec14" }
 bevy_macro_utils = { git = "https://github.com/bevyengine/bevy.git", rev = "a3d406dd497205253e34ace757ab0076d50eec14" }
+bevy_remote = { git = "https://github.com/bevyengine/bevy.git", rev = "a3d406dd497205253e34ace757ab0076d50eec14" }
+
 thiserror = "2.0"
 serde = { version = "1", features = ["derive"] }
+serde_json = "1.0.140"
+ureq = {version = "3.0.12", features = ["json"]}
 tracing-test = "0.2.5"
 tracing = "0.1.41"
 atomicow = "1.1.0"
@@ -64,6 +68,8 @@ bevy_toolbar = { path = "bevy_widgets/bevy_toolbar" }
 bevy_tooltips = { path = "bevy_widgets/bevy_tooltips" }
 bevy_text_editing = { path = "bevy_widgets/bevy_text_editing" }
 bevy_field_forms = { path = "bevy_widgets/bevy_field_forms" }
+bevy_focus = { path = "bevy_widgets/bevy_focus" }
+bevy_transform = { path = "bevy_widgets/bevy_transform" }
 
 # general crates
 bevy_editor_core = { path = "crates/bevy_editor_core" }
diff --git a/crates/bevy_editor/Cargo.toml b/crates/bevy_editor/Cargo.toml
index b4f863e6..2ae159c1 100644
--- a/crates/bevy_editor/Cargo.toml
+++ b/crates/bevy_editor/Cargo.toml
@@ -10,6 +10,7 @@ bevy_menu_bar.workspace = true
 bevy_footer_bar.workspace = true
 bevy_context_menu.workspace = true
 bevy_editor_styles.workspace = true
+bevy_remote.workspace = true
 
 serde.workspace = true
 ron.workspace = true
diff --git a/crates/bevy_editor/src/lib.rs b/crates/bevy_editor/src/lib.rs
index 63f8970c..6fdd01b7 100644
--- a/crates/bevy_editor/src/lib.rs
+++ b/crates/bevy_editor/src/lib.rs
@@ -11,7 +11,11 @@
 //!   which transforms the user's application into an editor that runs their game.
 //! - Finally, it will be a standalone application that communicates with a running Bevy game via the Bevy Remote Protocol.
 
+use std::env;
+
 use bevy::app::App as BevyApp;
+use bevy::color::palettes::tailwind;
+use bevy::math::ops::cos;
 use bevy::prelude::*;
 // Re-export Bevy for project use
 pub use bevy;
@@ -24,6 +28,8 @@ use bevy_editor_styles::StylesPlugin;
 use bevy_2d_viewport::Viewport2dPanePlugin;
 use bevy_3d_viewport::Viewport3dPanePlugin;
 use bevy_asset_browser::AssetBrowserPanePlugin;
+use bevy_remote::http::RemoteHttpPlugin;
+use bevy_remote::RemotePlugin;
 
 use crate::load_gltf::LoadGltfPlugin;
 
@@ -48,18 +54,25 @@ impl Plugin for EditorPlugin {
         // Update/register this project to the editor project list
         project::update_project_info();
         info!("Loading Bevy Editor");
+
         bevy_app
             .add_plugins((
+                RemotePlugin::default(),
+                RemoteHttpPlugin::default(),
                 EditorCorePlugin,
                 ContextMenuPlugin,
                 StylesPlugin,
                 Viewport2dPanePlugin,
                 Viewport3dPanePlugin,
                 ui::EditorUIPlugin,
-                AssetBrowserPanePlugin,
                 LoadGltfPlugin,
+                AssetBrowserPanePlugin,
             ))
-            .add_systems(Startup, dummy_setup);
+            .add_systems(Startup, setup)
+            .add_systems(Update, move_cube)
+            .register_type::<Cube>()
+            .register_type::<MyObject>()
+            .register_type::<MoveSpeed>();
     }
 }
 
@@ -76,7 +89,7 @@ impl App {
 
     /// Run the application
     pub fn run(&self) -> AppExit {
-        let args = std::env::args().collect::<Vec<String>>();
+        let args = env::args().collect::<Vec<String>>();
         let editor_mode = !args.iter().any(|arg| arg == "-game");
 
         let mut bevy_app = BevyApp::new();
@@ -85,35 +98,100 @@ impl App {
             bevy_app.add_plugins(EditorPlugin);
         }
 
+        info!(
+            "Running bevy editor in {} mode",
+            if editor_mode { "editor" } else { "game" }
+        );
         bevy_app.run()
     }
 }
 
-/// This is temporary, until we can load maps from the asset browser
-fn dummy_setup(
+#[derive(Component, Reflect)]
+#[reflect(Component)]
+struct Cube(f32);
+
+#[derive(Component, Reflect)]
+#[reflect(Component)]
+struct MyObject {
+    vec3: Vec3,
+    color: Color,
+}
+
+#[derive(Resource, Reflect)]
+#[reflect(Resource)]
+struct MoveSpeed {
+    value: f32,
+}
+
+fn setup(
     mut commands: Commands,
     mut meshes: ResMut<Assets<Mesh>>,
-    mut materials_2d: ResMut<Assets<ColorMaterial>>,
-    mut materials_3d: ResMut<Assets<StandardMaterial>>,
+    mut materials: ResMut<Assets<StandardMaterial>>,
 ) {
+    // unnamed object
+    commands.spawn((
+        Name::new("MyObject1"),
+        MyObject {
+            vec3: Vec3::new(1.0, 2.0, 3.0),
+            color: Color::from(tailwind::BLUE_500),
+        },
+    ));
+
+    // cube
+    let cube_handle = meshes.add(Cuboid::new(1.0, 1.0, 1.0));
     commands.spawn((
-        Mesh2d(meshes.add(Circle::new(50.0))),
-        MeshMaterial2d(materials_2d.add(Color::WHITE)),
-        Name::new("Circle"),
+        Name::new("Cube"),
+        Mesh3d(cube_handle.clone()),
+        MeshMaterial3d(materials.add(Color::from(tailwind::RED_200))),
+        Transform::from_xyz(0.0, 0.5, 0.0),
+        Cube(1.0),
+        children![(
+            Name::new("Sub-cube"),
+            Mesh3d(cube_handle.clone()),
+            MeshMaterial3d(materials.add(Color::from(tailwind::GREEN_500))),
+            Transform::from_xyz(0.0, 1.5, 0.0),
+            children![(
+                Name::new("Sub-sub-cube"),
+                Mesh3d(cube_handle),
+                MeshMaterial3d(materials.add(Color::from(tailwind::BLUE_800))),
+                Transform::from_xyz(1.5, 0.0, 0.0),
+            )]
+        )],
     ));
 
+    // circular base
     commands.spawn((
-        Mesh3d(meshes.add(Plane3d::new(Vec3::Y, Vec2::splat(1.5)))),
-        MeshMaterial3d(materials_3d.add(Color::WHITE)),
-        Name::new("Plane"),
+        Name::new("Circular base"),
+        Mesh3d(meshes.add(Circle::new(4.0))),
+        MeshMaterial3d(materials.add(Color::from(tailwind::GREEN_300))),
+        Transform::from_rotation(Quat::from_rotation_x(-std::f32::consts::FRAC_PI_2)),
     ));
 
+    // light
     commands.spawn((
-        DirectionalLight {
+        Name::new("Light"),
+        PointLight {
             shadows_enabled: true,
             ..default()
         },
-        Transform::default().looking_to(Vec3::NEG_ONE, Vec3::Y),
-        Name::new("DirectionalLight"),
+        Transform::from_xyz(4.0, 8.0, 4.0),
+    ));
+
+    // camera
+    commands.spawn((
+        Name::new("Camera"),
+        Camera3d::default(),
+        Transform::from_xyz(-2.5, 4.5, 9.0).looking_at(Vec3::Y, Vec3::Y),
     ));
 }
+
+fn move_cube(
+    mut query: Query<&mut Transform, With<Cube>>,
+    time: Res<Time>,
+    move_speed_res: Option<Res<MoveSpeed>>,
+) {
+    let move_speed = move_speed_res.map(|res| res.value).unwrap_or(1.0);
+    for mut transform in &mut query {
+        transform.translation.y = -cos(time.elapsed_secs() * move_speed) + 1.5;
+    }
+}
diff --git a/crates/bevy_editor_cam/Cargo.toml b/crates/bevy_editor_cam/Cargo.toml
index 5af0b71e..de8287a3 100644
--- a/crates/bevy_editor_cam/Cargo.toml
+++ b/crates/bevy_editor_cam/Cargo.toml
@@ -17,7 +17,7 @@ bevy.workspace = true
 bevy_derive.workspace = true
 
 [dev-dependencies]
-bevy = { workspace = true, features = ["jpeg", "ktx2", "zstd"] }
+bevy = { workspace = true, features = ["jpeg", "ktx2"] }
 rand = "0.8"
 
 [lints]
diff --git a/crates/bevy_editor_launcher/Cargo.toml b/crates/bevy_editor_launcher/Cargo.toml
index 34f81166..91eb904b 100644
--- a/crates/bevy_editor_launcher/Cargo.toml
+++ b/crates/bevy_editor_launcher/Cargo.toml
@@ -12,7 +12,9 @@ bevy_editor.workspace = true
 bevy_scroll_box.workspace = true
 bevy_footer_bar.workspace = true
 bevy_editor_styles.workspace = true
+bevy_remote.workspace = true
 
 rfd.workspace = true
 serde.workspace = true
 ron.workspace = true
+serde_json.workspace = true
diff --git a/crates/bevy_entity_inspector/Cargo.toml b/crates/bevy_entity_inspector/Cargo.toml
new file mode 100644
index 00000000..6b4c6676
--- /dev/null
+++ b/crates/bevy_entity_inspector/Cargo.toml
@@ -0,0 +1,30 @@
+[package]
+name = "bevy_entity_inspector"
+version = "0.1.0"
+edition = "2021"
+description = "A modular entity inspector for Bevy with reflection support"
+authors = ["Joe Buehler"]
+license = "MIT OR Apache-2.0"
+keywords = ["bevy", "inspector", "editor", "reflection", "ui", "debug"]
+categories = ["game-development", "gui"]
+
+[features]
+default = ["remote"]
+remote = ["dep:bevy_remote", "dep:serde", "dep:serde_json", "dep:ureq"]
+
+[dependencies]
+bevy = { git = "https://github.com/bevyengine/bevy.git", branch = "main", features = ["wayland", "serialize"] }
+
+# Optional remote functionality dependencies
+bevy_remote = { git = "https://github.com/bevyengine/bevy.git", branch = "main", optional = true }
+serde = { workspace = true, optional = true }
+serde_json = { workspace = true, optional = true }
+ureq = { workspace = true, optional = true }
+
+[lints]
+workspace = true
+
+[[example]]
+name = "cube_server"
+path = "examples/cube_server.rs"
+required-features = ["remote"]
diff --git a/crates/bevy_entity_inspector/examples/cube_server.rs b/crates/bevy_entity_inspector/examples/cube_server.rs
new file mode 100644
index 00000000..79b91abe
--- /dev/null
+++ b/crates/bevy_entity_inspector/examples/cube_server.rs
@@ -0,0 +1,88 @@
+//! A Bevy app that you can connect to with the BRP and edit.
+
+use bevy::math::ops::cos;
+use bevy::{input::common_conditions::input_just_pressed, prelude::*};
+use bevy_remote::http::RemoteHttpPlugin;
+use bevy_remote::RemotePlugin;
+use serde::{Deserialize, Serialize};
+
+fn main() {
+    App::new()
+        .add_plugins(DefaultPlugins)
+        .add_plugins(RemotePlugin::default())
+        .add_plugins(RemoteHttpPlugin::default())
+        .add_systems(Startup, setup)
+        .add_systems(Update, remove.run_if(input_just_pressed(KeyCode::Space)))
+        .add_systems(Update, move_cube)
+        // New types must be registered in order to be usable with reflection.
+        .register_type::<Cube>()
+        .register_type::<TestResource>()
+        .run();
+}
+
+fn setup(
+    mut commands: Commands,
+    mut meshes: ResMut<Assets<Mesh>>,
+    mut materials: ResMut<Assets<StandardMaterial>>,
+) {
+    // circular base
+    commands.spawn((
+        Mesh3d(meshes.add(Circle::new(4.0))),
+        MeshMaterial3d(materials.add(Color::WHITE)),
+        Transform::from_rotation(Quat::from_rotation_x(-std::f32::consts::FRAC_PI_2)),
+    ));
+
+    // cube
+    commands.spawn((
+        Mesh3d(meshes.add(Cuboid::new(1.0, 1.0, 1.0))),
+        MeshMaterial3d(materials.add(Color::srgb_u8(124, 144, 255))),
+        Transform::from_xyz(0.0, 0.5, 0.0),
+        Cube(1.0),
+    ));
+
+    // test resource
+    commands.insert_resource(TestResource {
+        foo: Vec2::new(1.0, -1.0),
+        bar: false,
+    });
+
+    // light
+    commands.spawn((
+        PointLight {
+            shadows_enabled: true,
+            ..default()
+        },
+        Transform::from_xyz(4.0, 8.0, 4.0),
+    ));
+
+    // camera
+    commands.spawn((
+        Camera3d::default(),
+        Transform::from_xyz(-2.5, 4.5, 9.0).looking_at(Vec3::ZERO, Vec3::Y),
+    ));
+}
+
+/// An arbitrary resource that can be inspected and manipulated with remote methods.
+#[derive(Resource, Reflect, Serialize, Deserialize)]
+#[reflect(Resource, Serialize, Deserialize)]
+pub struct TestResource {
+    /// An arbitrary field of the test resource.
+    pub foo: Vec2,
+
+    /// Another arbitrary field.
+    pub bar: bool,
+}
+
+fn move_cube(mut query: Query<&mut Transform, With<Cube>>, time: Res<Time>) {
+    for mut transform in &mut query {
+        transform.translation.y = -cos(time.elapsed_secs()) + 1.5;
+    }
+}
+
+fn remove(mut commands: Commands, cube_entity: Single<Entity, With<Cube>>) {
+    commands.entity(*cube_entity).remove::<Cube>();
+}
+
+#[derive(Component, Reflect, Serialize, Deserialize)]
+#[reflect(Component, Serialize, Deserialize)]
+struct Cube(f32);
diff --git a/crates/bevy_entity_inspector/examples/inspector.rs b/crates/bevy_entity_inspector/examples/inspector.rs
new file mode 100644
index 00000000..e0384ead
--- /dev/null
+++ b/crates/bevy_entity_inspector/examples/inspector.rs
@@ -0,0 +1,30 @@
+//! A Bevy app that demonstrates the Entity Inspector plugin.
+//!
+//! This example shows how to use the [`InspectorPlugin`] with modular data sources.
+//! The inspector can be configured to use different data sources:
+//! - Remote mode: Connect to a remote Bevy application via [`bevy_remote`](https://docs.rs/bevy_remote/latest/bevy_remote/)
+//! - Scene files: Load and inspect scene data
+//! - BSN: Load and inspect BSN (Bevy Scene Notation) files
+//!
+//! To run this example:
+//! - With remote data source: `cargo run --example inspector --features remote`
+//! - Basic inspector (empty until data source is configured): `cargo run --example inspector`
+//!
+//! For remote mode, first start the `cube_server` example:
+//! `cargo run --example cube_server --features remote`
+//!
+//! # Related Documentation
+//!
+//! - [`bevy_entity_inspector::InspectorPlugin`] - Main plugin for the inspector
+//! - [`bevy_entity_inspector::create_dark_inspector_theme`] - Dark theme configuration
+
+use bevy::prelude::*;
+use bevy_entity_inspector::{create_dark_inspector_theme, InspectorPlugin};
+
+fn main() {
+    App::new()
+        .add_plugins(DefaultPlugins)
+        .add_plugins(InspectorPlugin)
+        .insert_resource(create_dark_inspector_theme())
+        .run();
+}
diff --git a/crates/bevy_entity_inspector/examples/property_panel_test.rs b/crates/bevy_entity_inspector/examples/property_panel_test.rs
new file mode 100644
index 00000000..b39e04ff
--- /dev/null
+++ b/crates/bevy_entity_inspector/examples/property_panel_test.rs
@@ -0,0 +1,95 @@
+//! Test example for the property panel integration.
+//!
+//! This example demonstrates the property panel functionality by creating entities
+//! with various reflected components and showing how they appear in the inspector.
+//! The property panel displays detailed component information when entities or
+//! components are selected in the tree view.
+//!
+//! # Features Demonstrated
+//!
+//! - Component reflection using [`bevy::reflect::Reflect`]
+//! - Property panel integration with [`bevy_entity_inspector::InspectorPlugin`]
+//! - Dark theme customization with [`bevy_entity_inspector::create_dark_inspector_theme`]
+//! - Multiple component types on a single entity
+//!
+//! # Related Documentation
+//!
+//! - [Bevy Reflection Guide](https://docs.rs/bevy/latest/bevy/reflect/index.html) - How to make components reflectable
+//! - [`bevy_entity_inspector::ui::property_panel`] - Property panel implementation
+
+use bevy::prelude::*;
+use bevy_entity_inspector::{create_dark_inspector_theme, InspectorPlugin};
+
+#[derive(Component, Reflect)]
+#[reflect(Component)]
+struct Position {
+    x: f32,
+    y: f32,
+    z: f32,
+}
+
+#[derive(Component, Reflect)]
+#[reflect(Component)]
+struct Velocity {
+    dx: f32,
+    dy: f32,
+}
+
+#[derive(Component, Reflect)]
+#[reflect(Component)]
+struct Health {
+    current: u32,
+    max: u32,
+}
+
+fn main() {
+    App::new()
+        .add_plugins(DefaultPlugins)
+        .add_plugins(InspectorPlugin)
+        .insert_resource(create_dark_inspector_theme())
+        .register_type::<Position>()
+        .register_type::<Velocity>()
+        .register_type::<Health>()
+        .add_systems(Startup, setup_test_entities)
+        .run();
+}
+
+fn setup_test_entities(mut commands: Commands) {
+    // Create some test entities with components
+    commands.spawn((
+        Name::new("Player"),
+        Position {
+            x: 1.0,
+            y: 2.0,
+            z: 3.0,
+        },
+        Velocity { dx: 0.5, dy: -0.2 },
+        Health {
+            current: 80,
+            max: 100,
+        },
+    ));
+
+    commands.spawn((
+        Name::new("Enemy"),
+        Position {
+            x: -5.0,
+            y: 0.0,
+            z: 2.0,
+        },
+        Velocity { dx: -1.0, dy: 0.0 },
+        Health {
+            current: 45,
+            max: 60,
+        },
+    ));
+
+    commands.spawn((
+        Name::new("Static Object"),
+        Position {
+            x: 0.0,
+            y: 10.0,
+            z: 0.0,
+        },
+    ));
+}
diff --git a/crates/bevy_entity_inspector/src/events.rs b/crates/bevy_entity_inspector/src/events.rs
new file mode 100644
index 00000000..3b0f9fec
--- /dev/null
+++ b/crates/bevy_entity_inspector/src/events.rs
@@ -0,0 +1,325 @@
+//! Events and core data structures for the entity inspector.
+//!
+//! This module contains the event system that drives the inspector's updates,
+//! as well as the core data structures for representing entity data.
+//!
+//! # Related Documentation
+//!
+//! - [Bevy Events](https://docs.rs/bevy/latest/bevy/ecs/event/index.html) - Core event system used by this inspector
+//! - [Bevy Reflection](https://docs.rs/bevy/latest/bevy/reflect/index.html) - Reflection system for component introspection
+//! - [`InspectorEvent`] - Main event enum for inspector state changes
+//! - [`EntityInspectorRows`] - Central data store with change tracking
+
+use bevy::ecs::event::BufferedEvent;
+use bevy::platform::collections::HashMap;
+use bevy::prelude::*;
+
+/// Events for entity inspector updates.
+///
+/// This event system provides granular change detection and enables efficient UI updates.
+/// Instead of polling or hash-based detection, the inspector emits specific events when
+/// entities or components change, allowing the UI to update only what's necessary.
+///
+/// For more details on Bevy's event system, see the [Events Guide](https://docs.rs/bevy/latest/bevy/ecs/event/index.html).
+///
+/// # Design: Single Enum vs Multiple Event Types
+///
+/// This is designed as a single enum rather than multiple distinct event types for several reasons:
+/// - **Serde compatibility**: A single enum serializes more cleanly for remote inspection
+/// - **Discoverability**: All related events are grouped together in one place
+/// - **Shared handling**: All variants currently trigger UI rebuilds, so they can be processed uniformly
+/// - **Future extensibility**: Easy to add new event types while maintaining backward compatibility
+/// - **Type safety**: Ensures all inspector events go through the same processing pipeline
+///
+/// # Event Types
+///
+/// - **Entity Events**: `EntityAdded`, `EntityRemoved`, `EntityUpdated` - Fired when entities are created, destroyed, or modified
+/// - **Component Events**: `ComponentAdded`, `ComponentRemoved`, `ComponentUpdated` - Fired for individual component changes
+/// - **System Events**: `FullRefresh` - Forces a complete UI rebuild
+///
+/// # Usage
+///
+/// These events are typically emitted by data source plugins (like the remote inspection plugin)
+/// and consumed by the main event handler (see [`crate::ui_systems::handle_inspector_events`]) to update the tree UI.
+#[derive(Event, BufferedEvent, Debug, Clone)]
+pub enum InspectorEvent {
+    /// Entity was added to the inspector.
+    ///
+    /// Triggers a full tree rebuild since the entity hierarchy may have changed.
+    EntityAdded(Entity),
+
+    /// Entity was removed from the inspector.
+    ///
+    /// Triggers a full tree rebuild since the entity hierarchy may have changed.
+    EntityRemoved(Entity),
+
+    /// Entity's components were updated.
+    ///
+    /// Allows for more targeted updates in the future, currently triggers a full rebuild.
+    EntityUpdated(Entity),
+
+    /// Component was added to an entity.
+    ///
+    /// Currently triggers an entity update, but could be used for more granular updates.
+    ComponentAdded(Entity, String),
+
+    /// Component was removed from an entity.
+    ///
+    /// Currently triggers an entity update, but could be used for more granular updates.
+    ComponentRemoved(Entity, String),
+
+    /// Component's data was updated.
+    ///
+    /// Currently triggers an entity update, but could be used for more granular updates.
+    ComponentUpdated(Entity, String),
+
+    /// Full refresh requested.
+    ///
+    /// Forces a complete rebuild of the entire tree, useful for initialization or error recovery.
+    FullRefresh,
+}
+
+/// Data types that can be displayed in the inspector tree
+#[derive(Clone, Debug)]
+pub enum InspectorNodeData {
+    /// An entity node
+    Entity(Entity),
+    /// A component node
+    Component(String),
+    /// A field node with name and value
+    Field(String, String),
+    /// An array/list item node with name and index
+    Array(String, usize),
+}
+
+/// A single entity's inspection data.
+///
+/// Contains all the information needed to display an entity in the inspector tree,
+/// including its display name, reflected component data, and change detection hash.
+///
+/// This structure leverages Bevy's [reflection system](https://docs.rs/bevy/latest/bevy/reflect/index.html)
+/// to store component data in a format that can be displayed in the UI without knowing
+/// the specific component types at compile time.
+///
+/// # Fields
+///
+/// - `name`: Display name for the entity (extracted from [`Name`](https://docs.rs/bevy/latest/bevy/core/struct.Name.html) component if available)
+/// - `components`: Map of component type names to their reflected data using [`PartialReflect`](https://docs.rs/bevy/latest/bevy/reflect/trait.PartialReflect.html)
+/// - `data_hash`: Optional hash of raw component data for efficient change detection
+///
+/// # Change Detection
+///
+/// The `data_hash` field enables efficient change detection for remote inspection.
+/// When component data is received from a remote source, a hash is calculated from
+/// the raw JSON data. This allows the system to quickly determine if an entity
+/// has changed without expensive deep comparisons of reflected data.
+#[derive(Debug)]
+pub struct EntityInspectorRow {
+    /// The display name of the entity.
+    ///
+    /// Extracted from the entity's `Name` component if available,
+    /// otherwise defaults to "Entity {id}".
+    pub name: String,
+
+    /// The reflected components of the entity.
+    ///
+    /// Maps component type names (in format "`crate::Type`") to their
+    /// reflected data using Bevy's [`PartialReflect`](https://docs.rs/bevy/latest/bevy/reflect/trait.PartialReflect.html) trait.
+    /// Components without [`ReflectDeserialize`](https://docs.rs/bevy/latest/bevy/reflect/serde/trait.ReflectDeserialize.html) support
+    /// are stored as placeholder [`DynamicStruct`](https://docs.rs/bevy/latest/bevy/reflect/struct.DynamicStruct.html) instances.
+    pub components: HashMap<String, Box<dyn PartialReflect>>,
+
+    /// Hash of the raw component data for change detection.
+    ///
+    /// Used primarily for remote inspection to efficiently detect
+    /// when entity data has changed between polling cycles.
+    /// Local inspection may leave this as `None`.
+    pub data_hash: Option<u64>,
+}
+
+impl Default for EntityInspectorRow {
+    fn default() -> Self {
+        Self {
+            name: String::new(),
+            components: HashMap::new(),
+            data_hash: None,
+        }
+    }
+}
+
+/// Collection of all entity inspection data with change tracking.
+///
+/// This resource serves as the central data store for the entity inspector,
+/// maintaining both the current state of all inspected entities and tracking
+/// what has changed since the last update cycle.
+///
+/// # Change Tracking
+///
+/// The struct maintains separate vectors for entities that have been added,
+/// removed, or updated. This enables the event system to emit only the
+/// necessary events and allows the UI to perform targeted updates.
+///
+/// # Usage Pattern
+///
+/// 1. Data sources (local queries, remote polling) call `update_rows()` with new data
+/// 2. The method automatically detects changes and populates the change tracking vectors
+/// 3. Event emitters check `has_changes()` and emit appropriate `InspectorEvent`s
+/// 4. After events are emitted, `clear_changes()` resets the tracking state
+///
+/// # Performance
+///
+/// Change detection uses efficient hash-based comparison for remote data,
+/// and simple `HashMap` key comparison for local data. The system is designed
+/// to scale well with large numbers of entities.
+#[derive(Resource, Debug)]
+pub struct EntityInspectorRows {
+    /// Map of entity to its inspection data.
+    ///
+    /// Contains the current state of all entities being inspected.
+    /// The key is the Bevy `Entity` and the value contains all
+    /// displayable information about that entity.
+    pub rows: HashMap<Entity, EntityInspectorRow>,
+
+    /// Last known entity count for change detection.
+    ///
+    /// Used as a quick check to determine if the entity set
+    /// has changed size, which can help optimize change detection.
+    pub last_entity_count: usize,
+
+    /// Entities that were added since last check.
+    ///
+    /// Populated by `update_rows()` and consumed by event emitters.
+    /// Cleared by `clear_changes()`.
+    pub added_entities: Vec<Entity>,
+
+    /// Entities that were removed since last check.
+    ///
+    /// Populated by `update_rows()` and consumed by event emitters.
+    /// Cleared by `clear_changes()`.
+    pub removed_entities: Vec<Entity>,
+
+    /// Entities that were updated since last check.
+    ///
+    /// Populated by `update_rows()` and consumed by event emitters.
+    /// Cleared by `clear_changes()`.
+    pub updated_entities: Vec<Entity>,
+}
+
+impl Default for EntityInspectorRows {
+    fn default() -> Self {
+        Self {
+            rows: HashMap::new(),
+            last_entity_count: 0,
+            added_entities: Vec::new(),
+            removed_entities: Vec::new(),
+            updated_entities: Vec::new(),
+        }
+    }
+}
+
+impl EntityInspectorRows {
+    /// Updates the entity data and automatically tracks changes.
+    ///
+    /// This method performs a comprehensive diff between the current entity data
+    /// and the provided new data, populating the change tracking vectors with
+    /// entities that have been added, removed, or modified.
+    ///
+    /// # Arguments
+    ///
+    /// * `new_rows` - The updated entity data to replace the current data
+    ///
+    /// # Change Detection Logic
+    ///
+    /// - **Added**: Entities in `new_rows` but not in current `rows`
+    /// - **Removed**: Entities in current `rows` but not in `new_rows`
+    /// - **Updated**: Entities present in both with different data (component count, names, or hash)
+    /// - **Initial Population**: If current `rows` is empty and `new_rows` is not, all entities are marked as added
+    ///
+    /// # Performance
+    ///
+    /// The method uses hash comparison when available (for remote data) or falls back
+    /// to component name comparison. This provides efficient change detection even
+    /// with large numbers of entities.
+    pub fn update_rows(&mut self, new_rows: HashMap<Entity, EntityInspectorRow>) {
+        // Special case: if we're going from empty to non-empty, consider all entities as added
+        let is_initial_population = self.rows.is_empty() && !new_rows.is_empty();
+
+        if is_initial_population {
+            // Mark all entities as added for initial population
+            for entity in new_rows.keys() {
+                self.added_entities.push(*entity);
+            }
+        } else {
+            // Find added entities
+            for entity in new_rows.keys() {
+                if !self.rows.contains_key(entity) {
+                    self.added_entities.push(*entity);
+                }
+            }
+        }
+
+        // Find removed entities
+        for entity in self.rows.keys() {
+            if !new_rows.contains_key(entity) {
+                self.removed_entities.push(*entity);
+            }
+        }
+
+        // Find updated entities (entities that exist in both but have different data)
+        for (entity, new_row) in &new_rows {
+            if let Some(old_row) = self.rows.get(entity) {
+                // Compare component counts as a quick check
+                if old_row.components.len() != new_row.components.len()
+                    || old_row.name != new_row.name
+                {
+                    self.updated_entities.push(*entity);
+                } else if let (Some(old_hash), Some(new_hash)) =
+                    (old_row.data_hash, new_row.data_hash)
+                {
+                    // If we have hashes, use them for comparison
+                    if old_hash != new_hash {
+                        self.updated_entities.push(*entity);
+                    }
+                } else {
+                    // Check if component names changed
+                    let old_comp_names: std::collections::HashSet<_> =
+                        old_row.components.keys().collect();
+                    let new_comp_names: std::collections::HashSet<_> =
+                        new_row.components.keys().collect();
+                    if old_comp_names != new_comp_names {
+                        self.updated_entities.push(*entity);
+                    }
+                }
+            }
+        }
+
+        self.rows = new_rows;
+        self.last_entity_count = self.rows.len();
+    }
+
+    /// Clears all change tracking data.
+    ///
+    /// Should be called after processing change events to reset the tracking
+    /// state for the next update cycle. This prevents the same changes from
+    /// being reported multiple times.
+    pub fn clear_changes(&mut self) {
+        self.added_entities.clear();
+        self.removed_entities.clear();
+        self.updated_entities.clear();
+    }
+
+    /// Checks if there are any tracked changes.
+    ///
+    /// Returns `true` if any entities have been added, removed, or updated
+    /// since the last call to `clear_changes()`. This is used by event
+    /// emitters to determine whether to emit change events.
+    ///
+    /// # Returns
+    ///
+    /// `true` if changes are pending, `false` if no changes have been detected.
+    pub fn has_changes(&self) -> bool {
+        !self.added_entities.is_empty()
+            || !self.removed_entities.is_empty()
+            || !self.updated_entities.is_empty()
+    }
+}
diff --git a/crates/bevy_entity_inspector/src/lib.rs b/crates/bevy_entity_inspector/src/lib.rs
new file mode 100644
index 00000000..4c36a61a
--- /dev/null
+++ b/crates/bevy_entity_inspector/src/lib.rs
@@ -0,0 +1,197 @@
+//! A modular entity inspector for Bevy with reflection support.
+//!
+//! This crate provides a tree-based UI for inspecting entities and their components
+//! in a [Bevy] application. It uses Bevy's [reflection system] to dynamically display
+//! component data without requiring compile-time knowledge of component types.
+//!
+//! ## Features
+//!
+//! - **Event-Driven Updates**: Efficient, granular updates using an [`InspectorEvent`] system instead of polling
+//! - **Tree-Based UI**: Hierarchical display of entities and their components with expand/collapse functionality
+//! - **Component Grouping**: Components are automatically grouped by crate using [`extract_crate_and_type`] for better organization (e.g., "`bevy_transform`", "`my_game`")
+//! - **Visual Styling**: Different node types ([`TreeNodeType`]) have distinct visual styling with reduced opacity for non-expandable items
+//! - **Reflection Support**: Automatic component introspection using Bevy's [reflection system] and [`extract_reflect_fields`]
+//! - **Remote Inspection** (optional): Connect to remote Bevy applications via [`bevy_remote`]
+//! - **Modern UI**: Clean, themeable interface with hover effects and visual feedback using [`InspectorTheme`]
+//! - **Change Detection**: Only updates UI when actual changes occur, eliminating unnecessary rebuilds
+//!
+//! [Bevy]: https://bevyengine.org
+//! [reflection system]: https://docs.rs/bevy/latest/bevy/reflect/index.html
+//! [`bevy_remote`]: https://docs.rs/bevy_remote/latest/bevy_remote/
+//! [Bevy app]: https://docs.rs/bevy/latest/bevy/app/struct.App.html
+//!
+//! ## Architecture
+//!
+//! The inspector uses an event-driven architecture that replaces the previous hash-based change detection:
+//!
+//! - [`InspectorEvent`] enum defines granular change types (entity added/removed/updated, component changes)
+//! - [`EntityInspectorRows`] tracks entity data and change state with efficient diff detection
+//! - [`TreeState`] manages the UI tree structure and expansion states
+//! - Remote polling emits events only when actual changes are detected
+//!
+//! ## Usage
+//!
+//! ### Basic Inspector
+//!
+//! Add the [`InspectorPlugin`] to your [Bevy app]:
+//!
+//! ```rust,no_run
+//! use bevy::prelude::*;
+//! use bevy_entity_inspector::InspectorPlugin;
+//!
+//! App::new()
+//!     .add_plugins(DefaultPlugins)
+//!     .add_plugins(InspectorPlugin)
+//!     .run();
+//! ```
+//!
+//! ### Remote Inspection
+//!
+//! To inspect entities in a remote Bevy application using [`bevy_remote`]:
+//!
+//! ```rust,no_run
+//! use bevy::prelude::*;
+//! use bevy_entity_inspector::InspectorPlugin;
+//!
+//! App::new()
+//!     .add_plugins(DefaultPlugins)
+//!     .add_plugins(InspectorPlugin)
+//!     .run();
+//! ```
+//!
+//! Then run your target application with the [`bevy_remote`] plugin enabled.
+//!
+//! ### Custom Theming
+//!
+//! Customize the inspector appearance using [`InspectorTheme`]:
+//!
+//! ```rust,no_run
+//! use bevy::prelude::*;
+//! use bevy_entity_inspector::{InspectorPlugin, create_dark_inspector_theme};
+//!
+//! App::new()
+//!     .add_plugins(DefaultPlugins)
+//!     .add_plugins(InspectorPlugin)
+//!     .insert_resource(create_dark_inspector_theme())
+//!     .run();
+//! ```
+//!
+//! [Bevy app]: https://docs.rs/bevy/latest/bevy/app/struct.App.html
+//!
+//! ## Performance
+//!
+//! The event-driven system provides significant performance improvements:
+//! - Only rebuilds UI when actual changes occur
+//! - Granular updates for individual entity/component changes
+//! - Efficient hash-based change detection for remote data
+//! - Preserved expansion states during tree rebuilds
+//!
+//! ## Component Grouping
+//!
+//! Components are automatically grouped by their crate name for better organization.
+//! This grouping is handled by [`extract_crate_and_type`] and displayed using [`TreeNodeType`]:
+//!
+//! ```text
+//! Entity (42)
+//! ├── bevy_transform
+//! │   ├── Transform
+//! │   │   ├── translation: Vec3(0.0, 0.0, 0.0)
+//! │   │   ├── rotation: Quat(0.0, 0.0, 0.0, 1.0)
+//! │   │   └── scale: Vec3(1.0, 1.0, 1.0)
+//! │   └── GlobalTransform
+//! │       └── ...
+//! ├── bevy_render
+//! │   ├── Visibility
+//! │   └── ComputedVisibility
+//! └── my_game
+//!     └── Player
+//!         ├── health: 100
+//!         └── score: 1500
+//! ```
+
+use bevy::prelude::*;
+
+// Core modules
+pub mod events;
+pub mod reflection;
+pub mod tree_builder;
+pub mod ui_systems;
+
+// UI and utility modules
+pub mod theme;
+pub mod ui;
+pub mod widgets;
+
+// Optional remote module
+#[cfg(feature = "remote")]
+pub mod remote;
+
+// Re-export commonly used types
+pub use events::{EntityInspectorRow, EntityInspectorRows, InspectorEvent, InspectorNodeData};
+pub use reflection::{extract_crate_and_type, extract_reflect_fields};
+pub use theme::{create_dark_inspector_theme, create_light_inspector_theme, InspectorTheme};
+pub use tree_builder::{InspectorTreeBuilder, InspectorTreeNode, TreeNodeType};
+pub use ui::{
+    build_tree_node_recursive, build_tree_view, tree_container, TreeConfig, TreeContainer,
+    TreeNode, TreePlugin, TreeState,
+};
+pub use ui_systems::handle_inspector_events;
+pub use widgets::{
+    create_inspector_field, create_inspector_panel, InspectorField, InspectorFieldType,
+    InspectorPanel, InspectorPanelProps,
+};
+
+use crate::ui_systems::{handle_tree_selection, setup_inspector_camera, spawn_inspector_ui_once};
+
+/// Main plugin for the Bevy Entity Inspector.
+///
+/// This plugin provides a complete entity inspection system with a tree-based UI
+/// that displays entities and their components in a hierarchical view. Components
+/// are automatically grouped by crate name using [`extract_crate_and_type`] for better organization.
+///
+/// # Features
+///
+/// - **Event-Driven Architecture**: Efficient updates using [`InspectorEvent`] system
+/// - **Component Grouping**: Automatic grouping by crate (e.g., "`bevy_transform`", "`my_game`")
+/// - **Remote Inspection**: Optional remote inspection via [`bevy_remote`] (with "remote" feature)
+/// - **Reflection Support**: Automatic component introspection using Bevy's [reflection system]
+/// - **Modern UI**: Clean, themeable interface with expand/collapse functionality using [`InspectorTheme`]
+/// - **Performance Optimized**: Only updates when actual changes occur via [`EntityInspectorRows`] change tracking
+///
+/// # Usage
+///
+/// ```rust,no_run
+/// use bevy::prelude::*;
+/// use bevy_entity_inspector::InspectorPlugin;
+///
+/// App::new()
+///     .add_plugins(DefaultPlugins)
+///     .add_plugins(InspectorPlugin)
+///     .run();
+/// ```
+///
+/// # Performance
+///
+/// The plugin is designed for minimal performance impact:
+/// - Events only emitted when actual changes occur via [`InspectorEvent`]
+/// - UI updates are batched and optimized by [`handle_inspector_events`]
+/// - Tree state preserved during rebuilds using [`TreeState`]
+/// - Async network operations for remote inspection (with "remote" feature)
+pub struct InspectorPlugin;
+
+impl Plugin for InspectorPlugin {
+    fn build(&self, app: &mut App) {
+        app.add_plugins(TreePlugin)
+            .add_event::<InspectorEvent>()
+            .init_resource::<EntityInspectorRows>()
+            .init_resource::<InspectorTheme>()
+            .add_systems(Startup, (setup_inspector_camera, spawn_inspector_ui_once))
+            .add_systems(Update, (handle_inspector_events, handle_tree_selection));
+
+        #[cfg(feature = "remote")]
+        {
+            use crate::remote::EntityInspectorRemotePlugin;
+            app.add_plugins(EntityInspectorRemotePlugin::default());
+        }
+    }
+}
diff --git a/crates/bevy_entity_inspector/src/reflection.rs b/crates/bevy_entity_inspector/src/reflection.rs
new file mode 100644
index 00000000..53ae7848
--- /dev/null
+++ b/crates/bevy_entity_inspector/src/reflection.rs
@@ -0,0 +1,202 @@
+//! Reflection utilities for the entity inspector.
+//!
+//!
+//! # Related Documentation
+//!
+//! - [Bevy Reflection Guide](https://docs.rs/bevy/latest/bevy/reflect/index.html) - Comprehensive reflection system documentation
+//! - [PartialReflect Trait](https://docs.rs/bevy/latest/bevy/reflect/trait.PartialReflect.html) - Core trait for reflectable types
+//! - [`extract_crate_and_type`] - Utility for parsing component type paths
+//! - [`extract_reflect_fields`] - Main function for extracting displayable field data
+
+use bevy::reflect::*;
+
+/// Extracts crate name and type name from a component type path.
+///
+/// Component names from the reflection system often include full module paths like:
+/// - "`bevy_transform::components::transform::Transform`"
+/// - "`my_game::components::player::Player`"
+/// - "Transform" (for local/simple names)
+///
+/// This function extracts the crate name and the final type name for display purposes.
+///
+/// # Arguments
+///
+/// * `component_name` - Full component type path from reflection
+///
+/// # Returns
+///
+/// A tuple of (`crate_name`, `type_name`) where:
+/// - For "`bevy_transform::components::transform::Transform`" -> ("`bevy_transform`", "Transform")
+/// - For "`my_game::player::Player`" -> ("`my_game`", "Player")
+/// - For "Transform" -> ("Local", "Transform")
+///
+/// # Examples
+///
+/// ```rust,no_run
+/// # use bevy_entity_inspector::reflection::extract_crate_and_type;
+/// let (crate_name, type_name) = extract_crate_and_type("bevy_transform::components::transform::Transform");
+/// assert_eq!(crate_name, "bevy_transform");
+/// assert_eq!(type_name, "Transform");
+///
+/// let (crate_name, type_name) = extract_crate_and_type("Transform");
+/// assert_eq!(crate_name, "Local");
+/// assert_eq!(type_name, "Transform");
+/// ```
+pub fn extract_crate_and_type(component_name: &str) -> (String, String) {
+    if let Some(first_separator) = component_name.find("::") {
+        // Extract the crate name (everything before the first "::")
+        let crate_name = component_name[..first_separator].to_string();
+
+        // Extract the type name (everything after the last "::")
+        let type_name = component_name
+            .split("::")
+            .last()
+            .unwrap_or(component_name)
+            .to_string();
+
+        (crate_name, type_name)
+    } else {
+        // No "::" found, treat as a local/simple type
+        ("Local".to_string(), component_name.to_string())
+    }
+}
+
+/// Extracts field information from a reflected value for display in the inspector.
+///
+/// This function traverses the reflected structure and extracts all displayable
+/// field information, handling different reflection types appropriately. It works
+/// with any type implementing [`PartialReflect`](https://docs.rs/bevy/latest/bevy/reflect/trait.PartialReflect.html).
+///
+/// # Arguments
+///
+/// * `reflect` - The reflected value to extract fields from
+///
+/// # Returns
+///
+/// A vector of (`field_name`, `field_value`) tuples representing the structure's contents.
+///
+/// # Supported Types
+///
+/// - **[Struct](https://docs.rs/bevy/latest/bevy/reflect/trait.Struct.html)**: Named fields with their values
+/// - **[TupleStruct](https://docs.rs/bevy/latest/bevy/reflect/trait.TupleStruct.html)**: Indexed fields (`field_0`, `field_1`, etc.)
+/// - **[Tuple](https://docs.rs/bevy/latest/bevy/reflect/trait.Tuple.html)**: Indexed items (`item_0`, `item_1`, etc.)
+/// - **[List](https://docs.rs/bevy/latest/bevy/reflect/trait.List.html)/[Array](https://docs.rs/bevy/latest/bevy/reflect/trait.Array.html)**: Indexed elements with bracket notation (`\[0\]`, `\[1\]`, etc.)
+/// - **[Map](https://docs.rs/bevy/latest/bevy/reflect/trait.Map.html)**: Key-value pairs
+/// - **[Enum](https://docs.rs/bevy/latest/bevy/reflect/trait.Enum.html)**: Variant name and field data
+///
+/// # Examples
+///
+/// ```rust,no_run
+/// # use bevy::prelude::*;
+/// # use bevy_entity_inspector::reflection::extract_reflect_fields;
+/// # use bevy::reflect::*;
+///
+/// #[derive(Reflect)]
+/// struct Position {
+///     x: f32,
+///     y: f32,
+/// }
+///
+/// let pos = Position { x: 1.0, y: 2.0 };
+/// let fields = extract_reflect_fields(pos.as_partial_reflect());
+/// // Returns: [("x", "1.0"), ("y", "2.0")]
+/// ```
+pub fn extract_reflect_fields(reflect: &dyn PartialReflect) -> Vec<(String, String)> {
+    let mut fields = Vec::new();
+
+    match reflect.reflect_ref() {
+        ReflectRef::Struct(s) => {
+            for i in 0..s.field_len() {
+                if let Some(field) = s.field_at(i) {
+                    let default_field_name = format!("field_{i}");
+                    let name = s.name_at(i).unwrap_or(&default_field_name);
+                    let value = format!("{field:?}");
+                    fields.push((name.to_string(), value));
+                }
+            }
+        }
+        ReflectRef::TupleStruct(ts) => {
+            for i in 0..ts.field_len() {
+                if let Some(field) = ts.field(i) {
+                    let name = format!("field_{i}");
+                    let value = format!("{field:?}");
+                    fields.push((name, value));
+                }
+            }
+        }
+        ReflectRef::Tuple(t) => {
+            for i in 0..t.field_len() {
+                if let Some(field) = t.field(i) {
+                    let name = format!("item_{i}");
+                    let value = format!("{field:?}");
+                    fields.push((name, value));
+                }
+            }
+        }
+        ReflectRef::List(l) => {
+            for i in 0..l.len() {
+                if let Some(item) = l.get(i) {
+                    let name = format!("[{i}]");
+                    let value = format!("{item:?}");
+                    fields.push((name, value));
+                }
+            }
+        }
+        ReflectRef::Array(a) => {
+            for i in 0..a.len() {
+                if let Some(item) = a.get(i) {
+                    let name = format!("[{i}]");
+                    let value = format!("{item:?}");
+                    fields.push((name, value));
+                }
+            }
+        }
+        ReflectRef::Map(m) => {
+            for (key, value) in m.iter() {
+                let name = format!("{key:?}");
+                let value = format!("{value:?}");
+                fields.push((name, value));
+            }
+        }
+        ReflectRef::Enum(e) => {
+            fields.push(("variant".to_string(), e.variant_name().to_string()));
+            for i in 0..e.field_len() {
+                if let Some(field) = e.field_at(i) {
+                    let default_field_name = format!("field_{i}");
+                    let name = e.name_at(i).unwrap_or(&default_field_name);
+                    fields.push((name.to_string(), format!("{field:?}")));
+                }
+            }
+        }
+        _ => {
+            // For primitive values and any other cases, just show the value itself
+            fields.push(("value".to_string(), format!("{reflect:?}")));
+        }
+    }
+
+    fields
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_extract_crate_and_type() {
+        // Test full path
+        let (crate_name, type_name) =
+            extract_crate_and_type("bevy_transform::components::transform::Transform");
+        assert_eq!(crate_name, "bevy_transform");
+        assert_eq!(type_name, "Transform");
+
+        // Test simple path
+        let (crate_name, type_name) = extract_crate_and_type("my_game::Player");
+        assert_eq!(crate_name, "my_game");
+        assert_eq!(type_name, "Player");
+
+        // Test no path
+        let (crate_name, type_name) = extract_crate_and_type("Transform");
+        assert_eq!(crate_name, "Local");
+        assert_eq!(type_name, "Transform");
+    }
+}
diff --git a/crates/bevy_entity_inspector/src/remote.rs b/crates/bevy_entity_inspector/src/remote.rs
new file mode 100644
index 00000000..a616ca52
--- /dev/null
+++ b/crates/bevy_entity_inspector/src/remote.rs
@@ -0,0 +1,401 @@
+//! Remote in/// - **Event Integration**: Emits granular [`InspectorEvent`]s for UI updatespection functionality for connecting to remote Bevy applications.
+//!
+//! This module provides the ability to inspect entities in remote Bevy applications
+//! via the [`bevy_remote`](https://docs.rs/bevy_remote/latest/bevy_remote/) protocol. It implements efficient polling with hash-based
+//! change detection to minimize network traffic and UI updates.
+//!
+//! # Features
+//!
+//! - **Automatic Discovery**: Connects to remote Bevy applications on default port
+//! - **Efficient Polling**: Only updates when actual changes are detected
+//! - **Hash-based Change Detection**: Uses content hashing to detect entity/component changes
+//! - **Component Name Simplification**: Displays components as "`crate::Type`" for clarity
+//! - **Graceful Degradation**: Handles components without reflection support
+//! - **Event Integration**: Emits granular [`InspectorEvent`](crate::events::InspectorEvent)s for UI updates
+//!
+//! # Protocol
+//!
+//! Uses the [`bevy_remote`](https://docs.rs/bevy_remote/latest/bevy_remote/) HTTP protocol to query entity data. The system sends
+//! BRP (Bevy Remote Protocol) requests to fetch all entities with all components,
+//! then processes the JSON response to extract component data.
+//!
+//! # Performance
+//!
+//! - **Configurable Polling Rate**: Default 1 second, adjustable via timer
+//! - **Change Detection**: Only processes updates when entity data actually changes
+//! - **Async Processing**: Uses Bevy's [task system](https://docs.rs/bevy/latest/bevy/tasks/index.html) for non-blocking network requests
+//! - **Memory Efficient**: Reuses data structures and avoids unnecessary allocations
+//!
+//! # Setup
+//!
+//! The remote inspection requires both the inspector application and the target
+//! application to be configured:
+//!
+//! **Inspector Application:**
+//! ```rust,no_run
+//! use bevy::prelude::*;
+//! use bevy_entity_inspector::InspectorPlugin;
+//!
+//! App::new()
+//!     .add_plugins(DefaultPlugins)
+//!     .add_plugins(InspectorPlugin) // Automatically includes remote if feature enabled
+//!     .run();
+//! ```
+//!
+//! **Target Application:**
+//! ```rust,no_run
+//! use bevy::prelude::*;
+//! use bevy_remote::{RemotePlugin, http::RemoteHttpPlugin};
+//!
+//! App::new()
+//!     .add_plugins(DefaultPlugins)
+//!     .add_plugins(RemotePlugin::default())
+//!     .add_plugins(RemoteHttpPlugin::default())
+//!     // Your game logic here
+//!     .run();
+//! ```
+
+use std::any::type_name;
+use std::collections::hash_map::DefaultHasher;
+use std::hash::{Hash, Hasher};
+
+use bevy::{
+    platform::collections::HashMap,
+    prelude::*,
+    tasks::{futures_lite::future, IoTaskPool, Task},
+};
+use bevy_remote::{
+    builtin_methods::{BrpQuery, BrpQueryFilter, BrpQueryParams, BRP_QUERY_METHOD},
+    http::{DEFAULT_ADDR, DEFAULT_PORT},
+    BrpRequest,
+};
+
+use crate::events::{EntityInspectorRow, EntityInspectorRows, InspectorEvent};
+use serde::de::IntoDeserializer;
+
+/// Plugin for entity inspector remote functionality.
+///
+/// This plugin enables the entity inspector to connect to and inspect entities
+/// in remote Bevy applications via the `bevy_remote` protocol. It sets up
+/// automatic polling, change detection, and event emission for remote entity data.
+///
+/// # Configuration
+///
+/// The plugin can be configured with a custom remote URL:
+///
+/// ```rust,no_run
+/// use bevy_entity_inspector::remote::EntityInspectorRemotePlugin;
+///
+/// let plugin = EntityInspectorRemotePlugin {
+///     remote_url: "http://localhost:8080/".to_string(),
+/// };
+/// ```
+///
+/// # Systems
+///
+/// The plugin adds two main systems:
+/// - `poll_remote_entity_rows`: Periodically queries the remote application
+/// - `update_remote_entity_rows`: Processes responses and emits change events
+///
+/// # Performance
+///
+/// - Uses async tasks to avoid blocking the main thread
+/// - Implements hash-based change detection to minimize UI updates
+/// - Configurable polling frequency (default: 1 second)
+/// - Graceful error handling for network issues
+pub struct EntityInspectorRemotePlugin {
+    /// The address of the remote application to connect to.
+    ///
+    /// Should include the protocol, host, port, and path.
+    /// Example: "<http://127.0.0.1:15702>/"
+    pub remote_url: String,
+}
+
+impl Default for EntityInspectorRemotePlugin {
+    fn default() -> Self {
+        EntityInspectorRemotePlugin {
+            remote_url: format!("http://{DEFAULT_ADDR}:{DEFAULT_PORT}/"),
+        }
+    }
+}
+
+/// Configuration resource for remote entity inspection.
+///
+/// Contains connection settings for the remote Bevy application.
+/// This resource is automatically inserted by the `EntityInspectorRemotePlugin`.
+#[derive(Resource, Debug, Clone)]
+pub struct RemoteConfig {
+    /// The URL of the remote application.
+    ///
+    /// Used by the polling system to send BRP requests.
+    /// Must be a valid HTTP/HTTPS URL.
+    pub remote_url: String,
+}
+
+impl Plugin for EntityInspectorRemotePlugin {
+    fn build(&self, app: &mut App) {
+        app.insert_resource(RemoteConfig {
+            remote_url: self.remote_url.clone(),
+        })
+        .init_resource::<PollTimer>()
+        .init_resource::<RowTaskHandle>()
+        .add_systems(Startup, setup_poll_timer)
+        .add_systems(Update, (poll_remote_entity_rows, update_remote_entity_rows));
+    }
+}
+
+/// Timer resource for controlling remote polling frequency.
+#[derive(Resource, Default)]
+struct PollTimer(Timer);
+
+/// Sets up the polling timer with default frequency.
+///
+/// Configures the timer to poll every 1 second. This can be adjusted
+/// based on performance requirements and network conditions.
+fn setup_poll_timer(mut commands: Commands) {
+    commands.insert_resource(PollTimer(Timer::from_seconds(1.0, TimerMode::Repeating)));
+}
+
+/// Handle for the background task that fetches remote entity data.
+#[derive(Resource, Default)]
+struct RowTaskHandle(Option<Task<HashMap<Entity, EntityInspectorRow>>>);
+
+/// System that initiates remote entity data polling.
+///
+/// This system runs on a timer and spawns async tasks to fetch entity data
+/// from the remote Bevy application. It uses the BRP (Bevy Remote Protocol)
+/// to query all entities with all their components.
+///
+/// # Process
+///
+/// 1. Check if timer has elapsed and no task is currently running
+/// 2. Create BRP query request for all entities and components
+/// 3. Spawn async task to send HTTP request
+/// 4. Process JSON response and extract entity/component data
+/// 5. Calculate content hash for change detection
+/// 6. Return processed entity data for the update system
+///
+/// # Error Handling
+///
+/// - Network errors are logged but don't crash the system
+/// - JSON parsing errors are handled gracefully
+/// - Component reflection failures fall back to placeholder data
+///
+/// # Component Processing
+///
+/// Components are processed with the following priority:
+/// 1. Full reflection via `ReflectDeserialize` (ideal case)
+/// 2. Placeholder `DynamicStruct` for registered types without reflection
+/// 3. Placeholder for unregistered types
+///
+/// Component names are simplified from full paths (e.g., `bevy_transform::Transform`)
+/// to crate-qualified names (e.g., `bevy_transform::Transform`) for better UX.
+fn poll_remote_entity_rows(
+    time: Res<Time>,
+    mut timer: ResMut<PollTimer>,
+    mut task_handle: ResMut<RowTaskHandle>,
+    remote_config: Res<RemoteConfig>,
+    type_registry: Res<AppTypeRegistry>,
+) {
+    if timer.0.tick(time.delta()).just_finished() {
+        info!("Polling timer finished, checking if we should start new task");
+
+        if task_handle.0.is_none() {
+            info!("Starting remote polling to {}", remote_config.remote_url);
+            let url = remote_config.remote_url.clone();
+
+            // Clone the type registry Arc to move into the async block
+            let type_registry_arc = type_registry.clone();
+
+            let task_pool = IoTaskPool::get();
+            let task = task_pool.spawn(async move {
+                info!("Sending remote query request to {}", url);
+                let req = BrpRequest {
+                    params: Some(
+                        serde_json::to_value(BrpQueryParams {
+                            data: BrpQuery {
+                                components: Vec::default(),
+                                option: bevy_remote::builtin_methods::ComponentSelector::All,
+                                has: Vec::default(),
+                            },
+                            strict: false,
+                            filter: BrpQueryFilter {
+                                without: Vec::default(),
+                                with: Vec::default(),
+                            },
+                        })
+                        .unwrap(),
+                    ),
+                    jsonrpc: String::from("2.0"),
+                    method: String::from(BRP_QUERY_METHOD),
+                    id: Some(serde_json::to_value(1).expect("Failed to serialize id")),
+                };
+
+                let mut rows = HashMap::new();
+
+                if let Ok(mut response) = ureq::post(&url).send_json(req) {
+                    info!("Got response from remote server");
+                    if let Ok(json) = response.body_mut().read_json::<serde_json::Value>() {
+                        info!("Parsed JSON response: {:?}", json);
+                        if let Some(results) = json["result"].as_array() {
+                            for entry in results {
+                                let entity = serde_json::from_value::<Entity>(entry["entity"].clone())
+                                    .expect("Failed to parse entity ID");
+                                let components = entry["components"]
+                                    .as_object()
+                                    .expect("Failed to parse components");
+                                let name = components
+                                    .get(type_name::<Name>())
+                                    .and_then(|v| v.get("name"))
+                                    .and_then(|v| v.as_str())
+                                    .unwrap_or("")
+                                    .to_string();
+
+                                // Build component map
+                                let mut comp_map = HashMap::new();
+                                for (comp_name, comp_val) in components {
+                                    // Extract crate name and type name from the full path
+                                    // e.g. "bevy_transform::components::transform::Transform" -> "bevy_transform::Transform"
+                                    // e.g. "my_game::player::Player" -> "my_game::Player"
+                                    let component_display_name = if let Some(crate_and_rest) = comp_name.split_once("::") {
+                                        let crate_name = crate_and_rest.0;
+                                        let type_name = comp_name.split("::").last().unwrap_or(comp_name);
+                                        format!("{crate_name}::{type_name}")
+                                    } else {
+                                        // If there's no "::" separator, just use the original name
+                                        comp_name.to_string()
+                                    };
+                                    // Try to reflect using the type registry
+                                    if let Some(reg) =
+                                        type_registry_arc.read().get_with_type_path(comp_name)
+                                    {
+                                        if let Some(reflect_deserialize) = reg.data::<ReflectDeserialize>() {
+                                            if let Ok(reflected) = reflect_deserialize
+                                                .deserialize(comp_val.into_deserializer())
+                                            {
+                                                comp_map.insert(component_display_name, reflected.to_dynamic());
+                                            }
+                                        } else {
+                                            // Component type is registered but doesn't have ReflectDeserialize
+                                            // Store the raw JSON as a debug representation
+                                            debug!("Component '{}' is registered but lacks ReflectDeserialize data, storing raw JSON", comp_name);
+                                            // Create a simple dynamic representation from the JSON
+                                            let dynamic_struct = bevy::reflect::DynamicStruct::default();
+                                            comp_map.insert(component_display_name, Box::new(dynamic_struct) as Box<dyn PartialReflect>);
+                                        }
+                                    } else {
+                                        // Component type not registered - store raw JSON representation
+                                        debug!("Component '{}' not found in type registry, storing raw JSON", comp_name);
+                                        let dynamic_struct = bevy::reflect::DynamicStruct::default();
+                                        comp_map.insert(component_display_name, Box::new(dynamic_struct) as Box<dyn PartialReflect>);
+                                    }
+                                }
+                                // Calculate hash of the raw component data for change detection
+                                let mut hasher = DefaultHasher::new();
+                                // Sort the component data to ensure consistent hashing
+                                let mut sorted_components: Vec<_> = components.iter().collect();
+                                sorted_components.sort_by_key(|(name, _)| *name);
+                                for (comp_name, comp_val) in sorted_components {
+                                    comp_name.hash(&mut hasher);
+                                    // Hash the JSON string representation
+                                    serde_json::to_string(comp_val).unwrap_or_default().hash(&mut hasher);
+                                }
+                                let data_hash = hasher.finish();
+                                rows.insert(
+                                    entity,
+                                    EntityInspectorRow {
+                                        name,
+                                        components: comp_map,
+                                        data_hash: Some(data_hash),
+                                    },
+                                );
+                            }
+                        }
+                    } else {
+                        error!("Failed to parse JSON response");
+                    }
+                } else {
+                    error!("Failed to send request to remote application at {}", url);
+                }
+                rows
+            });
+            task_handle.0 = Some(task);
+        } else {
+            info!("Remote polling task already running, skipping");
+        }
+    }
+}
+
+/// System that processes completed remote polling tasks and emits change events.
+///
+/// This system checks for completed async tasks from `poll_remote_entity_rows`
+/// and processes the results. It uses the change detection system to determine
+/// what has changed and emits appropriate `InspectorEvent`s.
+///
+/// # Change Detection
+///
+/// The system uses hash-based change detection to efficiently determine what
+/// has changed between polling cycles:
+/// - Content hashes are calculated from the raw JSON component data
+/// - Only entities with different hashes are considered "updated"
+/// - Initial population (empty -> non-empty) is handled as "added" entities
+///
+/// # Event Emission
+///
+/// Emits the following events based on detected changes:
+/// - `InspectorEvent::EntityAdded` for new entities
+/// - `InspectorEvent::EntityRemoved` for deleted entities  
+/// - `InspectorEvent::EntityUpdated` for modified entities
+///
+/// # Performance
+///
+/// - Only processes tasks when they're complete (non-blocking)
+/// - Uses efficient `HashMap` operations for change detection
+/// - Batches all changes into a single update cycle
+/// - Clears change tracking immediately after event emission
+fn update_remote_entity_rows(
+    mut task_handle: ResMut<RowTaskHandle>,
+    mut rows: ResMut<EntityInspectorRows>,
+    mut events: EventWriter<InspectorEvent>,
+) {
+    if let Some(mut task) = task_handle.0.take() {
+        if let Some(result) = future::block_on(future::poll_once(&mut task)) {
+            info!(
+                "Remote polling task completed with {} entities",
+                result.len()
+            );
+            // Use the new change tracking to detect what changed
+            rows.update_rows(result);
+
+            // Send events for the changes
+            if rows.has_changes() {
+                info!(
+                    "Remote data changed: {} added, {} removed, {} updated",
+                    rows.added_entities.len(),
+                    rows.removed_entities.len(),
+                    rows.updated_entities.len()
+                );
+
+                for entity in &rows.added_entities {
+                    events.write(InspectorEvent::EntityAdded(*entity));
+                }
+
+                for entity in &rows.removed_entities {
+                    events.write(InspectorEvent::EntityRemoved(*entity));
+                }
+
+                for entity in &rows.updated_entities {
+                    events.write(InspectorEvent::EntityUpdated(*entity));
+                }
+
+                // Clear the change tracking
+                rows.clear_changes();
+            } else {
+                info!("No changes detected in remote data");
+            }
+        } else {
+            // Not ready yet, put it back
+            task_handle.0 = Some(task);
+        }
+    }
+}
diff --git a/crates/bevy_entity_inspector/src/theme.rs b/crates/bevy_entity_inspector/src/theme.rs
new file mode 100644
index 00000000..b99c4169
--- /dev/null
+++ b/crates/bevy_entity_inspector/src/theme.rs
@@ -0,0 +1,147 @@
+//! Theme configuration for the entity inspector.
+//!
+//! This module provides theming support for customizing the visual appearance
+//! of the inspector interface, including colors, fonts, and spacing.
+//!
+//! # Related Documentation
+//!
+//! - [Bevy Color](https://docs.rs/bevy/latest/bevy/color/index.html) - Color system used for theming
+//! - [`InspectorTheme`] - Main theme configuration resource
+//! - [`create_dark_inspector_theme`] - Pre-configured dark theme
+//! - [`create_light_inspector_theme`] - Pre-configured light theme
+
+use bevy::prelude::*;
+
+/// Inspector theme configuration
+#[derive(Resource, Clone)]
+pub struct InspectorTheme {
+    /// Background color for the inspector panel
+    pub background_color: Color,
+    /// Border color for the inspector panel
+    pub border_color: Color,
+    /// Primary text color
+    pub text_color: Color,
+    /// Secondary text color (for values)
+    pub text_secondary_color: Color,
+    /// Selected item background color
+    pub selected_color: Color,
+    /// Hovered item background color
+    pub hover_color: Color,
+    /// Disclosure triangle color
+    pub disclosure_color: Color,
+    /// Header background color
+    pub header_color: Color,
+    /// Header text color
+    pub header_text_color: Color,
+    /// Font size for normal text
+    pub font_size: f32,
+    /// Font size for headers
+    pub header_font_size: f32,
+    /// Padding for container elements
+    pub container_padding: f32,
+    /// Indent size for tree hierarchy
+    pub indent_size: f32,
+    /// Height of tree nodes
+    pub node_height: f32,
+    /// Size of disclosure triangles
+    pub disclosure_size: f32,
+}
+
+impl Default for InspectorTheme {
+    fn default() -> Self {
+        Self {
+            background_color: Color::srgb(0.1, 0.1, 0.1),
+            border_color: Color::srgb(0.3, 0.3, 0.3),
+            text_color: Color::srgb(0.9, 0.9, 0.9),
+            text_secondary_color: Color::srgb(0.7, 0.7, 0.7),
+            selected_color: Color::srgb(0.2, 0.4, 0.8),
+            hover_color: Color::srgb(0.15, 0.15, 0.15),
+            disclosure_color: Color::srgb(0.7, 0.7, 0.7),
+            header_color: Color::srgb(0.2, 0.2, 0.2),
+            header_text_color: Color::srgb(1.0, 1.0, 1.0),
+            font_size: 14.0,
+            header_font_size: 16.0,
+            container_padding: 8.0,
+            indent_size: 20.0,
+            node_height: 24.0,
+            disclosure_size: 12.0,
+        }
+    }
+}
+
+/// Dark theme for the inspector
+pub fn create_dark_inspector_theme() -> InspectorTheme {
+    InspectorTheme {
+        background_color: Color::srgb(0.08, 0.08, 0.08),
+        border_color: Color::srgb(0.25, 0.25, 0.25),
+        text_color: Color::srgb(0.95, 0.95, 0.95),
+        text_secondary_color: Color::srgb(0.7, 0.7, 0.7),
+        selected_color: Color::srgb(0.2, 0.4, 0.8),
+        hover_color: Color::srgb(0.12, 0.12, 0.12),
+        disclosure_color: Color::srgb(0.8, 0.8, 0.8),
+        header_color: Color::srgb(0.15, 0.15, 0.15),
+        header_text_color: Color::srgb(1.0, 1.0, 1.0),
+        font_size: 13.0,
+        header_font_size: 15.0,
+        container_padding: 12.0,
+        indent_size: 18.0,
+        node_height: 26.0,
+        disclosure_size: 14.0,
+    }
+}
+
+/// Light theme for the inspector
+pub fn create_light_inspector_theme() -> InspectorTheme {
+    InspectorTheme {
+        background_color: Color::srgb(0.98, 0.98, 0.98),
+        border_color: Color::srgb(0.7, 0.7, 0.7),
+        text_color: Color::srgb(0.1, 0.1, 0.1),
+        text_secondary_color: Color::srgb(0.4, 0.4, 0.4),
+        selected_color: Color::srgb(0.3, 0.5, 0.9),
+        hover_color: Color::srgb(0.93, 0.93, 0.93),
+        disclosure_color: Color::srgb(0.3, 0.3, 0.3),
+        header_color: Color::srgb(0.9, 0.9, 0.9),
+        header_text_color: Color::srgb(0.1, 0.1, 0.1),
+        font_size: 13.0,
+        header_font_size: 15.0,
+        container_padding: 12.0,
+        indent_size: 18.0,
+        node_height: 26.0,
+        disclosure_size: 14.0,
+    }
+}
+
+/// Component that marks an entity as themed by the inspector
+#[derive(Component)]
+pub struct InspectorThemedComponent;
+
+/// System to apply theme changes to inspector components
+pub fn update_inspector_theme(
+    mut query: Query<
+        (
+            &mut BackgroundColor,
+            &mut BorderColor,
+            &mut TextColor,
+            &mut TextFont,
+        ),
+        (
+            With<InspectorThemedComponent>,
+            Or<(
+                Changed<BackgroundColor>,
+                Changed<BorderColor>,
+                Changed<TextColor>,
+                Changed<TextFont>,
+            )>,
+        ),
+    >,
+    theme: Res<InspectorTheme>,
+) {
+    if theme.is_changed() {
+        for (mut bg_color, mut border_color, mut text_color, mut text_font) in query.iter_mut() {
+            bg_color.0 = theme.background_color;
+            *border_color = BorderColor::all(theme.border_color);
+            text_color.0 = theme.text_color;
+            text_font.font_size = theme.font_size;
+        }
+    }
+}
diff --git a/crates/bevy_entity_inspector/src/tree_builder.rs b/crates/bevy_entity_inspector/src/tree_builder.rs
new file mode 100644
index 00000000..88fca3ac
--- /dev/null
+++ b/crates/bevy_entity_inspector/src/tree_builder.rs
@@ -0,0 +1,205 @@
+//! Tree building logic for the entity inspector.
+//!
+//! This module contains the logic for building tree structures from entity data,
+//! including component grouping by crate and tree node creation.
+//!
+//! # Related Documentation
+//!
+//! - [`crate::events::EntityInspectorRows`] - Input data structure for tree building
+//! - [`crate::reflection::extract_crate_and_type`] - Component name parsing utility
+//! - [`crate::ui::TreeNode`] - Core tree node structure
+//! - [`TreeNodeType`] - Enum for different node types and styling
+
+use crate::events::{EntityInspectorRows, InspectorNodeData};
+use crate::reflection::{extract_crate_and_type, extract_reflect_fields};
+use crate::ui::{TreeConfig, TreeNode, TreeState};
+use bevy::prelude::*;
+
+/// Type of tree node for visual styling
+#[derive(Clone, Debug, PartialEq)]
+pub enum TreeNodeType {
+    /// A root entity node
+    Entity,
+    /// A crate grouping node
+    CrateGroup,
+    /// A component node
+    Component,
+    /// A field or property node
+    Field,
+}
+
+impl Default for TreeNodeType {
+    fn default() -> Self {
+        Self::Field
+    }
+}
+
+/// A tree node component for the inspector UI
+#[derive(Component, Clone, Debug)]
+pub struct InspectorTreeNode {
+    /// The base tree node data
+    pub base: TreeNode,
+    /// The specific inspector data for this node
+    pub data: InspectorNodeData,
+}
+
+/// Builder for creating inspector tree structures from entity data
+#[derive(Default)]
+pub struct InspectorTreeBuilder {
+    /// The current state of the tree, including nodes and root nodes
+    pub tree_state: TreeState,
+    /// Configuration for the tree view
+    pub config: TreeConfig,
+}
+
+impl InspectorTreeBuilder {
+    /// Creates a new tree builder with default configuration
+    pub fn new() -> Self {
+        Self::default()
+    }
+
+    /// Sets a custom tree configuration
+    pub fn with_config(mut self, config: TreeConfig) -> Self {
+        self.config = config;
+        self
+    }
+
+    /// Inserts a tree node into the builder
+    pub fn insert(&mut self, id: String, node: TreeNode) {
+        self.tree_state.nodes.insert(id, node);
+    }
+
+    /// Builds a tree structure from entity inspector data with component grouping by crate
+    pub fn build_from_inspector_data(inspector_data: &EntityInspectorRows) -> Self {
+        let mut builder = Self::new();
+
+        info!(
+            "build_from_inspector_data: Processing {} entities",
+            inspector_data.rows.len()
+        );
+
+        for (entity, row) in &inspector_data.rows {
+            let entity_id = format!("entity_{entity:?}");
+            let entity_label = if row.name.is_empty() {
+                format!("Entity {entity:?}")
+            } else {
+                format!("{} ({entity:?})", row.name)
+            };
+
+            info!(
+                "build_from_inspector_data: Processing entity {:?} with {} components: {}",
+                entity,
+                row.components.len(),
+                entity_label
+            );
+
+            // Group components by crate
+            let mut components_by_crate = std::collections::BTreeMap::new();
+
+            for (component_name, component_reflect) in &row.components {
+                let (crate_name, type_name) = extract_crate_and_type(component_name);
+                components_by_crate
+                    .entry(crate_name)
+                    .or_insert_with(Vec::new)
+                    .push((type_name, component_name.clone(), component_reflect));
+            }
+
+            let mut entity_children = Vec::new();
+
+            // Create crate group nodes
+            for (crate_name, components) in components_by_crate {
+                let crate_group_id = format!("{entity_id}_{crate_name}");
+                entity_children.push(crate_group_id.clone());
+
+                let mut crate_children = Vec::new();
+
+                // Add components to this crate group
+                for (type_name, _full_component_name, component_reflect) in components {
+                    let component_node_id = format!("{crate_group_id}_{type_name}");
+                    crate_children.push(component_node_id.clone());
+
+                    // Extract fields from the component
+                    let fields = extract_reflect_fields(component_reflect.as_ref());
+                    let mut component_children = Vec::new();
+
+                    // Add fields as children of the component
+                    for (field_name, field_value) in fields {
+                        let field_node_id = format!("{component_node_id}_field_{field_name}");
+                        component_children.push(field_node_id.clone());
+
+                        let field_node = TreeNode {
+                            id: field_node_id,
+                            label: format!("{field_name}: {field_value}"),
+                            is_expanded: false,
+                            children: Vec::new(),
+                            parent: Some(component_node_id.clone()),
+                            depth: 3,
+                            node_type: TreeNodeType::Field,
+                        };
+
+                        builder
+                            .tree_state
+                            .nodes
+                            .insert(field_node.id.clone(), field_node);
+                    }
+
+                    // Create component node with short type name
+                    let component_node = TreeNode {
+                        id: component_node_id,
+                        label: type_name,
+                        is_expanded: false,
+                        children: component_children,
+                        parent: Some(crate_group_id.clone()),
+                        depth: 2,
+                        node_type: TreeNodeType::Component,
+                    };
+
+                    builder
+                        .tree_state
+                        .nodes
+                        .insert(component_node.id.clone(), component_node);
+                }
+
+                // Create crate group node
+                let crate_node = TreeNode {
+                    id: crate_group_id,
+                    label: crate_name,
+                    is_expanded: false,
+                    children: crate_children,
+                    parent: Some(entity_id.clone()),
+                    depth: 1,
+                    node_type: TreeNodeType::CrateGroup,
+                };
+
+                builder
+                    .tree_state
+                    .nodes
+                    .insert(crate_node.id.clone(), crate_node);
+            }
+
+            // Create entity node
+            let entity_node = TreeNode {
+                id: entity_id.clone(),
+                label: entity_label,
+                is_expanded: false,
+                children: entity_children,
+                parent: None,
+                depth: 0,
+                node_type: TreeNodeType::Entity,
+            };
+
+            builder
+                .tree_state
+                .nodes
+                .insert(entity_id.clone(), entity_node);
+            builder.tree_state.root_nodes.push(entity_id);
+        }
+
+        builder
+    }
+
+    /// Creates a tree view UI from the builder's data
+    pub fn build_tree_view(&self, commands: &mut Commands) -> Entity {
+        crate::ui::tree::build_tree_view(commands, &self.tree_state, &self.config)
+    }
+}
diff --git a/crates/bevy_entity_inspector/src/ui/disclosure.rs b/crates/bevy_entity_inspector/src/ui/disclosure.rs
new file mode 100644
index 00000000..425558cd
--- /dev/null
+++ b/crates/bevy_entity_inspector/src/ui/disclosure.rs
@@ -0,0 +1,148 @@
+//! Disclosure triangle UI components for collapsible tree nodes.
+//!
+//! This module provides interactive disclosure triangles (expand/collapse arrows)
+//! used in tree views to show and hide child nodes. The triangles emit events
+//! when clicked and can be styled using the inspector theme.
+//!
+//! # Related Documentation
+//!
+//! - [Bevy Interaction](https://docs.rs/bevy/latest/bevy/ui/enum.Interaction.html) - UI interaction system for click handling
+//! - [`DisclosureTriangle`] - Main component for disclosure triangles
+//! - [`DisclosureToggled`] - Event emitted when triangles are clicked
+//! - [`crate::theme::InspectorTheme`] - Theming system for consistent styling
+
+use bevy::{ecs::event::BufferedEvent, prelude::*};
+
+/// Component representing a collapsible disclosure triangle
+#[derive(Component, Clone, Debug)]
+pub struct DisclosureTriangle {
+    /// Whether the disclosure triangle is currently expanded
+    pub is_expanded: bool,
+    /// Target ID for the disclosure triangle, used to identify which section it controls
+    pub target_id: String,
+}
+
+/// Properties for disclosure triangle creation
+#[derive(Default)]
+pub struct DisclosureProps {
+    /// Size of the disclosure triangle
+    pub size: f32,
+    /// Initial expanded state
+    pub is_expanded: bool,
+    /// Target ID for the disclosure
+    pub target_id: String,
+}
+
+/// Event fired when a disclosure triangle is toggled
+#[derive(Event, BufferedEvent)]
+pub struct DisclosureToggled {
+    /// Target ID of the disclosure triangle that was toggled
+    pub target_id: String,
+    /// New expanded state after the toggle
+    pub is_expanded: bool,
+}
+
+/// Creates a modern disclosure triangle widget using standard Bevy UI
+#[allow(dead_code)]
+pub fn create_disclosure_triangle(commands: &mut Commands, props: DisclosureProps) -> Entity {
+    let triangle_char = if props.is_expanded { "v" } else { ">" };
+
+    let button = commands
+        .spawn((
+            Button,
+            Node {
+                width: Val::Px(props.size + 8.0),
+                height: Val::Px(props.size + 8.0),
+                justify_content: JustifyContent::Center,
+                align_items: AlignItems::Center,
+                margin: UiRect::right(Val::Px(4.0)),
+                ..default()
+            },
+            DisclosureTriangle {
+                is_expanded: props.is_expanded,
+                target_id: props.target_id,
+            },
+            BackgroundColor(Color::NONE),
+            BorderRadius::all(Val::Px(2.0)),
+        ))
+        .id();
+
+    let text = commands
+        .spawn((
+            Text::new(triangle_char),
+            TextFont {
+                font_size: props.size,
+                ..default()
+            },
+            TextColor(Color::srgb(0.7, 0.7, 0.7)),
+        ))
+        .id();
+
+    commands.entity(button).add_child(text);
+    button
+}
+
+/// System to handle disclosure triangle interaction styling
+pub fn update_disclosure_style(
+    mut query: Query<
+        (&mut BackgroundColor, &DisclosureTriangle, &Interaction),
+        (Changed<Interaction>, With<DisclosureTriangle>),
+    >,
+) {
+    for (mut bg_color, _disclosure, interaction) in query.iter_mut() {
+        match *interaction {
+            Interaction::Pressed => {
+                bg_color.0 = Color::srgb(0.3, 0.3, 0.3);
+            }
+            Interaction::Hovered => {
+                bg_color.0 = Color::srgb(0.2, 0.2, 0.2);
+            }
+            Interaction::None => {
+                bg_color.0 = Color::NONE;
+            }
+        }
+    }
+}
+
+/// System to handle disclosure triangle clicks
+pub fn handle_disclosure_clicks(
+    query: Query<(&Interaction, &DisclosureTriangle), (Changed<Interaction>, With<Button>)>,
+    mut toggle_events: EventWriter<DisclosureToggled>,
+) {
+    for (interaction, disclosure) in query.iter() {
+        if *interaction == Interaction::Pressed {
+            toggle_events.write(DisclosureToggled {
+                target_id: disclosure.target_id.clone(),
+                is_expanded: !disclosure.is_expanded,
+            });
+        }
+    }
+}
+
+/// Legacy function for spawning disclosure triangles (for backward compatibility)
+#[allow(dead_code)]
+pub fn spawn_disclosure_triangle(
+    commands: &mut Commands,
+    target_id: String,
+    is_expanded: bool,
+    size: f32,
+) -> Entity {
+    create_disclosure_triangle(
+        commands,
+        DisclosureProps {
+            size,
+            is_expanded,
+            target_id,
+        },
+    )
+}
+
+/// Plugin for disclosure triangle functionality
+pub struct DisclosurePlugin;
+
+impl Plugin for DisclosurePlugin {
+    fn build(&self, app: &mut App) {
+        app.add_event::<DisclosureToggled>()
+            .add_systems(Update, (update_disclosure_style, handle_disclosure_clicks));
+    }
+}
diff --git a/crates/bevy_entity_inspector/src/ui/mod.rs b/crates/bevy_entity_inspector/src/ui/mod.rs
new file mode 100644
index 00000000..4164c5a3
--- /dev/null
+++ b/crates/bevy_entity_inspector/src/ui/mod.rs
@@ -0,0 +1,37 @@
+//! UI components and widgets for the entity inspector.
+//!
+//! This module organizes all UI-related functionality for the inspector,
+//! including tree views, property panels, and interactive widgets.
+//!
+//! # Modules
+//!
+//! - [`disclosure`] - Expandable/collapsible disclosure triangles
+//! - [`property_panel`] - Right-side property display panel
+//! - [`tree`] - Main tree view for entity hierarchy
+//!
+//! # Related Documentation
+//!
+//! - [Bevy UI Guide](https://docs.rs/bevy/latest/bevy/ui/index.html) - Core UI system documentation
+//! - [`InspectorWidgetsPlugin`] - Plugin that enables all UI widgets
+
+use bevy::prelude::*;
+
+/// Disclosure triangle UI components
+pub mod disclosure;
+/// Property panel for detailed component inspection
+pub mod property_panel;
+/// Tree view UI components  
+pub mod tree;
+
+pub use disclosure::*;
+pub use property_panel::*;
+pub use tree::*;
+
+/// Plugin that provides all inspector UI widgets
+pub struct InspectorWidgetsPlugin;
+
+impl Plugin for InspectorWidgetsPlugin {
+    fn build(&self, app: &mut App) {
+        app.add_plugins((DisclosurePlugin, TreePlugin));
+    }
+}
diff --git a/crates/bevy_entity_inspector/src/ui/property_panel.rs b/crates/bevy_entity_inspector/src/ui/property_panel.rs
new file mode 100644
index 00000000..8a570621
--- /dev/null
+++ b/crates/bevy_entity_inspector/src/ui/property_panel.rs
@@ -0,0 +1,107 @@
+//! Property panel for displaying detailed component information.
+//!
+//! This module provides a property panel that displays the reflected component data
+//! for the currently selected entity or component in a clean, organized format.
+//!
+//! # Related Documentation
+//!
+//! - [Bevy UI Guide](https://docs.rs/bevy/latest/bevy/ui/index.html) - Core UI system documentation
+//! - [`crate::events::EntityInspectorRows`] - Data source for property information
+//! - [`crate::theme::InspectorTheme`] - Theming system for consistent styling
+//! - [`PropertyPanel`] - Main component marker for the property panel
+
+use crate::events::EntityInspectorRows;
+use crate::theme::InspectorTheme;
+use bevy::prelude::*;
+
+/// Component marker for the property panel container
+#[derive(Component)]
+pub struct PropertyPanel;
+
+/// Component marker for the property panel content area (scrollable section)
+#[derive(Component)]
+pub struct PropertyPanelContent;
+
+/// Properties for creating the property panel
+pub struct PropertyPanelProps {
+    /// Width of the property panel
+    pub width: Val,
+    /// Whether to show component type headers
+    pub show_headers: bool,
+    /// Whether to use alternating row colors
+    pub alternating_rows: bool,
+}
+
+impl Default for PropertyPanelProps {
+    fn default() -> Self {
+        Self {
+            width: Val::Percent(60.0), // Take 60% of the width (complement to 40% tree)
+            show_headers: true,
+            alternating_rows: true,
+        }
+    }
+}
+
+/// Creates the property panel UI structure
+pub fn create_property_panel(
+    commands: &mut Commands,
+    props: PropertyPanelProps,
+    theme: &InspectorTheme,
+) -> Entity {
+    commands
+        .spawn((
+            Node {
+                width: props.width,
+                height: Val::Percent(100.0),
+                flex_direction: FlexDirection::Column,
+                border: UiRect::left(Val::Px(1.0)),
+                padding: UiRect::all(Val::Px(8.0)),
+                overflow: Overflow::clip_y(),
+                ..default()
+            },
+            PropertyPanel,
+            BackgroundColor(Color::srgb(0.12, 0.12, 0.12)), // Slightly lighter than tree background
+            BorderColor::all(Color::srgb(0.3, 0.3, 0.3)),
+        ))
+        .with_children(|parent| {
+            // Header
+            parent.spawn((
+                Text::new("Properties"),
+                TextFont {
+                    font_size: 16.0,
+                    ..default()
+                },
+                TextColor(theme.text_color),
+                Node {
+                    margin: UiRect::bottom(Val::Px(12.0)),
+                    ..default()
+                },
+            ));
+
+            // Scrollable content area
+            parent.spawn((
+                Node {
+                    width: Val::Percent(100.0),
+                    height: Val::Percent(100.0),
+                    flex_direction: FlexDirection::Column,
+                    overflow: Overflow::clip_y(),
+                    ..default()
+                },
+                PropertyPanelContent, // Add marker component
+                BackgroundColor(Color::NONE),
+            ));
+        })
+        .id()
+}
+
+/// Updates the property panel selection based on the selected tree node
+/// This is a simplified stub that creates basic content
+pub fn update_property_panel_selection(
+    _parent: &(),
+    _selected_node_id: &str,
+    _inspector_data: &EntityInspectorRows,
+    _theme: &InspectorTheme,
+) {
+    // TODO: Implement property panel content updates
+    // For now, this is handled by the update_property_panel system
+}
diff --git a/crates/bevy_entity_inspector/src/ui/tree.rs b/crates/bevy_entity_inspector/src/ui/tree.rs
new file mode 100644
index 00000000..ba5fddac
--- /dev/null
+++ b/crates/bevy_entity_inspector/src/ui/tree.rs
@@ -0,0 +1,911 @@
+//! Tree view UI components for displaying hierarchical data.
+//!
+//! This module provides a comprehensive tree view system for displaying hierarchical
+//! entity data in the inspector. It includes selection handling, expansion states,
+//! and visual styling for different node types.
+//!
+//! # Related Documentation
+//!
+//! - [Bevy UI Guide](https://docs.rs/bevy/latest/bevy/ui/index.html) - Core UI system documentation
+//! - [`TreeNode`] - Individual tree node component with metadata
+//! - [`TreeState`] - Global tree state resource for tracking nodes and selection
+//! - [`crate::TreeNodeType`] - Node type enum for visual styling
+
+use bevy::{
+    core_widgets::{ControlOrientation, CoreScrollbar, CoreScrollbarPlugin, CoreScrollbarThumb},
+    ecs::{relationship::RelatedSpawner, spawn::SpawnWith},
+    picking::hover::Hovered,
+    prelude::*,
+};
+use std::collections::HashMap;
+
+/// A node in the tree structure representing entities, crate groups, components, or fields.
+///
+/// This component stores the complete hierarchical information for displaying inspector data
+/// in a tree format. Each node represents a different level of the entity hierarchy:
+/// - **Entity nodes**: Root level, showing entity names or IDs
+/// - **Crate group nodes**: Group components by their crate (e.g., "`bevy_transform`")
+/// - **Component nodes**: Individual components within a crate group
+/// - **Field nodes**: Individual fields/properties within a component
+///
+/// # Field Population
+///
+/// Values are populated by [`crate::tree_builder::InspectorTreeBuilder`] when processing
+/// [`crate::events::EntityInspectorRows`] data:
+/// - `id`: Generated hierarchically (e.g., "`entity_42`", "`entity_42_bevy_transform`", "`entity_42_bevy_transform_Transform`")
+/// - `label`: Human-readable display text extracted from component names, field names, or entity names
+/// - `is_expanded`: Defaults to `false`, controlled by user interaction
+/// - `children`: Populated automatically based on reflection data structure
+/// - `parent`: Set during tree construction to maintain hierarchy
+/// - `depth`: Calculated based on position in hierarchy (entity=0, crate=1, component=2, field=3)
+/// - `node_type`: Determined by the data type being represented
+///
+/// # Label vs ID Difference
+///
+/// - **`id`**: Technical identifier for tree management, unique across entire tree
+///   - Example: `"entity_42_bevy_transform_Transform_translation"`
+/// - **`label`**: User-friendly display text shown in UI
+///   - Example: `"translation: Vec3(0.0, 1.0, 0.0)"`
+///
+/// The `id` is used for tree state management, event routing, and parent-child relationships,
+/// while `label` is purely for display purposes and may contain formatted values.
+#[derive(Component, Clone, Debug)]
+pub struct TreeNode {
+    /// Unique hierarchical identifier for tree state management.
+    ///
+    /// Format: `"entity_{id}_{crate}_{component}_{field}"` where each level
+    /// is appended as you go deeper in the hierarchy. Used internally for
+    /// tracking expansion state, selection, and parent-child relationships.
+    pub id: String,
+
+    /// Human-readable display text shown in the UI.
+    ///
+    /// Contains the formatted display name that users see, such as:
+    /// - Entity: `"Player (42)"` or `"Entity 42"`
+    /// - Crate group: `"bevy_transform"`
+    /// - Component: `"Transform"`
+    /// - Field: `"translation: Vec3(0.0, 1.0, 0.0)"`
+    ///
+    /// This differs from `id` by being display-focused and may include
+    /// formatted values, spaces, and special characters.
+    pub label: String,
+
+    /// Whether this node is currently expanded to show its children.
+    ///
+    /// Controlled by user clicks on disclosure triangles. When `true`,
+    /// child nodes are visible in the tree. When `false`, children are
+    /// hidden. Automatically set to `false` for leaf nodes (fields).
+    pub is_expanded: bool,
+
+    /// List of child node IDs in display order.
+    ///
+    /// Populated automatically during tree construction based on:
+    /// - Entity children: Crate groups containing that entity's components
+    /// - Crate children: Components belonging to that crate
+    /// - Component children: Fields extracted via [`crate::reflection::extract_reflect_fields`]
+    /// - Field children: None (fields are leaf nodes)
+    ///
+    /// Order is maintained for consistent display (crate alphabetical, then component alphabetical).
+    pub children: Vec<String>,
+
+    /// ID of the parent node in the hierarchy.
+    ///
+    /// `None` for root-level entity nodes. For all other nodes, contains
+    /// the ID of their immediate parent. Used for tree navigation and
+    /// maintaining hierarchical relationships during UI updates.
+    pub parent: Option<String>,
+
+    /// Nesting depth in the tree hierarchy (0-based).
+    ///
+    /// Determines visual indentation and helps with styling:
+    /// - `0`: Entity nodes (root level)
+    /// - `1`: Crate group nodes
+    /// - `2`: Component nodes  
+    /// - `3`: Field nodes (leaf level)
+    ///
+    /// Used to calculate left padding: `depth * indent_size`.
+    pub depth: usize,
+
+    /// Classification for visual styling and behavior.
+    ///
+    /// Determines text color, opacity, and other visual properties.
+    /// See [`crate::TreeNodeType`] for details on each type's appearance.
+    pub node_type: crate::TreeNodeType,
+}
+
+/// Global state for the tree view, managing all nodes and selection.
+///
+/// This resource serves as the central data store for the entire tree UI,
+/// maintaining both the hierarchical structure and interactive state.
+/// It's updated by [`crate::tree_builder::InspectorTreeBuilder`] when
+/// entity data changes, and by interaction systems when users click nodes.
+///
+/// # State Management
+///
+/// The tree state is rebuilt when:
+/// - New [`crate::events::InspectorEvent`]s indicate entity/component changes
+/// - User interactions trigger expansion/collapse via [`handle_tree_node_interactions`]
+/// - Full refresh is requested
+///
+/// Selection and expansion states are preserved across rebuilds to maintain
+/// user context and avoid UI flickering.
+#[derive(Resource, Default, Clone)]
+pub struct TreeState {
+    /// Hierarchical map of all tree nodes by their unique ID.
+    ///
+    /// Contains every node in the tree, from root entities down to individual
+    /// component fields. The key is the node's `id` field, allowing fast
+    /// lookups during rendering and interaction handling.
+    pub nodes: HashMap<String, TreeNode>,
+
+    /// Ordered list of top-level entity node IDs.
+    ///
+    /// These are the entities that appear at the root level of the tree.
+    /// Order determines display sequence and is typically sorted for
+    /// consistent presentation (entities with components first, then alphabetical).
+    pub root_nodes: Vec<String>,
+
+    /// ID of the currently selected node for property panel display.
+    ///
+    /// When a user clicks any tree node, this is updated to that node's ID,
+    /// triggering [`TreeNodeSelected`] events that update the property panel.
+    /// `None` indicates no selection (property panel shows placeholder content).
+    pub selected_node: Option<String>,
+}
+
+/// Configuration parameters for tree node creation and styling.
+///
+/// Used when programmatically creating tree nodes to control their
+/// interactive behavior and visual state. This is separate from the
+/// persistent state stored in [`TreeNode`] itself.
+#[derive(Default)]
+pub struct TreeNodeProps {
+    /// Whether this node should respond to selection clicks.
+    ///
+    /// When `true`, clicking the node will update [`TreeState::selected_node`]
+    /// and emit [`TreeNodeSelected`] events. All nodes are typically selectable
+    /// in the inspector to allow property panel updates.
+    pub selectable: bool,
+
+    /// Whether this node should be visually highlighted as selected.
+    ///
+    /// Controls the initial background color when creating the node.
+    /// This is usually determined by comparing the node's ID with
+    /// [`TreeState::selected_node`] during UI construction.
+    pub selected: bool,
+}
+
+/// Component marker for interactive tree node UI elements.
+///
+/// This component is attached to the clickable [`Button`] entity that represents
+/// a tree node in the UI. It stores the node's ID to enable event routing and
+/// state synchronization between the UI element and the logical tree data.
+///
+/// # Purpose
+///
+/// - **Event Routing**: When a tree node is clicked, this component helps identify
+///   which logical tree node was selected
+/// - **State Sync**: Links UI interaction state with tree data state
+/// - **Selection Management**: Enables updating both visual styling and logical selection
+///
+/// Used by [`handle_tree_node_interactions`] to process click events and
+/// [`update_tree_node_style`] to apply selection/hover styling.
+#[derive(Component)]
+pub struct TreeNodeWidget {
+    /// Reference to the logical tree node's unique identifier.
+    ///
+    /// This must match a key in [`TreeState::nodes`] to enable proper
+    /// event handling and state synchronization. When this UI element
+    /// is clicked, the corresponding [`TreeNode`] will be found using this ID.
+    pub node_id: String,
+}
+
+/// Component marker for tree node text display elements.
+///
+/// Attached to the [`Text`] entity that shows the node's label text.
+/// This separation allows for independent styling and interaction handling
+/// between the clickable button area and the text content.
+///
+/// # Purpose
+///
+/// - **Text Styling**: Enables targeted styling of text elements separate from button styling
+/// - **Content Updates**: Allows updating text content without affecting button interaction
+/// - **Accessibility**: Maintains semantic separation between interactive and display elements
+#[derive(Component)]
+pub struct TreeLabel {
+    /// Reference to the tree node this label represents.
+    ///
+    /// Links the text element back to its logical tree node for
+    /// potential text updates or styling based on node state.
+    pub node_id: String,
+}
+
+/// Component marker for the scrollable tree container.
+///
+/// This marks the main scrollable area that contains all tree nodes.
+/// It's separate from the outer frame that contains scrollbars, allowing
+/// for proper scroll behavior and content management.
+///
+/// # Purpose
+///
+/// - **Content Management**: Identifies where tree nodes should be spawned
+/// - **Scroll Behavior**: Enables proper scrolling when content overflows
+/// - **Layout Isolation**: Separates tree content from scrollbar UI elements
+///
+/// Used by [`handle_tree_expansion_changes`] to find where to spawn new
+/// tree nodes when the tree structure is rebuilt.
+#[derive(Component)]
+pub struct TreeContainer;
+
+/// Event emitted when a tree node is selected by user interaction.
+///
+/// This event is fired whenever a user clicks on any tree node, regardless
+/// of whether it's an entity, crate group, component, or field. The selection
+/// triggers updates to both the tree visual state and the property panel content.
+///
+/// # Event Flow
+///
+/// 1. User clicks a tree node button
+/// 2. [`handle_tree_node_interactions`] detects the click
+/// 3. [`TreeState::selected_node`] is updated
+/// 4. This event is emitted with the selected node's ID
+/// 5. Property panel systems listen for this event to update their content
+///
+/// # Property Panel Integration
+///
+/// The property panel uses this event to determine what component data to display:
+/// - **Entity selection**: Shows all components for that entity
+/// - **Component selection**: Shows detailed fields for that specific component
+/// - **Field selection**: Shows the parent component with the selected field highlighted
+#[derive(Event, BufferedEvent)]
+pub struct TreeNodeSelected {
+    /// ID of the tree node that was selected.
+    ///
+    /// This corresponds to a key in [`TreeState::nodes`] and can be used
+    /// to retrieve the full node data including its type, depth, and content.
+    pub node_id: String,
+}
+
+/// Event fired when a tree node's expansion state changes.
+///
+/// Currently not actively used but provides infrastructure for future
+/// expansion-specific functionality like lazy loading, animation, or
+/// state persistence across sessions.
+///
+/// # Future Use Cases
+///
+/// - **Lazy Loading**: Load component data only when nodes are expanded
+/// - **Animations**: Trigger expand/collapse animations
+/// - **State Persistence**: Remember expansion states across app restarts
+/// - **Performance**: Defer expensive reflection operations until needed
+#[derive(Event, BufferedEvent)]
+pub struct TreeNodeExpanded {
+    /// ID of the node whose expansion state changed.
+    pub node_id: String,
+    /// New expansion state after the change.
+    pub is_expanded: bool,
+}
+
+/// Visual and layout configuration for the tree view appearance.
+///
+/// This resource controls all aspects of tree rendering including spacing,
+/// colors, and sizing. It can be modified at runtime to change the tree's
+/// appearance or replaced entirely to switch between light/dark themes.
+///
+/// # Theming Integration
+///
+/// While this provides tree-specific configuration, it works alongside
+/// [`crate::theme::InspectorTheme`] for overall inspector theming.
+/// Consider using [`crate::theme::InspectorTheme`] for broader styling
+/// consistency across all inspector components.
+///
+/// # Visual Hierarchy
+///
+/// The configuration supports visual hierarchy through:
+/// - **Indentation**: `indent_size` creates nested structure
+/// - **Colors**: Different node types get different `text_color` variations
+/// - **Interactive Feedback**: `selected_color` and `hover_color` for user feedback
+#[derive(Resource)]
+pub struct TreeConfig {
+    /// Horizontal indentation per tree depth level in pixels.
+    ///
+    /// Each level deeper in the hierarchy adds this amount of left padding.
+    /// For example, with `indent_size: 20.0`:
+    /// - Entities (depth 0): 0px padding
+    /// - Crate groups (depth 1): 20px padding  
+    /// - Components (depth 2): 40px padding
+    /// - Fields (depth 3): 60px padding
+    pub indent_size: f32,
+
+    /// Height of each tree node row in pixels.
+    ///
+    /// Consistent height for all tree nodes regardless of content.
+    /// Affects vertical spacing and click target size. Should be
+    /// large enough to accommodate text and provide comfortable clicking.
+    pub node_height: f32,
+
+    /// Size of disclosure triangle indicators in pixels.
+    ///
+    /// Controls both the font size of the triangle characters (▶/▼)
+    /// and the size of their container area. Affects visual prominence
+    /// of expandable vs non-expandable nodes.
+    pub triangle_size: f32,
+
+    /// Font size for tree node text labels.
+    ///
+    /// Applied to all tree text content. Should balance readability
+    /// with information density, especially for deeply nested structures.
+    pub font_size: f32,
+
+    /// Default text color for tree node labels.
+    ///
+    /// Individual node types may override this color in the rendering
+    /// logic for visual hierarchy (entities, crate groups, components, fields).
+    pub text_color: Color,
+
+    /// Background color for the currently selected tree node.
+    ///
+    /// Provides clear visual feedback about which node is selected
+    /// and will be displayed in the property panel. Should contrast
+    /// well with `text_color` for accessibility.
+    pub selected_color: Color,
+
+    /// Background color for tree nodes under mouse hover.
+    ///
+    /// Provides interactive feedback before clicking. Should be
+    /// subtle enough not to distract but visible enough to indicate
+    /// interactivity. Often a lighter version of `selected_color`.
+    pub hover_color: Color,
+
+    /// Background color for the entire tree container.
+    ///
+    /// Sets the overall tree panel background. Should provide good
+    /// contrast with node colors and fit the overall inspector theme.
+    pub background_color: Color,
+}
+
+impl Default for TreeConfig {
+    fn default() -> Self {
+        Self {
+            indent_size: 20.0,
+            node_height: 24.0,
+            triangle_size: 12.0,
+            font_size: 14.0,
+            text_color: Color::srgb(0.9, 0.9, 0.9),
+            selected_color: Color::srgb(0.2, 0.4, 0.8),
+            hover_color: Color::srgb(0.15, 0.15, 0.15),
+            background_color: Color::srgb(0.1, 0.1, 0.1),
+        }
+    }
+}
+
+/// Theme tokens for tree components
+pub mod tree_tokens {
+    /// Tree node styles
+    pub const TREE_NODE_TEXT: &str = "tree_node_text";
+    /// Tree node selected style
+    pub const TREE_NODE_SELECTED: &str = "tree_node_selected";
+    /// Tree node hover style
+    pub const TREE_NODE_HOVER: &str = "tree_node_hover";
+    /// Tree background style
+    pub const TREE_BACKGROUND: &str = "tree_background";
+    /// Tree border style
+    pub const TREE_BORDER: &str = "tree_border";
+}
+
+/// Creates a tree node widget bundle with interaction and styling components.
+///
+/// This function constructs the UI bundle for a single tree node, including
+/// the layout, interaction area, and visual styling. The resulting bundle
+/// can be spawned as an entity to create an interactive tree node.
+///
+/// # Parameters
+///
+/// - `node`: The logical tree node data containing ID, label, hierarchy info
+/// - `props`: Display properties controlling selection state and interactivity
+/// - `config`: Visual configuration for sizing, colors, and spacing
+///
+/// # Returns
+///
+/// A bundle containing [`Node`], [`TreeNodeWidget`], [`BackgroundColor`], and [`BorderRadius`]
+/// components that together create a styled, interactive tree node UI element.
+///
+/// # Usage
+///
+/// Typically called by [`build_tree_node_recursive`] during tree construction,
+/// but can also be used for custom tree node creation.
+pub fn tree_node(node: &TreeNode, props: TreeNodeProps, config: &TreeConfig) -> impl Bundle {
+    let node_id = node.id.clone();
+    let _has_children = !node.children.is_empty();
+
+    (
+        Node {
+            width: Val::Percent(100.0),
+            height: Val::Px(config.node_height),
+            flex_direction: FlexDirection::Row,
+            align_items: AlignItems::Center,
+            padding: UiRect::left(Val::Px(node.depth as f32 * config.indent_size)),
+            ..default()
+        },
+        TreeNodeWidget {
+            node_id: node_id.clone(),
+        },
+        BackgroundColor(if props.selected {
+            config.selected_color
+        } else {
+            Color::NONE
+        }),
+        BorderRadius::all(Val::Px(2.0)),
+    )
+}
+
+/// Creates a scrollable tree container with visible scrollbars and grid layout.
+///
+/// This function builds the complete tree container infrastructure including:
+/// - A grid-based frame that positions the scroll area and scrollbars
+/// - A scrollable content area marked with [`TreeContainer`] for tree nodes
+/// - Vertical and horizontal scrollbars with interactive thumbs
+/// - Proper spacing and visual styling
+///
+/// # Architecture
+///
+/// The container uses a CSS Grid layout with:
+/// - Row 1, Column 1: Main scrollable tree content area
+/// - Row 1, Column 2: Vertical scrollbar
+/// - Row 2, Column 1: Horizontal scrollbar  
+/// - Row 2, Column 2: (Empty corner space)
+///
+/// # Parameters
+///
+/// - `config`: Visual configuration for colors and styling
+///
+/// # Returns
+///
+/// A complex bundle using Bevy's spawn system that creates the multi-entity
+/// container structure. The actual [`TreeContainer`] marker is on a child entity,
+/// not the returned root entity.
+///
+/// # Usage
+///
+/// Called once during tree UI setup to create the container where tree nodes
+/// will be spawned by [`handle_tree_expansion_changes`].
+pub fn tree_container(config: &TreeConfig) -> impl Bundle {
+    let background_color = config.background_color;
+
+    (
+        // Frame element which contains the scroll area and scrollbars.
+        Node {
+            display: Display::Grid,
+            width: Val::Auto,
+            min_width: Val::Percent(100.0),
+            height: Val::Auto,
+            min_height: Val::Percent(100.0),
+            grid_template_columns: vec![RepeatedGridTrack::flex(1, 1.), RepeatedGridTrack::auto(1)],
+            grid_template_rows: vec![RepeatedGridTrack::flex(1, 1.), RepeatedGridTrack::auto(1)],
+            row_gap: Val::Px(2.0),
+            column_gap: Val::Px(2.0),
+            ..default()
+        },
+        BackgroundColor(background_color),
+        BorderRadius::all(Val::Px(4.0)),
+        Children::spawn((SpawnWith(move |parent: &mut RelatedSpawner<ChildOf>| {
+            // The actual scrolling area.
+            let scroll_area_id = parent
+                .spawn((
+                    Node {
+                        display: Display::Flex,
+                        flex_direction: FlexDirection::Column,
+                        padding: UiRect::all(Val::Px(4.0)),
+                        overflow: Overflow::scroll(),
+                        ..default()
+                    },
+                    TreeContainer,
+                    BackgroundColor(background_color),
+                    ScrollPosition(Vec2::ZERO),
+                ))
+                .id();
+
+            // Vertical scrollbar
+            parent.spawn((
+                Node {
+                    min_width: Val::Px(16.0),
+                    grid_row: GridPlacement::start(1),
+                    grid_column: GridPlacement::start(2),
+                    ..default()
+                },
+                CoreScrollbar {
+                    target: scroll_area_id,
+                    orientation: ControlOrientation::Vertical,
+                    min_thumb_length: 20.0,
+                },
+                Children::spawn(Spawn((
+                    Node {
+                        position_type: PositionType::Absolute,
+                        ..default()
+                    },
+                    Hovered::default(),
+                    BackgroundColor(Color::srgb(0.5, 0.5, 0.5)),
+                    BorderRadius::all(Val::Px(4.0)),
+                    CoreScrollbarThumb,
+                ))),
+            ));
+
+            // Horizontal scrollbar (bottom row)
+            parent.spawn((
+                Node {
+                    min_height: Val::Px(16.0),
+                    grid_row: GridPlacement::start(2),
+                    grid_column: GridPlacement::start(1),
+                    ..default()
+                },
+                CoreScrollbar {
+                    target: scroll_area_id,
+                    orientation: ControlOrientation::Horizontal,
+                    min_thumb_length: 20.0,
+                },
+                Children::spawn(Spawn((
+                    Node {
+                        position_type: PositionType::Absolute,
+                        ..default()
+                    },
+                    Hovered::default(),
+                    BackgroundColor(Color::srgb(0.5, 0.5, 0.5)),
+                    BorderRadius::all(Val::Px(4.0)),
+                    CoreScrollbarThumb,
+                ))),
+            ));
+        }),)),
+    )
+}
+
+/// System to handle tree node selection styling
+pub fn update_tree_node_style(
+    mut query: Query<
+        (&mut BackgroundColor, &TreeNodeWidget, &Interaction),
+        (Changed<Interaction>, With<TreeNodeWidget>),
+    >,
+    tree_state: Option<Res<TreeState>>,
+    config: Res<TreeConfig>,
+) {
+    if let Some(state) = tree_state {
+        for (mut bg_color, node_widget, interaction) in query.iter_mut() {
+            let is_selected = state.selected_node.as_ref() == Some(&node_widget.node_id);
+
+            match *interaction {
+                Interaction::Pressed => {
+                    bg_color.0 = config.selected_color;
+                }
+                Interaction::Hovered => {
+                    bg_color.0 = config.hover_color;
+                }
+                Interaction::None => {
+                    if is_selected {
+                        bg_color.0 = config.selected_color;
+                    } else {
+                        bg_color.0 = Color::NONE;
+                    }
+                }
+            }
+        }
+    }
+}
+
+/// System to handle tree node clicks and expand/collapse functionality
+pub fn handle_tree_node_interactions(
+    tree_node_query: Query<(&Interaction, &TreeNodeWidget), (Changed<Interaction>, With<Button>)>,
+    mut tree_state: ResMut<TreeState>,
+    mut selection_events: EventWriter<TreeNodeSelected>,
+) {
+    for (interaction, node_widget) in tree_node_query.iter() {
+        if *interaction == Interaction::Pressed {
+            let node_id = &node_widget.node_id;
+
+            if let Some(node) = tree_state.nodes.get_mut(node_id) {
+                // Toggle expansion state if the node has children
+                if !node.children.is_empty() {
+                    node.is_expanded = !node.is_expanded;
+                    info!(
+                        "Toggled node {} expansion to: {}",
+                        node_id, node.is_expanded
+                    );
+                }
+
+                // Always update selected node for any clickable node
+                tree_state.selected_node = Some(node_id.clone());
+                info!("Selected node: {}", node_id);
+
+                // Emit selection event for property panel updates
+                selection_events.write(TreeNodeSelected {
+                    node_id: node_id.clone(),
+                });
+            }
+        }
+    }
+}
+
+/// System to handle tree expansion changes - simplified observer pattern
+pub fn handle_tree_expansion_changes(
+    tree_state: ResMut<TreeState>,
+    tree_container_query: Query<Entity, With<TreeContainer>>,
+    children_query: Query<&Children>,
+    tree_config: Res<TreeConfig>,
+    mut commands: Commands,
+) {
+    // Only rebuild UI when the tree state has actually changed (user interaction)
+    if tree_state.is_changed() && !tree_state.is_added() {
+        info!("Tree state changed (user interaction), rebuilding UI");
+
+        for container_entity in tree_container_query.iter() {
+            // Clear existing tree content
+            if let Ok(children) = children_query.get(container_entity) {
+                let children_vec: Vec<Entity> = children.to_vec();
+                for child in children_vec {
+                    commands.entity(child).despawn();
+                }
+            }
+
+            // Rebuild tree with current state
+            // Sort root nodes so that nodes with children appear first
+            let mut sorted_root_ids: Vec<_> = tree_state.root_nodes.clone();
+            sorted_root_ids.sort_by(|a, b| {
+                let a_node = tree_state.nodes.get(a);
+                let b_node = tree_state.nodes.get(b);
+
+                match (a_node, b_node) {
+                    (Some(a), Some(b)) => {
+                        let a_has_children = !a.children.is_empty();
+                        let b_has_children = !b.children.is_empty();
+
+                        // Nodes with children come first, then sort alphabetically within each group
+                        match (a_has_children, b_has_children) {
+                            (true, false) => std::cmp::Ordering::Less,
+                            (false, true) => std::cmp::Ordering::Greater,
+                            _ => a.label.cmp(&b.label),
+                        }
+                    }
+                    _ => std::cmp::Ordering::Equal,
+                }
+            });
+
+            for root_id in &sorted_root_ids {
+                if let Some(root_node) = tree_state.nodes.get(root_id) {
+                    let node_entity = build_tree_node_recursive(
+                        &mut commands,
+                        root_node,
+                        &tree_state,
+                        &tree_config,
+                    );
+                    commands.entity(container_entity).add_child(node_entity);
+                }
+            }
+        }
+    }
+}
+
+/// Builds a tree view UI from the given state and configuration
+pub fn build_tree_view(
+    commands: &mut Commands,
+    _tree_state: &TreeState,
+    config: &TreeConfig,
+) -> Entity {
+    let frame = commands.spawn(tree_container(config)).id();
+
+    // We need to find the actual TreeContainer within the frame structure
+    // Since we can't easily access it here, we'll need to modify our approach
+
+    frame
+}
+
+/// Recursively builds tree nodes and their children using standard Bevy UI
+pub fn build_tree_node_recursive(
+    commands: &mut Commands,
+    node: &TreeNode,
+    tree_state: &TreeState,
+    config: &TreeConfig,
+) -> Entity {
+    let has_children = !node.children.is_empty();
+
+    // Create a container for the entire node (button + children)
+    let node_container = commands
+        .spawn(Node {
+            width: Val::Auto,
+            min_width: Val::Percent(100.0),
+            height: Val::Auto,
+            flex_direction: FlexDirection::Column,
+            ..default()
+        })
+        .id();
+
+    // Create the main clickable node row - make all nodes clickable for selection
+    let node_row = commands
+        .spawn((
+            Button, // All nodes are now buttons for selection
+            Node {
+                width: Val::Auto,
+                min_width: Val::Percent(100.0),
+                height: Val::Auto,
+                min_height: Val::Px(config.node_height),
+                flex_direction: FlexDirection::Row,
+                align_items: AlignItems::Center,
+                padding: UiRect::left(Val::Px(node.depth as f32 * config.indent_size)),
+                ..default()
+            },
+            TreeNodeWidget {
+                node_id: node.id.clone(),
+            },
+            BackgroundColor(if tree_state.selected_node.as_ref() == Some(&node.id) {
+                config.selected_color
+            } else if has_children {
+                Color::NONE
+            } else {
+                // Slightly different background for non-expandable components
+                Color::srgba(0.1, 0.1, 0.1, 0.3)
+            }),
+            BorderRadius::all(Val::Px(2.0)),
+        ))
+        .id();
+
+    // Add disclosure triangle for visual indication
+    if has_children {
+        let triangle_char = if node.is_expanded { "▼" } else { "▶" };
+        let triangle = commands
+            .spawn((
+                Text::new(triangle_char),
+                TextFont {
+                    font_size: config.triangle_size,
+                    ..default()
+                },
+                TextColor(config.text_color),
+                Node {
+                    width: Val::Px(config.triangle_size + 8.0),
+                    height: Val::Px(config.triangle_size + 8.0),
+                    justify_content: JustifyContent::Center,
+                    align_items: AlignItems::Center,
+                    margin: UiRect::right(Val::Px(4.0)),
+                    ..default()
+                },
+            ))
+            .id();
+        commands.entity(node_row).add_child(triangle);
+    } else {
+        // Add a subtle dot indicator for non-expandable items
+        let dot_indicator = commands
+            .spawn((
+                Text::new("•"),
+                TextFont {
+                    font_size: config.triangle_size * 0.6,
+                    ..default()
+                },
+                TextColor(Color::srgba(0.5, 0.5, 0.5, 0.5)),
+                Node {
+                    width: Val::Px(config.triangle_size + 8.0),
+                    height: Val::Px(config.triangle_size + 8.0),
+                    justify_content: JustifyContent::Center,
+                    align_items: AlignItems::Center,
+                    margin: UiRect::right(Val::Px(4.0)),
+                    ..default()
+                },
+            ))
+            .id();
+        commands.entity(node_row).add_child(dot_indicator);
+    }
+
+    // Add label with flexible container and styling based on node type
+    let label_container = commands
+        .spawn(Node {
+            flex_grow: 1.0,
+            align_items: AlignItems::Center,
+            ..default()
+        })
+        .id();
+
+    // Determine styling based on node type and expandability
+    let (text_color, _font_weight, prefix) = match node.node_type {
+        crate::TreeNodeType::Entity => (config.text_color, None::<()>, ""),
+        crate::TreeNodeType::CrateGroup => (Color::srgb(0.8, 0.9, 1.0), None::<()>, ""),
+        crate::TreeNodeType::Component => {
+            // Reduce alpha for components without children (non-expandable)
+            if has_children {
+                (Color::srgb(0.9, 0.8, 0.7), None::<()>, "")
+            } else {
+                (Color::srgba(0.9, 0.8, 0.7, 0.5), None::<()>, "")
+            }
+        }
+        crate::TreeNodeType::Field => (Color::srgb(0.7, 0.7, 0.7), None::<()>, ""),
+    };
+
+    let label_text = commands
+        .spawn((
+            Text::new(format!("{}{}", prefix, node.label)),
+            TextFont {
+                font_size: config.font_size,
+                ..default()
+            },
+            TextColor(text_color),
+            TreeLabel {
+                node_id: node.id.clone(),
+            },
+        ))
+        .id();
+
+    commands.entity(label_container).add_child(label_text);
+    commands.entity(node_row).add_child(label_container);
+
+    // Add the row to the container
+    commands.entity(node_container).add_child(node_row);
+
+    // Add children below the row if expanded
+    if node.is_expanded {
+        // Sort child nodes so that nodes with children appear first
+        let mut sorted_child_ids = node.children.clone();
+        sorted_child_ids.sort_by(|a, b| {
+            let a_node = tree_state.nodes.get(a);
+            let b_node = tree_state.nodes.get(b);
+
+            match (a_node, b_node) {
+                (Some(a), Some(b)) => {
+                    let a_has_children = !a.children.is_empty();
+                    let b_has_children = !b.children.is_empty();
+
+                    // Nodes with children come first, then sort alphabetically within each group
+                    match (a_has_children, b_has_children) {
+                        (true, false) => std::cmp::Ordering::Less,
+                        (false, true) => std::cmp::Ordering::Greater,
+                        _ => a.label.cmp(&b.label),
+                    }
+                }
+                _ => std::cmp::Ordering::Equal,
+            }
+        });
+
+        for child_id in &sorted_child_ids {
+            if let Some(child_node) = tree_state.nodes.get(child_id) {
+                let child_entity =
+                    build_tree_node_recursive(commands, child_node, tree_state, config);
+                commands.entity(node_container).add_child(child_entity);
+            }
+        }
+    }
+
+    node_container
+}
+
+/// Plugin for tree view functionality
+pub struct TreePlugin;
+
+impl Plugin for TreePlugin {
+    fn build(&self, app: &mut App) {
+        app.add_event::<TreeNodeSelected>()
+            .add_event::<TreeNodeExpanded>()
+            .init_resource::<TreeConfig>()
+            .init_resource::<TreeState>()
+            .add_plugins(CoreScrollbarPlugin)
+            .add_systems(
+                Update,
+                (
+                    update_tree_node_style,
+                    handle_tree_node_interactions,
+                    handle_tree_expansion_changes,
+                    update_scrollbar_thumb_style,
+                ),
+            );
+    }
+}
+
+/// Update the color of the scrollbar thumb
+fn update_scrollbar_thumb_style(
+    mut query: Query<
+        (&mut BackgroundColor, &Hovered),
+        (With<CoreScrollbarThumb>, Changed<Hovered>),
+    >,
+) {
+    for (mut thumb_bg, hovered) in query.iter_mut() {
+        let color = if hovered.0 {
+            Color::srgb(0.7, 0.7, 0.7) // Lighter color when hovering
+        } else {
+            Color::srgb(0.5, 0.5, 0.5) // Default color
+        };
+
+        thumb_bg.0 = color;
+    }
+}
diff --git a/crates/bevy_entity_inspector/src/ui_systems.rs b/crates/bevy_entity_inspector/src/ui_systems.rs
new file mode 100644
index 00000000..4605b59c
--- /dev/null
+++ b/crates/bevy_entity_inspector/src/ui_systems.rs
@@ -0,0 +1,723 @@
+//! UI management systems for the entity inspector.
+//!
+//! This module contains the systems responsible for managing the inspector UI,
+//! including event handling, tree rebuilding, and UI spawning.
+//!
+//! # Related Documentation
+//!
+//! - [Bevy Systems](https://docs.rs/bevy/latest/bevy/ecs/system/index.html) - Core system documentation
+//! - [`crate::events::InspectorEvent`] - Events processed by these systems
+//! - [`crate::ui::TreeState`] - UI state management
+//! - [`handle_inspector_events`] - Main event processing system
+
+use crate::events::{EntityInspectorRows, InspectorEvent};
+use crate::ui::{TreeConfig, TreeContainer, TreeState};
+use crate::{build_tree_node_recursive, InspectorTreeBuilder};
+use bevy::platform::collections::HashMap;
+use bevy::prelude::*;
+
+/// Marker component for the inspector tree container
+#[derive(Component)]
+pub struct InspectorTreeContainer;
+
+/// Event-driven system that handles entity inspector changes.
+///
+/// This system is the heart of the inspector's event-driven architecture. It processes
+/// [`InspectorEvent`]s emitted by data sources and updates the tree UI accordingly.
+/// The system is designed to minimize unnecessary UI rebuilds by categorizing events
+/// and applying appropriate update strategies.
+///
+/// For more information on Bevy systems, see the [Systems Guide](https://docs.rs/bevy/latest/bevy/ecs/system/index.html).
+///
+/// # Event Processing
+///
+/// - **Entity Add/Remove**: Triggers full tree rebuild since hierarchy may have changed
+/// - **Entity/Component Updates**: Triggers targeted updates (currently full rebuild, but designed for future optimization)
+/// - **Full Refresh**: Forces complete tree reconstruction
+///
+/// # Performance Optimizations
+///
+/// - Only processes events when they exist (early exit if no events)
+/// - Batches multiple update events into a single tree update operation
+/// - Preserves UI state (expansion, selection) during rebuilds
+/// - Uses efficient tree diffing where possible
+///
+/// # System Parameters
+///
+/// - `events`: [`EventReader`](https://docs.rs/bevy/latest/bevy/ecs/event/struct.EventReader.html) for incoming [`InspectorEvent`]s
+/// - `inspector_data`: Current entity data for tree reconstruction
+/// - `tree_state`: UI tree state with expansion/selection information
+/// - `tree_container_query`: Query to find tree container entities for UI updates
+/// - `children_query`: Query for entity hierarchy traversal during tree updates
+/// - `tree_config`: Visual configuration for tree rendering
+/// - `commands`: Command buffer for UI entity spawning/despawning
+pub fn handle_inspector_events(
+    mut events: EventReader<InspectorEvent>,
+    inspector_data: Res<EntityInspectorRows>,
+    mut tree_state: ResMut<TreeState>,
+    tree_container_query: Query<Entity, With<TreeContainer>>,
+    children_query: Query<&Children>,
+    tree_config: Res<TreeConfig>,
+    mut commands: Commands,
+) {
+    if !events.is_empty() {
+        info!("Processing {} inspector events", events.len());
+
+        let mut needs_full_rebuild = false;
+        let mut updated_entities = std::collections::HashSet::new();
+
+        for event in events.read() {
+            match event {
+                InspectorEvent::EntityAdded(entity) => {
+                    info!("Entity {:?} added", entity);
+                    needs_full_rebuild = true;
+                }
+                InspectorEvent::EntityRemoved(entity) => {
+                    info!("Entity {:?} removed", entity);
+                    needs_full_rebuild = true;
+                }
+                InspectorEvent::EntityUpdated(entity) => {
+                    info!("Entity {:?} updated", entity);
+                    updated_entities.insert(*entity);
+                }
+                InspectorEvent::ComponentAdded(entity, component) => {
+                    info!("Component {} added to entity {:?}", component, entity);
+                    updated_entities.insert(*entity);
+                }
+                InspectorEvent::ComponentRemoved(entity, component) => {
+                    info!("Component {} removed from entity {:?}", component, entity);
+                    updated_entities.insert(*entity);
+                }
+                InspectorEvent::ComponentUpdated(entity, component) => {
+                    info!("Component {} updated on entity {:?}", component, entity);
+                    updated_entities.insert(*entity);
+                }
+                InspectorEvent::FullRefresh => {
+                    info!("Full refresh requested");
+                    needs_full_rebuild = true;
+                }
+            }
+        }
+
+        // Apply updates based on event analysis
+        if needs_full_rebuild {
+            rebuild_full_tree(
+                &inspector_data,
+                &mut tree_state,
+                &tree_container_query,
+                &children_query,
+                &tree_config,
+                &mut commands,
+            );
+        } else if !updated_entities.is_empty() {
+            update_entities_in_tree(
+                &updated_entities,
+                &inspector_data,
+                &mut tree_state,
+                &tree_container_query,
+                &children_query,
+                &tree_config,
+                &mut commands,
+            );
+        }
+    }
+}
+
+/// Rebuilds the entire tree from scratch
+fn rebuild_full_tree(
+    inspector_data: &EntityInspectorRows,
+    tree_state: &mut TreeState,
+    tree_container_query: &Query<Entity, With<TreeContainer>>,
+    children_query: &Query<&Children>,
+    tree_config: &TreeConfig,
+    commands: &mut Commands,
+) {
+    info!(
+        "Rebuilding full tree with {} entities",
+        inspector_data.rows.len()
+    );
+
+    // Preserve expansion states
+    let old_expansion_states = preserve_expansion_states(tree_state);
+
+    // Rebuild tree state from inspector data
+    let tree_builder = InspectorTreeBuilder::build_from_inspector_data(inspector_data);
+    let mut new_tree_state = tree_builder.tree_state;
+    restore_expansion_states(&mut new_tree_state, &old_expansion_states);
+
+    // Update tree state
+    *tree_state = new_tree_state;
+
+    // Rebuild UI
+    for container_entity in tree_container_query.iter() {
+        // Clear existing tree content
+        if let Ok(children) = children_query.get(container_entity) {
+            let children_vec: Vec<Entity> = children.to_vec();
+            for child in children_vec {
+                commands.entity(child).despawn();
+            }
+        }
+
+        // Rebuild tree with current state
+        // Sort root nodes so that nodes with children appear first
+        let mut sorted_root_ids: Vec<_> = tree_state.root_nodes.clone();
+        sorted_root_ids.sort_by(|a, b| {
+            let a_node = tree_state.nodes.get(a);
+            let b_node = tree_state.nodes.get(b);
+
+            match (a_node, b_node) {
+                (Some(a), Some(b)) => {
+                    let a_has_children = !a.children.is_empty();
+                    let b_has_children = !b.children.is_empty();
+
+                    // Nodes with children come first, then sort alphabetically within each group
+                    match (a_has_children, b_has_children) {
+                        (true, false) => std::cmp::Ordering::Less,
+                        (false, true) => std::cmp::Ordering::Greater,
+                        _ => a.label.cmp(&b.label),
+                    }
+                }
+                _ => std::cmp::Ordering::Equal,
+            }
+        });
+
+        for root_id in &sorted_root_ids {
+            if let Some(root_node) = tree_state.nodes.get(root_id) {
+                let node_entity =
+                    build_tree_node_recursive(commands, root_node, tree_state, tree_config);
+                commands.entity(container_entity).add_child(node_entity);
+            }
+        }
+    }
+}
+
+/// Updates specific entities in the tree (more efficient than full rebuild)
+fn update_entities_in_tree(
+    updated_entities: &std::collections::HashSet<Entity>,
+    inspector_data: &EntityInspectorRows,
+    tree_state: &mut TreeState,
+    tree_container_query: &Query<Entity, With<TreeContainer>>,
+    children_query: &Query<&Children>,
+    tree_config: &TreeConfig,
+    commands: &mut Commands,
+) {
+    info!("Updating {} entities in tree", updated_entities.len());
+
+    // For now, do a full rebuild since partial updates are complex
+    // TODO: Implement partial tree updates for better performance
+    rebuild_full_tree(
+        inspector_data,
+        tree_state,
+        tree_container_query,
+        children_query,
+        tree_config,
+        commands,
+    );
+}
+
+/// Preserves expansion states from the current tree for restoration after rebuild
+fn preserve_expansion_states(tree_state: &TreeState) -> HashMap<String, bool> {
+    tree_state
+        .nodes
+        .iter()
+        .map(|(id, node)| (id.clone(), node.is_expanded))
+        .collect()
+}
+
+/// Restores expansion states to a rebuilt tree
+fn restore_expansion_states(tree_state: &mut TreeState, expansion_states: &HashMap<String, bool>) {
+    for (id, is_expanded) in expansion_states {
+        if let Some(node) = tree_state.nodes.get_mut(id) {
+            node.is_expanded = *is_expanded;
+        }
+    }
+}
+
+/// Marker resource to track if UI has been spawned
+#[derive(Resource, Default)]
+pub struct InspectorUiSpawned;
+
+/// Spawns the inspector UI once at startup
+pub fn spawn_inspector_ui_once(
+    mut commands: Commands,
+    inspector_data: Res<EntityInspectorRows>,
+    theme: Res<crate::theme::InspectorTheme>,
+    ui_spawned: Option<Res<InspectorUiSpawned>>,
+) {
+    // Only spawn if we haven't spawned before
+    if ui_spawned.is_none() {
+        info!(
+            "spawn_inspector_ui_once: Spawning UI at startup - waiting for data from configured sources"
+        );
+
+        // Create a UI root container first
+        let ui_root = commands
+            .spawn((
+                Node {
+                    width: Val::Percent(100.0),
+                    height: Val::Percent(100.0),
+                    justify_content: JustifyContent::FlexStart,
+                    align_items: AlignItems::FlexStart,
+                    ..default()
+                },
+                BackgroundColor(Color::NONE),
+            ))
+            .id();
+
+        info!("spawn_inspector_ui_once: Created UI root {:?}", ui_root);
+
+        // Now spawn the inspector and add it to the root
+        let inspector_container =
+            spawn_inspector_ui_internal(&mut commands, &inspector_data, &theme);
+        commands.entity(ui_root).add_child(inspector_container);
+
+        info!("spawn_inspector_ui_once: Added inspector to UI root");
+
+        commands.init_resource::<InspectorUiSpawned>();
+    }
+}
+
+/// Internal function to spawn inspector UI and return the container entity
+fn spawn_inspector_ui_internal(
+    commands: &mut Commands,
+    inspector_data: &EntityInspectorRows,
+    theme: &crate::theme::InspectorTheme,
+) -> Entity {
+    if inspector_data.rows.is_empty() {
+        info!(
+            "spawn_inspector_ui_internal: Creating empty UI - waiting for data from remote source"
+        );
+    } else {
+        info!(
+            "spawn_inspector_ui_internal: Creating UI with {} entities from data source",
+            inspector_data.rows.len()
+        );
+    }
+
+    // Create horizontal layout container for tree + property panel
+    let inspector_panel = commands
+        .spawn((
+            Node {
+                width: Val::Percent(100.0), // Take full width available
+                height: Val::Percent(100.0),
+                flex_direction: FlexDirection::Row, // Horizontal layout
+                border: UiRect::all(Val::Px(1.0)),
+                ..default()
+            },
+            BorderColor::all(Color::srgb(0.3, 0.3, 0.3)),
+            BackgroundColor(Color::srgb(0.1, 0.1, 0.1)),
+        ))
+        .id();
+
+    // Create tree view from inspector data
+    let tree_builder = InspectorTreeBuilder::build_from_inspector_data(inspector_data);
+
+    info!(
+        "spawn_inspector_ui_internal: Tree builder has {} root nodes and {} total nodes",
+        tree_builder.tree_state.root_nodes.len(),
+        tree_builder.tree_state.nodes.len()
+    );
+
+    // Create tree config from theme
+    let tree_config = TreeConfig {
+        indent_size: theme.indent_size,
+        node_height: theme.node_height,
+        triangle_size: theme.disclosure_size,
+        font_size: theme.font_size,
+        text_color: theme.text_color,
+        selected_color: theme.selected_color,
+        hover_color: theme.hover_color,
+        background_color: theme.background_color,
+    };
+
+    // Create left panel for tree (40% width)
+    let tree_panel = commands
+        .spawn((
+            Node {
+                width: Val::Percent(40.0),
+                height: Val::Percent(100.0),
+                flex_direction: FlexDirection::Column,
+                padding: UiRect::all(Val::Px(8.0)),
+                ..default()
+            },
+            BackgroundColor(Color::srgb(0.1, 0.1, 0.1)),
+        ))
+        .id();
+
+    // Build the tree view
+    let tree_entity =
+        crate::ui::tree::build_tree_view(commands, &tree_builder.tree_state, &tree_config);
+
+    // Add tree to left panel
+    commands.entity(tree_panel).add_child(tree_entity);
+
+    // Create property panel (35% width)
+    let property_panel = crate::ui::property_panel::create_property_panel(
+        commands,
+        crate::ui::property_panel::PropertyPanelProps::default(),
+        theme,
+    );
+
+    // Add both panels to main container
+    commands.entity(inspector_panel).add_child(tree_panel);
+    commands.entity(inspector_panel).add_child(property_panel);
+
+    info!(
+        "spawn_inspector_ui_internal: Created inspector panel {:?} with tree {:?} and property panel {:?}",
+        inspector_panel, tree_entity, property_panel
+    );
+
+    inspector_panel
+}
+
+/// Sets up the UI camera needed for the inspector to render
+pub fn setup_inspector_camera(mut commands: Commands) {
+    // Check if there's already a camera with Camera2d component
+    // If not, spawn one for the inspector
+    commands.spawn(Camera2d);
+}
+
+/// System that handles tree node selection and updates the property panel
+pub fn handle_tree_selection(
+    mut selection_events: EventReader<crate::ui::tree::TreeNodeSelected>,
+    mut tree_state: ResMut<TreeState>,
+    inspector_data: Res<EntityInspectorRows>,
+    content_query: Query<Entity, With<crate::ui::property_panel::PropertyPanelContent>>,
+    children_query: Query<&Children>,
+    theme: Res<crate::theme::InspectorTheme>,
+    mut commands: Commands,
+) {
+    for selection_event in selection_events.read() {
+        info!("Tree node selected: {}", selection_event.node_id);
+
+        // Update tree state
+        tree_state.selected_node = Some(selection_event.node_id.clone());
+
+        // Find the property panel content area and update it
+        if let Ok(content_entity) = content_query.single() {
+            // Clear existing content first
+            if let Ok(children) = children_query.get(content_entity) {
+                for child in children.iter() {
+                    commands.entity(child).despawn();
+                }
+            }
+
+            // Rebuild content with new selection
+            commands.entity(content_entity).with_children(|parent| {
+                // Parse the node ID to understand what was selected
+                match parse_node_selection(&selection_event.node_id, &inspector_data) {
+                    Some(SelectedContent::Entity(entity_name)) => {
+                        // Show entity summary
+                        parent.spawn((
+                            Text::new(format!(
+                                "Entity: {}",
+                                if entity_name.is_empty() {
+                                    "Unnamed"
+                                } else {
+                                    &entity_name
+                                }
+                            )),
+                            TextFont {
+                                font_size: 16.0,
+                                ..default()
+                            },
+                            TextColor(theme.text_color),
+                            Node {
+                                margin: UiRect::bottom(Val::Px(12.0)),
+                                ..default()
+                            },
+                        ));
+
+                        // Count components
+                        let entity_count = inspector_data.rows.len();
+                        let component_count: usize = inspector_data
+                            .rows
+                            .values()
+                            .map(|row| row.components.len())
+                            .sum();
+
+                        parent.spawn((
+                            Text::new(format!(
+                                "Total Entities: {entity_count}\nTotal Components: {component_count}"
+                            )),
+                            TextFont {
+                                font_size: 12.0,
+                                ..default()
+                            },
+                            TextColor(Color::srgb(0.8, 0.8, 0.8)),
+                        ));
+                    }
+                    Some(SelectedContent::Component {
+                        entity_id,
+                        component_name,
+                    }) => {
+                        // Show component fields directly - get the actual component data from inspector_data
+                        // Component header
+                        parent.spawn((
+                            Text::new(format!("Component: {component_name}")),
+                            TextFont {
+                                font_size: 16.0,
+                                ..default()
+                            },
+                            TextColor(theme.text_color),
+                            Node {
+                                margin: UiRect::bottom(Val::Px(12.0)),
+                                ..default()
+                            },
+                        ));
+
+                        // Find the component data in inspector_data
+                        let mut found_component = false;
+                        for (entity, row) in &inspector_data.rows {
+                            let current_entity_id = format!("{entity:?}");
+                            if entity_id.contains(&current_entity_id)
+                                || current_entity_id.contains(&entity_id)
+                            {
+                                // Look for the component by name
+                                for (component_type, component_data) in &row.components {
+                                    let (_, type_name) =
+                                        crate::reflection::extract_crate_and_type(component_type);
+                                    if type_name == component_name {
+                                        found_component = true;
+
+                                        // Extract and display all fields
+                                        let fields = crate::reflection::extract_reflect_fields(
+                                            component_data.as_ref(),
+                                        );
+
+                                        if fields.is_empty() {
+                                            parent.spawn((
+                                                Text::new("No reflectable fields"),
+                                                TextFont {
+                                                    font_size: 12.0,
+                                                    ..default()
+                                                },
+                                                TextColor(Color::srgb(0.6, 0.6, 0.6)),
+                                            ));
+                                        } else {
+                                            for (field_name, field_value) in fields {
+                                                // Create a container for each field
+                                                parent
+                                                    .spawn((
+                                                        Node {
+                                                            width: Val::Percent(100.0),
+                                                            padding: UiRect::all(Val::Px(4.0)),
+                                                            margin: UiRect::bottom(Val::Px(2.0)),
+                                                            ..default()
+                                                        },
+                                                        BackgroundColor(Color::srgba(
+                                                            1.0, 1.0, 1.0, 0.05,
+                                                        )),
+                                                    ))
+                                                    .with_children(|field_parent| {
+                                                        // Field name
+                                                        field_parent.spawn((
+                                                            Text::new(format!("{field_name}:")),
+                                                            TextFont {
+                                                                font_size: 12.0,
+                                                                ..default()
+                                                            },
+                                                            TextColor(Color::srgb(0.8, 0.9, 1.0)), // Light blue for field names
+                                                            Node {
+                                                                margin: UiRect::bottom(Val::Px(
+                                                                    2.0,
+                                                                )),
+                                                                ..default()
+                                                            },
+                                                        ));
+
+                                                        // Field value
+                                                        field_parent.spawn((
+                                                            Text::new(field_value),
+                                                            TextFont {
+                                                                font_size: 12.0,
+                                                                ..default()
+                                                            },
+                                                            TextColor(Color::srgb(0.9, 0.9, 0.9)), // White for values
+                                                        ));
+                                                    });
+                                            }
+                                        }
+                                        break;
+                                    }
+                                }
+                                break;
+                            }
+                        }
+
+                        if !found_component {
+                            parent.spawn((
+                                Text::new(format!("Component {component_name} not found")),
+                                TextFont {
+                                    font_size: 12.0,
+                                    ..default()
+                                },
+                                TextColor(Color::srgb(0.8, 0.4, 0.4)),
+                            ));
+                        }
+                    }
+                    Some(SelectedContent::Field {
+                        field_name,
+                        field_value,
+                    }) => {
+                        // Show field details
+                        parent.spawn((
+                            Text::new(format!("Field: {field_name}")),
+                            TextFont {
+                                font_size: 16.0,
+                                ..default()
+                            },
+                            TextColor(theme.text_color),
+                            Node {
+                                margin: UiRect::bottom(Val::Px(12.0)),
+                                ..default()
+                            },
+                        ));
+
+                        parent.spawn((
+                            Text::new(format!("Value: {field_value}")),
+                            TextFont {
+                                font_size: 12.0,
+                                ..default()
+                            },
+                            TextColor(Color::srgb(0.9, 0.9, 0.9)),
+                        ));
+                    }
+                    Some(SelectedContent::CrateGroup(crate_name)) => {
+                        // Show crate group summary
+                        parent.spawn((
+                            Text::new(format!("Crate: {crate_name}")),
+                            TextFont {
+                                font_size: 16.0,
+                                ..default()
+                            },
+                            TextColor(theme.text_color),
+                            Node {
+                                margin: UiRect::bottom(Val::Px(12.0)),
+                                ..default()
+                            },
+                        ));
+
+                        parent.spawn((
+                            Text::new("Select a component to view its properties"),
+                            TextFont {
+                                font_size: 12.0,
+                                ..default()
+                            },
+                            TextColor(Color::srgb(0.7, 0.7, 0.7)),
+                        ));
+                    }
+                    None => {
+                        // Fallback content
+                        parent.spawn((
+                            Text::new(format!("Selected: {}", selection_event.node_id)),
+                            TextFont {
+                                font_size: 12.0,
+                                ..default()
+                            },
+                            TextColor(Color::srgb(0.9, 0.9, 0.9)),
+                        ));
+                    }
+                }
+            });
+        }
+    }
+}
+
+/// Types of content that can be selected in the tree
+enum SelectedContent {
+    Entity(String),
+    Component {
+        entity_id: String,
+        component_name: String,
+    },
+    Field {
+        field_name: String,
+        field_value: String,
+    },
+    CrateGroup(String),
+}
+
+/// Parses a node ID to determine what content should be shown
+fn parse_node_selection(
+    node_id: &str,
+    inspector_data: &EntityInspectorRows,
+) -> Option<SelectedContent> {
+    // Parse node ID format: entity_<entity_id> or entity_<entity_id>_<crate>_<component> or entity_<entity_id>_<crate>_<component>_field_<field>
+
+    if node_id.starts_with("entity_") {
+        let parts: Vec<&str> = node_id.split('_').collect();
+
+        if parts.len() >= 2 {
+            // Extract entity from "entity_<entity_bits>"
+            let entity_part = &parts[1..].join("_"); // Rejoin since entity IDs can contain underscores
+
+            // Try to find the actual entity in inspector data
+            for (entity, row) in &inspector_data.rows {
+                let entity_id_str = format!("{entity:?}"); // This gives us something like "Entity { index: X, generation: Y }"
+
+                if entity_part.contains(
+                    &entity_id_str
+                        .replace("Entity { index: ", "")
+                        .replace(", generation: ", "v")
+                        .replace(" }", ""),
+                ) || entity_part == &entity_id_str
+                {
+                    // Determine what level of the tree was selected
+                    if node_id == format!("entity_{entity:?}") {
+                        // Entity root selected
+                        return Some(SelectedContent::Entity(row.name.clone()));
+                    }
+
+                    // Look for component selection pattern: entity_<entity>_<crate>_<component>
+                    for (component_type, component_data) in &row.components {
+                        let (crate_name, type_name) =
+                            crate::reflection::extract_crate_and_type(component_type);
+                        let expected_component_id =
+                            format!("entity_{entity:?}_{crate_name}_{type_name}");
+
+                        if node_id == expected_component_id {
+                            // Component selected - this is what we want to show fields for
+                            return Some(SelectedContent::Component {
+                                entity_id: format!("{entity:?}"),
+                                component_name: type_name,
+                            });
+                        }
+
+                        // Check for field selection
+                        if node_id.starts_with(&format!("{expected_component_id}_field_")) {
+                            let field_part = node_id
+                                .strip_prefix(&format!("{expected_component_id}_field_"))
+                                .unwrap();
+                            let fields =
+                                crate::reflection::extract_reflect_fields(component_data.as_ref());
+
+                            for (field_name, field_value) in fields {
+                                if field_part == field_name {
+                                    return Some(SelectedContent::Field {
+                                        field_name,
+                                        field_value,
+                                    });
+                                }
+                            }
+                        }
+                    }
+
+                    // Check for crate group selection: entity_<entity>_<crate>
+                    let component_types: Vec<_> = row.components.keys().cloned().collect();
+                    for component_type in component_types {
+                        let (crate_name, _) =
+                            crate::reflection::extract_crate_and_type(&component_type);
+                        let expected_crate_id = format!("entity_{entity:?}_{crate_name}");
+
+                        if node_id == expected_crate_id {
+                            return Some(SelectedContent::CrateGroup(crate_name));
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    None
+}
diff --git a/crates/bevy_entity_inspector/src/widgets.rs b/crates/bevy_entity_inspector/src/widgets.rs
new file mode 100644
index 00000000..5825a661
--- /dev/null
+++ b/crates/bevy_entity_inspector/src/widgets.rs
@@ -0,0 +1,273 @@
+//! Modern inspector widgets using standard Bevy UI patterns.
+//!
+//! This module provides reusable UI components for building inspector interfaces
+//! using Bevy's native UI system. All widgets follow consistent styling and
+//! theming patterns.
+//!
+//! # Related Documentation
+//!
+//! - [Bevy UI Guide](https://docs.rs/bevy/latest/bevy/ui/index.html) - Core UI system documentation
+//! - [Node Documentation](https://docs.rs/bevy/latest/bevy/ui/struct.Node.html) - Layout system for UI elements
+//! - [`crate::theme::InspectorTheme`] - Theming system for consistent styling
+//! - [`InspectorPanel`] - Main panel component marker
+
+use crate::theme::*;
+use bevy::prelude::*;
+
+/// Properties for creating an inspector panel
+#[derive(Default)]
+pub struct InspectorPanelProps {
+    /// Title of the inspector panel
+    pub title: String,
+    /// Width of the panel
+    pub width: Val,
+    /// Height of the panel
+    pub height: Val,
+    /// Whether the panel is collapsible
+    pub collapsible: bool,
+    /// Whether the panel is initially collapsed
+    pub collapsed: bool,
+}
+
+/// Component that marks the inspector panel container
+#[derive(Component)]
+pub struct InspectorPanel;
+
+/// Component that marks the inspector header
+#[derive(Component)]
+pub struct InspectorHeader;
+
+/// Component that marks the inspector content area
+#[derive(Component)]
+pub struct InspectorContent;
+
+/// Creates a modern inspector panel using standard Bevy UI
+pub fn create_inspector_panel(
+    commands: &mut Commands,
+    props: InspectorPanelProps,
+    theme: &InspectorTheme,
+) -> Entity {
+    let panel = commands
+        .spawn((
+            Node {
+                width: props.width,
+                height: props.height,
+                flex_direction: FlexDirection::Column,
+                border: UiRect::all(Val::Px(1.0)),
+                position_type: PositionType::Absolute,
+                left: Val::Px(0.0),
+                top: Val::Px(0.0),
+                ..default()
+            },
+            BackgroundColor(theme.background_color),
+            BorderColor::all(theme.border_color),
+            BorderRadius::all(Val::Px(4.0)),
+            InspectorPanel,
+            InspectorThemedComponent,
+        ))
+        .id();
+
+    // Add header
+    let header = commands
+        .spawn((
+            Node {
+                width: Val::Percent(100.0),
+                height: Val::Px(32.0),
+                flex_direction: FlexDirection::Row,
+                align_items: AlignItems::Center,
+                justify_content: JustifyContent::SpaceBetween,
+                padding: UiRect::all(Val::Px(theme.container_padding)),
+                border: UiRect::bottom(Val::Px(1.0)),
+                ..default()
+            },
+            BackgroundColor(theme.header_color),
+            BorderColor::all(theme.border_color),
+            InspectorHeader,
+        ))
+        .id();
+
+    // Add header text
+    let header_text = commands
+        .spawn((
+            Text::new(props.title),
+            TextFont {
+                font_size: theme.header_font_size,
+                ..default()
+            },
+            TextColor(theme.header_text_color),
+        ))
+        .id();
+
+    commands.entity(header).add_child(header_text);
+
+    // Add content area
+    let content = commands
+        .spawn((
+            Node {
+                width: Val::Percent(100.0),
+                flex_grow: 1.0,
+                flex_direction: FlexDirection::Column,
+                padding: UiRect::all(Val::Px(theme.container_padding)),
+                overflow: Overflow::clip_y(),
+                ..default()
+            },
+            InspectorContent,
+        ))
+        .id();
+
+    // Add header and content to panel
+    commands.entity(panel).add_child(header);
+    commands.entity(panel).add_child(content);
+
+    panel
+}
+
+/// Properties for creating an inspector field
+#[derive(Default)]
+pub struct InspectorFieldProps {
+    /// Name of the field
+    pub name: String,
+    /// Value of the field
+    pub value: String,
+    /// Type of the field (for styling)
+    pub field_type: InspectorFieldType,
+    /// Whether the field is editable
+    pub editable: bool,
+}
+
+/// Type of inspector field for styling purposes
+#[derive(Default, Clone, Copy)]
+pub enum InspectorFieldType {
+    /// Text field, default type
+    #[default]
+    Text,
+    /// Numeric field
+    Number,
+    /// Boolean field
+    Boolean,
+    /// Vector field
+    Vector,
+    /// Color field
+    Color,
+    /// Entity field
+    Entity,
+    /// Component field
+    Component,
+}
+
+/// Component that marks an inspector field
+#[derive(Component)]
+pub struct InspectorField {
+    /// Name of the field
+    pub name: String,
+    /// Type of the field (for styling)
+    pub field_type: InspectorFieldType,
+}
+
+/// Creates an inspector field widget using standard Bevy UI
+pub fn create_inspector_field(
+    commands: &mut Commands,
+    props: InspectorFieldProps,
+    theme: &InspectorTheme,
+) -> Entity {
+    let value_color = match props.field_type {
+        InspectorFieldType::Number => Color::srgb(0.6, 0.8, 1.0),
+        InspectorFieldType::Boolean => Color::srgb(1.0, 0.8, 0.6),
+        InspectorFieldType::Vector => Color::srgb(0.8, 1.0, 0.6),
+        InspectorFieldType::Color => Color::srgb(1.0, 0.6, 0.8),
+        InspectorFieldType::Entity => Color::srgb(0.8, 0.6, 1.0),
+        InspectorFieldType::Component => Color::srgb(0.6, 1.0, 0.8),
+        _ => theme.text_secondary_color,
+    };
+
+    let field = commands
+        .spawn((
+            Node {
+                width: Val::Percent(100.0),
+                height: Val::Px(theme.node_height),
+                flex_direction: FlexDirection::Row,
+                align_items: AlignItems::Center,
+                justify_content: JustifyContent::SpaceBetween,
+                padding: UiRect::horizontal(Val::Px(4.0)),
+                ..default()
+            },
+            InspectorField {
+                name: props.name.clone(),
+                field_type: props.field_type,
+            },
+            BackgroundColor(Color::NONE),
+            BorderRadius::all(Val::Px(2.0)),
+        ))
+        .id();
+
+    // Add field name
+    let name_text = commands
+        .spawn((
+            Text::new(props.name),
+            TextFont {
+                font_size: theme.font_size,
+                ..default()
+            },
+            TextColor(theme.text_color),
+        ))
+        .id();
+
+    let name_container = commands
+        .spawn((Node {
+            flex_grow: 1.0,
+            justify_content: JustifyContent::Start,
+            align_items: AlignItems::Center,
+            ..default()
+        },))
+        .id();
+
+    commands.entity(name_container).add_child(name_text);
+
+    // Add field value
+    let value_text = commands
+        .spawn((
+            Text::new(props.value),
+            TextFont {
+                font_size: theme.font_size,
+                ..default()
+            },
+            TextColor(value_color),
+        ))
+        .id();
+
+    let value_container = commands
+        .spawn((Node {
+            justify_content: JustifyContent::End,
+            align_items: AlignItems::Center,
+            ..default()
+        },))
+        .id();
+
+    commands.entity(value_container).add_child(value_text);
+
+    // Add containers to field
+    commands.entity(field).add_child(name_container);
+    commands.entity(field).add_child(value_container);
+
+    field
+}
+
+/// System to handle inspector field interactions
+pub fn update_inspector_field_style(
+    mut query: Query<(&mut BackgroundColor, &InspectorField, &Interaction), Changed<Interaction>>,
+    theme: Res<InspectorTheme>,
+) {
+    for (mut bg_color, _field, interaction) in query.iter_mut() {
+        match *interaction {
+            Interaction::Hovered => {
+                bg_color.0 = theme.hover_color;
+            }
+            Interaction::Pressed => {
+                bg_color.0 = theme.selected_color;
+            }
+            Interaction::None => {
+                bg_color.0 = Color::NONE;
+            }
+        }
+    }
+}
diff --git a/crates/bevy_entity_inspector/tests/integration_test.rs b/crates/bevy_entity_inspector/tests/integration_test.rs
new file mode 100644
index 00000000..be6ff9a1
--- /dev/null
+++ b/crates/bevy_entity_inspector/tests/integration_test.rs
@@ -0,0 +1,27 @@
+//! Bevy Entity Inspector Integration Tests
+//! This file contains integration tests for the Bevy Entity Inspector plugin.
+//! These tests ensure that the plugin can be added to a Bevy app with and without the remote feature enabled.
+//!
+//! To run these tests, use the following command:
+//! ```bash
+//! cargo test --features "remote"
+//! ```
+
+use bevy::prelude::*;
+use bevy_entity_inspector::InspectorPlugin;
+
+#[test]
+fn test_inspector_plugin_without_remote() {
+    let mut app = App::new();
+    app.add_plugins((MinimalPlugins, InspectorPlugin));
+    // Test passes if we can add the plugin without the remote feature
+}
+
+#[cfg(feature = "remote")]
+#[test]
+fn test_inspector_plugin_with_remote() {
+    let mut app = App::new();
+    app.add_plugins((MinimalPlugins, InspectorPlugin));
+    // Test passes if we can add the plugin with the remote feature
+    // The remote plugin is automatically added when the feature is enabled
+}
diff --git a/crates/bevy_pane_layout/src/lib.rs b/crates/bevy_pane_layout/src/lib.rs
index fbb04a09..a3c920e1 100644
--- a/crates/bevy_pane_layout/src/lib.rs
+++ b/crates/bevy_pane_layout/src/lib.rs
@@ -112,13 +112,14 @@ fn setup(
         .insert(ChildOf(*panes_root))
         .id();
 
-    let sub_divider = spawn_divider(&mut commands, Divider::Vertical, 0.2)
+    let sub_divider = spawn_divider(&mut commands, Divider::Vertical, 0.3)
         .insert(ChildOf(divider))
         .id();
 
     spawn_pane(&mut commands, &theme, 0.4, "Scene Tree").insert(ChildOf(sub_divider));
     spawn_resize_handle(&mut commands, Divider::Vertical).insert(ChildOf(sub_divider));
     spawn_pane(&mut commands, &theme, 0.6, "Properties").insert(ChildOf(sub_divider));
+    spawn_pane(&mut commands, &theme, 0.6, "Entity Inspector").insert(ChildOf(sub_divider));
 
     spawn_resize_handle(&mut commands, Divider::Horizontal).insert(ChildOf(divider));