diff --git a/src/Components/NotificationIntegrationModal/NotificationIntegrationModal.jsx b/src/Components/NotificationIntegrationModal/NotificationIntegrationModal.jsx
index bb7478b34..b34cd5e55 100644
--- a/src/Components/NotificationIntegrationModal/NotificationIntegrationModal.jsx
+++ b/src/Components/NotificationIntegrationModal/NotificationIntegrationModal.jsx
@@ -12,27 +12,7 @@ import {
 import { useTheme } from "@emotion/react";
 import TextInput from "../Inputs/TextInput";
 import Checkbox from "../Inputs/Checkbox";
-
-// Tab Panel component
-function TabPanel({ children, value, index, ...other }) {
-  const theme = useTheme(); 
-  
-  return (
-    <div
-      role="tabpanel"
-      hidden={value !== index}
-      id={`notification-tabpanel-${index}`}
-      aria-labelledby={`notification-tab-${index}`}
-      {...other}
-    >
-      {value === index && (
-        <Box sx={{ pt: theme.spacing(3) }}>
-          {children}
-        </Box>
-      )}
-    </div>
-  );
-}
+import TabPanel from "./TabPanel";
 
 const NotificationIntegrationModal = ({ 
   open, 
diff --git a/src/Components/NotificationIntegrationModal/TabPanel.jsx b/src/Components/NotificationIntegrationModal/TabPanel.jsx
new file mode 100644
index 000000000..6299b56e9
--- /dev/null
+++ b/src/Components/NotificationIntegrationModal/TabPanel.jsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { Box } from "@mui/material";
+import { useTheme } from "@emotion/react";
+
+function TabPanel({ children, value, index, ...other }) {
+  const theme = useTheme(); 
+  
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`notification-tabpanel-${index}`}
+      aria-labelledby={`notification-tab-${index}`}
+      {...other}
+    >
+      {value === index && (
+        <Box sx={{ pt: theme.spacing(3) }}>
+          {children}
+        </Box>
+      )}
+    </div>
+  );
+}
+
+export default TabPanel;
\ No newline at end of file