diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index ba28c7e..b4eea30 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -17,6 +17,7 @@
         "axios": "^1.7.2",
         "notistack": "^3.0.1",
         "react": "^18.3.1",
+        "react-datepicker": "^7.2.0",
         "react-dom": "^18.3.1",
         "react-icons": "^5.2.1",
         "react-router-dom": "^6.23.1",
@@ -2611,10 +2612,24 @@
         "@floating-ui/utils": "^0.2.0"
       }
     },
+    "node_modules/@floating-ui/react": {
+      "version": "0.26.18",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.18.tgz",
+      "integrity": "sha512-enDDX09Jpi3kmhcXXpvs+fvRXOfBj1jUV2KF6uDMf5HjS+SOZJzNTFUW71lKbFcxz0BkmQqwbvqdmHIxMq/fyQ==",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.1.0",
+        "@floating-ui/utils": "^0.2.3",
+        "tabbable": "^6.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/@floating-ui/react-dom": {
-      "version": "2.0.9",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.9.tgz",
-      "integrity": "sha512-q0umO0+LQK4+p6aGyvzASqKbKOJcAHJ7ycE9CuUvfx3s9zTHWmGJTPOIlM/hmSBfUfg/XfY5YhLBLR/LHwShQQ==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.1.tgz",
+      "integrity": "sha512-4h84MJt3CHrtG18mGsXuLCHMrug49d7DFkU0RMIyshRveBeyV2hmV/pDaF2Uxtu8kgq5r46llp5E5FQiR0K2Yg==",
       "dependencies": {
         "@floating-ui/dom": "^1.0.0"
       },
@@ -2624,9 +2639,9 @@
       }
     },
     "node_modules/@floating-ui/utils": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.2.tgz",
-      "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw=="
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.3.tgz",
+      "integrity": "sha512-XGndio0l5/Gvd6CLIABvsav9HHezgDFFhDfHk1bvLfr9ni8dojqLSvBbotJEjmIwNHL7vK4QzBJTdBRoB+c1ww=="
     },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
@@ -7069,6 +7084,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/date-fns": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -14921,6 +14945,22 @@
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
       "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
     },
+    "node_modules/react-datepicker": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-7.2.0.tgz",
+      "integrity": "sha512-Hhs1Fk6/ZqpGGg9QX/JjzvgEJoSFKYCAvRVdBbjxvOjflsXutFprAl/E0ZOm1J+/b/jQqU03WMTTNLcw5nXcuw==",
+      "dependencies": {
+        "@floating-ui/react": "^0.26.2",
+        "clsx": "^2.1.0",
+        "date-fns": "^3.3.1",
+        "prop-types": "^15.7.2",
+        "react-onclickoutside": "^6.13.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17 || ^18",
+        "react-dom": "^16.9.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -15050,6 +15090,19 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
       "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
     },
+    "node_modules/react-onclickoutside": {
+      "version": "6.13.1",
+      "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.1.tgz",
+      "integrity": "sha512-LdrrxK/Yh9zbBQdFbMTXPp3dTSN9B+9YJQucdDu3JNKRrbdU+H+/TVONJoWtOwy4II8Sqf1y/DTI6w/vGPYW0w==",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md"
+      },
+      "peerDependencies": {
+        "react": "^15.5.x || ^16.x || ^17.x || ^18.x",
+        "react-dom": "^15.5.x || ^16.x || ^17.x || ^18.x"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -16757,6 +16810,11 @@
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
     },
+    "node_modules/tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.3.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index d642556..5c75345 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,6 +12,7 @@
     "axios": "^1.7.2",
     "notistack": "^3.0.1",
     "react": "^18.3.1",
+    "react-datepicker": "^7.2.0",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
     "react-router-dom": "^6.23.1",
