diff --git a/assets/voxygen/element/skills/sword/balanced_finisher.png b/assets/voxygen/element/skills/sword/balanced_finisher.png
new file mode 100644
index 0000000000..9eea5baa0c
--- /dev/null
+++ b/assets/voxygen/element/skills/sword/balanced_finisher.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d8de78c397d37fb5a43fad412f1a67c730e95cc55ca3b9c332b590cb0a3a09e4
+size 1940
diff --git a/assets/voxygen/element/skills/sword/balanced_thrust.png b/assets/voxygen/element/skills/sword/balanced_thrust.png
new file mode 100644
index 0000000000..9eea5baa0c
--- /dev/null
+++ b/assets/voxygen/element/skills/sword/balanced_thrust.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d8de78c397d37fb5a43fad412f1a67c730e95cc55ca3b9c332b590cb0a3a09e4
+size 1940
diff --git a/assets/voxygen/element/skills/sword/cleaving_dive.png b/assets/voxygen/element/skills/sword/cleaving_dive.png
new file mode 100644
index 0000000000..bf424fd33a
--- /dev/null
+++ b/assets/voxygen/element/skills/sword/cleaving_dive.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5b7d69f154ef734e46700f917e33b87e02fb2c14e54c4c3719f94bdb2e8d29ca
+size 3129
diff --git a/assets/voxygen/element/skills/sword/cleaving_finisher.png b/assets/voxygen/element/skills/sword/cleaving_finisher.png
new file mode 100644
index 0000000000..bf424fd33a
--- /dev/null
+++ b/assets/voxygen/element/skills/sword/cleaving_finisher.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5b7d69f154ef734e46700f917e33b87e02fb2c14e54c4c3719f94bdb2e8d29ca
+size 3129
diff --git a/assets/voxygen/element/skills/sword/cleaving_spin.png b/assets/voxygen/element/skills/sword/cleaving_spin.png
new file mode 100644
index 0000000000..bf424fd33a
--- /dev/null
+++ b/assets/voxygen/element/skills/sword/cleaving_spin.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5b7d69f154ef734e46700f917e33b87e02fb2c14e54c4c3719f94bdb2e8d29ca
+size 3129
diff --git a/assets/voxygen/element/skills/sword/crippling_finisher.png b/assets/voxygen/element/skills/sword/crippling_finisher.png
new file mode 100644
index 0000000000..fda73730cc
--- /dev/null
+++ b/assets/voxygen/element/skills/sword/crippling_finisher.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e7acdcb7733ccb92c362b635498b4694d1cc6f7cd3d7fbb876cc2c7d34c0f1b5
+size 3062
diff --git a/assets/voxygen/element/skills/sword/crippling_gouge.png b/assets/voxygen/element/skills/sword/crippling_gouge.png
new file mode 100644
index 0000000000..fda73730cc
--- /dev/null
+++ b/assets/voxygen/element/skills/sword/crippling_gouge.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e7acdcb7733ccb92c362b635498b4694d1cc6f7cd3d7fbb876cc2c7d34c0f1b5
+size 3062
diff --git a/assets/voxygen/element/skills/sword/crippling_strike.png b/assets/voxygen/element/skills/sword/crippling_strike.png
new file mode 100644
index 0000000000..fda73730cc
--- /dev/null
+++ b/assets/voxygen/element/skills/sword/crippling_strike.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e7acdcb7733ccb92c362b635498b4694d1cc6f7cd3d7fbb876cc2c7d34c0f1b5
+size 3062
diff --git a/assets/voxygen/element/skills/sword/defensive_bulwark.png b/assets/voxygen/element/skills/sword/defensive_bulwark.png
new file mode 100644
index 0000000000..d8c8ec445b
--- /dev/null
+++ b/assets/voxygen/element/skills/sword/defensive_bulwark.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:62dad08c6fa2ec5ff28907d4d3dd1075648a8b4ef5ac324ae25acd12ed37b387
+size 2086
diff --git a/assets/voxygen/element/skills/sword/defensive_retreat.png b/assets/voxygen/element/skills/sword/defensive_retreat.png
new file mode 100644
index 0000000000..d8c8ec445b
--- /dev/null
+++ b/assets/voxygen/element/skills/sword/defensive_retreat.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:62dad08c6fa2ec5ff28907d4d3dd1075648a8b4ef5ac324ae25acd12ed37b387
+size 2086
diff --git a/assets/voxygen/element/skills/sword/heavy_finisher.png b/assets/voxygen/element/skills/sword/heavy_finisher.png
new file mode 100644
index 0000000000..6d1d5329e3
--- /dev/null
+++ b/assets/voxygen/element/skills/sword/heavy_finisher.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d90c8339e9d6b91e3905bac2ebf929492510d6de19769fb8480987c0c6a90b76
+size 3009
diff --git a/assets/voxygen/element/skills/sword/heavy_fortitude.png b/assets/voxygen/element/skills/sword/heavy_fortitude.png
new file mode 100644
index 0000000000..6d1d5329e3
--- /dev/null
+++ b/assets/voxygen/element/skills/sword/heavy_fortitude.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d90c8339e9d6b91e3905bac2ebf929492510d6de19769fb8480987c0c6a90b76
+size 3009
diff --git a/assets/voxygen/element/skills/sword/heavy_pommelstrike.png b/assets/voxygen/element/skills/sword/heavy_pommelstrike.png
new file mode 100644
index 0000000000..6d1d5329e3
--- /dev/null
+++ b/assets/voxygen/element/skills/sword/heavy_pommelstrike.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d90c8339e9d6b91e3905bac2ebf929492510d6de19769fb8480987c0c6a90b76
+size 3009
diff --git a/assets/voxygen/element/skills/sword/mobility_agility.png b/assets/voxygen/element/skills/sword/mobility_agility.png
new file mode 100644
index 0000000000..7fb61bae54
--- /dev/null
+++ b/assets/voxygen/element/skills/sword/mobility_agility.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:62e24c878262f842af548291fdfbdcf0dcae708a1b43e54fe5818c3cd7867214
+size 3050
diff --git a/assets/voxygen/element/skills/sword/mobility_feint.png b/assets/voxygen/element/skills/sword/mobility_feint.png
new file mode 100644
index 0000000000..7fb61bae54
--- /dev/null
+++ b/assets/voxygen/element/skills/sword/mobility_feint.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:62e24c878262f842af548291fdfbdcf0dcae708a1b43e54fe5818c3cd7867214
+size 3050
diff --git a/assets/voxygen/element/skills/sword/offensive_advance.png b/assets/voxygen/element/skills/sword/offensive_advance.png
new file mode 100644
index 0000000000..e219bcb92c
--- /dev/null
+++ b/assets/voxygen/element/skills/sword/offensive_advance.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:29f8c0bc3b5b552c47400c28de09bf4d39045c1bf87b937c37c1d13ad97aa426
+size 2083
diff --git a/assets/voxygen/element/skills/sword/offensive_finisher.png b/assets/voxygen/element/skills/sword/offensive_finisher.png
new file mode 100644
index 0000000000..e219bcb92c
--- /dev/null
+++ b/assets/voxygen/element/skills/sword/offensive_finisher.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:29f8c0bc3b5b552c47400c28de09bf4d39045c1bf87b937c37c1d13ad97aa426
+size 2083
diff --git a/assets/voxygen/element/skills/sword/parrying_counter.png b/assets/voxygen/element/skills/sword/parrying_counter.png
new file mode 100644
index 0000000000..d0133cda5e
--- /dev/null
+++ b/assets/voxygen/element/skills/sword/parrying_counter.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:87d1ec153df7f93a829d6d7c2abe2258bd89fa9b0f2f47f02a1c5276fc638b5c
+size 3069
diff --git a/assets/voxygen/element/skills/sword/parrying_parry.png b/assets/voxygen/element/skills/sword/parrying_parry.png
new file mode 100644
index 0000000000..d0133cda5e
--- /dev/null
+++ b/assets/voxygen/element/skills/sword/parrying_parry.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:87d1ec153df7f93a829d6d7c2abe2258bd89fa9b0f2f47f02a1c5276fc638b5c
+size 3069
diff --git a/assets/voxygen/element/skills/sword/parrying_riposte.png b/assets/voxygen/element/skills/sword/parrying_riposte.png
new file mode 100644
index 0000000000..d0133cda5e
--- /dev/null
+++ b/assets/voxygen/element/skills/sword/parrying_riposte.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:87d1ec153df7f93a829d6d7c2abe2258bd89fa9b0f2f47f02a1c5276fc638b5c
+size 3069
diff --git a/assets/voxygen/element/skills/sword/reaching_charge.png b/assets/voxygen/element/skills/sword/reaching_charge.png
new file mode 100644
index 0000000000..61b2312359
--- /dev/null
+++ b/assets/voxygen/element/skills/sword/reaching_charge.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5548e1027d6433bbe223fb2a48634f6d3b2b6fb314a4e40960045b5aebaab5c4
+size 3082
diff --git a/assets/voxygen/element/skills/sword/reaching_flurry.png b/assets/voxygen/element/skills/sword/reaching_flurry.png
new file mode 100644
index 0000000000..61b2312359
--- /dev/null
+++ b/assets/voxygen/element/skills/sword/reaching_flurry.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5548e1027d6433bbe223fb2a48634f6d3b2b6fb314a4e40960045b5aebaab5c4
+size 3082
diff --git a/assets/voxygen/element/skills/sword/reaching_skewer.png b/assets/voxygen/element/skills/sword/reaching_skewer.png
new file mode 100644
index 0000000000..61b2312359
--- /dev/null
+++ b/assets/voxygen/element/skills/sword/reaching_skewer.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5548e1027d6433bbe223fb2a48634f6d3b2b6fb314a4e40960045b5aebaab5c4
+size 3082
diff --git a/assets/voxygen/element/ui/diary/sword_bg.png b/assets/voxygen/element/ui/diary/sword_bg.png
new file mode 100644
index 0000000000..923b2109f3
--- /dev/null
+++ b/assets/voxygen/element/ui/diary/sword_bg.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:094ab433434421b793a2a508105dcbff3a64aeea0798a1e79996e1e8bed7fc63
+size 28572
diff --git a/assets/voxygen/i18n/en/hud/ability.ftl b/assets/voxygen/i18n/en/hud/ability.ftl
index 7360ec6745..94609c37f1 100644
--- a/assets/voxygen/i18n/en/hud/ability.ftl
+++ b/assets/voxygen/i18n/en/hud/ability.ftl
@@ -10,6 +10,8 @@ common-abilities-staff-fireshockwave = Ring of Fire
     .desc = Ignites the ground with fiery shockwave.
 common-abilities-sceptre-wardingaura = Warding Aura
     .desc = Wards your allies against enemy attacks.
