diff --git a/packages/editor/src/components/Editor2Container.tsx b/packages/editor/src/components/Editor2Container.tsx
index c26be4677f..0436eb982a 100644
--- a/packages/editor/src/components/Editor2Container.tsx
+++ b/packages/editor/src/components/Editor2Container.tsx
@@ -37,6 +37,8 @@ import { MaterialsPanelTab } from '@etherealengine/ui/src/components/editor/pane
 import { PropertiesPanelTab } from '@etherealengine/ui/src/components/editor/panels/Properties'
 import { ScenePanelTab } from '@etherealengine/ui/src/components/editor/panels/Scenes'
 import { ViewportPanelTab } from '@etherealengine/ui/src/components/editor/panels/Viewport'
+import { VisualScriptPanelTab } from '@etherealengine/ui/src/components/editor/panels/VisualScript'
+
 import { EditorProgressBar } from '@etherealengine/ui/src/components/editor/util/EditorProgressBar'
 import ErrorDialog from '@etherealengine/ui/src/components/tailwind/ErrorDialog'
 import PopupMenu from '@etherealengine/ui/src/primitives/tailwind/PopupMenu'
@@ -93,7 +95,7 @@ const defaultLayout: LayoutData = {
             tabs: [ViewportPanelTab]
           },
           {
-            tabs: [ScenePanelTab, FilesPanelTab, AssetsPanelTab]
+            tabs: [ScenePanelTab, FilesPanelTab, AssetsPanelTab, VisualScriptPanelTab]
           }
         ]
       },
diff --git a/packages/editor/src/components/visualScript/VisualFlow.tsx b/packages/editor/src/components/visualScript/VisualFlow.tsx
index 17762f6919..ffceaf5d65 100644
--- a/packages/editor/src/components/visualScript/VisualFlow.tsx
+++ b/packages/editor/src/components/visualScript/VisualFlow.tsx
@@ -37,9 +37,9 @@ import { VisualScriptState } from '@etherealengine/visual-script'
 
 import 'reactflow/dist/style.css'
 
+import Button from '@etherealengine/ui/src/primitives/tailwind/Button'
 import { EditorControlFunctions } from '../../functions/EditorControlFunctions'
 import { SelectionState } from '../../services/SelectionServices'
-import { PropertiesPanelButton } from '../inputs/Button'
 import { commitProperty } from '../properties/Util'
 
 import './ReactFlowStyle.css'
