diff --git a/src/card/mod.rs b/src/card/mod.rs
index b84a60c..8825c50 100644
--- a/src/card/mod.rs
+++ b/src/card/mod.rs
@@ -13,22 +13,53 @@ pub struct Hand;
 #[derive(Resource)]
 pub struct CardImage(Handle<Image>);
 
+#[derive(Event)]
+pub struct AddCard;
+
+#[derive(Event)]
+pub struct ClearCards;
+
 impl Plugin for CardPlugin {
     fn build(&self, app: &mut App) {
-        app.add_systems(Startup, (hand_setup, test_card_setup).chain())
-            .add_systems(Update, card_arrange);
+        app.add_systems(Startup, hand_setup)
+            .add_systems(Update, card_arrange)
+            .add_observer(card_add)
+            .add_observer(card_clear);
     }
 }
 
 fn hand_setup(mut commands: Commands, asset_server: Res<AssetServer>) {
-    commands.spawn((Hand, Transform::from_xyz(0., -360., 0.)));
+    commands.spawn((
+        Hand,
+        Transform::from_xyz(0., -360., 0.),
+        InheritedVisibility::VISIBLE,
+    ));
 
     commands.insert_resource(CardImage(
         asset_server.load::<Image>("sprites/cards/units/fosma.png"),
     ));
 }
 
-fn test_card_setup(
+fn card_arrange(
+    query: Query<(Entity, &mut Transform, &Sprite, &ChildOf), With<Card>>,
+    hand: Single<(Entity, &Children), With<Hand>>,
+    assets: Res<Assets<Image>>,
+) {
+    let cards_amount = hand.1.len();
+    for (entity, mut transform, sprite, child_of) in query {
+        if child_of.parent() != hand.0 {
+            continue;
+        }
+        let size = assets.get(&sprite.image).unwrap().size_f32();
+        let left_boundary = -size.x * (cards_amount as f32) / 2.0 + size.x / 2.0;
+        transform.translation.x =
+            left_boundary + size.x * (hand.1.iter().position(|x| x == entity).unwrap_or(0) as f32);
+        transform.translation.y = size.y / 2.0;
+    }
+}
+
+fn card_add(
+    _: On<AddCard>,
     mut commands: Commands,
     hand: Single<Entity, With<Hand>>,
     card_image: Res<CardImage>,
@@ -39,38 +70,10 @@ fn test_card_setup(
         Card,
         ChildOf(hand.entity()),
     ));
-
-    commands.spawn((
-        Sprite::from_image(card_image.0.clone()),
-        Transform::from_xyz(0., 0., 0.),
-        Card,
-        ChildOf(hand.entity()),
-    ));
-
-    commands.spawn((
-        Sprite::from_image(card_image.0.clone()),
-        Transform::from_xyz(0., 0., 0.),
-        Card,
-        ChildOf(hand.entity()),
-    ));
 }
 
-fn card_arrange(
-    query: Query<(&mut Transform, &Sprite, &ChildOf), With<Card>>,
-    hand: Single<(Entity, &Children), With<Hand>>,
-    assets: Res<Assets<Image>>,
-) {
-    let cards_amount = hand.1.len();
-    let mut card_id = 0.;
-    for (mut transform, sprite, child_of) in query {
-        if child_of.parent() != hand.0 {
-            continue;
-        }
-        let size = assets.get(&sprite.image).unwrap().size_f32();
-        let left_boundary = -size.x * (cards_amount as f32) / 2.0 + size.x / 2.0;
-        transform.translation.x = left_boundary + size.x * card_id;
-        transform.translation.y = size.y / 2.0;
-
-        card_id += 1.0;
+fn card_clear(_: On<ClearCards>, mut commands: Commands, children: Single<&Children, With<Hand>>) {
+    for card in children.iter() {
+        commands.entity(card).despawn();
     }
 }
diff --git a/src/dev_tools/mod.rs b/src/dev_tools/mod.rs
index 72431ee..e23daea 100644
--- a/src/dev_tools/mod.rs
+++ b/src/dev_tools/mod.rs
@@ -1,7 +1,111 @@
 use bevy::prelude::*;
 
+use crate::buttons;
+use crate::card;
+
+const PANEL_BORDER: Color = Color::srgb_u8(36, 36, 143);
+const PANEL_BACKGROUND: Color = Color::srgb_u8(0, 0, 52);
+const BUTTON_BORDER: Color = Color::srgb_u8(61, 68, 12);
+const BUTTON_BACKGROUND: Color = Color::srgb_u8(35, 51, 38);
+
 pub struct DevToolsPlugin;
 
 impl Plugin for DevToolsPlugin {
-    fn build(&self, app: &mut App) {}
+    fn build(&self, app: &mut App) {
+        app.add_systems(Startup, setup_debug_menu);
+    }
+}
+
+fn setup_debug_menu(mut commands: Commands) {
+    let root = commands
+        .spawn(Node {
+            width: percent(100.),
+            height: percent(100.),
+            align_items: AlignItems::Start,
+            justify_content: JustifyContent::End,
+            ..default()
+        })
+        .id();
+    let panel = commands
+        .spawn((
+            Node {
+                display: Display::Flex,
+                position_type: PositionType::Relative,
+                min_width: px(128),
+                min_height: px(32),
+                border: UiRect {
+                    left: px(4.),
+                    right: px(4.),
+                    top: px(10.),
+                    bottom: px(4.),
+                },
+                margin: UiRect::all(px(10)),
+                padding: UiRect::all(px(3)),
+                justify_items: JustifyItems::Start,
+                align_items: AlignItems::Center,
+                flex_direction: FlexDirection::Column,
+                ..default()
+            },
+            BorderColor::all(PANEL_BORDER),
+            BackgroundColor(PANEL_BACKGROUND),
+            ChildOf(root),
+        ))
+        .id();
+
+    commands
+        .spawn((
+            Button,
+            Node {
+                min_height: px(32),
+                width: percent(100.),
+                justify_content: JustifyContent::Center,
+                align_items: AlignItems::Center,
+                margin: UiRect::all(px(4)),
+                border: UiRect::all(px(3)),
+                ..default()
+            },
+            BorderColor::all(BUTTON_BORDER),
+            BackgroundColor(BUTTON_BACKGROUND),
+            ChildOf(panel),
+            children![(
+                Text::new("Add card"),
+                TextFont {
+                    font_size: 11.0,
+                    ..default()
+                },
+            )],
+        ))
+        .observe(
+            |_: On<buttons::ButtonPressedEvent>, mut commands: Commands| {
+                commands.trigger(card::AddCard)
+            },
+        );
+    commands
+        .spawn((
+            Button,
+            Node {
+                min_height: px(32),
+                width: percent(100.),
+                justify_content: JustifyContent::Center,
+                align_items: AlignItems::Center,
+                margin: UiRect::all(px(4)),
+                border: UiRect::all(px(3)),
+                ..default()
+            },
+            BorderColor::all(BUTTON_BORDER),
+            BackgroundColor(BUTTON_BACKGROUND),
+            ChildOf(panel),
+            children![(
+                Text::new("Clear cards"),
+                TextFont {
+                    font_size: 11.0,
+                    ..default()
+                },
+            )],
+        ))
+        .observe(
+            |_: On<buttons::ButtonPressedEvent>, mut commands: Commands| {
+                commands.trigger(card::ClearCards)
+            },
+        );
 }