diff --git a/src/components/table/Table.tsx b/src/components/table/Table.tsx
index 23b29c8..c568fc2 100644
--- a/src/components/table/Table.tsx
+++ b/src/components/table/Table.tsx
@@ -3,7 +3,7 @@ import { AgGridReact } from 'ag-grid-react';
 import 'ag-grid-community/styles/ag-grid.css'; // Core CSS
 import 'ag-grid-community/styles/ag-theme-quartz.css'; // Theme
 import './table.css';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { ClientCellRenderer } from './cellRenderers/ClientCellRenderer';
 import { CompanyCellRenderer } from './cellRenderers/CompanyCellRenderer';
 import { HistoryCellRenderer } from './cellRenderers/HistoryCellRenderer';
@@ -57,7 +57,7 @@ export const TableCore = () => {
       return stringA.localeCompare(stringB);
     }
   };
-
+  const tableRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
     setRowData(appState?.clientProfileUpdates);
 
@@ -177,6 +177,9 @@ export const TableCore = () => {
                 key: el,
               };
             },
+            cellRendererParams: {
+              tableRef: tableRef,
+            },
           },
         ];
       });
@@ -194,6 +197,7 @@ export const TableCore = () => {
   return (
     <Box
       className="ag-theme-quartz"
+      ref={tableRef}
       sx={{
         height:
           arraysHaveSameElements(appState?.mutableSettings, appState?.settings) &&
diff --git a/src/components/table/cellRenderers/HistoryCellRenderer.tsx b/src/components/table/cellRenderers/HistoryCellRenderer.tsx
index c1b2fad..9003575 100644
--- a/src/components/table/cellRenderers/HistoryCellRenderer.tsx
+++ b/src/components/table/cellRenderers/HistoryCellRenderer.tsx
@@ -4,9 +4,14 @@ import { FiberManualRecord } from '@mui/icons-material';
 import { Box, CircularProgress, Popper, Stack, Typography } from '@mui/material';
 import React, { useState } from 'react';
 
-export const HistoryCellRenderer = ({ value }: { value: { row: any; key: string } }) => {
+export const HistoryCellRenderer = ({
+  value,
+  tableRef,
+}: {
+  value: { row: any; key: string };
+  tableRef: React.RefObject<HTMLDivElement>;
+}) => {
   const appState = useAppState();
-
   const [loading, setLoading] = useState(false);
 
   const [updateHistory, setUpdateHistory] = useState<any>([]);
@@ -132,10 +137,34 @@ export const HistoryCellRenderer = ({ value }: { value: { row: any; key: string
         ) : (
           <></>
         )}
-        <Popper id={id} open={open} anchorEl={anchorEl}>
+        <Popper
+          id={id}
+          open={open}
+          anchorEl={anchorEl}
+          modifiers={[
+            {
+              name: 'preventOverflow',
+              options: {
+                boundary: tableRef.current,
+              },
+            },
+          ]}
+        >
           {loading ? <CircularProgress size={20} color="inherit" /> : <HistoryList updateHistory={updateHistory} />}
         </Popper>
-        <Popper id={multiSelectAnchorId} open={multiSelectAnchorOpen} anchorEl={multiSelectAnchor}>
+        <Popper
+          id={multiSelectAnchorId}
+          open={multiSelectAnchorOpen}
+          anchorEl={multiSelectAnchor}
+          modifiers={[
+            {
+              name: 'preventOverflow',
+              options: {
+                boundary: tableRef.current,
+              },
+            },
+          ]}
+        >
           <Stack
             direction="row"
             sx={(theme) => ({