diff --git a/src/app/dashboard/profile-sections/[id]/page.tsx b/src/app/dashboard/profile-sections/[id]/page.tsx
index 68ad820..d9107e3 100644
--- a/src/app/dashboard/profile-sections/[id]/page.tsx
+++ b/src/app/dashboard/profile-sections/[id]/page.tsx
@@ -570,7 +570,7 @@ export default function SectionDetailPage() {
 
       {/* Field Create/Edit Modal */}
       {(fieldModalType === 'create' || fieldModalType === 'edit') && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 overflow-y-auto">
+        <div className="fixed inset-0 bg-black/30 flex items-center justify-center z-50 overflow-y-auto">
           <div className="bg-white rounded-lg shadow-xl max-w-2xl w-full mx-4 my-8">
             <div className="px-6 py-4 border-b border-gray-200">
               <h3 className="text-lg font-semibold text-gray-900">
@@ -844,7 +844,7 @@ export default function SectionDetailPage() {
 
       {/* Field Delete Modal */}
       {fieldModalType === 'delete' && selectedField && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+        <div className="fixed inset-0 bg-black/30 flex items-center justify-center z-50">
           <div className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
             <div className="px-6 py-4 border-b border-gray-200">
               <h3 className="text-lg font-semibold text-gray-900">Delete Field</h3>
@@ -880,7 +880,7 @@ export default function SectionDetailPage() {
 
       {/* Assign to Agent Type Modal */}
       {assignModalType === 'assign' && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+        <div className="fixed inset-0 bg-black/30 flex items-center justify-center z-50">
           <div className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
             <div className="px-6 py-4 border-b border-gray-200">
               <h3 className="text-lg font-semibold text-gray-900">Assign to Agent Type</h3>