diff --git a/frontend_reactjs/src/App.tsx b/frontend_reactjs/src/App.tsx
index 88522c4..62cec49 100644
--- a/frontend_reactjs/src/App.tsx
+++ b/frontend_reactjs/src/App.tsx
@@ -10,7 +10,7 @@ import ApiTest from "./pages/ApiTest"
 import SignUp from "./pages/auth/SignUp"
 import { initAuth, useAuthStore } from "./store/auth"
 import { useEffect, useState } from "react"
-import { CircularProgress } from "@mui/material"
+import { Box, CircularProgress, Container } from "@mui/material"
 
 function App() {
   const auth = useAuthStore()
@@ -33,7 +33,10 @@ function App() {
     )
   } else {
     return (
-      <>
+      <Box sx={{
+        width: "100%",
+        height: "100vh"
+      }}>
         <Router>
           <Routes>
             <Route element={<MainLayout />}>
@@ -50,7 +53,7 @@ function App() {
             </Route>
           </Routes>
         </Router>
-      </>
+      </Box>
     )
   }
 }
diff --git a/frontend_reactjs/src/components/AccountMenu.tsx b/frontend_reactjs/src/components/AccountMenu.tsx
index ec24232..fe7cda8 100644
--- a/frontend_reactjs/src/components/AccountMenu.tsx
+++ b/frontend_reactjs/src/components/AccountMenu.tsx
@@ -6,9 +6,7 @@ import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import Divider from '@mui/material/Divider';
 import IconButton from '@mui/material/IconButton';
-import Typography from '@mui/material/Typography';
 import Tooltip from '@mui/material/Tooltip';
-import PersonAdd from '@mui/icons-material/PersonAdd';
 import Settings from '@mui/icons-material/Settings';
 import Logout from '@mui/icons-material/Logout';
 
