diff --git a/src/features/Search/Search.tsx b/src/features/Search/Search.tsx
index 923d2fe..e1aa94f 100644
--- a/src/features/Search/Search.tsx
+++ b/src/features/Search/Search.tsx
@@ -61,7 +61,7 @@ export function Search({ tags }: SearchProps) {
       setProjects((prev) =>
         pageToFetch === 1 || reset
           ? (data.results ?? [])
-          : [...prev, ...(data.results ?? [])],
+          : [...prev, ...(data.results ?? [])]
       );
 
       setHasMore((data.results?.length ?? 0) >= 20);
@@ -99,7 +99,7 @@ export function Search({ tags }: SearchProps) {
     setSelectedTagIds((prev) =>
       prev.includes(tag.id)
         ? prev.filter((id) => id !== tag.id)
-        : [...prev, tag.id],
+        : [...prev, tag.id]
     );
   };
 
diff --git a/src/features/Search/TagList/TagList.test.tsx b/src/features/Search/TagList/TagList.test.tsx
new file mode 100644
index 0000000..1c00788
--- /dev/null
+++ b/src/features/Search/TagList/TagList.test.tsx
@@ -0,0 +1,57 @@
+import "@testing-library/jest-dom";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { TagList } from "./TagList";
+
+export interface Tag {
+  id: string;
+  label: string;
+  lucideIcon: string;
+  borderColor: string;
+  backgroundColor: string;
+}
+
+const mockTagLabel = "Atom";
+const secondTagLabel = "Beta";
+const mockTag = {
+  id: "atom",
+  label: mockTagLabel,
+  lucideIcon: "",
+  borderColor: "red",
+  backgroundColor: "white",
+};
+const secondTag = {
+  id: "beta",
+  label: secondTagLabel,
+  lucideIcon: "",
+  borderColor: "red",
+  backgroundColor: "white",
+};
+
+describe("TagList", () => {
+  it("hides tags", () => {
+    render(
+      <TagList tags={[mockTag]} onTagClick={() => {}} selectedTagIds={[]} />,
+    );
+    expect(screen.getByText(mockTagLabel)).toBeInTheDocument();
+  });
+  it("test click event", () => {
+    const mockClick = jest.fn();
+    render(
+      <TagList tags={[mockTag]} onTagClick={mockClick} selectedTagIds={[]} />,
+    );
+    const tag = screen.getByText("Atom");
+    fireEvent.click(tag);
+    expect(mockClick).toHaveBeenCalledWith(mockTag);
+    expect(mockClick).toHaveBeenCalledTimes(1);
+  });
+  it("will hide 13th element after clicking show less", () => {
+    const mockClick = jest.fn();
+    const tags = Array(13).fill(mockTag);
+    tags.push(secondTag);
+    render(<TagList tags={tags} onTagClick={mockClick} selectedTagIds={[]} />);
+    const showLessButton = screen.getByText("Show Less");
+    fireEvent.click(showLessButton);
+    const tag = screen.queryByText(secondTagLabel);
+    expect(tag).toBeNull();
+  });
+});
diff --git a/src/features/Search/TagList/TagList.tsx b/src/features/Search/TagList/TagList.tsx
index 04094c3..3c8ca81 100644
--- a/src/features/Search/TagList/TagList.tsx
+++ b/src/features/Search/TagList/TagList.tsx
@@ -69,9 +69,9 @@ export function TagList({ tags, selectedTagIds, onTagClick }: TagListProps) {
   return (
     <div className={styles.tagContainer}>
       <div className={styles.tagList}>
-        {visibleTags.map((tag) => (
+        {visibleTags.map((tag, i) => (
           <TagBadge
-            key={tag.id}
+            key={`${tag.id}-${i}`}
             label={tag.label}
             borderColor={tag.borderColor}
             backgroundColor={tag.backgroundColor}