diff --git a/app/imports/ui/components/ColorPicker.vue b/app/imports/ui/components/ColorPicker.vue
index 0ac1c056..3eb80706 100644
--- a/app/imports/ui/components/ColorPicker.vue
+++ b/app/imports/ui/components/ColorPicker.vue
@@ -15,7 +15,6 @@
     <v-card class="overflow-hidden">
       <v-card-text>
         <v-layout
-          row
           wrap
         >
           <div
diff --git a/app/imports/ui/components/IncrementMenu.vue b/app/imports/ui/components/IncrementMenu.vue
index e4b92ac0..457570c6 100644
--- a/app/imports/ui/components/IncrementMenu.vue
+++ b/app/imports/ui/components/IncrementMenu.vue
@@ -1,6 +1,5 @@
 <template>
   <v-layout
-    row
     align-center
     justify-center
     class="increment-menu"
diff --git a/app/imports/ui/components/global/IconPicker.vue b/app/imports/ui/components/global/IconPicker.vue
index 1db684b9..d5d92a2c 100644
--- a/app/imports/ui/components/global/IconPicker.vue
+++ b/app/imports/ui/components/global/IconPicker.vue
@@ -51,7 +51,6 @@
           </v-btn>
         </div>
         <v-layout
-          row
           wrap
           style="max-height: 400px; overflow-y: auto;"
         >
diff --git a/app/imports/ui/components/rolls/Check.vue b/app/imports/ui/components/rolls/Check.vue
index e5f14c7a..57d5dbdf 100644
--- a/app/imports/ui/components/rolls/Check.vue
+++ b/app/imports/ui/components/rolls/Check.vue
@@ -17,7 +17,7 @@
             outline
             @click="makeRoll"
           >
-            <div class="display-1">
+            <div class="text-h4">
               {{ numberToSignedString(bonus) }}
             </div>
           </v-btn>
@@ -26,7 +26,7 @@
     </template>
     <template v-else>
       <div>
-        <div class="title">
+        <div class="text-h6">
           <span
             v-for="(roll, index) of rolls"
             :key="index"
@@ -39,7 +39,7 @@
             {{ numberToSignedString(bonus) }}
           </span>
         </div>
-        <div class="display-1">
+        <div class="text-h4">
           {{ result }}
         </div>
       </div>
diff --git a/app/imports/ui/creature/character/CharacterCreationDialog.vue b/app/imports/ui/creature/character/CharacterCreationDialog.vue
index 49eb1353..f30437fc 100644
--- a/app/imports/ui/creature/character/CharacterCreationDialog.vue
+++ b/app/imports/ui/creature/character/CharacterCreationDialog.vue
@@ -52,7 +52,6 @@
             label="Race"
           />
           <v-layout
-            row
             justify-center
             align-center
           >
@@ -225,7 +224,6 @@
             :items="hitDiceItems"
             label="Hit Dice"
           />
-          </v-text-field>
         </v-stepper-content>
       </v-stepper-items>
     </v-stepper>
diff --git a/app/imports/ui/creature/character/characterSheetTabs/CharacterTab.vue b/app/imports/ui/creature/character/characterSheetTabs/CharacterTab.vue
index 5543438a..56e0ed9b 100644
--- a/app/imports/ui/creature/character/characterSheetTabs/CharacterTab.vue
+++ b/app/imports/ui/creature/character/characterSheetTabs/CharacterTab.vue
@@ -11,7 +11,7 @@
             v-if="creature.picture"
             :src="creature.picture"
           />
-          <v-card-title class="title">
+          <v-card-title class="text-h6">
             {{ creature.name }}
           </v-card-title>
           <v-card-text>
@@ -37,7 +37,7 @@
         <v-card class="class-details">
           <v-card-title
             v-if="creature.variables.level"
-            class="title"
+            class="text-h6"
           >
             Level {{ creature.variables.level.value }}
           </v-card-title>