diff --git a/frontend_reactjs/src/components/DataTable.tsx b/frontend_reactjs/src/components/DataTable.tsx
index d0611e2..b2d00ee 100644
--- a/frontend_reactjs/src/components/DataTable.tsx
+++ b/frontend_reactjs/src/components/DataTable.tsx
@@ -9,7 +9,8 @@ export default function DataTable(props: Props) {
 
     return (
         <DataGrid
-            style={{ width: "100%", height: "100%" }}
+            autoHeight
+            style={{ width: "100%" }}
             rows={props.rows}
             columns={props.columns}
             initialState={{
@@ -19,9 +20,16 @@ export default function DataTable(props: Props) {
             }}
             pageSizeOptions={[10, 20, 50, 100]}
             checkboxSelection
-
             disableRowSelectionOnClick
 
+            processRowUpdate={(updatedRow, originalRow) => {
+                console.log(updatedRow)
+                return updatedRow
+            }}
+
+            onProcessRowUpdateError={(error)=>{
+                console.log(error)
+            }}
         />
     );
 }
\ No newline at end of file
diff --git a/frontend_reactjs/src/components/modals/CreateRoleModal.tsx b/frontend_reactjs/src/components/modals/CreateRoleModal.tsx
index b9181a6..732bfa8 100644
--- a/frontend_reactjs/src/components/modals/CreateRoleModal.tsx
+++ b/frontend_reactjs/src/components/modals/CreateRoleModal.tsx
@@ -1,11 +1,97 @@
-import React from 'react'
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { IRoleCreate } from '../../interfaces/role';
+import { AxiosResponse } from 'axios';
+import { ApiResponse } from '../../interfaces/auth';
+import RoleService from '../../services/RoleService';
+import { Box, Button, Modal, TextField, Typography } from '@mui/material';
 
-const CreateRoleModal = () => {
-  return (
-    <div>
-        
-    </div>
-  )
+interface Props {
+  open: boolean;
+  setOpen: (state: boolean) => void;
 }
 
-export default CreateRoleModal
\ No newline at end of file
+const style = {
+  position: 'absolute' as 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 400,
+  bgcolor: 'background.paper',
+  boxShadow: 24,
+  borderRadius: 2,
+  p: 4,
+  display: "flex",
+  flexDirection: "column",
+  gap: "8px"
+}
+
+export default function CreateRoleModal({
+  open,
+  setOpen
+}: Props) {
+  const { register, handleSubmit, formState: { errors } } = useForm<IRoleCreate>({
+    defaultValues: {
+      name: '',
+      description: ''
+    }
+  })
+
+  const onSubmit: SubmitHandler<IRoleCreate> = async (data) => {
+    try {
+      const response: AxiosResponse<ApiResponse> = await RoleService.createRole(data)
+      console.log(response.data)
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  return (
+    <Modal
+      open={open}
+      onClose={() => setOpen(false)}
+      aria-labelledby="modal-modal-title"
+      aria-describedby="modal-modal-description"
+    >
+      <form onSubmit={handleSubmit(onSubmit)}>
+
+        <Box sx={style}>
+          <Typography variant="h6" component="h6" gutterBottom>
+            Создание роли
+          </Typography>
+
+          <TextField
+            fullWidth
+            margin="normal"
+            label="Название"
+            required
+            {...register('name', { required: 'Название обязательно' })}
+            error={!!errors.name}
+            helperText={errors.name?.message}
+          />
+
+          <TextField
+            fullWidth
+            margin="normal"
+            label="Описание"
+            {...register('description')}
+            error={!!errors.description}
+            helperText={errors.description?.message}
+          />
+
+          <Box sx={{
+            display: "flex",
+            gap: "8px"
+          }}>
+            <Button type="submit" variant="contained" color="primary">
+              Добавить пользователя
+            </Button>
+
+            <Button type="button" variant="outlined" color="primary" onClick={() => setOpen(false)}>
+              Отмена
+            </Button>
+          </Box>
+        </Box>
+      </form>
+    </Modal>
+  )
+}
\ No newline at end of file
diff --git a/frontend_reactjs/src/components/modals/CreateUserModal.tsx b/frontend_reactjs/src/components/modals/CreateUserModal.tsx
index 9a5be7e..1b3281a 100644
--- a/frontend_reactjs/src/components/modals/CreateUserModal.tsx
+++ b/frontend_reactjs/src/components/modals/CreateUserModal.tsx
@@ -3,7 +3,7 @@ import { AxiosResponse } from 'axios';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { ApiResponse } from '../../interfaces/auth';
 import UserService from '../../services/UserService';
-import { CreateUserFormData } from '../../interfaces/user';
+import { IUserCreate } from '../../interfaces/user';
 
 interface Props {
     open: boolean;
@@ -29,7 +29,7 @@ export default function CreateUserModal({
     open,
     setOpen,
 }: Props) {
-    const { register, handleSubmit, formState: { errors } } = useForm<CreateUserFormData>({
+    const { register, handleSubmit, formState: { errors } } = useForm<IUserCreate>({
         defaultValues: {
             email: '',
             login: '',
@@ -41,7 +41,7 @@ export default function CreateUserModal({
         }
     })
 
-    const onSubmit: SubmitHandler<CreateUserFormData> = async (data) => {
+    const onSubmit: SubmitHandler<IUserCreate> = async (data) => {
         try {
             const response: AxiosResponse<ApiResponse> = await UserService.createUser(data)
             console.log(response.data)
diff --git a/frontend_reactjs/src/interfaces/auth.ts b/frontend_reactjs/src/interfaces/auth.ts
index 7a7443b..60072e4 100644
--- a/frontend_reactjs/src/interfaces/auth.ts
+++ b/frontend_reactjs/src/interfaces/auth.ts
@@ -16,18 +16,6 @@ export interface UserCreds extends User {
     password: string;
 }
 
-
-export interface Role {
-    name: string;
-    description?: string | null;
-    id: number;
-}
-
-export interface RoleCreate {
-    name: string;
-    description?: string | null;
-}
-
 export interface AuthState {
     isAuthenticated: boolean;
     token: string | null;
diff --git a/frontend_reactjs/src/interfaces/role.ts b/frontend_reactjs/src/interfaces/role.ts
new file mode 100644
index 0000000..07dea0f
--- /dev/null
+++ b/frontend_reactjs/src/interfaces/role.ts
@@ -0,0 +1,10 @@
+export interface IRole {
+    name: string;
+    description?: string | null;
+    id: number;
+}
+
+export interface IRoleCreate {
+    name: string;
+    description?: string | null;
+}
\ No newline at end of file
diff --git a/frontend_reactjs/src/interfaces/user.ts b/frontend_reactjs/src/interfaces/user.ts
index 7dcb41c..8c96b86 100644
--- a/frontend_reactjs/src/interfaces/user.ts
+++ b/frontend_reactjs/src/interfaces/user.ts
@@ -1,4 +1,4 @@
-export interface CreateUserFormData {
+export interface IUserCreate {
     email: string;
     login: string;
     phone: string;
diff --git a/frontend_reactjs/src/layouts/DashboardLayout.tsx b/frontend_reactjs/src/layouts/DashboardLayout.tsx
index c390f1d..6711f84 100644
--- a/frontend_reactjs/src/layouts/DashboardLayout.tsx
+++ b/frontend_reactjs/src/layouts/DashboardLayout.tsx
@@ -128,7 +128,10 @@ export default function DashboardLayout() {
 
     return (
         <ThemeProvider theme={innerTheme}>
-            <Box sx={{ display: 'flex' }}>
+            <Box sx={{
+                display: 'flex',
+                height: "100%"
+            }}>
                 <CssBaseline />
                 <AppBar position="absolute" open={open}>
                     <Toolbar
@@ -143,7 +146,7 @@ export default function DashboardLayout() {
                             onClick={toggleDrawer}
                             sx={{
                                 marginRight: '36px',
-                                ...(open && { display: 'none' }),
+                                //...(open && { display: 'none' }),
                             }}
                         >
                             <MenuIcon />
@@ -172,7 +175,7 @@ export default function DashboardLayout() {
                                 </Badge>
                             </IconButton> */}
 
-                            <AccountMenu/>
+                            <AccountMenu />
                         </Box>
 
                     </Toolbar>
@@ -187,16 +190,18 @@ export default function DashboardLayout() {
                         }}
                     >
                         <Box display="flex" justifyContent={'space-between'} width={"100%"}>
-                            <IconButton onClick={toggleDrawer}>
-                                <ChevronLeftIcon />
-                            </IconButton>
+
                         </Box>
                     </Toolbar>
+
                     <Divider />
 
                     <List component="nav">
                         {pages.map((item, index) => (
-                            <ListItem key={index} disablePadding>
+                            <ListItem
+                                key={index}
+                                disablePadding
+                            >
                                 <ListItemButton
                                     onClick={() => {
                                         navigate(item.path)
@@ -207,7 +212,9 @@ export default function DashboardLayout() {
                                     <ListItemIcon>
                                         {item.icon}
                                     </ListItemIcon>
-                                    <ListItemText primary={item.label} />
+                                    <ListItemText
+                                        primary={item.label}
+                                    />
                                 </ListItemButton>
                             </ListItem>
                         ))}
diff --git a/frontend_reactjs/src/pages/Roles.tsx b/frontend_reactjs/src/pages/Roles.tsx
index b918e6c..52eaa41 100644
--- a/frontend_reactjs/src/pages/Roles.tsx
+++ b/frontend_reactjs/src/pages/Roles.tsx
@@ -1,32 +1,24 @@
 import { useState } from 'react'
-import RoleCard from '../components/RoleCard'
-import Modal from '../components/Modal'
-import useDataFetching from '../components/FetchingData'
-import RoleService from '../services/RoleService'
-import { Box, Button } from '@mui/material'
+import { Box, Button, CircularProgress } from '@mui/material'
 import DataTable from '../components/DataTable'
 import { GridColDef } from '@mui/x-data-grid'
+import { useRoles } from '../hooks/swrHooks'
+import CreateRoleModal from '../components/modals/CreateRoleModal'
 
-interface IRoleCard {
-  id: number
-  name: string
-  description: string
-}
+export default function Roles() {
+  const { roles, isError, isLoading } = useRoles()
 
-interface Props {
-  showModal: boolean;
-}
-
-function Roles() {
-  const [showModal, setShowModal] = useState<Props>({ showModal: false });
-  const cards = useDataFetching<IRoleCard[]>(`${import.meta.env.VITE_API_AUTH_URL}/auth/roles/`, [])
+  const [open, setOpen] = useState(false)
 
   const columns: GridColDef[] = [
     { field: 'id', headerName: 'ID', type: "number", width: 70 },
-    { field: 'name', headerName: 'Название', width: 90 },
-    { field: 'description', headerName: 'Описание', width: 90 },
+    { field: 'name', headerName: 'Название', width: 90, editable: true },
+    { field: 'description', headerName: 'Описание', width: 90, editable: true },
   ];
 
+  if (isError) return <div>Произошла ошибка при получении данных.</div>
+  if (isLoading) return <CircularProgress />
+
   return (
     <Box sx={{
       display: 'flex',
@@ -35,23 +27,16 @@ function Roles() {
       gap: '16px',
       flexGrow: 1
     }}>
-      <Button onClick={() => console.log("TODO: Add")}>
+      <Button onClick={() => setOpen(true)}>
         Добавить роль
       </Button>
 
-      {cards &&
-        <DataTable rows={cards} columns={columns} />
-      }
+      <CreateRoleModal
+        open={open}
+        setOpen={setOpen}
+      />
+
+      <DataTable rows={roles} columns={columns} />
     </Box>
   )
-
-  return (
-    <div>
-      {cards.length > 0 && cards.map((card, index) => <RoleCard key={index} {...card} />)}
-      <button className='absolute w-0 h-0' onClick={() => setShowModal({ showModal: true })}>+</button>
-      <Modal {...showModal} />
-    </div>
-  )
-}
-
-export default Roles
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/frontend_reactjs/src/pages/Users.tsx b/frontend_reactjs/src/pages/Users.tsx
index 8f15dcc..a1e47bf 100644
--- a/frontend_reactjs/src/pages/Users.tsx
+++ b/frontend_reactjs/src/pages/Users.tsx
@@ -2,7 +2,7 @@ import { Box, Button, CircularProgress } from "@mui/material"
 import DataTable from "../components/DataTable"
 import { GridColDef } from "@mui/x-data-grid"
 import { useRoles, useUsers } from "../hooks/swrHooks"
-import { Role } from "../interfaces/auth"
+import { IRole } from "../interfaces/role"
 import { useState } from "react"
 import CreateUserModal from "../components/modals/CreateUserModal"
 
@@ -26,7 +26,7 @@ export default function Users() {
             headerName: 'Роль',
             valueGetter: (value, row) => {
                 if (roles) {
-                    const roleName = roles.find((role: Role) => role.id === value).name
+                    const roleName = roles.find((role: IRole) => role.id === value).name
                     return roleName
                 } else {
                     return value
diff --git a/frontend_reactjs/src/pages/auth/SignUp.tsx b/frontend_reactjs/src/pages/auth/SignUp.tsx
index ee9aa14..4dc56ef 100644
--- a/frontend_reactjs/src/pages/auth/SignUp.tsx
+++ b/frontend_reactjs/src/pages/auth/SignUp.tsx
@@ -3,10 +3,10 @@ import { TextField, Button, Container, Typography, Box } from '@mui/material';
 import { AxiosResponse } from 'axios';
 import { ApiResponse } from '../../interfaces/auth';
 import UserService from '../../services/UserService';
-import { CreateUserFormData } from '../../interfaces/user';
+import { IUserCreate } from '../../interfaces/user';
 
 const SignUp = () => {
-    const { register, handleSubmit, formState: { errors } } = useForm<CreateUserFormData>({
+    const { register, handleSubmit, formState: { errors } } = useForm<IUserCreate>({
         defaultValues: {
             email: '',
             login: '',
@@ -19,7 +19,7 @@ const SignUp = () => {
     })
 
 
-    const onSubmit: SubmitHandler<CreateUserFormData> = async (data) => {
+    const onSubmit: SubmitHandler<IUserCreate> = async (data) => {
         try {
             const response: AxiosResponse<ApiResponse> = await UserService.createUser(data)
             console.log('Успешная регистрация:', response.data);
diff --git a/frontend_reactjs/src/services/RoleService.ts b/frontend_reactjs/src/services/RoleService.ts
index 6d10efa..e04371c 100644
--- a/frontend_reactjs/src/services/RoleService.ts
+++ b/frontend_reactjs/src/services/RoleService.ts
@@ -1,12 +1,12 @@
 import axiosInstance from "../http/axiosInstance";
-import { Role, RoleCreate } from "../interfaces/auth";
+import { IRoleCreate } from "../interfaces/role";
 
 export default class RoleService {
     static async getRoles() {
         return await axiosInstance.get(`/auth/roles`)
     }
 
-    static async createRole(data: RoleCreate) {
+    static async createRole(data: IRoleCreate) {
         return await axiosInstance.post(`/auth/roles/`, data)
     }