diff --git a/src/app/(agent)/agent/edit/components/FormInput.tsx b/src/app/(agent)/agent/edit/components/FormInput.tsx
index aac1fdf..b4bcf64 100644
--- a/src/app/(agent)/agent/edit/components/FormInput.tsx
+++ b/src/app/(agent)/agent/edit/components/FormInput.tsx
@@ -21,7 +21,7 @@ export function FormInput({ label, value, onChange, placeholder, type = 'text',
         onChange={(e) => onChange(e.target.value)}
         placeholder={placeholder}
         disabled={disabled}
-        className="w-full px-4 py-3 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D] placeholder:text-[#00293D]/40 focus:outline-none focus:border-[#E58625] disabled:bg-gray-50 disabled:text-[#00293D]/50"
+        className="w-full h-[40px] px-4 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] placeholder:text-[#00293D]/40 focus:outline-none focus:border-[#E58625] disabled:bg-gray-50 disabled:text-[#00293D]/50"
       />
     </div>
   );
diff --git a/src/app/(agent)/agent/edit/page.tsx b/src/app/(agent)/agent/edit/page.tsx
index e045e67..e356d7c 100644
--- a/src/app/(agent)/agent/edit/page.tsx
+++ b/src/app/(agent)/agent/edit/page.tsx
@@ -109,6 +109,7 @@ export default function EditProfilePage() {
   const router = useRouter();
   const [formData, setFormData] = useState(initialFormData);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const [stateInput, setStateInput] = useState('');
 
   const handleCancel = () => {
     router.push('/agent/dashboard');
@@ -124,6 +125,21 @@ export default function EditProfilePage() {
     setFormData((prev) => ({ ...prev, [field]: value }));
   };
 
+  const handleAddLicensedArea = (value: string) => {
+    const trimmedValue = value.trim();
+    if (trimmedValue && !formData.licensedAreas.includes(trimmedValue)) {
+      updateField('licensedAreas', [...formData.licensedAreas, trimmedValue]);
+    }
+    setStateInput('');
+  };
+
+  const handleStateInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter' || e.key === ',') {
+      e.preventDefault();
+      handleAddLicensedArea(stateInput);
+    }
+  };
+
   return (
     <div className="flex gap-6 h-[calc(100vh-180px)]">
       {/* Left Sidebar - Quick Links */}
@@ -134,7 +150,7 @@ export default function EditProfilePage() {
       {/* Main Content - Scrollable */}
       <div ref={scrollContainerRef} className="flex-1 space-y-6 overflow-y-auto pr-2 scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent">
         {/* Basic Information */}
-        <div className="bg-white rounded-[20px] p-6">
+        <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
           <FormSection id="basic-info" icon="/assets/icons/basic-information-icon.svg" title="Basic Information">
             <div className="flex flex-col md:flex-row gap-4">
               <FormInput
@@ -154,7 +170,7 @@ export default function EditProfilePage() {
         </div>
 
         {/* Contact Information */}
-        <div className="bg-white rounded-[20px] p-6">
+        <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
           <FormSection id="contact-info" icon="/assets/icons/contact-icon.svg" title="Contact Information">
             <div className="flex flex-col md:flex-row gap-4">
               <FormInput
@@ -176,7 +192,7 @@ export default function EditProfilePage() {
         </div>
 
         {/* Professional Types */}
-        <div className="bg-white rounded-[20px] p-6">
+        <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
           <FormSection id="professional-types" icon="/assets/icons/professional-icon.svg" title="Professional Types">
             <div className="flex flex-wrap gap-6">
               <FormCheckbox
@@ -205,7 +221,7 @@ export default function EditProfilePage() {
         </div>
 
         {/* Upload Documents */}
-        <div className="bg-white rounded-[20px] p-6">
+        <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
           <FormSection id="upload-documents" icon="/assets/icons/upload-icon.svg" title="Upload Documents">
             <FileUpload onFileSelect={(files) => console.log('Files selected:', files)} />
 
@@ -235,60 +251,61 @@ export default function EditProfilePage() {
         </div>
 
         {/* Licensing & Areas */}
-        <div className="bg-white rounded-[20px] p-6">
+        <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
           <FormSection id="licensing-areas" icon="/assets/icons/professional-icon.svg" title="Licensing & Areas">
             <div className="space-y-4">
-              <FormSelect
-                label="State Licensed"
-                value={formData.state}
-                onChange={(value) => updateField('state', value)}
-                options={[
-                  { value: 'Colorado', label: 'Colorado' },
-                  { value: 'Texas', label: 'Texas' },
-                  { value: 'California', label: 'California' },
-                ]}
-              />
-
               <div>
-                <label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
-                  Licensed Areas
+                <label className="block text-[14px] font-semibold text-[#00293D] font-serif mb-2">
+                  What state(s) are you licensed in?
                 </label>
-                <div className="flex flex-wrap gap-2">
-                  {formData.licensedAreas.map((area) => (
-                    <span
-                      key={area}
-                      className="inline-flex items-center px-3 h-[28px] rounded-[15px] text-[14px] font-medium font-serif border-[0.7px] border-[#00293d] text-[#00293d]"
-                    >
-                      {area}
-                    </span>
-                  ))}
+                <div className="relative">
+                  <div className="absolute left-4 top-1/2 -translate-y-1/2">
+                    <Image
+                      src="/assets/icons/location-icon.svg"
+                      alt="Location"
+                      width={16}
+                      height={16}
+                    />
+                  </div>
+                  <input
+                    type="text"
+                    value={stateInput}
+                    onChange={(e) => setStateInput(e.target.value)}
+                    onKeyDown={handleStateInputKeyDown}
+                    placeholder="Enter state"
+                    className="w-full h-[40px] pl-10 pr-4 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] placeholder:text-[#00293D]/40 focus:outline-none focus:border-[#E58625]"
+                  />
                 </div>
+                <p className="text-[12px] text-[#00293D]/60 font-serif mt-2">
+                  Press Enter or comma to add a state.
+                </p>
               </div>
 
-              <div>
-                <div className="flex items-center justify-between mb-2">
-                  <label className="text-[12px] font-medium text-[#00293D]/70 font-serif">
-                    Expertise Years
-                  </label>
-                  <button className="text-[#E58625] text-[12px] font-medium font-serif">+ Edit</button>
-                </div>
-                <div className="flex flex-wrap gap-2">
-                  {formData.expertiseYears.map((item, idx) => (
-                    <span
-                      key={idx}
-                      className="inline-flex items-center px-3 h-[28px] rounded-[15px] text-[14px] font-medium font-serif border-[0.7px] border-[#00293d] text-[#00293d]"
+              <div className="flex flex-wrap gap-2">
+                {formData.licensedAreas.map((area) => (
+                  <span
+                    key={area}
+                    className="inline-flex items-center gap-2 px-3 h-[32px] rounded-[15px] text-[14px] font-medium font-serif border border-[#00293d] text-[#00293d]"
+                  >
+                    {area}
+                    <button
+                      onClick={() => {
+                        const newAreas = formData.licensedAreas.filter((a) => a !== area);
+                        updateField('licensedAreas', newAreas);
+                      }}
+                      className="text-[#00293d] hover:text-[#E58625] transition-colors"
                     >
-                      {item.area} - {item.years}
-                    </span>
-                  ))}
-                </div>
+                      ×
+                    </button>
+                  </span>
+                ))}
               </div>
             </div>
           </FormSection>
         </div>
 
         {/* Biography */}
-        <div className="bg-white rounded-[20px] p-6">
+        <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
           <FormSection id="biography" icon="/assets/icons/bio-icon.svg" title="Biography">
             <div className="space-y-4">
               <FormTextarea
@@ -311,7 +328,7 @@ export default function EditProfilePage() {
         </div>
 
         {/* Expertise */}
-        <div className="bg-white rounded-[20px] p-6">
+        <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
           <FormSection id="expertise" icon="/assets/icons/professional-icon.svg" title="Expertise">
             <TagInput
               tags={formData.expertise}
@@ -322,7 +339,7 @@ export default function EditProfilePage() {
         </div>
 
         {/* Years In Business */}
-        <div className="bg-white rounded-[20px] p-6">
+        <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
           <FormSection id="years-business" icon="/assets/icons/professional-icon.svg" title="Years In Business">
             <div className="flex flex-col md:flex-row gap-4">
               <FormInput
@@ -344,7 +361,7 @@ export default function EditProfilePage() {
         </div>
 
         {/* Areas in expertise & Years */}
-        <div className="bg-white rounded-[20px] p-6">
+        <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
           <FormSection
             id="areas-expertise-years"
             icon="/assets/icons/basic-information-icon.svg"
@@ -377,7 +394,7 @@ export default function EditProfilePage() {
         </div>
 
         {/* Contracts Closed */}
-        <div className="bg-white rounded-[20px] p-6">
+        <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
           <FormSection id="contracts-closed" icon="/assets/icons/professional-icon.svg" title="Contracts Closed">
             <div className="space-y-3">
               <FormCheckbox
@@ -420,7 +437,7 @@ export default function EditProfilePage() {
         </div>
 
         {/* Price Point */}
-        <div className="bg-white rounded-[20px] p-6">
+        <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
           <FormSection id="price-point" icon="/assets/icons/basic-information-icon.svg" title="Price Point">
             <div className="space-y-3">
               <FormCheckbox
@@ -477,7 +494,7 @@ export default function EditProfilePage() {
         </div>
 
         {/* Specialization */}
-        <div className="bg-white rounded-[20px] p-6">
+        <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
           <FormSection id="specialization" icon="/assets/icons/basic-information-icon.svg" title="Specialization">
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
               {/* Client Localization */}
@@ -551,7 +568,7 @@ export default function EditProfilePage() {
         </div>
 
         {/* Special Interests & Hobbies */}
-        <div className="bg-white rounded-[20px] p-6">
+        <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
           <FormSection id="hobbies" icon="/assets/icons/hobbies-icon.svg" title="Special Interests & Hobbies">
             <TagInput
               tags={formData.hobbies}
@@ -562,7 +579,7 @@ export default function EditProfilePage() {
         </div>
 
         {/* Certifications */}
-        <div className="bg-white rounded-[20px] p-6">
+        <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
           <FormSection id="certifications" icon="/assets/icons/certification-icon.svg" title="Professional Info">
             <p className="text-[12px] font-medium text-[#00293D]/70 font-serif mb-3">Certifications / Designations</p>
             <div className="space-y-2">
@@ -577,7 +594,7 @@ export default function EditProfilePage() {
         </div>
 
         {/* Availability */}
-        <div className="bg-white rounded-[20px] p-6">
+        <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
           <FormSection id="availability" icon="/assets/icons/availability-clock-icon.svg" title="Availability">
             <div className="flex flex-col md:flex-row gap-4">
               <FormSelect