diff --git a/app/imports/ui/creature/experiences/ExperienceForm.vue b/app/imports/ui/creature/experiences/ExperienceForm.vue
index 5b4d92d6..e80040aa 100644
--- a/app/imports/ui/creature/experiences/ExperienceForm.vue
+++ b/app/imports/ui/creature/experiences/ExperienceForm.vue
@@ -11,7 +11,7 @@
         v-if="milestone"
         label="Levels"
         type="number"
-        class="base-value-field text-xs-center large-format no-flex"
+        class="base-value-field text-center large-format no-flex"
         :value="model.levels"
         :error-messages="errors.levels"
         @change="change('levels', ...arguments)"
@@ -19,7 +19,7 @@
       <text-field
         v-else
         type="number"
-        class="base-value-field text-xs-center large-format no-flex"
+        class="base-value-field text-center large-format no-flex"
         suffix="XP"
         autofocus
         :value="model.xp"
diff --git a/app/imports/ui/creature/slots/SlotDetailsDialog.vue b/app/imports/ui/creature/slots/SlotDetailsDialog.vue
index a363ed40..c8a14aff 100644
--- a/app/imports/ui/creature/slots/SlotDetailsDialog.vue
+++ b/app/imports/ui/creature/slots/SlotDetailsDialog.vue
@@ -11,7 +11,6 @@
 </template>
 
 <script lang="js">
-import Creatures from '/imports/api/creature/Creatures.js';
 import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 import Slots from '/imports/ui/creature/slots/Slots.vue'
 
diff --git a/app/imports/ui/creature/slots/SlotFillDialog.vue b/app/imports/ui/creature/slots/SlotFillDialog.vue
index 22cb1e8a..f2c8e417 100644
--- a/app/imports/ui/creature/slots/SlotFillDialog.vue
+++ b/app/imports/ui/creature/slots/SlotFillDialog.vue
@@ -45,7 +45,7 @@
               />
               <v-card-title primary-title>
                 <tree-node-view
-                  class="mr-2 title mb-0"
+                  class="mr-2 text-h6 mb-0"
                   :class="{'theme--dark': node._id === (selectedNode && selectedNode._id)}"
                   :hide-icon="node.picture"
                   :model="node"
diff --git a/app/imports/ui/dialogStack/dialogStackWindowEvents.js b/app/imports/ui/dialogStack/dialogStackWindowEvents.js
index 29143286..5cdcd375 100644
--- a/app/imports/ui/dialogStack/dialogStackWindowEvents.js
+++ b/app/imports/ui/dialogStack/dialogStackWindowEvents.js
@@ -1,11 +1,11 @@
-import store from "/imports/ui/vuexStore.js";
+import store from '/imports/ui/vuexStore.js';
 
 if (window){
   window.onpopstate = function(event){
     let state = event.state;
     let numDialogs = store.state.dialogStack.dialogs.length;
     if (_.isFinite(state.openDialogs) && numDialogs > state.openDialogs){
-      store.commit("popDialogStackMutation", store.state.dialogStack.currentResult);
+      store.commit('popDialogStackMutation', store.state.dialogStack.currentResult);
     }
   };
 }
diff --git a/app/imports/ui/library/LibraryBrowser.vue b/app/imports/ui/library/LibraryBrowser.vue
index cde4ce82..9be22c02 100644
--- a/app/imports/ui/library/LibraryBrowser.vue
+++ b/app/imports/ui/library/LibraryBrowser.vue
@@ -17,7 +17,7 @@
         :data-id="library._id"
       >
         <template #header>
-          <div class="title">
+          <div class="text-h6">
             {{ library.name }}
           </div>
         </template>
diff --git a/app/imports/ui/library/LibraryContentsContainer.vue b/app/imports/ui/library/LibraryContentsContainer.vue
index 2aced68b..87ab53ca 100644
--- a/app/imports/ui/library/LibraryContentsContainer.vue
+++ b/app/imports/ui/library/LibraryContentsContainer.vue
@@ -14,7 +14,6 @@
     />
     <v-layout
       v-else
-      row
       align-center
       justify-center
       style="width: 100%;"
