diff --git a/src/components/Skill/index.css b/src/components/Skill/index.css
new file mode 100644
index 0000000..6278703
--- /dev/null
+++ b/src/components/Skill/index.css
@@ -0,0 +1,83 @@
+.skill {
+  position: relative;
+  z-index: 1;
+  flex: 0 1 auto;
+  margin: 0.5rem;
+  padding: 0rem;
+  height: 2.5rem;
+  width: 2.5rem;
+  line-height: 1;
+  display: flex;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  filter: brightness(50%);
+}
+
+.skill.enabled {
+  filter: brightness(100%);
+}
+
+.skill:before {
+  content: '';
+  background-color: #333;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  height: 100%;
+  width: 100%;
+  z-index: -1;
+}
+
+.skill.usable:before {
+  background-color: #A70;
+}
+
+.actionSkill:before {
+  clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
+}
+
+.chevron:before {
+  clip-path: polygon(0 0, 50% 25%, 100% 0, 100% 75%, 50% 100%, 0 75%);
+}
+
+.diamond:before {
+  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0 50%);
+}
+
+.augment, .actionSkill {
+  margin: 0.25rem;
+  padding: 0.25rem;
+  height: 3em;
+  width: 3em;
+}
+
+.augment {
+  outline: calc(0.25em + 1px) solid var(--themeColor);
+  background-color: var(--themeColor);
+}
+
+.augment:first-child {
+  position: absolute;
+  left: 0;
+}
+.augment:last-child {
+  position: absolute;
+  right: 0;
+}
+
+.augment:only-child {
+  position: relative;
+  background-color: transparent;
+  outline: none;
+}
+
+.ranks {
+  position: absolute;
+  bottom: -0.25rem;
+  right: -0.25rem;
+  font-size: 0.75em;
+  background-color: #333;
+  padding: 0.1em;
+}
diff --git a/src/components/Skill/index.js b/src/components/Skill/index.js
new file mode 100644
index 0000000..45de09b
--- /dev/null
+++ b/src/components/Skill/index.js
@@ -0,0 +1,40 @@
+// import { useState } from 'preact/hooks';
+import SKILLS from '@constants/skills';
+import style from './index.css';
+
+function getInitials (string) {
+  const initials = string.match(/\b\w/g) || [];
+  return ((initials.shift() || '') + (initials.pop() || '')).toUpperCase();
+}
+
+export default function VaultHunter ({
+  name = '?',
+  text = 'Long description',
+  ranks = 0,
+  invested = 0,
+  effect = rank => `Rank ${rank} effect`,
+  type = null,
+  enabled = true,
+}) {
+  const isAugment = [
+    SKILLS.AUGMENT_CHEVRON,
+    SKILLS.AUGMENT_DIAMOND,
+    SKILLS.ACTION_SKILL,
+  ].includes(type);
+  let shapeStyle = null;
+  if (type === SKILLS.AUGMENT_CHEVRON) { shapeStyle = style.chevron; }
+  if (type === SKILLS.AUGMENT_DIAMOND) { shapeStyle = style.diamond; }
+  if (type === SKILLS.ACTION_SKILL) { shapeStyle = style.actionSkill; }
+  return (
+    <div class={[
+      style.skill,
+      isAugment ? style.augment : '',
+      shapeStyle,
+      enabled ? style.enabled : '',
+      enabled && (ranks === 0 || invested > 0) ? style.usable : '',
+    ].join(' ')}>
+      { getInitials(name) }
+      { enabled && ranks > 0 && <div class={style.ranks}>{invested}/{ranks}</div>}
+    </div>
+  );
+}
diff --git a/src/components/VaultHunter/index.css b/src/components/VaultHunter/index.css
index 76af677..864d43b 100644
--- a/src/components/VaultHunter/index.css
+++ b/src/components/VaultHunter/index.css
@@ -13,16 +13,18 @@
   color: white;
   order: 1;
   font-size: 1em;
+  line-height: 1rem;
 }
 
 .tree {
   display: flex;
   flex-direction: column;
   margin: 1rem;
-  background-image: linear-gradient(0deg, var(--themeColor), var(--themeColor));
-  background-size: calc(3.5rem * 3) calc(100% - 1.5rem);
-  background-repeat: no-repeat;
-  background-position: center bottom;
+  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
+    linear-gradient(0deg, var(--themeColor), var(--themeColor));
+  background-size: calc(3.5rem * 3) calc((25 - var(--invested)) / 5 * 3.5rem + 1rem), calc(3.5rem * 3) calc(100% - 1.5rem);
+  background-repeat: no-repeat, no-repeat;
+  background-position: center bottom, center bottom;
 }
 
 .tier {
@@ -31,76 +33,6 @@
   position: relative;
 }
 
