diff --git a/src/Components/Tab/index.jsx b/src/Components/Tab/index.jsx
new file mode 100644
index 000000000..97bb25c7f
--- /dev/null
+++ b/src/Components/Tab/index.jsx
@@ -0,0 +1,36 @@
+import { Box, useTheme } from "@mui/material";
+import { TabList } from "@mui/lab";
+import PropTypes from "prop-types";
+
+/**
+ * CustomTabList component
+ * @param {string} value - The currently selected tab's value.
+ * @param {function} onChange - Callback when a different tab is selected.
+ * @param {React.ReactNode} children - Tab components to render inside the TabList.
+ * @param {object} props - Additional props passed to the TabList component.
+ */
+
+const CustomTabList = ({ value, onChange, children, ...props }) => {
+	const theme = useTheme();
+
+	return (
+		<Box
+			sx={{
+				borderBottom: `1px solid ${theme.palette.primary.lowContrast}`,
+				"& .MuiTabs-root": { height: "fit-content", minHeight: "0" },
+			}}
+		>
+			<TabList value={value} onChange={onChange} {...props}>
+				{children}
+			</TabList>
+		</Box>
+	);
+};
+
+CustomTabList.propTypes = {
+	value: PropTypes.string,
+	onChange: PropTypes.func,
+	children: PropTypes.node,
+};
+
+export default CustomTabList;
diff --git a/src/Pages/Account/index.jsx b/src/Pages/Account/index.jsx
index 48b0984f5..c3e2be2f1 100644
--- a/src/Pages/Account/index.jsx
+++ b/src/Pages/Account/index.jsx
@@ -3,8 +3,8 @@ import PropTypes from "prop-types";
 import { useNavigate } from "react-router";
 import { useSelector } from "react-redux";
 import { Box, Tab, useTheme } from "@mui/material";
+import CustomTabList from "../../Components/Tab";
 import TabContext from "@mui/lab/TabContext";
-import TabList from "@mui/lab/TabList";
 import ProfilePanel from "../../Components/TabPanels/Account/ProfilePanel";
 import PasswordPanel from "../../Components/TabPanels/Account/PasswordPanel";
 import TeamPanel from "../../Components/TabPanels/Account/TeamPanel";
