diff --git a/dashboard/src/components/settings/RoleConfigureDialog.vue b/dashboard/src/components/settings/RoleConfigureDialog.vue
index 9c60d6a..986862d 100644
--- a/dashboard/src/components/settings/RoleConfigureDialog.vue
+++ b/dashboard/src/components/settings/RoleConfigureDialog.vue
@@ -69,7 +69,7 @@
 				</n-space>
 			</n-tab-pane>
 			<n-tab-pane name="settings" :tab="$t('Settings')">
-				<n-space vertical :size="20">
+				<n-space vertical :size="8">
 					<n-card>
 						<n-form-item>
 							<div class="flex items-center justify-between w-full">
@@ -90,86 +90,72 @@
 						</n-form-item>
 					</n-card>
 					<n-card>
-						<h2 class="mb-4 text-base font-semibold">{{ $t('Page Access Permissions') }}</h2>
-						<n-space vertical :size="16">
-							<n-form-item>
-								<div class="flex items-center justify-between w-full">
-									<span class="text-base">{{ $t('Allow Billing Access') }}</span>
-									<n-switch
-										:value="allowBilling"
-										@update:value="(val) => allowBilling = val"
-										:disabled="adminAccess"
-										size="medium"
-									/>
-								</div>
-							</n-form-item>
-							<n-form-item>
-								<div class="flex items-center justify-between w-full">
-									<span class="text-base">{{ $t('Allow Apps Access') }}</span>
-									<n-switch
-										:value="allowApps"
-										@update:value="(val) => allowApps = val"
-										:disabled="adminAccess"
-										size="medium"
-									/>
-								</div>
-							</n-form-item>
-							<n-form-item v-if="$team.pg.jerp_partner">
-								<div class="flex items-center justify-between w-full">
-									<span class="text-base">{{ $t('Allow Partner Access') }}</span>
-									<n-switch
-										:value="allowPartner"
-										@update:value="(val) => allowPartner = val"
-										:disabled="adminAccess"
-										size="medium"
-									/>
-								</div>
-							</n-form-item>
-							<n-form-item>
-								<div class="flex items-center justify-between w-full">
-									<span class="text-base">{{ $t('Allow Site Creation') }}</span>
-									<n-switch
-										:value="allowSiteCreation"
-										@update:value="(val) => allowSiteCreation = val"
-										:disabled="adminAccess"
-										size="medium"
-									/>
-								</div>
-							</n-form-item>
-							<n-form-item>
-								<div class="flex items-center justify-between w-full">
-									<span class="text-base">{{ $t('Allow Release Group Creation') }}</span>
-									<n-switch
-										:value="allowBenchCreation"
-										@update:value="(val) => allowBenchCreation = val"
-										:disabled="adminAccess"
-										size="medium"
-									/>
-								</div>
-							</n-form-item>
-							<n-form-item>
-								<div class="flex items-center justify-between w-full">
-									<span class="text-base">{{ $t('Allow Server Creation') }}</span>
-									<n-switch
-										:value="allowServerCreation"
-										@update:value="(val) => allowServerCreation = val"
-										:disabled="adminAccess"
-										size="medium"
-									/>
-								</div>
-							</n-form-item>
-							<n-form-item>
-								<div class="flex items-center justify-between w-full">
-									<span class="text-base">{{ $t('Allow Webhook Configuration') }}</span>
-									<n-switch
-										:value="allowWebhookConfiguration"
-										@update:value="(val) => allowWebhookConfiguration = val"
-										:disabled="adminAccess"
-										size="medium"
-									/>
-								</div>
-							</n-form-item>
-						</n-space>
+						<h2 class="mb-2 text-base font-semibold">{{ $t('Page Access Permissions') }}</h2>
+						<div class="permissions-list">
+							<div class="permission-item">
+								<span class="text-base">{{ $t('Allow Billing Access') }}</span>
+								<n-switch
+									:value="allowBilling"
+									@update:value="(val) => allowBilling = val"
+									:disabled="adminAccess"
+									size="medium"
+								/>
+							</div>
+							<div class="permission-item">
+								<span class="text-base">{{ $t('Allow Apps Access') }}</span>
+								<n-switch
+									:value="allowApps"
+									@update:value="(val) => allowApps = val"
+									:disabled="adminAccess"
+									size="medium"
+								/>
+							</div>
+							<div v-if="$team.pg.jerp_partner" class="permission-item">
+								<span class="text-base">{{ $t('Allow Partner Access') }}</span>
+								<n-switch
+									:value="allowPartner"
+									@update:value="(val) => allowPartner = val"
+									:disabled="adminAccess"
+									size="medium"
+								/>
+							</div>
+							<div class="permission-item">
+								<span class="text-base">{{ $t('Allow Site Creation') }}</span>
+								<n-switch
+									:value="allowSiteCreation"
+									@update:value="(val) => allowSiteCreation = val"
+									:disabled="adminAccess"
+									size="medium"
+								/>
+							</div>
+							<div class="permission-item">
+								<span class="text-base">{{ $t('Allow Release Group Creation') }}</span>
+								<n-switch
+									:value="allowBenchCreation"
+									@update:value="(val) => allowBenchCreation = val"
+									:disabled="adminAccess"
+									size="medium"
+								/>
+							</div>
+							<div class="permission-item">
+								<span class="text-base">{{ $t('Allow Server Creation') }}</span>
+								<n-switch
+									:value="allowServerCreation"
+									@update:value="(val) => allowServerCreation = val"
+									:disabled="adminAccess"
+									size="medium"
+								/>
+							</div>
+							<div class="permission-item">
+								<span class="text-base">{{ $t('Allow Webhook Configuration') }}</span>
+								<n-switch
+									:value="allowWebhookConfiguration"
+									@update:value="(val) => allowWebhookConfiguration = val"
+									:disabled="adminAccess"
+									size="medium"
+								/>
+							</div>
+						</div>
 					</n-card>
 				</n-space>
 			</n-tab-pane>
@@ -426,8 +412,38 @@ export default {
 	padding: 20px 0;
 }
 
-:deep(.role-configure-modal .n-form-item) {
-	margin-bottom: 0;
+:deep(.role-configure-modal .n-card-body) {
+	padding: 12px 24px;
+}
+
+.permissions-list {
+	display: flex;
+	flex-direction: column;
+}
+
+.permission-item {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 8px 12px;
+	margin: 0 -12px;
+	border-radius: 4px;
+}
+
+.permission-item:nth-child(even) {
+	background-color: #f9fafb;
+}
+
+.permission-item:nth-child(odd) {
+	background-color: transparent;
+}
+
+.permission-item:hover {
+	background-color: #f3f4f6;
+}
+
+:deep(.role-configure-modal .n-switch) {
+	transition: all 0.2s ease;
 }
 
 @media (max-width: 768px) {