diff --git a/.eslintrc b/.eslintrc
index 9f63f01..0c480fd 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -20,6 +20,7 @@
     "plugins": ["react", "@typescript-eslint"],
     "rules": {
       "react/react-in-jsx-scope": "off",
+      "react/prop-types": "off",
       "@typescript-eslint/no-explicit-any": "off",
       "@typescript-eslint/no-non-null-assertion": "off"
     },
diff --git a/README.md b/README.md
index 7469a8c..c68f706 100644
--- a/README.md
+++ b/README.md
@@ -8,6 +8,16 @@
 
 A chrome extension for debugging PixiJS applications.
 
+# Features
+
+This extension is currently in development and has reached only its first phase. In the next phase we will be adding more features to make it easier for developers to diagnose performance issues and visualize the resources that their applications are consuming. The main focus will be around displaying what assets have been loaded by the application.
+
+For now the extension has the following features:
+
+- Display what type of objects your scene is made up of, and how it changes over time.
+- Display the display tree of the application.
+- Ability to inspect and change the properties of objects in the scene.
+
 ## Installation
 
 Installation is available from the chrome web store.
diff --git a/src/example/src/main.ts b/src/example/src/main.ts
index 4557b72..b8f30b0 100644
--- a/src/example/src/main.ts
+++ b/src/example/src/main.ts
@@ -1,5 +1,5 @@
-import { Application, Assets, Container, Sprite } from 'pixi.js';
 import * as PIXI from 'pixi.js';
+import { Application, Assets, Container, Sprite } from 'pixi.js';
 
 (async () => {
   // Create a new application
@@ -11,7 +11,7 @@ import * as PIXI from 'pixi.js';
   window.__PIXI__DEVTOOLS__ = {
     app: app,
     pixi: PIXI,
-  }
+  };
 
   // Append the application canvas to the document body
   document.body.appendChild(app.canvas);
@@ -31,6 +31,8 @@ import * as PIXI from 'pixi.js';
     bunny.x = (i % 5) * 40;
     bunny.y = Math.floor(i / 5) * 40;
     bunny.label = `Bunny ${i}`;
+    bunny.filterArea = new PIXI.Rectangle(0, 0, 40, 40);
+    bunny.boundsArea = new PIXI.Rectangle(0, 0, 40, 40);
     container.addChild(bunny);
   }
 
diff --git a/src/lib/src/components/properties/Properties.tsx b/src/lib/src/components/properties/Properties.tsx
index 3b57021..6fbca59 100644
--- a/src/lib/src/components/properties/Properties.tsx
+++ b/src/lib/src/components/properties/Properties.tsx
@@ -7,6 +7,9 @@ import { Slider, SliderProps } from './slider/Slider';
 import { SwitchProps, Switcher } from './switch/Switch';
 import { TextInput, TextProps } from './text/Text';
 import { Vector2, Vector2Props } from './number/Vector2';
