From 287faa45709f89d7e923462551a0ab7520e669c7 Mon Sep 17 00:00:00 2001
From: pradeepkumar <kongupradeep@live.com>
Date: Wed, 11 Feb 2026 03:34:12 +0530
Subject: [PATCH] feat: add action icons to table row actions and refine focus
 styles for various form elements.

---
 .../agent-types/[id]/sections/page.tsx        |  2 +-
 src/app/dashboard/agent-types/page.tsx        | 30 +++++++++-----
 .../dashboard/profile-sections/[id]/page.tsx  | 38 +++++++++---------
 src/app/dashboard/profile-sections/page.tsx   | 40 +++++++++++++------
 src/app/dashboard/users/[id]/page.tsx         |  4 +-
 src/app/login/page.tsx                        |  4 +-
 6 files changed, 73 insertions(+), 45 deletions(-)

diff --git a/src/app/dashboard/agent-types/[id]/sections/page.tsx b/src/app/dashboard/agent-types/[id]/sections/page.tsx
index 380de86..b8d7e65 100644
--- a/src/app/dashboard/agent-types/[id]/sections/page.tsx
+++ b/src/app/dashboard/agent-types/[id]/sections/page.tsx
@@ -297,7 +297,7 @@ export default function AgentTypeSectionsPage() {
                       type="checkbox"
                       checked={section.isRequired}
                       onChange={() => toggleRequired(index)}
-                      className="rounded border-[#e5e7eb] text-[#f5a623] focus:ring-[#f5a623]"
+                      className="rounded border-[#e5e7eb] text-[#f5a623] focus:ring-0"
                     />
                     <span className="text-sm text-[#666666]">Required</span>
                   </label>
diff --git a/src/app/dashboard/agent-types/page.tsx b/src/app/dashboard/agent-types/page.tsx
index e4a8a6a..87abd70 100644
--- a/src/app/dashboard/agent-types/page.tsx
+++ b/src/app/dashboard/agent-types/page.tsx
@@ -159,7 +159,7 @@ export default function AgentTypesPage() {
                   type="checkbox"
                   checked={showInactive}
                   onChange={(e) => setShowInactive(e.target.checked)}
-                  className="rounded border-[#e5e7eb] text-[#f5a623] focus:ring-[#f5a623]"
+                  className="rounded border-[#e5e7eb] text-[#f5a623] focus:ring-0"
                 />
                 <span>Show Inactive</span>
               </label>
@@ -273,20 +273,32 @@ export default function AgentTypesPage() {
                     <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                       <button
                         onClick={() => router.push(`/dashboard/agent-types/${agentType.id}/sections`)}
-                        className="text-[#5ba4a4] hover:text-[#5ba4a4]/80 mr-4"
+                        className="text-[#5ba4a4] hover:text-[#5ba4a4]/80 mr-3 inline-flex items-center gap-1"
+                        title="Sections"
                       >
+                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 10h16M4 14h16M4 18h16" />
+                        </svg>
                         Sections
                       </button>
                       <button
                         onClick={() => openEditModal(agentType)}
-                        className="text-[#f5a623] hover:text-[#e09620] mr-4"
+                        className="text-[#f5a623] hover:text-[#e09620] mr-3 inline-flex items-center gap-1"
+                        title="Edit"
                       >
+                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                        </svg>
                         Edit
                       </button>
                       <button
                         onClick={() => openDeleteModal(agentType)}
-                        className="text-red-600 hover:text-red-900"
+                        className="text-red-600 hover:text-red-900 inline-flex items-center gap-1"
+                        title="Delete"
                       >
+                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                        </svg>
                         Delete
                       </button>
                     </td>
@@ -322,7 +334,7 @@ export default function AgentTypesPage() {
                     type="text"
                     value={formData.name}
                     onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-                    className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:ring-2 focus:ring-[#f5a623] focus:border-[#f5a623] text-[#00293d] bg-white"
+                    className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:outline-none focus:border-[#f5a623] text-[#00293d] bg-white"
                     required
                   />
                 </div>
@@ -334,7 +346,7 @@ export default function AgentTypesPage() {
                     value={formData.description}
                     onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                     rows={3}
-                    className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:ring-2 focus:ring-[#f5a623] focus:border-[#f5a623] text-[#00293d] bg-white"
+                    className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:outline-none focus:border-[#f5a623] text-[#00293d] bg-white"
                   />
                 </div>
                 <div>
@@ -345,7 +357,7 @@ export default function AgentTypesPage() {
                     type="text"
                     value={formData.icon}
                     onChange={(e) => setFormData({ ...formData, icon: e.target.value })}
-                    className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:ring-2 focus:ring-[#f5a623] focus:border-[#f5a623] text-[#00293d] bg-white placeholder:text-[#666666]"
+                    className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:outline-none focus:border-[#f5a623] text-[#00293d] bg-white placeholder:text-[#666666]"
                     placeholder="e.g. house, building, key"
                   />
                 </div>
@@ -360,7 +372,7 @@ export default function AgentTypesPage() {
                     onFocus={(e) => e.target.select()}
                     placeholder="0"
                     min={0}
-                    className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:ring-2 focus:ring-[#f5a623] focus:border-[#f5a623] text-[#00293d] bg-white placeholder:text-[#666666]"
+                    className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:outline-none focus:border-[#f5a623] text-[#00293d] bg-white placeholder:text-[#666666]"
                   />
                 </div>
                 <div className="flex items-center">
@@ -369,7 +381,7 @@ export default function AgentTypesPage() {
                     id="isActive"
                     checked={formData.isActive}
                     onChange={(e) => setFormData({ ...formData, isActive: e.target.checked })}
-                    className="rounded border-[#e5e7eb] text-[#f5a623] focus:ring-[#f5a623]"
+                    className="rounded border-[#e5e7eb] text-[#f5a623] focus:ring-0"
                   />
                   <label htmlFor="isActive" className="ml-2 text-sm text-[#00293d] font-serif">
                     Active
diff --git a/src/app/dashboard/profile-sections/[id]/page.tsx b/src/app/dashboard/profile-sections/[id]/page.tsx
index 1e2bf2f..b6ed552 100644
--- a/src/app/dashboard/profile-sections/[id]/page.tsx
+++ b/src/app/dashboard/profile-sections/[id]/page.tsx
@@ -500,7 +500,7 @@ export default function SectionDetailPage() {
                 </div>
                 <button
                   onClick={() => handleToggleGlobal(!section.isGlobal)}
-                  className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-[#5ba4a4] focus:ring-offset-2 ${
+                  className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
                     section.isGlobal ? 'bg-[#5ba4a4]' : 'bg-[#e8f0ee]'
                   }`}
                   role="switch"
@@ -594,7 +594,7 @@ export default function SectionDetailPage() {
                       type="text"
                       value={fieldForm.name}
                       onChange={(e) => setFieldForm({ ...fieldForm, name: e.target.value })}
-                      className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:ring-2 focus:ring-[#f5a623] focus:border-[#f5a623] text-[#00293d] bg-white"
+                      className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:outline-none focus:border-[#f5a623] text-[#00293d] bg-white"
                       required
                     />
                   </div>
@@ -605,7 +605,7 @@ export default function SectionDetailPage() {
                     <select
                       value={fieldForm.fieldType}
                       onChange={(e) => setFieldForm({ ...fieldForm, fieldType: e.target.value as FieldType })}
-                      className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:ring-2 focus:ring-[#f5a623] focus:border-[#f5a623] text-[#00293d] bg-white"
+                      className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:outline-none focus:border-[#f5a623] text-[#00293d] bg-white"
                     >
                       {FIELD_TYPES.map((ft) => (
                         <option key={ft.value} value={ft.value}>
@@ -624,7 +624,7 @@ export default function SectionDetailPage() {
                     type="text"
                     value={fieldForm.description}
                     onChange={(e) => setFieldForm({ ...fieldForm, description: e.target.value })}
-                    className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:ring-2 focus:ring-[#f5a623] focus:border-[#f5a623] text-[#00293d] bg-white placeholder:text-[#666666]"
+                    className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:outline-none focus:border-[#f5a623] text-[#00293d] bg-white placeholder:text-[#666666]"
                     placeholder="Help text for this field"
                   />
                 </div>
@@ -638,7 +638,7 @@ export default function SectionDetailPage() {
                       type="text"
                       value={fieldForm.placeholder}
                       onChange={(e) => setFieldForm({ ...fieldForm, placeholder: e.target.value })}
-                      className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:ring-2 focus:ring-[#f5a623] focus:border-[#f5a623] text-[#00293d] bg-white"
+                      className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:outline-none focus:border-[#f5a623] text-[#00293d] bg-white"
                     />
                   </div>
                   <div>
@@ -649,7 +649,7 @@ export default function SectionDetailPage() {
                       type="text"
                       value={fieldForm.defaultValue}
                       onChange={(e) => setFieldForm({ ...fieldForm, defaultValue: e.target.value })}
-                      className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:ring-2 focus:ring-[#f5a623] focus:border-[#f5a623] text-[#00293d] bg-white"
+                      className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:outline-none focus:border-[#f5a623] text-[#00293d] bg-white"
                     />
                   </div>
                 </div>
@@ -666,7 +666,7 @@ export default function SectionDetailPage() {
                       onFocus={(e) => e.target.select()}
                       placeholder="0"
                       min={0}
-                      className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:ring-2 focus:ring-[#f5a623] focus:border-[#f5a623] text-[#00293d] bg-white placeholder:text-[#666666]"
+                      className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:outline-none focus:border-[#f5a623] text-[#00293d] bg-white placeholder:text-[#666666]"
                     />
                   </div>
                   <div className="flex items-center space-x-6 pt-6">
@@ -676,7 +676,7 @@ export default function SectionDetailPage() {
                         id="fieldIsActive"
                         checked={fieldForm.isActive}
                         onChange={(e) => setFieldForm({ ...fieldForm, isActive: e.target.checked })}
-                        className="rounded border-[#e5e7eb] text-[#f5a623] focus:ring-[#f5a623]"
+                        className="rounded border-[#e5e7eb] text-[#f5a623] focus:ring-0"
                       />
                       <label htmlFor="fieldIsActive" className="ml-2 text-sm text-[#00293d] font-serif">
                         Active
@@ -688,7 +688,7 @@ export default function SectionDetailPage() {
                         id="fieldIsRequired"
                         checked={fieldForm.isRequired}
                         onChange={(e) => setFieldForm({ ...fieldForm, isRequired: e.target.checked })}
-                        className="rounded border-[#e5e7eb] text-red-600 focus:ring-red-500"
+                        className="rounded border-[#e5e7eb] text-red-600 focus:ring-0"
                       />
                       <label htmlFor="fieldIsRequired" className="ml-2 text-sm text-[#00293d] font-serif">
                         Required
@@ -714,7 +714,7 @@ export default function SectionDetailPage() {
                       id="fieldIsSearchableOnly"
                       checked={fieldForm.isSearchableOnly}
                       onChange={(e) => setFieldForm({ ...fieldForm, isSearchableOnly: e.target.checked })}
-                      className="mt-1 rounded border-[#e5e7eb] text-amber-600 focus:ring-amber-500"
+                      className="mt-1 rounded border-[#e5e7eb] text-amber-600 focus:ring-0"
                     />
                   </div>
                 </div>
@@ -731,14 +731,14 @@ export default function SectionDetailPage() {
                         value={optionInput.value}
                         onChange={(e) => setOptionInput({ ...optionInput, value: e.target.value })}
                         placeholder="Value"
-                        className="flex-1 px-3 py-2 border border-[#e5e7eb] rounded-xl focus:ring-2 focus:ring-[#f5a623] focus:border-[#f5a623] text-sm text-[#00293d] bg-white placeholder:text-[#666666]"
+                        className="flex-1 px-3 py-2 border border-[#e5e7eb] rounded-xl focus:outline-none focus:border-[#f5a623] text-sm text-[#00293d] bg-white placeholder:text-[#666666]"
                       />
                       <input
                         type="text"
                         value={optionInput.label}
                         onChange={(e) => setOptionInput({ ...optionInput, label: e.target.value })}
                         placeholder="Label"
-                        className="flex-1 px-3 py-2 border border-[#e5e7eb] rounded-xl focus:ring-2 focus:ring-[#f5a623] focus:border-[#f5a623] text-sm text-[#00293d] bg-white placeholder:text-[#666666]"
+                        className="flex-1 px-3 py-2 border border-[#e5e7eb] rounded-xl focus:outline-none focus:border-[#f5a623] text-sm text-[#00293d] bg-white placeholder:text-[#666666]"
                       />
                       <button
                         type="button"
@@ -789,7 +789,7 @@ export default function SectionDetailPage() {
                           value={fieldForm.rangeConfig?.min || 0}
                           onChange={(e) => updateRangeConfig('min', e.target.value)}
                           onFocus={(e) => e.target.select()}
-                          className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:ring-2 focus:ring-[#f5a623] focus:border-[#f5a623] text-sm text-[#00293d] bg-white"
+                          className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:outline-none focus:border-[#f5a623] text-sm text-[#00293d] bg-white"
                         />
                       </div>
                       <div>
@@ -799,7 +799,7 @@ export default function SectionDetailPage() {
                           value={fieldForm.rangeConfig?.max || 100}
                           onChange={(e) => updateRangeConfig('max', e.target.value)}
                           onFocus={(e) => e.target.select()}
-                          className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:ring-2 focus:ring-[#f5a623] focus:border-[#f5a623] text-sm text-[#00293d] bg-white"
+                          className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:outline-none focus:border-[#f5a623] text-sm text-[#00293d] bg-white"
                         />
                       </div>
                       <div>
@@ -810,7 +810,7 @@ export default function SectionDetailPage() {
                           onChange={(e) => updateRangeConfig('step', e.target.value)}
                           onFocus={(e) => e.target.select()}
                           min={1}
-                          className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:ring-2 focus:ring-[#f5a623] focus:border-[#f5a623] text-sm text-[#00293d] bg-white"
+                          className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:outline-none focus:border-[#f5a623] text-sm text-[#00293d] bg-white"
                         />
                       </div>
                       <div>
@@ -820,7 +820,7 @@ export default function SectionDetailPage() {
                           value={fieldForm.rangeConfig?.unit || ''}
                           onChange={(e) => updateRangeConfig('unit', e.target.value)}
                           placeholder="e.g., years"
-                          className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:ring-2 focus:ring-[#f5a623] focus:border-[#f5a623] text-sm text-[#00293d] bg-white placeholder:text-[#666666]"
+                          className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:outline-none focus:border-[#f5a623] text-sm text-[#00293d] bg-white placeholder:text-[#666666]"
                         />
                       </div>
                     </div>
@@ -905,7 +905,7 @@ export default function SectionDetailPage() {
                   <select
                     value={assignForm.agentTypeId}
                     onChange={(e) => setAssignForm({ ...assignForm, agentTypeId: e.target.value })}
-                    className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:ring-2 focus:ring-[#f5a623] focus:border-[#f5a623] text-[#00293d] bg-white"
+                    className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:outline-none focus:border-[#f5a623] text-[#00293d] bg-white"
                     required
                   >
                     <option value="">Select agent type...</option>
@@ -927,7 +927,7 @@ export default function SectionDetailPage() {
                     onFocus={(e) => e.target.select()}
                     placeholder="0"
                     min={0}
-                    className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:ring-2 focus:ring-[#f5a623] focus:border-[#f5a623] text-[#00293d] bg-white placeholder:text-[#666666]"
+                    className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:outline-none focus:border-[#f5a623] text-[#00293d] bg-white placeholder:text-[#666666]"
                   />
                 </div>
                 <div className="flex items-center">
@@ -936,7 +936,7 @@ export default function SectionDetailPage() {
                     id="assignIsRequired"
                     checked={assignForm.isRequired}
                     onChange={(e) => setAssignForm({ ...assignForm, isRequired: e.target.checked })}
-                    className="rounded border-[#e5e7eb] text-[#f5a623] focus:ring-[#f5a623]"
+                    className="rounded border-[#e5e7eb] text-[#f5a623] focus:ring-0"
                   />
                   <label htmlFor="assignIsRequired" className="ml-2 text-sm text-[#00293d] font-serif">
                     Required section for this agent type
diff --git a/src/app/dashboard/profile-sections/page.tsx b/src/app/dashboard/profile-sections/page.tsx
index 428a8a1..ae7cdef 100644
--- a/src/app/dashboard/profile-sections/page.tsx
+++ b/src/app/dashboard/profile-sections/page.tsx
@@ -173,7 +173,7 @@ export default function ProfileSectionsPage() {
                   type="checkbox"
                   checked={showInactive}
                   onChange={(e) => setShowInactive(e.target.checked)}
-                  className="rounded border-[#e5e7eb] text-[#f5a623] focus:ring-[#f5a623]"
+                  className="rounded border-[#e5e7eb] text-[#f5a623] focus:ring-0"
                 />
                 <span>Show Inactive</span>
               </label>
@@ -331,28 +331,44 @@ export default function ProfileSectionsPage() {
                     <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                       <Link
                         href={`/dashboard/profile-sections/${section.id}`}
-                        className="text-[#f5a623] hover:text-[#e09620] mr-4"
+                        className="text-[#f5a623] hover:text-[#e09620] mr-3 inline-flex items-center gap-1"
+                        title="Manage"
                       >
+                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                        </svg>
                         Manage
                       </Link>
                       <button
                         onClick={() => openEditModal(section)}
-                        className="text-[#5ba4a4] hover:text-[#5ba4a4]/80 mr-4"
+                        className="text-[#5ba4a4] hover:text-[#5ba4a4]/80 mr-3 inline-flex items-center gap-1"
+                        title="Edit"
                       >
+                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                        </svg>
                         Edit
                       </button>
                       {section.isSystem ? (
                         <span
-                          className="text-[#9ca3af] cursor-not-allowed"
+                          className="text-[#9ca3af] cursor-not-allowed inline-flex items-center gap-1"
                           title="System sections cannot be deleted"
                         >
+                          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                          </svg>
                           Delete
                         </span>
                       ) : (
                         <button
                           onClick={() => openDeleteModal(section)}
-                          className="text-red-600 hover:text-red-900"
+                          className="text-red-600 hover:text-red-900 inline-flex items-center gap-1"
+                          title="Delete"
                         >
+                          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                          </svg>
                           Delete
                         </button>
                       )}
@@ -389,7 +405,7 @@ export default function ProfileSectionsPage() {
                     type="text"
                     value={formData.name}
                     onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-                    className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:ring-2 focus:ring-[#f5a623] focus:border-[#f5a623] text-[#00293d] bg-white placeholder:text-[#666666]"
+                    className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:outline-none focus:border-[#f5a623] text-[#00293d] bg-white placeholder:text-[#666666]"
                     placeholder="e.g., Location, Experience, Education"
                     required
                   />
@@ -402,7 +418,7 @@ export default function ProfileSectionsPage() {
                     value={formData.description}
                     onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                     rows={3}
-                    className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:ring-2 focus:ring-[#f5a623] focus:border-[#f5a623] text-[#00293d] bg-white placeholder:text-[#666666]"
+                    className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:outline-none focus:border-[#f5a623] text-[#00293d] bg-white placeholder:text-[#666666]"
                     placeholder="Brief description of this section"
                   />
                 </div>
@@ -414,7 +430,7 @@ export default function ProfileSectionsPage() {
                     type="text"
                     value={formData.icon}
                     onChange={(e) => setFormData({ ...formData, icon: e.target.value })}
-                    className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:ring-2 focus:ring-[#f5a623] focus:border-[#f5a623] text-[#00293d] bg-white placeholder:text-[#666666]"
+                    className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:outline-none focus:border-[#f5a623] text-[#00293d] bg-white placeholder:text-[#666666]"
                     placeholder="e.g., location_on"
                   />
                 </div>
@@ -429,7 +445,7 @@ export default function ProfileSectionsPage() {
                     onFocus={(e) => e.target.select()}
                     placeholder="0"
                     min={0}
-                    className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:ring-2 focus:ring-[#f5a623] focus:border-[#f5a623] text-[#00293d] bg-white placeholder:text-[#666666]"
+                    className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:outline-none focus:border-[#f5a623] text-[#00293d] bg-white placeholder:text-[#666666]"
                   />
                 </div>
                 <div className="flex items-center space-x-6">
@@ -439,7 +455,7 @@ export default function ProfileSectionsPage() {
                       id="isActive"
                       checked={formData.isActive}
                       onChange={(e) => setFormData({ ...formData, isActive: e.target.checked })}
-                      className="rounded border-[#e5e7eb] text-[#f5a623] focus:ring-[#f5a623]"
+                      className="rounded border-[#e5e7eb] text-[#f5a623] focus:ring-0"
                     />
                     <label htmlFor="isActive" className="ml-2 text-sm text-[#00293d] font-serif">
                       Active
@@ -451,7 +467,7 @@ export default function ProfileSectionsPage() {
                       id="isGlobal"
                       checked={formData.isGlobal}
                       onChange={(e) => setFormData({ ...formData, isGlobal: e.target.checked })}
-                      className="rounded border-[#e5e7eb] text-[#5ba4a4] focus:ring-[#5ba4a4]"
+                      className="rounded border-[#e5e7eb] text-[#5ba4a4] focus:ring-0"
                     />
                     <label htmlFor="isGlobal" className="ml-2 text-sm text-[#00293d] font-serif">
                       Global (all agent types)
@@ -464,7 +480,7 @@ export default function ProfileSectionsPage() {
                     id="isRepeatable"
                     checked={formData.isRepeatable}
                     onChange={(e) => setFormData({ ...formData, isRepeatable: e.target.checked })}
-                    className="rounded border-[#e5e7eb] text-[#f5a623] focus:ring-[#f5a623]"
+                    className="rounded border-[#e5e7eb] text-[#f5a623] focus:ring-0"
                   />
                   <label htmlFor="isRepeatable" className="ml-2 text-sm text-[#00293d] font-serif">
                     Allow Multiple Entries (e.g., certifications, education)
diff --git a/src/app/dashboard/users/[id]/page.tsx b/src/app/dashboard/users/[id]/page.tsx
index 16e930c..94c60c7 100644
--- a/src/app/dashboard/users/[id]/page.tsx
+++ b/src/app/dashboard/users/[id]/page.tsx
@@ -454,7 +454,7 @@ export default function UserDetailPage() {
                   <select
                     value={selectedAgentTypeId}
                     onChange={(e) => setSelectedAgentTypeId(e.target.value)}
-                    className="w-full max-w-[160px] px-2 py-1 text-sm border border-[#e5e7eb] rounded-lg focus:ring-1 focus:ring-[#f5a623] focus:border-[#f5a623] text-[#00293d] bg-white"
+                    className="w-full max-w-[160px] px-2 py-1 text-sm border border-[#e5e7eb] rounded-lg focus:outline-none focus:border-[#f5a623] text-[#00293d] bg-white"
                   >
                     <option value="">Select...</option>
                     {agentTypes.map((type) => (
@@ -633,7 +633,7 @@ export default function UserDetailPage() {
                     value={verificationNote}
                     onChange={(e) => setVerificationNote(e.target.value)}
                     rows={2}
-                    className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:ring-2 focus:ring-[#f5a623] focus:border-[#f5a623] text-[#00293d] bg-white placeholder:text-[#666666]"
+                    className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:outline-none focus:border-[#f5a623] text-[#00293d] bg-white placeholder:text-[#666666]"
                     placeholder="Enter a note for the agent (e.g., rejection reason)"
                   />
                 </div>
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index ad2744d..ae0f983 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -101,7 +101,7 @@ export default function LoginPage() {
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
                 required
-                className="w-full px-4 py-3 border border-[#e5e7eb] rounded-xl focus:ring-2 focus:ring-[#f5a623] focus:border-[#f5a623] transition-colors text-gray-900 placeholder:text-gray-400 bg-white"
+                className="w-full px-4 py-3 border border-[#e5e7eb] rounded-xl focus:outline-none focus:border-[#f5a623] transition-colors text-gray-900 placeholder:text-gray-400 bg-white"
                 placeholder="admin@realestate.com"
               />
             </div>
@@ -119,7 +119,7 @@ export default function LoginPage() {
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 required
-                className="w-full px-4 py-3 border border-[#e5e7eb] rounded-xl focus:ring-2 focus:ring-[#f5a623] focus:border-[#f5a623] transition-colors text-gray-900 placeholder:text-gray-400 bg-white"
+                className="w-full px-4 py-3 border border-[#e5e7eb] rounded-xl focus:outline-none focus:border-[#f5a623] transition-colors text-gray-900 placeholder:text-gray-400 bg-white"
                 placeholder="Enter your password"
               />
             </div>