diff --git a/frontend_reactjs/src/pages/Roles.tsx b/frontend_reactjs/src/pages/Roles.tsx
index 3c38e04..a7ff8e4 100644
--- a/frontend_reactjs/src/pages/Roles.tsx
+++ b/frontend_reactjs/src/pages/Roles.tsx
@@ -10,19 +10,14 @@ import { GridColDef } from '@mui/x-data-grid'
 interface IRoleCard {
   id: number
   name: string
+  description: string
 }
+
 interface Props {
   showModal: boolean;
 }
-function Roles() {
-  const [roles, setRoles] = useState<any>(null)
-
-  const getRoles = async () => {
-    await RoleService.getRoles().then(response => {
-      setRoles(response.data)
-    })
-  }
 
+function Roles() {
   const [showModal, setShowModal] = useState<Props>({ showModal: false });
   const cards = useDataFetching<IRoleCard[]>(`${import.meta.env.VITE_API_AUTH_URL}/auth/roles/`, [])
 
@@ -33,13 +28,18 @@ function Roles() {
   ];
 
   return (
-    <Box>
-      <Button onClick={() => getRoles()}>
-        Get roles
+    <Box sx={{
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+      gap: '16px'
+    }}>
+      <Button onClick={() => console.log("TODO: Add")}>
+        Добавить роль
       </Button>
 
-      {roles &&
-        <DataTable rows={roles} columns={columns} />
+      {cards &&
+        <DataTable rows={cards} columns={columns} />
       }
     </Box>
   )