diff --git a/assets/config/card.ron b/assets/config/card.ron
index 142944d..9da9c0d 100644
--- a/assets/config/card.ron
+++ b/assets/config/card.ron
@@ -1,10 +1,10 @@
 
 (
     // Deck:
-    deck_cap: 18,
+    deck_cap: 8,
 
     // Cards:
-    card_height: Px(96.0),
+    card_height: Vw(9.0),
     card_background_map: {
         "yellow": CardBackground (
             texture: "image/card/yellow_card.png",
diff --git a/src/game/card.rs b/src/game/card.rs
index 0180ec4..836e50f 100644
--- a/src/game/card.rs
+++ b/src/game/card.rs
@@ -179,6 +179,7 @@ pub fn card(key: impl Into<String>, active: Option<bool>) -> impl EntityCommand
         let icon = r!(config.card_icon_map.get(&card.icon_key)).clone();
         let name = format!("Card(\"{}\")", card.name);
         let height = config.card_height;
+        let border_width = height / 18.0;
         let tooltip_text = format!("{}\n\n{}", card.name, card.description);
 
         world
@@ -188,7 +189,7 @@ pub fn card(key: impl Into<String>, active: Option<bool>) -> impl EntityCommand
                 NodeBundle {
                     style: Style {
                         height,
-                        border: UiRect::all(Px(4.0)),
+                        border: UiRect::all(border_width),
                         ..default()
                     },
                     ..default()
diff --git a/src/screen/playing/hud.rs b/src/screen/playing/hud.rs
index 4426438..c0a095a 100644
--- a/src/screen/playing/hud.rs
+++ b/src/screen/playing/hud.rs
@@ -1,9 +1,11 @@
 use bevy::ecs::system::EntityCommand;
+use bevy::ecs::system::SystemState;
 use bevy::prelude::*;
 
 use crate::game::actor::level::xp::IsXpBarFill;
 use crate::game::actor::level::IsLevelIndicator;
 use crate::game::card::deck::IsDeckDisplay;
+use crate::game::card::CardConfig;
 use crate::screen::playing::PlayingAssets;
 use crate::ui::prelude::*;
 use crate::util::prelude::*;
@@ -180,11 +182,15 @@ fn lower_hud(player: Entity) -> impl EntityCommand<World> {
 
 fn deck_display(player: Entity) -> impl EntityCommand {
     move |entity: Entity, world: &mut World| {
+        let config = SystemState::<ConfigRef<CardConfig>>::new(world).get(world);
+        let config = r!(config.get());
+        let column_gap = config.card_height / 18.0 * -1.0;
+
         world.entity_mut(entity).insert((
             Name::new("DeckDisplay"),
             NodeBundle {
                 style: Style {
-                    column_gap: Px(-4.0),
+                    column_gap,
                     ..default()
                 },
                 ..default()
@@ -195,15 +201,19 @@ fn deck_display(player: Entity) -> impl EntityCommand {
     }
 }
 
-fn arrow(mut entity: EntityWorldMut) {
-    let texture = entity.world().resource::<PlayingAssets>().arrow.clone();
+fn arrow(entity: Entity, world: &mut World) {
+    let config = SystemState::<ConfigRef<CardConfig>>::new(world).get(world);
+    let config = r!(config.get());
+    let height = config.card_height / 18.0 * 5.0;
+    let margin = config.card_height / 18.0 * 2.0;
+    let texture = world.resource::<PlayingAssets>().arrow.clone();
 
-    entity.insert((
+    world.entity_mut(entity).insert((
         Name::new("Arrow"),
         ImageBundle {
             style: Style {
-                height: Px(20.0),
-                margin: UiRect::horizontal(Px(8.0)),
+                height,
+                margin: UiRect::horizontal(margin),
                 ..default()
             },
             image: UiImage::new(texture),