@@ -85,21 +85,16 @@ const VisualFlow = () => {
   return (
     <AutoSizer>
       {({ width, height }) => (
-        <div style={{ width, height }}>
+        <div className="flex items-center justify-center" style={{ width, height }}>
           {entities.length && !validEntity ? (
-            <PropertiesPanelButton
-              style={{
-                position: 'absolute',
-                top: '50%',
-                left: '50%',
-                transform: 'translate(-50%, -50%)'
-              }}
+            <Button
+              variant="outline"
               onClick={() => {
                 addVisualScript()
               }}
             >
               {t('editor:visualScript.panel.addVisualScript')}
-            </PropertiesPanelButton>
+            </Button>
           ) : (
             <></>
           )}
diff --git a/packages/editor/src/components/visualScript/VisualScriptUIModule.ts b/packages/editor/src/components/visualScript/VisualScriptUIModule.ts
index 29773dabbc..6fb3afc612 100644
--- a/packages/editor/src/components/visualScript/VisualScriptUIModule.ts
+++ b/packages/editor/src/components/visualScript/VisualScriptUIModule.ts
@@ -47,7 +47,6 @@ export * from './transformers/VisualToFlow'
 export * from './transformers/flowToVisual'
 export * from './util/autoLayout'
 export * from './util/calculateNewEdge'
-export * from './util/colors'
 export * from './util/getPickerFilters'
 export * from './util/getSocketsByNodeTypeAndHandleType'
 export * from './util/hasPositionMetaData'
diff --git a/packages/editor/src/components/visualScript/components/InputSocket.tsx b/packages/editor/src/components/visualScript/components/InputSocket.tsx
index 3ebc25552f..3b5c530448 100644
--- a/packages/editor/src/components/visualScript/components/InputSocket.tsx
+++ b/packages/editor/src/components/visualScript/components/InputSocket.tsx
@@ -29,8 +29,8 @@ import { Connection, Handle, Position, useReactFlow } from 'reactflow'
 
 import { InputSocketSpecJSON } from '@etherealengine/visual-script'
 
+import { valueTypeColorMap } from '@etherealengine/ui/src/components/editor/panels/VisualScript/util/colors'
 import { NodeSpecGenerator } from '../hooks/useNodeSpecGenerator'
-import { colors, valueTypeColorMap } from '../util/colors'
 import { isValidConnection } from '../util/isValidConnection'
 import { AutoSizeInput } from './AutoSizeInput'
 
diff --git a/packages/editor/src/components/visualScript/components/NodeContainer.tsx b/packages/editor/src/components/visualScript/components/NodeContainer.tsx
index 127f617d38..8527b6f103 100644
--- a/packages/editor/src/components/visualScript/components/NodeContainer.tsx
+++ b/packages/editor/src/components/visualScript/components/NodeContainer.tsx
@@ -25,9 +25,9 @@ Ethereal Engine. All Rights Reserved.
 
 import React, { PropsWithChildren } from 'react'
 
+import { categoryColorMap } from '@etherealengine/ui/src/components/editor/panels/VisualScript/util/colors'
 import { NodeCategory, NodeSpecJSON } from '@etherealengine/visual-script'
-
-import { categoryColorMap, colors } from '../util/colors'
+import { colors } from '@mui/material'
 
 const nodeContainerStyle = {
   borderRadius: '0.25rem',
diff --git a/packages/editor/src/components/visualScript/components/OutputSocket.tsx b/packages/editor/src/components/visualScript/components/OutputSocket.tsx
index 8822362daf..0238587808 100644
--- a/packages/editor/src/components/visualScript/components/OutputSocket.tsx
+++ b/packages/editor/src/components/visualScript/components/OutputSocket.tsx
@@ -29,8 +29,8 @@ import { Connection, Handle, Position, useReactFlow } from 'reactflow'
 
 import { OutputSocketSpecJSON } from '@etherealengine/visual-script'
 
+import { colors, valueTypeColorMap } from '@etherealengine/ui/src/components/editor/panels/VisualScript/util/colors'
 import { NodeSpecGenerator } from '../hooks/useNodeSpecGenerator'
-import { colors, valueTypeColorMap } from '../util/colors'
 import { isValidConnection } from '../util/isValidConnection'
 
 export type OutputSocketProps = {
diff --git a/packages/editor/src/components/visualScript/hooks/useCustomNodeTypes.tsx b/packages/editor/src/components/visualScript/hooks/useCustomNodeTypes.tsx
index a991785db7..7d2f695a4d 100644
--- a/packages/editor/src/components/visualScript/hooks/useCustomNodeTypes.tsx
+++ b/packages/editor/src/components/visualScript/hooks/useCustomNodeTypes.tsx
@@ -26,7 +26,7 @@ Ethereal Engine. All Rights Reserved.
 import React, { useEffect, useState } from 'react'
 import { NodeTypes } from 'reactflow'
 
-import { Node } from '../components/Node'
+import { Node } from '@etherealengine/ui/src/components/editor/panels/VisualScript/node'
 import { NodeSpecGenerator } from './useNodeSpecGenerator'
 
 const getCustomNodeTypes = (specGenerator: NodeSpecGenerator) => {
diff --git a/packages/engine/src/scene/components/VolumetricNodes.ts b/packages/engine/src/scene/components/VolumetricNodes.ts
index df815eb2d6..c9fe6b2b63 100644
--- a/packages/engine/src/scene/components/VolumetricNodes.ts
+++ b/packages/engine/src/scene/components/VolumetricNodes.ts
@@ -37,7 +37,7 @@ import { NodeCategory, makeFlowNodeDefinition } from '@etherealengine/visual-scr
  */
 export const playVolumetric = makeFlowNodeDefinition({
   typeName: 'engine/media/volumetric/playVolumetric',
-  category: NodeCategory.Action,
+  category: NodeCategory.Engine,
   label: 'Play Volumetric',
   in: {
     flow: 'flow',
@@ -60,7 +60,7 @@ export const playVolumetric = makeFlowNodeDefinition({
  */
 export const setVolumetricTime = makeFlowNodeDefinition({
   typeName: 'engine/media/volumetric/setVolumetricTime',
-  category: NodeCategory.Action,
+  category: NodeCategory.Engine,
   label: 'Set Volumetric Time',
   in: {
     flow: 'flow',
@@ -83,7 +83,7 @@ export const setVolumetricTime = makeFlowNodeDefinition({
  */
 export const fadeVolumetricAudioVolume = makeFlowNodeDefinition({
   typeName: 'engine/media/volumetric/fadeVolumetricVolume',
-  category: NodeCategory.Effect,
+  category: NodeCategory.Engine,
   label: 'Fade Volumetric Volume',
   in: {
     flow: 'flow',
diff --git a/packages/engine/src/visualscript/nodes/profiles/engine/events/onAxis.ts b/packages/engine/src/visualscript/nodes/profiles/engine/events/onAxis.ts
index 12d8257b2b..31e004e66b 100644
--- a/packages/engine/src/visualscript/nodes/profiles/engine/events/onAxis.ts
+++ b/packages/engine/src/visualscript/nodes/profiles/engine/events/onAxis.ts
@@ -51,7 +51,7 @@ const initialState = (): State => ({
 // very 3D specific.
 export const OnAxis = makeEventNodeDefinition({
   typeName: 'engine/axis/use',
-  category: NodeCategory.Event,
+  category: NodeCategory.Engine,
   label: 'Use Axis',
   in: {
     axis: (_, graphApi) => {
diff --git a/packages/engine/src/visualscript/nodes/profiles/engine/events/onButton.ts b/packages/engine/src/visualscript/nodes/profiles/engine/events/onButton.ts
index e78c3dcc80..7634869203 100644
--- a/packages/engine/src/visualscript/nodes/profiles/engine/events/onButton.ts
+++ b/packages/engine/src/visualscript/nodes/profiles/engine/events/onButton.ts
@@ -52,7 +52,7 @@ const initialState = (): State => ({
 const buttonStates = ['down', 'pressed', 'touched', 'up'] as Array<keyof ButtonState>
 export const OnButton = makeEventNodeDefinition({
   typeName: 'engine/onButton',
-  category: NodeCategory.Event,
+  category: NodeCategory.Engine,
   label: 'On Button',
   in: {
     button: (_) => {
diff --git a/packages/engine/src/visualscript/nodes/profiles/engine/events/onCollision.ts b/packages/engine/src/visualscript/nodes/profiles/engine/events/onCollision.ts
index 4693d73baa..5d360cd1eb 100644
--- a/packages/engine/src/visualscript/nodes/profiles/engine/events/onCollision.ts
+++ b/packages/engine/src/visualscript/nodes/profiles/engine/events/onCollision.ts
@@ -49,7 +49,7 @@ const initialState = (): State => ({
 // a visual script node
 export const OnCollision = makeEventNodeDefinition({
   typeName: 'engine/onCollision',
-  category: NodeCategory.Event,
+  category: NodeCategory.Engine,
   label: 'Collision Events',
 
   // socket configuration support
diff --git a/packages/engine/src/visualscript/nodes/profiles/engine/events/onExecute.ts b/packages/engine/src/visualscript/nodes/profiles/engine/events/onExecute.ts
index ee0f993c76..1c638889b3 100644
--- a/packages/engine/src/visualscript/nodes/profiles/engine/events/onExecute.ts
+++ b/packages/engine/src/visualscript/nodes/profiles/engine/events/onExecute.ts
@@ -47,7 +47,7 @@ const initialState = (): State => ({
 // very 3D specific.
 export const OnExecute = makeEventNodeDefinition({
   typeName: 'flow/lifecycle/onExecute',
-  category: NodeCategory.Event,
+  category: NodeCategory.Flow,
   label: 'On Execute',
   in: {
     system: (_, graphApi) => {
diff --git a/packages/engine/src/visualscript/nodes/profiles/engine/events/onQuery.ts b/packages/engine/src/visualscript/nodes/profiles/engine/events/onQuery.ts
index 87e24caf70..f8c1cc695a 100644
--- a/packages/engine/src/visualscript/nodes/profiles/engine/events/onQuery.ts
+++ b/packages/engine/src/visualscript/nodes/profiles/engine/events/onQuery.ts
@@ -43,7 +43,7 @@ const initialState = (): State => ({
 
 export const OnQuery = makeEventNodeDefinition({
   typeName: 'engine/query/use',
-  category: NodeCategory.Event,
+  category: NodeCategory.Engine,
   label: 'On Query',
   configuration: {
     numInputs: {
diff --git a/packages/engine/src/visualscript/nodes/profiles/engine/helper/actionHelper.ts b/packages/engine/src/visualscript/nodes/profiles/engine/helper/actionHelper.ts
index d4a4dc6eae..198419971f 100644
--- a/packages/engine/src/visualscript/nodes/profiles/engine/helper/actionHelper.ts
+++ b/packages/engine/src/visualscript/nodes/profiles/engine/helper/actionHelper.ts
@@ -154,7 +154,7 @@ export function registerActionConsumers() {
 
     const node = makeEventNodeDefinition({
       typeName: `action/${namePath}/${dispatchName}/consume`,
-      category: NodeCategory.Event,
+      category: NodeCategory.Action,
       label: `on ${namePath} ${dispatchName}`,
       in: {
         system: (_, graph) => {
diff --git a/packages/engine/src/visualscript/nodes/profiles/engine/helper/componentHelper.ts b/packages/engine/src/visualscript/nodes/profiles/engine/helper/componentHelper.ts
index 3c2d7a049a..3834c12dd3 100644
--- a/packages/engine/src/visualscript/nodes/profiles/engine/helper/componentHelper.ts
+++ b/packages/engine/src/visualscript/nodes/profiles/engine/helper/componentHelper.ts
@@ -99,7 +99,7 @@ export function registerComponentSetters() {
     }
     const node = makeFlowNodeDefinition({
       typeName: `engine/component/${componentName}/set`,
-      category: NodeCategory.Action,
+      category: NodeCategory.Engine,
       label: `set ${componentName}`,
       in: {
         flow: 'flow',
@@ -144,7 +144,7 @@ export function registerComponentGetters() {
     }
     const node = makeFunctionNodeDefinition({
       typeName: `engine/component/${componentName}/get`,
-      category: NodeCategory.Query,
+      category: NodeCategory.Engine,
       label: `get ${componentName}`,
       in: {
         entity: 'entity'
@@ -197,7 +197,7 @@ export function registerComponentListeners() {
 
     const node = makeEventNodeDefinition({
       typeName: `engine/component/${componentName}/use`,
-      category: NodeCategory.Event,
+      category: NodeCategory.Engine,
       label: `use ${componentName}`,
       in: {
         entity: 'entity'
diff --git a/packages/engine/src/visualscript/nodes/profiles/engine/helper/stateHelper.ts b/packages/engine/src/visualscript/nodes/profiles/engine/helper/stateHelper.ts
index a8ef125ec3..b5e02219f8 100644
--- a/packages/engine/src/visualscript/nodes/profiles/engine/helper/stateHelper.ts
+++ b/packages/engine/src/visualscript/nodes/profiles/engine/helper/stateHelper.ts
@@ -72,7 +72,7 @@ export function registerStateSetters() {
     }
     const node = makeFlowNodeDefinition({
       typeName: `engine/state/${stateName}/set`,
-      category: NodeCategory.Action,
+      category: NodeCategory.Engine,
       label: `set ${stateName}`,
       in: {
         flow: 'flow',
@@ -109,7 +109,7 @@ export function registerStateGetters() {
     }
     const node = makeFlowNodeDefinition({
       typeName: `engine/state/${stateName}/get`,
-      category: NodeCategory.Query,
+      category: NodeCategory.Engine,
       label: `get ${stateName}`,
       in: {
         flow: 'flow'
@@ -165,7 +165,7 @@ export function registerStateListeners() {
     }
     const node = makeEventNodeDefinition({
       typeName: `engine/state/${stateName}/use`,
-      category: NodeCategory.Event,
+      category: NodeCategory.Engine,
       label: `Use ${stateName}`,
       in: {},
       out: {
diff --git a/packages/engine/src/visualscript/nodes/profiles/engine/registerEngineProfile.ts b/packages/engine/src/visualscript/nodes/profiles/engine/registerEngineProfile.ts
index 7263145d63..1711c35150 100644
--- a/packages/engine/src/visualscript/nodes/profiles/engine/registerEngineProfile.ts
+++ b/packages/engine/src/visualscript/nodes/profiles/engine/registerEngineProfile.ts
@@ -28,12 +28,10 @@ Ethereal Engine. All Rights Reserved.
 import * as VolumetricNodes from '@etherealengine/engine/src/scene/components/VolumetricNodes'
 import {
   getNodeDescriptions,
-  GetSceneProperty,
   getStringConversionsForValueType,
   IRegistry,
   memo,
   NodeDefinition,
-  SetSceneProperty,
   ValueTypeMap
 } from '@etherealengine/visual-script'
 
@@ -98,8 +96,8 @@ export const getEngineNodesMap = memo<Record<string, NodeDefinition>>(() => {
     OnAxis,
     // async
     //switchScene.Description,
-    ...SetSceneProperty(engineValueTypeNames),
-    ...GetSceneProperty(engineValueTypeNames),
+    //...SetSceneProperty(engineValueTypeNames),
+    //...GetSceneProperty(engineValueTypeNames),
     // flow control
 
     ...getEngineStringConversions(getEngineValuesMap()),
diff --git a/packages/engine/src/visualscript/nodes/profiles/engine/values/AxisNodes.ts b/packages/engine/src/visualscript/nodes/profiles/engine/values/AxisNodes.ts
index fab4752102..59a2bfa06c 100644
--- a/packages/engine/src/visualscript/nodes/profiles/engine/values/AxisNodes.ts
+++ b/packages/engine/src/visualscript/nodes/profiles/engine/values/AxisNodes.ts
@@ -31,7 +31,7 @@ import { Assert, Choices, NodeCategory, makeFunctionNodeDefinition } from '@ethe
 // very 3D specific.
 export const getAxis = makeFunctionNodeDefinition({
   typeName: 'engine/axis/get',
-  category: NodeCategory.Query,
+  category: NodeCategory.Engine,
   label: 'get Axis',
   in: {
     axis: (_, graphApi) => {
diff --git a/packages/engine/src/visualscript/nodes/profiles/engine/values/ComponentNodes.ts b/packages/engine/src/visualscript/nodes/profiles/engine/values/ComponentNodes.ts
index 73dc25e846..ed6ebdb6a1 100644
--- a/packages/engine/src/visualscript/nodes/profiles/engine/values/ComponentNodes.ts
+++ b/packages/engine/src/visualscript/nodes/profiles/engine/values/ComponentNodes.ts
@@ -34,7 +34,7 @@ import { Assert, NodeCategory, makeFlowNodeDefinition } from '@etherealengine/vi
 
 export const addComponent = makeFlowNodeDefinition({
   typeName: 'engine/component/addComponent',
-  category: NodeCategory.Action,
+  category: NodeCategory.Engine,
   label: 'Add Component',
   in: {
     flow: 'flow',
@@ -62,7 +62,7 @@ export const addComponent = makeFlowNodeDefinition({
 
 export const deleteComponent = makeFlowNodeDefinition({
   typeName: 'engine/component/deleteComponent',
-  category: NodeCategory.Action,
+  category: NodeCategory.Engine,
   label: 'Delete Component',
   in: {
     flow: 'flow',
@@ -90,7 +90,7 @@ export const deleteComponent = makeFlowNodeDefinition({
 
 export const setTag = makeFlowNodeDefinition({
   typeName: 'engine/component/tag/set',
-  category: NodeCategory.Action,
+  category: NodeCategory.Engine,
   label: 'set Tag',
   in: {
     flow: 'flow',
@@ -114,7 +114,7 @@ export const setTag = makeFlowNodeDefinition({
 
 export const removeTag = makeFlowNodeDefinition({
   typeName: 'engine/component/tag/remove',
-  category: NodeCategory.Action,
+  category: NodeCategory.Engine,
   label: 'remove Tag',
   in: {
     flow: 'flow',
diff --git a/packages/engine/src/visualscript/nodes/profiles/engine/values/CustomNodes.ts b/packages/engine/src/visualscript/nodes/profiles/engine/values/CustomNodes.ts
index 11ce1e9a68..08cb4eedac 100644
--- a/packages/engine/src/visualscript/nodes/profiles/engine/values/CustomNodes.ts
+++ b/packages/engine/src/visualscript/nodes/profiles/engine/values/CustomNodes.ts
@@ -73,7 +73,7 @@ import { addMediaComponent } from '../helper/assetHelper'
 
 export const playVideo = makeFlowNodeDefinition({
   typeName: 'engine/media/playVideo',
-  category: NodeCategory.Action,
+  category: NodeCategory.Engine,
   label: 'Play video',
   in: {
     flow: 'flow',
@@ -133,7 +133,7 @@ export const playVideo = makeFlowNodeDefinition({
 
 export const playAudio = makeFlowNodeDefinition({
   typeName: 'engine/media/playAudio',
-  category: NodeCategory.Action,
+  category: NodeCategory.Engine,
   label: 'Play audio',
   in: {
     flow: 'flow',
@@ -190,7 +190,7 @@ export const playAudio = makeFlowNodeDefinition({
 /*
 export const makeRaycast = makeFlowNodeDefinition({
   typeName: 'engine/playAudio',
-  category: NodeCategory.Action,
+  category: NodeCategory.Engine,
   label: 'Play audio',
   in: {
     flow: 'flow',
@@ -234,7 +234,7 @@ export const makeRaycast = makeFlowNodeDefinition({
 
 export const getAnimationPack = makeFunctionNodeDefinition({
   typeName: 'engine/media/getAnimationPack',
-  category: NodeCategory.Query,
+  category: NodeCategory.Engine,
   label: 'Get Avatar Animations',
   in: {
     animationName: (_) => {
@@ -256,7 +256,7 @@ export const getAnimationPack = makeFunctionNodeDefinition({
 
 export const playAnimation = makeFlowNodeDefinition({
   typeName: 'engine/media/playAnimation',
-  category: NodeCategory.Action,
+  category: NodeCategory.Engine,
   label: 'Play animation',
   in: {
     flow: 'flow',
@@ -289,7 +289,7 @@ export const playAnimation = makeFlowNodeDefinition({
 
 export const setAnimationAction = makeFlowNodeDefinition({
   typeName: 'engine/media/setAnimationAction',
-  category: NodeCategory.Action,
+  category: NodeCategory.Engine,
   label: 'Set animation action',
   in: {
     flow: 'flow',
@@ -352,7 +352,7 @@ export const setAnimationAction = makeFlowNodeDefinition({
 const initialState = () => {}
 export const loadAsset = makeAsyncNodeDefinition({
   typeName: 'engine/asset/loadAsset',
-  category: NodeCategory.Action,
+  category: NodeCategory.Engine,
   label: 'Load asset',
   in: {
     flow: 'flow',
@@ -385,7 +385,7 @@ export const loadAsset = makeAsyncNodeDefinition({
 
 export const fadeCamera = makeFlowNodeDefinition({
   typeName: 'engine/camera/cameraFade',
-  category: NodeCategory.Action,
+  category: NodeCategory.Engine,
   label: 'Camera fade',
   in: {
     flow: 'flow',
@@ -405,7 +405,7 @@ export const fadeCamera = makeFlowNodeDefinition({
 
 export const setCameraZoom = makeFlowNodeDefinition({
   typeName: 'engine/camera/setCameraZoom',
-  category: NodeCategory.Action,
+  category: NodeCategory.Engine,
   label: 'Set camera zoom',
   in: {
     flow: 'flow',
@@ -423,7 +423,7 @@ export const setCameraZoom = makeFlowNodeDefinition({
 
 export const startXRSession = makeFlowNodeDefinition({
   typeName: 'engine/xr/startSession',
-  category: NodeCategory.Action,
+  category: NodeCategory.Engine,
   label: 'Start XR Session',
   in: {
     flow: 'flow',
@@ -447,7 +447,7 @@ export const startXRSession = makeFlowNodeDefinition({
 
 export const finishXRSession = makeFlowNodeDefinition({
   typeName: 'engine/xr/endSession',
-  category: NodeCategory.Action,
+  category: NodeCategory.Engine,
   label: 'End XR Session',
   in: {
     flow: 'flow'
@@ -462,7 +462,7 @@ export const finishXRSession = makeFlowNodeDefinition({
 
 export const switchScene = makeFlowNodeDefinition({
   typeName: 'engine/switchScene',
-  category: NodeCategory.Action,
+  category: NodeCategory.Engine,
   label: 'Switch Scene',
   in: {
     flow: 'flow',
@@ -487,7 +487,7 @@ export const group = makeFunctionNodeDefinition({
 
 export const redirectToURL = makeFlowNodeDefinition({
   typeName: 'engine/redirectToURL',
-  category: NodeCategory.Action,
+  category: NodeCategory.Engine,
   label: 'Redirect to URL',
   in: {
     flow: 'flow',
@@ -506,7 +506,7 @@ export const redirectToURL = makeFlowNodeDefinition({
  */
 export const fadeMesh = makeFlowNodeDefinition({
   typeName: 'engine/fadeMesh',
-  category: NodeCategory.Effect,
+  category: NodeCategory.Engine,
   label: 'Fade Mesh',
   in: {
     flow: 'flow',
diff --git a/packages/engine/src/visualscript/nodes/profiles/engine/values/EntityNodes.ts b/packages/engine/src/visualscript/nodes/profiles/engine/values/EntityNodes.ts
index 865ed8bc1d..c5105b6e21 100644
--- a/packages/engine/src/visualscript/nodes/profiles/engine/values/EntityNodes.ts
+++ b/packages/engine/src/visualscript/nodes/profiles/engine/values/EntityNodes.ts
@@ -63,7 +63,7 @@ const sceneQuery = defineQuery([SourceComponent])
 
 export const getEntity = makeFunctionNodeDefinition({
   typeName: 'logic/entity/get/entityInScene',
-  category: NodeCategory.Query,
+  category: NodeCategory.Logic,
   label: 'Get entity in scene',
   in: {
     entity: (_) => {
@@ -88,7 +88,7 @@ export const getEntity = makeFunctionNodeDefinition({
 
 export const getLocalClientEntity = makeFunctionNodeDefinition({
   typeName: 'logic/entity/get/localClientEntity',
-  category: NodeCategory.Query,
+  category: NodeCategory.Logic,
   label: 'Get local client entity',
   in: {},
   out: { entity: 'entity' },
@@ -100,7 +100,7 @@ export const getLocalClientEntity = makeFunctionNodeDefinition({
 
 export const getCameraEntity = makeFunctionNodeDefinition({
   typeName: 'logic/entity/get/cameraEntity',
-  category: NodeCategory.Query,
+  category: NodeCategory.Logic,
   label: 'Get camera entity',
   in: {},
   out: { entity: 'entity' },
@@ -112,7 +112,7 @@ export const getCameraEntity = makeFunctionNodeDefinition({
 
 export const entityExists = makeFlowNodeDefinition({
   typeName: 'logic/entity/exists',
-  category: NodeCategory.Action,
+  category: NodeCategory.Logic,
   label: 'Entity exists',
   in: {
     flow: 'flow',
@@ -149,7 +149,7 @@ export const entityExists = makeFlowNodeDefinition({
 
 export const addEntity = makeFlowNodeDefinition({
   typeName: 'logic/entity/addEntity',
-  category: NodeCategory.Action,
+  category: NodeCategory.Logic,
   label: 'Add entity',
   in: {
     flow: 'flow',
@@ -194,7 +194,7 @@ export const addEntity = makeFlowNodeDefinition({
 
 export const deleteEntity = makeFlowNodeDefinition({
   typeName: 'logic/entity/deleteEntity',
-  category: NodeCategory.Action,
+  category: NodeCategory.Logic,
   label: 'Delete entity',
   in: {
     flow: 'flow',
@@ -222,7 +222,7 @@ export const deleteEntity = makeFlowNodeDefinition({
 
 export const getEntityTransform = makeFunctionNodeDefinition({
   typeName: 'engine/entity/TransformComponent/get',
-  category: NodeCategory.Query,
+  category: NodeCategory.Engine,
   label: 'Get entity transform',
   in: {
     entity: 'entity'
@@ -241,7 +241,7 @@ export const getEntityTransform = makeFunctionNodeDefinition({
 
 export const setEntityTransform = makeFlowNodeDefinition({
   typeName: 'engine/entity/TransformComponent/set',
-  category: NodeCategory.Action,
+  category: NodeCategory.Engine,
   label: 'set transformComponent',
   in: {
     flow: 'flow',
@@ -270,7 +270,7 @@ export const setEntityTransform = makeFlowNodeDefinition({
 
 export const useEntityTransform = makeEventNodeDefinition({
   typeName: 'engine/entity/TransformComponent/use',
-  category: NodeCategory.Event,
+  category: NodeCategory.Engine,
   label: 'Use entity transform',
   in: {
     entity: 'entity'
diff --git a/packages/engine/src/visualscript/nodes/profiles/engine/values/QueryNodes.ts b/packages/engine/src/visualscript/nodes/profiles/engine/values/QueryNodes.ts
index dd86491bbc..42b4e74d56 100644
--- a/packages/engine/src/visualscript/nodes/profiles/engine/values/QueryNodes.ts
+++ b/packages/engine/src/visualscript/nodes/profiles/engine/values/QueryNodes.ts
@@ -29,7 +29,7 @@ import { NodeCategory, SocketsList, makeFunctionNodeDefinition, sequence } from
 
 export const getQuery = makeFunctionNodeDefinition({
   typeName: 'engine/query/get',
-  category: NodeCategory.Query,
+  category: NodeCategory.Engine,
   label: 'get Query',
   configuration: {
     numInputs: {
diff --git a/packages/engine/src/visualscript/nodes/profiles/engine/values/SplineNodes.ts b/packages/engine/src/visualscript/nodes/profiles/engine/values/SplineNodes.ts
index 23668d995a..db1408f15c 100644
--- a/packages/engine/src/visualscript/nodes/profiles/engine/values/SplineNodes.ts
+++ b/packages/engine/src/visualscript/nodes/profiles/engine/values/SplineNodes.ts
@@ -43,7 +43,7 @@ const splineQuery = defineQuery([SplineComponent])
 
 export const getSpline = makeFunctionNodeDefinition({
   typeName: 'engine/spline/getSpline',
-  category: NodeCategory.Query,
+  category: NodeCategory.Engine,
   label: 'Get Spline Entity',
   in: {
     spline: (_) => {
@@ -76,7 +76,7 @@ const initialState = (): State => ({
 })
 export const addSplineTrack = makeAsyncNodeDefinition({
   typeName: 'engine/spline/addSplineTrack',
-  category: NodeCategory.Action,
+  category: NodeCategory.Engine,
   label: 'Add spline track',
   in: {
     flow: 'flow',
diff --git a/packages/engine/src/visualscript/nodes/profiles/engine/values/VariableNodes.ts b/packages/engine/src/visualscript/nodes/profiles/engine/values/VariableNodes.ts
index 854151969c..3748bc4b1a 100644
--- a/packages/engine/src/visualscript/nodes/profiles/engine/values/VariableNodes.ts
+++ b/packages/engine/src/visualscript/nodes/profiles/engine/values/VariableNodes.ts
@@ -39,8 +39,8 @@ import {
 } from '@etherealengine/visual-script'
 
 export const EngineVariableGet = makeFunctionNodeDefinition({
-  typeName: 'engine/variable/get',
-  category: NodeCategory.Query,
+  typeName: 'variable/get',
+  category: NodeCategory.Variable,
   label: 'Get',
   configuration: {
     variableName: {
@@ -87,8 +87,8 @@ export const EngineVariableGet = makeFunctionNodeDefinition({
 })
 
 export const EngineVariableSet = makeFlowNodeDefinition({
-  typeName: 'engine/variable/set',
-  category: NodeCategory.Action,
+  typeName: 'variable/set',
+  category: NodeCategory.Variable,
   label: 'Set',
   configuration: {
     variableName: {
@@ -152,8 +152,8 @@ export const getUseVariableSystemUUID = (variableName) =>
   (useVariableSystemUUID + `${variableName}-` + useVariableSystemCounter) as SystemUUID
 
 export const EngineVariableUse = makeEventNodeDefinition({
-  typeName: 'engine/variable/use',
-  category: NodeCategory.Event,
+  typeName: 'variable/use',
+  category: NodeCategory.Variable,
   label: 'Use',
   configuration: {
     variableName: {
diff --git a/packages/spatial/src/common/constants/MathConstants.ts b/packages/spatial/src/common/constants/MathConstants.ts
index 237f985b4b..f06d2516f9 100644
--- a/packages/spatial/src/common/constants/MathConstants.ts
+++ b/packages/spatial/src/common/constants/MathConstants.ts
@@ -59,9 +59,15 @@ export const Vector2_Zero = Object.freeze(new Vector2(0, 0))
 /** const Vector2(1,0) */
 export const Vector2_Right = Object.freeze(new Vector2(1, 0))
 
+/** const Vector2(-1,0) */
+export const Vector2_Left = Object.freeze(new Vector2(-1, 0))
+
 /** const Vector2(0,1) */
 export const Vector2_Up = Object.freeze(new Vector2(0, 1))
 
+/** const Vector2(0,-1) */
+export const Vector2_Down = Object.freeze(new Vector2(0, -1))
+
 /** const Vector2(1,1) */
 export const Vector2_One = Object.freeze(new Vector2(1, 1))
 
diff --git a/packages/ui/src/components/editor/layout/PaginatedList.tsx b/packages/ui/src/components/editor/layout/PaginatedList.tsx
new file mode 100644
index 0000000000..5fdf3a8071
--- /dev/null
+++ b/packages/ui/src/components/editor/layout/PaginatedList.tsx
@@ -0,0 +1,129 @@
+/*
+CPAL-1.0 License
+
+The contents of this file are subject to the Common Public Attribution License
+Version 1.0. (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
+The License is based on the Mozilla Public License Version 1.1, but Sections 14
+and 15 have been added to cover use of software over a computer network and 
+provide for limited attribution for the Original Developer. In addition, 
+Exhibit A has been modified to be consistent with Exhibit B.
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
+specific language governing rights and limitations under the License.
+
+The Original Code is Ethereal Engine.
+
+The Original Developer is the Initial Developer. The Initial Developer of the
+Original Code is the Ethereal Engine team.
+
+All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
+Ethereal Engine. All Rights Reserved.
+*/
+
+import ArrowLeftIcon from '@mui/icons-material/ArrowLeft'
+import ArrowRightIcon from '@mui/icons-material/ArrowRight'
+import React, { useEffect } from 'react'
+
+import { State, useHookstate } from '@etherealengine/hyperflux'
+
+import Button from '../../../primitives/tailwind/Button'
+
+const buttonStyle = {
+  width: '90%',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  padding: '5%'
+}
+
+export default function PaginatedList<T>({
+  list,
+  element,
+  options
+}: {
+  ['list']: T[] | State<T[]>
+  ['element']: (val: T | State<T>, _index: number) => JSX.Element
+  ['options']?: {
+    ['countPerPage']?: number
+  }
+}) {
+  const countPerPage = options?.countPerPage ?? 7
+  const currentPage = useHookstate(0)
+
+  function getPageIndices() {
+    const start = countPerPage * currentPage.value
+    return [start, Math.min(start + countPerPage, list.length /*- 1*/)]
+  }
+
+  const pageView = useHookstate(getPageIndices())
+  useEffect(() => {
+    pageView.set(getPageIndices())
+  }, [currentPage])
+  return (
+    <>
+      <div className="m-2 flex flex-col overflow-hidden rounded-md p-1">
+        {list?.length > 0 && (
+          <div className="grid grid-cols-7 gap-4">
+            <div className="col-span-1 flex justify-center">
+              <Button
+                variant="outline"
+                size="small"
+                className="justify-center"
+                onClick={() =>
+                  currentPage.set(Math.min(list.length / countPerPage, Math.max(0, currentPage.value - 1)))
+                }
+                style={buttonStyle}
+              >
+                <ArrowLeftIcon />
+              </Button>
+            </div>
+            {[-2, -1, 0, 1, 2].map((idx) => {
+              const btnKey = `paginatedButton-${idx}`
+              if (!(currentPage.value + idx < 0 || currentPage.value + idx >= list.length / countPerPage))
+                return (
+                  <div className="col-span-1 flex justify-center" key={btnKey}>
+                    <Button
+                      variant="outline"
+                      size="small"
+                      className="justify-center"
+                      disabled={idx === 0}
+                      onClick={() => currentPage.set(currentPage.value + idx)}
+                      style={buttonStyle}
+                    >
+                      {currentPage.value + idx}
+                    </Button>
+                  </div>
+                )
+              else
+                return (
+                  <div className="col-span-1 flex justify-center" key={btnKey}>
+                    <div className="w-[90%] overflow-hidden truncate p-[5%]"></div>
+                  </div>
+                )
+            })}
+            <div className="col-span-1 flex justify-center">
+              <Button
+                variant="outline"
+                size="small"
+                className="justify-center"
+                onClick={() =>
+                  currentPage.set(
+                    Math.min(Math.floor((list.length - 1) / countPerPage), Math.max(0, currentPage.value + 1))
+                  )
+                }
+                style={buttonStyle}
+              >
+                <ArrowRightIcon />
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+      {(pageView.value[0] === pageView.value[1] ? list : list.slice(...pageView.value)).map((val, index) => {
+        return <div key={`${index}`}>{element(val, index)}</div>
+      })}
+    </>
+  )
+}
diff --git a/packages/ui/src/components/editor/layout/Panel.tsx b/packages/ui/src/components/editor/layout/Panel.tsx
index d36f46a517..7cbd414be4 100755
--- a/packages/ui/src/components/editor/layout/Panel.tsx
+++ b/packages/ui/src/components/editor/layout/Panel.tsx
@@ -51,10 +51,7 @@ interface PanelProps {
 
 const Panel: React.FC<PanelProps> = ({ icon, title, children, toolbarContent, ...rest }) => {
   return (
-    <div
-      className="relative flex flex-1 select-none flex-col overflow-hidden rounded bg-[var(--dockBackground)]"
-      {...rest}
-    >
+    <div className="bg-surface-main relative flex flex-1 select-none flex-col overflow-hidden rounded" {...rest}>
       <div className="toolbar flex h-6 items-center border-b border-black border-opacity-20 p-1">
         {icon && <PanelIcon as={icon} size={12} />}
         <PanelTitle>{title}</PanelTitle>
diff --git a/packages/ui/src/components/editor/panels/VisualScript/autoSizeInput/index.tsx b/packages/ui/src/components/editor/panels/VisualScript/autoSizeInput/index.tsx
new file mode 100644
index 0000000000..f3f2d43ebe
--- /dev/null
+++ b/packages/ui/src/components/editor/panels/VisualScript/autoSizeInput/index.tsx
@@ -0,0 +1,79 @@
+/*
+CPAL-1.0 License
+
+The contents of this file are subject to the Common Public Attribution License
+Version 1.0. (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
+The License is based on the Mozilla Public License Version 1.1, but Sections 14
+and 15 have been added to cover use of software over a computer network and 
+provide for limited attribution for the Original Developer. In addition, 
+Exhibit A has been modified to be consistent with Exhibit B.
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
+specific language governing rights and limitations under the License.
+
+The Original Code is Ethereal Engine.
+
+The Original Developer is the Initial Developer. The Initial Developer of the
+Original Code is the Ethereal Engine team.
+
+All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
+Ethereal Engine. All Rights Reserved.
+*/
+
+import React, { CSSProperties, HTMLProps, useCallback, useEffect, useRef, useState } from 'react'
+
+export type AutoSizeInputProps = HTMLProps<HTMLInputElement> & {
+  minWidth?: number
+}
+
+const baseStyles: CSSProperties = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  visibility: 'hidden',
+  height: 0,
+  width: 'auto',
+  whiteSpace: 'pre'
+}
+
+export const AutoSizeInput: React.FC<AutoSizeInputProps> = ({ minWidth = 100, ...props }) => {
+  const inputRef = useRef<HTMLInputElement | null>(null)
+  const measureRef = useRef<HTMLSpanElement | null>(null)
+  const [styles, setStyles] = useState<CSSProperties>({})
+
+  // grab the font size of the input on ref mount
+  const setRef = useCallback((input: HTMLInputElement | null) => {
+    if (input) {
+      const styles = window.getComputedStyle(input)
+      setStyles({
+        fontSize: styles.getPropertyValue('font-size'),
+        paddingLeft: styles.getPropertyValue('padding-left'),
+        paddingRight: styles.getPropertyValue('padding-right')
+      })
+    }
+    inputRef.current = input
+  }, [])
+
+  // measure the text on change and update input
+  useEffect(() => {
+    if (measureRef.current === null) return
+    if (inputRef.current === null) return
+
+    const padding = props.type === 'number' || props.type === 'float' ? 20 : 1
+
+    const width = measureRef.current.clientWidth + padding
+    inputRef.current.style.width = Math.max(minWidth, width) + 'px'
+  }, [props.value, minWidth, styles, props.type])
+
+  return (
+    <>
+      <input ref={setRef} {...props} />
+      <span ref={measureRef} style={{ ...baseStyles, ...styles }}>
+        {props.value}
+      </span>
+    </>
+  )
+}
diff --git a/packages/ui/src/components/editor/panels/VisualScript/container/ReactFlowStyle.css b/packages/ui/src/components/editor/panels/VisualScript/container/ReactFlowStyle.css
new file mode 100644
index 0000000000..6b2ae8557c
--- /dev/null
+++ b/packages/ui/src/components/editor/panels/VisualScript/container/ReactFlowStyle.css
@@ -0,0 +1,87 @@
+.react-flow__handle {
+  width: 10px;
+  height: 10px;
+}
+
+.react-flow__handle-right {
+  right: -6px;
+}
+
+.react-flow__handle-left {
+  left: -6px;
+}
+
+/* Styling for the edges in react flow */
+.react-flow__edge-path {
+  stroke: #b1b1b7;
+  stroke-width: 2;
+  cursor: pointer;
+}
+
+/* Styling for number input */
+input[type='number'] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+
+/* Default stroke color for react flow edges */
+.react-flow__edge-path {
+  stroke: #555;
+}
+
+/* Styling for selected react flow edges */
+.react-flow__edge.selected .react-flow__edge-path {
+  stroke: #fff;
+}
+
+/* Styling for selected react flow nodes */
+.react-flow__nodes .react-flow__node::selection {
+  outline: 1px white solid;
+}
+
+/* Styling for the title of react flow nodes */
+.react-flow__nodes .react-flow__node .title {
+  background-color: #aac;
+  color: #fff;
+  padding: 0.5rem 0.25rem;
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+}
+
+/* Styling for the content of react flow nodes */
+.react-flow__nodes .react-flow__node .content {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+/* Styling for the react flow controls */
+.react-flow .react-flow__controls {
+  display: flex;
+  width: 100%;
+  background-color: #111113;
+}
+
+.react-flow__panel {
+  margin-left: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+.react-flow__controls-button{
+  background-color: #111113 !important;
+  color: #6B7280 !important; 
+  border-bottom: none !important;
+
+  svg {
+    fill: #6B7280 !important;
+    stroke:  #6B7280 !important;
+  }
+}
\ No newline at end of file
diff --git a/packages/ui/src/components/editor/panels/VisualScript/container/index.tsx b/packages/ui/src/components/editor/panels/VisualScript/container/index.tsx
new file mode 100644
index 0000000000..b9776e20b5
--- /dev/null
+++ b/packages/ui/src/components/editor/panels/VisualScript/container/index.tsx
@@ -0,0 +1,114 @@
+/*
+CPAL-1.0 License
+
+The contents of this file are subject to the Common Public Attribution License
+Version 1.0. (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
+The License is based on the Mozilla Public License Version 1.1, but Sections 14
+and 15 have been added to cover use of software over a computer network and 
+provide for limited attribution for the Original Developer. In addition, 
+Exhibit A has been modified to be consistent with Exhibit B.
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
+specific language governing rights and limitations under the License.
+
+The Original Code is Ethereal Engine.
+
+The Original Developer is the Initial Developer. The Initial Developer of the
+Original Code is the Ethereal Engine team.
+
+All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
+Ethereal Engine. All Rights Reserved.
+*/
+
+import { getComponent, hasComponent, useQuery } from '@etherealengine/ecs'
+import { commitProperty } from '@etherealengine/editor/src/components/properties/Util'
+import { EditorControlFunctions } from '@etherealengine/editor/src/functions/EditorControlFunctions'
+import { SelectionState } from '@etherealengine/editor/src/services/SelectionServices'
+import { VisualScriptComponent } from '@etherealengine/engine'
+import { getState } from '@etherealengine/hyperflux'
+import { VisualScriptState } from '@etherealengine/visual-script'
+import { isEqual } from 'lodash'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import AutoSizer from 'react-virtualized-auto-sizer'
+import { ReactFlowProvider } from 'reactflow'
+import 'reactflow/dist/style.css'
+import Button from '../../../../../primitives/tailwind/Button'
+import { Flow } from '../flow'
+import './ReactFlowStyle.css'
+
+export const ActiveVisualScript = (props: { entity }) => {
+  const { entity } = props
+
+  // reactivity
+  const visualScriptState = getState(VisualScriptState)
+
+  // get underlying data, avoid hookstate error 202
+  const visualScriptComponent = getComponent(entity, VisualScriptComponent)
+
+  return (
+    <ReactFlowProvider>
+      <Flow
+        initialVisualScript={visualScriptComponent.visualScript}
+        examples={{}}
+        registry={visualScriptState.registries[visualScriptComponent.domain]}
+        onChangeVisualScript={(newVisualScript) => {
+          if (!newVisualScript) return
+          if (isEqual(visualScriptComponent.visualScript, newVisualScript)) return
+          commitProperty(VisualScriptComponent, 'visualScript')(newVisualScript)
+        }}
+      />
+    </ReactFlowProvider>
+  )
+}
+
+const VisualFlow = () => {
+  const entities = SelectionState.useSelectedEntities()
+  const entity = entities[entities.length - 1]
+  const validEntity = typeof entity === 'number' && hasComponent(entity, VisualScriptComponent)
+  const { t } = useTranslation()
+
+  const addVisualScript = () => EditorControlFunctions.addOrRemoveComponent([entity], VisualScriptComponent, true)
+
+  // ensure reactivity of adding new visualScript
+  useQuery([VisualScriptComponent])
+
+  return (
+    <AutoSizer>
+      {({ width, height }) => (
+        <div className="flex items-center justify-center" style={{ width, height }}>
+          {entities.length && !validEntity ? (
+            <Button
+              variant="outline"
+              onClick={() => {
+                addVisualScript()
+              }}
+            >
+              {t('editor:visualScript.panel.addVisualScript')}
+            </Button>
+          ) : (
+            <></>
+          )}
+          {validEntity && <ActiveVisualScript entity={entity} />}
+        </div>
+      )}
+    </AutoSizer>
+  )
+}
+
+export const VisualScriptPanel = () => {
+  return (
+    <>
+      <div className="flex h-full w-full flex-col">
+        <div className="flex h-full w-full flex-col">
+          <VisualFlow />
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default VisualScriptPanel
diff --git a/packages/ui/src/components/editor/panels/VisualScript/controls/index.tsx b/packages/ui/src/components/editor/panels/VisualScript/controls/index.tsx
new file mode 100644
index 0000000000..5cbbc9c285
--- /dev/null
+++ b/packages/ui/src/components/editor/panels/VisualScript/controls/index.tsx
@@ -0,0 +1,105 @@
+/*
+CPAL-1.0 License
+
+The contents of this file are subject to the Common Public Attribution License
+Version 1.0. (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
+The License is based on the Mozilla Public License Version 1.1, but Sections 14
+and 15 have been added to cover use of software over a computer network and 
+provide for limited attribution for the Original Developer. In addition, 
+Exhibit A has been modified to be consistent with Exhibit B.
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
+specific language governing rights and limitations under the License.
+
+The Original Code is Ethereal Engine.
+
+The Original Developer is the Initial Developer. The Initial Developer of the
+Original Code is the Ethereal Engine team.
+
+All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
+Ethereal Engine. All Rights Reserved.
+*/
+
+import React, { useState } from 'react'
+import { PiDownloadSimpleBold, PiPauseBold, PiPlayBold, PiTrashSimpleBold, PiUploadSimpleBold } from 'react-icons/pi'
+import { ControlButton, Controls } from 'reactflow'
+
+import { NodeSpecGenerator } from '@etherealengine/editor/src/components/visualScript/VisualScriptUIModule'
+import { GraphJSON, VariableJSON } from '@etherealengine/visual-script'
+import { ClearModal } from '../modals/clear'
+import { HelpModal } from '../modals/help'
+import { Examples, LoadModal } from '../modals/load'
+import { SaveModal } from '../modals/save'
+
+export type CustomControlsProps = {
+  playing: boolean
+  togglePlay: () => void
+  onSaveVisualScript: (value: GraphJSON) => void
+  setVisualScript: (value: GraphJSON) => void
+  variables: VariableJSON[]
+  examples: Examples
+  specGenerator: NodeSpecGenerator | undefined
+}
+
+export const CustomControls: React.FC<CustomControlsProps> = ({
+  playing,
+  togglePlay,
+  setVisualScript,
+  examples,
+  variables,
+  specGenerator
+}: CustomControlsProps) => {
+  const [loadModalOpen, setLoadModalOpen] = useState(false)
+  const [saveModalOpen, setSaveModalOpen] = useState(false)
+  const [helpModalOpen, setHelpModalOpen] = useState(false)
+  const [clearModalOpen, setClearModalOpen] = useState(false)
+  // load modal should have a drop area for json files
+  // save modal should provide a path or file browser to save, or just save automatically
+  return (
+    <>
+      <Controls>
+        {/*<ControlButton title="Help" onClick={() => setHelpModalOpen(true)}>
+          <FaQuestion />
+        </ControlButton>*/}
+        <ControlButton title="Load" onClick={() => setLoadModalOpen(true)}>
+          <PiUploadSimpleBold />
+        </ControlButton>
+        <ControlButton
+          title="Save"
+          onClick={() => {
+            setSaveModalOpen(true)
+          }}
+        >
+          <PiDownloadSimpleBold />
+        </ControlButton>
+        <ControlButton title="Clear" onClick={() => setClearModalOpen(true)}>
+          <PiTrashSimpleBold />
+        </ControlButton>
+        <ControlButton title="Run" onClick={togglePlay}>
+          {playing ? <PiPauseBold /> : <PiPlayBold />}
+        </ControlButton>
+      </Controls>
+      <LoadModal
+        open={loadModalOpen}
+        onClose={() => setLoadModalOpen(false)}
+        setVisualScript={setVisualScript}
+        examples={examples}
+      />
+      {specGenerator && (
+        <SaveModal
+          open={saveModalOpen}
+          variables={variables}
+          specGenerator={specGenerator}
+          onClose={() => setSaveModalOpen(false)}
+        />
+      )}
+      <HelpModal open={helpModalOpen} onClose={() => setHelpModalOpen(false)} />
+      <ClearModal open={clearModalOpen} onClose={() => setClearModalOpen(false)} />
+    </>
+  )
+}
+
+export default CustomControls
diff --git a/packages/ui/src/components/editor/panels/VisualScript/flow/index.tsx b/packages/ui/src/components/editor/panels/VisualScript/flow/index.tsx
new file mode 100644
index 0000000000..86b8a6b37c
--- /dev/null
+++ b/packages/ui/src/components/editor/panels/VisualScript/flow/index.tsx
@@ -0,0 +1,215 @@
+/*
+CPAL-1.0 License
+
+The contents of this file are subject to the Common Public Attribution License
+Version 1.0. (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
+The License is based on the Mozilla Public License Version 1.1, but Sections 14
+and 15 have been added to cover use of software over a computer network and 
+provide for limited attribution for the Original Developer. In addition, 
+Exhibit A has been modified to be consistent with Exhibit B.
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
+specific language governing rights and limitations under the License.
+
+The Original Code is Ethereal Engine.
+
+The Original Developer is the Initial Developer. The Initial Developer of the
+Original Code is the Ethereal Engine team.
+
+All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
+Ethereal Engine. All Rights Reserved.
+*/
+
+import React, { useEffect, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Background, BackgroundVariant, NodeToolbar, Panel, Position, ReactFlow } from 'reactflow'
+
+import {
+  useFlowHandlers,
+  useNodeSpecGenerator,
+  useVisualScriptFlow
+} from '@etherealengine/editor/src/components/visualScript/VisualScriptUIModule'
+import { useSelectionHandler } from '@etherealengine/editor/src/components/visualScript/hooks/useSelectionHandler'
+import { useTemplateHandler } from '@etherealengine/editor/src/components/visualScript/hooks/useTemplateHandler'
+import { useVariableHandler } from '@etherealengine/editor/src/components/visualScript/hooks/useVariableHandler'
+import { useVisualScriptRunner } from '@etherealengine/engine/src/visualscript/systems/useVisualScriptRunner'
+import { useHookstate } from '@etherealengine/hyperflux'
+import { GraphJSON, IRegistry } from '@etherealengine/visual-script'
+import Button from '../../../../../primitives/tailwind/Button'
+import CustomControls from '../controls'
+import { Examples } from '../modals/load'
+import { NodePicker } from '../node/picker'
+import SidePanel from '../sidePanel'
+
+type FlowProps = {
+  initialVisualScript: GraphJSON
+  examples: Examples
+  registry: IRegistry
+  onChangeVisualScript: (newVisualScript: GraphJSON) => void
+}
+
+export const Flow: React.FC<FlowProps> = ({
+  initialVisualScript: visualScript,
+  examples,
+  registry,
+  onChangeVisualScript
+}) => {
+  const specGenerator = useNodeSpecGenerator(registry)
+  const flowRef = useRef(null)
+  const dragging = useHookstate(false)
+  const mouseOver = useHookstate(false)
+  const { t } = useTranslation()
+
+  const {
+    nodes,
+    edges,
+    variables,
+    setVariables,
+    onNodesChange,
+    onEdgesChange,
+    visualScriptJson,
+    setVisualScriptJson,
+    deleteNodes,
+    nodeTypes
+  } = useVisualScriptFlow({
+    initialVisualScriptJson: visualScript,
+    specGenerator
+  })
+
+  const {
+    onConnect,
+    handleStartConnect,
+    handleStopConnect,
+    handlePaneClick,
+    handlePaneContextMenu,
+    nodePickerVisibility,
+    handleAddNode,
+    lastConnectStart,
+    closeNodePicker,
+    nodePickFilters
+  } = useFlowHandlers({
+    nodes,
+    onEdgesChange,
+    onNodesChange,
+    specGenerator
+  })
+
+  const { handleAddVariable, handleEditVariable, handleDeleteVariable } = useVariableHandler({
+    variables,
+    setVariables
+  })
+
+  const { togglePlay, playing } = useVisualScriptRunner({
+    visualScriptJson,
+    registry
+  })
+
+  const { selectedNodes, selectedEdges, onSelectionChange, copyNodes, pasteNodes } = useSelectionHandler({
+    nodes,
+    onNodesChange,
+    onEdgesChange
+  })
+
+  const { handleAddTemplate, handleEditTemplate, handleDeleteTemplate, handleApplyTemplate } = useTemplateHandler({
+    selectedNodes,
+    selectedEdges,
+    pasteNodes,
+    onNodesChange
+  })
+
+  useEffect(() => {
+    if (dragging.value || !mouseOver.value) return
+    onChangeVisualScript(visualScriptJson ?? visualScript)
+  }, [visualScriptJson]) // change in node position triggers reactor
+
+  return (
+    <ReactFlow
+      ref={flowRef}
+      nodeTypes={nodeTypes}
+      nodes={nodes}
+      edges={edges}
+      onNodeDragStart={() => dragging.set(true)}
+      onNodeDragStop={() => dragging.set(false)}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onConnect={onConnect}
+      onNodesDelete={deleteNodes}
+      onConnectStart={handleStartConnect}
+      onConnectEnd={handleStopConnect}
+      onPaneMouseEnter={() => mouseOver.set(true)}
+      onPaneMouseLeave={() => mouseOver.set(false)}
+      fitView
+      fitViewOptions={{ maxZoom: 1 }}
+      onPaneClick={handlePaneClick}
+      onPaneContextMenu={handlePaneContextMenu}
+      onSelectionChange={onSelectionChange}
+      multiSelectionKeyCode={'Shift'}
+      deleteKeyCode={'Backspace'}
+    >
+      <Panel position="top-left" className="w-[33%]">
+        <SidePanel
+          flowref={flowRef}
+          examples={examples}
+          variables={variables}
+          onNodesChange={onNodesChange}
+          handleAddTemplate={handleAddTemplate}
+          handleApplyTemplate={handleApplyTemplate}
+          handleDeleteTemplate={handleDeleteTemplate}
+          handleEditTemplate={handleEditTemplate}
+          handleAddVariable={handleAddVariable}
+          handleEditVariable={handleEditVariable}
+          handleDeleteVariable={handleDeleteVariable}
+        />
+      </Panel>
+
+      <CustomControls
+        playing={playing}
+        togglePlay={togglePlay}
+        onSaveVisualScript={onChangeVisualScript}
+        setVisualScript={setVisualScriptJson}
+        examples={examples}
+        variables={variables}
+        specGenerator={specGenerator}
+      />
+
+      <Background
+        id="1"
+        variant={BackgroundVariant.Dots}
+        gap={10}
+        size={3}
+        color="#282828"
+        style={{ backgroundColor: '#111113' }}
+      />
+      <Background id="2" variant={BackgroundVariant.Dots} gap={100} size={6} color="#282828" />
+
+      {nodePickerVisibility && (
+        <NodePicker
+          flowRef={flowRef}
+          position={nodePickerVisibility}
+          filters={nodePickFilters}
+          onPickNode={handleAddNode}
+          onClose={closeNodePicker}
+          specJSON={specGenerator?.getAllNodeSpecs()}
+        />
+      )}
+
+      <NodeToolbar
+        nodeId={selectedNodes.map((node) => node.id)}
+        isVisible={selectedNodes.length > 1}
+        position={Position.Top}
+      >
+        <Button
+          variant="outline"
+          onClick={() => {
+            handleAddTemplate()
+          }}
+        >
+          {t('editor:visualScript.editorPanel.makeTemplate')}
+        </Button>
+      </NodeToolbar>
+    </ReactFlow>
+  )
+}
diff --git a/packages/ui/src/components/editor/panels/VisualScript/index.tsx b/packages/ui/src/components/editor/panels/VisualScript/index.tsx
index 13b59064fa..e28dded131 100644
--- a/packages/ui/src/components/editor/panels/VisualScript/index.tsx
+++ b/packages/ui/src/components/editor/panels/VisualScript/index.tsx
@@ -28,6 +28,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { PanelDragContainer, PanelTitle } from '../../layout/Panel'
+import VisualScriptPanel from './container'
 
 export const VisualScriptPanelTitle = () => {
   const { t } = useTranslation()
@@ -49,5 +50,5 @@ export const VisualScriptPanelTab: TabData = {
   id: 'visualScriptPanel',
   closable: true,
   title: <VisualScriptPanelTitle />,
-  content: <></>
+  content: <VisualScriptPanel />
 }
diff --git a/packages/ui/src/components/editor/panels/VisualScript/modals/clear/index.tsx b/packages/ui/src/components/editor/panels/VisualScript/modals/clear/index.tsx
new file mode 100644
index 0000000000..bfce9131bb
--- /dev/null
+++ b/packages/ui/src/components/editor/panels/VisualScript/modals/clear/index.tsx
@@ -0,0 +1,63 @@
+/*
+CPAL-1.0 License
+
+The contents of this file are subject to the Common Public Attribution License
+Version 1.0. (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
+The License is based on the Mozilla Public License Version 1.1, but Sections 14
+and 15 have been added to cover use of software over a computer network and 
+provide for limited attribution for the Original Developer. In addition, 
+Exhibit A has been modified to be consistent with Exhibit B.
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
+specific language governing rights and limitations under the License.
+
+The Original Code is Ethereal Engine.
+
+The Original Developer is the Initial Developer. The Initial Developer of the
+Original Code is the Ethereal Engine team.
+
+All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
+Ethereal Engine. All Rights Reserved.
+*/
+
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { useReactFlow } from 'reactflow'
+import { Modal } from '..'
+
+export type ClearModalProps = {
+  open?: boolean
+  onClose: () => void
+}
+
+export const ClearModal: React.FC<ClearModalProps> = ({ open = false, onClose }) => {
+  const instance = useReactFlow()
+  const { t } = useTranslation()
+
+  const handleClear = () => {
+    instance.setNodes([])
+    instance.setEdges([])
+    // TODO better way to call fit vew after edges render
+    setTimeout(() => {
+      instance.fitView()
+    }, 100)
+    onClose()
+  }
+
+  return (
+    <Modal
+      title={t('editor:visualScript.modal.clear.title')}
+      actions={[
+        { label: t('editor:visualScript.modal.buttons.cancel'), onClick: onClose },
+        { label: t('editor:visualScript.modal.buttons.clear'), onClick: handleClear }
+      ]}
+      open={open}
+      onClose={onClose}
+    >
+      <p>{t('editor:visualScript.modal.clear.confirm')}</p>
+    </Modal>
+  )
+}
diff --git a/packages/ui/src/components/editor/properties/group/index.stories.tsx b/packages/ui/src/components/editor/panels/VisualScript/modals/help/index.tsx
similarity index 57%
rename from packages/ui/src/components/editor/properties/group/index.stories.tsx
rename to packages/ui/src/components/editor/panels/VisualScript/modals/help/index.tsx
index 320593ff22..693bdec282 100644
--- a/packages/ui/src/components/editor/properties/group/index.stories.tsx
+++ b/packages/ui/src/components/editor/panels/VisualScript/modals/help/index.tsx
@@ -23,22 +23,28 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
-import Component from './index'
-
-const argTypes = {}
-
-export default {
-  title: 'Editor/Properties/group',
-  component: Component,
-  parameters: {
-    componentSubtitle: 'PropertyGroup',
-    jest: 'propertyGroup.test.tsx',
-    design: {
-      type: 'figma',
-      url: ''
-    }
-  },
-  argTypes
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { Modal } from '..'
+
+export type HelpModalProps = {
+  open?: boolean
+  onClose: () => void
 }
 
-export const Default = { args: Component.defaultProps }
+export const HelpModal: React.FC<HelpModalProps> = ({ open = false, onClose }) => {
+  const { t } = useTranslation()
+
+  return (
+    <Modal
+      title={t('editor:visualScript.modal.help.title')}
+      actions={[{ label: t('editor:visualScript.modal.buttons.close'), onClick: onClose }]}
+      open={open}
+      onClose={onClose}
+    >
+      <p style={{ marginBottom: '0.5rem' }}>{t('editor:visualScript.modal.help.addNodeHelp')}</p>
+      <p style={{ marginBottom: '0.5rem' }}>{t('editor:visualScript.modal.help.addConnectionHelp')}</p>
+      <p style={{ marginBottom: '0.5rem' }}>{t('editor:visualScript.modal.help.deleteNodeHelp')}</p>
+    </Modal>
+  )
+}
diff --git a/packages/ui/src/components/editor/panels/VisualScript/modals/index.tsx b/packages/ui/src/components/editor/panels/VisualScript/modals/index.tsx
new file mode 100644
index 0000000000..2c339d0a4c
--- /dev/null
+++ b/packages/ui/src/components/editor/panels/VisualScript/modals/index.tsx
@@ -0,0 +1,72 @@
+/*
+CPAL-1.0 License
+
+The contents of this file are subject to the Common Public Attribution License
+Version 1.0. (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
+The License is based on the Mozilla Public License Version 1.1, but Sections 14
+and 15 have been added to cover use of software over a computer network and 
+provide for limited attribution for the Original Developer. In addition, 
+Exhibit A has been modified to be consistent with Exhibit B.
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
+specific language governing rights and limitations under the License.
+
+The Original Code is Ethereal Engine.
+
+The Original Developer is the Initial Developer. The Initial Developer of the
+Original Code is the Ethereal Engine team.
+
+All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
+Ethereal Engine. All Rights Reserved.
+*/
+
+import { useOnPressKey } from '@etherealengine/editor/src/components/visualScript/VisualScriptUIModule'
+import React, { PropsWithChildren } from 'react'
+import { twMerge } from 'tailwind-merge'
+
+export type ModalAction = {
+  label: string
+  onClick: () => void
+}
+
+export type ModalProps = {
+  open?: boolean
+  onClose: () => void
+  title: string
+  actions: ModalAction[]
+}
+
+export const Modal: React.FC<PropsWithChildren<ModalProps>> = ({ open = false, onClose, title, children, actions }) => {
+  useOnPressKey('Escape', onClose)
+
+  if (open === false) return null
+
+  return (
+    <>
+      <div className="fixed inset-0 z-20 h-full w-full overflow-y-auto bg-transparent" onClick={onClose}></div>
+      <div className="border-borderStyle relative top-[2px] z-20 mx-auto w-96 rounded-md border bg-theme-primary text-sm text-gray-800 shadow-[0_2px_4px_var(--background2)]">
+        <div className="border-b border-gray-600 p-3">
+          <h2 className="text-center text-lg font-bold text-white">{title}</h2>
+        </div>
+        <div className="p-3 text-white">{children}</div>
+        <div className="border-grey-600 flex gap-3 border-t p-3">
+          {actions.map((action, ix) => (
+            <button
+              key={ix}
+              className={twMerge(
+                'w-full cursor-pointer p-2 text-white',
+                ix === actions.length - 1 ? 'bg-zinc-700' : 'bg-gray-400'
+              )}
+              onClick={action.onClick}
+            >
+              {action.label}
+            </button>
+          ))}
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/packages/ui/src/components/editor/panels/VisualScript/modals/load/index.tsx b/packages/ui/src/components/editor/panels/VisualScript/modals/load/index.tsx
new file mode 100644
index 0000000000..6a2f0d6452
--- /dev/null
+++ b/packages/ui/src/components/editor/panels/VisualScript/modals/load/index.tsx
@@ -0,0 +1,118 @@
+/*
+CPAL-1.0 License
+
+The contents of this file are subject to the Common Public Attribution License
+Version 1.0. (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
+The License is based on the Mozilla Public License Version 1.1, but Sections 14
+and 15 have been added to cover use of software over a computer network and 
+provide for limited attribution for the Original Developer. In addition, 
+Exhibit A has been modified to be consistent with Exhibit B.
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
+specific language governing rights and limitations under the License.
+
+The Original Code is Ethereal Engine.
+
+The Original Developer is the Initial Developer. The Initial Developer of the
+Original Code is the Ethereal Engine team.
+
+All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
+Ethereal Engine. All Rights Reserved.
+*/
+
+import React, { useCallback, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useReactFlow } from 'reactflow'
+
+import { GraphJSON } from '@etherealengine/visual-script'
+import { Modal } from '..'
+import SelectInput from '../../../../input/Select'
+
+export type Examples = {
+  [key: string]: GraphJSON
+}
+
+export type LoadModalProps = {
+  open?: boolean
+  onClose: () => void
+  setVisualScript: (value: GraphJSON) => void
+  examples: Examples
+}
+
+export const LoadModal: React.FC<LoadModalProps> = ({ open = false, onClose, setVisualScript, examples }) => {
+  const [value, setValue] = useState<string>()
+  const [selected, setSelected] = useState('')
+
+  const instance = useReactFlow()
+  const { t } = useTranslation()
+
+  useEffect(() => {
+    if (selected) {
+      setValue(JSON.stringify(examples[selected], null, 2))
+    }
+  }, [selected, examples])
+
+  const handleLoad = useCallback(() => {
+    let visualScript
+    if (value !== undefined) {
+      visualScript = JSON.parse(value) as GraphJSON
+    } else if (selected !== '') {
+      visualScript = examples[selected]
+    }
+
+    if (visualScript === undefined) return
+
+    setVisualScript(visualScript)
+
+    // TODO better way to call fit vew after edges render
+    setTimeout(() => {
+      instance.fitView()
+    }, 100)
+
+    handleClose()
+  }, [setVisualScript, value, instance])
+
+  const handleClose = () => {
+    setValue(undefined)
+    setSelected('')
+    onClose()
+  }
+
+  return (
+    <Modal
+      title={t('editor:visualScript.modal.load.title')}
+      actions={[
+        { label: t('editor:visualScript.modal.buttons.cancel'), onClick: handleClose },
+        { label: t('editor:visualScript.modal.buttons.load'), onClick: handleLoad }
+      ]}
+      open={open}
+      onClose={onClose}
+    >
+      <textarea
+        autoFocus
+        className="m-0 h-32 w-full border border-neutral-700 bg-neutral-800 p-2 text-neutral-100"
+        placeholder="Paste JSON here"
+        value={value}
+        onChange={(e) => setValue(e.currentTarget.value)}
+      ></textarea>
+      <div className="p-4 text-center text-neutral-100">or</div>
+      <div className="flex items-center justify-center">
+        <SelectInput
+          className="w-full"
+          options={Object.keys(examples).map((key) => {
+            return {
+              label: key,
+              value: key
+            }
+          })}
+          value={selected}
+          onChange={(val) => setSelected(val as string)}
+          placeholder={t('editor:visualScript.modal.load.examples')}
+        />
+      </div>
+    </Modal>
+  )
+}
diff --git a/packages/ui/src/components/editor/panels/VisualScript/modals/save/index.tsx b/packages/ui/src/components/editor/panels/VisualScript/modals/save/index.tsx
new file mode 100644
index 0000000000..3025722415
--- /dev/null
+++ b/packages/ui/src/components/editor/panels/VisualScript/modals/save/index.tsx
@@ -0,0 +1,89 @@
+/*
+CPAL-1.0 License
+
+The contents of this file are subject to the Common Public Attribution License
+Version 1.0. (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
+The License is based on the Mozilla Public License Version 1.1, but Sections 14
+and 15 have been added to cover use of software over a computer network and 
+provide for limited attribution for the Original Developer. In addition, 
+Exhibit A has been modified to be consistent with Exhibit B.
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
+specific language governing rights and limitations under the License.
+
+The Original Code is Ethereal Engine.
+
+The Original Developer is the Initial Developer. The Initial Developer of the
+Original Code is the Ethereal Engine team.
+
+All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
+Ethereal Engine. All Rights Reserved.
+*/
+
+import React, { useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useEdges, useNodes } from 'reactflow'
+
+import { VariableJSON } from '@etherealengine/visual-script'
+
+import {
+  NodeSpecGenerator,
+  flowToVisual
+} from '@etherealengine/editor/src/components/visualScript/VisualScriptUIModule'
+import { Modal } from '..'
+
+export type SaveModalProps = {
+  open?: boolean
+  variables: VariableJSON[]
+  onClose: () => void
+  specGenerator: NodeSpecGenerator
+}
+
+export const SaveModal: React.FC<SaveModalProps> = ({ open = false, variables, onClose, specGenerator }) => {
+  const ref = useRef<HTMLTextAreaElement>(null)
+  const [copied, setCopied] = useState(false)
+  const { t } = useTranslation()
+
+  const edges = useEdges()
+  const nodes = useNodes()
+
+  const flow = useMemo(() => flowToVisual(nodes, edges, variables, specGenerator), [nodes, edges, specGenerator])
+
+  const jsonString = JSON.stringify(flow, null, 2)
+
+  const handleCopy = () => {
+    ref.current?.select()
+    document.execCommand('copy')
+    ref.current?.blur()
+    setCopied(true)
+    setInterval(() => {
+      setCopied(false)
+    }, 1000)
+  }
+
+  return (
+    <Modal
+      title={t('editor:visualScript.modal.save')}
+      actions={[
+        { label: t('editor:visualScript.modal.buttons.cancel'), onClick: onClose },
+        {
+          label: copied
+            ? t('editor:visualScript.modal.buttons.copy.done')
+            : t('editor:visualScript.modal.buttons.copy.begin'),
+          onClick: handleCopy
+        }
+      ]}
+      open={open}
+      onClose={onClose}
+    >
+      <textarea
+        ref={ref}
+        className="m-0 h-32 w-full border border-neutral-700 bg-neutral-800 p-2 text-neutral-100"
+        defaultValue={jsonString}
+      ></textarea>
+    </Modal>
+  )
+}
diff --git a/packages/ui/src/components/editor/panels/VisualScript/node/index.tsx b/packages/ui/src/components/editor/panels/VisualScript/node/index.tsx
new file mode 100644
index 0000000000..e4c9863331
--- /dev/null
+++ b/packages/ui/src/components/editor/panels/VisualScript/node/index.tsx
@@ -0,0 +1,253 @@
+/*
+CPAL-1.0 License
+
+The contents of this file are subject to the Common Public Attribution License
+Version 1.0. (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
+The License is based on the Mozilla Public License Version 1.1, but Sections 14
+and 15 have been added to cover use of software over a computer network and 
+provide for limited attribution for the Original Developer. In addition, 
+Exhibit A has been modified to be consistent with Exhibit B.
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
+specific language governing rights and limitations under the License.
+
+The Original Code is Ethereal Engine.
+
+The Original Developer is the Initial Developer. The Initial Developer of the
+Original Code is the Ethereal Engine team.
+
+All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
+Ethereal Engine. All Rights Reserved.
+*/
+
+import React from 'react'
+import { FaCircleMinus, FaCirclePlus } from 'react-icons/fa6'
+import { NodeProps as FlowNodeProps, useEdges } from 'reactflow'
+
+import {
+  NodeSpecGenerator,
+  isHandleConnected,
+  useChangeNode
+} from '@etherealengine/editor/src/components/visualScript/VisualScriptUIModule'
+import { useModifyNodeSocket } from '@etherealengine/editor/src/components/visualScript/hooks/useModifyNodeSocket'
+import { NodeSpecJSON } from '@etherealengine/visual-script'
+import { MdKeyboardArrowDown, MdKeyboardArrowRight } from 'react-icons/md'
+import { twMerge } from 'tailwind-merge'
+import { categoryColorMap, colors } from '../util/colors'
+import InputSocket from './socket/input'
+import OutputSocket from './socket/output'
+
+type NodeUIProps = FlowNodeProps & {
+  spec: NodeSpecJSON
+  specGenerator: NodeSpecGenerator
+}
+
+const getPairs = <T, U>(arr1: T[], arr2: U[]) => {
+  const max = Math.max(arr1.length, arr2.length)
+  const pairs: any[] = []
+  for (let i = 0; i < max; i++) {
+    const pair: [T | undefined, U | undefined] = [arr1[i], arr2[i]]
+    pairs.push(pair)
+  }
+  return pairs
+}
+
+const calculatePosition = (index, total) => {
+  if (total === 1) return { x: 0 }
+  let x = 0
+  const y = (index / total) * 100
+  if (total < 2) {
+    return { x: x, y: (index + 1 / total) * 100 }
+  }
+  if (total < 7) {
+    x =
+      (total % 2
+        ? index > total / 2
+          ? index - Math.floor(total / 2)
+          : Math.floor(total / 2) - index
+        : index > (total - 1) / 2
+        ? index + 1 - total / 2
+        : total / 2 - index) *
+      2 *
+      Math.PI
+    return { x: x, y: y }
+  }
+  // whem we have more than 7 inputs or outputs the rest of the handle fall on a flat plane so we only need to calculate for the top and bottom 3 handles
+  if (index <= 3) x = Math.max((3 - index) * 6, 1)
+  if (index === 0) x = 24
+  if (total - 1 - index <= 3) x = Math.max((3 - (total - 1 - index)) * 2 * Math.PI, 1)
+  if (index === total - 1) x = 24
+  return { x: x, y: y }
+}
+
+const calculateRelativePosition = (index, type, outputTotal, inputTotal) => {
+  return type === 'output'
+    ? outputTotal > inputTotal
+      ? index
+      : Math.floor(((index + 1) * inputTotal) / (outputTotal + 1))
+    : inputTotal > outputTotal
+    ? index
+    : Math.floor(((index + 1) * outputTotal) / (inputTotal + 1))
+}
+
+export const Node: React.FC<NodeUIProps> = ({ id, data, spec, selected, specGenerator }: NodeUIProps) => {
+  const [collapsed, setCollapsed] = React.useState(false)
+  const edges = useEdges()
+  const isVariableNode = spec.configuration.find(
+    (config) => config.name === 'variableName' && config.valueType === 'string'
+  )
+  const handleChange = useChangeNode(id, isVariableNode !== undefined)
+  const canAddInputs = spec.configuration.find((config) => config.name === 'numInputs' && config.valueType === 'number')
+  const canAddOutputs = spec.configuration.find(
+    (config) => config.name === 'numOutputs' && config.valueType === 'number'
+  )
+  const canAddBoth = spec.configuration.find((config) => config.name === 'numCases' && config.valueType === 'number')
+  let handleAddNodeSocket
+  let handleDecreaseNodeSocket
+  if (canAddInputs) {
+    handleAddNodeSocket = useModifyNodeSocket(id, 'inputs', 'increase', (canAddInputs.defaultValue as number) ?? 1)
+    handleDecreaseNodeSocket = useModifyNodeSocket(id, 'inputs', 'decrease', (canAddInputs.defaultValue as number) ?? 1)
+  } else if (canAddOutputs) {
+    handleAddNodeSocket = useModifyNodeSocket(id, 'outputs', 'increase', (canAddOutputs.defaultValue as number) ?? 1)
+    handleDecreaseNodeSocket = useModifyNodeSocket(
+      id,
+      'outputs',
+      'decrease',
+      (canAddOutputs.defaultValue as number) ?? 1
+    )
+  } else if (canAddBoth) {
+    handleAddNodeSocket = useModifyNodeSocket(id, 'both', 'increase', (canAddBoth.defaultValue as number) ?? 1)
+    handleDecreaseNodeSocket = useModifyNodeSocket(id, 'both', 'decrease', (canAddBoth.defaultValue as number) ?? 1)
+  }
+
+  const pairs = getPairs(spec.inputs, spec.outputs)
+  const label = spec.label === '' ? data.label : spec.label
+
+  let colorName = categoryColorMap[spec.category]
+  if (colorName === undefined) {
+    colorName = 'red'
+  }
+  const [backgroundColor, borderColor, textColor] = colors[colorName]
+  const collapsedHandlePositions = [] as any[]
+  for (let i = 0; i < pairs.length; i++) {
+    collapsedHandlePositions.push(calculatePosition(i, pairs.length))
+  }
+
+  const collapsedStyle = collapsed
+    ? { height: `${1.25 * pairs.length}rem`, borderRadius: `${0.625 * pairs.length}rem` }
+    : {}
+  return (
+    <div
+      className={twMerge(
+        'min-w-[120px] cursor-pointer bg-zinc-900 text-sm text-neutral-400',
+        selected ? 'border-2 border-gray-600 ' : ''
+      )}
+      style={collapsedStyle as any}
+    >
+      <div
+        className={twMerge(
+          'flex-between flex items-center gap-3 bg-zinc-900 px-2 py-1 align-middle text-white',
+          collapsed ? `` : 'rounded-tl rounded-tr',
+          backgroundColor,
+          textColor
+        )}
+        style={collapsedStyle as any}
+      >
+        {collapsed &&
+          pairs.map(
+            ([input, output], ix) =>
+              input && (
+                <InputSocket
+                  {...input}
+                  specGenerator={specGenerator}
+                  value={data.values?.[input.name] ?? input.defaultValue}
+                  onChange={handleChange}
+                  connected={isHandleConnected(edges, id, input.name, 'target')}
+                  collapsed={collapsed}
+                  offset={
+                    collapsedHandlePositions[
+                      calculateRelativePosition(ix, 'input', spec.outputs.length, spec.inputs.length)
+                    ]
+                  }
+                />
+              )
+          )}
+        {collapsed ? (
+          <MdKeyboardArrowRight onClick={() => setCollapsed(false)} />
+        ) : (
+          <MdKeyboardArrowDown onClick={() => setCollapsed(true)} />
+        )}
+        {label}
+
+        {collapsed &&
+          pairs.map(
+            ([input, output], ix) =>
+              output && (
+                <OutputSocket
+                  {...output}
+                  specGenerator={specGenerator}
+                  connected={isHandleConnected(edges, id, output.name, 'source')}
+                  collapsed={collapsed}
+                  offset={
+                    collapsedHandlePositions[
+                      calculateRelativePosition(ix, 'output', spec.outputs.length, spec.inputs.length)
+                    ]
+                  }
+                />
+              )
+          )}
+      </div>
+      {!collapsed && (
+        <div className={twMerge('flex-col', 'border-grey-800 flex gap-4 p-1.5', borderColor)}>
+          {pairs.map(([input, output], ix) => (
+            <div key={ix} className="node-container-row flex flex-row justify-between gap-0.5 p-0">
+              {input && (
+                <InputSocket
+                  {...input}
+                  specGenerator={specGenerator}
+                  value={data.values?.[input.name] ?? input.defaultValue}
+                  onChange={handleChange}
+                  connected={isHandleConnected(edges, id, input.name, 'target')}
+                  collapsed={collapsed}
+                />
+              )}
+              {output && (
+                <OutputSocket
+                  {...output}
+                  specGenerator={specGenerator}
+                  connected={isHandleConnected(edges, id, output.name, 'source')}
+                  collapsed={collapsed}
+                />
+              )}
+            </div>
+          ))}
+          <div className="flex flex-col self-center p-0.5">
+            {handleAddNodeSocket && (
+              <button
+                style={{
+                  backgroundColor: 'transparent',
+                  cursor: 'pointer', // Add this to make the button cursor change to a pointer on hover
+                  color: 'white'
+                }}
+                onClick={handleAddNodeSocket}
+              >
+                <FaCirclePlus color="#ffffff" />
+                {' Add socket'}
+              </button>
+            )}
+
+            {handleDecreaseNodeSocket && (
+              <button className="cursor-pointer bg-transparent text-white" onClick={handleDecreaseNodeSocket}>
+                <FaCircleMinus color="#ffffff" />
+                {'Remove socket'}
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/packages/ui/src/components/editor/panels/VisualScript/node/picker/index.tsx b/packages/ui/src/components/editor/panels/VisualScript/node/picker/index.tsx
new file mode 100644
index 0000000000..dcd32e01dd
--- /dev/null
+++ b/packages/ui/src/components/editor/panels/VisualScript/node/picker/index.tsx
@@ -0,0 +1,189 @@
+/*
+CPAL-1.0 License
+
+The contents of this file are subject to the Common Public Attribution License
+Version 1.0. (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
+The License is based on the Mozilla Public License Version 1.1, but Sections 14
+and 15 have been added to cover use of software over a computer network and 
+provide for limited attribution for the Original Developer. In addition, 
+Exhibit A has been modified to be consistent with Exhibit B.
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
+specific language governing rights and limitations under the License.
+
+The Original Code is Ethereal Engine.
+
+The Original Developer is the Initial Developer. The Initial Developer of the
+Original Code is the Ethereal Engine team.
+
+All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
+Ethereal Engine. All Rights Reserved.
+*/
+
+import { useOnPressKey } from '@etherealengine/editor/src/components/visualScript/VisualScriptUIModule'
+import { NodeSpecJSON } from '@etherealengine/visual-script'
+import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { GoDotFill } from 'react-icons/go'
+import { HiMagnifyingGlass, HiOutlineChevronDown, HiOutlineChevronRight } from 'react-icons/hi2'
+import { XYPosition, useReactFlow } from 'reactflow'
+import { twMerge } from 'tailwind-merge'
+import Input from '../../../../../../primitives/tailwind/Input'
+import { categoryColorMap, colors } from '../../util/colors'
+
+const createPickerNodes = (tree, onPickNode, position, instance) => {
+  if (tree?.type !== undefined && typeof tree?.type === 'string') return null
+  return Object.entries(tree)
+    .filter(([key, value]) => key !== 'group')
+    .map(([key, value]) => {
+      return (
+        <PickerItem
+          key={key}
+          label={key}
+          node={value}
+          onPickNode={onPickNode}
+          position={position}
+          instance={instance}
+          color={categoryColorMap[key] ?? categoryColorMap.None}
+        />
+      )
+    })
+}
+
+const PickerItem = ({ label, node, onPickNode, position, instance, color }) => {
+  const [isExpanded, setIsExpanded] = useState(false)
+  const [childNodes, setChildNodes] = useState(null)
+  const [isLeafNode, setIsLeafNode] = useState(false)
+  useEffect(() => {
+    if (!isExpanded && !childNodes) {
+      const children = createPickerNodes(node, onPickNode, position, instance) as any
+      setChildNodes(children)
+      if (children === null) {
+        setIsLeafNode(true)
+      }
+    }
+  }, [isExpanded])
+
+  const handleNodeClick = () => {
+    if (isLeafNode) {
+      onPickNode(node.type, instance.screenToFlowPosition(position))
+    }
+    setIsExpanded(!isExpanded)
+  }
+  const finalColor = (colors[color][0] as string).slice(2)
+
+  return (
+    <>
+      <div onClick={handleNodeClick} className="flex w-full items-center justify-between py-1 pl-2">
+        <span className="flex flex-row items-center gap-3 text-center text-white">
+          <GoDotFill className={`text${finalColor}`} />
+          {label}
+        </span>
+        {node && !isLeafNode && (
+          <button className="bg-transparent pr-2 text-white">
+            {isExpanded ? <HiOutlineChevronDown /> : <HiOutlineChevronRight />}
+          </button>
+        )}
+      </div>
+      {isExpanded && childNodes && <div className="pl-4">{childNodes}</div>}
+    </>
+  )
+}
+
+const NodePickerNode = ({ nodes, onPickNode, position, instance }) => {
+  const nodeTree = {}
+  nodes.forEach((node) => {
+    const parts = node.type.split('/')
+    let current = nodeTree
+    parts.forEach((part) => {
+      if (!current[part]) {
+        current[part] = {}
+      }
+      current = current[part]
+    })
+    current['type'] = node.type
+  })
+
+  console.log('node tree', nodeTree)
+
+  const initialTreeNodes = createPickerNodes(nodeTree, onPickNode, position, instance)
+
+  return <div className="flex h-48 flex-col overflow-x-hidden overflow-y-scroll">{initialTreeNodes}</div>
+}
+
+export type NodePickerFilters = {
+  handleType: 'source' | 'target'
+  valueType: string
+}
+
+type NodePickerProps = {
+  flowRef: React.MutableRefObject<HTMLElement | null>
+  position: XYPosition
+  filters?: NodePickerFilters
+  onPickNode: (type: string, position: XYPosition) => void
+  onClose: () => void
+  specJSON: NodeSpecJSON[] | undefined
+}
+
+const pickerStyle = {
+  width: '240px',
+  height: '280px'
+}
+
+export const NodePicker: React.FC<NodePickerProps> = ({
+  flowRef,
+  position,
+  onPickNode,
+  onClose,
+  filters,
+  specJSON
+}: NodePickerProps) => {
+  const [search, setSearch] = useState('')
+
+  const instance = useReactFlow()
+  useOnPressKey('Escape', onClose)
+  const { t } = useTranslation()
+
+  if (!specJSON) return null
+  let filtered = specJSON
+  if (filters !== undefined) {
+    filtered = filtered?.filter((node) => {
+      const sockets = filters?.handleType === 'source' ? node.outputs : node.inputs
+      return sockets.some((socket) => socket.valueType === filters?.valueType)
+    })
+  }
+
+  filtered =
+    filtered?.filter((node) => {
+      const term = search.toLowerCase()
+      return node.type.toLowerCase().includes(term)
+    }) || []
+
+  const paneBounds = flowRef.current!.getBoundingClientRect()
+  const width = parseInt(pickerStyle.width)
+  const height = parseInt(pickerStyle.height)
+  position.x = position.x + width > paneBounds.width ? (position.x -= width) : position.x
+  position.y = position.y + height > paneBounds.height ? (position.y -= height) : position.y
+
+  return (
+    <div
+      className={twMerge('absolute z-10 rounded border-zinc-800 bg-neutral-900 text-sm')}
+      style={{ ...{ top: position.y, left: position.x, ...pickerStyle } }}
+    >
+      <div className="flex justify-center p-2 text-white">{t('editor:visualScript.picker.title')}</div>
+      <Input
+        placeholder={'Type to filter'}
+        value={search}
+        onChange={(event) => {
+          setSearch(event.target.value)
+        }}
+        className="rounded bg-theme-primary px-1.5 text-[#A3A3A3]"
+        startComponent={<HiMagnifyingGlass className="text-white" />}
+      />
+      <NodePickerNode nodes={filtered} onPickNode={onPickNode} position={position} instance={instance} />
+    </div>
+  )
+}
diff --git a/packages/ui/src/components/editor/panels/VisualScript/node/socket/input/index.tsx b/packages/ui/src/components/editor/panels/VisualScript/node/socket/input/index.tsx
new file mode 100644
index 0000000000..9e39d5aec0
--- /dev/null
+++ b/packages/ui/src/components/editor/panels/VisualScript/node/socket/input/index.tsx
@@ -0,0 +1,179 @@
+/*
+CPAL-1.0 License
+
+The contents of this file are subject to the Common Public Attribution License
+Version 1.0. (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
+The License is based on the Mozilla Public License Version 1.1, but Sections 14
+and 15 have been added to cover use of software over a computer network and 
+provide for limited attribution for the Original Developer. In addition, 
+Exhibit A has been modified to be consistent with Exhibit B.
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
+specific language governing rights and limitations under the License.
+
+The Original Code is Ethereal Engine.
+
+The Original Developer is the Initial Developer. The Initial Developer of the
+Original Code is the Ethereal Engine team.
+
+All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
+Ethereal Engine. All Rights Reserved.
+*/
+
+import React from 'react'
+import { FaCaretRight } from 'react-icons/fa6'
+import { Connection, Handle, Position, useReactFlow } from 'reactflow'
+
+import {
+  NodeSpecGenerator,
+  isValidConnection
+} from '@etherealengine/editor/src/components/visualScript/VisualScriptUIModule'
+import { InputSocketSpecJSON } from '@etherealengine/visual-script'
+import { twMerge } from 'tailwind-merge'
+import { AutoSizeInput } from '../../../autoSizeInput'
+import { colors, valueTypeColorMap } from '../../../util/colors'
+
+export type InputSocketProps = {
+  connected: boolean
+  value: any | undefined
+  onChange: (key: string, value: any) => void
+  specGenerator: NodeSpecGenerator
+  collapsed: boolean
+  offset: any
+} & InputSocketSpecJSON
+
+const InputFieldForValue = ({
+  choices,
+  value,
+  defaultValue,
+  onChange,
+  name,
+  valueType
+}: Pick<InputSocketProps, 'choices' | 'value' | 'defaultValue' | 'name' | 'onChange' | 'valueType'>) => {
+  const showChoices = choices?.length
+  const inputVal = String(value) ?? defaultValue ?? ''
+  const inputSocketStyle = {
+    userDrag: 'none',
+    WebkitUserDrag: 'none',
+    MozUserDrag: 'none'
+  }
+  const inputSocketClassName = 'cursor-pointer p-.5 mr-2 m-0 bg-neutral-800'
+  if (showChoices)
+    return (
+      <select
+        className={twMerge('socket-input choice', inputSocketClassName)}
+        style={inputSocketStyle as any}
+        value={value ?? defaultValue ?? ''}
+        onChange={(e) => onChange(name, e.currentTarget.value)}
+      >
+        <>
+          {choices.map((choice) => (
+            <option key={choice.text} value={choice.value}>
+              {choice.text}
+            </option>
+          ))}
+        </>
+      </select>
+    )
+
+  return (
+    <>
+      {valueType === 'string' && (
+        <AutoSizeInput
+          type="text"
+          className={twMerge('socket-input string', inputSocketClassName)}
+          style={inputSocketStyle as any}
+          value={inputVal}
+          onChange={(e) => onChange(name, e.currentTarget.value)}
+        />
+      )}
+      {valueType === 'number' && (
+        <AutoSizeInput
+          type="number"
+          className={twMerge('socket-input number', inputSocketClassName)}
+          style={inputSocketStyle as any}
+          value={inputVal}
+          onChange={(e) => onChange(name, e.currentTarget.value)}
+        />
+      )}
+      {valueType === 'float' && (
+        <AutoSizeInput
+          type="number"
+          className={twMerge('socket-input float', inputSocketClassName)}
+          style={inputSocketStyle as any}
+          value={inputVal}
+          onChange={(e) => onChange(name, e.currentTarget.value)}
+        />
+      )}
+      {valueType === 'integer' && (
+        <AutoSizeInput
+          type="number"
+          className={twMerge('socket-input integer', inputSocketClassName)}
+          style={inputSocketStyle as any}
+          value={inputVal}
+          onChange={(e) => onChange(name, e.currentTarget.value)}
+        />
+      )}
+      {valueType === 'boolean' && (
+        <input
+          type="checkbox"
+          className={twMerge('socket-input boolean', inputSocketClassName)}
+          style={inputSocketStyle as any}
+          value={inputVal}
+          checked={value}
+          onChange={(e) => onChange(name, e.currentTarget.checked)}
+        />
+      )}
+    </>
+  )
+}
+
+const InputSocket: React.FC<InputSocketProps> = ({ connected, specGenerator, ...rest }) => {
+  const { name, valueType, collapsed, offset } = rest
+  const instance = useReactFlow()
+  const isFlowSocket = valueType === 'flow'
+
+  let colorName = valueTypeColorMap[valueType]
+  if (colorName === undefined) {
+    colorName = 'red'
+  }
+
+  // @ts-ignore
+  const [backgroundColor, borderColor] = colors[colorName]
+  const showName = isFlowSocket === false || name !== 'flow'
+
+  const position = {} as any
+  if (offset?.x !== undefined) position['left'] = `${offset.x}%`
+  if (offset?.y !== undefined) position['top'] = `${offset.y}%`
+
+  return (
+    <div
+      className={twMerge('flex-start relative flex h-4 grow items-center justify-start', collapsed ? 'absolute' : '')}
+      style={position as any}
+    >
+      {isFlowSocket && <FaCaretRight color="#ffffff" size="1.25rem" />}
+      {showName && !collapsed && <div className="ml-2 mr-4 capitalize">{name}</div>}
+      {!isFlowSocket && !connected && !collapsed && <InputFieldForValue {...rest} />}
+
+      <Handle
+        id={name}
+        type="target"
+        position={Position.Left}
+        className={twMerge(
+          'socket-input-handle',
+          'ml-auto',
+          connected ? backgroundColor : 'bg-white',
+          borderColor,
+          'h-2.5 w-2.5',
+          collapsed ? '' : 'left-[-12px]'
+        )}
+        isValidConnection={(connection: Connection) => isValidConnection(connection, instance, specGenerator)}
+      />
+    </div>
+  )
+}
+
+export default InputSocket
diff --git a/packages/ui/src/components/editor/panels/VisualScript/node/socket/output/index.tsx b/packages/ui/src/components/editor/panels/VisualScript/node/socket/output/index.tsx
new file mode 100644
index 0000000000..7b0fc2f8cc
--- /dev/null
+++ b/packages/ui/src/components/editor/panels/VisualScript/node/socket/output/index.tsx
@@ -0,0 +1,94 @@
+/*
+CPAL-1.0 License
+
+The contents of this file are subject to the Common Public Attribution License
+Version 1.0. (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
+The License is based on the Mozilla Public License Version 1.1, but Sections 14
+and 15 have been added to cover use of software over a computer network and 
+provide for limited attribution for the Original Developer. In addition, 
+Exhibit A has been modified to be consistent with Exhibit B.
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
+specific language governing rights and limitations under the License.
+
+The Original Code is Ethereal Engine.
+
+The Original Developer is the Initial Developer. The Initial Developer of the
+Original Code is the Ethereal Engine team.
+
+All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
+Ethereal Engine. All Rights Reserved.
+*/
+
+import React from 'react'
+import { FaCaretRight } from 'react-icons/fa6'
+import { Connection, Handle, Position, useReactFlow } from 'reactflow'
+
+import {
+  NodeSpecGenerator,
+  isValidConnection
+} from '@etherealengine/editor/src/components/visualScript/VisualScriptUIModule'
+import { OutputSocketSpecJSON } from '@etherealengine/visual-script'
+import { twMerge } from 'tailwind-merge'
+import { colors, valueTypeColorMap } from '../../../util/colors'
+
+export type OutputSocketProps = {
+  connected: boolean
+  specGenerator: NodeSpecGenerator
+  collapsed: boolean
+  offset: any
+} & OutputSocketSpecJSON
+
+export default function OutputSocket({ specGenerator, connected, ...rest }: OutputSocketProps) {
+  const { name, valueType, collapsed, offset } = rest
+
+  const instance = useReactFlow()
+  const isFlowSocket = valueType === 'flow'
+  let colorName = valueTypeColorMap[valueType]
+  if (colorName === undefined) {
+    colorName = 'red'
+  }
+  // @ts-ignore
+  const [backgroundColor, borderColor] = colors[colorName]
+  const showName = isFlowSocket === false || name !== 'flow'
+  const position = {} as any
+  if (offset?.x !== undefined) position['right'] = `${offset.x}%`
+  if (offset?.y !== undefined) position['top'] = `${offset.y}%`
+
+  console.log('output', position, offset)
+  return (
+    <div
+      className={twMerge('flex-end relative flex h-4 grow items-center justify-end', collapsed ? 'absolute' : '')}
+      style={position as any}
+    >
+      {showName && !collapsed && <div className="ml-2 mr-4 capitalize">{name}</div>}
+      {isFlowSocket && (
+        <FaCaretRight
+          color="#ffffff"
+          size="1.25rem"
+          className="ml-1"
+          style={{
+            marginLeft: '0.25rem'
+          }}
+        />
+      )}
+
+      <Handle
+        id={name}
+        type="source"
+        position={Position.Right}
+        className={twMerge(
+          'socket-output-handle',
+          connected ? backgroundColor : 'bg-white',
+          borderColor,
+          'h-2.5 w-2.5',
+          collapsed ? '' : 'right-[-12px]'
+        )}
+        isValidConnection={(connection: Connection) => isValidConnection(connection, instance, specGenerator)}
+      />
+    </div>
+  )
+}
diff --git a/packages/ui/src/components/editor/panels/VisualScript/sidePanel/index.tsx b/packages/ui/src/components/editor/panels/VisualScript/sidePanel/index.tsx
new file mode 100644
index 0000000000..1ac83ce37c
--- /dev/null
+++ b/packages/ui/src/components/editor/panels/VisualScript/sidePanel/index.tsx
@@ -0,0 +1,246 @@
+/*
+CPAL-1.0 License
+
+The contents of this file are subject to the Common Public Attribution License
+Version 1.0. (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
+The License is based on the Mozilla Public License Version 1.1, but Sections 14
+and 15 have been added to cover use of software over a computer network and 
+provide for limited attribution for the Original Developer. In addition, 
+Exhibit A has been modified to be consistent with Exhibit B.
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
+specific language governing rights and limitations under the License.
+
+The Original Code is Ethereal Engine.
+
+The Original Developer is the Initial Developer. The Initial Developer of the
+Original Code is the Ethereal Engine team.
+
+All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
+Ethereal Engine. All Rights Reserved.
+*/
+
+import { AddOutlined, CancelOutlined } from '@mui/icons-material'
+import React, { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { XYPosition, useReactFlow } from 'reactflow'
+import { v4 as uuidv4 } from 'uuid'
+
+import { UndefinedEntity } from '@etherealengine/ecs'
+import {
+  useVisualScriptFlow,
+  visualToFlow
+} from '@etherealengine/editor/src/components/visualScript/VisualScriptUIModule'
+import { useTemplateHandler } from '@etherealengine/editor/src/components/visualScript/hooks/useTemplateHandler'
+import { useVariableHandler } from '@etherealengine/editor/src/components/visualScript/hooks/useVariableHandler'
+import { NodetoEnginetype } from '@etherealengine/engine'
+import { NO_PROXY, useMutableState } from '@etherealengine/hyperflux'
+import { GraphTemplate, VariableJSON, VisualScriptDomain, VisualScriptState } from '@etherealengine/visual-script'
+import Button from '../../../../../primitives/tailwind/Button'
+import SelectInput from '../../../input/Select'
+import StringInput from '../../../input/String'
+import PaginatedList from '../../../layout/PaginatedList'
+import Panel from '../../../layout/Panel'
+import NodeEditor from '../../../properties/nodeEditor'
+import ParameterInput from '../../../properties/parameter'
+import { Examples } from '../modals/load'
+
+type templateHandler = ReturnType<typeof useTemplateHandler>
+type variableHandler = ReturnType<typeof useVariableHandler>
+type visualScriptFlow = ReturnType<typeof useVisualScriptFlow>
+
+export type SidePanelProps = {
+  flowref: React.MutableRefObject<HTMLElement | null>
+  examples: Examples
+  variables: VariableJSON[]
+}
+
+export const SidePanel = ({
+  flowref,
+  examples,
+  variables,
+  onNodesChange,
+  handleAddTemplate,
+  handleApplyTemplate,
+  handleDeleteTemplate,
+  handleEditTemplate,
+  handleAddVariable,
+  handleEditVariable,
+  handleDeleteVariable
+}: SidePanelProps &
+  Pick<templateHandler, 'handleApplyTemplate' | 'handleDeleteTemplate' | 'handleEditTemplate' | 'handleAddTemplate'> &
+  Pick<visualScriptFlow, 'onNodesChange'> &
+  Pick<variableHandler, 'handleAddVariable' | 'handleDeleteVariable' | 'handleEditVariable'>) => {
+  const reactFlow = useReactFlow()
+  const visualScriptState = useMutableState(VisualScriptState)
+  const { t } = useTranslation()
+  const graphTypes = visualScriptState.registries[VisualScriptDomain.ECS].values.get(NO_PROXY)
+
+  useEffect(() => {
+    for (const graph of Object.values(examples)) {
+      const [nodes, edges] = visualToFlow(graph)
+      handleAddTemplate(nodes, edges)
+    }
+  }, [examples, handleAddTemplate])
+
+  return (
+    <NodeEditor entity={UndefinedEntity} name={t('editor:visualScript.sidePanel.title')}>
+      <NodeEditor
+        entity={UndefinedEntity}
+        name={t('editor:visualScript.sidePanel.node.name')}
+        description={t('editor:visualScript.sidePanel.node.description')}
+      >
+        <PaginatedList
+          options={{ countPerPage: 10 }}
+          list={Object.keys(visualScriptState.registries[VisualScriptDomain.ECS].nodes)}
+          element={(nodeName: string, index) => {
+            return (
+              <Button
+                variant="outline"
+                className="w-full truncate p-0 lowercase"
+                onClick={() => {
+                  const bounds = (flowref.current! as any).getBoundingClientRect()
+                  const centerX = bounds.left + bounds.width / 2
+                  const centerY = bounds.top + bounds.height / 2
+                  const viewportCenter = reactFlow.screenToFlowPosition({ x: centerX, y: centerY } as XYPosition)
+                  const position = viewportCenter // need a way to get viewport
+                  const newNode = {
+                    id: uuidv4(),
+                    type: nodeName,
+                    position,
+                    data: { configuration: {}, values: {} } //fill with default values here
+                  }
+                  onNodesChange([
+                    {
+                      type: 'add',
+                      item: newNode
+                    }
+                  ])
+                }}
+              >
+                <Panel title={nodeName}></Panel>
+              </Button>
+            )
+          }}
+        ></PaginatedList>
+      </NodeEditor>
+      <NodeEditor
+        entity={UndefinedEntity}
+        name={t('editor:visualScript.sidePanel.template.name')}
+        description={t('editor:visualScript.sidePanel.template.description')}
+      >
+        <PaginatedList
+          options={{ countPerPage: 5 }}
+          list={visualScriptState.templates.get(NO_PROXY) as GraphTemplate[]}
+          element={(template: any, index) => {
+            return (
+              <div className="flex w-full">
+                <Button
+                  variant="outline"
+                  className="h-7 w-[20%]"
+                  onClick={() => {
+                    handleApplyTemplate(template)
+                  }}
+                >
+                  <AddOutlined />
+                </Button>
+                <StringInput
+                  className="h-7"
+                  value={template.name}
+                  onChange={(e) => {
+                    template.name = e
+                    handleEditTemplate(template)
+                  }}
+                ></StringInput>
+
+                <Button
+                  variant="outline"
+                  className="h-7 w-[20%]"
+                  style={{ width: '20%' }}
+                  onClick={() => {
+                    handleDeleteTemplate(template)
+                  }}
+                >
+                  <CancelOutlined />
+                </Button>
+              </div>
+            )
+          }}
+        ></PaginatedList>
+      </NodeEditor>
+      <NodeEditor
+        entity={UndefinedEntity}
+        name={t('editor:visualScript.sidePanel.variables.name')}
+        description={t('editor:visualScript.sidePanel.variables.description')}
+      >
+        <PaginatedList
+          options={{ countPerPage: 5 }}
+          list={variables}
+          element={(variable: VariableJSON, index) => {
+            return (
+              <NodeEditor entity={UndefinedEntity} name={variable.name}>
+                <div className="flex w-full flex-col">
+                  <div className="flex w-full flex-row overflow-hidden">
+                    <StringInput
+                      value={variable.name}
+                      className="h-7"
+                      onChange={(e) => {
+                        handleEditVariable({ ...variable, name: e })
+                      }}
+                    ></StringInput>
+                    <Button
+                      variant="outline"
+                      className="h-7 w-[10%] "
+                      onClick={() => {
+                        handleDeleteVariable(variable)
+                      }}
+                    >
+                      <CancelOutlined />
+                    </Button>
+                  </div>
+                  <SelectInput
+                    options={Object.keys(graphTypes).map((valueType) => {
+                      return { label: valueType, value: valueType }
+                    })}
+                    value={variable.valueTypeName}
+                    onChange={(value) => {
+                      handleEditVariable({
+                        ...variable,
+                        valueTypeName: value as string,
+                        initialValue: graphTypes[value].creator()
+                      })
+                    }}
+                  />
+                  <ParameterInput
+                    entity={`${UndefinedEntity}`}
+                    values={[NodetoEnginetype(variable.initialValue, variable.valueTypeName)]}
+                    onChange={(key) => (e) => {
+                      let value = e
+                      if (variable.valueTypeName !== 'object' && typeof e === 'object') value = e.target.value
+                      handleEditVariable({ ...variable, initialValue: value })
+                    }}
+                  />
+                </div>
+              </NodeEditor>
+            )
+          }}
+        ></PaginatedList>
+        <div className="flex w-full flex-row justify-center">
+          <Button
+            variant="outline"
+            onClick={() => {
+              handleAddVariable()
+            }}
+          >
+            {t('editor:visualScript.sidePanel.variables.add')}
+          </Button>
+        </div>
+      </NodeEditor>
+    </NodeEditor>
+  )
+}
+
+export default SidePanel
diff --git a/packages/editor/src/components/visualScript/util/colors.ts b/packages/ui/src/components/editor/panels/VisualScript/util/colors.ts
similarity index 66%
rename from packages/editor/src/components/visualScript/util/colors.ts
rename to packages/ui/src/components/editor/panels/VisualScript/util/colors.ts
index ddafc2a923..351efb2dc9 100644
--- a/packages/editor/src/components/visualScript/util/colors.ts
+++ b/packages/ui/src/components/editor/panels/VisualScript/util/colors.ts
@@ -25,16 +25,19 @@ Ethereal Engine. All Rights Reserved.
 
 import { NodeSpecJSON } from '@etherealengine/visual-script'
 
-export type color = 'red' | 'green' | 'lime' | 'purple' | 'blue' | 'gray' | 'white'
+export type color = 'red' | 'green' | 'lime' | 'purple' | 'blue' | 'gray' | 'white' | 'orange' | 'cyan' | 'indigo'
 
 export const colors: Record<color, [string, string, string]> = {
-  red: ['#dd6b20', '#dd6b20', '#fff'],
-  green: ['#38a169', '#38a169', '#fff'],
-  lime: ['#84cc16', '#84cc16', '#2d3748'],
-  purple: ['#9f7aea', '#9f7aea', '#fff'],
-  blue: ['#22d3ee', '#22d3ee', '#fff'],
-  gray: ['#718096', '#718096', '#fff'],
-  white: ['#fff', '#fff', '#4a5568']
+  red: ['bg-rose-900', 'border-[#dd6b20]', 'text-[#fff]'],
+  green: ['bg-green-900', 'border-[#38a169]', 'text-[#fff]'],
+  lime: ['bg-[#84cc16]', 'border-[#84cc16]', 'text-[#2d3748]'],
+  purple: ['bg-purple-900', 'border-[#9f7aea]', 'text-[#fff]'],
+  blue: ['bg-blue-900', 'border-[#22d3ee]', 'text-[#fff]'],
+  gray: ['bg-[#718096]', 'border-[#718096]', 'text-[#fff]'],
+  white: ['bg-[#fff]', 'border-[#fff]', 'text-[#4a5568]'],
+  orange: ['bg-orange-900', 'border-[#f59e0b]', 'text-[#fff]'],
+  cyan: ['bg-cyan-800', 'border-[#2b6cb0]', 'text-[#fff]'],
+  indigo: ['bg-indigo-900', 'border-[#4a5568]', 'text-[#fff]']
 }
 
 export const valueTypeColorMap: Record<string, string> = {
@@ -47,13 +50,12 @@ export const valueTypeColorMap: Record<string, string> = {
 }
 
 export const categoryColorMap: Record<NodeSpecJSON['category'], color> = {
-  Event: 'red',
-  Logic: 'green',
-  Variable: 'purple',
-  Query: 'purple',
-  Action: 'blue',
-  Flow: 'gray',
-  Effect: 'lime',
-  Time: 'gray',
+  Logic: 'red',
+  Math: 'purple',
+  Engine: 'blue',
+  Action: 'orange',
+  Flow: 'green',
+  Variable: 'cyan',
+  Debug: 'indigo',
   None: 'gray'
 }
diff --git a/packages/ui/src/components/editor/properties/group/index.tsx b/packages/ui/src/components/editor/properties/group/index.tsx
index 35f383ca27..d004915f85 100644
--- a/packages/ui/src/components/editor/properties/group/index.tsx
+++ b/packages/ui/src/components/editor/properties/group/index.tsx
@@ -26,7 +26,6 @@ Ethereal Engine. All Rights Reserved.
 import React, { Fragment, useState } from 'react'
 import { HiOutlineChevronDown, HiOutlineChevronRight } from 'react-icons/hi'
 import { HiMiniXMark } from 'react-icons/hi2'
-import { PiCursor } from 'react-icons/pi'
 import Button from '../../../../primitives/tailwind/Button'
 import Text from '../../../../primitives/tailwind/Text'
 
@@ -40,7 +39,7 @@ interface Props {
 }
 
 const PropertyGroup = ({ name, icon, description, children, onClose, ...rest }: Props) => {
-  const [minimized, setMinimized] = useState(false)
+  const [minimized, setMinimized] = useState(true)
 
   return (
     <div className="justify-left flex w-full flex-col items-start rounded border-solid bg-[#242424] px-4 py-1.5">
@@ -52,7 +51,7 @@ const PropertyGroup = ({ name, icon, description, children, onClose, ...rest }:
           className="ml-0 h-4 border-0 p-0 text-[#444444]"
         />
         {icon}
-        <Text>{name}</Text>
+        {name && <Text>{name}</Text>}
         <div className="ml-auto mr-0 flex items-center gap-3 text-white">
           {onClose && (
             <button onPointerUp={onClose}>
@@ -77,9 +76,4 @@ const PropertyGroup = ({ name, icon, description, children, onClose, ...rest }:
   )
 }
 
-PropertyGroup.defaultProps = {
-  name: 'Component name',
-  icon: <PiCursor />
-}
-
 export default PropertyGroup
diff --git a/packages/ui/src/components/editor/properties/parameter/index.tsx b/packages/ui/src/components/editor/properties/parameter/index.tsx
index 4eb0708f65..038d118ff6 100644
--- a/packages/ui/src/components/editor/properties/parameter/index.tsx
+++ b/packages/ui/src/components/editor/properties/parameter/index.tsx
@@ -99,7 +99,7 @@ export default function ParameterInput({
       {Object.entries(_defaults).map(([k, parms]: [string, any]) => {
         const compKey = `${entity}-${k}`
         return (
-          <InputGroup key={compKey} name={k} label={k}>
+          <InputGroup key={compKey} name={k} label={''}>
             {(() => {
               switch (parms.type) {
                 case 'boolean':
diff --git a/packages/ui/src/primitives/tailwind/Select/index.tsx b/packages/ui/src/primitives/tailwind/Select/index.tsx
index 6ce8bf55d9..068dcec81f 100644
--- a/packages/ui/src/primitives/tailwind/Select/index.tsx
+++ b/packages/ui/src/primitives/tailwind/Select/index.tsx
@@ -94,6 +94,7 @@ const Select = <T extends OptionValueType>({
   }, [options])
 
   const toggleDropdown = () => {
+    if (options.length === 0) return
     showOptions.set((v) => !v)
   }
 
diff --git a/packages/visual-script/src/engine/Nodes/Registry/NodeCategory.ts b/packages/visual-script/src/engine/Nodes/Registry/NodeCategory.ts
index 492e45497c..209f78310c 100644
--- a/packages/visual-script/src/engine/Nodes/Registry/NodeCategory.ts
+++ b/packages/visual-script/src/engine/Nodes/Registry/NodeCategory.ts
@@ -25,12 +25,11 @@ Ethereal Engine. All Rights Reserved.
 
 export enum NodeCategory {
   Action = 'Action',
-  Query = 'Query',
   Logic = 'Logic',
-  Event = 'Event',
+  Engine = 'Engine',
   Variable = 'Variable',
   Flow = 'Flow',
-  Time = 'Time',
   None = 'None',
-  Effect = 'Effect'
+  Math = 'Math',
+  Debug = 'Debug'
 }
diff --git a/packages/visual-script/src/profiles/core/debug/DebugLog.ts b/packages/visual-script/src/profiles/core/debug/DebugLog.ts
index da00e59faa..e9aa9693ec 100644
--- a/packages/visual-script/src/profiles/core/debug/DebugLog.ts
+++ b/packages/visual-script/src/profiles/core/debug/DebugLog.ts
@@ -28,7 +28,7 @@ import { ILogger, LogSeverity } from '../abstractions/ILogger'
 
 export const Log = makeFlowNodeDefinition({
   typeName: 'debug/log',
-  category: NodeCategory.Action,
+  category: NodeCategory.Debug,
   label: 'Debug Log',
   in: {
     flow: 'flow',
diff --git a/packages/visual-script/src/profiles/core/lifecycle/LifecycleOnEnd.ts b/packages/visual-script/src/profiles/core/lifecycle/LifecycleOnEnd.ts
index 836632fa77..2de996057f 100644
--- a/packages/visual-script/src/profiles/core/lifecycle/LifecycleOnEnd.ts
+++ b/packages/visual-script/src/profiles/core/lifecycle/LifecycleOnEnd.ts
@@ -39,7 +39,7 @@ const makeInitialState = (): State => ({
 export const LifecycleOnEnd = makeEventNodeDefinition({
   typeName: 'flow/lifecycle/onEnd',
   label: 'On End',
-  category: NodeCategory.Event,
+  category: NodeCategory.Flow,
   in: {},
   out: {
     flow: 'flow'
diff --git a/packages/visual-script/src/profiles/core/lifecycle/LifecycleOnStart.ts b/packages/visual-script/src/profiles/core/lifecycle/LifecycleOnStart.ts
index 68eca71b0e..628e130906 100644
--- a/packages/visual-script/src/profiles/core/lifecycle/LifecycleOnStart.ts
+++ b/packages/visual-script/src/profiles/core/lifecycle/LifecycleOnStart.ts
@@ -37,7 +37,7 @@ const makeInitialState = (): State => ({
 export const LifecycleOnStart = makeEventNodeDefinition({
   typeName: 'flow/lifecycle/onStart',
   label: 'On Start',
-  category: NodeCategory.Event,
+  category: NodeCategory.Flow,
   in: {},
   out: {
     flow: 'flow'
diff --git a/packages/visual-script/src/profiles/core/lifecycle/LifecycleOnTick.ts b/packages/visual-script/src/profiles/core/lifecycle/LifecycleOnTick.ts
index 6d2c78fc3c..d884888d77 100644
--- a/packages/visual-script/src/profiles/core/lifecycle/LifecycleOnTick.ts
+++ b/packages/visual-script/src/profiles/core/lifecycle/LifecycleOnTick.ts
@@ -37,7 +37,7 @@ const makeInitialState = (): State => ({
 export const LifecycleOnTick = makeEventNodeDefinition({
   typeName: 'flow/lifecycle/onTick',
   label: 'On Tick',
-  category: NodeCategory.Event,
+  category: NodeCategory.Flow,
   in: {},
   out: {
     flow: 'flow',
diff --git a/packages/visual-script/src/profiles/core/logic/Easing.ts b/packages/visual-script/src/profiles/core/logic/Easing.ts
index 2f71b4a5b9..82d1f55af6 100644
--- a/packages/visual-script/src/profiles/core/logic/Easing.ts
+++ b/packages/visual-script/src/profiles/core/logic/Easing.ts
@@ -27,7 +27,7 @@ import { EasingFunctions, EasingModes, makeFunctionNodeDefinition, NodeCategory
 
 export const Easing = makeFunctionNodeDefinition({
   typeName: 'math/easing',
-  category: NodeCategory.Logic,
+  category: NodeCategory.Math,
   label: 'Easing',
   in: {
     easingFunction: {
diff --git a/packages/visual-script/src/profiles/scene/nodes/actions/SetSceneProperty.ts b/packages/visual-script/src/profiles/scene/nodes/actions/SetSceneProperty.ts
index e571125578..264e93d16b 100644
--- a/packages/visual-script/src/profiles/scene/nodes/actions/SetSceneProperty.ts
+++ b/packages/visual-script/src/profiles/scene/nodes/actions/SetSceneProperty.ts
@@ -30,7 +30,7 @@ export const SetSceneProperty = (valueTypeNames: string[]) =>
   valueTypeNames.map((valueTypeName) =>
     makeFlowNodeDefinition({
       typeName: `scene/set/${valueTypeName}`,
-      category: NodeCategory.Effect,
+      category: NodeCategory.None,
       label: `Set scene ${valueTypeName}`,
       in: {
         jsonPath: (_, graphApi) => {
diff --git a/packages/visual-script/src/profiles/scene/nodes/events/OnSceneNodeClick.ts b/packages/visual-script/src/profiles/scene/nodes/events/OnSceneNodeClick.ts
index 2a1117bed4..cd18cdf56f 100644
--- a/packages/visual-script/src/profiles/scene/nodes/events/OnSceneNodeClick.ts
+++ b/packages/visual-script/src/profiles/scene/nodes/events/OnSceneNodeClick.ts
@@ -36,7 +36,7 @@ const initialState = (): State => ({})
 // very 3D specific.
 export const OnSceneNodeClick = makeEventNodeDefinition({
   typeName: 'scene/nodeClick',
-  category: NodeCategory.Event,
+  category: NodeCategory.None,
   label: 'On Scene Node Click',
   in: {
     jsonPath: (_, graphApi) => {
diff --git a/packages/visual-script/src/profiles/scene/nodes/queries/GetSceneProperty.ts b/packages/visual-script/src/profiles/scene/nodes/queries/GetSceneProperty.ts
index 2b235d64af..6b7a3d6f50 100644
--- a/packages/visual-script/src/profiles/scene/nodes/queries/GetSceneProperty.ts
+++ b/packages/visual-script/src/profiles/scene/nodes/queries/GetSceneProperty.ts
@@ -30,7 +30,7 @@ export const GetSceneProperty = (valueTypeNames: string[]) =>
   valueTypeNames.map((valueTypeName) =>
     makeFunctionNodeDefinition({
       typeName: `scene/get/${valueTypeName}`,
-      category: NodeCategory.Query,
+      category: NodeCategory.None,
       label: `Get scene  ${valueTypeName}`,
       in: {
         jsonPath: (_, graphApi) => {
diff --git a/packages/visual-script/src/profiles/struct/debug/LogList.ts b/packages/visual-script/src/profiles/struct/debug/LogList.ts
index 48aa278aac..c35befc424 100644
--- a/packages/visual-script/src/profiles/struct/debug/LogList.ts
+++ b/packages/visual-script/src/profiles/struct/debug/LogList.ts
@@ -30,7 +30,7 @@ export class LogList extends FlowNode {
   public static Description = (logger: ILogger) =>
     new NodeDescription(
       'logic/list/log',
-      NodeCategory.Action,
+      NodeCategory.Logic,
       'Log',
       (description, graph) => new LogList(description, graph, logger)
     )
diff --git a/packages/visual-script/src/profiles/struct/debug/LogObject.ts b/packages/visual-script/src/profiles/struct/debug/LogObject.ts
index 4624e5f2df..d401b14b0d 100644
--- a/packages/visual-script/src/profiles/struct/debug/LogObject.ts
+++ b/packages/visual-script/src/profiles/struct/debug/LogObject.ts
@@ -30,7 +30,7 @@ export class LogObject extends FlowNode {
   public static Description = (logger: ILogger) =>
     new NodeDescription(
       'logic/object/log',
-      NodeCategory.Action,
+      NodeCategory.Logic,
       'Log',
       (description, graph) => new LogObject(description, graph, logger)
     )
diff --git a/packages/visual-script/src/profiles/struct/values/ListNodes.ts b/packages/visual-script/src/profiles/struct/values/ListNodes.ts
index 4334ad3a03..6a0794342d 100644
--- a/packages/visual-script/src/profiles/struct/values/ListNodes.ts
+++ b/packages/visual-script/src/profiles/struct/values/ListNodes.ts
@@ -94,7 +94,7 @@ export const Concat = makeFunctionNodeDefinition({
 
 export const ListLoop = makeFlowNodeDefinition({
   typeName: 'logic/list/loop',
-  category: NodeCategory.Flow,
+  category: NodeCategory.Logic,
   label: 'list Loop',
   in: {
     flow: 'flow',
diff --git a/packages/visual-script/tests/assets/variable-test-visual-script.json b/packages/visual-script/tests/assets/variable-test-visual-script.json
index b42d0be87c..7e42528a00 100644
--- a/packages/visual-script/tests/assets/variable-test-visual-script.json
+++ b/packages/visual-script/tests/assets/variable-test-visual-script.json
@@ -72,7 +72,7 @@
     },
     {
       "id": "30b0ad60-2f9b-401f-8ff6-26711cd1a5ab",
-      "type": "engine/variable/get",
+      "type": "variable/get",
       "metadata": {
         "positionX": "-718.3746466302628",
         "positionY": "-1181.8195985301993"
@@ -88,7 +88,7 @@
     },
     {
       "id": "9280e546-65ca-478d-bd3e-3cae449d87bc",
-      "type": "engine/variable/use",
+      "type": "variable/use",
       "metadata": {
         "positionX": "-1193.8215357373301",
         "positionY": "-963.2145736022504"
@@ -132,7 +132,7 @@
     },
     {
       "id": "169eee0f-c1c0-432b-945d-db39a2545578",
-      "type": "engine/variable/set",
+      "type": "variable/set",
       "metadata": {
         "positionX": "-511.05179069688785",
         "positionY": "-1401.7883959196747"
@@ -158,7 +158,7 @@
     },
     {
       "id": "a682db55-01fb-47f8-8845-25b4fb6e8b8e",
-      "type": "engine/variable/get",
+      "type": "variable/get",
       "metadata": {
         "positionX": "-1432.2974656004633",
         "positionY": "-1174.660191125468"