diff --git a/pages/configure.vue b/pages/configure.vue
index 4cbc352f..338575b0 100644
--- a/pages/configure.vue
+++ b/pages/configure.vue
@@ -45,10 +45,15 @@
                                 </div>
                             </b-form-group>
                             <b-row>
-                                <b-col cols="1" style="min-width: 85px">
-                                    <b-button type="submit" variant="primary">
-                                        Save
-                                    </b-button>
+                                <b-col cols="1" style="min-width:158px">
+                                    <b-button-group>
+                                        <b-button type="submit" variant="primary">
+                                            Save
+                                        </b-button>
+                                        <b-button variant="danger" @click="deleteChannel()">
+                                            Delete
+                                        </b-button>
+                                    </b-button-group>
                                 </b-col>
                                 <b-col>
                                     <b-alert v-model="showAlert" :variant="alertVariant" dismissible>
@@ -275,8 +280,17 @@ export default {
         addChannel () {
             const config = JSON.parse(JSON.stringify(this.configGui))
             const newConf = JSON.parse(JSON.stringify(this.configGui[this.configGui.length - 1]))
+
+            const playoutConfigPath = newConf.playout_config.match(/.*\//)
+            const playoutConfigFile = newConf.playout_config.replace(/(.*\/|\.yml)/g, '').split('-')
+
+            const engineServicePath = newConf.engine_service.match(/.*\//)
+            const engineServiceFile = newConf.engine_service.replace(/(.*\/|\.conf)/g, '').split('-')
+
             newConf.id = config.length + 1
             newConf.channel = `New Channel - ${Math.random().toString(36).substring(7)}`
+            newConf.playout_config = `${playoutConfigPath}${playoutConfigFile[0]}-${String(parseInt(playoutConfigFile[1]) + 1).padStart(3, '0')}.yml`
+            newConf.engine_service = `${engineServicePath}${engineServiceFile[0]}-${String(parseInt(engineServiceFile[1]) + 1).padStart(3, '0')}.conf`
 
             config.push(newConf)
 
@@ -286,7 +300,7 @@ export default {
         async onSubmitGui (evt) {
             evt.preventDefault()
             await this.$store.dispatch('auth/inspectToken')
-            const update = await this.$store.dispatch('config/setGuiConfig', this.configGui)
+            const update = await this.$store.dispatch('config/setGuiConfig', this.configGui[this.configID])
 
             if (update.status === 200 || update.status === 201) {
                 this.alertVariant = 'success'
@@ -298,6 +312,26 @@ export default {
 
             this.showAlert = true
         },
+        async deleteChannel () {
+            const config = JSON.parse(JSON.stringify(this.configGui))
+            const id = config[this.configID].id
+            const response = await this.$axios.delete(`api/player/guisettings/${id}/`)
+
+            config.splice(this.configID, 1)
+
+            this.$store.commit('config/UPDATE_GUI_CONFIG', config)
+            this.$store.commit('config/UPDATE_CONFIG_ID', this.configGui.length - 1)
+
+            if (response.status === 204) {
+                this.alertVariant = 'success'
+                this.alertMsg = 'Delete GUI config success!'
+            } else {
+                this.alertVariant = 'danger'
+                this.alertMsg = 'Delete GUI config failed!'
+            }
+
+            this.showAlert = true
+        },
         async onSubmitPlayout (evt) {
             evt.preventDefault()
             await this.$store.dispatch('auth/inspectToken')
diff --git a/store/config.js b/store/config.js
index 27cc8033..ab3a1526 100644
--- a/store/config.js
+++ b/store/config.js
@@ -2,6 +2,7 @@ export const state = () => ({
     configID: 0,
     configCount: 0,
     configGui: null,
+    configGuiRaw: null,
     netChoices: [],
     configPlayout: [],
     currentUser: null,
@@ -18,6 +19,9 @@ export const mutations = {
     UPDATE_GUI_CONFIG (state, config) {
         state.configGui = config
     },
+    UPDATE_GUI_CONFIG_RAW (state, config) {
+        state.configGuiRaw = config
+    },
     UPDATE_NET_CHOICES (state, list) {
         state.netChoices = list
     },
@@ -65,6 +69,7 @@ export const actions = {
             }
 
             commit('UPDATE_GUI_CONFIG', response.data)
+            commit('UPDATE_GUI_CONFIG_RAW', JSON.parse(JSON.stringify(response.data)))
             commit('UPDATE_CONFIG_COUNT', response.data.length)
         } else {
             commit('UPDATE_GUI_CONFIG', [{
@@ -80,21 +85,22 @@ export const actions = {
     },
 
     async setGuiConfig ({ commit, state }, obj) {
-        const stringObj = JSON.parse(JSON.stringify(obj[state.configID]))
+        const stringObj = JSON.parse(JSON.stringify(obj))
         stringObj.extra_extensions = stringObj.extra_extensions.join(',')
         let response
 
-        if (state.configPlayout.length === 0 || state.configCount !== stringObj.length) {
-            response = await this.$axios.post('api/player/guisettings/', stringObj)
+        if (state.configGuiRaw.some(e => e.id === stringObj.id)) {
+            response = await this.$axios.put(`api/player/guisettings/${obj.id}/`, stringObj)
         } else {
-            response = await this.$axios.put(`api/player/guisettings/${obj[state.configID].id}/`, stringObj)
+            response = await this.$axios.post('api/player/guisettings/', stringObj)
         }
 
         return response
     },
 
     async getPlayoutConfig ({ commit, state }) {
-        const response = await this.$axios.get('api/player/config/?configPlayout')
+        const path = state.configGui[state.configID].playout_config
+        const response = await this.$axios.get(`api/player/config/?configPlayout&path=${path}`)
 
         if (response.data) {
             commit('UPDATE_PLAYLOUT_CONFIG', response.data)