diff --git a/.eslintrc.js b/.eslintrc.js
index 04e5896f..58af0cb3 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -4,6 +4,14 @@ module.exports = {
     project: ['./tsconfig.json'],
   },
   root: true,
+  rules: {
+    'import/no-extraneous-dependencies': [
+      'warn',
+      {
+        devDependencies: ['**/setupTests.ts'],
+      },
+    ],
+  },
   settings: {
     next: {
       rootDir: ['apps/*/'],
diff --git a/package-lock.json b/package-lock.json
index e31dcfb4..3692cf77 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28001,6 +28001,12 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true
     },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==",
+      "dev": true
+    },
     "node_modules/resolve": {
       "version": "1.22.6",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.6.tgz",
@@ -34394,6 +34400,7 @@
       "devDependencies": {
         "@testing-library/jest-dom": "^6.1.3",
         "jest": "^29.7.0",
+        "resize-observer-polyfill": "^1.5.1",
         "typescript": "^5.2.2"
       }
     },
diff --git a/packages/react-front-kit/src/Components/ResponsiveTabs/ResponsiveTabs.mock.tsx b/packages/react-front-kit/src/Components/ResponsiveTabs/ResponsiveTabs.mock.tsx
index d32a92c4..d44f5d5f 100644
--- a/packages/react-front-kit/src/Components/ResponsiveTabs/ResponsiveTabs.mock.tsx
+++ b/packages/react-front-kit/src/Components/ResponsiveTabs/ResponsiveTabs.mock.tsx
@@ -31,10 +31,10 @@ export const contents = (
 );
 
 export const tabs = [
-  <Tabs.Tab key={1} value="1">
+  <Tabs.Tab key={1} id="tab-1" value="1">
     First
   </Tabs.Tab>,
-  <Tabs.Tab key={2} data-testid="test-tab" value="2">
+  <Tabs.Tab key={2} data-testid="test-tab" id="tab-1" value="2">
     Second
   </Tabs.Tab>,
   <Tabs.Tab key={3} value="3">
diff --git a/packages/react-front-kit/src/Components/ResponsiveTabs/ResponsiveTabs.test.tsx b/packages/react-front-kit/src/Components/ResponsiveTabs/ResponsiveTabs.test.tsx
index bab4efe1..2978d3bd 100644
--- a/packages/react-front-kit/src/Components/ResponsiveTabs/ResponsiveTabs.test.tsx
+++ b/packages/react-front-kit/src/Components/ResponsiveTabs/ResponsiveTabs.test.tsx
@@ -6,7 +6,9 @@ import { contents, tabs } from './ResponsiveTabs.mock';
 describe('ResponsiveTabs', () => {
   it('matches snapshot', () => {
     const { container } = renderWithProviders(
-      <ResponsiveTabs tabs={tabs}>{contents}</ResponsiveTabs>,
+      <ResponsiveTabs id="responsive-tabs" tabs={tabs}>
+        {contents}
+      </ResponsiveTabs>,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/react-front-kit/src/Components/ResponsiveTabs/ResponsiveTabs.tsx b/packages/react-front-kit/src/Components/ResponsiveTabs/ResponsiveTabs.tsx
index fbc5c9fe..043db619 100644
--- a/packages/react-front-kit/src/Components/ResponsiveTabs/ResponsiveTabs.tsx
+++ b/packages/react-front-kit/src/Components/ResponsiveTabs/ResponsiveTabs.tsx
@@ -39,7 +39,10 @@ export interface IResponsiveTabs extends TabsProps {
 export function ResponsiveTabs(props: IResponsiveTabs): ReactNode {
   const { children, tabs, ...tabsProps } = props;
   const { ref, width } = useElementSize<HTMLDivElement>();
-  const overflowButtonId = useId();
+  const generatedId = useId();
+  const overflowButtonId = tabsProps.id
+    ? `${tabsProps.id}-overflow-button`
+    : generatedId;
   const [overflowIndex, setOverflowIndex] = useState(tabs.length);
   const { classes } = useStyles();
 
diff --git a/packages/react-front-kit/src/Components/ResponsiveTabs/__snapshots__/ResponsiveTabs.test.tsx.snap b/packages/react-front-kit/src/Components/ResponsiveTabs/__snapshots__/ResponsiveTabs.test.tsx.snap
index 8d494a5e..3e0702cb 100644
--- a/packages/react-front-kit/src/Components/ResponsiveTabs/__snapshots__/ResponsiveTabs.test.tsx.snap
+++ b/packages/react-front-kit/src/Components/ResponsiveTabs/__snapshots__/ResponsiveTabs.test.tsx.snap
@@ -3,20 +3,109 @@
 exports[`ResponsiveTabs matches snapshot 1`] = `
 <div>
   <div
-    class="mantine-Tabs-root mantine-ro6hk9"
-    style="overflow: hidden;"
+    class="mantine-Tabs-root mantine-1w1w6vj"
+    id="responsive-tabs"
   >
+    <div
+      class="mantine-cdxve1"
+    >
+      <button
+        aria-selected="false"
+        class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1z10kp0"
+        id="responsive-tabs-tab-1"
+        role="tab"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="mantine-480qv8 mantine-Tabs-tabLabel"
+        >
+          First
+        </span>
+      </button>
+      <button
+        aria-selected="false"
+        class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1z10kp0"
+        data-testid="test-tab"
+        id="responsive-tabs-tab-2"
+        role="tab"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="mantine-480qv8 mantine-Tabs-tabLabel"
+        >
+          Second
+        </span>
+      </button>
+      <button
+        aria-selected="false"
+        class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1z10kp0"
+        id="responsive-tabs-tab-3"
+        role="tab"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="mantine-480qv8 mantine-Tabs-tabLabel"
+        >
+          Third
+        </span>
+      </button>
+      <button
+        aria-selected="false"
+        class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1z10kp0"
+        id="responsive-tabs-tab-4"
+        role="tab"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="mantine-480qv8 mantine-Tabs-tabLabel"
+        >
+          Fourth
+        </span>
+      </button>
+      <button
+        aria-selected="false"
+        class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1z10kp0"
+        id="responsive-tabs-tab-5"
+        role="tab"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="mantine-480qv8 mantine-Tabs-tabLabel"
+        >
+          Overflow 1
+        </span>
+      </button>
+      <button
+        aria-selected="false"
+        class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1z10kp0"
+        id="responsive-tabs-tab-6"
+        role="tab"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="mantine-480qv8 mantine-Tabs-tabLabel"
+        >
+          Overflow 2
+        </span>
+      </button>
+    </div>
     <div
       aria-orientation="horizontal"
       class="mantine-Tabs-tabsList mantine-i7gwaj"
       role="tablist"
     >
       <button
-        aria-controls="mantine-xj4wuvfjs-dropdown"
+        aria-controls="responsive-tabs-overflow-button-dropdown"
         aria-expanded="false"
         aria-haspopup="menu"
         class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-3zan65"
-        id="mantine-xj4wuvfjs-target"
+        id="responsive-tabs-overflow-button-target"
         type="button"
       >
         <svg
@@ -33,9 +122,9 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
       </button>
     </div>
     <div
-      aria-labelledby="mantine-ocee5lhcn-tab-1"
+      aria-labelledby="responsive-tabs-tab-1"
       class="mantine-Tabs-panel mantine-18ozoug"
-      id="mantine-ocee5lhcn-panel-1"
+      id="responsive-tabs-panel-1"
       role="tabpanel"
     >
       <div
@@ -45,9 +134,9 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
       </div>
     </div>
     <div
-      aria-labelledby="mantine-ocee5lhcn-tab-2"
+      aria-labelledby="responsive-tabs-tab-2"
       class="mantine-Tabs-panel mantine-18ozoug"
-      id="mantine-ocee5lhcn-panel-2"
+      id="responsive-tabs-panel-2"
       role="tabpanel"
     >
       <div
@@ -57,9 +146,9 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
       </div>
     </div>
     <div
-      aria-labelledby="mantine-ocee5lhcn-tab-3"
+      aria-labelledby="responsive-tabs-tab-3"
       class="mantine-Tabs-panel mantine-18ozoug"
-      id="mantine-ocee5lhcn-panel-3"
+      id="responsive-tabs-panel-3"
       role="tabpanel"
     >
       <div
@@ -69,9 +158,9 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
       </div>
     </div>
     <div
-      aria-labelledby="mantine-ocee5lhcn-tab-4"
+      aria-labelledby="responsive-tabs-tab-4"
       class="mantine-Tabs-panel mantine-18ozoug"
-      id="mantine-ocee5lhcn-panel-4"
+      id="responsive-tabs-panel-4"
       role="tabpanel"
     >
       <div
@@ -81,9 +170,9 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
       </div>
     </div>
     <div
-      aria-labelledby="mantine-ocee5lhcn-tab-5"
+      aria-labelledby="responsive-tabs-tab-5"
       class="mantine-Tabs-panel mantine-18ozoug"
-      id="mantine-ocee5lhcn-panel-5"
+      id="responsive-tabs-panel-5"
       role="tabpanel"
     >
       <div
@@ -93,9 +182,9 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
       </div>
     </div>
     <div
-      aria-labelledby="mantine-ocee5lhcn-tab-6"
+      aria-labelledby="responsive-tabs-tab-6"
       class="mantine-Tabs-panel mantine-18ozoug"
-      id="mantine-ocee5lhcn-panel-6"
+      id="responsive-tabs-panel-6"
       role="tabpanel"
     >
       <div
diff --git a/packages/test/package.json b/packages/test/package.json
index de3a2b52..a6d61d75 100644
--- a/packages/test/package.json
+++ b/packages/test/package.json
@@ -15,6 +15,7 @@
   "devDependencies": {
     "@testing-library/jest-dom": "^6.1.3",
     "jest": "^29.7.0",
+    "resize-observer-polyfill": "^1.5.1",
     "typescript": "^5.2.2"
   }
 }
diff --git a/packages/test/setupTests.ts b/packages/test/setupTests.ts
index 8f2609b7..40db815a 100644
--- a/packages/test/setupTests.ts
+++ b/packages/test/setupTests.ts
@@ -3,3 +3,6 @@
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom';
+import ResizeObserver from 'resize-observer-polyfill';
+
+global.ResizeObserver = ResizeObserver;