diff --git a/web-app/src/Api/backupsApi.js b/web-app/src/Api/backupsApi.js
new file mode 100644
index 0000000..8692d66
--- /dev/null
+++ b/web-app/src/Api/backupsApi.js
@@ -0,0 +1,35 @@
+import {createApi} from "@reduxjs/toolkit/query/react";
+import {baseQueryWithAuth} from "./baseQuery.js";
+
+
+export const backupsApi = createApi({
+    reducerPath: 'backupsApi',
+    baseQuery: baseQueryWithAuth,
+    tagTypes: ['Backup'],
+    endpoints: (builder) => ({
+        getBackups: builder.query({
+            query: () => `/backups/`,
+            providesTags: ['Backup'],
+        }),
+        createBackup: builder.mutation({
+            query: () => ({
+                url: '/backups/',
+                method: 'POST',
+            }),
+            invalidatesTags: ['Backup'],
+        }),
+        deleteBackup: builder.mutation({
+            query: (backupId) => ({
+                url: `/backups/${backupId}/`,
+                method: 'DELETE',
+            }),
+            invalidatesTags: ['Backup'],
+        }),
+    }),
+});
+
+export const {
+    useGetBackupsQuery,
+    useCreateBackupMutation,
+    useDeleteBackupMutation,
+} = backupsApi;
diff --git a/web-app/src/Components/Pages/AdminPage/Components/BackupManageTab/BackupManageTab.jsx b/web-app/src/Components/Pages/AdminPage/Components/BackupManageTab/BackupManageTab.jsx
index e77a091..b3bf92f 100644
--- a/web-app/src/Components/Pages/AdminPage/Components/BackupManageTab/BackupManageTab.jsx
+++ b/web-app/src/Components/Pages/AdminPage/Components/BackupManageTab/BackupManageTab.jsx
@@ -1,24 +1,30 @@
-import {Button, Space, Spin, Typography, Upload} from "antd";
+import {Button, Divider, List, Result, Space, Typography, Upload} from "antd";
 import {CloudDownloadOutlined, UploadOutlined} from "@ant-design/icons";
+import useBackupManageTab from "./useBackupManageTab.js";
+import LoadingIndicator from "../../../../Widgets/LoadingIndicator/LoadingIndicator.jsx";
 
 const BackupManageTab = () => {
+    const backupManageTabData = useBackupManageTab();
+
+    if (backupManageTabData.isLoadingBackups) {
+        return <LoadingIndicator/>;
+    }
+
+    if (backupManageTabData.isErrorBackups) {
+        return <Result status={500} title="Произошла ошибка при загрузке резервных копий"/>
+    }
+
     return (
-        <Spin spinning={false}>
-            <Typography>
-                <Typography.Title level={4}>Управление резервными копиями</Typography.Title>
-                <Typography.Paragraph>
-                    Здесь вы можете создать резервную копию системы и восстановить её из архива.
-                </Typography.Paragraph>
-            </Typography>
-            <Space direction="vertical" size="large" style={{width: "100%"}}>
+        <>
+            <Space direction="horizontal" size="large" style={{width: "100%"}}>
                 <Button
                     type="primary"
                     icon={<CloudDownloadOutlined/>}
-                    // onClick={handleCreateBackup}
-                    // disabled={loading}
-                    block
+                    onClick={backupManageTabData.createBackupHandler}
+                    loading={backupManageTabData.isCreatingBackup}
+
                 >
-                    Создать и скачать бэкап
+                    Создать и скачать резервную копию
                 </Button>
                 <Upload
                     // beforeUpload={handleUpload}
@@ -27,11 +33,39 @@ const BackupManageTab = () => {
                     // disabled={loading}
                 >
                     <Button icon={<UploadOutlined/>} block>
-                        Загрузить бэкап для восстановления
+                        Загрузить резервную копию для восстановления
                     </Button>
                 </Upload>
             </Space>
-        </Spin>
+            <Divider/>
+            <List
+                dataSource={backupManageTabData.backups}
+                renderItem={(backup) => (
+                    <List.Item>
+                        <Typography.Text>{backup.filename}</Typography.Text>
+                        <Typography.Text>Создан: {new Date(backup.timestamp).toLocaleString()}</Typography.Text>
+                        <Button
+                            type="primary"
+                            icon={<CloudDownloadOutlined/>}
+                            onClick={() => backupManageTabData.downloadBackupHandler(backup.id, backup.filename)}
+                            loading={backupManageTabData.isDownloadingBackup}
+                        >
+                            Скачать
+                        </Button>
+                        <Button
+                            type="primary"
+                            icon={<CloudDownloadOutlined/>}
+                            onClick={() => backupManageTabData.deleteBackupHandler(backup.id)}
+                            loading={backupManageTabData.isDeletingBackup}
+                            danger
+                        >
+                            Удалить
+                        </Button>
+                    </List.Item>
+                )}
+            />
+        </>
+
     );
 };