diff --git a/mirror-2/app/space/[spaceId]/build/inspector/inspector.tsx b/mirror-2/app/space/[spaceId]/build/inspector/inspector.tsx
index 1eb8a9a3..4c67d4f1 100644
--- a/mirror-2/app/space/[spaceId]/build/inspector/inspector.tsx
+++ b/mirror-2/app/space/[spaceId]/build/inspector/inspector.tsx
@@ -15,7 +15,7 @@ export default function Inspector({ className }) {
       <>
           <EntityFormGroup entity={entity} />
              {/* Create Component Button */}
-          <CreateComponentButton/>
+          <CreateComponentButton entity={entity} />
             </>
     }
   </div>
diff --git a/mirror-2/components/ui/custom-buttons/create-component.button.tsx b/mirror-2/components/ui/custom-buttons/create-component.button.tsx
index 5f6ca39e..c63db9ec 100644
--- a/mirror-2/components/ui/custom-buttons/create-component.button.tsx
+++ b/mirror-2/components/ui/custom-buttons/create-component.button.tsx
@@ -29,71 +29,118 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
+import { DatabaseEntity } from '@/state/api/entities'
+import { useAddComponentToEntityMutation } from '@/state/api/entities'
 
-export function CreateComponentButton() {
+export function CreateComponentButton({ entity }: { entity: DatabaseEntity }) {
   const iconClassName = 'mr-2 h-4 w-4'
   const itemClassName = 'cursor-pointer'
 
+  // Access the addComponentToEntity mutation hook
+  const [addComponentToEntity] = useAddComponentToEntityMutation()
+
+  // Function to handle adding a component when a menu item is clicked
+  // Function to handle adding a component when a menu item is clicked
+  const handleAddComponent = (componentKey: string, componentData: any) => {
+    addComponentToEntity({
+      id: entity.id,
+      componentKey, // The specific component key (e.g., 'render', 'camera')
+      componentData // The component data to be added
+    })
+  }
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button variant={'default'} type="button">
-          {/* <PlusCircleIcon className="mr-2" /> */}
           Add Component <ChevronDown />
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-56">
         <DropdownMenuGroup>
-          <DropdownMenuItem className={itemClassName}>
+          <DropdownMenuItem
+            className={itemClassName}
+            onClick={() => handleAddComponent('2D Sprite', {})}
+          >
             <BookImage className={iconClassName} />
             <span>2D Sprite</span>
           </DropdownMenuItem>
-          <DropdownMenuItem className={itemClassName}>
+          <DropdownMenuItem
+            className={itemClassName}
+            onClick={() => handleAddComponent('3D Model', {})}
+          >
             <Box className={iconClassName} />
             <span>3D Model</span>
           </DropdownMenuItem>
-          <DropdownMenuItem className={itemClassName}>
+          <DropdownMenuItem
+            className={itemClassName}
+            onClick={() => handleAddComponent('Animation', {})}
+          >
             <PersonStanding className={iconClassName} />
             <span>Animation</span>
           </DropdownMenuItem>
-          <DropdownMenuItem className={itemClassName}>
+          <DropdownMenuItem
+            className={itemClassName}
+            onClick={() => handleAddComponent('Camera', {})}
+          >
             <Cctv className={iconClassName} />
             <span>Camera</span>
           </DropdownMenuItem>
 
           {/* <DropdownMenuSeparator /> */}
 
-          <DropdownMenuItem className={itemClassName}>
+          <DropdownMenuItem
+            className={itemClassName}
+            onClick={() => handleAddComponent('Light', {})}
+          >
             <Lightbulb className={iconClassName} />
             <span>Light</span>
           </DropdownMenuItem>
 
-          <DropdownMenuItem className={itemClassName}>
+          <DropdownMenuItem
+            className={itemClassName}
+            onClick={() => handleAddComponent('Physics', {})}
+          >
             <Orbit className={iconClassName} />
             <span>Physics</span>
           </DropdownMenuItem>
 
-          <DropdownMenuItem className={itemClassName}>
+          <DropdownMenuItem
+            className={itemClassName}
+            onClick={() => handleAddComponent('Gaussian Splat', {})}
+          >
             <Grip className={iconClassName} />
             <span>Gaussian Splat</span>
           </DropdownMenuItem>
 
-          <DropdownMenuItem className={itemClassName}>
+          <DropdownMenuItem
+            className={itemClassName}
+            onClick={() => handleAddComponent('Particles', {})}
+          >
             <Atom className={iconClassName} />
             <span>Particles</span>
           </DropdownMenuItem>
 
-          <DropdownMenuItem className={itemClassName}>
+          <DropdownMenuItem
+            className={itemClassName}
+            onClick={() => handleAddComponent('Script', {})}
+          >
             <ScrollText className={iconClassName} />
             <span>Script</span>
           </DropdownMenuItem>
 
-          <DropdownMenuItem className={itemClassName}>
+          <DropdownMenuItem
+            className={itemClassName}
+            onClick={() => handleAddComponent('Sound', {})}
+          >
             <Volume2 className={iconClassName} />
             <span>Sound</span>
           </DropdownMenuItem>
 
-          <DropdownMenuItem className={itemClassName}>
+          <DropdownMenuItem
+            className={itemClassName}
+            onClick={() => handleAddComponent('UI', {})}
+          >
             <Proportions className={iconClassName} />
             <span>UI</span>
           </DropdownMenuItem>
diff --git a/mirror-2/state/api/entities.tsx b/mirror-2/state/api/entities.tsx
index 2f6c9dac..f8e91e64 100644
--- a/mirror-2/state/api/entities.tsx
+++ b/mirror-2/state/api/entities.tsx
@@ -401,10 +401,11 @@ export const entitiesApi = createApi({
       any,
       {
         id: EntityId
-        component: any // The new component data to be added
+        componentKey: string // The key for the component (e.g., 'render')
+        componentData: any // The new component data to be added
       }
     >({
-      queryFn: async ({ id, component }) => {
+      queryFn: async ({ id, componentKey, componentData }) => {
         const supabase = createSupabaseBrowserClient()
 
         // Fetch the existing components
@@ -418,11 +419,12 @@ export const entitiesApi = createApi({
           return { error: fetchError.message }
         }
 
+        // Merge the new component data under the specified key (componentKey)
         const updatedComponents = {
           ...(typeof existingEntity.components === 'object'
             ? existingEntity.components
             : {}),
-          ...(typeof component === 'object' ? component : {}) // Add or merge new component
+          [componentKey]: componentData // Add or overwrite the specific component
         }
 
         const { data, error } = await supabase
@@ -467,8 +469,8 @@ export const entitiesApi = createApi({
       any,
       {
         id: EntityId
-        componentKey: string
-        updatedComponentData: any
+        componentKey: string // The key for the component (e.g., 'render')
+        updatedComponentData: any // The new data for the component
       }
     >({
       queryFn: async ({ id, componentKey, updatedComponentData }) => {
@@ -487,11 +489,10 @@ export const entitiesApi = createApi({
 
         // Update the specific component in the JSONB object
         const updatedComponents = {
-          ...(typeof existingEntity.components === 'object' &&
-          existingEntity.components !== null
+          ...(typeof existingEntity.components === 'object'
             ? existingEntity.components
             : {}),
-          [componentKey]: updatedComponentData
+          [componentKey]: updatedComponentData // Update only the specific component
         }
 
         const { data, error } = await supabase
@@ -515,7 +516,7 @@ export const entitiesApi = createApi({
       any,
       {
         id: EntityId
-        componentKey: string
+        componentKey: string // The key of the component to be deleted
       }
     >({
       queryFn: async ({ id, componentKey }) => {
@@ -554,8 +555,9 @@ export const entitiesApi = createApi({
         { type: TAG_NAME_FOR_GENERAL_ENTITY, id }
       ]
     })
-
-    //
+    /**
+     * End Components
+     */
   })
 })