diff --git a/.github/workflows/pull_request_test.yml b/.github/workflows/pull_request_test.yml
index 6cb5c6778e..9f6010e85f 100644
--- a/.github/workflows/pull_request_test.yml
+++ b/.github/workflows/pull_request_test.yml
@@ -53,6 +53,6 @@ jobs:
     - name: Install Dependencies
       run: yarn install --frozen-lockfile
     - name: Run Unit Tests for Changed Files Only
-      run: yarn run test:changed
+      run: NODE_OPTIONS="--max-old-space-size=4096" yarn run test:changed
     - name: Run Lint
       run: yarn run lint
\ No newline at end of file
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index ce356edad2..2b0ab2cd51 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -22,7 +22,7 @@ jobs:
         run: yarn install
 
       - name: Run tests
-        run: yarn test
+        run: NODE_OPTIONS="--max-old-space-size=4096" yarn test
 
       - name: Upload test results
         if: failure()
diff --git a/package.json b/package.json
index 6bf027efb5..a29e467274 100644
--- a/package.json
+++ b/package.json
@@ -177,7 +177,8 @@
     "@typescript-eslint/eslint-plugin": "^8.44.1",
     "@typescript-eslint/parser": "^8.44.1",
     "@vitejs/plugin-react": "^4.5.0",
-    "@vitest/ui": "3.2.2",
+    "@vitest/coverage-v8": "^3.2.4",
+    "@vitest/ui": "^3.2.4",
     "babel-jest": "^29.7.0",
     "baseline-browser-mapping": "^2.9.17",
     "cross-env": "^5.2.1",
@@ -206,7 +207,7 @@
     "stylelint-config-standard": "^39.0.1",
     "typescript": "^4.8.4",
     "vite": "^6.3.5",
