diff --git a/components/ComponentPreview.vue b/components/ComponentPreview.vue
index a5f5be3..fa67637 100644
--- a/components/ComponentPreview.vue
+++ b/components/ComponentPreview.vue
@@ -136,7 +136,7 @@
     </div>
 
     <!-- Repeating Group Component -->
-    <div v-else-if="component.type === 'repeating-group'" class="py-2">
+    <div v-else-if="component.type === 'repeating-group'">
       <fieldset class="border rounded-md p-4">
         <legend class="text-sm font-medium px-2">{{ component.props.label || 'Group' }}</legend>
 
@@ -1406,8 +1406,8 @@ const onNestedComponentAdd = (event) => {
 };
 
 const removeFromSection = (sectionId, childIndex) => {
-  // Actually delete the component from the section (don't move it back to main form)
-  const section = formStore.formComponents.find(comp => comp.id === sectionId);
+  // Find the container at any nesting level
+  const section = findContainerRecursively(sectionId);
   if (section && section.props.children) {
     const removedComponent = section.props.children.splice(childIndex, 1)[0];
     if (removedComponent) {
@@ -1507,7 +1507,32 @@ const deleteNestedComponent = (componentId) => {
   }
 };
 
-
+// Helper function to find container at any nesting level
+const findContainerRecursively = (containerId, components = formStore.formComponents, childId = null) => {
+  for (const component of components) {
+    // Check if this is the target container
+    if (containerId && component.id === containerId) {
+      return component;
+    }
+    
+    // If searching for parent by child ID, check if this component contains the child
+    if (childId && component.props.children && Array.isArray(component.props.children)) {
+      const hasChild = component.props.children.some(child => child.id === childId);
+      if (hasChild) {
+        return component;
+      }
+    }
+    
+    // If this component has children, search recursively
+    if (component.props.children && Array.isArray(component.props.children)) {
+      const found = findContainerRecursively(containerId, component.props.children, childId);
+      if (found) {
+        return found;
+      }
+    }
+  }
+  return null;
+};
 
 const handleSectionDrop = (event, containerId) => {
   event.preventDefault();
@@ -1549,8 +1574,8 @@ const handleSectionDrop = (event, containerId) => {
       }
     };
     
-    // Find the target container (section or repeating-group)
-    const container = formStore.formComponents.find(comp => comp.id === containerId);
+    // Find the target container at any nesting level
+    const container = findContainerRecursively(containerId);
     if (container && (container.type === 'form-section' || container.type === 'repeating-group')) {
       // Initialize children array if it doesn't exist
       if (!container.props.children) {
@@ -1572,6 +1597,8 @@ const handleSectionDrop = (event, containerId) => {
       });
       
       console.log('Component added to container:', newComponent);
+    } else {
+      console.warn('Container not found or invalid container type:', containerId);
     }
   } catch (error) {
     console.error('Error dropping component into container:', error);
@@ -1603,12 +1630,8 @@ const closeNestedSettingsModal = () => {
 const saveNestedComponentSettings = (updatedComponent) => {
   if (!updatedComponent || !selectedNestedComponent.value) return;
   
-  // Find the parent container (section or repeating-group) and update the nested component
-  const parentContainer = formStore.formComponents.find(comp => 
-    (comp.type === 'form-section' || comp.type === 'repeating-group') && 
-    comp.props.children && 
-    comp.props.children.some(child => child.id === updatedComponent.id)
-  );
+  // Find the parent container at any nesting level
+  const parentContainer = findContainerRecursively(null, formStore.formComponents, updatedComponent.id);
   
   if (parentContainer) {
     const childIndex = parentContainer.props.children.findIndex(child => child.id === updatedComponent.id);
@@ -1969,9 +1992,9 @@ onMounted(() => {
   transition: all 0.2s ease-in-out;
 }
 
-.group-item:hover {
+/* .group-item:hover {
   border-color: #93c5fd;
-}
+} */
 
 .repeating-group-container {
   transition: all 0.2s ease-in-out;
@@ -2018,10 +2041,10 @@ onMounted(() => {
   transition: all 0.2s ease-in-out;
 }
 
-.form-component:hover {
+/* .form-component:hover {
   border-color: #93c5fd;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
+} */
 
 .component-actions {
   opacity: 0;
@@ -2126,10 +2149,10 @@ onMounted(() => {
   margin-bottom: 0.5rem;
 }
 
-.form-component:hover {
+/* .form-component:hover {
   border-color: #93c5fd;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
+} */
 
 .component-actions {
   position: absolute;
diff --git a/pages/form-builder/index.vue b/pages/form-builder/index.vue
index 2907471..6360faf 100644
--- a/pages/form-builder/index.vue
+++ b/pages/form-builder/index.vue
@@ -2328,30 +2328,50 @@ const handleSelectNestedComponent = (nestedComponent) => {
   console.log('Selected nested component:', nestedComponent);
 };
 
+// Helper function to find container at any nesting level
+const findContainerRecursively = (containerId, components = formStore.formComponents, childId = null) => {
+  for (const component of components) {
+    // Check if this is the target container
+    if (containerId && component.id === containerId) {
+      return component;
+    }
+    
+    // If searching for parent by child ID, check if this component contains the child
+    if (childId && component.props.children && Array.isArray(component.props.children)) {
+      const hasChild = component.props.children.some(child => child.id === childId);
+      if (hasChild) {
+        return component;
+      }
+    }
+    
+    // If this component has children, search recursively
+    if (component.props.children && Array.isArray(component.props.children)) {
+      const found = findContainerRecursively(containerId, component.props.children, childId);
+      if (found) {
+        return found;
+      }
+    }
+  }
+  return null;
+};
+
 const handleUpdateComponent = (updatedComponent) => {
   if (!updatedComponent || !updatedComponent.id) return;
   
-  // Check if this is a nested component inside a section
-  let foundInSection = false;
+  // Find the parent container at any nesting level
+  const parentContainer = findContainerRecursively(null, formStore.formComponents, updatedComponent.id);
   
-  // Look for the component in section or repeating-group children
-  formStore.formComponents.forEach(component => {
-    if ((component.type === 'form-section' || component.type === 'repeating-group') && component.props.children) {
-      const nestedIndex = component.props.children.findIndex(child => child.id === updatedComponent.id);
-      if (nestedIndex !== -1) {
-        // Update the nested component
-        component.props.children[nestedIndex] = updatedComponent;
-        // Update the entire container to trigger reactivity
-        formStore.updateComponent(component);
-        foundInSection = true;
-        console.log('Updated nested component in container:', updatedComponent);
-        return;
-      }
+  if (parentContainer) {
+    // Update the nested component
+    const childIndex = parentContainer.props.children.findIndex(child => child.id === updatedComponent.id);
+    if (childIndex !== -1) {
+      parentContainer.props.children[childIndex] = updatedComponent;
+      // Update the entire container to trigger reactivity
+      formStore.updateComponent(parentContainer);
+      console.log('Updated nested component in container:', updatedComponent);
     }
-  });
-  
-  // If not found in sections, update as a main component
-  if (!foundInSection) {
+  } else {
+    // If not found in sections, update as a main component
     formStore.updateComponent(updatedComponent);
   }
 };
@@ -2363,34 +2383,27 @@ const handleMoveComponent = ({ oldIndex, newIndex }) => {
 const handleDeleteComponent = (id) => {
   if (!id) return;
   
-  // Check if this is a nested component inside a section
-  let foundInSection = false;
+  // Find the parent container at any nesting level
+  const parentContainer = findContainerRecursively(null, formStore.formComponents, id);
   
-  // Look for the component in section or repeating-group children
-  formStore.formComponents.forEach(component => {
-    if ((component.type === 'form-section' || component.type === 'repeating-group') && component.props.children) {
-      const nestedIndex = component.props.children.findIndex(child => child.id === id);
-      if (nestedIndex !== -1) {
-        // Remove the nested component
-        const deletedComponent = component.props.children.splice(nestedIndex, 1)[0];
-        // Update the entire container to trigger reactivity
-        formStore.updateComponent(component);
-        foundInSection = true;
-        
-        // Clear selection if the deleted component was selected
-        if (formStore.selectedComponentId === id) {
-          formStore.selectedComponent = null;
-          formStore.selectedComponentId = null;
-        }
-        
-        console.log('Deleted nested component from container:', deletedComponent);
-        return;
+  if (parentContainer) {
+    // Remove the nested component
+    const childIndex = parentContainer.props.children.findIndex(child => child.id === id);
+    if (childIndex !== -1) {
+      const deletedComponent = parentContainer.props.children.splice(childIndex, 1)[0];
+      // Update the entire container to trigger reactivity
+      formStore.updateComponent(parentContainer);
+      
+      // Clear selection if the deleted component was selected
+      if (formStore.selectedComponentId === id) {
+        formStore.selectedComponent = null;
+        formStore.selectedComponentId = null;
       }
+      
+      console.log('Deleted nested component from container:', deletedComponent);
     }
-  });
-  
-  // If not found in sections, delete as a main component
-  if (!foundInSection) {
+  } else {
+    // If not found in sections, delete as a main component
     formStore.deleteComponent(id);
   }
 };