diff --git a/packages/ui/src/components/FolderPanel.vue b/packages/ui/src/components/FolderPanel.vue
index ba9ea916..9c0c8169 100644
--- a/packages/ui/src/components/FolderPanel.vue
+++ b/packages/ui/src/components/FolderPanel.vue
@@ -1,12 +1,12 @@
 <template>
-    <div style="margin-left: 1rem; margin-right: 1rem; margin-top: 1rem; max-width: 600px;" v-if="collectionItem">
-        <div v-if="collectionItem._type === 'request_group'">
+    <div style="margin-left: 1rem; margin-right: 1rem; margin-top: 1rem; max-width: 600px;" v-if="collectionItemToEdit">
+        <div v-if="collectionItemToEdit._type === 'request_group'">
             <div style="padding-bottom: 1rem"></div>
             <div class="request-panel-tabs-context">
                 <div style="font-weight: 500; margin-bottom: var(--label-margin-bottom)">Headers</div>
                 <div>
                     <RequestPanelHeaders
-                        :collection-item="collectionItem"
+                        :collection-item="collectionItemToEdit"
                         :collection-item-environment-resolved="envVariables"
                     />
                 </div>
@@ -19,7 +19,7 @@
                 <div style="font-weight: 500; margin-bottom: var(--label-margin-bottom)">Auth</div>
                 <div>
                     <RequestPanelAuth
-                        :collection-item="collectionItem"
+                        :collection-item="collectionItemToEdit"
                         :collection-item-environment-resolved="envVariables"
                         :flags="flags"
                     />
@@ -35,6 +35,8 @@
 <script>
 import RequestPanelHeaders from '../../src/components/RequestPanelHeaders.vue'
 import RequestPanelAuth from '../../src/components/RequestPanelAuth.vue'
+import { deepClone } from '@/helpers'
+import { toRaw } from 'vue'
 
 export default {
     directives: {
@@ -61,6 +63,7 @@ export default {
     data() {
         return {
             envVariables: {},
+            collectionItemToEdit: null,
         }
     },
     computed: {
@@ -73,6 +76,13 @@ export default {
             immediate: true,
             handler() {
                 this.loadEnvVariables()
+                this.collectionItemToEdit = deepClone(this.collectionItem)
+            }
+        },
+        collectionItemToEdit: {
+            deep: true,
+            handler() {
+                this.updateCollectionItem(this.collectionItemToEdit)
             }
         }
     },
@@ -88,6 +98,19 @@ export default {
                 console.error('Error loading environment variables:', error)
             }
         },
+        async updateCollectionItem(collectionItem) {
+            const result = await this.$store.dispatch('updateCollectionItem', {
+                collectionId: collectionItem._id,
+                name: collectionItem.name,
+                parentId: collectionItem.parentId,
+                headers: structuredClone(toRaw(collectionItem.headers)),
+                authentication: structuredClone(toRaw(collectionItem.authentication)),
+            })
+
+            if(result.error) {
+                return
+            }
+        },
     }
 }
 </script>