diff --git a/src/renderer/src/App.vue b/src/renderer/src/App.vue
index 58d98a6..9359cb9 100644
--- a/src/renderer/src/App.vue
+++ b/src/renderer/src/App.vue
@@ -1,21 +1,28 @@
 <script setup lang="ts">
 import COMselect from './components/COMselect.vue'
 import ProgramSelector from './components/ProgramSelector.vue'
-import { onMounted } from 'vue'
+import { getTransitionRawChildren, onMounted } from 'vue'
 import { ref } from 'vue'
 import * as logTimestamp from 'log-timestamp'
 import draggable from 'vuedraggable'
 import ProgramGroup from './components/ProgramGroup.vue'
 // import MovieCard from './components/MovieCard.vue'
 
+
 // const movies = ref([])
 // const apiKey = 'a0eb411ca9c81896004dce1d27a7245b'
 const configuration = ref('Loading....')
 const serialPorts = ref('Loading Serial ports.... ')
-const installedApps = ref({})
+const installedApps = ref([])
 
 //model variables for user provided input
-const programCounter = ref([''])
+const programCounter = ref([
+  'python.exe',
+  'nvm.exe',
+  'narrator.exe',
+  ['TimeCamp.exe', 'charmap.exe'],
+  'nvm.exe'
+])
 const serialPortSelection = ref('select the COM port... ')
 
 const ipcHandle = () => window.electron.ipcRenderer.send('ping')
@@ -39,6 +46,10 @@ const getSerialPorts = async () => {
 
 async function getInstalledApps() {
   installedApps.value = await window.electron.ipcRenderer.invoke('getInstalledApps')
+  // console.log(installedApps.value)
+  installedApps.value.forEach((app) => {
+    app.appid = app.appid.split('\\').pop()
+  })
 }
 
 function deleteProgramRow(index) {
@@ -47,13 +58,21 @@ function deleteProgramRow(index) {
   console.log(`Got event to delete row for index : ${index}`)
 }
 
+function deleteAppFromCollection(index, childIndex) {
+  console.log(`The Indexi is ${index} and the child index is ${childIndex}`)
+  programCounter.value[index].splice(childIndex, 1)
+}
 function addProgram() {
   programCounter.value.push('')
 }
-function removeProgram(id) {
-  programCounter.value.splice(id, 1)
+
+function addAppToCollection(index, childIndex) {
+  programCounter.value[index].push('')
 }
 
+function updateCollectionApp(index, childIndex, appName) {
+  programCounter.value[index][childIndex] = appName
+}
 onMounted(() => {
   // getTrendingMovies('day')
   getSerialPorts()
@@ -63,34 +82,21 @@ onMounted(() => {
 
 <template>
   <img alt="logo" class="logo" src="./assets/electron.svg" />
-  <!-- <div class="creator">Powered by electron-vite</div>
-
-
-  <Versions /> -->
 
   <COMselect
     v-model="serialPortSelection"
     :serialports="serialPorts"
     :installed-apps="installedApps"
   />
-  <div class="row mt-2">
+  <!-- <div class="row mt-2">
     <button type="button" class="col-auto" @click="ipcHandle">Send Ping</button>
     <button type="button" class="col-auto" @click="getSerialPorts">Load config</button>
   </div>
-  <div>{{ configuration }}</div>
-  <!-- <div>
-    <div v-for="(count, i) in programCounter" :key="i">
-      <ProgramSelector
-        :installed-apps="installedApps"
-        :selected-app="count"
-        @update-app="programCounter[i] = $event"
-        @delete-row="deleteProgramRow(i)"
-      />
-    </div>
-  </div> -->
+  <div>{{ configuration }}</div> -->
+
   <draggable v-model="programCounter">
     <template #item="{ element, index }">
-      <div v-if=" typeof element === 'string'">
+      <div v-if="typeof element === 'string'">
         <ProgramSelector
           :installed-apps="installedApps"
           :selected-app="element"
@@ -98,15 +104,22 @@ onMounted(() => {
           @delete-row="deleteProgramRow(index)"
         />
       </div>
-      <div v-else>
-        <ProgramGroup :installedApps="installedApps" />
+      <div v-else class="border-top border-bottom py-2 mt-2">
+        <ProgramGroup
+          :installed-apps="installedApps"
+          :program-counter="element"
+          @delete-row="deleteProgramRow(index)"
+          @update-app="(appName, childIndex) => updateCollectionApp(index, childIndex, appName)"
+          @add-app="(childIndex) => addAppToCollection(index, childIndex)"
+          @delete-app="(childIndex) => deleteAppFromCollection(index, childIndex)"
+        />
       </div>
     </template>
   </draggable>
 
   <div class="row mt-2">
     <button class="col-auto" @click="addProgram">Add</button>
-    <button class="col-auto" click="removeProgram">Remove</button>
+    <!-- <button class="col-auto" click="removeProgram">Remove</button>/ -->
   </div>
 
   <div class="row">
@@ -114,9 +127,6 @@ onMounted(() => {
     <div class="col-auto">{{ serialPortSelection }}</div>
   </div>
   <div>{{ programCounter }}</div>
-
-  <ProgramGroup :installedApps="installedApps" />
-
   <!--   
   <div class="container">
     <div class="text-center">
diff --git a/src/renderer/src/components/ProgramGroup.vue b/src/renderer/src/components/ProgramGroup.vue
index f9bd56b..80a42c2 100644
--- a/src/renderer/src/components/ProgramGroup.vue
+++ b/src/renderer/src/components/ProgramGroup.vue
@@ -8,40 +8,42 @@ const props = defineProps({
     type: Array,
     required: true
   },
-  selectedApp: {
-    type: String,
+  programCounter: {
+    type: Array,
     required: false
   }
 })
 
-const programCounter = ref([''])
+const emit = defineEmits(['update-app', 'delete-row', 'add-app', 'delete-app'])
 
-const emit = defineEmits(['update-app', 'delete-row'])
+// function deleteProgramRow(index) {
+//   programCounter.value.splice(index, 1)
+//   // Vue.delete(programCounter.value, index)
+//   console.log(`Got event to delete row for index : ${index}`)
+// }
 
-function deleteProgramRow(index) {
-  programCounter.value.splice(index, 1)
-  // Vue.delete(programCounter.value, index)
-  console.log(`Got event to delete row for index : ${index}`)
-}
+// function addProgramRow() {
+//   programCounter.value.push('')
+// }
 
-function addProgramRow() {
-  programCounter.value.push('')
-}
 </script>
 <template>
   <div>{{ programCounter }}</div>
   <div class="row">
-    <div class="col-auto">Select programs</div>
-    <div><i class="fas fa-plus col-auto" @click="addProgramRow"></i></div>
+    <div class="col">Select programs</div>
+    <div class="col  text-end">
+      <i class="fas fa-plus p-2" @click="$emit('add-app', index)"></i>
+      <i class="fas fa-trash-alt" @click="$emit('delete-row')"></i>
+    </div>
   </div>
-  <draggable v-model="programCounter">
+  <draggable :list="programCounter">
     <template #item="{ element, index }">
       <div>
         <ProgramSelector
           :installed-apps="installedApps"
           :selected-app="element"
-          @update-app="programCounter[index] = $event"
-          @delete-row="deleteProgramRow(index)"
+          @delete-row="$emit('delete-app', index)"
+          @update-app="$emit('update-app', $event, index)"
         />
       </div>
     </template>