+
+# Sword abilities
 common-abilities-sword-balanced_combo = Balanced Stance
     .desc = This stance has few downsides, but is not particularly special.
 common-abilities-sword-balanced_thrust = Sword Thrust
diff --git a/voxygen/src/hud/diary.rs b/voxygen/src/hud/diary.rs
index 02b16974c8..e4f3d52a45 100644
--- a/voxygen/src/hud/diary.rs
+++ b/voxygen/src/hud/diary.rs
@@ -45,6 +45,7 @@ use common::{
     },
     consts::{ENERGY_PER_LEVEL, HP_PER_LEVEL},
 };
+use inline_tweak::tweak;
 use std::borrow::Cow;
 
 const ART_SIZE: [f64; 2] = [320.0, 320.0];
@@ -79,7 +80,9 @@ widget_ids! {
         skills_top_r[],
         skills_bot_l[],
         skills_bot_r[],
-        sword_render,
+        skills[],
+        skill_lock_imgs[],
+        sword_bg,
         axe_render,
         skill_axe_combo_0,
         skill_axe_combo_1,
@@ -1310,6 +1313,11 @@ enum SkillIcon<'a> {
         position: PositionSpecifier,
         id: widget::Id,
     },
+    Ability {
+        skill: Skill,
+        ability_id: &'a str,
+        position: PositionSpecifier,
+    },
 }
 
 impl<'a> Diary<'a> {
@@ -1485,7 +1493,7 @@ impl<'a> Diary<'a> {
             },
         ];
 