diff --git a/frontend/src/components/Form/ImageSection/ImageSection.jsx b/frontend/src/components/Form/ImageSection/ImageSection.jsx
index 206631a..3efbd5a 100644
--- a/frontend/src/components/Form/ImageSection/ImageSection.jsx
+++ b/frontend/src/components/Form/ImageSection/ImageSection.jsx
@@ -1,4 +1,9 @@
-import {formStyles as styles, imageSectionStyles as styles1, handleChange, UserSvg} from '../imports'
+import {
+  formStyles as styles,
+  imageSectionStyles as styles1,
+  handleChange,
+  UserSvg,
+} from "../imports";
 
 const ImageSection = ({ setProfileInfo, socialLinks, setSocialLinks }) => {
   return (
@@ -34,34 +39,34 @@ const ImageSection = ({ setProfileInfo, socialLinks, setSocialLinks }) => {
         />
       </div>
       <div className={styles.genderSection}>
-        <label>
+        <label className={styles1.radioLabel}>
           <input
             type="radio"
             name="gender"
             value="male"
             onChange={(e) => handleChange(e, setProfileInfo)}
             required
-          />{" "}
+          />
           Male
         </label>
-        <label>
+        <label className={styles1.radioLabel}>
           <input
             type="radio"
             name="gender"
             value="female"
             onChange={(e) => handleChange(e, setProfileInfo)}
             required
-          />{" "}
+          />
           Female
         </label>
-        <label>
+        <label className={styles1.radioLabel}>
           <input
             type="radio"
             name="gender"
             value="other"
             onChange={(e) => handleChange(e, setProfileInfo)}
             required
-          />{" "}
+          />
           Other
         </label>
       </div>
diff --git a/frontend/src/components/Form/ImageSection/ImageSection.module.css b/frontend/src/components/Form/ImageSection/ImageSection.module.css
index 87d7d2e..d7e2599 100644
--- a/frontend/src/components/Form/ImageSection/ImageSection.module.css
+++ b/frontend/src/components/Form/ImageSection/ImageSection.module.css
@@ -9,6 +9,26 @@
   font-family: Poppins;
 }
 
+.radioLabel {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  color: var(--text-color);
+  cursor: pointer;
+  padding: 10px;
+  border-radius: 5px;
+  transition: background-color 0.3s ease;
+}
+
+.radioLabel:hover {
+  background-color: var(--button-bg-color);
+}
+
+.radioLabel input[type="radio"] {
+  margin-right: 8px;
+  accent-color: var(--primary-color);
+}
+
 /* Mobile screens */
 @media (max-width: 800px) {
   .uploadButton {
diff --git a/frontend/src/components/Form/WorkHistory/WorkHistory.jsx b/frontend/src/components/Form/WorkHistory/WorkHistory.jsx
index 499b096..810e22e 100644
--- a/frontend/src/components/Form/WorkHistory/WorkHistory.jsx
+++ b/frontend/src/components/Form/WorkHistory/WorkHistory.jsx
@@ -1,4 +1,5 @@
-import {formStyles as styles, workHistoryStyles as styles1, FiInfo,FiTrash2, Tooltip} from '../imports'
+import { formStyles as styles, workHistoryStyles as styles1, FiInfo, FiTrash2, Tooltip, DatePicker, } from "../imports";
+import "react-datepicker/dist/react-datepicker.css";
 
 const WorkHistory = ({
   isDisabled,
@@ -22,6 +23,30 @@ const WorkHistory = ({
     setWorkHistoryFields(updatedFields);
   };
 
+  const handleDateChange = (dates, index) => {
+    const [start, end] = dates;
+    const startDateString = start
+      ? start.toLocaleDateString("en-US", { month: "short", year: "numeric" })
+      : "";
+    const endDateString = end
+      ? end.toLocaleDateString("en-US", { month: "short", year: "numeric" })
+      : "";
+    const employmentDates = `${startDateString} To ${endDateString}`;
+
+    const updatedFields = [...workHistoryFields];
+    updatedFields[index].employmentDates = employmentDates;
+    setWorkHistoryFields(updatedFields);
+  };
+
+  const parseEmploymentDates = (employmentDates) => {
+    if (!employmentDates || typeof employmentDates !== "string")
+      return [null, null];
+    const dates = employmentDates.split(" To ");
+    const start = dates[0] ? new Date(dates[0]) : null;
+    const end = dates[1] ? new Date(dates[1]) : null;
+    return [start, end];
+  };
+
   return (
     <div className={styles.workHistory}>
       <div className={styles.header}>
@@ -83,19 +108,21 @@ const WorkHistory = ({
               />
             </div>
             <div className={styles.inputRow}>
-              <input
+              <DatePicker
                 type="text"
-                placeholder="Employment Dates (e.g., Jan 2020 to Dec 2023)"
+                selectsRange
+                startDate={parseEmploymentDates(field.employmentDates)[0]}
+                endDate={parseEmploymentDates(field.employmentDates)[1]}
+                onChange={(dates) => handleDateChange(dates, index)}
+                disabled={isDisabled}
+                dateFormat="MMM yyyy"
                 className={`${styles.inputField} ${
                   isDisabled ? styles.disabledInput : ""
                 }`}
                 value={field.employmentDates}
-                disabled={isDisabled}
-                onChange={(e) => {
-                  const updatedFields = [...workHistoryFields];
-                  updatedFields[index].employmentDates = e.target.value;
-                  setWorkHistoryFields(updatedFields);
-                }}
+                placeholderText="Select Employment Dates"
+                showMonthYearPicker
+                showFullMonthYearPicker
               />
               <input
                 type="text"
diff --git a/frontend/src/components/Form/imports/index.js b/frontend/src/components/Form/imports/index.js
index ad93d12..5028895 100644
--- a/frontend/src/components/Form/imports/index.js
+++ b/frontend/src/components/Form/imports/index.js
@@ -42,3 +42,4 @@ export { default as professionalInfoStyles } from "../ProfessionalInfo/Professio
 
 // For ../WorkHistory/WorkHistory.jsx
 export { default as workHistoryStyles } from "../WorkHistory/WorkHistory.module.css";
+export { default as DatePicker } from 'react-datepicker';