diff --git a/src/sections/dashboard/components/sidebar/sidebar.test.tsx b/src/sections/dashboard/components/sidebar/sidebar.test.tsx
new file mode 100644
index 0000000..338ae9f
--- /dev/null
+++ b/src/sections/dashboard/components/sidebar/sidebar.test.tsx
@@ -0,0 +1,36 @@
+import { render, fireEvent, screen } from '@testing-library/react';
+import Sidebar from '@/sections/dashboard/components/sidebar/sidebar';
+import React from 'react';
+
+describe('Sidebar', () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('should render Sidebar without throwing an error', () => {
+    const sidebar = render(<Sidebar />);
+    expect(sidebar).toBeTruthy();
+  });
+
+  it('given sidebar is closed when the toggle button is clicked then should toggle to open ', () => {
+    const mockHandleToggle = jest.fn();
+    jest.spyOn(React, 'useState').mockReturnValue([false, mockHandleToggle]);
+
+    render(<Sidebar />);
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    expect(mockHandleToggle).toHaveBeenCalledWith(true);
+  });
+
+  it('should apply transition to nav when the toggle button is clicked', () => {
+    render(<Sidebar />);
+    const button = screen.getByRole('button');
+
+    fireEvent.click(button);
+
+    const nav = screen.getByTestId('sidebar-nav');
+    expect(nav.className).toContain('duration-500');
+  });
+});
diff --git a/src/sections/dashboard/components/sidebar/sidebar.tsx b/src/sections/dashboard/components/sidebar/sidebar.tsx
index 1befe36..19857af 100644
--- a/src/sections/dashboard/components/sidebar/sidebar.tsx
+++ b/src/sections/dashboard/components/sidebar/sidebar.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState } from 'react';
+import React from 'react';
 
 import { cn } from '@/lib/utils';
 import { Separator } from '@/components/ui/separator';
@@ -33,7 +33,7 @@ interface SidebarProps {
 
 export default function Sidebar({ className }: Readonly<SidebarProps>) {
   const { isOpen, toggle } = useSidebar();
-  const [switched, setSwitched] = useState(false);
+  const [switched, setSwitched] = React.useState(false);
 
   const handleToggle = () => {
     setSwitched(true);
@@ -48,6 +48,7 @@ export default function Sidebar({ className }: Readonly<SidebarProps>) {
         isOpen ? 'w-72' : 'w-[78px]',
         className
       )}
+      data-testid='sidebar-nav'
     >
       <div className='space-y-4 py-4'>
         <div className='px-3 py-2'>