diff --git a/frontend/src/components/AppFieldSelectBox.vue b/frontend/src/components/AppFieldSelectBox.vue
index 46ba958..ae50834 100644
--- a/frontend/src/components/AppFieldSelectBox.vue
+++ b/frontend/src/components/AppFieldSelectBox.vue
@@ -50,8 +50,8 @@
             </q-input>
         </template>
 
-        <AppSelect ref="appDlg" name="アプリ" type="single" :filter="filter"
-            :updateExternalSelectAppInfo="updateExternalSelectAppInfo"></AppSelect>
+        <AppSelectBox ref="appDlg" name="アプリ" type="single" :filter="filter"
+            :updateExternalSelectAppInfo="updateExternalSelectAppInfo"></AppSelectBox>
     </show-dialog>
 </template>
 
@@ -60,7 +60,7 @@ import { defineComponent, ref, watchEffect, computed } from 'vue';
 import ShowDialog from './ShowDialog.vue';
 import FieldSelect from './FieldSelect.vue';
 import { useFlowEditorStore } from 'stores/flowEditor';
-import AppSelect from './AppSelect.vue';
+import AppSelectBox from './AppSelectBox.vue';
 interface IApp {
     id: string,
     name: string
@@ -82,7 +82,7 @@ export default defineComponent({
     components: {
         ShowDialog,
         FieldSelect,
-        AppSelect,
+        AppSelectBox,
     },
     props: {
         selectedField: {
diff --git a/frontend/src/components/AppSelect.vue b/frontend/src/components/AppSelectBox.vue
similarity index 99%
rename from frontend/src/components/AppSelect.vue
rename to frontend/src/components/AppSelectBox.vue
index 261a7e6..2e281fe 100644
--- a/frontend/src/components/AppSelect.vue
+++ b/frontend/src/components/AppSelectBox.vue
@@ -21,7 +21,7 @@ import { ref, onMounted, reactive, watchEffect } from 'vue'
 import { api } from 'boot/axios';
 
 export default {
-  name: 'AppSelect',
+  name: 'AppSelectBox',
   props: {
     name: String,
     type: String,
diff --git a/frontend/src/components/left/AppSelector.vue b/frontend/src/components/left/AppSelector.vue
index 86a3bba..08a2897 100644
--- a/frontend/src/components/left/AppSelector.vue
+++ b/frontend/src/components/left/AppSelector.vue
@@ -30,7 +30,7 @@
           </template>
         </q-input>
       </template>
-      <AppSelect ref="appDg" name="アプリ" type="single" :filter="filter"></AppSelect>
+      <AppSelectBox ref="appDg" name="アプリ" type="single" :filter="filter"></AppSelectBox>
   </ShowDialog>
 </template>
 
@@ -38,7 +38,7 @@
 import { defineComponent,ref } from 'vue';
 import {AppInfo} from '../../types/ActionTypes'
 import ShowDialog from '../../components/ShowDialog.vue';
-import AppSelect from '../../components/AppSelect.vue';
+import AppSelectBox from '../../components/AppSelectBox.vue';
 import { useFlowEditorStore } from 'stores/flowEditor';
 import { useAuthStore } from 'src/stores/useAuthStore';
 export default defineComponent({
@@ -47,7 +47,7 @@ export default defineComponent({
     "appSelected"
   ],
   components:{
-    AppSelect,
+    AppSelectBox,
     ShowDialog
   },
   setup(props, context) {
diff --git a/frontend/src/components/right/AppSelect.vue b/frontend/src/components/right/AppSelect.vue
new file mode 100644
index 0000000..7a8d5fe
--- /dev/null
+++ b/frontend/src/components/right/AppSelect.vue
@@ -0,0 +1,98 @@
+<template>
+    <div>
+        <q-field :label="displayName" labelColor="primary" stack-label>
+            <template v-slot:control>
+                <q-card flat class="full-width">
+                    <q-card-actions vertical>
+                        <q-btn color="grey-3" text-color="black"
+                            @click="() => { dgIsShow = true }">APP SELECT</q-btn>
+                    </q-card-actions>
+                    <q-card-section class="text-caption">
+                        <div v-if="selectedField">
+                            {{ selectedField.name }}
+                        </div>
+                        <div v-else>{{ placeholder }}</div>
+                    </q-card-section>
+                </q-card>
+            </template>
+        </q-field>
+    </div>
+
+    <ShowDialog v-model:visible="dgIsShow" name="アプリ選択" @close="closeDg" min-width="50vw" min-height="50vh">
+        <template v-slot:toolbar>
+            <q-input dense debounce="300" v-model="filter" placeholder="検索" clearable>
+                <template v-slot:before>
+                    <q-icon name="search" />
+                </template>
+            </q-input>
+        </template>
+        <AppSelectBox ref="appDg" name="アプリ" type="single" :filter="filter"></AppSelectBox>
+    </ShowDialog>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref, watchEffect } from 'vue';
+import ShowDialog from '../ShowDialog.vue';
+import AppSelectBox from '../AppSelectBox.vue';
+
+
+export default defineComponent({
+    inheritAttrs: false,
+    name: 'AppSelect',
+    components: {
+        ShowDialog,
+        AppSelectBox
+    },
+    props: {
+        context: {
+            type: Array<Props>,
+            default: '',
+        },
+        displayName: {
+            type: String,
+            default: '',
+        },
+        name: {
+            type: String,
+            default: '',
+        },
+        placeholder: {
+            type: String,
+            default: '',
+        },
+        modelValue: {
+            type: Object,
+            default: null
+        }
+    },
+    setup(props, { emit }) {
+        const appDg = ref()
+        const dgIsShow = ref(false)
+        const selectedField = ref()
+        const closeDg = (state: string) => {
+            dgIsShow.value = false;
+            if (state == 'OK') {
+                selectedField.value = appDg.value.selected[0];
+            }
+        };
+
+        
+
+        // console.log(props);
+        
+        
+
+        watchEffect(() => {
+            emit('update:modelValue', { app: selectedField.value });
+        });
+
+        return {
+            filter: ref(''),
+            dgIsShow,
+            appDg,
+            closeDg,
+            selectedField
+        };
+    }
+});
+</script>
diff --git a/frontend/src/components/right/PropertyList.vue b/frontend/src/components/right/PropertyList.vue
index a08141a..6519313 100644
--- a/frontend/src/components/right/PropertyList.vue
+++ b/frontend/src/components/right/PropertyList.vue
@@ -23,6 +23,7 @@ import ColorPicker from './ColorPicker.vue';
 import NumInput from './NumInput.vue';
 import DataProcessing from './DataProcessing.vue';
 import DataMapping from './DataMapping.vue';
+import AppSelect from './AppSelect.vue';
 import { IActionNode,IActionProperty,IProp } from 'src/types/ActionTypes';
 
 export default defineComponent({
@@ -39,7 +40,8 @@ export default defineComponent({
     ColorPicker,
     NumInput,
     DataProcessing,
-    DataMapping
+    DataMapping,
+    AppSelect
   },
   props: {
     nodeProps: {
diff --git a/frontend/src/pages/RuleEditor.vue b/frontend/src/pages/RuleEditor.vue
index 2793466..03453eb 100644
--- a/frontend/src/pages/RuleEditor.vue
+++ b/frontend/src/pages/RuleEditor.vue
@@ -24,7 +24,7 @@
           <q-btn :label="model+'選択'" color="primary" @click="showDg()" />
           <show-dialog v-model:visible="show" :name="model" @close="closeDg" width="400px">
             <template v-if="model=='アプリ'">
-              <app-select ref="appDg" :name="model" type="single"></app-select>
+              <app-select-box ref="appDg" :name="model" type="single"></app-select-box>
             </template>
             <template v-if="model=='フィールド'">
               <field-select ref="appDg" :name="model" type="multiple" :appId="1"></field-select>
@@ -42,7 +42,7 @@
 
 <script setup lang="ts">
 import ShowDialog from 'components/ShowDialog.vue';
-import AppSelect from 'components/AppSelect.vue';
+import AppSelectBox from 'components/AppSelectBox.vue';
 import FieldSelect from 'components/FieldSelect.vue';
 import ActionSelect from 'components/ActionSelect.vue';
 import { ref } from 'vue'