diff --git a/src/pages/RoleList/index.tsx b/src/pages/RoleList/index.tsx
index 1d1ec48..c85a68c 100644
--- a/src/pages/RoleList/index.tsx
+++ b/src/pages/RoleList/index.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Box, Button, Typography, TextField } from "@mui/material";
+import { Box, Button, Typography, TextField, Chip } from "@mui/material";
 import AddEditRoleModal from "../../components/AddEditRoleModal";
 import PermissionsTable from "../../pages/PermissionTable";
 import { useForm } from "react-hook-form";
@@ -29,9 +29,9 @@ export default function RoleList() {
 	}, [dispatch]);
 
 	const handleClickOpen = () => {
-		navigate("/panel/permissions");// Navigate to the correct route
+		navigate("/panel/permissions"); // Navigate to the correct route
 	};
-	
+
 	const handleCloseModal = () => {
 		setModalOpen(false);
 		setRowData(null);
@@ -62,43 +62,26 @@ export default function RoleList() {
 		{ id: "action", label: "Action", align: "center" },
 	];
 
-	const categoryRows = roles?.length
-		? roles?.map(function (
-			role: {
-				id: string;
-				name: string;
-				status: string;
-			},
-			index: number
-		) {
-			return {
-				id: role?.id,
-				srno: index + 1,
-				name: role?.name,
-				status: role?.status,
-			};
-		})
-		: [];
+	const categoryRows = roles?.map((role: Role, index: number) => ({
+		id: role.id,
+		srno: index + 1,
+		name: role.name,
+		status: (
+		  <Chip
+			label={role.status === 1 ? "Active" : "Inactive"} // ✅ Convert number to text
+			color={role.status === 1 ? "primary" : "default"}
+			variant="outlined"
+			sx={{ fontWeight: 600, width: "80px", textAlign: "center", borderRadius: "4px" }}
+		  />
+		),
+	  }));
+	  
+
 
 	console.log("Category Rows:", categoryRows);
 
 	return (
 		<>
-			{/* <Box
-				sx={{
-					width: "100%",
-					backgroundColor: "#E3F2FD", // Light sky blue color
-					p: 2,
-					display: "flex",
-					justifyContent: "space-between",
-					alignItems: "center",
-					mb: 2,
-			}}
-		>
-			<Typography variant="h6" fontWeight={600}>Roles & Permission</Typography>
-			<Typography variant="body1">Dashboard</Typography>
-		</Box> */}
-
 			<Box
 				sx={{
 					width: "100%",
@@ -106,24 +89,20 @@ export default function RoleList() {
 					justifyContent: "space-between",
 					alignItems: "center",
 					mb: 2,
-			}}
-		>
-			<TextField
-				variant="outlined"
-				size="small"
-				placeholder="Search..."
-				value={searchTerm}
-				onChange={(e) => setSearchTerm(e.target.value)}
-				sx={{ width: "30%" }}
-			/>
-			<Button
-				variant="contained"
-				size="small"
-				onClick={handleClickOpen}
+				}}
 			>
-				Add Role
-			</Button>
-		</Box>
+				<TextField
+					variant="outlined"
+					size="small"
+					placeholder="Search..."
+					value={searchTerm}
+					onChange={(e) => setSearchTerm(e.target.value)}
+					sx={{ width: "30%" }}
+				/>
+				<Button variant="contained" size="small" onClick={handleClickOpen}>
+					Add Role
+				</Button>
+			</Box>
 
 			{showPermissions ? (
 				<PermissionsTable />