diff --git a/src/pages/employee/EmployeeProfile.jsx b/src/pages/employee/EmployeeProfile.jsx
index 62c8b25a..e53eeeb2 100644
--- a/src/pages/employee/EmployeeProfile.jsx
+++ b/src/pages/employee/EmployeeProfile.jsx
@@ -1,4 +1,4 @@
-import React,{useState,useEffect} from "react";
+import React, { useState, useEffect } from "react";
 import EmpProfile from "../../components/Employee/EmpProfile";
 import axios from "axios";
 import Breadcrumb from "../../components/common/Breadcrumb";
@@ -9,6 +9,7 @@ import { useEmployeeProfile, useEmployees, useEmployeesByProject } from "../../h
 import { useSelector } from "react-redux";
 import EmployeeRepository from "../../repositories/EmployeeRepository";
 import { ComingSoonPage } from "../Misc/ComingSoonPage";
+import { useNavigate } from "react-router-dom";
 import Avatar from "../../components/common/Avatar";
 const EmployeeProfile = () => {
  
@@ -50,7 +51,7 @@ const EmployeeProfile = () => {
     }
   }, [employeeId]);
 
-
+  const navigate = useNavigate();
   const renderContent = () => {
     if (loading) return <div>Loading</div>;
     switch (activePill) {
@@ -107,56 +108,71 @@ const EmployeeProfile = () => {
           <div className="row">
             <div className="col-12 mb-4">
               <div className="card">
-              <div className="card-body">
-  <div className="d-flex flex-row flex-lg-column">
-    <div className="d-flex flex-column justify-content-center align-items-center text-center">
-      <Avatar
-        firstName={`${currentEmployee?.firstName}`}
-        lastName={`${currentEmployee?.lastName}`}
-      />
-      <div className="py-2">
-        <p className="h6">{`${currentEmployee?.firstName} ${currentEmployee?.lastName}`}</p>
-      </div>
-      <hr className="my-2" />
-    </div>
+                <div className="card-body">
+                  <div className="d-flex flex-row flex-lg-column">
+                    <div className="d-flex flex-column justify-content-center align-items-center text-center">
+                      <Avatar
+                        firstName={`${currentEmployee?.firstName}`}
+                        lastName={`${currentEmployee?.lastName}`}
+                        size={"lg"}
+                      />
+                      <div className="py-2">
+                        <p className="h6">{`${currentEmployee?.firstName} ${currentEmployee?.lastName}`}</p>
+                      </div>
+                    </div>
+                    <div className="w-100 d-flex flex-column justify-content-start">
+                      <div className="mt-3 w-100">
+                        <h6 className="mb-2 text-muted text-start">Employee Info</h6>
+                        <table className="table table-borderless mb-3">
+                          <tbody>
+                            <tr>
+                              <td className="fw-medium text-start">Email:</td>
+                              <td className="text-start">{currentEmployee?.email || <em>NA</em>}</td>
+                            </tr>
+                            <tr>
+                              <td className="fw-medium text-start">Phone Number:</td>
+                              <td className="text-start">{currentEmployee?.phoneNumber || <em>NA</em>}</td>
+                            </tr>
+                            <tr>
+                              <td className="fw-medium text-start">Emergency Contact Person:</td>
+                              <td className="text-start">{currentEmployee?.emergencyContactPerson || <em>NA</em>}</td>
+                            </tr>
+                            <tr>
+                              <td className="fw-medium text-start">Emergency Contact Number:</td>
+                              <td className="text-start">{currentEmployee?.emergencyPhoneNumber || <em>NA</em>}</td>
+                            </tr>
 
-    <div className="w-100 d-flex flex-column justify-content-start">
-      <div className="d-flex justify-content-between align-items-center mb-3">
-        <small className="card-text text-uppercase text-muted small mb-0">Contacts</small>
-        <a href="javascript:;" class="btn btn-icon item-edit"><i class="bx bx-edit bx-sm"></i></a>
-      </div>
+                            <tr>
+                              <td className="fw-medium text-start">Gender:</td>
+                              <td className="text-start">{currentEmployee?.gender || <em>NA</em>}</td>
+                            </tr>
+                            <tr>
+                              <td className="fw-medium text-start">Birth Date:</td>
+                              <td className="text-start">{currentEmployee?.birthDate ? new Date(currentEmployee.birthDate).toLocaleDateString() : <em>NA</em>}</td>
+                            </tr>
 
-      <ul className="list-unstyled my-3 py-1">
-        <li className="d-flex align-items-center mb-4">
-          <i className="bx bx-phone"></i>
-          <span className="fw-medium mx-2">Contact Number:</span>
-          <span className={`${currentEmployee?.emergencyPhoneNumber ? "" : "text-muted"}`}>
-            {currentEmployee?.emergencyPhoneNumber || <em>NA</em>}
-          </span>
-        </li>
-        <li className="d-flex align-items-center mb-4 text-start">
-          <i className="bx bx-envelope"></i>
-          <span className="fw-medium mx-2">Email:</span>
-          <span className={`text-break text-wrap ${currentEmployee?.email ? "" : "text-muted"}`}>
-            {currentEmployee?.email || <em className="muted">NA</em>}
-          </span>
-        </li>
-        <li className="d-flex align-items-center mb-4">
-          <i className="bx bx-user"></i>
-          <span className="fw-medium mx-2">Contact Person:</span>
-          <span>{currentEmployee?.emergencyContactPerson}</span>
-        </li>
-        <li className="d-flex align-items-center mb-4">
-          <i className="bx bx-flag"></i>
-          <span className="fw-medium mx-2">Address:</span>
-          <span className={`${currentEmployee?.currentAddress ? "" : "text-muted"}`}>
-            {currentEmployee?.currentAddress || <em>NA</em>}
-          </span>
-        </li>
-      </ul>
-    </div>
-  </div>
-</div>
+
+                            <tr>
+                              <td className="fw-medium text-start">Joining Date:</td>
+                              <td className="text-start">{currentEmployee?.joiningDate ? new Date(currentEmployee.joiningDate).toLocaleDateString() : <em>NA</em>}</td>
+                            </tr>
+                            <tr>
+                              <td className="fw-medium text-start">Job Role:</td>
+                              <td className="text-start">{currentEmployee?.jobRole || <em>NA</em>}</td>
+                            </tr>
+                            <tr>
+                              <td className="fw-medium text-start">Address:</td>
+                              <td className="text-start">{currentEmployee?.currentAddress || <em>NA</em>}</td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </div>
+                      <button className="btn btn-primary btn-block" onClick={() => navigate(`/employee/manage/${currentEmployee?.id}`)}>
+                        Edit Profile
+                      </button>
+                    </div>
+                  </div>
+                </div>
 
               </div>
             </div>