diff --git a/src/components/common/PieChart/PieChart.test.jsx b/src/components/common/PieChart/PieChart.test.jsx
deleted file mode 100644
index 806cb579ca..0000000000
--- a/src/components/common/PieChart/PieChart.test.jsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-import { render, unmountComponentAtNode } from 'react-dom';
-import { act } from 'react-dom/test-utils';
-import { PieChart } from './PieChart';
-
-let container = null;
-beforeEach(() => {
-  // setup a DOM element as a render target
-  container = document.createElement('div');
-  document.body.appendChild(container);
-});
-
-afterEach(() => {
-  // cleanup on exiting
-  unmountComponentAtNode(container);
-  container.remove();
-  container = null;
-});
-
-describe('PieChart', () => {
-  it('renders without crashing', () => {
-    act(() => {
-      render(<PieChart data={{}} dataLegend={{}} pieChartId="test" dataLegendHeader="Test" />, container);
-    });
-  });
-
-  it('renders correct total hours', () => {
-    act(() => {
-      render(<PieChart data={{ a: 1, b: 2 }} dataLegend={{ a: ['A'], b: ['B'] }} pieChartId="test" dataLegendHeader="Test" />, container);
-    });
-    expect(container.textContent).toContain('Total Hours : 3.00');
-  });
-
-  it('renders correct legend', () => {
-    act(() => {
-      render(<PieChart data={{ a: 1, b: 2 }} dataLegend={{ a: ['A'], b: ['B'] }} pieChartId="test" dataLegendHeader="Test" />, container);
-    });
-    expect(container.textContent).toContain('A');
-    expect(container.textContent).toContain('B');
-  });
-});
diff --git a/src/components/common/PieChart/__tests__/PieChart.test.js b/src/components/common/PieChart/__tests__/PieChart.test.js
new file mode 100644
index 0000000000..e69005a57f
--- /dev/null
+++ b/src/components/common/PieChart/__tests__/PieChart.test.js
@@ -0,0 +1,144 @@
+import React from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+import { act } from 'react-dom/test-utils';
+import { PieChart } from '../PieChart';
+
+let container = null;
+beforeEach(() => {
+  // setup a DOM element as a render target
+  container = document.createElement('div');
+  document.body.appendChild(container);
+});
+
+afterEach(() => {
+  // cleanup on exiting
+  unmountComponentAtNode(container);
+  container.remove();
+  container = null;
+});
+
+describe('PieChart', () => {
+  it('renders without crashing', () => {
+    act(() => {
+      render(
+        <PieChart data={{}} dataLegend={{}} pieChartId="test" dataLegendHeader="Test" />,
+        container,
+      );
+    });
+  });
+
+  it('renders correct total hours', () => {
+    act(() => {
+      render(
+        <PieChart
+          data={{ a: 1, b: 2 }}
+          dataLegend={{ a: ['A'], b: ['B'] }}
+          pieChartId="test"
+          dataLegendHeader="Test"
+        />,
+        container,
+      );
+    });
+    expect(container.textContent).toContain('Total Hours : 3.00');
+  });
+
+  it('renders correct legend', () => {
+    act(() => {
+      render(
+        <PieChart
+          data={{ a: 1, b: 2 }}
+          dataLegend={{ a: ['A'], b: ['B'] }}
+          pieChartId="test"
+          dataLegendHeader="Test"
+        />,
+        container,
+      );
+    });
+    expect(container.textContent).toContain('A');
+    expect(container.textContent).toContain('B');
+  });
+
+  it('applies dark mode class correctly', () => {
+    act(() => {
+      render(
+        <PieChart
+          data={{ a: 1, b: 2 }}
+          dataLegend={{ a: ['A'], b: ['B'] }}
+          pieChartId="test"
+          dataLegendHeader="Test"
+          darkMode={true}
+        />,
+        container,
+      );
+    });
+
+    // Check if the dark mode class 'text-light' is applied
+    const pieChartWrapper = container.querySelector('.pie-chart-wrapper');
+    expect(pieChartWrapper.classList.contains('text-light')).toBe(true);
+  });
+
+  it('renders the SVG pie chart', () => {
+    act(() => {
+      render(
+        <PieChart
+          data={{ a: 1, b: 2 }}
+          dataLegend={{ a: ['A'], b: ['B'] }}
+          pieChartId="test"
+          dataLegendHeader="Test"
+        />,
+        container,
+      );
+    });
+
+    // Check if the SVG element is rendered
+    const svgElement = container.querySelector('svg');
+    expect(svgElement).toBeInTheDocument();
+
+    // Ensure correct number of pie slices (based on the data length)
+    const paths = svgElement.querySelectorAll('path');
+    expect(paths.length).toBe(2); // since we have 2 data entries (a and b)
+  });
+
+  it('generates the correct number of unique colors', () => {
+    act(() => {
+      render(
+        <PieChart
+          data={{ a: 1, b: 2, c: 3, d: 4 }}
+          dataLegend={{ a: ['A'], b: ['B'], c: ['C'], d: ['D'] }}
+          pieChartId="test"
+          dataLegendHeader="Test"
+        />,
+        container,
+      );
+    });
+
+    // Ensure 4 unique colors are generated (since we have 4 data entries)
+    const legendItems = container.querySelectorAll('.data-legend-color');
+    expect(legendItems.length).toBe(4);
+  });
+
+  it('removes SVG on unmount', () => {
+    act(() => {
+      render(
+        <PieChart
+          data={{ a: 1, b: 2 }}
+          dataLegend={{ a: ['A'], b: ['B'] }}
+          pieChartId="test"
+          dataLegendHeader="Test"
+        />,
+        container,
+      );
+    });
+
+    // Check if the SVG element is present initially
+    expect(container.querySelector('svg')).toBeInTheDocument();
+
+    // Unmount the component
+    act(() => {
+      unmountComponentAtNode(container);
+    });
+
+    // After unmounting, the SVG should be removed
+    expect(container.querySelector('svg')).toBeNull();
+  });
+});
diff --git a/src/components/common/PieChart/colorsGenerator.test.jsx b/src/components/common/PieChart/__tests__/colorsGenerator.test.js
similarity index 53%
rename from src/components/common/PieChart/colorsGenerator.test.jsx
rename to src/components/common/PieChart/__tests__/colorsGenerator.test.js
index a43e3e557c..bb4d4abab9 100644
--- a/src/components/common/PieChart/colorsGenerator.test.jsx
+++ b/src/components/common/PieChart/__tests__/colorsGenerator.test.js
@@ -1,4 +1,4 @@
-import { pieChartColors, generateArrayOfUniqColors } from './colorsGenerator'; // Replace 'yourFile' with the actual path to your file
+import { pieChartColors, generateArrayOfUniqColors } from '../colorsGenerator';
 
 describe('pieChartColors', () => {
   test('contains the correct number of colors', () => {
@@ -7,7 +7,7 @@ describe('pieChartColors', () => {
 
   test('contains valid RGB color strings', () => {
     pieChartColors.forEach(color => {
-      expect(color).toMatch(/^rgb\(\d+, \d+, \d+\)$/);
+      expect(color).toMatch(/^rgb\(\d{1,3}, \d{1,3}, \d{1,3}\)$/);
     });
   });
 });
@@ -25,7 +25,7 @@ describe('generateArrayOfUniqColors', () => {
     const result = generateArrayOfUniqColors(numberOfColors);
 
     result.forEach(color => {
-      expect(color).toMatch(/^rgb\(\d+, \d+, \d+\)$/);
+      expect(color).toMatch(/^rgb\(\d{1,3}, \d{1,3}, \d{1,3}\)$/);
     });
   });
 
@@ -35,4 +35,25 @@ describe('generateArrayOfUniqColors', () => {
 
     expect(result).toEqual(pieChartColors.slice(0, numberOfColors));
   });
-});
\ No newline at end of file
+
+  test('returns additional unique colors when numberOfColors exceeds the length of pieChartColors', () => {
+    const numberOfColors = 10;
+    const result = generateArrayOfUniqColors(numberOfColors);
+
+    expect(result).toHaveLength(numberOfColors);
+
+    const uniqueSet = new Set(result);
+    expect(uniqueSet.size).toBe(numberOfColors);
+
+    result.forEach(color => {
+      expect(color).toMatch(/^rgb\(\d{1,3}, \d{1,3}, \d{1,3}\)$/);
+    });
+  });
+
+  test('returns an empty array when numberOfColors is 0', () => {
+    const numberOfColors = 0;
+    const result = generateArrayOfUniqColors(numberOfColors);
+
+    expect(result).toEqual([]);
+  });
+});