@@ -59,29 +59,18 @@ const Account = ({ open = "profile" }) => {
 			py={theme.spacing(12)}
 		>
 			<TabContext value={tab}>
-				<Box
-					sx={{
-						borderBottom: 1,
-						borderColor: theme.palette.primary.lowContrast,
-						"& .MuiTabs-root": { height: "fit-content", minHeight: "0" },
-					}}
-				>
-					<TabList
-						onChange={handleTabChange}
-						aria-label="account tabs"
-					>
-						{tabList.map((label, index) => (
-							<Tab
-								label={label}
-								key={index}
-								value={label.toLowerCase()}
-								onKeyDown={handleKeyDown}
-								onFocus={() => handleFocus(label.toLowerCase())}
-								tabIndex={index}
-							/>
-						))}
-					</TabList>
-				</Box>
+				<CustomTabList value={tab} onChange={handleTabChange} aria-label="account tabs">
+					{tabList.map((label, index) => (
+						<Tab
+							label={label}
+							key={index}
+							value={label.toLowerCase()}
+							onKeyDown={handleKeyDown}
+							onFocus={() => handleFocus(label.toLowerCase())}
+							tabIndex={index}
+						/>
+					))}
+				</CustomTabList>
 				<ProfilePanel />
 				{user.role.includes("superadmin") && <PasswordPanel />}
 				{!hideTeams && <TeamPanel />}
diff --git a/src/Pages/StatusPage/Create/Components/Tabs/index.jsx b/src/Pages/StatusPage/Create/Components/Tabs/index.jsx
index da2da9acf..5f5433bb6 100644
--- a/src/Pages/StatusPage/Create/Components/Tabs/index.jsx
+++ b/src/Pages/StatusPage/Create/Components/Tabs/index.jsx
@@ -1,11 +1,12 @@
 // Components
-import { TabContext, TabList } from "@mui/lab";
-import { Box, Tab, useTheme } from "@mui/material";
+import { TabContext } from "@mui/lab";
+import { Tab, useTheme } from "@mui/material";
 import Settings from "./Settings";
 import Content from "./Content";
 
 // Utils
 import PropTypes from "prop-types";
+import CustomTabList from "../../../../../Components/Tab";
 
 const Tabs = ({
 	isCreate,
@@ -26,28 +27,20 @@ const Tabs = ({
 	const theme = useTheme();
 	return (
 		<TabContext value={TAB_LIST[tab]}>
-			<Box
-				sx={{
-					borderBottom: `1px solid ${theme.palette.primary.lowContrast}`,
-					"& .MuiTabs-root": { height: "fit-content", minHeight: "0" },
+			<CustomTabList
+				onChange={(_, selected) => {
+					setTab(TAB_LIST.indexOf(selected));
 				}}
+				aria-label="status page tabs"
 			>
-				<TabList
-					onChange={(_, tab) => {
-						setTab(TAB_LIST.indexOf(tab));
-					}}
-				>
-					{TAB_LIST.map((tab, idx) => {
-						return (
-							<Tab
-								key={tab}
-								label={TAB_LIST[idx]}
-								value={TAB_LIST[idx]}
-							/>
-						);
-					})}
-				</TabList>
-			</Box>
+				{TAB_LIST.map((tabLabel, idx) => (
+					<Tab
+						key={tabLabel}
+						label={tabLabel}
+						value={tabLabel}
+					/>
+				))}
+			</CustomTabList>
 			{tab === 0 ? (
 				<Settings
 					tabValue={TAB_LIST[0]}
diff --git a/src/Utils/Theme/globalTheme.js b/src/Utils/Theme/globalTheme.js
index 306ed3466..5e3030d6c 100644
--- a/src/Utils/Theme/globalTheme.js
+++ b/src/Utils/Theme/globalTheme.js
@@ -368,7 +368,6 @@ const baseTheme = (palette) => ({
 			  root: ({ theme }) => ({
 				fontSize: theme.typography.fontSize - 1,
 				color: theme.palette.tertiary.contrastText,
-				backgroundColor: theme.palette.primary.main,
 				height: '34px',
 				minHeight: '34px',
 				borderRadius: 0,
@@ -376,21 +375,13 @@ const baseTheme = (palette) => ({
 				minWidth: "fit-content",
 				padding: `${theme.spacing(6)}px ${theme.spacing(4)}px`,
 				fontWeight: 400,
-				borderBottom: `${theme.shape.borderThick}px solid transparent`, 
-				borderRight: `${theme.shape.borderRadius / 2}px solid ${theme.palette.primary.lowContrast}`, 
-				"&:first-of-type": { borderTopLeftRadius: theme.shape.borderRadius * 4 },
-				"&:last-child": { borderTopRightRadius: theme.shape.borderRadius * 4, borderRight: 0 }, 
 				"&:focus-visible": {
 				  color: theme.palette.primary.contrastText,
 				  borderColor: theme.palette.tertiary.contrastText,
 				  borderRightColor: theme.palette.primary.lowContrast,
 				},
 				"&.Mui-selected": {
-				  backgroundColor: theme.palette.secondary.main,
 				  color: theme.palette.secondary.contrastText,
-				  borderColor: theme.palette.secondary.contrastText,
-				  borderRightColor: theme.palette.primary.lowContrast,
-				  borderRadius: 0,
 				},
 				"&:hover": {
 				  borderColor: theme.palette.primary.lowContrast,
@@ -442,11 +433,7 @@ const baseTheme = (palette) => ({
 			styleOverrides: {
 			  root: ({ theme }) => ({
 				display: 'inline-flex',
-				borderTop: '1px solid',
-				borderLeft: '1px solid',
-				borderRight: '1px solid',
-				borderColor: theme.palette.primary.lowContrast,
-				borderRadius: `${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0 0`,
+				borderRadius: 0,
 				"& .MuiTabs-indicator": {
 				  backgroundColor: theme.palette.tertiary.contrastText,
 				},