diff --git a/public/manifest.json b/public/manifest.json
index 968abd2..9a41603 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -9,6 +9,6 @@
     "icon": "/icon.svg",
     "popover": "/tags",
     "height": 600,
-    "width": 800
+    "width": 1000
   }
 }
diff --git a/src/assets/dice-accent.svg b/src/assets/dice-accent.svg
new file mode 100644
index 0000000..c157646
--- /dev/null
+++ b/src/assets/dice-accent.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 512px; width: 512px;"><g class="" transform="translate(0,0)" style=""><path d="M255.76 44.764c-6.176 0-12.353 1.384-17.137 4.152L85.87 137.276c-9.57 5.536-9.57 14.29 0 19.826l152.753 88.36c9.57 5.536 24.703 5.536 34.272 0l152.753-88.36c9.57-5.535 9.57-14.29 0-19.825l-152.753-88.36c-4.785-2.77-10.96-4.153-17.135-4.153zm-117.313 82.61a31.953 18.96 0 0 1 .002 0 31.953 18.96 0 0 1 21.195 5.536 31.953 18.96 0 0 1-45.19 26.813 31.953 18.96 0 0 1 23.992-32.348zm118.24.245a31.953 18.96 0 0 1 22.125 32.362 31.953 18.96 0 1 1-45.187-26.812 31.953 18.96 0 0 1 23.06-5.55zm119.663.015a31.953 18.96 0 0 1 .002 0 31.953 18.96 0 0 1 21.195 5.535 31.953 18.96 0 0 1-45.19 26.812 31.953 18.96 0 0 1 23.993-32.347zM75.67 173.84c-5.753-.155-9.664 4.336-9.664 12.28v157.696c0 11.052 7.57 24.163 17.14 29.69l146.93 84.848c9.57 5.526 17.14 1.156 17.14-9.895V290.76c0-11.052-7.57-24.16-17.14-29.688l-146.93-84.847c-2.69-1.555-5.225-2.327-7.476-2.387zm360.773.002c-2.25.06-4.783.83-7.474 2.385l-146.935 84.847c-9.57 5.527-17.14 18.638-17.14 29.69v157.7c0 11.05 7.57 15.418 17.14 9.89L428.97 373.51c9.57-5.527 17.137-18.636 17.137-29.688v-157.7c0-7.942-3.91-12.432-9.664-12.278zm-235.146 86.592a31.236 18.008 58.094 0 1 33.818 41.183 31.236 18.008 58.094 1 1-45-25.98 31.236 18.008 58.094 0 1 11.182-15.203zM366.82 289.1a18.008 31.236 31.906 0 1 .002 0 18.008 31.236 31.906 0 1 11.18 15.203 18.008 31.236 31.906 0 1-45 25.98A18.008 31.236 31.906 0 1 366.82 289.1zM89.297 318.48a31.236 18.008 58.094 0 1 33.818 41.184 31.236 18.008 58.094 1 1-45-25.98 31.236 18.008 58.094 0 1 11.182-15.204z" fill="#7d7d7d" fill-opacity="1"></path></g></svg>
\ No newline at end of file
diff --git a/src/assets/dice-text.svg b/src/assets/dice-text.svg
new file mode 100644
index 0000000..76a3649
--- /dev/null
+++ b/src/assets/dice-text.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 512px; width: 512px;"><g class="" transform="translate(0,0)" style=""><path d="M255.76 44.764c-6.176 0-12.353 1.384-17.137 4.152L85.87 137.276c-9.57 5.536-9.57 14.29 0 19.826l152.753 88.36c9.57 5.536 24.703 5.536 34.272 0l152.753-88.36c9.57-5.535 9.57-14.29 0-19.825l-152.753-88.36c-4.785-2.77-10.96-4.153-17.135-4.153zm-117.313 82.61a31.953 18.96 0 0 1 .002 0 31.953 18.96 0 0 1 21.195 5.536 31.953 18.96 0 0 1-45.19 26.813 31.953 18.96 0 0 1 23.992-32.348zm118.24.245a31.953 18.96 0 0 1 22.125 32.362 31.953 18.96 0 1 1-45.187-26.812 31.953 18.96 0 0 1 23.06-5.55zm119.663.015a31.953 18.96 0 0 1 .002 0 31.953 18.96 0 0 1 21.195 5.535 31.953 18.96 0 0 1-45.19 26.812 31.953 18.96 0 0 1 23.993-32.347zM75.67 173.84c-5.753-.155-9.664 4.336-9.664 12.28v157.696c0 11.052 7.57 24.163 17.14 29.69l146.93 84.848c9.57 5.526 17.14 1.156 17.14-9.895V290.76c0-11.052-7.57-24.16-17.14-29.688l-146.93-84.847c-2.69-1.555-5.225-2.327-7.476-2.387zm360.773.002c-2.25.06-4.783.83-7.474 2.385l-146.935 84.847c-9.57 5.527-17.14 18.638-17.14 29.69v157.7c0 11.05 7.57 15.418 17.14 9.89L428.97 373.51c9.57-5.527 17.137-18.636 17.137-29.688v-157.7c0-7.942-3.91-12.432-9.664-12.278zm-235.146 86.592a31.236 18.008 58.094 0 1 33.818 41.183 31.236 18.008 58.094 1 1-45-25.98 31.236 18.008 58.094 0 1 11.182-15.203zM366.82 289.1a18.008 31.236 31.906 0 1 .002 0 18.008 31.236 31.906 0 1 11.18 15.203 18.008 31.236 31.906 0 1-45 25.98A18.008 31.236 31.906 0 1 366.82 289.1zM89.297 318.48a31.236 18.008 58.094 0 1 33.818 41.184 31.236 18.008 58.094 1 1-45-25.98 31.236 18.008 58.094 0 1 11.182-15.204z" fill="#66666b" fill-opacity="1"></path></g></svg>
\ No newline at end of file
diff --git a/src/assets/main.css b/src/assets/main.css
index d2a4605..96ccdca 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -69,3 +69,7 @@ input::-webkit-inner-spin-button {
 input[type=number] {
   -moz-appearance: textfield;
 }
+
+button {
+  cursor: pointer;
+}
diff --git a/src/components/StatSet.vue b/src/components/StatSet.vue
index 17b7c8a..c94acee 100644
--- a/src/components/StatSet.vue
+++ b/src/components/StatSet.vue
@@ -1,38 +1,132 @@
 <template>
   <div class="container">
-    <label>{{ label }}</label>
+    <div class="title">
+      <div class="label">{{ label }}</div>
+      <div class="button" style="background-color: var(--background-primary)">
+        <img alt="dice" width="32" height="32" src="@/assets/dice-text.svg" />
+      </div>
+    </div>
+    <div class="tag" v-for="(tag, idx) in model" :key="idx">
+      <div class="name">
+        <input v-model="tag.name" placeholder="Tag Name"/>
+        <button class="exp" @click="tag.exp++" @contextmenu.prevent="tag.exp--">{{ tag.exp }}</button>
+        <div class="button">
+          <img alt="dice" width="32" height="32" src="@/assets/dice-accent.svg" />
+        </div>
+      </div>
+      <textarea v-model="tag.description" placeholder="Description"></textarea>
+    </div>
+    <button @click="model.push({ name: '', description: '', exp: 1 })">+</button>
   </div>
 </template>
 
 <script setup lang="ts">
+import type { CharacterTag } from "@/stores/character";
+
 const props = defineProps<{
   label: string;
 }>()
 
-const model = defineModel<{
-  name: string;
-  description: string;
-  exp: number;
-}[]>({ required: true })
-
-
+const model = defineModel<CharacterTag[]>({ required: true })
 </script>
 
 <style scoped>
 .container {
-  display: grid;
-  grid-template-columns: 100px 1fr 75px;
+  --stat-color: var(--theme-primary);
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: start;
   gap: 1px;
 }
 
-.container > * {
-  background: var(--theme-primary);
+.title {
+  display: flex;
+}
+
+.label {
+  background: var(--stat-color);
+  padding: 0 16px;
+  margin-left: auto;
+  width: fit-content;
+  height: 100%;
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  font-size: 18px;
+  font-weight: 500;
+  text-transform: uppercase;
+}
+
+.tag {
+  width: 100%;
+  background-color: var(--stat-color);
+}
+
+.tag .name {
+  width: 100%;
+  height: 36px;
+  background-color: var(--text-color);
+  display: flex;
+  flex-direction: row;
+}
+
+.tag textarea {
+  display: block;
+  width: 100%;
+  padding: 4px;
+  box-sizing: border-box;
+  min-height: 80px;
+  height: fit-content;
+}
+
+.tag > div > * {
+  height: 100%;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--stat-color);
+  font-size: 16px;
+  font-weight: 400;
+}
+
+.tag input {
+  flex: 1;
+  padding: 0 16px;
 }
 
-label {
-  font-size: 20px;
-  font-weight: bold;
-  text-align: center;
+.tag input:focus {
+  outline: none;
+  background: var(--accent-color);
 }
 
+.tag .exp {
+  width: 36px;
+  height: 36px;
+  background-color: var(--accent-color);
+  font-size: 18px;
+  border-left: 1px var(--text-color) solid;
+}
+
+.container button {
+  height: 36px;
+  border: none;
+  outline: none;
+  background: var(--text-color);
+  color: var(--stat-color);
+  font-size: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.button {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
 </style>
diff --git a/src/stores/character.ts b/src/stores/character.ts
index 8d54409..65ae139 100644
--- a/src/stores/character.ts
+++ b/src/stores/character.ts
@@ -1,19 +1,25 @@
-import { ref, computed, watch } from 'vue'
+import { ref, computed } from 'vue'
 import { defineStore } from 'pinia'
 import { useCollection, useFirestore } from "vuefire";
 import { collection, doc, setDoc } from "firebase/firestore";
 
+export interface CharacterTag {
+  name: string;
+  description: string;
+  exp: number;
+}
+
 export interface CharacterSheet {
   createdAt: string;
   health: number;
   power: number;
   name: string;
   inventory: string;
-  heart: {
-    name: string;
-    description: string;
-    exp: number;
-  }[]
+  heart: CharacterTag[];
+  weird: CharacterTag[];
+  keen: CharacterTag[];
+  fell: CharacterTag[];
+  brawn: CharacterTag[];
 }
 
 export const useCharacterStore = defineStore('characters', () => {
@@ -61,7 +67,11 @@ export const useCharacterStore = defineStore('characters', () => {
       power: 10,
       name: playerName.value || '',
       inventory: '',
-      heart: []
+      heart: [],
+      weird: [],
+      keen: [],
+      fell: [],
+      brawn: []
     }
     await setDoc(charDoc, newSheet)
   }
diff --git a/src/views/CharacterTags.vue b/src/views/CharacterTags.vue
index fc7bbd8..d30f662 100644
--- a/src/views/CharacterTags.vue
+++ b/src/views/CharacterTags.vue
@@ -1,13 +1,27 @@
 <template>
-  <div>{{sheet}}</div>
+  <div id="tags">
+    <StatSet label="Brawn" v-model="sheet.brawn"/>
+    <StatSet label="Keen" v-model="sheet.keen" style="--stat-color: var(--theme-secondary)"/>
+    <StatSet label="Heart" v-model="sheet.heart"/>
+    <StatSet label="Weird" v-model="sheet.weird" style="--stat-color: var(--theme-secondary)"/>
+    <StatSet label="Fell" v-model="sheet.fell"/>
+  </div>
 </template>
 
 <script setup lang="ts">
 import type { CharacterSheet } from "@/stores/character";
+import StatSet from "@/components/StatSet.vue";
 
-const sheet = defineModel<CharacterSheet>()
+const sheet = defineModel<CharacterSheet>({
+  required: true
+})
 </script>
 
 <style scoped>
-
+#tags {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-template-rows: auto;
+  gap: 16px;
+}
 </style>