diff --git a/src/components/Card/Card.test.tsx b/src/components/Card/Card.test.tsx
index 842eeaa..fa3ff6f 100644
--- a/src/components/Card/Card.test.tsx
+++ b/src/components/Card/Card.test.tsx
@@ -11,7 +11,7 @@ describe('Card Component', () => {
   it('renders character name and basic info', () => {
     const { label } = CARD_TEXT;
 
-    render(<Card character={rickCharacter} />);
+    render(<Card character={rickCharacter} variant={'list'} />);
     expect(screen.getByText(rickCharacter.name)).toBeInTheDocument();
     expect(
       screen.getByText(`${label.species}: ${rickCharacter.species}`),
@@ -35,7 +35,7 @@ describe('Card Component', () => {
       status: 'unknown',
       gender: 'unknown',
     } as Character;
-    render(<Card character={unknownCharacter} />);
+    render(<Card character={unknownCharacter} variant={'list'} />);
     expect(
       screen.getByText(`${label.status}: ${fallback.status}`),
     ).toBeInTheDocument();
@@ -49,7 +49,7 @@ describe('Card Component', () => {
       ...rickCharacter,
       origin: { name: 'unknown', url: '' },
     };
-    render(<Card character={noOriginCharacter} />);
+    render(<Card character={noOriginCharacter} variant={'list'} />);
     expect(
       screen.getByText(
         `${CARD_TEXT.fallback.originFallback}: ${rickCharacter.location.name}`,
diff --git a/src/components/Fallback/FallBack.test.tsx b/src/components/Fallback/Fallback.test.tsx
similarity index 89%
rename from src/components/Fallback/FallBack.test.tsx
rename to src/components/Fallback/Fallback.test.tsx
index 870cc5b..ac623d1 100644
--- a/src/components/Fallback/FallBack.test.tsx
+++ b/src/components/Fallback/Fallback.test.tsx
@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { expect, it } from 'vitest';
-import { Fallback } from './FallBack';
+import { Fallback } from '@/components/Fallback';
 import { ERROR_UI_STRINGS } from '@/shared/constants/errors';
 
 it('renders fallback content', () => {
diff --git a/src/components/Fallback/FallBack.tsx b/src/components/Fallback/Fallback.tsx
similarity index 100%
rename from src/components/Fallback/FallBack.tsx
rename to src/components/Fallback/Fallback.tsx
diff --git a/src/components/Fallback/index.ts b/src/components/Fallback/index.ts
index 93704cf..aa98ed2 100644
--- a/src/components/Fallback/index.ts
+++ b/src/components/Fallback/index.ts
@@ -1 +1 @@
-export { Fallback } from './FallBack';
+export { Fallback } from './Fallback';
diff --git a/src/components/Footer.test.tsx b/src/components/Footer.test.tsx
new file mode 100644
index 0000000..5427c22
--- /dev/null
+++ b/src/components/Footer.test.tsx
@@ -0,0 +1,21 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { Footer } from './Footer';
+
+describe('Footer', () => {
+  it('renders both buttons', () => {
+    const queryClient = new QueryClient();
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <Footer />
+      </QueryClientProvider>,
+    );
+
+    expect(
+      screen.getByRole('button', { name: /refresh/i }),
+    ).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /break/i })).toBeInTheDocument();
+  });
+});
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 242fb1f..c9159cf 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,8 +1,10 @@
 import { ErrorBoundaryTesterButton } from '@/components/ErrorBoundaryTesterButton';
+import { RefreshButton } from '@/components/RefreshButton';
 
 export const Footer = () => {
   return (
-    <footer className="px-4 pb-4 flex justify-end">
+    <footer className="px-4 pb-4 flex justify-end gap-4">
+      <RefreshButton queryKey={['characters']} />
       <ErrorBoundaryTesterButton />
     </footer>
   );
diff --git a/src/components/RefreshButton.test.tsx b/src/components/RefreshButton.test.tsx
new file mode 100644
index 0000000..f4dc32f
--- /dev/null
+++ b/src/components/RefreshButton.test.tsx
@@ -0,0 +1,20 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { RefreshButton } from '@/components/RefreshButton';
+
+describe('RefreshButton', () => {
+  it('calls invalidateQueries with the correct queryKey', () => {
+    const queryClient = new QueryClient();
+    const spy = vi.spyOn(queryClient, 'invalidateQueries');
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <RefreshButton queryKey={['characters']} />
+      </QueryClientProvider>,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: /refresh/i }));
+    expect(spy).toHaveBeenCalledWith({ queryKey: ['characters'] });
+  });
+});
diff --git a/src/components/RefreshButton.tsx b/src/components/RefreshButton.tsx
new file mode 100644
index 0000000..8376e42
--- /dev/null
+++ b/src/components/RefreshButton.tsx
@@ -0,0 +1,21 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { Button } from '@/components/Button';
+import { UI_STRINGS } from '@/shared/constants/ui-strings';
+
+type RefreshButtonProps = {
+  queryKey: unknown[];
+};
+
+export const RefreshButton = ({ queryKey }: RefreshButtonProps) => {
+  const queryClient = useQueryClient();
+
+  const handleRefresh = () => {
+    queryClient.invalidateQueries({ queryKey });
+  };
+
+  return (
+    <Button onClick={handleRefresh} className="text-red-500 cursor-pointer">
+      {UI_STRINGS.refreshButton}
+    </Button>
+  );
+};
diff --git a/src/pages/AboutPage.test.tsx b/src/pages/AboutPage.test.tsx
new file mode 100644
index 0000000..8810ffa
--- /dev/null
+++ b/src/pages/AboutPage.test.tsx
@@ -0,0 +1,9 @@
+import { render, screen } from '@testing-library/react';
+import { expect, it } from 'vitest';
+import { AboutPage } from '@/pages/AboutPage';
+import { UI_STRINGS } from '@/shared/constants/ui-strings';
+
+it('renders about page content', () => {
+  render(<AboutPage />);
+  expect(screen.getByText(UI_STRINGS.contentAboutPage)).toBeInTheDocument();
+});
diff --git a/src/shared/constants/ui-strings.ts b/src/shared/constants/ui-strings.ts
index 59fc635..0aae098 100644
--- a/src/shared/constants/ui-strings.ts
+++ b/src/shared/constants/ui-strings.ts
@@ -3,6 +3,7 @@ export const UI_STRINGS = {
   searchButton: 'Scan the Multiverse',
   title: 'Rick and Morty',
   errorButton: 'Break the Universe',
+  refreshButton: 'Refresh the Universe',
   altLoading: 'Loading...',
   altLogo: 'Logo: Rick and Morty',
   home: 'Home',
diff --git a/src/shared/ui/LoadingSpinner.test.tsx b/src/shared/ui/LoadingSpinner.test.tsx
new file mode 100644
index 0000000..22cfbe4
--- /dev/null
+++ b/src/shared/ui/LoadingSpinner.test.tsx
@@ -0,0 +1,11 @@
+import { render, screen } from '@testing-library/react';
+import { expect, it } from 'vitest';
+import { UI_STRINGS } from '@/shared/constants/ui-strings';
+import { LoadingSpinner } from '@/shared/ui/LoadingSpinner';
+
+it('renders loading spinner with correct alt text', () => {
+  render(<LoadingSpinner />);
+  const img = screen.getByAltText(UI_STRINGS.altLoading);
+  expect(img).toBeInTheDocument();
+  expect(img).toHaveClass('animate-spin');
+});