diff --git a/frontend/src/tests/sticky.test.tsx b/frontend/src/tests/sticky.test.tsx
new file mode 100644
index 0000000..5a2dbcf
--- /dev/null
+++ b/frontend/src/tests/sticky.test.tsx
@@ -0,0 +1,33 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import Sticky from '../components/sticky';
+import type { Sticky as StickyType } from '../types/types';
+
+const baseStickyNote: StickyType = {
+  id: 'note_001',
+  text: 'Login flow feels confusing',
+  x: 193,
+  y: 191,
+  author: 'user_5',
+  color: 'yellow',
+};
+
+describe('Sticky', () => {
+
+  it('should render the note text', () => {
+    render(<Sticky sticky={baseStickyNote} />);
+    expect(screen.getByText('Login flow feels confusing')).toBeInTheDocument();
+  });
+
+  it('should apply the correct background color for a known color', () => {
+    render(<Sticky sticky={{ ...baseStickyNote, color: 'blue' }} />);
+    const el = screen.getByText('Login flow feels confusing');
+    expect(el.style.backgroundColor).toBe('rgb(162, 210, 255)'); // #a2d2ff
+  });
+
+  it('should fall back to yellow for an unknown color', () => {
+    render(<Sticky sticky={{ ...baseStickyNote, color: 'magenta' }} />);
+    const el = screen.getByText('Login flow feels confusing');
+    expect(el.style.backgroundColor).toBe('rgb(253, 253, 150)'); // #fdfd96
+  });
+});
diff --git a/frontend/src/tests/test-wrapper.tsx b/frontend/src/tests/test-wrapper.tsx
new file mode 100644
index 0000000..86cf32c
--- /dev/null
+++ b/frontend/src/tests/test-wrapper.tsx
@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { MemoryRouter } from 'react-router-dom';
+
+export const createTestWrapper = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+  const Wrapper = ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter>{children}</MemoryRouter>
+    </QueryClientProvider>
+  );
+
+  return { Wrapper, queryClient };
+};