-        self.handle_skill_buttons(skill_buttons, ui, &mut events, diary_tooltip);
+        self.handle_skill_buttons(skill_buttons, ui, &mut events, diary_tooltip, state);
         events
     }
 
@@ -1506,36 +1514,179 @@ impl<'a> Diary<'a> {
             .color(TEXT_COLOR)
             .set(state.ids.tree_title_txt, ui);
 
-        // Number of skills per rectangle per weapon, start counting at 0
-        // Maximum of 9 skills/8 indices
-        let skills_top_l = 5;
-        let skills_top_r = 7;
-        let skills_bot_l = 5;
-        let skills_bot_r = 1;
-
-        self.setup_state_for_skill_icons(
-            state,
-            ui,
-            skills_top_l,
-            skills_top_r,
-            skills_bot_l,
-            skills_bot_r,
-        );
-
         // Sword
-        Image::new(animate_by_pulse(
-            &self
-                .item_imgs
-                .img_ids_or_not_found_img(ItemKey::Simple("example_sword".to_string())),
-            self.pulse,
-        ))
-        .wh(ART_SIZE)
-        .middle_of(state.ids.content_align)
-        .color(Some(Color::Rgba(1.0, 1.0, 1.0, 1.0)))
-        .set(state.ids.sword_render, ui);
-        let skill_buttons = &[];
+        Image::new(self.imgs.sword_bg)
+            .wh([tweak!(1000.0), tweak!(600.0)])
+            .mid_top_with_margin_on(state.ids.content_align, tweak!(80.0))
+            .color(Some(Color::Rgba(1.0, 1.0, 1.0, 1.0)))
+            .set(state.ids.sword_bg, ui);
 
-        self.handle_skill_buttons(skill_buttons, ui, &mut events, diary_tooltip);
+        use PositionSpecifier::TopLeftWithMarginsOn;
+        let skill_buttons = &[
+            SkillIcon::Ability {
+                skill: Skill::Sword(SwordSkill::BalancedFinisher),
+                ability_id: "common.abilities.sword.balanced_finisher",
+                position: TopLeftWithMarginsOn(state.ids.sword_bg, tweak!(489.0), tweak!(462.0)),
+            },
+            SkillIcon::Ability {
+                skill: Skill::Sword(SwordSkill::OffensiveCombo),
+                ability_id: "common.abilities.sword.offensive_combo",
+                position: TopLeftWithMarginsOn(state.ids.sword_bg, tweak!(389.0), tweak!(313.0)),
+            },
+            SkillIcon::Ability {
+                skill: Skill::Sword(SwordSkill::OffensiveFinisher),
+                ability_id: "common.abilities.sword.offensive_finisher",
+                position: TopLeftWithMarginsOn(state.ids.sword_bg, tweak!(489.0), tweak!(265.0)),
+            },
+            SkillIcon::Ability {
+                skill: Skill::Sword(SwordSkill::OffensiveAdvance),
+                ability_id: "common.abilities.sword.offensive_advance",
+                position: TopLeftWithMarginsOn(state.ids.sword_bg, tweak!(489.0), tweak!(361.0)),
+            },
+            SkillIcon::Ability {
+                skill: Skill::Sword(SwordSkill::CripplingCombo),
+                ability_id: "common.abilities.sword.crippling_combo",
+                position: TopLeftWithMarginsOn(state.ids.sword_bg, tweak!(289.0), tweak!(164.0)),
+            },
+            SkillIcon::Ability {
+                skill: Skill::Sword(SwordSkill::CripplingFinisher),
+                ability_id: "common.abilities.sword.crippling_finisher",
+                position: TopLeftWithMarginsOn(state.ids.sword_bg, tweak!(193.0), tweak!(164.0)),
+            },
+            SkillIcon::Ability {
+                skill: Skill::Sword(SwordSkill::CripplingStrike),
+                ability_id: "common.abilities.sword.crippling_strike",
+                position: TopLeftWithMarginsOn(state.ids.sword_bg, tweak!(97.0), tweak!(164.0)),
+            },
+            SkillIcon::Ability {
+                skill: Skill::Sword(SwordSkill::CripplingGouge),
+                ability_id: "common.abilities.sword.crippling_gouge",
+                position: TopLeftWithMarginsOn(state.ids.sword_bg, tweak!(2.0), tweak!(164.0)),
+            },
+            SkillIcon::Ability {
+                skill: Skill::Sword(SwordSkill::CleavingCombo),
+                ability_id: "common.abilities.sword.cleaving_combo",
+                position: TopLeftWithMarginsOn(state.ids.sword_bg, tweak!(289.0), tweak!(15.0)),
+            },
+            SkillIcon::Ability {
+                skill: Skill::Sword(SwordSkill::CleavingFinisher),
+                ability_id: "common.abilities.sword.cleaving_finisher",
+                position: TopLeftWithMarginsOn(state.ids.sword_bg, tweak!(193.0), tweak!(15.0)),
+            },
+            SkillIcon::Ability {
+                skill: Skill::Sword(SwordSkill::CleavingSpin),
+                ability_id: "common.abilities.sword.cleaving_spin",
+                position: TopLeftWithMarginsOn(state.ids.sword_bg, tweak!(97.0), tweak!(15.0)),
+            },
+            SkillIcon::Ability {
+                skill: Skill::Sword(SwordSkill::CleavingDive),
+                ability_id: "common.abilities.sword.cleaving_dive",
+                position: TopLeftWithMarginsOn(state.ids.sword_bg, tweak!(2.0), tweak!(15.0)),
+            },
+            SkillIcon::Ability {
+                skill: Skill::Sword(SwordSkill::DefensiveCombo),
+                ability_id: "common.abilities.sword.defensive_combo",
+                position: TopLeftWithMarginsOn(state.ids.sword_bg, tweak!(389.0), tweak!(611.0)),
+            },
+            SkillIcon::Ability {
+                skill: Skill::Sword(SwordSkill::DefensiveBulwark),
+                ability_id: "common.abilities.sword.defensive_bulwark",
+                position: TopLeftWithMarginsOn(state.ids.sword_bg, tweak!(489.0), tweak!(659.0)),
+            },
+            SkillIcon::Ability {
+                skill: Skill::Sword(SwordSkill::DefensiveRetreat),
+                ability_id: "common.abilities.sword.defensive_retreat",
+                position: TopLeftWithMarginsOn(state.ids.sword_bg, tweak!(489.0), tweak!(563.0)),
+            },
+            SkillIcon::Ability {
+                skill: Skill::Sword(SwordSkill::ParryingCombo),
+                ability_id: "common.abilities.sword.parrying_combo",
+                position: TopLeftWithMarginsOn(state.ids.sword_bg, tweak!(289.0), tweak!(760.0)),
+            },
+            SkillIcon::Ability {
+                skill: Skill::Sword(SwordSkill::ParryingParry),
+                ability_id: "common.abilities.sword.parrying_parry",
+                position: TopLeftWithMarginsOn(state.ids.sword_bg, tweak!(193.0), tweak!(760.0)),
+            },
+            SkillIcon::Ability {
+                skill: Skill::Sword(SwordSkill::ParryingRiposte),
+                ability_id: "common.abilities.sword.parrying_riposte",
+                position: TopLeftWithMarginsOn(state.ids.sword_bg, tweak!(97.0), tweak!(760.0)),
+            },
+            SkillIcon::Ability {
+                skill: Skill::Sword(SwordSkill::ParryingCounter),
+                ability_id: "common.abilities.sword.parrying_counter",
+                position: TopLeftWithMarginsOn(state.ids.sword_bg, tweak!(2.0), tweak!(760.0)),
+            },
+            SkillIcon::Ability {
+                skill: Skill::Sword(SwordSkill::HeavyCombo),
+                ability_id: "common.abilities.sword.heavy_combo",
+                position: TopLeftWithMarginsOn(state.ids.sword_bg, tweak!(289.0), tweak!(909.0)),
+            },
+            SkillIcon::Ability {
+                skill: Skill::Sword(SwordSkill::HeavyFinisher),
+                ability_id: "common.abilities.sword.heavy_finisher",
+                position: TopLeftWithMarginsOn(state.ids.sword_bg, tweak!(193.0), tweak!(909.0)),
+            },
+            SkillIcon::Ability {
+                skill: Skill::Sword(SwordSkill::HeavyPommelStrike),
+                ability_id: "common.abilities.sword.heavy_pommelstrike",
+                position: TopLeftWithMarginsOn(state.ids.sword_bg, tweak!(97.0), tweak!(909.0)),
+            },
+            SkillIcon::Ability {
+                skill: Skill::Sword(SwordSkill::HeavyFortitude),
+                ability_id: "common.abilities.sword.heavy_fortitude",
+                position: TopLeftWithMarginsOn(state.ids.sword_bg, tweak!(2.0), tweak!(909.0)),
+            },
+            SkillIcon::Ability {
+                skill: Skill::Sword(SwordSkill::MobilityCombo),
+                ability_id: "common.abilities.sword.mobility_combo",
+                position: TopLeftWithMarginsOn(state.ids.sword_bg, tweak!(289.0), tweak!(462.0)),
+            },
+            SkillIcon::Ability {
+                skill: Skill::Sword(SwordSkill::MobilityFeint),
+                ability_id: "common.abilities.sword.mobility_feint",
+                position: TopLeftWithMarginsOn(state.ids.sword_bg, tweak!(289.0), tweak!(313.0)),
+            },
+            SkillIcon::Ability {
+                skill: Skill::Sword(SwordSkill::MobilityAgility),
+                ability_id: "common.abilities.sword.mobility_agility",
+                position: TopLeftWithMarginsOn(state.ids.sword_bg, tweak!(289.0), tweak!(611.0)),
+            },
+            SkillIcon::Ability {
+                skill: Skill::Sword(SwordSkill::ReachingCombo),
+                ability_id: "common.abilities.sword.reaching_combo",
+                position: TopLeftWithMarginsOn(state.ids.sword_bg, tweak!(141.0), tweak!(462.0)),
+            },
+            SkillIcon::Ability {
+                skill: Skill::Sword(SwordSkill::ReachingCharge),
+                ability_id: "common.abilities.sword.reaching_charge",
+                position: TopLeftWithMarginsOn(state.ids.sword_bg, tweak!(2.0), tweak!(367.0)),
+            },
+            SkillIcon::Ability {
+                skill: Skill::Sword(SwordSkill::ReachingFlurry),
+                ability_id: "common.abilities.sword.reaching_flurry",
+                position: TopLeftWithMarginsOn(state.ids.sword_bg, tweak!(2.0), tweak!(462.0)),
+            },
+            SkillIcon::Ability {
+                skill: Skill::Sword(SwordSkill::ReachingSkewer),
+                ability_id: "common.abilities.sword.reaching_skewer",
+                position: TopLeftWithMarginsOn(state.ids.sword_bg, tweak!(2.0), tweak!(558.0)),
+            },
+        ];
+
+        state.update(|s| {
+            s.ids
+                .skills
+                .resize(skill_buttons.len(), &mut ui.widget_id_generator())
+        });
+        state.update(|s| {
+            s.ids
+                .skill_lock_imgs
+                .resize(skill_buttons.len(), &mut ui.widget_id_generator())
+        });
+
+        self.handle_skill_buttons(skill_buttons, ui, &mut events, diary_tooltip, state);
         events
     }
 