-.skill {
-  position: relative;
-  z-index: 1;
-  flex: 0 1 auto;
-  margin: 0.5rem;
-  padding: 0rem;
-  height: 2.5rem;
-  width: 2.5rem;
-  line-height: 1;
-  display: flex;
-  text-align: center;
-  justify-content: center;
-  align-items: center;
-  color: white;
-}
-
-.skill:before {
-  content: '';
-  background-color: #333;
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  height: 100%;
-  width: 100%;
-  z-index: -1;
-}
-
-.skill.bought:before {
-  background-color: #A70;
-}
-
-.actionSkill:before {
-  clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
-}
-
-.chevron:before {
-  clip-path: polygon(0 0, 50% 25%, 100% 0, 100% 75%, 50% 100%, 0 75%);
-}
-
-.diamond:before {
-  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0 50%);
-}
-
-.augment, .actionSkill {
-  margin: 0.25rem;
-  padding: 0.25rem;
-  height: 3em;
-  width: 3em;
-}
-
-.augment {
-  outline: 0.25em solid var(--themeColor);
-  background-color: var(--themeColor);
-}
-
-.augment:first-child {
-  position: absolute;
-  left: 0;
-}
-.augment:last-child {
-  position: absolute;
-  right: 0;
-}
-
-.augment:only-child {
-  position: relative;
-  background-color: transparent;
-  outline: none;
-}
-
 .blue {
   --themeColor: #007;
 }
diff --git a/src/components/VaultHunter/index.js b/src/components/VaultHunter/index.js
index 35438a6..f3aad1c 100644
--- a/src/components/VaultHunter/index.js
+++ b/src/components/VaultHunter/index.js
@@ -1,42 +1,33 @@
 import { useState } from 'preact/hooks';
-import SKILLS from '@constants/skills';
+import Skill from '@components/Skill';
 import style from './index.css';
 
-function getInitials (string) {
-  const initials = string.match(/\b\w/g) || [];
-  return ((initials.shift() || '') + (initials.pop() || '')).toUpperCase();
-}
+const initialState = {
+  invested: [12, 0, 20],
+};
 
-export default function VaultHunter ({ name = 'Unnamed', discipline = 'Classless', skills = {}, }) {
-  const [build] = useState(skills);
+export default function VaultHunter ({
+  name = 'Unnamed',
+  discipline = 'Classless',
+  skills = {},
+}) {
+  const [build] = useState(initialState);
   const trees =
-    Object.keys(build).map((treename, treeindex) =>
-      <div class={`${style.tree} ${[style.green, style.blue, style.red][treeindex]}`}>
+    Object.keys(skills).map((treename, treeindex) =>
+      <div
+        class={`${style.tree} ${[style.green, style.blue, style.red][treeindex]}`}
+        style={{ '--invested': build.invested[treeindex] }}
+      >
         <h2 class={style.treeName}>{ treename }</h2>
-        { Object.keys(build[treename]).map((tier, tierindex) =>
+        { Object.keys(skills[treename]).map((tier, tierindex) =>
           <div class={style.tier}>
-            { Object.keys(build[treename][tier]).map(skillname => {
-              const skill = build[treename][tier][skillname];
-              const isAugment = [
-                SKILLS.AUGMENT_CHEVRON,
-                SKILLS.AUGMENT_DIAMOND,
-                SKILLS.ACTION_SKILL,
-              ].includes(skill.type);
-              let shapeStyle = null;
-              if (skill.type === SKILLS.AUGMENT_CHEVRON) { shapeStyle = style.chevron; }
-              if (skill.type === SKILLS.AUGMENT_DIAMOND) { shapeStyle = style.diamond; }
-              if (skill.type === SKILLS.ACTION_SKILL) { shapeStyle = style.actionSkill; }
-              return (
-                <div class={[
-                  style.skill,
-                  isAugment ? style.augment : '',
-                  shapeStyle,
-                  skill.bought ? style.bought : '',
-                ].join(' ')}>
-                  { getInitials(skillname) }
-                </div>
-              );
-            }) }
+            { Object.keys(skills[treename][tier]).map(
+              skillname => <Skill
+                {...skills[treename][tier][skillname]}
+                name={skillname}
+                enabled={build.invested[treeindex] >= 5 * tierindex - 5}
+              />
+            ) }
           </div>
         ) }
       </div>