diff --git a/bin/ui-wtf.rs b/bin/ui-wtf.rs
index a39bd28..066512e 100644
--- a/bin/ui-wtf.rs
+++ b/bin/ui-wtf.rs
@@ -1,9 +1,7 @@
-use bevy::{
-    input::{keyboard::KeyboardInput, ButtonState},
-    prelude::*,
-    window::PrimaryWindow,
-};
-use monologue_trees::{debug::*, ui::*};
+// TODO: Z-index of children should be higher than parents
+
+use bevy::prelude::*;
+use monologue_trees::ui::*;
 
 fn main() {
     App::new()
@@ -21,72 +19,174 @@ fn main() {
         // .init_resource::<Icon>()
         .add_systems(Startup, init_ui2)
         .add_systems(Update, toggle)
+        .add_systems(PostUpdate, selection)
         // .add_systems(Startup, init_ui)
-        // .add_systems(Update, (cursors, container()))
+        // .add_systems(Update, (cursors, container))
         .run();
 }
 
-fn container() -> NodeBundle {
-    NodeBundle {
-        style: Style {
-            border: UiRect::all(Val::Px(2.0)),
-            right: Val::Percent(-100.0),
-            top: Val::Px(-4.0),
-            flex_direction: FlexDirection::Column,
-            display: Display::None,
-            ..default()
-        },
-        background_color: BackgroundColor(Color::PURPLE),
-        border_color: BorderColor(Color::BLACK),
-        ..default()
+#[derive(Debug, Bundle)]
+struct UiKitContainer {
+    node_bundle: NodeBundle,
+    select: Select,
+}
+
+#[derive(Copy, Clone)]
+enum UiKitPosition {
+    Top,
+    Left,
+    Right,
+}
+
+impl UiKitContainer {
+    fn new(position: UiKitPosition) -> Self {
+        let style = match position {
+            UiKitPosition::Top => Style {
+                border: UiRect::all(Val::Px(1.0)),
+                top: Val::Percent(102.0),
+                left: Val::Px(-2.0),
+                flex_direction: FlexDirection::Column,
+                align_items: AlignItems::FlexStart,
+                display: Display::None,
+                ..default()
+            },
+            UiKitPosition::Left => Style {
+                border: UiRect::all(Val::Px(1.0)),
+                left: Val::Percent(100.0),
+                top: Val::Px(-2.0),
+                flex_direction: FlexDirection::Column,
+                justify_items: JustifyItems::Start,
+                display: Display::None,
+                ..default()
+            },
+            UiKitPosition::Right => Style {
+                border: UiRect::all(Val::Px(1.0)),
+                right: Val::Percent(104.0),
+                top: Val::Px(-2.0),
+                flex_direction: FlexDirection::Column,
+                justify_items: JustifyItems::Start,
+                display: Display::None,
+                ..default()
+            },
+        };
+        UiKitContainer {
+            node_bundle: NodeBundle {
+                style,
+                background_color: BackgroundColor(Color::PURPLE),
+                border_color: BorderColor(Color::BLACK),
+                ..default()
+            },
+            select: Select::None,
+        }
     }
 }
 
-fn spec(color: Color) -> ButtonBundle {
-    ButtonBundle {
-        style: Style {
-            border: UiRect::all(Val::Px(2.0)),
-            width: Val::Px(100.0),
-            height: Val::Px(50.0),
-            flex_direction: FlexDirection::Column,
-            ..default()
-        },
-        background_color: BackgroundColor(color),
-        border_color: BorderColor(Color::BLACK),
-        ..default()
+#[derive(Debug, Bundle)]
+struct UiKitButton {
+    button_bundle: ButtonBundle,
+    select: Select,
+}
+
+impl UiKitButton {
+    fn new(color: Color) -> Self {
+        UiKitButton {
+            button_bundle: ButtonBundle {
+                style: Style {
+                    border: UiRect::all(Val::Px(1.0)),
+                    width: Val::Px(100.0),
+                    height: Val::Px(50.0),
+                    flex_direction: FlexDirection::Column,
+                    ..default()
+                },
+                background_color: BackgroundColor(color),
+                border_color: BorderColor(Color::BLACK),
+                ..default()
+            },
+            select: Select::None,
+        }
     }
 }
 
-fn toggle(
-    mut events: Query<
-        (&mut BackgroundColor, &Interaction, &Children),
-        (Changed<Interaction>, With<Button>),
-    >,
+#[derive(Debug, Component, Copy, Clone)]
+enum Select {
+    Active,
+    None,
+}
+
+/// When an item is selected/de-selected change it's display accordingly
+fn selection(
+    mut events: Query<(&mut BackgroundColor, &Select, &Children), (Changed<Select>, With<Button>)>,
     mut styles: Query<&mut Style>,
 ) {
     events
         .iter_mut()
-        .for_each(|(mut bg_color, interaction, children)| match interaction {
-            Interaction::Pressed => {
-                bg_color.0 = Color::RED;
-                children.iter().for_each(|&child| {
-                    if let Ok(mut style) = styles.get_mut(child) {
-                        style.display = match style.display {
-                            Display::Flex => Display::None,
-                            Display::None | _ => Display::Flex,
-                        };
+        .for_each(|(mut bg_color, select, children)| {
+            bg_color.0 = match select {
+                Select::Active => Color::RED,
+                Select::None => Color::WHITE,
+            };
+            children.iter().for_each(|&child| {
+                if let Ok(mut style) = styles.get_mut(child) {
+                    style.display = match select {
+                        Select::Active => Display::Flex,
+                        Select::None => Display::None,
                     }
-                });
-            }
-            Interaction::Hovered => {
-                bg_color.0 = Color::RED;
-            }
-            Interaction::None => {
-                bg_color.0 = Color::PINK;
-            }
+                }
+            });
         });
 }
 
+/// Toggle a UI Nav tree open/closed
+///
+/// PERF: This is hella not performant, we just usually don't have many elements to iterate over so
+/// it's tolerable.
+///
+// TODO: Should not be able to select multiple children in branch of tree
+// TODO: Port to ui.rs
+fn toggle(
+    events: Query<Entity, (Changed<Interaction>, With<Button>)>,
+    interactions: Query<&Interaction>,
+    mut selects: Query<&mut Select>,
+    children: Query<&Children>,
+) {
+    events.iter().for_each(|entity| {
+        // If all interactions are inactive, set all selections to None
+        if interactions
+            .iter()
+            .all(|&interaction| interaction == Interaction::None)
+        {
+            selects.iter_mut().for_each(|mut select| {
+                *select = Select::None;
+            });
+        // Otherwise change this item's selection
+        } else {
+            let mut select = selects
+                .get_mut(entity)
+                .expect("Entity has Select component");
+            let interaction = interactions
+                .get(entity)
+                .expect("Entity has Interaction component");
+            *select = match interaction {
+                Interaction::Pressed | Interaction::Hovered => Select::Active,
+                Interaction::None => {
+                    let children_inactive = children.iter_descendants(entity).all(|child| {
+                        if let Ok(&c) = interactions.get(child) {
+                            c == Interaction::None
+                        } else {
+                            true
+                        }
+                    });
+                    if children_inactive {
+                        Select::None
+                    } else {
+                        Select::Active
+                    }
+                }
+            }
+        }
+    });
+}
+
 // const CURSORS: [CursorIcon; 35] = [
 //     CursorIcon::Default,
 //     CursorIcon::Crosshair,
@@ -125,6 +225,136 @@ fn toggle(
 //     CursorIcon::RowResize,
 // ];
 
+fn spawn_tree(parent: &mut ChildBuilder, pos: UiKitPosition) {
+    let pos2 = match pos {
+        UiKitPosition::Top => UiKitPosition::Left,
+        _ => pos,
+    };
+    parent
+        .spawn(UiKitButton::new(Color::PINK))
+        .with_children(|parent| {
+            parent
+                .spawn(UiKitContainer::new(pos))
+                .with_children(|parent| {
+                    parent
+                        .spawn(UiKitButton::new(Color::PINK))
+                        .with_children(|parent| {
+                            parent
+                                .spawn(UiKitContainer::new(pos2))
+                                .with_children(|parent| {
+                                    parent.spawn(UiKitButton::new(Color::PINK));
+                                    parent.spawn(UiKitButton::new(Color::PINK));
+                                    parent.spawn(UiKitButton::new(Color::PINK));
+                                });
+                        });
+                    parent
+                        .spawn(UiKitButton::new(Color::PINK))
+                        .with_children(|parent| {
+                            parent
+                                .spawn(UiKitContainer::new(pos2))
+                                .with_children(|parent| {
+                                    parent.spawn(UiKitButton::new(Color::PINK));
+                                    parent.spawn(UiKitButton::new(Color::PINK));
+                                    parent.spawn(UiKitButton::new(Color::PINK));
+                                });
+                        });
+                    parent
+                        .spawn(UiKitButton::new(Color::PINK))
+                        .with_children(|parent| {
+                            parent
+                                .spawn(UiKitContainer::new(pos2))
+                                .with_children(|parent| {
+                                    parent.spawn(UiKitButton::new(Color::PINK));
+                                    parent.spawn(UiKitButton::new(Color::PINK));
+                                    parent.spawn(UiKitButton::new(Color::PINK));
+                                });
+                        });
+                });
+        });
+    parent
+        .spawn(UiKitButton::new(Color::PINK))
+        .with_children(|parent| {
+            parent
+                .spawn(UiKitContainer::new(pos))
+                .with_children(|parent| {
+                    parent
+                        .spawn(UiKitButton::new(Color::PINK))
+                        .with_children(|parent| {
+                            parent
+                                .spawn(UiKitContainer::new(pos2))
+                                .with_children(|parent| {
+                                    parent.spawn(UiKitButton::new(Color::PINK));
+                                    parent.spawn(UiKitButton::new(Color::PINK));
+                                    parent.spawn(UiKitButton::new(Color::PINK));
+                                });
+                        });
+                    parent
+                        .spawn(UiKitButton::new(Color::PINK))
+                        .with_children(|parent| {
+                            parent
+                                .spawn(UiKitContainer::new(pos2))
+                                .with_children(|parent| {
+                                    parent.spawn(UiKitButton::new(Color::PINK));
+                                    parent.spawn(UiKitButton::new(Color::PINK));
+                                    parent.spawn(UiKitButton::new(Color::PINK));
+                                });
+                        });
+                    parent
+                        .spawn(UiKitButton::new(Color::PINK))
+                        .with_children(|parent| {
+                            parent
+                                .spawn(UiKitContainer::new(pos2))
+                                .with_children(|parent| {
+                                    parent.spawn(UiKitButton::new(Color::PINK));
+                                    parent.spawn(UiKitButton::new(Color::PINK));
+                                    parent.spawn(UiKitButton::new(Color::PINK));
+                                });
+                        });
+                });
+        });
+    parent
+        .spawn(UiKitButton::new(Color::PINK))
+        .with_children(|parent| {
+            parent
+                .spawn(UiKitContainer::new(pos))
+                .with_children(|parent| {
+                    parent
+                        .spawn(UiKitButton::new(Color::PINK))
+                        .with_children(|parent| {
+                            parent
+                                .spawn(UiKitContainer::new(pos2))
+                                .with_children(|parent| {
+                                    parent.spawn(UiKitButton::new(Color::PINK));
+                                    parent.spawn(UiKitButton::new(Color::PINK));
+                                    parent.spawn(UiKitButton::new(Color::PINK));
+                                });
+                        });
+                    parent
+                        .spawn(UiKitButton::new(Color::PINK))
+                        .with_children(|parent| {
+                            parent
+                                .spawn(UiKitContainer::new(pos2))
+                                .with_children(|parent| {
+                                    parent.spawn(UiKitButton::new(Color::PINK));
+                                    parent.spawn(UiKitButton::new(Color::PINK));
+                                    parent.spawn(UiKitButton::new(Color::PINK));
+                                });
+                        });
+                    parent
+                        .spawn(UiKitButton::new(Color::PINK))
+                        .with_children(|parent| {
+                            parent
+                                .spawn(UiKitContainer::new(pos2))
+                                .with_children(|parent| {
+                                    parent.spawn(UiKitButton::new(Color::PINK));
+                                    parent.spawn(UiKitButton::new(Color::PINK));
+                                    parent.spawn(UiKitButton::new(Color::PINK));
+                                });
+                        });
+                });
+        });
+}
+
 fn init_ui2(mut commands: Commands) {
     commands.spawn((
         Camera2dBundle { ..default() },
@@ -134,90 +364,67 @@ fn init_ui2(mut commands: Commands) {
     commands
         .spawn(NodeBundle {
             style: Style {
-                border: UiRect::all(Val::Px(2.0)),
-                flex_direction: FlexDirection::Column,
+                width: Val::Percent(100.0),
+                height: Val::Percent(100.0),
+                justify_content: JustifyContent::SpaceEvenly,
                 ..default()
             },
-            background_color: BackgroundColor(Color::PURPLE),
-            border_color: BorderColor(Color::BLACK),
+            background_color: BackgroundColor(Color::FUCHSIA),
             ..default()
         })
         .with_children(|parent| {
-            parent.spawn(spec(Color::PINK)).with_children(|parent| {
-                parent.spawn(container()).with_children(|parent| {
-                    parent.spawn(spec(Color::PINK)).with_children(|parent| {
-                        parent.spawn(container()).with_children(|parent| {
-                            parent.spawn(spec(Color::PINK));
-                            parent.spawn(spec(Color::PINK));
-                            parent.spawn(spec(Color::PINK));
-                        });
-                    });
-                    parent.spawn(spec(Color::PINK)).with_children(|parent| {
-                        parent.spawn(container()).with_children(|parent| {
-                            parent.spawn(spec(Color::PINK));
-                            parent.spawn(spec(Color::PINK));
-                            parent.spawn(spec(Color::PINK));
-                        });
-                    });
-                    parent.spawn(spec(Color::PINK)).with_children(|parent| {
-                        parent.spawn(container()).with_children(|parent| {
-                            parent.spawn(spec(Color::PINK));
-                            parent.spawn(spec(Color::PINK));
-                            parent.spawn(spec(Color::PINK));
-                        });
-                    });
+            parent
+                .spawn(NodeBundle {
+                    style: Style {
+                        border: UiRect::all(Val::Px(1.0)),
+                        left: Val::Px(0.0),
+                        flex_direction: FlexDirection::Column,
+                        position_type: PositionType::Absolute,
+                        align_self: AlignSelf::Center,
+                        ..default()
+                    },
+                    background_color: BackgroundColor(Color::PURPLE),
+                    border_color: BorderColor(Color::BLACK),
+                    ..default()
+                })
+                .with_children(|parent| {
+                    spawn_tree(parent, UiKitPosition::Left);
                 });
-            });
-            parent.spawn(spec(Color::PINK)).with_children(|parent| {
-                parent.spawn(container()).with_children(|parent| {
-                    parent.spawn(spec(Color::PINK)).with_children(|parent| {
-                        parent.spawn(container()).with_children(|parent| {
-                            parent.spawn(spec(Color::PINK));
-                            parent.spawn(spec(Color::PINK));
-                            parent.spawn(spec(Color::PINK));
-                        });
-                    });
-                    parent.spawn(spec(Color::PINK)).with_children(|parent| {
-                        parent.spawn(container()).with_children(|parent| {
-                            parent.spawn(spec(Color::PINK));
-                            parent.spawn(spec(Color::PINK));
-                            parent.spawn(spec(Color::PINK));
-                        });
-                    });
-                    parent.spawn(spec(Color::PINK)).with_children(|parent| {
-                        parent.spawn(container()).with_children(|parent| {
-                            parent.spawn(spec(Color::PINK));
-                            parent.spawn(spec(Color::PINK));
-                            parent.spawn(spec(Color::PINK));
-                        });
-                    });
+
+            parent
+                .spawn(NodeBundle {
+                    style: Style {
+                        border: UiRect::all(Val::Px(1.0)),
+                        right: Val::Px(0.0),
+                        flex_direction: FlexDirection::Column,
+                        position_type: PositionType::Absolute,
+                        align_self: AlignSelf::Center,
+                        ..default()
+                    },
+                    background_color: BackgroundColor(Color::PURPLE),
+                    border_color: BorderColor(Color::BLACK),
+                    ..default()
+                })
+                .with_children(|parent| {
+                    spawn_tree(parent, UiKitPosition::Right);
                 });
-            });
-            parent.spawn(spec(Color::PINK)).with_children(|parent| {
-                parent.spawn(container()).with_children(|parent| {
-                    parent.spawn(spec(Color::PINK)).with_children(|parent| {
-                        parent.spawn(container()).with_children(|parent| {
-                            parent.spawn(spec(Color::PINK));
-                            parent.spawn(spec(Color::PINK));
-                            parent.spawn(spec(Color::PINK));
-                        });
-                    });
-                    parent.spawn(spec(Color::PINK)).with_children(|parent| {
-                        parent.spawn(container()).with_children(|parent| {
-                            parent.spawn(spec(Color::PINK));
-                            parent.spawn(spec(Color::PINK));
-                            parent.spawn(spec(Color::PINK));
-                        });
-                    });
-                    parent.spawn(spec(Color::PINK)).with_children(|parent| {
-                        parent.spawn(container()).with_children(|parent| {
-                            parent.spawn(spec(Color::PINK));
-                            parent.spawn(spec(Color::PINK));
-                            parent.spawn(spec(Color::PINK));
-                        });
-                    });
+
+            parent
+                .spawn(NodeBundle {
+                    style: Style {
+                        border: UiRect::all(Val::Px(1.0)),
+                        top: Val::Px(0.0),
+                        flex_direction: FlexDirection::Row,
+                        position_type: PositionType::Absolute,
+                        ..default()
+                    },
+                    background_color: BackgroundColor(Color::PURPLE),
+                    border_color: BorderColor(Color::BLACK),
+                    ..default()
+                })
+                .with_children(|parent| {
+                    spawn_tree(parent, UiKitPosition::Top);
                 });
-            });
         });
 }
 
@@ -258,7 +465,7 @@ fn init_ui2(mut commands: Commands) {
 //                         ))
 //                         .with_children(|parent| {
 //                             parent.spawn((
-//                                 container,
+//                                 UiKitContainer::new,
 //                                 GameUiSet,
 //                                 // Name::new("Grow/Shrink Set"),
 //                                 NodeBundle { ..default() },
@@ -316,7 +523,7 @@ fn init_ui2(mut commands: Commands) {
 // }
 //
 // #[derive(Debug, Component)]
-// struct container;
+// struct Container;
 //
 // fn container(
 //     mut events: EventReader<KeyboardInput>,
diff --git a/src/ui.rs b/src/ui.rs
index c0e1846..b6ecbf2 100644
--- a/src/ui.rs
+++ b/src/ui.rs
@@ -7,95 +7,9 @@ pub struct GameUiPlugin;
 
 impl Plugin for GameUiPlugin {
     fn build(&self, app: &mut App) {
-        app.add_systems(PreUpdate, (spawn_nav, spawn_tab, spawn_set, spawn_button))
-            .add_systems(Update, (manage_names, manage_tab));
+        app;
+        // .add_systems(PreUpdate, )
+        // .add_systems(Update,)
+        // .add_systems(PostUpdate, );
     }
 }
-
-/// Navigation UI Container
-/// Buttons in a nav correspond to Tabs in a navbar/navmenu
-#[derive(Component, PartialEq)]
-pub struct GameUiNav;
-
-/// Sets contain a variety of elements like action buttons
-/// Usually the "leaf" of a navigation tree
-#[derive(Component, PartialEq)]
-pub struct GameUiSet;
-
-/// Buttons are used for interaction in the UI
-#[derive(Component, PartialEq)]
-pub struct GameUiButton;
-
-#[derive(Component, PartialEq)]
-pub struct GameUiTab;
-
-fn spawn_nav(events: Query<(Entity, &GameUiNav), Added<GameUiNav>>, mut commands: Commands) {
-    events.iter().for_each(|(entity, _)| {
-        info!("Spawning Nav UI");
-    });
-}
-
-fn spawn_tab(events: Query<Entity, Added<GameUiTab>>, mut commands: Commands) {
-    events.iter().for_each(|entity| {});
-}
-
-fn spawn_set(events: Query<Entity, Added<GameUiSet>>, mut commands: Commands) {
-    events.iter().for_each(|entity| {});
-}
-
-fn spawn_button(
-    events: Query<(Entity, &GameUiButton), Added<GameUiButton>>,
-    mut commands: Commands,
-) {
-    events.iter().for_each(|(entity, _)| {
-        info!("Spawning UI Button");
-        commands.entity(entity).insert(ButtonBundle {
-            style: Style {
-                padding: UiRect::all(Val::Px(3.0)),
-                margin: UiRect::all(Val::Px(3.0)),
-                ..default()
-            },
-            background_color: BackgroundColor(Color::BLUE),
-            ..default()
-        });
-    });
-}
-
-fn manage_names(
-    events: Query<
-        (Entity, &Name),
-        (
-            Or<(With<GameUiNav>, With<GameUiButton>)>,
-            Or<(Added<Name>, Changed<Name>)>,
-        ),
-    >,
-    mut commands: Commands,
-) {
-    events.iter().for_each(|(entity, name)| {
-        commands.entity(entity).with_children(|parent| {
-            parent
-                .spawn(NodeBundle {
-                    style: Style {
-                        align_self: AlignSelf::FlexStart,
-                        padding: UiRect::all(Val::Px(3.0)),
-                        margin: UiRect::all(Val::Px(3.0)),
-                        ..default()
-                    },
-                    background_color: BackgroundColor(Color::CRIMSON),
-                    ..default()
-                })
-                .with_children(|parent| {
-                    parent.spawn(TextBundle::from_section(
-                        name.as_str(),
-                        TextStyle { ..default() },
-                    ));
-                });
-        });
-    });
-}
-
-fn manage_tab(events: Query<&Interaction, Changed<Interaction>>) {
-    events.iter().for_each(|interaction| {
-        info!("When tab is clicked, show/hide content");
-    });
-}