diff --git a/modern/src/App.js b/modern/src/App.js
index d273e7df..2f4208bb 100644
--- a/modern/src/App.js
+++ b/modern/src/App.js
@@ -153,7 +153,7 @@ function GuiObjectEvents({ node, children }) {
       }}
       style={{
         opacity: alpha == null ? 1 : alpha / 255,
-        pointerEvents: ghost === 1 ? "none" : null,
+        pointerEvents: ghost ? "none" : null,
       }}
     >
       {children}
@@ -329,6 +329,7 @@ function Button({
   y,
   downImage,
   tooltip,
+  ghost,
   node,
 }) {
   const [down, setDown] = React.useState(false);
@@ -373,6 +374,7 @@ function Button({
           width: Number(img.w),
           height: Number(img.h),
           backgroundImage: `url(${img.imgUrl})`,
+          pointerEvents: ghost ? "none" : null,
         }}
       >
         <XmlChildren node={node} />
diff --git a/modern/src/runtime/GuiObject.ts b/modern/src/runtime/GuiObject.ts
index 607f6a1b..1d7cab06 100644
--- a/modern/src/runtime/GuiObject.ts
+++ b/modern/src/runtime/GuiObject.ts
@@ -11,10 +11,31 @@ class GuiObject extends MakiObject {
   constructor(node, parent, annotations, store) {
     super(node, parent, annotations, store);
 
+    this._setAttributeDefaults(this.attributes);
+    this._convertAttributeTypes(this.attributes);
+
     this.visible = true;
     this._selectorCache = new Map();
   }
 
+  _setAttributeDefaults(attributes) {
+    if (attributes.alpha == null) {
+      attributes.alpha = "255";
+    }
+    if (attributes.ghost == null) {
+      attributes.ghost = "0";
+    }
+  }
+
+  _convertAttributeTypes(attributes) {
+    if (attributes.alpha != null) {
+      attributes.alpha = Number(attributes.alpha);
+    }
+    if (attributes.ghost != null) {
+      attributes.ghost = !!Number(attributes.ghost);
+    }
+  }
+
   _useUidSelector(selector) {
     // TODO: use memoize for this
     if (!this._selectorCache.has(selector)) {