diff --git a/app/imports/ui/properties/treeNodeViews/ClassLevelTreeNode.vue b/app/imports/ui/properties/treeNodeViews/ClassLevelTreeNode.vue
new file mode 100644
index 00000000..75edec72
--- /dev/null
+++ b/app/imports/ui/properties/treeNodeViews/ClassLevelTreeNode.vue
@@ -0,0 +1,21 @@
+<template lang="html">
+  <div class="layout row align-center justify-start">
+    <property-icon
+      class="mr-2"
+      :model="model"
+      :color="model.color"
+      :class="selected && 'primary--text'"
+    />
+    <div class="text-no-wrap text-truncate">
+      {{ title }} {{ model.level }}
+    </div>
+  </div>
+</template>
+
+<script>
+import treeNodeViewMixin from '/imports/ui/properties/treeNodeViews/treeNodeViewMixin.js';
+
+export default {
+  mixins: [treeNodeViewMixin],
+}
+</script>
diff --git a/app/imports/ui/properties/treeNodeViews/treeNodeViewIndex.js b/app/imports/ui/properties/treeNodeViews/treeNodeViewIndex.js
index 06b03ff0..ac417af7 100644
--- a/app/imports/ui/properties/treeNodeViews/treeNodeViewIndex.js
+++ b/app/imports/ui/properties/treeNodeViews/treeNodeViewIndex.js
@@ -3,10 +3,12 @@ import AdjustmentTreeNode from '/imports/ui/properties/treeNodeViews/AdjustmentT
 import ItemTreeNode from '/imports/ui/properties/treeNodeViews/ItemTreeNode.vue';
 import DamageTreeNode from '/imports/ui/properties/treeNodeViews/DamageTreeNode.vue';
 import EffectTreeNode from '/imports/ui/properties/treeNodeViews/EffectTreeNode.vue';
+import ClassLevelTreeNode from '/imports/ui/properties/treeNodeViews/ClassLevelTreeNode.vue';
 
 export default {
   default: DefaultTreeNode,
   adjustment: AdjustmentTreeNode,
+  classLevel: ClassLevelTreeNode,
   damage: DamageTreeNode,
   effect: EffectTreeNode,
   item: ItemTreeNode,
diff --git a/app/imports/ui/properties/viewers/ClassLevelViewer.vue b/app/imports/ui/properties/viewers/ClassLevelViewer.vue
index 5975b92c..55090be0 100644
--- a/app/imports/ui/properties/viewers/ClassLevelViewer.vue
+++ b/app/imports/ui/properties/viewers/ClassLevelViewer.vue
@@ -1,23 +1,14 @@
 <template lang="html">
-	<div class="class-level-viewer">
-		<div>
-			<span class="name headline">
-				{{model.name}}
-			</span>
-			<span
-				class="display-2"
-				v-if="model.level"
-			>
-				{{model.level}}
-			</span>
-		</div>
-		<p class="my-2">
-			<code>{{model.variableName}}</code>
-		</p>
-		<p class="my-2" v-if="model.baseClass">
-			Base class: <code>{{model.baseClass}}</code>
-		</p>
-	</div>
+  <div class="class-level-viewer">
+    <div>
+      <span class="name headline">
+        {{ model.name }} {{ model.level }}
+      </span>
+    </div>
+    <p class="my-2">
+      <code>{{ model.variableName }}</code>
+    </p>
+  </div>
 </template>
 
 <script>