diff --git a/package-lock.json b/package-lock.json
index 9aee2d5..fdd8c19 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@emotion/styled": "^11.11.0",
         "@mui/icons-material": "^5.14.16",
         "@mui/material": "^5.14.17",
+        "@mui/x-data-grid": "^6.18.1",
         "@mui/x-tree-view": "^6.17.0",
         "@tauri-apps/api": "^1.5.0",
         "react": "^18.2.0",
@@ -1190,6 +1191,31 @@
         }
       }
     },
+    "node_modules/@mui/x-data-grid": {
+      "version": "6.18.1",
+      "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-6.18.1.tgz",
+      "integrity": "sha512-ibsrWwzM2lRRWB1xs/eop63kaxlXH/qar1S1rQx3fycJiYvK6fsM72jsScBNRlRZQQwRVSGI0ZPBsOZ+/tg7Qw==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2",
+        "@mui/utils": "^5.14.16",
+        "clsx": "^2.0.0",
+        "prop-types": "^15.8.1",
+        "reselect": "^4.1.8"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@mui/material": "^5.4.1",
+        "@mui/system": "^5.4.1",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@mui/x-tree-view": {
       "version": "6.17.0",
       "resolved": "https://registry.npmjs.org/@mui/x-tree-view/-/x-tree-view-6.17.0.tgz",
@@ -2174,6 +2200,11 @@
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
       "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
     },
+    "node_modules/reselect": {
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz",
+      "integrity": "sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ=="
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -3092,6 +3123,18 @@
         "react-is": "^18.2.0"
       }
     },
+    "@mui/x-data-grid": {
+      "version": "6.18.1",
+      "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-6.18.1.tgz",
+      "integrity": "sha512-ibsrWwzM2lRRWB1xs/eop63kaxlXH/qar1S1rQx3fycJiYvK6fsM72jsScBNRlRZQQwRVSGI0ZPBsOZ+/tg7Qw==",
+      "requires": {
+        "@babel/runtime": "^7.23.2",
+        "@mui/utils": "^5.14.16",
+        "clsx": "^2.0.0",
+        "prop-types": "^15.8.1",
+        "reselect": "^4.1.8"
+      }
+    },
     "@mui/x-tree-view": {
       "version": "6.17.0",
       "resolved": "https://registry.npmjs.org/@mui/x-tree-view/-/x-tree-view-6.17.0.tgz",
@@ -3749,6 +3792,11 @@
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
       "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
     },
+    "reselect": {
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz",
+      "integrity": "sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ=="
+    },
     "resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
diff --git a/package.json b/package.json
index 18e435a..6e4831d 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.14.16",
     "@mui/material": "^5.14.17",
+    "@mui/x-data-grid": "^6.18.1",
     "@mui/x-tree-view": "^6.17.0",
     "@tauri-apps/api": "^1.5.0",
     "react": "^18.2.0",
diff --git a/src/components/TraceGrid.tsx b/src/components/TraceGrid.tsx
new file mode 100644
index 0000000..00a4222
--- /dev/null
+++ b/src/components/TraceGrid.tsx
@@ -0,0 +1,21 @@
+import { DataGrid, GridRowsProp, GridColDef } from '@mui/x-data-grid';
+
+const rows: GridRowsProp = [
+  { id: 1, col1: 'Hello', col2: 'World' },
+  { id: 2, col1: 'DataGridPro', col2: 'is Awesome' },
+  { id: 3, col1: 'MUI', col2: 'is Amazing' },
+];
+
+const columns: GridColDef[] = [
+  { field: 'col1', headerName: 'Column 1', width: 150 },
+  { field: 'col2', headerName: 'Column 2', width: 150 },
+];
+
+function TraceGrid() {
+  return (
+    <div style={{ height: 300, width: '100%' }}>
+      <DataGrid rows={rows} columns={columns} />
+    </div>
+  );
+}
+export default TraceGrid
diff --git a/src/pages/DebugPanel.tsx b/src/pages/DebugPanel.tsx
index f73226e..ca0429b 100644
--- a/src/pages/DebugPanel.tsx
+++ b/src/pages/DebugPanel.tsx
@@ -3,9 +3,16 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import { TreeView } from '@mui/x-tree-view/TreeView';
 import { TreeItem } from '@mui/x-tree-view/TreeItem';
+import TraceGrid from "../components/TraceGrid";
 
 function DebugPanel() {
-    return (<><FirstComponent/> <RandomNumber/> </>);
+    return (
+        <>
+            <FirstComponent/> 
+            <RandomNumber/> 
+            <TraceGrid />
+        </>
+    );
 };
 
 export default DebugPanel;