diff --git a/frontend/src/components/CascadingDropDownBox.vue b/frontend/src/components/CascadingDropDownBox.vue
index 75346df..5e508a1 100644
--- a/frontend/src/components/CascadingDropDownBox.vue
+++ b/frontend/src/components/CascadingDropDownBox.vue
@@ -23,8 +23,7 @@
           <q-separator class="q-mt-md" />
           <div class="q-my-md row justify-between items-center">
             データソースにフィールドを設定する :
-            <q-btn icon="add" size="sm" padding="xs" outline color="primary"
-              @click="addRow" />
+            <q-btn icon="add" size="sm" padding="xs" outline color="primary" @click="addRow" />
           </div>
           <q-virtual-scroll style="max-height: 13.5rem;" :items="data.fieldList" separator v-slot="{ item, index }">
             <div class="row justify-between items-center q-my-md">
@@ -55,18 +54,29 @@
 
       <q-step :name="2" title="ドロップダウンコンポーネントの設定" icon="multiple_stop" active-icon="multiple_stop"
         done-icon="multiple_stop" :done="step > 2">
-        <div class="row q-pa-sm q-col-gutter-x-md flex-center">
-          <div class="col-5">データソース</div>
-          <div class="col-5">ドロップダウン選択</div>
-          <div class="col-2"></div>
+        <div class="row q-pa-sm q-col-gutter-x-sm flex-center">
+          <div class="col-grow row q-col-gutter-x-sm">
+            <div class="col-6">データソース</div>
+            <div class="col-6">ドロップダウン選択</div>
+          </div>
+          <div class="col-auto">
+            <div style="width: 88px; height: 1px;"></div>
+          </div>
         </div>
-        <div v-for="(item) in data.fieldList" :key="item.id" class="row q-pa-sm q-col-gutter-x-md flex-center">
-          <div class="col-5">{{ item.source.name }}</div>
-          <div class="col-5">{{ item.dropDown?.name }}</div>
-          <div class="col-2">
+        <div v-for="(item) in data.fieldList" :key="item.id" class="row q-pa-sm q-col-gutter-x-sm flex-center">
+          <div class="col-grow row q-col-gutter-x-sm">
+
+            <div class="col-6">{{ item.source.name }}</div>
+            <div class="col-6">{{ item.dropDown?.name }}</div>
+          </div>
+          <div class="col-auto">
             <div class="row justify-end">
-              <q-btn outline dense label="変更" padding="xs sm" color="primary"
-                @click="() => showFieldDialog(item, 'dropDown')" />
+              <q-btn-group outline>
+                <q-btn outline dense label="変更" padding="xs sm" color="primary"
+                  @click="() => showFieldDialog(item, 'dropDown')" />
+                <q-btn outline dense label="消去" padding="xs sm" color="primary"
+                  @click="() => item.dropDown = undefined" />
+              </q-btn-group>
             </div>
           </div>
         </div>
@@ -193,7 +203,7 @@ export default defineComponent({
     const updateSelectField = (f: any, item: any, index: number, keyName: 'source' | 'dropDown') => {
       const [selected] = f.value;
       const isDuplicate = data.fieldList.some((field, idx) =>
-        idx !== index && field[keyName]?.code === selected.code
+        idx !== index && (field[keyName]?.code === selected.code || field[keyName]?.label === selected.label)
       );
 
       if (isDuplicate) {