diff --git a/src/components/layout/Header/Header.test.tsx b/src/components/layout/Header/Header.test.tsx
new file mode 100644
index 0000000..2465a1a
--- /dev/null
+++ b/src/components/layout/Header/Header.test.tsx
@@ -0,0 +1,56 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import Header from "./Header";
+
+describe("Header component", () => {
+ const mockLogout = vi.fn();
+
+ const defaultProps = {
+ user: { name: "Karuna" },
+ onLogout: mockLogout,
+ };
+
+ it("renders the navbar container", () => {
+ render();
+ expect(screen.getByRole("banner")).toBeInTheDocument();
+ });
+
+ it("renders the app title", () => {
+ render();
+ expect(screen.getByText("daisyUI")).toBeInTheDocument();
+ });
+
+ it("renders the hamburger menu link", () => {
+ render();
+ const menuLink = screen.getAllByRole("link")[0];
+ expect(menuLink).toHaveAttribute("href", "/");
+ });
+
+ it("renders profile button", () => {
+ render();
+ expect(screen.getByRole("button")).toBeInTheDocument();
+ });
+
+ it("shows the first letter of the user's name in profile image", () => {
+ render();
+ const profileImg = screen.getByAltText("Karuna profile");
+ expect(profileImg).toHaveAttribute(
+ "src",
+ expect.stringContaining("K")
+ );
+ });
+
+ it("uses fallback text when user is undefined", () => {
+ render();
+ expect(screen.getByAltText("User profile")).toBeInTheDocument();
+ });
+
+ it("calls onLogout when profile button is clicked", () => {
+ render();
+ const profileButton = screen.getByRole("button");
+
+ fireEvent.click(profileButton);
+
+ expect(mockLogout).toHaveBeenCalledOnce();
+ });
+});