diff --git a/dashboard/src/components/billing/BillingDetails.vue b/dashboard/src/components/billing/BillingDetails.vue
index a20634c..b6ae43c 100644
--- a/dashboard/src/components/billing/BillingDetails.vue
+++ b/dashboard/src/components/billing/BillingDetails.vue
@@ -15,18 +15,21 @@
 		<ErrorMessage class="mt-2" :message="errorMessage" />
 	</div>
 	<div v-if="addressFormRef" class="mt-6">
-		<Button
-			class="w-full"
-			variant="solid"
-			:label="$t('Update Billing Information')"
+		<n-button
+			type="primary"
+			size="medium"
+			block
 			:loading="addressFormRef.updateBillingInformation.loading"
 			@click="updateBillingInformation"
-		/>
+		>
+			{{ $t('Update Billing Information') }}
+		</n-button>
 	</div>
 </template>
 <script setup>
 import NewAddressForm from './NewAddressForm.vue';
-import { FormControl, ErrorMessage, Button, createResource } from 'jingrow-ui';
+import { FormControl, ErrorMessage, createResource } from 'jingrow-ui';
+import { NButton } from 'naive-ui';
 import { reactive, ref, inject, getCurrentInstance } from 'vue';
 
 const emit = defineEmits(['success']);