diff --git a/frontend/src/components/ShowDialog.vue b/frontend/src/components/ShowDialog.vue
new file mode 100644
index 0000000..4aad583
--- /dev/null
+++ b/frontend/src/components/ShowDialog.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="q-pa-md q-gutter-sm">
+
+
+    <q-dialog :model-value="visible" persistent>
+      <q-card style="min-width: 350px">
+        <q-card-section>
+          <div class="text-h6">{{ name }}選択</div>
+        </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>
+        </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-card-actions>
+      </q-card>
+    </q-dialog>
+  </div>
+</template>
+<script>
+//import { bexContent } from 'quasar/wrappers'
+import { ref } from 'vue'
+
+export default {
+  name:'showDialog',
+  props: {
+    name:String,
+    visible:Boolean,
+    type:String,
+    columns:[],
+    rows:[]
+  },
+  emits:[
+    'close'
+  ],
+  setup(props,context) {
+    const CloseDialogue =(val) =>{
+      context.emit('update:visible',false);
+      context.emit('close',val);
+    }
+
+    return {
+      CloseDialogue,
+      selected: ref([]),
+      }
+  }
+}
+</script>
diff --git a/frontend/src/pages/RuleEditor.vue b/frontend/src/pages/RuleEditor.vue
index c274ec9..46b8aac 100644
--- a/frontend/src/pages/RuleEditor.vue
+++ b/frontend/src/pages/RuleEditor.vue
@@ -29,12 +29,64 @@
               </q-list>
             </q-btn-dropdown>
         </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>
+            </div>
       </div>
+
     </div>
   </q-page>
+
 </template>
 
 <script setup lang="ts">
+import ShowDialog from 'components/ShowDialog.vue';
+import { ref } from 'vue'
+let name = 'アプリ'
+let show = ref(false);
+let type = 'multiple';
+let columns = [
+  {
+    name: 'id',
+    required: true,
+    label: 'アプリID',
+    align: 'left',
+    field: 'id',
+    sortable: true
+  },
+  { name: 'name', align: 'center', label: 'アプリ名', field: 'name', sortable: true },
+  { name: 'creator', label: '作成者', field: 'creator', sortable: true },
+  { name: 'createdate', label: '作成日時', field: 'createdate' }
+]
+
+let rows = [
+  {
+    id:1,
+    name: '日報アプリ１',
+    creator: '日報　太郎',
+    createdate: '2023/07/22 11:21:48'
+  },
+  {
+    id:2,
+    name: '日報アプリ２',
+    creator: '日報　太郎',
+    createdate: '2023/07/25 14:10:56'
+  },
+]
+let appDg = ref(null);
+const showDg = () => {
+  show.value = true;
+};
+
+
+const closeDg = (val) => {
+  if(val == 'OK')
+  {
+    alert(JSON.stringify(appDg.value.selected));
+  }
+
+};
 interface Props {
   title: string;
   actions:string[];