diff --git a/Employee_Managment_App/src/components/EmployeeLeave.css b/Employee_Managment_App/src/components/EmployeeLeave.css
new file mode 100644
index 0000000..daa18f5
--- /dev/null
+++ b/Employee_Managment_App/src/components/EmployeeLeave.css
@@ -0,0 +1,124 @@
+.drp-left-icon.e-daterangepicker .e-range-icon::before {
+  color: #0078d4; /* Blue for icon */
+}
+.drp-left-icon.e-daterangepicker input.e-input {
+  color: #666; /* Gray text */
+  border-radius: 4px; /* Subtle rounding */
+}
+.drp-left-icon.e-daterangepicker .e-input-group {
+  border: 1px solid #ccc;
+  background: #f9f9f9;
+}
+
+/* Outer wrapper to position custom icons */
+.drp-input-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+/* Use the Syncfusion-generated wrapper element as our visible control.
+   We tweak its border to match the target screenshot. */
+.custom-syncfusion-drp .e-date-range-wrapper.e-input-group.e-control-wrapper {
+  border: 1px solid #ccc;
+  border-radius: 4px;      /* squared, not pill */
+  box-shadow: none;
+}
+
+/* Keep the built-in range icon hidden (we use our overlay icons instead). */
+.custom-syncfusion-drp .e-input-group-icon.e-range-icon {
+  display: none !important; /* built-in icon suppressed */
+}
+/* Make sure the input has enough padding for our custom icons. */
+.custom-syncfusion-drp .e-date-range-wrapper .e-input {
+  /* give more room on the left so text doesn't sit under the calendar icon */
+  padding: 0 34px 0 52px;   /* top/right/bottom/left */
+  cursor: pointer;         /* matches expectation: click to open */
+} 
+
+/* Common styles for our overlay buttons */
+.drp-icon-left,
+.drp-caret-right {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 36px;
+  width: 36px;             /* clickable area */
+  border: 0;
+  background: transparent;
+  color: #333;
+  cursor: pointer;
+  outline: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2; /* above the input text */
+}
+
+/* Place icons slightly inset from edges so they don't touch the border */
+.drp-icon-left   { left: 8px; }
+.drp-caret-right { right: 6px; }
+
+.calendar-svg, .caret-svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* Optional hover feedback (subtle) */
+.drp-icon-left:hover,
+.drp-caret-right:hover {
+  color: #000;
+}
+
+/* size and align Syncfusion icon font elements inside the overlay buttons */
+.drp-icon-left .e-icons,
+.drp-caret-right .e-icons,
+.calendar-i,
+.caret-i {
+  font-family: "e-icons" !important;
+  font-size: 14px;
+  line-height: 1;
+  display: inline-block;
+  vertical-align: middle;
+  color: inherit;
+}
+
+/* ensure icon button sits above the input text */
+.drp-icon-left,
+.drp-caret-right {
+  z-index: 3;
+}
+
+/* Compact size tweaks to better match the target screenshot */
+.custom-syncfusion-drp .e-date-range-wrapper.e-input-group.e-control-wrapper {
+  height: 36px;
+  padding: 6px 8px;
+  background: #fff;
+}
+
+
+.custom-syncfusion-drp .e-date-range-wrapper .e-input,
+.e-control .e-daterangepicker.e-input{
+  font-size: 13px;
+  /* make the input fill the control height and vertically center the single-line text */
+  height: 100%;
+  box-sizing: border-box;
+  /* room for left calendar icon (52px) and right caret (34px) */
+  padding: 0 34px 0 52px;
+  line-height: 36px; /* match control height (36px) to vertically center text */
+  caret-color: #333;
+  z-index: 1;
+  position: relative;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+  text-align: center !important;
+}  
+
+/* slightly darker border on focus */
+.custom-syncfusion-drp .e-date-range-wrapper.e-input-group.e-control-wrapper:focus-within {
+  border-color: #b3d4fc;
+  box-shadow: none;
+}
+
+/* (icon height handled above) */
diff --git a/Employee_Managment_App/src/components/EmployeeLeave.tsx b/Employee_Managment_App/src/components/EmployeeLeave.tsx
index 42efe57..64ff896 100644
--- a/Employee_Managment_App/src/components/EmployeeLeave.tsx
+++ b/Employee_Managment_App/src/components/EmployeeLeave.tsx
@@ -15,6 +15,7 @@ import {
   Inject,
   RowInfo
 } from '@syncfusion/ej2-react-grids';
