diff --git a/__tests__/Unit/Componets/Combobox/Combobox.test.tsx b/__tests__/Unit/Componets/Combobox/Combobox.test.tsx
index df9a0e8..f7031f6 100644
--- a/__tests__/Unit/Componets/Combobox/Combobox.test.tsx
+++ b/__tests__/Unit/Componets/Combobox/Combobox.test.tsx
@@ -1,124 +1,114 @@
 import React from "react";
-import { render, fireEvent, screen, waitFor} from "@testing-library/react";
-import {ComboboxMockData} from "../../../../__mocks__/combobox";
+import { render, fireEvent, screen, waitFor } from "@testing-library/react";
+import { ComboboxMockData } from "../../../../__mocks__/combobox";
 import ComboboxDropdown from "@/components/Combobox";
 
-describe('Combobox Component', () => {
-  it('should render with placeholder and dropdown closed', () => {
-    render(<ComboboxDropdown options={ComboboxMockData} placeholder="placeholder" />);
+describe("Combobox Component", () => {
+    it("should render with placeholder and dropdown closed", () => {
+        render(<ComboboxDropdown options={ComboboxMockData} placeholder="placeholder" />);
 
-    const input = screen.getByRole('combobox');
-    expect(input).toHaveAttribute('placeholder', 'placeholder');
+        const input = screen.getByRole("combobox");
+        expect(input).toHaveAttribute("placeholder", "placeholder");
 
-    expect(screen.queryByRole('listbox')).not.toBeInTheDocument(); // Check listbox is not visible
-  });
-
-  it('should open dropdown on button click and display the options', async () => {
-    render(<ComboboxDropdown options={ComboboxMockData} placeholder="placeholder"  />);
+        expect(screen.queryByRole("listbox")).not.toBeInTheDocument(); // Check listbox is not visible
+    });
 
-    const button = screen.getByRole('button');
+    it("should open dropdown on button click and display the options", async () => {
+        render(<ComboboxDropdown options={ComboboxMockData} placeholder="placeholder" />);
 
-    expect(screen.queryByRole('listbox')).not.toBeInTheDocument(); // Check listbox is initially closed
+        const button = screen.getByRole("button");
 
-    fireEvent.click(button);
+        expect(screen.queryByRole("listbox")).not.toBeInTheDocument(); // Check listbox is initially closed
 
-    await new Promise((resolve) => setTimeout(resolve, 100)); // Wait for dropdown animation
+        fireEvent.click(button);
 
-    await screen.findByRole('listbox');
+        await new Promise((resolve) => setTimeout(resolve, 100)); // Wait for dropdown animation
 
-    expect(screen.getByText('React')).toBeInTheDocument();
-    expect(screen.getByText('Go')).toBeInTheDocument();
-    expect(screen.getByText('Vanilla JS')).toBeInTheDocument();
+        await screen.findByRole("listbox");
 
-  });
+        expect(screen.getByText("React")).toBeInTheDocument();
+        expect(screen.getByText("Go")).toBeInTheDocument();
+        expect(screen.getByText("Vanilla JS")).toBeInTheDocument();
+    });
 
+    it("Select a value from the combobox list", async () => {
+        const onChangeMock = jest.fn();
+        render(<ComboboxDropdown options={ComboboxMockData} placeholder="placeholder" onChange={onChangeMock} />);
+        const button = screen.getByRole("button");
 
-  it('Select a value from the combobox list', async() => {
-    const onChangeMock = jest.fn();
-    render(<ComboboxDropdown options={ComboboxMockData} placeholder="placeholder" onChange={onChangeMock}/>);
-    const button = screen.getByRole('button');
+        expect(screen.queryByRole("listbox")).not.toBeInTheDocument(); // Check listbox is initially closed
 
-    expect(screen.queryByRole('listbox')).not.toBeInTheDocument(); // Check listbox is initially closed
+        fireEvent.click(button);
 
-    fireEvent.click(button);
+        await new Promise((resolve) => setTimeout(resolve, 100)); // Wait for dropdown animation
 
-    await new Promise((resolve) => setTimeout(resolve, 100)); // Wait for dropdown animation
+        await screen.findByRole("listbox");
 
-    await screen.findByRole('listbox');
+        expect(screen.getByText("React")).toBeInTheDocument();
+        expect(screen.getByText("Go")).toBeInTheDocument();
+        expect(screen.getByText("Vanilla JS")).toBeInTheDocument();
 
-    expect(screen.getByText('React')).toBeInTheDocument();
-    expect(screen.getByText('Go')).toBeInTheDocument();
-    expect(screen.getByText('Vanilla JS')).toBeInTheDocument();
+        fireEvent.click(screen.getByText("React"));
+        expect(onChangeMock).toHaveBeenCalledWith({ id: 1, name: "React" });
+    });
 
-    fireEvent.click(screen.getByText('React'));
-    expect(onChangeMock).toHaveBeenCalledWith({ id: 1, name: 'React' });
-  });
+    it("filters the options based on input value", async () => {
+        render(<ComboboxDropdown onChange={() => {}} placeholder="placeholder" options={ComboboxMockData} />);
+        expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+        const button = screen.getByRole("button");
+        fireEvent.click(button);
+        await screen.findByRole("listbox");
 
-   it('filters the options based on input value', async () => {
-      render(<ComboboxDropdown onChange={() => {}} placeholder="placeholder" options={ComboboxMockData} />);
-      expect(screen.queryByRole('listbox')).not.toBeInTheDocument(); 
-      const button = screen.getByRole('button');
-      fireEvent.click(button);
-      await screen.findByRole('listbox');
-  
-      const input = screen.getByPlaceholderText('placeholder');
-      fireEvent.change(input, { target: { value: 'React', id: 1 } });
+        const input = screen.getByPlaceholderText("placeholder");
+        fireEvent.change(input, { target: { value: "React", id: 1 } });
 
-      await waitFor(() => {
-      expect(screen.getByText('React')).toBeInTheDocument();
-      });
+        await waitFor(() => {
+            expect(screen.getByText("React")).toBeInTheDocument();
+        });
 
-      screen.debug();
+        screen.debug();
     });
 
-  it('Display No Results option when no options are present', async() => {
-   
-    render(<ComboboxDropdown options={ComboboxMockData}  placeholder="placeholder"/>);
-    const input = screen.getByRole('combobox');
-    expect(screen.queryByRole('listbox')).not.toBeInTheDocument(); // Check listbox is initially closed
-
-    fireEvent.change(input, { target: { value: 'NonexistentSkill' } });
-
-    await new Promise((resolve) => setTimeout(resolve, 100)); // Wait for dropdown animation
-
-    await screen.findByRole('listbox');
-
-    await screen.findByText('No Results');
-
-    expect(screen.getByText('No Results')).toBeInTheDocument();
-  
-  });
-
-  it('Close the combo box when clicked outside', async () => {
-
-    render(
-      <div>
-      <ComboboxDropdown
-        onChange={() => {}}
-        placeholder="placeholder"
-        options={ComboboxMockData}
-      />
-      <div data-testid="outside-element">Outside Element</div>
-    </div>
-    );
-    
-    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
-    const button = screen.getByRole('button');
-    fireEvent.click(button);
-  
-    // Ensure the dropdown is open
-    await screen.findByRole('listbox');
-    expect(screen.getByRole('listbox')).toBeInTheDocument();
-
-    const outsideElement = screen.getByTestId('outside-element');
-    fireEvent.mouseDown(outsideElement);
-    fireEvent.mouseUp(outsideElement);
-    fireEvent.click(outsideElement);
-  
-    // Wait for the dropdown to close
-    await waitFor(() => {
-      expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
-    });
+    it("Display No Results option when no options are present", async () => {
+        render(<ComboboxDropdown options={ComboboxMockData} placeholder="placeholder" />);
+        const input = screen.getByRole("combobox");
+        expect(screen.queryByRole("listbox")).not.toBeInTheDocument(); // Check listbox is initially closed
+
+        fireEvent.change(input, { target: { value: "NonexistentSkill" } });
+
+        await new Promise((resolve) => setTimeout(resolve, 100)); // Wait for dropdown animation
+
+        await screen.findByRole("listbox");
+
+        await screen.findByText("No Results");
+
+        expect(screen.getByText("No Results")).toBeInTheDocument();
     });
 
-});
\ No newline at end of file
+    it("Close the combo box when clicked outside", async () => {
+        render(
+            <div>
+                <ComboboxDropdown onChange={() => {}} placeholder="placeholder" options={ComboboxMockData} />
+                <div data-testid="outside-element">Outside Element</div>
+            </div>
+        );
+
+        expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+        const button = screen.getByRole("button");
+        fireEvent.click(button);
+
+        // Ensure the dropdown is open
+        await screen.findByRole("listbox");
+        expect(screen.getByRole("listbox")).toBeInTheDocument();
+
+        const outsideElement = screen.getByTestId("outside-element");
+        fireEvent.mouseDown(outsideElement);
+        fireEvent.mouseUp(outsideElement);
+        fireEvent.click(outsideElement);
+
+        // Wait for the dropdown to close
+        await waitFor(() => {
+            expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+        });
+    });
+});
diff --git a/__tests__/Unit/Componets/SkillComboBox/SkillComboBox.test.tsx b/__tests__/Unit/Componets/SkillComboBox/SkillComboBox.test.tsx
index ad93080..f436e62 100644
--- a/__tests__/Unit/Componets/SkillComboBox/SkillComboBox.test.tsx
+++ b/__tests__/Unit/Componets/SkillComboBox/SkillComboBox.test.tsx
@@ -3,126 +3,121 @@ import { render, fireEvent, screen, waitFor, prettyDOM } from "@testing-library/
 import SkillCombobox from "@/components/SkillComboBox";
 import { skillMockData } from "../../../../__mocks__/endorsements";
 
-describe('SkillCombobox Component', () => {
-  it('should render with placeholder and dropdown closed', () => {
-    render(<SkillCombobox options={skillMockData} placeholder="select skill" />);
+describe("SkillCombobox Component", () => {
+    it("should render with placeholder and dropdown closed", () => {
+        render(<SkillCombobox options={skillMockData} placeholder="select skill" />);
 
-    const input = screen.getByRole('combobox');
-    expect(input).toHaveAttribute('placeholder', 'select skill');
+        const input = screen.getByRole("combobox");
+        expect(input).toHaveAttribute("placeholder", "select skill");
 
-    expect(screen.queryByRole('listbox')).not.toBeInTheDocument(); // Check listbox is not visible
-  });
-
-  it('should open dropdown on button click and display the options', async () => {
-    render(<SkillCombobox options={skillMockData} placeholder="select skill"  />);
+        expect(screen.queryByRole("listbox")).not.toBeInTheDocument(); // Check listbox is not visible
+    });
 
-    const button = screen.getByRole('button');
+    it("should open dropdown on button click and display the options", async () => {
+        render(<SkillCombobox options={skillMockData} placeholder="select skill" />);
 
-    expect(screen.queryByRole('listbox')).not.toBeInTheDocument(); // Check listbox is initially closed
+        const button = screen.getByRole("button");
 
-    fireEvent.click(button);
+        expect(screen.queryByRole("listbox")).not.toBeInTheDocument(); // Check listbox is initially closed
 
-    await new Promise((resolve) => setTimeout(resolve, 100)); // Wait for dropdown animation
+        fireEvent.click(button);
 
-    await screen.findByRole('listbox');
+        await new Promise((resolve) => setTimeout(resolve, 100)); // Wait for dropdown animation
 
-    expect(screen.getByText('React')).toBeInTheDocument();
-    expect(screen.getByText('Go')).toBeInTheDocument();
-    expect(screen.getByText('Vanilla JS')).toBeInTheDocument();
+        await screen.findByRole("listbox");
 
-  });
+        expect(screen.getByText("React")).toBeInTheDocument();
+        expect(screen.getByText("Go")).toBeInTheDocument();
+        expect(screen.getByText("Vanilla JS")).toBeInTheDocument();
+    });
 
+    it("Select a value from the combobox list", async () => {
+        const onChangeMock = jest.fn();
+        render(<SkillCombobox options={skillMockData} placeholder="select skill" onChange={onChangeMock} />);
+        const button = screen.getByRole("button");
 
-  it('Select a value from the combobox list', async() => {
-    const onChangeMock = jest.fn();
-    render(<SkillCombobox options={skillMockData} placeholder="select skill" onChange={onChangeMock} />);
-    const button = screen.getByRole('button');
+        expect(screen.queryByRole("listbox")).not.toBeInTheDocument(); // Check listbox is initially closed
 
-    expect(screen.queryByRole('listbox')).not.toBeInTheDocument(); // Check listbox is initially closed
+        fireEvent.click(button);
 
-    fireEvent.click(button);
+        await new Promise((resolve) => setTimeout(resolve, 100)); // Wait for dropdown animation
 
-    await new Promise((resolve) => setTimeout(resolve, 100)); // Wait for dropdown animation
+        await screen.findByRole("listbox");
 
-    await screen.findByRole('listbox');
+        expect(screen.getByText("React")).toBeInTheDocument();
+        expect(screen.getByText("Go")).toBeInTheDocument();
+        expect(screen.getByText("Vanilla JS")).toBeInTheDocument();
 
-    expect(screen.getByText('React')).toBeInTheDocument();
-    expect(screen.getByText('Go')).toBeInTheDocument();
-    expect(screen.getByText('Vanilla JS')).toBeInTheDocument();
+        fireEvent.click(screen.getByText("React"));
+        expect(onChangeMock).toHaveBeenCalledWith({ id: 1, skill: "React" });
+    });
 
-    fireEvent.click(screen.getByText('React'));
-    expect(onChangeMock).toHaveBeenCalledWith({ id: 1, skill: 'React' });
-  });
+    it("filters the options based on input value", async () => {
+        render(<SkillCombobox onChange={() => {}} placeholder="select skill" options={skillMockData} />);
+        expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+        const button = screen.getByRole("button");
+        fireEvent.click(button);
+        await screen.findByRole("listbox");
 
-   it('filters the options based on input value', async () => {
-      render(<SkillCombobox onChange={() => {}} placeholder="select skill" options={skillMockData} />);
-      expect(screen.queryByRole('listbox')).not.toBeInTheDocument(); 
-      const button = screen.getByRole('button');
-      fireEvent.click(button);
-      await screen.findByRole('listbox');
-  
-      const input = screen.getByPlaceholderText('select skill');
-      fireEvent.change(input, { target: { value: 'React', id: 1 } });
+        const input = screen.getByPlaceholderText("select skill");
+        fireEvent.change(input, { target: { value: "React", id: 1 } });
 
-      await waitFor(() => {
-      expect(screen.getByText('React')).toBeInTheDocument();
-      });
+        await waitFor(() => {
+            expect(screen.getByText("React")).toBeInTheDocument();
+        });
 
-      screen.debug();
+        screen.debug();
     });
 
-  it('Display Add new Skill option when no options are present and add new skill click perform action', async() => {
-
-    const handleAddSkill = jest.fn();
-   
-    render(<SkillCombobox options={skillMockData}  placeholder="select skill" handleAddSkill={handleAddSkill}/>);
-    const input = screen.getByRole('combobox');
-    expect(screen.queryByRole('listbox')).not.toBeInTheDocument(); // Check listbox is initially closed
-
-    fireEvent.change(input, { target: { value: 'NonexistentSkill' } });
-
-    await new Promise((resolve) => setTimeout(resolve, 100)); // Wait for dropdown animation
-
-    await screen.findByRole('listbox');
-
-    await screen.findByText('Add New Skill');
-
-    await fireEvent.click(screen.getByText('Add New Skill'));
-  
-    expect(handleAddSkill).toHaveBeenCalled();
-  });
-
-  it('Close the combo box when clicked outside', async () => {
-
-    render(
-      <div>
-      <SkillCombobox
-        onChange={() => {}}
-        placeholder="select skill"
-        options={skillMockData}
-        handleAddSkill={() => {}}
-      />
-      <div data-testid="outside-element">Outside Element</div>
-    </div>
-    );
-    
-    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
-    const button = screen.getByRole('button');
-    fireEvent.click(button);
-  
-    // Ensure the dropdown is open
-    await screen.findByRole('listbox');
-    expect(screen.getByRole('listbox')).toBeInTheDocument();
-
-    const outsideElement = screen.getByTestId('outside-element');
-    fireEvent.mouseDown(outsideElement);
-    fireEvent.mouseUp(outsideElement);
-    fireEvent.click(outsideElement);
-  
-    // Wait for the dropdown to close
-    await waitFor(() => {
-      expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
-    });
+    it("Display Add new Skill option when no options are present and add new skill click perform action", async () => {
+        const handleAddSkill = jest.fn();
+
+        render(<SkillCombobox options={skillMockData} placeholder="select skill" handleAddSkill={handleAddSkill} />);
+        const input = screen.getByRole("combobox");
+        expect(screen.queryByRole("listbox")).not.toBeInTheDocument(); // Check listbox is initially closed
+
+        fireEvent.change(input, { target: { value: "NonexistentSkill" } });
+
+        await new Promise((resolve) => setTimeout(resolve, 100)); // Wait for dropdown animation
+
+        await screen.findByRole("listbox");
+
+        await screen.findByText("Add New Skill");
+
+        await fireEvent.click(screen.getByText("Add New Skill"));
+
+        expect(handleAddSkill).toHaveBeenCalled();
     });
 
-});
\ No newline at end of file
+    it("Close the combo box when clicked outside", async () => {
+        render(
+            <div>
+                <SkillCombobox
+                    onChange={() => {}}
+                    placeholder="select skill"
+                    options={skillMockData}
+                    handleAddSkill={() => {}}
+                />
+                <div data-testid="outside-element">Outside Element</div>
+            </div>
+        );
+
+        expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+        const button = screen.getByRole("button");
+        fireEvent.click(button);
+
+        // Ensure the dropdown is open
+        await screen.findByRole("listbox");
+        expect(screen.getByRole("listbox")).toBeInTheDocument();
+
+        const outsideElement = screen.getByTestId("outside-element");
+        fireEvent.mouseDown(outsideElement);
+        fireEvent.mouseUp(outsideElement);
+        fireEvent.click(outsideElement);
+
+        // Wait for the dropdown to close
+        await waitFor(() => {
+            expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+        });
+    });
+});
diff --git a/__tests__/components/combobox/Combobox.test.tsx b/__tests__/components/combobox/Combobox.test.tsx
index 25b8cbb..f5d420f 100644
--- a/__tests__/components/combobox/Combobox.test.tsx
+++ b/__tests__/components/combobox/Combobox.test.tsx
@@ -3,98 +3,88 @@ import { render, fireEvent, screen, waitFor, prettyDOM } from "@testing-library/
 import { ComboboxMockData } from "../../../__mocks__/combobox";
 import ComboboxDropdown from "@/components/Combobox";
 
-
 global.ResizeObserver = class {
-  observe() {}
-  unobserve() {}
-  disconnect() {}
+    observe() {}
+    unobserve() {}
+    disconnect() {}
 };
 
-describe('Combobox Component', () => {
-
-
- it('Should display combobox with placeholder and Down arrow icon', async () => {
-
-    render(<ComboboxDropdown options={ComboboxMockData} placeholder="placeholder"  />);
+describe("Combobox Component", () => {
+    it("Should display combobox with placeholder and Down arrow icon", async () => {
+        render(<ComboboxDropdown options={ComboboxMockData} placeholder="placeholder" />);
 
-    expect(screen.getByRole("combobox")).toBeInTheDocument();
-    expect(screen.getByPlaceholderText("placeholder")).toBeInTheDocument();
-    expect(screen.getByAltText("expand")).toBeInTheDocument();
-
- });
-
-  it('should open dropdown on button click and display the options', async () => {
-    render(<ComboboxDropdown options={ComboboxMockData} placeholder="placeholder"  />);
+        expect(screen.getByRole("combobox")).toBeInTheDocument();
+        expect(screen.getByPlaceholderText("placeholder")).toBeInTheDocument();
+        expect(screen.getByAltText("expand")).toBeInTheDocument();
+    });
 
-    const button = screen.getByRole('button');
+    it("should open dropdown on button click and display the options", async () => {
+        render(<ComboboxDropdown options={ComboboxMockData} placeholder="placeholder" />);
 
-    expect(screen.queryByRole('listbox')).not.toBeInTheDocument(); // Check listbox is initially closed
+        const button = screen.getByRole("button");
 
-    fireEvent.click(button);
+        expect(screen.queryByRole("listbox")).not.toBeInTheDocument(); // Check listbox is initially closed
 
-    await new Promise((resolve) => setTimeout(resolve, 100)); // Wait for dropdown animation
+        fireEvent.click(button);
 
-    await screen.findByRole('listbox');
+        await new Promise((resolve) => setTimeout(resolve, 100)); // Wait for dropdown animation
 
-    expect(screen.getByText('React')).toBeInTheDocument();
-    expect(screen.getByText('Go')).toBeInTheDocument();
-    expect(screen.getByText('Vanilla JS')).toBeInTheDocument();
+        await screen.findByRole("listbox");
 
-  });
+        expect(screen.getByText("React")).toBeInTheDocument();
+        expect(screen.getByText("Go")).toBeInTheDocument();
+        expect(screen.getByText("Vanilla JS")).toBeInTheDocument();
+    });
 
+    it("Select a value from the combobox list", async () => {
+        const onChangeMock = jest.fn();
+        render(<ComboboxDropdown options={ComboboxMockData} placeholder="placeholder" onChange={onChangeMock} />);
+        const button = screen.getByRole("button");
 
-  it('Select a value from the combobox list', async() => {
-    const onChangeMock = jest.fn();
-    render(<ComboboxDropdown options={ComboboxMockData} placeholder="placeholder" onChange={onChangeMock} />);
-    const button = screen.getByRole('button');
+        expect(screen.queryByRole("listbox")).not.toBeInTheDocument(); // Check listbox is initially closed
 
-    expect(screen.queryByRole('listbox')).not.toBeInTheDocument(); // Check listbox is initially closed
+        fireEvent.click(button);
 
-    fireEvent.click(button);
+        await new Promise((resolve) => setTimeout(resolve, 100)); // Wait for dropdown animation
 
-    await new Promise((resolve) => setTimeout(resolve, 100)); // Wait for dropdown animation
+        await screen.findByRole("listbox");
 
-    await screen.findByRole('listbox');
+        expect(screen.getByText("React")).toBeInTheDocument();
+        expect(screen.getByText("Go")).toBeInTheDocument();
+        expect(screen.getByText("Vanilla JS")).toBeInTheDocument();
 
-    expect(screen.getByText('React')).toBeInTheDocument();
-    expect(screen.getByText('Go')).toBeInTheDocument();
-    expect(screen.getByText('Vanilla JS')).toBeInTheDocument();
+        fireEvent.click(screen.getByText("React"));
+        expect(onChangeMock).toHaveBeenCalledWith({ id: 1, name: "React" });
+    });
 
-    fireEvent.click(screen.getByText('React'));
-    expect(onChangeMock).toHaveBeenCalledWith({ id: 1, name: 'React' });
-  });
+    it("filters the options based on input value", async () => {
+        render(<ComboboxDropdown onChange={() => {}} placeholder="placeholder" options={ComboboxMockData} />);
+        expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+        const button = screen.getByRole("button");
+        fireEvent.click(button);
+        await screen.findByRole("listbox");
 
-   it('filters the options based on input value', async () => {
-      render(<ComboboxDropdown  onChange={() => {}} placeholder="placeholder" options={ComboboxMockData} />);
-      expect(screen.queryByRole('listbox')).not.toBeInTheDocument(); 
-      const button = screen.getByRole('button');
-      fireEvent.click(button);
-      await screen.findByRole('listbox');
-  
-      const input = screen.getByPlaceholderText('placeholder');
-      fireEvent.change(input, { target: { value: 'React', id: 1 } });
+        const input = screen.getByPlaceholderText("placeholder");
+        fireEvent.change(input, { target: { value: "React", id: 1 } });
 
-      await waitFor(() => {
-      expect(screen.getByText('React')).toBeInTheDocument();
-      });
+        await waitFor(() => {
+            expect(screen.getByText("React")).toBeInTheDocument();
+        });
 
-      screen.debug();
+        screen.debug();
     });
 
-  it('Display No Results option when no options are present', async() => {
-
-    render(<ComboboxDropdown options={ComboboxMockData}  placeholder="placeholder"/>);
-    const input = screen.getByRole('combobox');
-    expect(screen.queryByRole('listbox')).not.toBeInTheDocument(); // Check listbox is initially closed
+    it("Display No Results option when no options are present", async () => {
+        render(<ComboboxDropdown options={ComboboxMockData} placeholder="placeholder" />);
+        const input = screen.getByRole("combobox");
+        expect(screen.queryByRole("listbox")).not.toBeInTheDocument(); // Check listbox is initially closed
 
-    fireEvent.change(input, { target: { value: 'NonexistentSkill' } });
+        fireEvent.change(input, { target: { value: "NonexistentSkill" } });
 
-    await new Promise((resolve) => setTimeout(resolve, 100)); // Wait for dropdown animation
+        await new Promise((resolve) => setTimeout(resolve, 100)); // Wait for dropdown animation
 
-    await screen.findByRole('listbox');
+        await screen.findByRole("listbox");
 
-    await screen.findByText('No Results');
-  });
-
-
-});
\ No newline at end of file
+        await screen.findByText("No Results");
+    });
+});
diff --git a/__tests__/components/skillcombobox/SkillCombobox.test.tsx b/__tests__/components/skillcombobox/SkillCombobox.test.tsx
index 4e1396b..21d9c16 100644
--- a/__tests__/components/skillcombobox/SkillCombobox.test.tsx
+++ b/__tests__/components/skillcombobox/SkillCombobox.test.tsx
@@ -5,96 +5,87 @@ import Endorsements from "@/pages/endorsements";
 import { skillMockData } from "../../../__mocks__/endorsements";
 
 global.ResizeObserver = class {
-  observe() {}
-  unobserve() {}
-  disconnect() {}
+    observe() {}
+    unobserve() {}
+    disconnect() {}
 };
 
-describe('SkillCombobox Component', () => {
+describe("SkillCombobox Component", () => {
+    it("skillbox compnent in the endorsement page", () => {
+        render(<Endorsements />);
 
-  it('skillbox compnent in the endorsement page', () => {
+        const skillCombobox = screen.getByRole("combobox");
 
-    render(<Endorsements />);
-
-    const skillCombobox = screen.getByRole("combobox");
-
-    expect(skillCombobox).toBeInTheDocument();
-   
-  });
-
-  it('should open dropdown on button click and display the options', async () => {
-    render(<SkillCombobox options={skillMockData} placeholder="select skill"  />);
+        expect(skillCombobox).toBeInTheDocument();
+    });
 
-    const button = screen.getByRole('button');
+    it("should open dropdown on button click and display the options", async () => {
+        render(<SkillCombobox options={skillMockData} placeholder="select skill" />);
 
-    expect(screen.queryByRole('listbox')).not.toBeInTheDocument(); // Check listbox is initially closed
+        const button = screen.getByRole("button");
 
-    fireEvent.click(button);
+        expect(screen.queryByRole("listbox")).not.toBeInTheDocument(); // Check listbox is initially closed
 
-    await new Promise((resolve) => setTimeout(resolve, 100)); // Wait for dropdown animation
+        fireEvent.click(button);
 
-    await screen.findByRole('listbox');
+        await new Promise((resolve) => setTimeout(resolve, 100)); // Wait for dropdown animation
 
-    expect(screen.getByText('React')).toBeInTheDocument();
-    expect(screen.getByText('Go')).toBeInTheDocument();
-    expect(screen.getByText('Vanilla JS')).toBeInTheDocument();
+        await screen.findByRole("listbox");
 
-  });
+        expect(screen.getByText("React")).toBeInTheDocument();
+        expect(screen.getByText("Go")).toBeInTheDocument();
+        expect(screen.getByText("Vanilla JS")).toBeInTheDocument();
+    });
 
+    it("Select a value from the combobox list", async () => {
+        const onChangeMock = jest.fn();
+        render(<SkillCombobox options={skillMockData} placeholder="select skill" onChange={onChangeMock} />);
+        const button = screen.getByRole("button");
 
-  it('Select a value from the combobox list', async() => {
-    const onChangeMock = jest.fn();
-    render(<SkillCombobox options={skillMockData} placeholder="select skill" onChange={onChangeMock} />);
-    const button = screen.getByRole('button');
+        expect(screen.queryByRole("listbox")).not.toBeInTheDocument(); // Check listbox is initially closed
 
-    expect(screen.queryByRole('listbox')).not.toBeInTheDocument(); // Check listbox is initially closed
+        fireEvent.click(button);
 
-    fireEvent.click(button);
+        await new Promise((resolve) => setTimeout(resolve, 100)); // Wait for dropdown animation
 
-    await new Promise((resolve) => setTimeout(resolve, 100)); // Wait for dropdown animation
+        await screen.findByRole("listbox");
 
-    await screen.findByRole('listbox');
+        expect(screen.getByText("React")).toBeInTheDocument();
+        expect(screen.getByText("Go")).toBeInTheDocument();
+        expect(screen.getByText("Vanilla JS")).toBeInTheDocument();
 
-    expect(screen.getByText('React')).toBeInTheDocument();
-    expect(screen.getByText('Go')).toBeInTheDocument();
-    expect(screen.getByText('Vanilla JS')).toBeInTheDocument();
+        fireEvent.click(screen.getByText("React"));
+        expect(onChangeMock).toHaveBeenCalledWith({ id: 1, skill: "React" });
+    });
 
-    fireEvent.click(screen.getByText('React'));
-    expect(onChangeMock).toHaveBeenCalledWith({ id: 1, skill: 'React' });
-  });
+    it("filters the options based on input value", async () => {
+        render(<SkillCombobox onChange={() => {}} placeholder="select skill" options={skillMockData} />);
+        expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+        const button = screen.getByRole("button");
+        fireEvent.click(button);
+        await screen.findByRole("listbox");
 
-   it('filters the options based on input value', async () => {
-      render(<SkillCombobox onChange={() => {}} placeholder="select skill" options={skillMockData} />);
-      expect(screen.queryByRole('listbox')).not.toBeInTheDocument(); 
-      const button = screen.getByRole('button');
-      fireEvent.click(button);
-      await screen.findByRole('listbox');
-  
-      const input = screen.getByPlaceholderText('select skill');
-      fireEvent.change(input, { target: { value: 'React', id: 1 } });
+        const input = screen.getByPlaceholderText("select skill");
+        fireEvent.change(input, { target: { value: "React", id: 1 } });
 
-      await waitFor(() => {
-      expect(screen.getByText('React')).toBeInTheDocument();
-      });
+        await waitFor(() => {
+            expect(screen.getByText("React")).toBeInTheDocument();
+        });
 
-      screen.debug();
+        screen.debug();
     });
 
-  it('Display Add new Skill option when no options are present', async() => {
-
-   
-    render(<SkillCombobox options={skillMockData}  placeholder="select skill"/>);
-    const input = screen.getByRole('combobox');
-    expect(screen.queryByRole('listbox')).not.toBeInTheDocument(); // Check listbox is initially closed
-
-    fireEvent.change(input, { target: { value: 'NonexistentSkill' } });
+    it("Display Add new Skill option when no options are present", async () => {
+        render(<SkillCombobox options={skillMockData} placeholder="select skill" />);
+        const input = screen.getByRole("combobox");
+        expect(screen.queryByRole("listbox")).not.toBeInTheDocument(); // Check listbox is initially closed
 
-    await new Promise((resolve) => setTimeout(resolve, 100)); // Wait for dropdown animation
+        fireEvent.change(input, { target: { value: "NonexistentSkill" } });
 
-    await screen.findByRole('listbox');
+        await new Promise((resolve) => setTimeout(resolve, 100)); // Wait for dropdown animation
 
-    await screen.findByText('Add New Skill');
-  });
+        await screen.findByRole("listbox");
 
-
-});
\ No newline at end of file
+        await screen.findByText("Add New Skill");
+    });
+});
diff --git a/__tests__/pages/endorsements.tests.tsx b/__tests__/pages/endorsements.tests.tsx
index 8b2fe7c..3706a8d 100644
--- a/__tests__/pages/endorsements.tests.tsx
+++ b/__tests__/pages/endorsements.tests.tsx
@@ -8,7 +8,7 @@ describe("Endorsements", () => {
         const upvoteButton = screen.getByText("Upvote");
         const downvoteButton = screen.getByText("Downvote");
         const CompleteEndorsementButton = screen.getByText("Complete Endorsement");
-        
+
         expect(screen.getByText("Endorsements")).toBeInTheDocument();
         expect(screen.getByText("search")).toBeInTheDocument();
         expect(screen.getByTestId("input")).toBeInTheDocument();
diff --git a/__tests__/services/endorsements.test.js b/__tests__/services/endorsements.test.js
index 026d136..b4a9b13 100644
--- a/__tests__/services/endorsements.test.js
+++ b/__tests__/services/endorsements.test.js
@@ -3,7 +3,6 @@ import { renderHook, waitFor } from "@testing-library/react";
 import { createWrapper } from "../utils";
 const { server } = require("../../__mocks__/server");
 
-
 beforeAll(() => {
     server.listen({
         onUnhandledRequest: "warn",
diff --git a/src/components/Combobox/index.tsx b/src/components/Combobox/index.tsx
index f01cfe1..61e6133 100644
--- a/src/components/Combobox/index.tsx
+++ b/src/components/Combobox/index.tsx
@@ -1,10 +1,10 @@
 import Image from "next/image";
-import { Combobox, Transition } from '@headlessui/react';
-import React, { useState, Fragment } from 'react';
+import { Combobox, Transition } from "@headlessui/react";
+import React, { useState, Fragment } from "react";
 
 type OptionTypes = {
-  id: number;
-  name: string;
+    id: number;
+    name: string;
 };
 
 type ComboboxProps = {
@@ -12,68 +12,62 @@ type ComboboxProps = {
     value?: OptionTypes;
     onChange?: (value: OptionTypes) => void;
     placeholder?: string;
-}
+};
 
-const ComboboxDropdown = ({options, value, onChange, placeholder}: ComboboxProps) => {
-  const [query, setQuery] = useState('');
+const ComboboxDropdown = ({ options, value, onChange, placeholder }: ComboboxProps) => {
+    const [query, setQuery] = useState("");
 
-  const filteredOptions =
-    query === ''
-      ? options
-      : options.filter((option) => {
-          return option?.name?.toLowerCase().includes(query.toLowerCase());
-        });
+    const filteredOptions =
+        query === ""
+            ? options
+            : options.filter((option) => {
+                  return option?.name?.toLowerCase().includes(query.toLowerCase());
+              });
 
-  return (
-    <Combobox value={value} onChange={onChange}>
-      <div className="relative">
-          <Combobox.Input
-            className="border rounded-lg border-blue bg-black/5 font-normal py-2.5 px-4 text-sm/6 h-11 w-64 focus:outline-none data-[focus]:outline-2 data-[focus]:-outline-offset-2 data-[focus]:outline-white/25"
-            displayValue={(option: OptionTypes) => option?.name}
-            onChange={(event) => setQuery(event.target.value)}
-            placeholder={placeholder}
-          />
-          <Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
-          <Image src="/downarrow.svg" alt="expand" height={10} width={10} />
-          </Combobox.Button>
-        <Transition
-          as={Fragment}
-          leave="transition ease-in duration-100"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-          afterLeave={() => setQuery('')}
-        >
-          <Combobox.Options className="absolute mt-1 rounded-lg border border-gray bg-white/5 [--anchor-gap:var(--spacing-1)] empty:invisible max-h-60 w-full overflow-auto bg-white shadow-custom-1">
-            {filteredOptions?.length === 0 && query !== '' ? (
-             <div
-             className="group flex items-center bg-white border-b border-lightgray gap-2 p-4 select-none cursor-pointer hover:bg-blue-200"
-           >
-             <span className="flex items-center text-sm font-medium text-gray-300 capitalize">
-               
-               No Results
-             </span>
-           </div>
-            ) : (
-              filteredOptions?.map((option) => (
-                <Combobox.Option
-                  key={option?.id}
-                  value={option}
-                  className="group flex items-center bg-white border border-b border-lightgray gap-2 p-4 select-none cursor-pointer hover:bg-blue-200"
+    return (
+        <Combobox value={value} onChange={onChange}>
+            <div className="relative">
+                <Combobox.Input
+                    className="border rounded-lg border-blue bg-black/5 font-normal py-2.5 px-4 text-sm/6 h-11 w-64 focus:outline-none data-[focus]:outline-2 data-[focus]:-outline-offset-2 data-[focus]:outline-white/25"
+                    displayValue={(option: OptionTypes) => option?.name}
+                    onChange={(event) => setQuery(event.target.value)}
+                    placeholder={placeholder}
+                />
+                <Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
+                    <Image src="/downarrow.svg" alt="expand" height={10} width={10} />
+                </Combobox.Button>
+                <Transition
+                    as={Fragment}
+                    leave="transition ease-in duration-100"
+                    leaveFrom="opacity-100"
+                    leaveTo="opacity-0"
+                    afterLeave={() => setQuery("")}
                 >
-                      <span
-                      className="text-sm font-normal text-darkblueblack capitalize"
-                      >
-                        {option?.name}
-                      </span>
-                      
-                </Combobox.Option>
-              ))
-            )}
-          </Combobox.Options>
-        </Transition>
-      </div>
-    </Combobox>
-  );
-}
+                    <Combobox.Options className="absolute mt-1 rounded-lg border border-gray bg-white/5 [--anchor-gap:var(--spacing-1)] empty:invisible max-h-60 w-full overflow-auto bg-white shadow-custom-1">
+                        {filteredOptions?.length === 0 && query !== "" ? (
+                            <div className="group flex items-center bg-white border-b border-lightgray gap-2 p-4 select-none cursor-pointer hover:bg-blue-200">
+                                <span className="flex items-center text-sm font-medium text-gray-300 capitalize">
+                                    No Results
+                                </span>
+                            </div>
+                        ) : (
+                            filteredOptions?.map((option) => (
+                                <Combobox.Option
+                                    key={option?.id}
+                                    value={option}
+                                    className="group flex items-center bg-white border border-b border-lightgray gap-2 p-4 select-none cursor-pointer hover:bg-blue-200"
+                                >
+                                    <span className="text-sm font-normal text-darkblueblack capitalize">
+                                        {option?.name}
+                                    </span>
+                                </Combobox.Option>
+                            ))
+                        )}
+                    </Combobox.Options>
+                </Transition>
+            </div>
+        </Combobox>
+    );
+};
 
 export default ComboboxDropdown;
diff --git a/src/components/SkillComboBox/index.tsx b/src/components/SkillComboBox/index.tsx
index 542f3d4..bacff29 100644
--- a/src/components/SkillComboBox/index.tsx
+++ b/src/components/SkillComboBox/index.tsx
@@ -1,80 +1,78 @@
 import Image from "next/image";
-import { Combobox, Transition } from '@headlessui/react';
-import React, { useState, Fragment } from 'react';
+import { Combobox, Transition } from "@headlessui/react";
+import React, { useState, Fragment } from "react";
 
 type OptionTypes = {
-  id: number;
-  skill: string;
+    id: number;
+    skill: string;
 };
 
 type ComboboxProps = {
     placeholder: string;
     options: OptionTypes[];
-    onChange?: (value: OptionTypes) => void; 
+    onChange?: (value: OptionTypes) => void;
     value?: OptionTypes;
     handleAddSkill?: () => void;
-}
+};
 
-const SkillCombobox = ({placeholder, options, onChange, value, handleAddSkill}: ComboboxProps) => {
-  const [query, setQuery] = useState<string>('');
+const SkillCombobox = ({ placeholder, options, onChange, value, handleAddSkill }: ComboboxProps) => {
+    const [query, setQuery] = useState<string>("");
 
-  const filteredSkills =
-    query === ''
-      ? options
-      : options.filter((option) => {
-          return option?.skill?.toLowerCase().includes(query.toLowerCase());
-        });
+    const filteredSkills =
+        query === ""
+            ? options
+            : options.filter((option) => {
+                  return option?.skill?.toLowerCase().includes(query.toLowerCase());
+              });
 
-  return (
-    <Combobox value={value} onChange={onChange}>
-      <div className="relative">
-          <Combobox.Input
-            className="border rounded-lg border-blue bg-black/5 font-normal py-2.5 px-4 text-sm/6 h-11 w-64 focus:outline-none data-[focus]:outline-2 data-[focus]:-outline-offset-2 data-[focus]:outline-white/25"
-            displayValue={(option: OptionTypes) => option?.skill}
-            onChange={(event) => setQuery(event.target.value)}
-            placeholder={placeholder}
-          />
-          <Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
-          <Image src="/downarrow.svg" alt="expand" height={10} width={10} />
-          </Combobox.Button>
-        <Transition
-          as={Fragment}
-          leave="transition ease-in duration-100"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-          afterLeave={() => setQuery('')}
-        >
-          <Combobox.Options className="absolute mt-1 rounded-lg border border-gray bg-white/5 [--anchor-gap:var(--spacing-1)] empty:invisible max-h-60 w-full overflow-auto bg-white shadow-custom-1">
-            {filteredSkills?.length === 0 && query !== '' ? (
-             <div
-             className="group flex items-center bg-white border-b border-lightgray gap-2 p-4 select-none cursor-pointer hover:bg-blue-200"
-           >
-             <span onClick={handleAddSkill} className="flex items-center gap-2 text-sm font-medium text-gray-300 capitalize">
-               <Image src="/addicon.svg" alt="add skill icon" height={16} width={16} />
-               Add New Skill
-             </span>
-           </div>
-            ) : (
-              filteredSkills?.map((option) => (
-                <Combobox.Option
-                  key={option?.id}
-                  value={option}
-                  className="group flex items-center bg-white border border-b border-lightgray gap-2 p-4 select-none cursor-pointer hover:bg-blue-200"
+    return (
+        <Combobox value={value} onChange={onChange}>
+            <div className="relative">
+                <Combobox.Input
+                    className="border rounded-lg border-blue bg-black/5 font-normal py-2.5 px-4 text-sm/6 h-11 w-64 focus:outline-none data-[focus]:outline-2 data-[focus]:-outline-offset-2 data-[focus]:outline-white/25"
+                    displayValue={(option: OptionTypes) => option?.skill}
+                    onChange={(event) => setQuery(event.target.value)}
+                    placeholder={placeholder}
+                />
+                <Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
+                    <Image src="/downarrow.svg" alt="expand" height={10} width={10} />
+                </Combobox.Button>
+                <Transition
+                    as={Fragment}
+                    leave="transition ease-in duration-100"
+                    leaveFrom="opacity-100"
+                    leaveTo="opacity-0"
+                    afterLeave={() => setQuery("")}
                 >
-                      <span
-                      className="text-sm font-normal text-darkblueblack capitalize"
-                      >
-                        {option?.skill}
-                      </span>
-                      
-                </Combobox.Option>
-              ))
-            )}
-          </Combobox.Options>
-        </Transition>
-      </div>
-    </Combobox>
-  );
-}
+                    <Combobox.Options className="absolute mt-1 rounded-lg border border-gray bg-white/5 [--anchor-gap:var(--spacing-1)] empty:invisible max-h-60 w-full overflow-auto bg-white shadow-custom-1">
+                        {filteredSkills?.length === 0 && query !== "" ? (
+                            <div className="group flex items-center bg-white border-b border-lightgray gap-2 p-4 select-none cursor-pointer hover:bg-blue-200">
+                                <span
+                                    onClick={handleAddSkill}
+                                    className="flex items-center gap-2 text-sm font-medium text-gray-300 capitalize"
+                                >
+                                    <Image src="/addicon.svg" alt="add skill icon" height={16} width={16} />
+                                    Add New Skill
+                                </span>
+                            </div>
+                        ) : (
+                            filteredSkills?.map((option) => (
+                                <Combobox.Option
+                                    key={option?.id}
+                                    value={option}
+                                    className="group flex items-center bg-white border border-b border-lightgray gap-2 p-4 select-none cursor-pointer hover:bg-blue-200"
+                                >
+                                    <span className="text-sm font-normal text-darkblueblack capitalize">
+                                        {option?.skill}
+                                    </span>
+                                </Combobox.Option>
+                            ))
+                        )}
+                    </Combobox.Options>
+                </Transition>
+            </div>
+        </Combobox>
+    );
+};
 
 export default SkillCombobox;
diff --git a/src/pages/endorsements/index.tsx b/src/pages/endorsements/index.tsx
index 953ed47..39baa4a 100644
--- a/src/pages/endorsements/index.tsx
+++ b/src/pages/endorsements/index.tsx
@@ -12,16 +12,15 @@ type OptionTypes = {
 };
 
 const Endorsements: FC = () => {
-
     const [selected, setSelected] = useState<OptionTypes | undefined>(undefined);
 
-    const handleSkillSelect = (value : OptionTypes) => {
-          setSelected(value);
-    }
+    const handleSkillSelect = (value: OptionTypes) => {
+        setSelected(value);
+    };
 
     const handleAddSkill = () => {
-          alert("Add skill clicked");
-    }
+        alert("Add skill clicked");
+    };
 
     return (
         <Layout title="Endorsements">
@@ -46,7 +45,13 @@ const Endorsements: FC = () => {
                     <h1 className="text-black font-semibold text-2xl">Prakash</h1>
                     <div className="flex items-center mt-8 mb-5">
                         <h3 className="text-sm mr-10 font-medium">Skill :</h3>
-                        <SkillCombobox placeholder="select skill" options={skillMockData} onChange={handleSkillSelect} value={selected} handleAddSkill={handleAddSkill} />
+                        <SkillCombobox
+                            placeholder="select skill"
+                            options={skillMockData}
+                            onChange={handleSkillSelect}
+                            value={selected}
+                            handleAddSkill={handleAddSkill}
+                        />
                     </div>
                     <div className="flex items-center space-x-2 mb-5">
                         <h3 className="mr-6">vote:</h3>
diff --git a/tailwind.config.js b/tailwind.config.js
index d678177..a5a8d0b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -13,7 +13,7 @@ module.exports = {
                 magicRed: "#F43F5E",
                 cadetGrey: "#94A3B8",
                 slatGrey: "#64748B",
-                darkblueblack: "#0F172A"
+                darkblueblack: "#0F172A",
             },
             backgroundColor: {
                 aliceBlue: "#EFF6FF",
@@ -57,17 +57,16 @@ module.exports = {
             blue: { 700: "#1D4ED8", 100: "#F8FAFC", 200: "#F1F5F9", 300: "#E2E8F0" },
         },
 
-        borderColor: { 
-            blue : "#3B82F6",
-            gray : "#E2E8F0",
-            lightgray : "#E5E7EB"
+        borderColor: {
+            blue: "#3B82F6",
+            gray: "#E2E8F0",
+            lightgray: "#E5E7EB",
         },
 
         boxShadow: {
-            'custom-1': '0px 4px 3px 0px #0000001A',
-            'custom-2': '0px 10px 8px 0px #0000000A',
-          },
-
+            "custom-1": "0px 4px 3px 0px #0000001A",
+            "custom-2": "0px 10px 8px 0px #0000000A",
+        },
     },
     plugins: [],
 };