@@ -1693,7 +1844,7 @@ impl<'a> Diary<'a> {
             },
         ];
 
-        self.handle_skill_buttons(skill_buttons, ui, &mut events, diary_tooltip);
+        self.handle_skill_buttons(skill_buttons, ui, &mut events, diary_tooltip, state);
         events
     }
 
@@ -1851,7 +2002,7 @@ impl<'a> Diary<'a> {
             },
         ];
 
-        self.handle_skill_buttons(skill_buttons, ui, &mut events, diary_tooltip);
+        self.handle_skill_buttons(skill_buttons, ui, &mut events, diary_tooltip, state);
         events
     }
 
@@ -2003,7 +2154,7 @@ impl<'a> Diary<'a> {
             },
         ];
 
-        self.handle_skill_buttons(skill_buttons, ui, &mut events, diary_tooltip);
+        self.handle_skill_buttons(skill_buttons, ui, &mut events, diary_tooltip, state);
         events
     }
 
@@ -2161,7 +2312,7 @@ impl<'a> Diary<'a> {
             },
         ];
 
-        self.handle_skill_buttons(skill_buttons, ui, &mut events, diary_tooltip);
+        self.handle_skill_buttons(skill_buttons, ui, &mut events, diary_tooltip, state);
         events
     }
 
