diff --git a/src/data/common.tsx b/src/data/common.tsx
index af85316..9ab32f5 100644
--- a/src/data/common.tsx
+++ b/src/data/common.tsx
@@ -18,6 +18,7 @@ import player from "game/player";
 import Decimal from "util/bignum";
 import {
     Computable,
+    GetComputableType,
     GetComputableTypeWithDefault,
     processComputable,
     ProcessedComputable
@@ -118,39 +119,48 @@ export function createResetButton<T extends ClickableOptions & ResetButtonOption
 
 export interface LayerTreeNodeOptions extends TreeNodeOptions {
     layerID: string;
-    color: string;
-    append?: boolean;
+    color: Computable<string>; // marking as required
+    display?: Computable<string>;
+    append?: Computable<boolean>;
 }
 export type LayerTreeNode<T extends LayerTreeNodeOptions> = Replace<
     TreeNode<T>,
     {
-        append: ProcessedComputable<boolean>;
+        display: GetComputableTypeWithDefault<T["display"], T["layerID"]>;
+        append: GetComputableType<T["append"]>;
+    }
+>;
+export type GenericLayerTreeNode = Replace<
+    LayerTreeNode<LayerTreeNodeOptions>,
+    {
+        display: ProcessedComputable<string>;
+        append?: ProcessedComputable<boolean>;
     }
 >;
-export type GenericLayerTreeNode = LayerTreeNode<LayerTreeNodeOptions>;
 
 export function createLayerTreeNode<T extends LayerTreeNodeOptions>(
     optionsFunc: () => T
 ): LayerTreeNode<T> {
     return createTreeNode(() => {
         const options = optionsFunc();
+        processComputable(options as T, "display");
+        setDefault(options, "display", options.layerID);
         processComputable(options as T, "append");
         return {
             ...options,
             display: options.layerID,
-            onClick:
-                options.append != null && options.append
-                    ? function () {
-                          if (player.tabs.includes(options.layerID)) {
-                              const index = player.tabs.lastIndexOf(options.layerID);
-                              player.tabs.splice(index, 1);
-                          } else {
-                              player.tabs.push(options.layerID);
-                          }
-                      }
-                    : function () {
-                          player.tabs.splice(1, 1, options.layerID);
+            onClick: unref((options as unknown as GenericLayerTreeNode).append)
+                ? function () {
+                      if (player.tabs.includes(options.layerID)) {
+                          const index = player.tabs.lastIndexOf(options.layerID);
+                          player.tabs.splice(index, 1);
+                      } else {
+                          player.tabs.push(options.layerID);
                       }
+                  }
+                : function () {
+                      player.tabs.splice(1, 1, options.layerID);
+                  }
         };
     }) as unknown as LayerTreeNode<T>;
 }