diff --git a/app/imports/ui/library/LibraryNodeCreationDialog.vue b/app/imports/ui/library/LibraryNodeCreationDialog.vue
index df478022..e1a46b41 100644
--- a/app/imports/ui/library/LibraryNodeCreationDialog.vue
+++ b/app/imports/ui/library/LibraryNodeCreationDialog.vue
@@ -1,11 +1,11 @@
 <template lang="html">
-	<selectable-property-dialog v-model="type">
-		<library-node-insert-form
-			:type="type"
-			:property-name="getPropertyName(type)"
-			@back="type = undefined"
-		/>
-	</selectable-property-dialog>
+  <selectable-property-dialog v-model="type">
+    <library-node-insert-form
+      :type="type"
+      :property-name="getPropertyName(type)"
+      @back="type = undefined"
+    />
+  </selectable-property-dialog>
 </template>
 
 <script lang="js">
@@ -14,13 +14,13 @@ import LibraryNodeInsertForm from '/imports/ui/library/LibraryNodeInsertForm.vue
 import { getPropertyName } from '/imports/constants/PROPERTIES.js';
 
 export default {
-  data() { return {
-    type: undefined,
-  };},
   components: {
     SelectablePropertyDialog,
 		LibraryNodeInsertForm,
   },
+  data() { return {
+    type: undefined,
+  };},
 	methods: {
 		getPropertyName,
 	},
diff --git a/app/imports/ui/pages/About.vue b/app/imports/ui/pages/About.vue
index e434e46e..a75e094d 100644
--- a/app/imports/ui/pages/About.vue
+++ b/app/imports/ui/pages/About.vue
@@ -12,7 +12,7 @@
           class="white--text"
         >
           <p
-            class="white--text ma-2 headline text-xs-center"
+            class="white--text ma-2 text-h5 text-center"
             style="max-width: 1200px;"
           >
             DiceCloud is a single-developer project started in 2014 with the aim of
@@ -25,7 +25,7 @@
     </section>
     <section class="layout column align-center ma-2 mt-4">
       <div>
-        <h3 class="headline mb-2">
+        <h3 class="text-h5 mb-2">
           Special Thanks
         </h3>
         <p>
@@ -34,7 +34,7 @@
           <b>The "Heroes" of Asaea</b> The D&amp;D party whose joy was the fuel
           with which DiceCloud was powered
         </p>
-        <h3 class="title">
+        <h3 class="text-h6">
           Paragon tier Patrons
         </h3>
         <v-list
diff --git a/app/imports/ui/pages/Account.vue b/app/imports/ui/pages/Account.vue
index 043ffa5a..22be707d 100644
--- a/app/imports/ui/pages/Account.vue
+++ b/app/imports/ui/pages/Account.vue
@@ -100,7 +100,6 @@
         </v-list-item>
       </v-list>
       <v-layout
-        row
         justify-end
       >
         <v-btn
@@ -142,7 +141,6 @@
         </v-list>
       </template>
       <v-layout
-        row
         justify-end
         class="mt-3"
       >
diff --git a/app/imports/ui/pages/Feedback.vue b/app/imports/ui/pages/Feedback.vue
index 1892cdf8..fff4b9de 100644
--- a/app/imports/ui/pages/Feedback.vue
+++ b/app/imports/ui/pages/Feedback.vue
@@ -12,7 +12,7 @@
       />
       <v-card-title primary-title>
         <div>
-          <h3 class="headline mb-0">
+          <h3 class="text-h5 mb-0">
             DiceCloud Discord server
           </h3>
           <div>
diff --git a/app/imports/ui/pages/Register.vue b/app/imports/ui/pages/Register.vue
index d809b31e..c7a407c5 100644
--- a/app/imports/ui/pages/Register.vue
+++ b/app/imports/ui/pages/Register.vue
@@ -48,7 +48,7 @@
         <div class="error--text">
           {{ error }}
         </div>
-        <v-layout row>
+        <v-layout>
           <v-btn
             :disabled="!valid"
             color="accent"
diff --git a/app/imports/ui/pages/SignIn.vue b/app/imports/ui/pages/SignIn.vue
index 04af689c..c2317c04 100644
--- a/app/imports/ui/pages/SignIn.vue
+++ b/app/imports/ui/pages/SignIn.vue
@@ -35,7 +35,7 @@
         <div class="error--text">
           {{ error }}
         </div>
-        <v-layout row>
+        <v-layout>
           <v-btn
             :disabled="!valid"
             color="accent"
diff --git a/app/imports/ui/properties/components/attributes/AbilityListTile.vue b/app/imports/ui/properties/components/attributes/AbilityListTile.vue
index 08f7b7e1..fc27bd40 100644
--- a/app/imports/ui/properties/components/attributes/AbilityListTile.vue
+++ b/app/imports/ui/properties/components/attributes/AbilityListTile.vue
@@ -4,7 +4,7 @@
     v-on="hasClickListener ? {click} : {}"
   >
     <v-list-item-action class="mr-4">
-      <div class="display-1 mod">
+      <div class="text-h4 mod">
         <template v-if="swapScoresAndMods">
           <span :class="{'primary--text': model.currentValue !== model.value}">
             {{ model.currentValue }}
@@ -14,7 +14,7 @@
           {{ numberToSignedString(model.modifier) }}
         </template>
       </div>
-      <div class="title value">
+      <div class="text-h6 value">
         <template v-if="swapScoresAndMods">
           {{ numberToSignedString(model.modifier) }}
         </template>
diff --git a/app/imports/ui/properties/components/attributes/AttributeCard.vue b/app/imports/ui/properties/components/attributes/AttributeCard.vue
index 21341c5a..64ccf08b 100644
--- a/app/imports/ui/properties/components/attributes/AttributeCard.vue
+++ b/app/imports/ui/properties/components/attributes/AttributeCard.vue
@@ -5,7 +5,7 @@
   >
     <v-card-text>
       <div class="layout align-center">
-        <div class="value display-1 mr-1">
+        <div class="value text-h4 mr-1">
           {{ computedValue }}
         </div>
         <div class="name text-truncate">
diff --git a/app/imports/ui/properties/components/attributes/HealthBar.vue b/app/imports/ui/properties/components/attributes/HealthBar.vue
index c00bc0cb..3b6a1442 100644
--- a/app/imports/ui/properties/components/attributes/HealthBar.vue
+++ b/app/imports/ui/properties/components/attributes/HealthBar.vue
@@ -1,6 +1,5 @@
 <template>
   <v-layout
-    row
     wrap
     align-center
     justify-center
diff --git a/app/imports/ui/properties/components/attributes/HitDiceListTile.vue b/app/imports/ui/properties/components/attributes/HitDiceListTile.vue
index 51bea277..c1e7d431 100644
--- a/app/imports/ui/properties/components/attributes/HitDiceListTile.vue
+++ b/app/imports/ui/properties/components/attributes/HitDiceListTile.vue
@@ -5,9 +5,8 @@
   >
     <v-list-item-action class="mr-4">
       <v-layout
-        row
         align-center
-        class="left"
+        class="float-left"
       >
         <v-layout
           column
@@ -33,13 +32,12 @@
         </v-layout>
 
         <v-layout
-          row
           align-end
         >
-          <div class="display-1">
+          <div class="text-h4">
             {{ currentValue }}
           </div>
-          <div class="title max-value ml-2">
+          <div class="text-h6 max-value ml-2">
             /{{ model.value }}
           </div>
         </v-layout>
diff --git a/app/imports/ui/properties/components/attributes/ResourceCard.vue b/app/imports/ui/properties/components/attributes/ResourceCard.vue
index 2478a089..cc932b54 100644
--- a/app/imports/ui/properties/components/attributes/ResourceCard.vue
+++ b/app/imports/ui/properties/components/attributes/ResourceCard.vue
@@ -24,10 +24,10 @@
     <div
       class="layout align-center value pl-2 pr-3"
     >
-      <div class="display-1">
+      <div class="text-h4">
         {{ currentValue }}
       </div>
-      <div class="title ml-2 max-value">
+      <div class="text-h6 ml-2 max-value">
         /{{ value }}
       </div>
     </div>
diff --git a/app/imports/ui/properties/components/persona/NoteCard.vue b/app/imports/ui/properties/components/persona/NoteCard.vue
index 45d02204..d99fedf1 100644
--- a/app/imports/ui/properties/components/persona/NoteCard.vue
+++ b/app/imports/ui/properties/components/persona/NoteCard.vue
@@ -7,7 +7,7 @@
     :light="model.color && !isDark"
     @click="clickProperty(model._id)"
   >
-    <v-card-title class="title">
+    <v-card-title class="text-h6">
       {{ model.name }}
     </v-card-title>
     <v-card-text v-if="model.summary">
diff --git a/app/imports/ui/properties/components/spells/CastSpellWithSlotDialog.vue b/app/imports/ui/properties/components/spells/CastSpellWithSlotDialog.vue
index 6dd488d7..ed221800 100644
--- a/app/imports/ui/properties/components/spells/CastSpellWithSlotDialog.vue
+++ b/app/imports/ui/properties/components/spells/CastSpellWithSlotDialog.vue
@@ -70,7 +70,7 @@
       <template slot="left">
         <div
           key="slot-title"
-          class="title my-3"
+          class="text-h6 my-3"
         >
           Slot
         </div>
@@ -82,7 +82,7 @@
           @click="selectedSlotId = undefined"
         >
           <v-list-item-content>
-            <v-list-item-title class="title">
+            <v-list-item-title class="text-h6">
               Cantrip
             </v-list-item-title>
           </v-list-item-content>
@@ -99,7 +99,7 @@
       <template slot="right">
         <div
           key="spell-title"
-          class="title my-3"
+          class="text-h6 my-3"
         >
           Spell
         </div>
diff --git a/app/imports/ui/properties/forms/AttributeForm.vue b/app/imports/ui/properties/forms/AttributeForm.vue
index 7bf3caa6..a92b7c37 100644
--- a/app/imports/ui/properties/forms/AttributeForm.vue
+++ b/app/imports/ui/properties/forms/AttributeForm.vue
@@ -91,7 +91,7 @@
           <text-field
             label="Damage"
             type="number"
-            class="damage-field text-xs-center"
+            class="damage-field text-center"
             style="max-width: 300px;"
             hint="The attribute's final value is reduced by this amount"
             disabled
diff --git a/app/imports/ui/properties/forms/ClassLevelForm.vue b/app/imports/ui/properties/forms/ClassLevelForm.vue
index b8835a1e..763fecc4 100644
--- a/app/imports/ui/properties/forms/ClassLevelForm.vue
+++ b/app/imports/ui/properties/forms/ClassLevelForm.vue
@@ -4,7 +4,7 @@
       <text-field
         label="Level"
         type="number"
-        class="base-value-field text-xs-center large-format no-flex"
+        class="base-value-field text-center large-format no-flex"
         :value="model.level"
         :error-messages="errors.level"
         @change="change('level', ...arguments)"
@@ -36,7 +36,7 @@
       @change="change('description', ...arguments)"
     />
     <calculation-error-list :calculations="model.descriptionCalculations" />
-    
+
     <text-field
       label="Condition"
       hint="A caclulation to determine if this can be added to the character"
diff --git a/app/imports/ui/properties/shared/ProficiencyIcon.vue b/app/imports/ui/properties/shared/ProficiencyIcon.vue
index fe55427c..1c332fff 100644
--- a/app/imports/ui/properties/shared/ProficiencyIcon.vue
+++ b/app/imports/ui/properties/shared/ProficiencyIcon.vue
@@ -1,5 +1,7 @@
 <template lang="html">
-	<v-icon v-if="value !== undefined">{{displayedIcon}}</v-icon>
+  <v-icon v-if="value !== undefined">
+    {{ displayedIcon }}
+  </v-icon>
 </template>
 
 <script lang="js">
diff --git a/app/imports/ui/properties/shared/PropertySelector.vue b/app/imports/ui/properties/shared/PropertySelector.vue
index d9b0b1f8..f8be12f9 100644
--- a/app/imports/ui/properties/shared/PropertySelector.vue
+++ b/app/imports/ui/properties/shared/PropertySelector.vue
@@ -6,7 +6,6 @@
       fill-height
     >
       <v-layout
-        row
         wrap
         fill-height
       >
diff --git a/app/imports/ui/properties/viewers/AdjustmentViewer.vue b/app/imports/ui/properties/viewers/AdjustmentViewer.vue
index 92fc245e..2a615d49 100644
--- a/app/imports/ui/properties/viewers/AdjustmentViewer.vue
+++ b/app/imports/ui/properties/viewers/AdjustmentViewer.vue
@@ -17,7 +17,7 @@
         <span>{{ tooltip }}</span>
       </v-tooltip>
     </v-list-item-avatar>
-    <v-list-item-action class="headline">
+    <v-list-item-action class="text-h5">
       {{ displayedValue }}
     </v-list-item-action>
     <v-list-item-content>
diff --git a/app/imports/ui/properties/viewers/AttributeViewer.vue b/app/imports/ui/properties/viewers/AttributeViewer.vue
index 6b1cad30..3cad020c 100644
--- a/app/imports/ui/properties/viewers/AttributeViewer.vue
+++ b/app/imports/ui/properties/viewers/AttributeViewer.vue
@@ -6,7 +6,7 @@
     >
       <div
         v-if="model.value !== undefined"
-        class="display-1"
+        class="text-h4"
       >
         <div
           v-if="model.damage !== undefined"
@@ -19,7 +19,7 @@
       </div>
       <div
         v-if="model.modifier !== undefined"
-        class="title"
+        class="text-h6"
       >
         {{ numberToSignedString(model.modifier) }}
       </div>
diff --git a/app/imports/ui/properties/viewers/ClassLevelViewer.vue b/app/imports/ui/properties/viewers/ClassLevelViewer.vue
index dea1cacb..6d8f9c02 100644
--- a/app/imports/ui/properties/viewers/ClassLevelViewer.vue
+++ b/app/imports/ui/properties/viewers/ClassLevelViewer.vue
@@ -1,7 +1,7 @@
 <template lang="html">
   <div class="class-level-viewer">
     <div>
-      <span class="name headline">
+      <span class="name text-h5">
         {{ model.name }} {{ model.level }}
       </span>
     </div>
diff --git a/app/imports/ui/properties/viewers/ContainerViewer.vue b/app/imports/ui/properties/viewers/ContainerViewer.vue
index ad90924a..90138387 100644
--- a/app/imports/ui/properties/viewers/ContainerViewer.vue
+++ b/app/imports/ui/properties/viewers/ContainerViewer.vue
@@ -7,7 +7,6 @@
       >
         <v-layout
           v-if="model.value !== undefined"
-          row
           align-center
           class="mb-2"
         >
@@ -18,12 +17,11 @@
             $vuetify.icons.two_coins
           </v-icon>
           <coin-value
-            class="title mr-2"
+            class="text-h6 mr-2"
             :value="model.value"
           />
         </v-layout>
         <v-layout
-          row
           align-center
         >
           <v-icon
@@ -33,10 +31,10 @@
             $vuetify.icons.cash
           </v-icon>
           <coin-value
-            class="title mr-2"
+            class="text-h6 mr-2"
             :value="model.contentsValue"
           />
-          <span class="title">
+          <span class="text-h6">
             contents
           </span>
         </v-layout>
@@ -46,12 +44,11 @@
       >
         <v-layout
           v-if="model.weight !== undefined"
-          row
           align-center
           justify-end
           class="mb-2"
         >
-          <span class="title mr-2">
+          <span class="text-h6 mr-2">
             {{ model.weight }} lb
           </span>
           <v-icon
@@ -62,16 +59,15 @@
           </v-icon>
         </v-layout>
         <v-layout
-          row
           align-center
           justify-end
           :class="{'mb-2': model.contentsWeightless}"
         >
-          <span class="title mr-2">
+          <span class="text-h6 mr-2">
             {{ model.contentsWeight }} lb
           </span>
           <span
-            class="title"
+            class="text-h6"
           >
             contents
           </span>
@@ -84,12 +80,11 @@
         </v-layout>
         <v-layout
           v-if="model.contentsWeightless"
-          row
           align-center
           justify-end
         >
           <span
-            class="title"
+            class="text-h6"
           >
             Contents weightless
           </span>
diff --git a/app/imports/ui/properties/viewers/EffectViewer.vue b/app/imports/ui/properties/viewers/EffectViewer.vue
index b49466e5..0730ca71 100644
--- a/app/imports/ui/properties/viewers/EffectViewer.vue
+++ b/app/imports/ui/properties/viewers/EffectViewer.vue
@@ -16,7 +16,7 @@
     </v-list-item-avatar>
     <v-list-item-action
       v-if="showValue"
-      class="headline"
+      class="text-h5"
     >
       {{ displayedValue }}
     </v-list-item-action>
diff --git a/app/imports/ui/properties/viewers/ItemViewer.vue b/app/imports/ui/properties/viewers/ItemViewer.vue
index 3405894c..996aa124 100644
--- a/app/imports/ui/properties/viewers/ItemViewer.vue
+++ b/app/imports/ui/properties/viewers/ItemViewer.vue
@@ -5,7 +5,7 @@
       v-if="model.quantity > 1 || model.showIncrement"
       class="layout justify-center align-center wrap"
     >
-      <div class="display-1">
+      <div class="text-h4">
         {{ model.quantity }}
       </div>
       <increment-button
@@ -27,7 +27,6 @@
       >
         <v-layout
           v-if="model.quantity > 1"
-          row
           align-center
           class="mb-2"
         >
@@ -38,12 +37,11 @@
             $vuetify.icons.cash
           </v-icon>
           <coin-value
-            class="title"
+            class="text-h6"
             :value="totalValue"
           />
         </v-layout>
         <v-layout
-          row
           align-center
         >
           <v-icon
@@ -53,12 +51,12 @@
             $vuetify.icons.two_coins
           </v-icon>
           <coin-value
-            class="title mr-2"
+            class="text-h6 mr-2"
             :value="model.value"
           />
           <span
             v-if="model.quantity > 1"
-            class="title"
+            class="text-h6"
           >
             each
           </span>
@@ -70,12 +68,11 @@
       >
         <v-layout
           v-if="model.quantity > 1"
-          row
           align-center
           justify-end
           class="mb-2"
         >
-          <span class="title">
+          <span class="text-h6">
             {{ totalWeight }} lb
           </span>
           <v-icon
@@ -86,17 +83,16 @@
           </v-icon>
         </v-layout>
         <v-layout
-          row
           align-center
           justify-end
           :class="{'mb-2': model.attuned}"
         >
-          <span class="title mr-2">
+          <span class="text-h6 mr-2">
             {{ model.weight }} lb
           </span>
           <span
             v-if="model.quantity > 1"
-            class="title"
+            class="text-h6"
           >
             each
           </span>
@@ -109,11 +105,10 @@
         </v-layout>
         <v-layout
           v-if="model.attuned"
-          row
           align-center
           justify-end
         >
-          <span class="title">
+          <span class="text-h6">
             Attuned
           </span>
           <v-icon
diff --git a/app/imports/ui/properties/viewers/ProficiencyViewer.vue b/app/imports/ui/properties/viewers/ProficiencyViewer.vue
index d6118ce1..0cca10ac 100644
--- a/app/imports/ui/properties/viewers/ProficiencyViewer.vue
+++ b/app/imports/ui/properties/viewers/ProficiencyViewer.vue
@@ -1,6 +1,6 @@
 <template lang="html">
   <div class="proficiency-viewer">
-    <div class="headline layout row">
+    <div class="text-h5 layout row">
       {{ model.skill }}
       <proficiency-icon
         :value="model.value"
diff --git a/app/imports/ui/properties/viewers/SkillViewer.vue b/app/imports/ui/properties/viewers/SkillViewer.vue
index 839b3daf..983028bc 100644
--- a/app/imports/ui/properties/viewers/SkillViewer.vue
+++ b/app/imports/ui/properties/viewers/SkillViewer.vue
@@ -6,7 +6,7 @@
     >
       <div
         v-if="model.value !== undefined"
-        class="display-1 layout row align-center"
+        class="text-h4 layout row align-center"
       >
         <v-icon class="mr-4">
           {{ icon }}
diff --git a/app/imports/ui/properties/viewers/SlotViewer.vue b/app/imports/ui/properties/viewers/SlotViewer.vue
index c92ddaae..7dbb3795 100644
--- a/app/imports/ui/properties/viewers/SlotViewer.vue
+++ b/app/imports/ui/properties/viewers/SlotViewer.vue
@@ -19,7 +19,7 @@
       :value="model.slotConditionResult"
     />
     <template v-if="model.tags.length">
-      <div class="caption">
+      <div class="text-caption">
         Tags
       </div>
       <property-tags :tags="model.tags" />
diff --git a/app/imports/ui/properties/viewers/shared/PropertyField.vue b/app/imports/ui/properties/viewers/shared/PropertyField.vue
index 80475b7a..1e953d66 100644
--- a/app/imports/ui/properties/viewers/shared/PropertyField.vue
+++ b/app/imports/ui/properties/viewers/shared/PropertyField.vue
@@ -1,6 +1,6 @@
 <template lang="html">
   <div v-if="value !== undefined || $slots.default">
-    <div class="caption">
+    <div class="text-caption">
       {{ name }}
     </div>
     <p class="ml-2 subheading">
diff --git a/app/imports/ui/properties/viewers/shared/PropertyName.vue b/app/imports/ui/properties/viewers/shared/PropertyName.vue
index 9d266e9f..cb831c7a 100644
--- a/app/imports/ui/properties/viewers/shared/PropertyName.vue
+++ b/app/imports/ui/properties/viewers/shared/PropertyName.vue
@@ -1,7 +1,7 @@
 <template lang="html">
-	<div class="name headline mb-2">
-		{{value}}
-	</div>
+  <div class="name text-h5 mb-2">
+    {{ value }}
+  </div>
 </template>
 
 <script lang="js">
diff --git a/app/imports/ui/properties/viewers/shared/PropertyVariableName.vue b/app/imports/ui/properties/viewers/shared/PropertyVariableName.vue
index ff17e2be..a41b6ffc 100644
--- a/app/imports/ui/properties/viewers/shared/PropertyVariableName.vue
+++ b/app/imports/ui/properties/viewers/shared/PropertyVariableName.vue
@@ -1,7 +1,10 @@
 <template lang="html">
-	<div v-if="value" class="mb-3">
-		<code>{{value}}</code>
-	</div>
+  <div
+    v-if="value"
+    class="mb-3"
+  >
+    <code>{{ value }}</code>
+  </div>
 </template>
 
 <script lang="js">
diff --git a/app/imports/ui/utility/sortEffects.js b/app/imports/ui/utility/sortEffects.js
index 908ede6a..d7779cdd 100644
--- a/app/imports/ui/utility/sortEffects.js
+++ b/app/imports/ui/utility/sortEffects.js
@@ -1,14 +1,14 @@
 const INDEX = {
-  "base": 1,
-  "add": 2,
-  "mul": 3,
-  "min": 4,
-  "max": 5,
-  "advantage": 6,
-  "disadvantage": 7,
-  "passiveAdd": 8,
-  "fail": 9,
-  "conditional": 10,
+  'base': 1,
+  'add': 2,
+  'mul': 3,
+  'min': 4,
+  'max': 5,
+  'advantage': 6,
+  'disadvantage': 7,
+  'passiveAdd': 8,
+  'fail': 9,
+  'conditional': 10,
 };
 
 function sortEffects(effects){