@@ -2308,7 +2459,7 @@ impl<'a> Diary<'a> {
             },
         ];
 
-        self.handle_skill_buttons(skill_buttons, ui, &mut events, diary_tooltip);
+        self.handle_skill_buttons(skill_buttons, ui, &mut events, diary_tooltip, state);
         events
     }
 
@@ -2392,7 +2543,7 @@ impl<'a> Diary<'a> {
             },
         ];
 
-        self.handle_skill_buttons(skill_buttons, ui, &mut events, diary_tooltip);
+        self.handle_skill_buttons(skill_buttons, ui, &mut events, diary_tooltip, state);
         events
     }
 
@@ -2402,8 +2553,9 @@ impl<'a> Diary<'a> {
         ui: &mut UiCell,
         events: &mut Vec<Event>,
         diary_tooltip: &Tooltip,
+        state: &mut State<DiaryState>,
     ) {
-        for icon in icons {
+        for (i, icon) in icons.iter().enumerate() {
             match icon {
                 SkillIcon::Descriptive {
                     title,
@@ -2439,6 +2591,20 @@ impl<'a> Diary<'a> {
                     events,
                     diary_tooltip,
                 ),
+                SkillIcon::Ability {
+                    skill,
+                    ability_id,
+                    position,
+                } => self.create_unlock_ability_button(
+                    *skill,
+                    ability_id,
+                    *position,
+                    i,
+                    ui,
+                    events,
+                    diary_tooltip,
+                    state,
+                ),
             }
         }
     }
@@ -2629,6 +2795,59 @@ impl<'a> Diary<'a> {
             events.push(Event::UnlockSkill(skill));
         };
     }
+
+    fn create_unlock_ability_button(
+        &mut self,
+        skill: Skill,
+        ability_id: &str,
+        position: PositionSpecifier,
+        widget_index: usize,
+        ui: &mut UiCell,
+        events: &mut Vec<Event>,
+        diary_tooltip: &Tooltip,
+        state: &mut State<DiaryState>,
+    ) {
+        let locked = !self.skill_set.prerequisites_met(skill);
+        let owned = self.skill_set.has_skill(skill);
+        let image_color = if owned {
+            TEXT_COLOR
+        } else {
+            Color::Rgba(0.41, 0.41, 0.41, 0.7)
+        };
+
+        let (title, description) = util::ability_description(ability_id, self.localized_strings);
+
+        let sp_cost = sp(self.localized_strings, self.skill_set, skill);
+
+        let description = format!("{description}\n{sp_cost}");
+
+        let button = Button::image(util::ability_image(self.imgs, ability_id))
+            .w_h(76.0, 76.0)
+            .position(position)
+            .image_color(image_color)
+            .with_tooltip(
+                self.tooltip_manager,
+                &title,
+                &description,
+                diary_tooltip,
+                TEXT_COLOR,
+            )
+            .set(state.ids.skills[widget_index], ui);
+
+        // Lock Image
+        if locked {
+            Image::new(self.imgs.lock)
+                .w_h(76.0, 76.0)
+                .middle_of(state.ids.skills[widget_index])
+                .graphics_for(state.ids.skills[widget_index])
+                .color(Some(Color::Rgba(1.0, 1.0, 1.0, 0.8)))
+                .set(state.ids.skill_lock_imgs[widget_index], ui);
+        }
+
+        if button.was_clicked() {
+            events.push(Event::UnlockSkill(skill));
+        };
+    }
 }
 
 /// Returns skill info as a tuple of title and description.
