diff --git a/packages/plugin-r3f/src/components/EditableProxy.tsx b/packages/plugin-r3f/src/components/EditableProxy.tsx
index b2136a8..fe2fec6 100644
--- a/packages/plugin-r3f/src/components/EditableProxy.tsx
+++ b/packages/plugin-r3f/src/components/EditableProxy.tsx
@@ -43,7 +43,8 @@ const EditableProxy: VFC<EditableProxyProps> = ({
   )
 
   const selected = useSelected()
-  const showOverlayIcons = useVal(editorObject?.props.showOverlayIcons) ?? false
+  const showOverlayIcons =
+    useVal(editorObject?.props.viewport.showOverlayIcons) ?? false
 
   useEffect(() => {
     setSnapshotProxyObject(object, uniqueName)
diff --git a/packages/plugin-r3f/src/components/Editor.tsx b/packages/plugin-r3f/src/components/Editor.tsx
index b512415..7d052e8 100644
--- a/packages/plugin-r3f/src/components/Editor.tsx
+++ b/packages/plugin-r3f/src/components/Editor.tsx
@@ -43,8 +43,8 @@ const EditorScene = () => {
     shallow,
   )
 
-  const showGrid = useVal(editorObject?.props.showGrid) ?? true
-  const showAxes = useVal(editorObject?.props.showAxes) ?? true
+  const showGrid = useVal(editorObject?.props.viewport.showGrid) ?? true
+  const showAxes = useVal(editorObject?.props.viewport.showAxes) ?? true
 
   useEffect(() => {
     setOrbitControlsRef(orbitControlsRef)
diff --git a/packages/plugin-r3f/src/components/ProxyManager.tsx b/packages/plugin-r3f/src/components/ProxyManager.tsx
index c8a6be5..bd05a0f 100644
--- a/packages/plugin-r3f/src/components/ProxyManager.tsx
+++ b/packages/plugin-r3f/src/components/ProxyManager.tsx
@@ -37,13 +37,13 @@ const ProxyManager: VFC<ProxyManagerProps> = ({orbitControlsRef}) => {
     shallow,
   )
   const transformControlsMode =
-    useVal(editorObject?.props.transformControlsMode) ?? 'translate'
+    useVal(editorObject?.props.transformControls.mode) ?? 'translate'
 
   const transformControlsSpace =
-    useVal(editorObject?.props.transformControlsSpace) ?? 'world'
+    useVal(editorObject?.props.transformControls.space) ?? 'world'
 
   const viewportShading =
-    useVal(editorObject?.props.viewportShading) ?? 'rendered'
+    useVal(editorObject?.props.viewport.shading) ?? 'rendered'
 
   const sceneProxy = useMemo(() => sceneSnapshot?.clone(), [sceneSnapshot])
   const [editableProxies, setEditableProxies] = useState<{
diff --git a/packages/plugin-r3f/src/components/UI.tsx b/packages/plugin-r3f/src/components/UI.tsx
index d287943..e523f11 100644
--- a/packages/plugin-r3f/src/components/UI.tsx
+++ b/packages/plugin-r3f/src/components/UI.tsx
@@ -53,11 +53,11 @@ const UI: VFC = () => {
   )
 
   const transformControlsMode =
-    useVal(editorObject?.props.transformControlsMode) ?? 'translate'
+    useVal(editorObject?.props.transformControls.mode) ?? 'translate'
   const transformControlsSpace =
-    useVal(editorObject?.props.transformControlsSpace) ?? 'world'
+    useVal(editorObject?.props.transformControls.space) ?? 'world'
   const viewportShading =
-    useVal(editorObject?.props.viewportShading) ?? 'rendered'
+    useVal(editorObject?.props.viewport.shading) ?? 'rendered'
 
   const [wrapper, setWrapper] = useState<null | HTMLDivElement>(null)
 
@@ -73,7 +73,7 @@ const UI: VFC = () => {
                 value={transformControlsMode}
                 onChange={(value) =>
                   studio.transaction(({set}) =>
-                    set(editorObject!.props.transformControlsMode, value),
+                    set(editorObject!.props.transformControls.mode, value),
                   )
                 }
               />
@@ -83,7 +83,7 @@ const UI: VFC = () => {
                 value={transformControlsSpace}
                 onChange={(space) => {
                   studio.transaction(({set}) => {
-                    set(editorObject.props.transformControlsSpace, space)
+                    set(editorObject.props.transformControls.space, space)
                   })
                 }}
               />
@@ -93,7 +93,7 @@ const UI: VFC = () => {
                 value={viewportShading}
                 onChange={(shading) => {
                   studio.transaction(({set}) => {
-                    set(editorObject.props.viewportShading, shading)
+                    set(editorObject.props.viewport.shading, shading)
                   })
                 }}
               />
diff --git a/packages/plugin-r3f/src/store.ts b/packages/plugin-r3f/src/store.ts
index 20f86b9..054adc3 100644
--- a/packages/plugin-r3f/src/store.ts
+++ b/packages/plugin-r3f/src/store.ts
@@ -289,36 +289,47 @@ export type BindFunction = (options: {
 }) => (options: {gl: WebGLRenderer; scene: Scene}) => void
 
 const editorSheetObjectConfig = types.compound({
-  isOpen: types.boolean(false),
-  showAxes: types.boolean(true),
-  showGrid: types.boolean(true),
-  showOverlayIcons: types.boolean(false),
-  transformControlsMode: types.stringLiteral(
-    'translate',
+  isOpen: types.boolean(false, {label: 'Editor Open'}),
+  viewport: types.compound(
     {
-      translate: 'Translate',
-      rotate: 'Rotate',
-      scale: 'Scale',
+      showAxes: types.boolean(true, {label: 'Axes'}),
+      showGrid: types.boolean(true, {label: 'Grid'}),
+      showOverlayIcons: types.boolean(false, {label: 'Overlay Icons'}),
+      resolution: types.number(1440, {label: 'Resolution'}),
+      shading: types.stringLiteral(
+        'rendered',
+        {
+          flat: 'Flat',
+          rendered: 'Rendered',
+          solid: 'Solid',
+          wireframe: 'Wireframe',
+        },
+        {as: 'menu', label: 'Shading'},
+      ),
     },
-    {as: 'switch'},
+    {label: 'Viewport Config'},
   ),
-  transformControlsSpace: types.stringLiteral(
-    'world',
+  transformControls: types.compound(
     {
-      local: 'Local',
-      world: 'World',
+      mode: types.stringLiteral(
+        'translate',
+        {
+          translate: 'Translate',
+          rotate: 'Rotate',
+          scale: 'Scale',
+        },
+        {as: 'switch', label: 'Mode'},
+      ),
+      space: types.stringLiteral(
+        'world',
+        {
+          local: 'Local',
+          world: 'World',
+        },
+        {as: 'switch', label: 'Space'},
+      ),
     },
-    {as: 'switch'},
-  ),
-  viewportShading: types.stringLiteral(
-    'rendered',
-    {
-      flat: 'Flat',
-      rendered: 'Rendered',
-      solid: 'Solid',
-      wireframe: 'Wireframe',
-    },
-    {as: 'menu'},
+    {label: 'Transform Controls'},
   ),
 })