+import './EmployeeLeave.css';
 import { ChangeEventArgs, SwitchComponent } from '@syncfusion/ej2-react-buttons';
 import { DataManager, Query, UrlAdaptor, Predicate } from '@syncfusion/ej2-data';
 import {
@@ -53,21 +54,51 @@ const Presets = (props: { dateRangeChange: (args: RangeEventArgs) => void }) =>
   const lastSixEnd: Date = new Date(
     new Date(new Date(new Date().setMonth(new Date().getMonth() + 1)).setDate(0)).toDateString()
   );
+  const dateRangePickerRef = React.useRef<DateRangePickerComponent>(null);
 
   return (
-    <DateRangePickerComponent
-      placeholder="Select a range"
-      value={[yearStart, yearEnd]}
-      change={props.dateRangeChange}
-      width={190}
-    >
-      <PresetsDirective>
-        <PresetDirective label="This Month" start={monthStart} end={monthEnd}></PresetDirective>
-        <PresetDirective label="Last Month" start={lastStart} end={lastEnd}></PresetDirective>
-        <PresetDirective label="Last 6 Months" start={lastSixStart} end={lastSixEnd}></PresetDirective>
-        <PresetDirective label="This Year" start={yearStart} end={yearEnd}></PresetDirective>
-      </PresetsDirective>
-    </DateRangePickerComponent>
+    <div className="drp-input-wrapper">
+      {/* left calendar icon (overlay) - opens the picker */}
+      <button
+        type="button"
+        className="drp-icon-left"
+        aria-hidden
+        onClick={() => dateRangePickerRef.current && (dateRangePickerRef.current as any).show()}
+      >
+        {/* Syncfusion icon (e-icons) for calendar */}
+        <span className="e-input-group-icon e-range-icon e-icons" aria-hidden="true"></span>
+      </button>
+      
+      <DateRangePickerComponent
+        ref={dateRangePickerRef}
+        placeholder="Select a range"
+        value={[yearStart, yearEnd]}
+        format={'MMM d, yyyy'}
+        change={props.dateRangeChange}
+        width={240}
+        cssClass="custom-syncfusion-drp drp-left-icon"
+        showClearButton={false}
+      >
+        <PresetsDirective>
+          <PresetDirective label="This Month" start={monthStart} end={monthEnd}></PresetDirective>
+          <PresetDirective label="Last Month" start={lastStart} end={lastEnd}></PresetDirective>
+          <PresetDirective label="Last 6 Months" start={lastSixStart} end={lastSixEnd}></PresetDirective>
+          <PresetDirective label="This Year" start={yearStart} end={yearEnd}></PresetDirective>
+        </PresetsDirective>
+      </DateRangePickerComponent>
+
+      
+
+      {/* right caret icon (overlay) - also opens the picker */}
+      <button
+        type="button"
+        className="drp-caret-right"
+        aria-hidden
+        onClick={() => dateRangePickerRef.current && (dateRangePickerRef.current as any).show()}
+      >
+        <span className="e-icons e-chevron-down caret-i" aria-hidden="true"></span>
+      </button>
+    </div>
   );
 };
 
