diff --git a/src/components/elements/markdown/components/table.tsx b/src/components/elements/markdown/components/table.tsx
index c04adec7..fc44944b 100644
--- a/src/components/elements/markdown/components/table.tsx
+++ b/src/components/elements/markdown/components/table.tsx
@@ -10,9 +10,13 @@ import {MarkdownComponentProps} from '../types';
 const headers: Array<Array<React.ReactNode>> = [] as Array<Array<React.ReactNode>>;
 let idxCounter = 0;
 
-export const renderTable = ({children}: MarkdownComponentProps) => (
-  <table>{children}</table>
-);
+export const renderTable = ({children}: MarkdownComponentProps) => {
+  // Empty `headers` because a new table is to be rendered
+  // https://stackoverflow.com/q/1232040
+  headers.length = 0;
+
+  return <table>{children}</table>;
+};
 
 export const renderTableHeader = ({children}: MarkdownComponentProps) => {
   headers.push(children);
diff --git a/src/components/elements/markdown/main.test.tsx b/src/components/elements/markdown/main.test.tsx
index 8352950e..8bb481ec 100644
--- a/src/components/elements/markdown/main.test.tsx
+++ b/src/components/elements/markdown/main.test.tsx
@@ -33,6 +33,18 @@ describe('Markdown', () => {
       expect(screen.getByText('Data 2')).toBeInTheDocument();
       expect(screen.getAllByText('Header')).toHaveLength(2);
     });
+
+    it('renders multiple responsive tables correctly', async () => {
+      const text = `A | B\n:---: | :---:\nA1 | B1\n\nC | D\n:---: | :---:\nC1 | D1`;
+
+      renderReact(() => <Markdown>{text}</Markdown>);
+
+      // Should only have 2 elements available for each header: 1 for desktop, 1 for mobile (responsive header)
+      expect(screen.getAllByText('A')).toHaveLength(2);
+      expect(screen.getAllByText('B')).toHaveLength(2);
+      expect(screen.getAllByText('C')).toHaveLength(2);
+      expect(screen.getAllByText('D')).toHaveLength(2);
+    });
   });
 
   describe('Markdown - Syntax Nesting', () => {