-    "vitest": "^3.2.0"
+    "vitest": "^3.2.4"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
diff --git a/src/components/Reports/PeopleReport/PeopleReport.jsx b/src/components/Reports/PeopleReport/PeopleReport.jsx
index 8ff906bf3b..6b5d81e0a0 100644
--- a/src/components/Reports/PeopleReport/PeopleReport.jsx
+++ b/src/components/Reports/PeopleReport/PeopleReport.jsx
@@ -482,7 +482,6 @@ class PeopleReport extends Component {
     const boxCount = visibleBlocks.length;
 
     return (
-
       <div className={`${styles.containerPeopleWrapper} ${darkMode ? styles.bgOxfordBlue : ''}`}>
         <div className={`${styles.peopleReportFlexLayout}`}>
 
@@ -492,7 +491,6 @@ class PeopleReport extends Component {
                 boxCount === 3 ? styles.threeBoxes :
                 ''}`}
               >
-
                 <ReportPage.ReportBlock
                   firstColor="#ff5e82"
                   secondColor="#e25cb2"
@@ -651,54 +649,60 @@ class PeopleReport extends Component {
               darkMode={darkMode}
             >
 
-              <div
-                // style={{ minHeight: '200px' }}
-                className={`${styles.reportStats} ${darkMode ? `${styles.bgYinmnBlue} ${styles.textLight}` : ''}`}
-              >
-                <p>
-                  <Link to={`/userProfile/${_id}`}
-                    title="View Profile"
-                    className={`${darkMode ? `${styles.textLight} ${styles.fontWeightBold}` : ''}`}
-                    style={{ fontSize: "24px" }}>
-                    {firstName} {lastName}
-                  </Link>
-                </p>
-                <div className={styles.dateInfo}>
-                  <div>
-                    <p>Role</p>
-                    <h4>{role}</h4>
-                  </div>
-                  </div>
-                  <div className={styles.dateInfo}>
-                  <div>
-                    <p>Title</p>
-                    <h4>{jobTitle}</h4>
-                  </div>
-                </div>
-
-                {/* {endDate ? ( */}
-                <div className={styles.rehireable}>
-                  <Checkbox
-                    value={isRehireable}
-                    onChange={() => this.setRehireable(!isRehireable)}
-                    label="Rehireable"
-                    darkMode={darkMode}
-                    className={`${styles.reportStats} ${darkMode ? `${styles.bgYinmnBlue} ${styles.textLight}` : ''}`}
-                    backgroundColorCN={darkMode ? styles.bgYinmnBlue : ""}
-                    textColorCN={darkMode ? styles.textLight : ""}
-                  />
-                </div>
-                <div className={styles.dateInfo}>
-                  <div>
-                    <p>Start Date</p>
-                    <h4>{formatDate(startDate)}</h4>
-                  </div>
-                  <div>
-                    <p>End Date</p>
-                    <h4>{endDate ? formatDate(endDate) : 'N/A'}</h4>
-                  </div>
-                </div>
-              </div>
+<div
+  className={`${styles.card} ${
+    darkMode ? `${styles.darkCard}` : styles.lightCard
+  }`}
+>
+  {/* Name */}
+  <Link
+    to={`/userProfile/${_id}`}
+    title="View Profile"
+    className={`${styles.userName} ${
+      darkMode ? styles.textLight : styles.textDark
+    }`}
+  >
+    {firstName} {lastName}
+  </Link>
+
+  {/* Info Grid */}
+  <div className={styles.infoGrid}>
+    <div>
+      <p className={styles.label}>Role</p>
+      <h5 className={styles.value}>{role}</h5>
+    </div>
+
+    <div>
+      <p className={styles.label}>Title</p>
+      <h5 className={styles.value}>{jobTitle}</h5>
+    </div>
+
+    <div>
+      <p className={styles.label}>Start Date</p>
+      <h5 className={styles.value}>{formatDate(startDate)}</h5>
+    </div>
+
+    <div>
+      <p className={styles.label}>End Date</p>
+      <h5 className={styles.value}>
+        {endDate ? formatDate(endDate) : 'N/A'}
+      </h5>
+    </div>
+  </div>
+
+  {/* Checkbox */}
+  <div className={styles.checkboxWrapper}>
+    <Checkbox
+      value={isRehireable}
+      onChange={() => this.setRehireable(!isRehireable)}
+      label="Rehireable"
+      darkMode={darkMode}
+      backgroundColorCN={darkMode ? styles.bgYinmnBlue : ""}
+      textColorCN={darkMode ? styles.textLight : ""}
+    />
+  </div>
+</div>
+              
             </ReportPage.ReportHeader>
           </div >
         </div>
diff --git a/src/components/Reports/PeopleReport/PeopleReport.module.css b/src/components/Reports/PeopleReport/PeopleReport.module.css
index 4efcd61d65..358e1372a3 100644
--- a/src/components/Reports/PeopleReport/PeopleReport.module.css
+++ b/src/components/Reports/PeopleReport/PeopleReport.module.css
@@ -1,5 +1,6 @@
 body {
   margin: 0;
+
   /* font-family: 'Lato', sans-serif; */
 }
 
@@ -38,7 +39,7 @@ body {
 } */
 
 
-/*profile style changes ends*/
+/* profile style changes ends */
 
 .btn--dark-sea-green {
   background-color: #c9d6c6 !important;
@@ -160,7 +161,7 @@ body {
   background-color: #666;
 }
 
-/*Badge changes ends here*/
+/* Badge changes ends here */
 
 .visualizationDiv {
   /* margin-bottom: 10px; */
@@ -185,10 +186,10 @@ body {
   background-color: #f2f2f2;
 }
 
-/*Table css starts*/
+/* Table css starts */
 
 .introDate {
-  margin: 16px 0px 16px 0px;
+  margin: 16px 0;
   display: flex;
 }
 
@@ -196,9 +197,9 @@ body {
   width: 100%;
 }
 
-@media (max-width: 850px) {
+@media (width <= 850px) {
   .introDate {
-    margin: 16px 0px 16px 0px;
+    margin: 16px 0;
     display: flex;
     justify-content: center;
   }
@@ -236,13 +237,13 @@ body {
   color:white
 }
 
-@media (max-width: 1488px) {
+@media (width <= 1488px) {
   .peopleReportTimeLogsWrapper > .peopleReportTimeLogBlock {
     flex: 0 1 calc((100% - 1rem) / 2);
   }
 }
 
-@media (max-width: 1155px) {
+@media (width <= 1155px) {
   .peopleReportTimeLogsWrapper {
     justify-content: center;
     gap: 1.5rem;
@@ -254,26 +255,31 @@ body {
 }
 
 .peopleReportTimeLogsWrapper.threeBoxes > .peopleReportTimeLogBlock {
-  flex: 0 1 calc((100% - 2rem) / 3); /* 3 per row */
+  flex: 0 1 28%; /* Smaller boxes that fit in one line */
+  min-width: 120px; /* Minimum width to keep readable */
 }
 
 /* Prevent wrapping weirdly at mid-screen sizes for 3-box layout */
-@media (max-width: 1488px) {
+@media (width <= 1488px) {
   .peopleReportTimeLogsWrapper.threeBoxes > .peopleReportTimeLogBlock {
-    flex: 0 1 calc((100% - 2rem) / 3);
+    flex: 0 1 28%;
+    min-width: 120px;
   }
 }
 
-@media (max-width: 1155px) {
-  .peopleReportTimeLogsWrapper.threeBoxes {
-    justify-content: center;
-    gap: 1.5rem;
-  }
+@media (width <= 1155px) {
   .peopleReportTimeLogsWrapper.threeBoxes > .peopleReportTimeLogBlock {
-    flex: 0 1 100%; /* Stack only on smaller screens */
+    flex: 0 1 28%;
+    min-width: 120px;
   }
 }
 
+@media (width <= 850px) {
+  .peopleReportTimeLogsWrapper.threeBoxes > .peopleReportTimeLogBlock {
+    flex: 0 1 28%;
+    min-width: 120px;
+  }
+}
 
 .infringementContainer {
   display: flex;
@@ -349,7 +355,7 @@ body {
   color: #e9ecef;
 }
 
-@media (max-width: 1100px) {
+@media (width <= 1100px) {
   .mobilePeopleTable {
     display: flex;
     flex-direction: column;
@@ -362,7 +368,7 @@ body {
   order: 1;
 }
 
-@media (max-width: 981px) {
+@media (width <= 981px) {
   .orderColumn {
     order: -1;
     flex: 0 0 100%;
@@ -400,10 +406,9 @@ body {
   width: 23vw;
   display: flex;
   flex-direction: column;
-  min-height: 100%;
   margin-top: 2rem;
-  height: 140vh; 
-  overflow: hidden;
+  height: auto;
+  overflow: visible;
 }
 
 .peopleReportProfileWrapper {
@@ -420,30 +425,30 @@ body {
   background-color: white;
   padding: 2rem;
   border-radius: 16px;
-  box-shadow: 0 0 12px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 0 12px rgb(0 0 0 / 8%);
   height: 698px;
   margin-top: 2rem;
 }
 
-@media (min-width: 1489px) and (max-width: 1784px) {
+@media (width >= 1489px) and (width <= 1784px) {
   .reportStats {
     height: 721px;
   }
 }
 
-@media (min-width: 1156px) and (max-width: 1488px) {
+@media (width >= 1156px) and (width <= 1488px) {
   .reportStats {
     height: 869px;
   }
 }
 
-@media (min-width: 1025px) and (max-width: 1155px) {
+@media (width >= 1025px) and (width <= 1155px) {
   .reportStats {
     height: 873px;
   }
 }
 
-@media (min-width: 960px) and (max-width: 1024px) {
+@media (width >= 960px) and (width <= 1024px) {
   .reportStats {
     height: 895px;
   }
@@ -458,17 +463,16 @@ body {
 }
 
 .textLight {
-  color: #ffffff !important;
+  color: #fff !important;
 }
 
 .fontWeightBold {
   font-weight: 600 !important; /* or 700 if you prefer */
 }
 
-@media (max-width: 960px) {
+@media (width <= 640px) {
   .peopleReportFlexLayout {
-    flex-direction: column;
-    flex-wrap: wrap;
+    flex-flow: column wrap;
   }
 
   .peopleReportLeft,
@@ -477,10 +481,15 @@ body {
   }
 
   .peopleReportRight {
-    margin-top: 1rem;
+    order: -1;
+    margin-top: 0;
     height: auto !important; /* override the 140vh */
   }
 
+  .peopleReportLeft {
+    order: 0;
+  }
+
   .peopleReportTimeLogsWrapper {
     flex-direction: column;
     align-items: center; 
@@ -517,4 +526,56 @@ body {
     justify-content: center;
     align-items: center;
   }
+
+  .card {
+  border-radius: 16px;
+  padding: 20px;
+  transition: all 0.3s ease;
+}
+
+.lightCard {
+  background: #fff;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 8%);
+}
+
+.darkCard {
+  background: #1e3a5f;
+  color: #f5f5f5;
+}
+
+.userName {
+  font-size: 22px;
+  font-weight: 600;
+  display: block;
+  margin-bottom: 15px;
+  text-decoration: none;
+}
+
+.userName:hover {
+  text-decoration: underline;
+}
+
+.infoGrid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 15px;
+  margin-bottom: 15px;
+}
+
+.label {
+  font-size: 12px;
+  color: #888;
+  margin-bottom: 4px;
+}
+
+.value {
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.checkboxWrapper {
+  margin-top: 10px;
+}
+
+  
 }
diff --git a/src/components/common/PieChart/ProjectPieChart.jsx b/src/components/common/PieChart/ProjectPieChart.jsx
index 4a3393f36a..3ae77cde90 100644
--- a/src/components/common/PieChart/ProjectPieChart.jsx
+++ b/src/components/common/PieChart/ProjectPieChart.jsx
@@ -147,10 +147,7 @@ export default function UserProjectD3PieChart({ projectsData, darkMode }) {
         </ResponsiveContainer>
       </div>
 
-      <div
-        className={styles['pie-chart-legend-container']}
-        style={{ marginTop: 8, marginLeft: 40 }}
-      >
+      <div className={styles['pie-chart-legend-container']} style={{ marginTop: 8 }}>
         <table
           className={
             darkMode ? styles['pie-chart-legend-table-dark'] : styles['pie-chart-legend-table']
diff --git a/src/components/common/PieChart/UserProjectPieChart.module.css b/src/components/common/PieChart/UserProjectPieChart.module.css
index 9ba4379825..94a4693184 100644
--- a/src/components/common/PieChart/UserProjectPieChart.module.css
+++ b/src/components/common/PieChart/UserProjectPieChart.module.css
@@ -2,13 +2,13 @@
     display: flex; 
     align-items: center;
     justify-content: flex-start;
-    
-    /* overflow: hidden; */
   }
+
   .donut-box {
   width: 240px;   /* match the bottom donut look */
   height: 240px;  /* square so the ring isn’t cropped */
 }
+
   .pie-chart-wrapper svg,
 .pie-chart-wrapper .recharts-surface {
   /* border: none !important; */
@@ -16,6 +16,7 @@
   box-shadow: none !important;
 }
 .pie-chart-wrapper svg { border: 0 !important; }
+
   .pie-chart {
     margin-right: 32px;
     height: 100%;
@@ -54,14 +55,14 @@
     width: 240px;
     display: flex;
     justify-content: space-between;
-    color: rgba(0, 0, 0, 0.5);
+    color: rgb(0 0 0 / 50%);
   }
   
   .data-legend-info-part:not(:last-child) {
     margin-right: 24px;
   }
   
-  @media (max-width: 670px) {
+  @media (width <= 670px) {
     .pie-chart-wrapper {
       flex-direction: column;
     }
@@ -71,12 +72,12 @@
     position: absolute;
     text-align: center;
     padding: 0.5rem;
-    background: #ffffff;
+    background: #fff;
     color: #313639;
     border-radius: 8px;
     pointer-events: none;
     font-size: 1rem;
-    word-wrap: break-word;
+    overflow-wrap: break-word;
     white-space: normal;
   }
   
@@ -101,40 +102,37 @@
   .slider {
     position: absolute;
     cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    inset: 0;
     background-color: #baaeae;
     transition: 0.4s;
     border-radius: 34px;
   }
   
-  .slider:before {
+  .slider::before {
     position: absolute;
     content: "";
     height: 14px;
     width: 14px;
     left: 3px;
     bottom: 3px;
-    background-color: rgb(15, 15, 15);
+    background-color: rgb(15 15 15);
     transition: 0.4s;
     border-radius: 50%;
   }
   
+/* Optional: Dark mode adjustments */
+  .text-light .slider {
+    background-color: #fff;
+  }
+
   input:checked + .slider {
     background-color: #2196F3;
   }
-  
-  input:checked + .slider:before {
+
+  input:checked + .slider::before {
     transform: translateX(14px);
   }
   
-  /* Optional: Dark mode adjustments */
-  .text-light .slider {
-    background-color: #ffffff;
-  }
-  
   .text-light input:checked + .slider {
     background-color: #4CAF50;
   }
@@ -169,6 +167,7 @@
     background: none;
     color: inherit;
   }
+
   .pie-chart-legend-table tr{
     background-color: white;
   }
@@ -184,15 +183,17 @@
   .pie-chart-legend-table-dark td {
     padding: 8px;
     text-align: left;
-    color:rgb(236, 233, 233)
+    color:rgb(236 233 233)
   }
   
  
   .pie-chart-legend-table-dark th {
     font-weight: bold;
     background: none;
+
     /* color: inherit; */
   }
+
   .pie-chart-legend-table-dark tr{
     background-color: #1f2a40; 
     color: white;
@@ -204,6 +205,7 @@
     height: 16px;
     border-radius: 50%;
   }
+
   .total-row {
     font-weight: bold;
     margin-top: 10px;
@@ -216,9 +218,10 @@
 
 .strong-text.text-light { color:#f5f5f5 !important; }
 
-  @media (max-width: 671px) {
+  @media (width <= 671px) {
     .pie-chart-legend-table-wrapper {
       max-height: 200px; 
+      flex-wrap: wrap;
     }
   }
 
@@ -264,3 +267,14 @@
   width: 80px; /* Hours column */
   text-align: right;
 }
+
+@media (width <= 1200px) {
+  .pie-chart-wrapper {
+    flex-flow: row wrap;
+  }
+
+  .pie-chart-legend-container {
+    flex: 1;
+    min-width: 300px; /* prevents crushing */
+  }
+}
\ No newline at end of file
diff --git a/src/setupTests.js b/src/setupTests.js
index 60febd3191..56c44f72ac 100644
--- a/src/setupTests.js
+++ b/src/setupTests.js
@@ -137,6 +137,11 @@ vi.mock('html2canvas', () => ({
   })),
 }));
 
+// Mock AutoUpdate component to prevent intervals in tests
+vi.mock('../components/AutoUpdate', () => ({
+  default: () => null,
+}));
+
 // Mock jspdf
 vi.mock('jspdf', () => ({
   jsPDF: vi.fn().mockImplementation(() => ({
diff --git a/vitest.config.js b/vitest.config.js
index b2f8cb62de..7500eb9e0c 100644
--- a/vitest.config.js
+++ b/vitest.config.js
@@ -100,5 +100,15 @@ export default defineConfig({
     environment: 'jsdom',
     globals: true,
     setupFiles: ['./src/setupTests.js'],
+    testTimeout: 30000, // 30 seconds timeout
+    pool: 'threads',
+    poolOptions: {
+      threads: {
+        singleThread: false,
+        useAtomics: true,
+      },
+    },
+    maxThreads: 4,
+    minThreads: 1,
   },
 });