@@ -247,8 +278,8 @@ const EmployeeLeave = (props: { employeeData: EmployeeDetails; userInfo: Employe
         actionComplete={actionComplete}
       >
         <ColumnsDirective>
-          <ColumnDirective field="EmployeeCode" headerText="Code" visible={false} width="120" />
-          <ColumnDirective field="AttendanceID" headerText="Task ID" isPrimaryKey={true} width="140" />
+          <ColumnDirective field="EmployeeCode" headerText="ID" visible={false} width="120" />
+          <ColumnDirective field="AttendanceID" headerText="Leave ID" isPrimaryKey={true} width="140" />
           <ColumnDirective field="AbsenceType" headerText="Leave Type" width="120" />
           <ColumnDirective field="ShiftName" headerText="Shift Name" width="120" />
           <ColumnDirective field="From" type="date" format="d MMM yyyy" textAlign="Right" width="120" />
diff --git a/Employee_Managment_App/src/components/Employees.tsx b/Employee_Managment_App/src/components/Employees.tsx
index 4003d20..a5808fd 100644
--- a/Employee_Managment_App/src/components/Employees.tsx
+++ b/Employee_Managment_App/src/components/Employees.tsx
@@ -32,6 +32,16 @@ const Employees = (props?: EmployeesProps) => {
   const employeeGridIns = useRef<GridComponent>(null);
   const tooltipObj = useRef<TooltipComponent>(null);
 
+   // Use Syncfusion Grid API to auto-fit column widths and keep height auto-sized
+  const onGridDataBound = React.useCallback(() => {
+    const grid: any = employeeGridIns.current;
+    if (!grid) return;
+    // Ensure grid height is set to auto so it adapts to content (Syncfusion supports 'auto')
+    if (grid.element) {
+      grid.height = 'auto';
+    }
+  }, []);
+
   // Apply/clear remote filters on pill changes or routed context
   useEffect(() => {
     debugger;
@@ -178,6 +188,7 @@ const Employees = (props?: EmployeesProps) => {
           allowFiltering={true}
           filterSettings={{ type: 'Excel', enableInfiniteScrolling: true }}
           recordClick={recordClick}
+          dataBound={onGridDataBound}
         >
           <ColumnsDirective>
             <ColumnDirective
@@ -193,7 +204,7 @@ const Employees = (props?: EmployeesProps) => {
             />
             <ColumnDirective
               field="EmployeeCode"
-              headerText="Code"
+              headerText="ID"
               template={codeTemplate}
               customAttributes={{ class: 'infotooltip' }}
               width="120"
@@ -206,7 +217,7 @@ const Employees = (props?: EmployeesProps) => {
               headerText="Date Joined"
               textAlign="Right"
               type="date"
-              format={{ type: 'date', skeleton: 'medium' }}
+              format={{ type: 'date', format: "d MMM yyyy"}}
               clipMode="EllipsisWithTooltip"
               width="150"
             />
diff --git a/Employee_Managment_App/src/components/Policies.tsx b/Employee_Managment_App/src/components/Policies.tsx
index e8cfb5a..e735ea0 100644
--- a/Employee_Managment_App/src/components/Policies.tsx
+++ b/Employee_Managment_App/src/components/Policies.tsx
@@ -161,8 +161,8 @@ const Policies: React.FC = () => {
             <ColumnsDirective>
               <ColumnDirective field="policyName" headerText="Policy Name" width="220" template={policyNameTemplate} />
               <ColumnDirective field="category" headerText="Category" width="170" template={categoryTemplate} />
-              <ColumnDirective field="lastUpdated" headerText="Last Updated" width="150" textAlign="Left" />
-              <ColumnDirective field="enrolledOn" headerText="Enrolled On" width="150" textAlign="Left" />
+              <ColumnDirective field="lastUpdated" headerText="Last Updated" width="150" type="date" format="d MMM yyyy" textAlign="Right" />
+              <ColumnDirective field="enrolledOn" headerText="Enrolled On" width="150" type="date" format="d MMM yyyy" textAlign="Right" />
               <ColumnDirective field="statusText" headerText="Status" width="130" template={statusTemplate} />
               <ColumnDirective headerText="Actions" width="110" commands={viewCommands} textAlign="Center" />
             </ColumnsDirective>