+import { ButtonInput, ButtonProps } from './button/Button';
+import { SelectInput, SelectProps } from './select/Select';
+import { VectorX, VectorXProps } from './number/VectorX';
 export interface PropertyProps {
   type:
     | 'boolean'
@@ -19,10 +22,16 @@ export interface PropertyProps {
     | 'button'
     | 'color'
     | 'vector2'
-    | 'vector3'
-    | 'rect'
-    | 'matrix';
-  propertyProps: NumberProps | SwitchProps | SliderProps | TextProps | Vector2Props; // | TextareaProps | ButtonProps;
+    | 'vectorX';
+  propertyProps:
+    | NumberProps
+    | SwitchProps
+    | SliderProps
+    | TextProps
+    | Vector2Props
+    | ButtonProps
+    | SelectProps
+    | VectorXProps;
   property: string;
 }
 
@@ -42,24 +51,22 @@ const Property: React.FC<PropertyProps> = ({ type, propertyProps }) => {
       inputElement = <Slider {...(propertyProps as SliderProps)} />;
       break;
     case 'select':
-      // inputElement = <Select value={value} onChange={handleChange} />;
+      inputElement = <SelectInput {...(propertyProps as SelectProps)} />;
       break;
     case 'text':
       inputElement = <TextInput {...(propertyProps as TextProps)} />;
-      // inputElement = <input className="Input" type="text" value={value} onChange={handleChange} />;
       break;
     case 'textarea':
       // inputElement = <textarea className="Textarea" value={value} onChange={handleChange} />;
       break;
     case 'button':
-      // inputElement = (
-      //   <button className="Button" onClick={() => onChange('clicked')}>
-      //     {label}
-      //   </button>
-      // );
+      inputElement = <ButtonInput {...(propertyProps as ButtonProps)} />;
+      break;
+    case 'vectorX':
+      inputElement = <VectorX {...(propertyProps as VectorXProps)} />;
       break;
     default:
-    // inputElement = <input className="Input" type="text" value={value} onChange={handleChange} />;
+      inputElement = <TextInput {...(propertyProps as TextProps)} />;
   }
 
   return inputElement;
diff --git a/src/lib/src/components/properties/button/Button.tsx b/src/lib/src/components/properties/button/Button.tsx
new file mode 100644
index 0000000..d00ed9b
--- /dev/null
+++ b/src/lib/src/components/properties/button/Button.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import styled from 'styled-components';
+import { BaseProperty, BasePropertyProps } from '../BaseProperty';
+
+export interface ButtonProps extends BasePropertyProps {
+  value: number;
+  onChange: () => void;
+}
+
+const StyledButtonRoot = styled.button`
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 10px;
+  height: 24px;
+  font-size: 10px;
+  line-height: 1;
+  color: var(--text);
+  background-color: var(--darkest-color);
+  box-shadow: 0 0 0 1px black;
+  transition:
+    box-shadow 0.2s,
+    color 0.2s;
+
+  &:hover {
+    box-shadow: 0 0 0 1px var(--secondary-color);
+    color: white;
+  }
+
+  &:active {
+    background-color: var(--secondary-color);
+    color: white;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+`;
+
+export const ButtonInput: React.FC<ButtonProps> = ({ value, onChange, label }) => {
+  return (
+    <BaseProperty label={label}>
+      <StyledButtonRoot value={value} onClick={() => onChange()}>
+        {label}
+      </StyledButtonRoot>
+    </BaseProperty>
+  );
+};
diff --git a/src/lib/src/components/properties/getPropertiesOfNode.tsx b/src/lib/src/components/properties/getPropertiesOfNode.tsx
deleted file mode 100644
index 2fb5eac..0000000
--- a/src/lib/src/components/properties/getPropertiesOfNode.tsx
+++ /dev/null
@@ -1,362 +0,0 @@
-import { PixiSceneObjectType } from '@lib/src/detection/utils/getPixiType';
-import { PropertyProps } from './Properties';
-import { NumberProps } from './number/Number';
-import { SliderProps } from './slider/Slider';
-import { SwitchProps } from './switch/Switch';
-
-interface Property {
-  type: PropertyProps['type'];
-  propertyProps: Omit<NumberProps | SwitchProps | SliderProps, 'onChange' | 'value'>;
-}
-
-interface PropertyPanel {
-  info: Record<string, Property>;
-  transform: Record<string, Property>;
-  appearance: Record<string, Property>;
-  rendering: Record<string, Property>;
-  culling: Record<string, Property>;
-  sorting: Record<string, Property>;
-  interaction: Record<string, Property>;
-  animatedSprite?: Record<string, Property>;
-  tilingSprite?: Record<string, Property>;
-  nineSlice?: Record<string, Property>;
-  text?: Record<string, Property>;
-}
-
-const ContainerProperties: PropertyPanel = {
-  info: {
-    type: { propertyProps: { label: 'Type' }, type: 'text' }, // not editable
-    label: { propertyProps: { label: 'Label' }, type: 'text' },
-  },
-  transform: {
-    position: {
-      propertyProps: { label: 'Position' },
-      type: 'vector2',
-    },
-    width: { propertyProps: { label: 'Width' }, type: 'number' },
-    height: { propertyProps: { label: 'Height' }, type: 'number' },
-    scale: { propertyProps: { label: 'Scale' }, type: 'vector2' },
-    rotation: {
-      propertyProps: { label: 'Rotation' },
-      type: 'number',
-    },
-    angle: { propertyProps: { label: 'Angle' }, type: 'number' },
-    pivot: { propertyProps: { label: 'Pivot' }, type: 'vector2' },
-    skew: { propertyProps: { label: 'Skew' }, type: 'vector2' },
-    worldTransform: {
-      propertyProps: { label: 'World Transform' },
-      type: 'matrix',
-    },
-  },
-  appearance: {
-    visible: {
-      propertyProps: { label: 'Visible' },
-      type: 'boolean',
-    },
-    renderable: {
-      propertyProps: { label: 'Renderable' },
-      type: 'boolean',
-    },
-    alpha: {
-      propertyProps: {
-        label: 'Alpha',
-        min: 0,
-        max: 1,
-        step: 0.05,
-      } as SliderProps,
-      type: 'range',
-    },
-    tint: { propertyProps: { label: 'Tint' }, type: 'color' },
-    blendMode: {
-      propertyProps: { label: 'Blend Mode' },
-      type: 'select',
-    },
-  },
-  rendering: {
-    filterArea: {
-      propertyProps: { label: 'Filter Area' },
-      type: 'rect',
-    },
-    // { propertyProps: { label: 'Filters' }, property: 'filters', type: 'select' },
-    boundsArea: {
-      propertyProps: { label: 'Bounds Area' },
-      type: 'rect',
-    },
-    isRenderGroup: {
-      propertyProps: { label: 'Is Render Group' },
-      type: 'boolean',
-    },
-  },
-  culling: {
-    cullable: {
-      propertyProps: { label: 'Cullable' },
-      type: 'boolean',
-    },
-    cullArea: {
-      propertyProps: { label: 'Cull Area' },
-      type: 'rect',
-    },
-    cullableChildren: {
-      propertyProps: { label: 'Cullable Children' },
-      type: 'boolean',
-    },
-  },
-  sorting: {
-    sortableChildren: {
-      propertyProps: { label: 'Sortable Children' },
-      type: 'boolean',
-    },
-    zIndex: { propertyProps: { label: 'Z Index' }, type: 'number' },
-  },
-  interaction: {
-    interactive: {
-      propertyProps: { label: 'Interactive' },
-      type: 'boolean',
-    },
-    interactiveChildren: {
-      propertyProps: { label: 'Interactive Children' },
-      type: 'boolean',
-    },
-    hitArea: { propertyProps: { label: 'Hit Area' }, type: 'rect' },
-    cursor: { propertyProps: { label: 'Cursor' }, type: 'select' },
-  },
-};
-
-const SpriteProperties: PropertyPanel = {
-  ...ContainerProperties,
-  transform: {
-    ...ContainerProperties.transform,
-    anchor: { propertyProps: { label: 'Anchor' }, type: 'vector2' },
-    roundPixels: {
-      propertyProps: { label: 'Round Pixels' },
-      type: 'boolean',
-    },
-  },
-  appearance: {
-    ...ContainerProperties.appearance,
-    texture: { propertyProps: { label: 'Texture' }, type: 'text' },
-  },
-};
-
-const GraphicsProperties: PropertyPanel = {
-  ...ContainerProperties,
-  transform: {
-    ...ContainerProperties.transform,
-    roundPixels: {
-      propertyProps: { label: 'Round Pixels' },
-      type: 'boolean',
-    },
-  },
-  appearance: {
-    ...ContainerProperties.appearance,
-    lineStyle: {
-      propertyProps: { label: 'Line Style' },
-      type: 'text',
-    },
-    fillStyle: {
-      propertyProps: { label: 'Fill Style' },
-      type: 'text',
-    },
-  },
-};
-
-const MeshProperties: PropertyPanel = {
-  ...ContainerProperties,
-  transform: {
-    ...ContainerProperties.transform,
-    roundPixels: {
-      propertyProps: { label: 'Round Pixels' },
-      type: 'boolean',
-    },
-  },
-  appearance: {
-    ...ContainerProperties.appearance,
-    texture: { propertyProps: { label: 'Texture' }, type: 'text' },
-    batched: {
-      propertyProps: { label: 'Batched' },
-      type: 'boolean',
-    },
-  },
-};
-
-const TextProperties: PropertyPanel = {
-  ...ContainerProperties,
-  transform: {
-    ...ContainerProperties.transform,
-    roundPixels: {
-      propertyProps: { label: 'Round Pixels' },
-      type: 'boolean',
-    },
-  },
-  text: {
-    text: { propertyProps: { label: 'Text' }, type: 'text' },
-    style: { propertyProps: { label: 'Style' }, type: 'text' },
-    resolution: {
-      propertyProps: { label: 'Resolution' },
-      type: 'number',
-    },
-  },
-};
-
-const TilingSpriteProperties: PropertyPanel = {
-  ...ContainerProperties,
-  ...SpriteProperties,
-  tilingSprite: {
-    tilePosition: {
-      propertyProps: { label: 'Tile Position' },
-      type: 'vector2',
-    },
-    tileScale: {
-      propertyProps: { label: 'Tile Scale' },
-      type: 'vector2',
-    },
-    tileRotation: {
-      propertyProps: { label: 'Tile Rotation' },
-      type: 'number',
-    },
-  },
-};
-
-const AnimatedSpriteProperties: PropertyPanel = {
-  ...ContainerProperties,
-  ...SpriteProperties,
-  animatedSprite: {
-    textures: {
-      propertyProps: { label: 'Textures' },
-      type: 'text',
-    },
-    totalFrames: {
-      propertyProps: { label: 'Total Frames' },
-      type: 'number',
-    },
-    currentFrame: {
-      propertyProps: { label: 'Current Frame' },
-      type: 'number',
-    },
-    autoUpdate: {
-      propertyProps: { label: 'Auto Update' },
-      type: 'boolean',
-    },
-    playing: {
-      propertyProps: { label: 'Playing' },
-      type: 'boolean',
-    },
-    start: { propertyProps: { label: 'Start' }, type: 'button' },
-    stop: { propertyProps: { label: 'Stop' }, type: 'button' },
-    play: { propertyProps: { label: 'Play' }, type: 'button' },
-  },
-};
-
-const NineSliceSpriteProperties: PropertyPanel = {
-  ...ContainerProperties,
-  ...SpriteProperties,
-  nineSlice: {
-    leftWidth: {
-      propertyProps: { label: 'Left Width' },
-      type: 'number',
-    },
-    rightWidth: {
-      propertyProps: { label: 'Right Width' },
-      type: 'number',
-    },
-    topHeight: {
-      propertyProps: { label: 'Top Height' },
-      type: 'number',
-    },
-    bottomHeight: {
-      propertyProps: { label: 'Bottom Height' },
-      type: 'number',
-    },
-    textureMatrix: {
-      propertyProps: { label: 'Texture Matrix' },
-      type: 'matrix',
-    },
-    originalWidth: {
-      propertyProps: { label: 'Original Width' },
-      type: 'number',
-    },
-    originalHeight: {
-      propertyProps: { label: 'Original Height' },
-      type: 'number',
-    },
-  },
-};
-
-// Define the properties for each PixiSceneObjectType
-const properties: Record<PixiSceneObjectType, PropertyPanel> = {
-  Container: ContainerProperties,
-  Sprite: SpriteProperties,
-  Text: TextProperties,
-  BitmapText: TextProperties,
-  HTMLText: TextProperties,
-  Mesh: MeshProperties,
-  Graphics: GraphicsProperties,
-  TilingSprite: TilingSpriteProperties,
-  AnimatedSprite: AnimatedSpriteProperties,
-  NineSliceSprite: NineSliceSpriteProperties,
-  Unknown: ContainerProperties,
-};
-
-export function getPropertiesOfNode(nodes: PixiSceneObjectType[]) {
-  const nodeTypes = new Set(nodes);
-  let commonProperties = {} as Required<PropertyPanel>;
-  const requiredProperties = properties as Record<PixiSceneObjectType, Required<PropertyPanel>>;
-
-  // Initialize commonProperties with the properties of the first node type
-  if (nodeTypes.size > 0) {
-    const firstNodeType = nodeTypes.values().next().value as PixiSceneObjectType;
-    commonProperties = { ...requiredProperties[firstNodeType] };
-  }
-
-  // For each node type, check each property panel key
-  for (const nodeType of nodeTypes) {
-    for (const key in commonProperties) {
-      const keyType = key as keyof PropertyPanel;
-      // If the property panel key is not in the current node type's properties, delete it from commonProperties
-      if (!requiredProperties[nodeType][keyType]) {
-        delete commonProperties[keyType];
-      } else {
-        // If the property panel key is in the current node type's properties, check each property
-        for (const propKey in commonProperties[keyType]) {
-          // If the property is not in the current node type's properties for the key, remove it from commonProperties
-          if (!requiredProperties[nodeType][keyType][propKey]) {
-            delete commonProperties[keyType][propKey];
-          }
-        }
-      }
-    }
-  }
-
-  return commonProperties;
-
-  // const nodeTypes = new Set(nodes);
-  // let commonProperties = {} as Required<PropertyPanel>;
-  // const requiredProperties = properties as Record<PixiSceneObjectType,Required<PropertyPanel>>;
-
-  // // Initialize commonProperties with the properties of the first node type
-  // if (nodeTypes.size > 0) {
-  //   const firstNodeType = nodeTypes.values().next().value as PixiSceneObjectType;
-  //   commonProperties = { ...requiredProperties[firstNodeType] };
-  // }
-
-  // // For each node type, check each property panel key
-  // for (const nodeType of nodeTypes) {
-  //   for (const key in commonProperties) {
-  //     const keyType = key as keyof PropertyPanel;
-  //     // If the property panel key is not in the current node type's properties, delete it from commonProperties
-  //     if (!requiredProperties[nodeType][keyType]) {
-  //       delete commonProperties[keyType];
-  //     } else {
-  //       // If the property panel key is in the current node type's properties, check each property
-  //       for (const prop of commonProperties[keyType]) {
-  //         // If the property is not in the current node type's properties for the key, remove it from commonProperties
-  //         if (!requiredProperties[nodeType][keyType].find((p) => p.property === prop.property)) {
-  //           commonProperties[keyType] = commonProperties[keyType].filter((p) => p.property !== prop.property);
-  //         }
-  //       }
-  //     }
-  //   }
-  // }
-
-  // return commonProperties;
-}
diff --git a/src/lib/src/components/properties/number/Vector2.tsx b/src/lib/src/components/properties/number/Vector2.tsx
index 7b5087f..a0eb0a2 100644
--- a/src/lib/src/components/properties/number/Vector2.tsx
+++ b/src/lib/src/components/properties/number/Vector2.tsx
@@ -6,7 +6,7 @@ import { BaseProperty, BasePropertyProps } from '../BaseProperty';
 export interface Vector2Props extends BasePropertyProps {
   x: NumberProps;
   y: NumberProps;
-  onChange: (value: [number, number]) => void;
+  onChange: (value: string) => void;
   value: [number, number];
 }
 
diff --git a/src/lib/src/components/properties/number/VectorX.tsx b/src/lib/src/components/properties/number/VectorX.tsx
new file mode 100644
index 0000000..2155429
--- /dev/null
+++ b/src/lib/src/components/properties/number/VectorX.tsx
@@ -0,0 +1,38 @@
+import styled from 'styled-components';
+import { BasePropertyProps, BaseProperty } from '../BaseProperty';
+import { NumberProps, NumberInput } from './Number';
+
+export interface VectorXProps extends BasePropertyProps {
+  vectors: NumberProps[];
+  onChange: (value: string) => void;
+  value: number[];
+}
+
+const VectorXContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+export const VectorX: React.FC<VectorXProps> = ({ vectors, label, onChange, value }) => {
+  vectors.forEach((vector, index) => {
+    vector.onChange = (v: number) => {
+      const newValue = [...value];
+      newValue[index] = v;
+      onChange(JSON.stringify(newValue));
+    };
+
+    vector.value = value[index];
+  });
+
+  return (
+    <BaseProperty label={label}>
+      <VectorXContainer>
+        {vectors.map((vector, index) => (
+          <NumberInput key={index} {...vector} />
+        ))}
+      </VectorXContainer>
+    </BaseProperty>
+  );
+};
diff --git a/src/lib/src/components/properties/select/Select.tsx b/src/lib/src/components/properties/select/Select.tsx
new file mode 100644
index 0000000..cd53db1
--- /dev/null
+++ b/src/lib/src/components/properties/select/Select.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import styled from 'styled-components';
+import { BaseProperty, BasePropertyProps } from '../BaseProperty';
+
+export interface SelectProps extends BasePropertyProps {
+  value: string;
+  onChange: (value: string) => void;
+  options: string[];
+}
+
+const StyledSelectRoot = styled.select`
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 10px;
+  height: 24px;
+  font-size: 10px;
+  line-height: 1;
+  color: var(--text);
+  background-color: var(--darkest-color);
+  box-shadow: 0 0 0 1px black;
+
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  &:focus {
+    box-shadow: 0 0 0 2px var(--secondary-color);
+    outline: none;
+  }
+  &::selection {
+    background-color: var(--secondary-color);
+    color: white;
+  }
+`;
+
+export const SelectInput: React.FC<SelectProps> = ({ value, onChange, label, options }) => {
+  return (
+    <BaseProperty label={label}>
+      <StyledSelectRoot value={value} onChange={(event) => onChange(JSON.stringify(event.target.value))}>
+        {options.map((option, index) => (
+          <option key={index} value={option}>
+            {option}
+          </option>
+        ))}
+      </StyledSelectRoot>
+    </BaseProperty>
+  );
+};
diff --git a/src/lib/src/detection/properties/AnimatedSpritePropsPlugin.ts b/src/lib/src/detection/properties/AnimatedSpritePropsPlugin.ts
index 315fb30..b446637 100644
--- a/src/lib/src/detection/properties/AnimatedSpritePropsPlugin.ts
+++ b/src/lib/src/detection/properties/AnimatedSpritePropsPlugin.ts
@@ -9,11 +9,30 @@ export const AnimatedSpritePropsPlugin: PropertyPlugin<AnimatedSprite> = {
       return null;
     }
 
+    if (prop === 'start' || prop === 'stop' || prop === 'play') {
+      return { value: true, prop };
+    }
+
     return { value: container[prop as keyof AnimatedSprite], prop };
   },
