diff --git a/frontend/src/components/AppSelect.vue b/frontend/src/components/AppSelect.vue
new file mode 100644
index 0000000..0eab75a
--- /dev/null
+++ b/frontend/src/components/AppSelect.vue
@@ -0,0 +1,28 @@
+<template v-slot:list>
+  <div class="q-pa-md">
+    ppppppp
+  </div>
+</template>
+<script>
+import { ref, onMounted } from 'vue'
+import axios from 'axios'
+
+export default {
+  name: 'appSelect',
+  props: {
+    name: String,
+    type: String
+  },
+  setup() {
+    return {
+      selected: ref([]),
+    },
+      onMounted(() => {
+        console.log('Mounted');
+        axios.get('http://127.0.0.1:8000/api/v1/allapps')
+          .then(res => console.log(res.data))
+      })
+  },
+
+}
+</script>
diff --git a/frontend/src/components/ShowDialog.vue b/frontend/src/components/ShowDialog.vue
index 4aad583..f3f1c43 100644
--- a/frontend/src/components/ShowDialog.vue
+++ b/frontend/src/components/ShowDialog.vue
@@ -1,7 +1,5 @@
 <template>
   <div class="q-pa-md q-gutter-sm">
-
-
     <q-dialog :model-value="visible" persistent>
       <q-card style="min-width: 350px">
         <q-card-section>
@@ -9,46 +7,35 @@
         </q-card-section>
 
         <q-card-section class="q-pt-none">
-          <div class="q-pa-md">
-            <q-table :title="name+'リスト'" :rows="rows" :columns="columns" row-key="name" :selection="type"
-              v-model:selected="selected" />
-          </div>
+         <slot name="list"></slot>
         </q-card-section>
-
         <q-card-actions align="right" class="text-primary">
-          <q-btn flat label="確定" v-close-popup @click="CloseDialogue('OK')"/>
-          <q-btn flat label="キャンセル" v-close-popup @click="CloseDialogue('Cancel')"/>
+          <q-btn flat label="確定" v-close-popup @click="CloseDialogue('OK')" />
+          <q-btn flat label="キャンセル" v-close-popup @click="CloseDialogue('Cancel')" />
         </q-card-actions>
       </q-card>
     </q-dialog>
   </div>
 </template>
 <script>
-//import { bexContent } from 'quasar/wrappers'
-import { ref } from 'vue'
 
 export default {
-  name:'showDialog',
+  name: 'showDialog',
   props: {
-    name:String,
-    visible:Boolean,
-    type:String,
-    columns:[],
-    rows:[]
+    visible: Boolean,
   },
-  emits:[
+  emits: [
     'close'
   ],
-  setup(props,context) {
-    const CloseDialogue =(val) =>{
-      context.emit('update:visible',false);
-      context.emit('close',val);
+  setup(props, context) {
+    const CloseDialogue = (val) => {
+      context.emit('update:visible', false);
+      context.emit('close', val);
     }
 
     return {
-      CloseDialogue,
-      selected: ref([]),
-      }
-  }
+      CloseDialogue
+    }
+  },
 }
 </script>
diff --git a/frontend/src/pages/RuleEditor.vue b/frontend/src/pages/RuleEditor.vue
index 46b8aac..4ddb881 100644
--- a/frontend/src/pages/RuleEditor.vue
+++ b/frontend/src/pages/RuleEditor.vue
@@ -31,7 +31,9 @@
         </div>
         <div class="q-pa-md">
               <q-btn label="アプリ選択" color="primary" @click="showDg()" />
-              <show-dialog ref="appDg" :name="name" v-model:visible="show" :type="type" :columns="columns" :rows="rows" @close="closeDg"></show-dialog>
+              <show-dialog v-model:visible="show">
+               <app-select></app-select>
+              </show-dialog>
             </div>
       </div>
 
@@ -42,6 +44,7 @@
 
 <script setup lang="ts">
 import ShowDialog from 'components/ShowDialog.vue';
+import AppSelect from 'components/AppSelect.vue';
 import { ref } from 'vue'
 let name = 'アプリ'
 let show = ref(false);