diff --git a/voxygen/src/hud/img_ids.rs b/voxygen/src/hud/img_ids.rs
index 8acf929195..1c5b862adf 100644
--- a/voxygen/src/hud/img_ids.rs
+++ b/voxygen/src/hud/img_ids.rs
@@ -81,6 +81,7 @@ image_ids! {
         book_bg: "voxygen.element.ui.diary.spellbook_bg",
         skills_bg: "voxygen.element.ui.diary.diary_skills_bg",
         slot_skills: "voxygen.element.ui.diary.buttons.slot_skilltree",
+        sword_bg: "voxygen.element.ui.diary.sword_bg",
         swords_crossed: "voxygen.element.weapons.swords_crossed",
         sceptre: "voxygen.element.weapons.sceptre",
         sword: "voxygen.element.weapons.sword",
@@ -202,37 +203,37 @@ image_ids! {
         flamethrower: "voxygen.element.skills.skill_flamethrower",
         // Sword
         sword_balanced_combo: "voxygen.element.skills.sword.balanced_combo",
-        // sword_balanced_thrust: "voxygen.element.skills.sword.balanced_thrust",
-        // sword_balanced_finisher: "voxygen.element.skills.sword.balanced_finisher",
+        sword_balanced_thrust: "voxygen.element.skills.sword.balanced_thrust",
+        sword_balanced_finisher: "voxygen.element.skills.sword.balanced_finisher",
         sword_offensive_combo: "voxygen.element.skills.sword.offensive_combo",
-        // sword_offensive_finisher: "voxygen.element.skills.sword.offensive_finisher",
-        // sword_offensive_advance: "voxygen.element.skills.sword.offensive_advance",
+        sword_offensive_finisher: "voxygen.element.skills.sword.offensive_finisher",
+        sword_offensive_advance: "voxygen.element.skills.sword.offensive_advance",
         sword_crippling_combo: "voxygen.element.skills.sword.crippling_combo",
-        // sword_crippling_finisher: "voxygen.element.skills.sword.crippling_finisher",
-        // sword_crippling_strike: "voxygen.element.skills.sword.crippling_strike",
-        // sword_crippling_gouge: "voxygen.element.skills.sword.crippling_gouge",
+        sword_crippling_finisher: "voxygen.element.skills.sword.crippling_finisher",
+        sword_crippling_strike: "voxygen.element.skills.sword.crippling_strike",
+        sword_crippling_gouge: "voxygen.element.skills.sword.crippling_gouge",
         sword_cleaving_combo: "voxygen.element.skills.sword.cleaving_combo",
-        // sword_cleaving_finisher: "voxygen.element.skills.sword.cleaving_finisher",
-        // sword_cleaving_spin: "voxygen.element.skills.sword.cleaving_spin",
-        // sword_cleaving_dive: "voxygen.element.skills.sword.cleaving_dive",
+        sword_cleaving_finisher: "voxygen.element.skills.sword.cleaving_finisher",
+        sword_cleaving_spin: "voxygen.element.skills.sword.cleaving_spin",
+        sword_cleaving_dive: "voxygen.element.skills.sword.cleaving_dive",
         sword_defensive_combo: "voxygen.element.skills.sword.defensive_combo",
-        // sword_defensive_bulwark: "voxygen.element.skills.sword.defensive_bulwark",
-        // sword_defensive_retreat: "voxygen.element.skills.sword.defensive_retreat",
+        sword_defensive_bulwark: "voxygen.element.skills.sword.defensive_bulwark",
+        sword_defensive_retreat: "voxygen.element.skills.sword.defensive_retreat",
         sword_parrying_combo: "voxygen.element.skills.sword.parrying_combo",
-        // sword_parrying_parry: "voxygen.element.skills.sword.parrying_parry",
-        // sword_parrying_riposte: "voxygen.element.skills.sword.parrying_riposte",
-        // sword_parrying_counter: "voxygen.element.skills.sword.parrying_counter",
+        sword_parrying_parry: "voxygen.element.skills.sword.parrying_parry",
+        sword_parrying_riposte: "voxygen.element.skills.sword.parrying_riposte",
+        sword_parrying_counter: "voxygen.element.skills.sword.parrying_counter",
         sword_heavy_combo: "voxygen.element.skills.sword.heavy_combo",
-        // sword_heavy_finisher: "voxygen.element.skills.sword.heavy_finisher",
-        // sword_heavy_pommelstrike: "voxygen.element.skills.sword.heavy_pommelstrike",
-        // sword_heavy_fortitude: "voxygen.element.skills.sword.heavy_fortitude",
+        sword_heavy_finisher: "voxygen.element.skills.sword.heavy_finisher",
+        sword_heavy_pommelstrike: "voxygen.element.skills.sword.heavy_pommelstrike",
+        sword_heavy_fortitude: "voxygen.element.skills.sword.heavy_fortitude",
         sword_mobility_combo: "voxygen.element.skills.sword.mobility_combo",
-        // sword_mobility_feint: "voxygen.element.skills.sword.mobility_feint",
-        // sword_mobility_agility: "voxygen.element.skills.sword.mobility_agility",
+        sword_mobility_feint: "voxygen.element.skills.sword.mobility_feint",
+        sword_mobility_agility: "voxygen.element.skills.sword.mobility_agility",
         sword_reaching_combo: "voxygen.element.skills.sword.reaching_combo",
-        // sword_reaching_charge: "voxygen.element.skills.sword.reaching_charge",
-        // sword_reaching_flurry: "voxygen.element.skills.sword.reaching_flurry",
-        // sword_reaching_skewer: "voxygen.element.skills.sword.reaching_skewer",
+        sword_reaching_charge: "voxygen.element.skills.sword.reaching_charge",
+        sword_reaching_flurry: "voxygen.element.skills.sword.reaching_flurry",
+        sword_reaching_skewer: "voxygen.element.skills.sword.reaching_skewer",
 
         // Skilltree Icons
         health_plus_skill: "voxygen.element.skills.skilltree.health_plus",
diff --git a/voxygen/src/hud/mod.rs b/voxygen/src/hud/mod.rs
index c0a7e214f6..eb2092717c 100644
--- a/voxygen/src/hud/mod.rs
+++ b/voxygen/src/hud/mod.rs
@@ -419,8 +419,8 @@ impl<W: Positionable> Position for W {
     fn position(self, request: PositionSpecifier) -> Self {
         match request {
             // Place the widget near other widget with the given margins
-            PositionSpecifier::TopLeftWithMarginsOn(other, top, right) => {
-                self.top_left_with_margins_on(other, top, right)
+            PositionSpecifier::TopLeftWithMarginsOn(other, top, left) => {
+                self.top_left_with_margins_on(other, top, left)
             },
             PositionSpecifier::TopRightWithMarginsOn(other, top, right) => {
                 self.top_right_with_margins_on(other, top, right)
diff --git a/voxygen/src/hud/util.rs b/voxygen/src/hud/util.rs
index 13e6f10476..5f77fc81ef 100644
--- a/voxygen/src/hud/util.rs
+++ b/voxygen/src/hud/util.rs
@@ -335,37 +335,37 @@ pub fn ability_image(imgs: &img_ids::Imgs, ability_id: &str) -> image::Id {
         "common.abilities.debug.possess" => imgs.snake_arrow_0,
         // Sword
         "common.abilities.sword.balanced_combo" => imgs.sword_balanced_combo,
-        // "common.abilities.sword.balanced_thrust" => imgs.sword_balanced_thrust,
-        // "common.abilities.sword.balanced_finisher" => imgs.sword_balanced_finisher,
+        "common.abilities.sword.balanced_thrust" => imgs.sword_balanced_thrust,
+        "common.abilities.sword.balanced_finisher" => imgs.sword_balanced_finisher,
         "common.abilities.sword.offensive_combo" => imgs.sword_offensive_combo,
-        // "common.abilities.sword.offensive_finisher" => imgs.sword_offensive_finisher,
-        // "common.abilities.sword.offensive_advance" => imgs.sword_offensive_advance,
+        "common.abilities.sword.offensive_finisher" => imgs.sword_offensive_finisher,
+        "common.abilities.sword.offensive_advance" => imgs.sword_offensive_advance,
         "common.abilities.sword.crippling_combo" => imgs.sword_crippling_combo,
-        // "common.abilities.sword.crippling_finisher" => imgs.sword_crippling_finisher,
-        // "common.abilities.sword.crippling_strike" => imgs.sword_crippling_strike,
-        // "common.abilities.sword.crippling_gouge" => imgs.sword_crippling_gouge,
+        "common.abilities.sword.crippling_finisher" => imgs.sword_crippling_finisher,
+        "common.abilities.sword.crippling_strike" => imgs.sword_crippling_strike,
+        "common.abilities.sword.crippling_gouge" => imgs.sword_crippling_gouge,
         "common.abilities.sword.cleaving_combo" => imgs.sword_cleaving_combo,
-        // "common.abilities.sword.cleaving_finisher" => imgs.sword_cleaving_finisher,
-        // "common.abilities.sword.cleaving_spin" => imgs.sword_cleaving_spin,
-        // "common.abilities.sword.cleaving_dive" => imgs.sword_cleaving_dive,
+        "common.abilities.sword.cleaving_finisher" => imgs.sword_cleaving_finisher,
+        "common.abilities.sword.cleaving_spin" => imgs.sword_cleaving_spin,
+        "common.abilities.sword.cleaving_dive" => imgs.sword_cleaving_dive,
         "common.abilities.sword.defensive_combo" => imgs.sword_defensive_combo,
-        // "common.abilities.sword.defensive_bulwark" => imgs.sword_defensive_bulwark,
-        // "common.abilities.sword.defensive_retreat" => imgs.sword_defensive_retreat,
+        "common.abilities.sword.defensive_bulwark" => imgs.sword_defensive_bulwark,
+        "common.abilities.sword.defensive_retreat" => imgs.sword_defensive_retreat,
         "common.abilities.sword.parrying_combo" => imgs.sword_parrying_combo,
-        // "common.abilities.sword.parrying_parry" => imgs.sword_parrying_parry,
-        // "common.abilities.sword.parrying_riposte" => imgs.sword_parrying_riposte,
-        // "common.abilities.sword.parrying_counter" => imgs.sword_parrying_counter,
+        "common.abilities.sword.parrying_parry" => imgs.sword_parrying_parry,
+        "common.abilities.sword.parrying_riposte" => imgs.sword_parrying_riposte,
+        "common.abilities.sword.parrying_counter" => imgs.sword_parrying_counter,
         "common.abilities.sword.heavy_combo" => imgs.sword_heavy_combo,
-        // "common.abilities.sword.heavy_finisher" => imgs.sword_heavy_finisher,
-        // "common.abilities.sword.heavy_pommelstrike" => imgs.sword_heavy_pommelstrike,
-        // "common.abilities.sword.heavy_fortitude" => imgs.sword_heavy_fortitude,
+        "common.abilities.sword.heavy_finisher" => imgs.sword_heavy_finisher,
+        "common.abilities.sword.heavy_pommelstrike" => imgs.sword_heavy_pommelstrike,
+        "common.abilities.sword.heavy_fortitude" => imgs.sword_heavy_fortitude,
         "common.abilities.sword.mobility_combo" => imgs.sword_mobility_combo,
-        // "common.abilities.sword.mobility_feint" => imgs.sword_mobility_feint,
-        // "common.abilities.sword.mobility_agility" => imgs.sword_mobility_agility,
+        "common.abilities.sword.mobility_feint" => imgs.sword_mobility_feint,
+        "common.abilities.sword.mobility_agility" => imgs.sword_mobility_agility,
         "common.abilities.sword.reaching_combo" => imgs.sword_reaching_combo,
-        // "common.abilities.sword.reaching_charge" => imgs.sword_reaching_charge,
-        // "common.abilities.sword.reaching_flurry" => imgs.sword_reaching_flurry,
-        // "common.abilities.sword.reaching_skewer" => imgs.sword_reaching_skewer,
+        "common.abilities.sword.reaching_charge" => imgs.sword_reaching_charge,
+        "common.abilities.sword.reaching_flurry" => imgs.sword_reaching_flurry,
+        "common.abilities.sword.reaching_skewer" => imgs.sword_reaching_skewer,
         // Axe
         "common.abilities.axe.doublestrike" => imgs.twohaxe_m1,
         "common.abilities.axe.spin" => imgs.axespin,