+  setPropValue(container, prop, value) {
+    if (this.getPropKeys().indexOf(prop) === -1) {
+      return;
+    }
+
+    if (prop === 'start') {
+      container.gotoAndPlay(0);
+    } else if (prop === 'stop') {
+      container.stop();
+    } else if (prop === 'play') {
+      container.play();
+    } else {
+      (container as any)[prop] = value;
+    }
+  },
   props: [
     { section: 'Transform', property: 'roundPixels', propertyProps: { label: 'Round Pixels' }, type: 'boolean' },
-    { section: 'Animated Sprite', property: 'textures', propertyProps: { label: 'Textures' }, type: 'text' },
+    // { section: 'Animated Sprite', property: 'textures', propertyProps: { label: 'Textures' }, type: 'text' },
     { section: 'Animated Sprite', property: 'totalFrames', propertyProps: { label: 'Total Frames' }, type: 'number' },
     { section: 'Animated Sprite', property: 'currentFrame', propertyProps: { label: 'Current Frame' }, type: 'number' },
     { section: 'Animated Sprite', property: 'autoUpdate', propertyProps: { label: 'Auto Update' }, type: 'boolean' },
diff --git a/src/lib/src/detection/properties/ContainerPropsPlugin.ts b/src/lib/src/detection/properties/ContainerPropsPlugin.ts
index 2bbdf79..70d3ce3 100644
--- a/src/lib/src/detection/properties/ContainerPropsPlugin.ts
+++ b/src/lib/src/detection/properties/ContainerPropsPlugin.ts
@@ -4,6 +4,8 @@ import { SliderProps } from '@lib/src/components/properties/slider/Slider';
 import { getPixiWrapper } from '../devtool';
 import { Vector2Props } from '@lib/src/components/properties/number/Vector2';
 import { TextProps } from '@lib/src/components/properties/text/Text';
+import { SelectProps } from '@lib/src/components/properties/select/Select';
+import { VectorXProps } from '@lib/src/components/properties/number/VectorX';
 
 export const ContainerPropsPlugin: PropertyPlugin = {
   getPropValue: function (container, prop) {
@@ -57,7 +59,7 @@ export const ContainerPropsPlugin: PropertyPlugin = {
   getValidProps: function (container) {
     return this.props.filter((prop) => {
       if (prop.property === 'type') return true;
-      return container[prop.property as keyof Container] !== undefined;
+      return container[prop.property as keyof Container] != undefined;
     });
   },
   props: [
@@ -107,19 +109,25 @@ export const ContainerPropsPlugin: PropertyPlugin = {
     },
     // { property: 'tint', section: 'Appearance', propertyProps: { label: 'Tint' }, type: 'color' },
     // { property: 'blendMode', section: 'Appearance', propertyProps: { label: 'Blend Mode' }, type: 'select' },
-    // {
-    //   section: 'Rendering',
-    //   property: 'filterArea',
-    //   propertyProps: { label: 'Filter Area' },
-    //   type: 'rect',
-    // },
+    {
+      section: 'Rendering',
+      property: 'filterArea',
+      propertyProps: {
+        label: 'Filter Area',
+        vectors: [{ label: 'x' }, { label: 'y' }, { label: 'width' }, { label: 'height' }],
+      } as VectorXProps,
+      type: 'vectorX',
+    },
     // // { propertyProps: { label: 'Filters' }, property: 'filters', type: 'select' },
-    // {
-    //   section: 'Rendering',
-    //   property: 'boundsArea',
-    //   propertyProps: { label: 'Bounds Area' },
-    //   type: 'rect',
-    // },
+    {
+      section: 'Rendering',
+      property: 'boundsArea',
+      propertyProps: {
+        label: 'Bounds Area',
+        vectors: [{ label: 'x' }, { label: 'y' }, { label: 'width' }, { label: 'height' }],
+      } as VectorXProps,
+      type: 'vectorX',
+    },
     {
       section: 'Rendering',
       property: 'isRenderGroup',
@@ -133,12 +141,15 @@ export const ContainerPropsPlugin: PropertyPlugin = {
       propertyProps: { label: 'Cullable' },
       type: 'boolean',
     },
-    // {
-    //   section: 'Culling',
-    //   property: 'cullArea',
-    //   propertyProps: { label: 'Cull Area' },
-    //   type: 'rect',
-    // },
+    {
+      section: 'Culling',
+      property: 'cullArea',
+      propertyProps: {
+        label: 'Cull Area',
+        vectors: [{ label: 'x' }, { label: 'y' }, { label: 'width' }, { label: 'height' }],
+      } as VectorXProps,
+      type: 'vectorX',
+    },
     {
       section: 'Culling',
       property: 'cullableChildren',
@@ -161,8 +172,70 @@ export const ContainerPropsPlugin: PropertyPlugin = {
       propertyProps: { label: 'Interactive Children' },
       type: 'boolean',
     },
-    // { section: 'Interaction', property: 'hitArea', propertyProps: { label: 'Hit Area' }, type: 'rect' },
-    // { section: 'Interaction', property: 'cursor', propertyProps: { label: 'Cursor' }, type: 'select' },
+    {
+      section: 'Interaction',
+      property: 'hitArea',
+      propertyProps: {
+        label: 'Hit Area',
+        vectors: [{ label: 'x' }, { label: 'y' }, { label: 'width' }, { label: 'height' }],
+      } as VectorXProps,
+      type: 'vectorX',
+    },
+    {
+      section: 'Interaction',
+      property: 'eventMode',
+      propertyProps: {
+        label: 'Event Mode',
+        options: ['none', 'passive', 'auto', 'static', 'dynamic'],
+      } as SelectProps,
+      type: 'select',
+    },
+    {
+      section: 'Interaction',
+      property: 'cursor',
+      propertyProps: {
+        label: 'Cursor',
+        options: [
+          'auto',
+          'default',
+          'none',
+          'context-menu',
+          'help',
+          'pointer',
+          'progress',
+          'wait',
+          'cell',
+          'crosshair',
+          'text',
+          'vertical-text',
+          'alias',
+          'copy',
+          'move',
+          'no-drop',
+          'not-allowed',
+          'e-resize',
+          'n-resize',
+          'ne-resize',
+          'nw-resize',
+          's-resize',
+          'se-resize',
+          'sw-resize',
+          'w-resize',
+          'ns-resize',
+          'ew-resize',
+          'nesw-resize',
+          'col-resize',
+          'nwse-resize',
+          'row-resize',
+          'all-scroll',
+          'zoom-in',
+          'zoom-out',
+          'grab',
+          'grabbing',
+        ],
+      } as SelectProps,
+      type: 'select',
+    },
   ],
   getPropKeys: function () {
     return this.props.map((prop) => prop.property);
diff --git a/src/lib/src/detection/properties/GraphicsPropsPlugin.ts b/src/lib/src/detection/properties/GraphicsPropsPlugin.ts
index 5373374..c12b852 100644
--- a/src/lib/src/detection/properties/GraphicsPropsPlugin.ts
+++ b/src/lib/src/detection/properties/GraphicsPropsPlugin.ts
@@ -11,7 +11,5 @@ export const GraphicsPropsPlugin: PropertyPlugin<Graphics> = {
 
     return { value: container[prop as keyof Graphics], prop };
   },
-  props: [
-    { section: 'Transform', property: 'roundPixels', propertyProps: { label: 'Round Pixels' }, type: 'boolean' },
-  ],
+  props: [{ section: 'Transform', property: 'roundPixels', propertyProps: { label: 'Round Pixels' }, type: 'boolean' }],
 };
diff --git a/src/lib/src/detection/properties/MeshPropsPlugin.ts b/src/lib/src/detection/properties/MeshPropsPlugin.ts
index 0535f9c..68a2e31 100644
--- a/src/lib/src/detection/properties/MeshPropsPlugin.ts
+++ b/src/lib/src/detection/properties/MeshPropsPlugin.ts
@@ -13,6 +13,11 @@ export const MeshPropsPlugin: PropertyPlugin<Mesh> = {
   },
   props: [
     { section: 'Transform', property: 'roundPixels', propertyProps: { label: 'Round Pixels' }, type: 'boolean' },
-    { section: 'Mesh', property: 'batched', propertyProps: { label: 'Batched', disabled: true } as SwitchProps, type: 'boolean' }
+    {
+      section: 'Mesh',
+      property: 'batched',
+      propertyProps: { label: 'Batched', disabled: true } as SwitchProps,
+      type: 'boolean',
+    },
   ],
 };
diff --git a/src/lib/src/detection/properties/NineSlicePropsPlugin.ts b/src/lib/src/detection/properties/NineSlicePropsPlugin.ts
index e1896c6..d16b96d 100644
--- a/src/lib/src/detection/properties/NineSlicePropsPlugin.ts
+++ b/src/lib/src/detection/properties/NineSlicePropsPlugin.ts
@@ -22,12 +22,12 @@ export const NineSliceSpritePropsPlugin: PropertyPlugin<NineSliceSprite> = {
       propertyProps: { label: 'Bottom Height' },
       type: 'number',
     },
-    {
-      section: 'NineSlice Sprite',
-      property: 'textureMatrix',
-      propertyProps: { label: 'Texture Matrix' },
-      type: 'matrix',
-    },
+    // {
+    //   section: 'NineSlice Sprite',
+    //   property: 'textureMatrix',
+    //   propertyProps: { label: 'Texture Matrix' },
+    //   type: 'matrix',
+    // },
     {
       section: 'NineSlice Sprite',
       property: 'originalWidth',
diff --git a/src/lib/src/pages/index.tsx b/src/lib/src/pages/index.tsx
index eb36bbc..c69797c 100644
--- a/src/lib/src/pages/index.tsx
+++ b/src/lib/src/pages/index.tsx
@@ -167,7 +167,9 @@ const Panel: React.FC<PanelProps> = ({ bridge }) => {
         <div style={{ color: 'white' }}>
           <h2>PixiJS not detected</h2>
           <p>
-            This page doesn’t appear to be using PixiJS. If this seems wrong, follow the project <a href="#">setup guide</a>{'https://github.com/pixijs/dev-tools#readme'}
+            This page doesn’t appear to be using PixiJS. If this seems wrong, follow the project{' '}
+            <a href="#">setup guide</a>
+            {'https://github.com/pixijs/dev-tools#readme'}
           </p>
         </div>
       )}