diff --git a/src/components/Bill/BillDrawer.vue b/src/components/Bill/BillDrawer.vue
index 0386c8d..57a1bc8 100644
--- a/src/components/Bill/BillDrawer.vue
+++ b/src/components/Bill/BillDrawer.vue
@@ -32,13 +32,13 @@
         </div>
 
         <el-radio-group v-model="billStore.currentBillRecord.category" class="bill-category-group">
-          <el-radio v-for="(item, index) in billInfo.billCategoryList"
+          <el-radio-button v-for="(item, index) in billInfo.billCategoryList"
                     :value="item.name" :key="index">
             <template #default>
-              <i :class="item.icon" :style="{color: item.color}"/>
+              <i :class="item.icon"/>
               <span style="margin-left: 5px;">{{ item.name }}</span>
             </template>
-          </el-radio>
+          </el-radio-button>
         </el-radio-group>
 
         <div class="bill-gap"></div>
@@ -91,7 +91,7 @@ import { useBillStore } from '@/store/bill.ts'
 import { Location, Document } from '@element-plus/icons-vue'
 import { ElMessage, FormRules, UploadUserFile } from 'element-plus'
 import { billRecordRules } from '@/utils/element/elRules.ts'
-import { nextTick, onMounted, reactive, ref, watch } from 'vue'
+import { nextTick, reactive, ref, watch } from 'vue'
 import { IBillCategory } from '@/types/bill.ts'
 import { commonElMessageBox } from 'vue3-common/utils/elUtil'
 import NumberInput from '@/components/NumberInput.vue'
@@ -244,9 +244,14 @@ const deleteClick = () => {
     }
 
     .bill-category-group {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      column-gap: 10px;
+      display: flex;
+      gap: 2px;
+
+      .el-radio-button {
+        .el-radio-button__inner {
+          border: none;
+        }
+      }
     }
 
     .bill-gap {