diff --git a/app/api.ts b/app/api.ts
index f8abed9..b512903 100644
--- a/app/api.ts
+++ b/app/api.ts
@@ -1,6 +1,7 @@
 import axios, {type AxiosResponse} from "axios";
 import {ResponseError} from "~/classes/responseError";
 import {BlacklistItem} from "~/classes/blacklistItem";
+import type {BlacklistReport} from "~/classes/blacklistReport";
 
 const apiUrl = import.meta.env.VITE_API_URL;
 const instance = axios.create({
@@ -42,4 +43,12 @@ export async function getAll(searchText?: string): Promise<BlacklistItem[] | Res
         return new ResponseError(err.code, err.message, err.status);
     });
     return result;
+}
+
+export async function sendReport(blacklistReport: BlacklistReport){
+    return await instance.post('/blacklist/create', blacklistReport).then(() => {
+        return true;
+    }).catch(() => {
+        return false;
+    });
 }
\ No newline at end of file
diff --git a/app/assets/mui/themes/home.ts b/app/assets/mui/themes/home.ts
index 6651ae0..3a6498d 100644
--- a/app/assets/mui/themes/home.ts
+++ b/app/assets/mui/themes/home.ts
@@ -24,6 +24,10 @@ const customTheme = (outerTheme: Theme) =>
                             color: 'var(--TextField-brandBorderColor)',
                             borderColor: 'var(--TextField-brandBorderColor)',
                         },
+                        '& textarea': {
+                            color: 'var(--TextField-brandBorderColor)',
+                            borderColor: 'var(--TextField-brandBorderColor)',
+                        },
                     },
                 },
             },
@@ -58,13 +62,29 @@ const customTheme = (outerTheme: Theme) =>
                         '--TextField-brandBorderColor': '#E0E3E7',
                         '--variant-outlinedBorder': '#b5b5b5',
                         '--variant-containedBg': '#b5b5b5',
-                        '--variant-custom-textBg': 'rgba(246,246,248,0.06)',
+                        '--variant-custom-textBg': '#282c34',
                         color: 'var(--TextField-brandBorderColor)',
                         '&:hover': {
                             backgroundColor: 'var(--variant-custom-textBg)',
                             borderColor: 'var(--variant-custom-textBg)',
                             boxShadow: 'none',
                         },
+                    },
+                    contained: {
+                        '--TextField-brandBorderColor': '#E0E3E7',
+                        '--contained-custom-textBg': '#282c34',
+                        color: 'var(--contained-custom-textBg)',
+                        backgroundColor: 'var(--TextField-brandBorderColor)',
+                        borderColor: 'var(--TextField-brandBorderColor)',
+                        borderRadius: '4px',
+                        borderWidth: '1px',
+                        borderStyle: 'solid',
+                        '&:hover': {
+                            backgroundColor: 'var(--contained-custom-textBg)',
+                            borderColor: 'var(--TextField-brandBorderColor)',
+                            color: 'var(--TextField-brandBorderColor)',
+                            boxShadow: 'none',
+                        },
                     }
                 }
             },
diff --git a/app/classes/blacklistReport.ts b/app/classes/blacklistReport.ts
new file mode 100644
index 0000000..ab3977f
--- /dev/null
+++ b/app/classes/blacklistReport.ts
@@ -0,0 +1,23 @@
+export class BlacklistReport {
+    steam_link: string;
+    steam_nickname: string;
+    comment: string;
+    afk: boolean;
+    cheater: boolean;
+    griefer: boolean;
+    toxic: boolean;
+    useless: boolean;
+    smurf: boolean;
+
+    constructor(steam_link: string, steam_nickname: string, comment: string, afk: boolean, cheater: boolean, griefer: boolean, toxic: boolean, useless: boolean, smurf: boolean) {
+        this.steam_link = steam_link;
+        this.steam_nickname = steam_nickname;
+        this.comment = comment;
+        this.afk = afk;
+        this.cheater = cheater;
+        this.griefer = griefer;
+        this.toxic = toxic;
+        this.useless = useless;
+        this.smurf = smurf;
+    }
+}
\ No newline at end of file
diff --git a/app/components/reportDialog.tsx b/app/components/reportDialog.tsx
new file mode 100644
index 0000000..6946586
--- /dev/null
+++ b/app/components/reportDialog.tsx
@@ -0,0 +1,148 @@
+import type {BlacklistItem} from "~/classes/blacklistItem";
+import {
+    Button,
+    Checkbox,
+    Dialog,
+    DialogContent,
+    DialogTitle,
+    Divider,
+    FormControlLabel,
+    TextField
+} from "@mui/material";
+import {useState} from "react";
+import TitleHeader from "~/components/itemDialog/titleHeader";
+import {BlacklistReport} from "~/classes/blacklistReport";
+import {sendReport} from '~/api';
+
+export default function ReportDialog({ open, handleClose }: { open: boolean, handleClose: Function }){
+
+    const [link, setLink] = useState('');
+    const [nickname, setNickname] = useState('');
+    const [comment, setComment] = useState('');
+    const [afk, setAfk] = useState(false);
+    const [cheater, setCheater] = useState(false);
+    const [griefer, setGriefer] = useState(false);
+    const [toxic, setToxic] = useState(false);
+    const [useless, setUseless] = useState(false);
+    const [smurf, setSmurf] = useState(false);
+    const [loading, setLoading] = useState(false);
+
+    const clearValues = () => {
+        setLink('');
+        setNickname('');
+        setComment('');
+        setAfk(false);
+        setCheater(false);
+        setGriefer(false);
+        setToxic(false);
+        setUseless(false);
+        setSmurf(false);
+    };
+
+    const handleSend = async () => {
+        setLoading(true);
+        let blacklistReport = new BlacklistReport(
+            link,
+            nickname,
+            comment,
+            afk,
+            cheater,
+            griefer,
+            toxic,
+            useless,
+            smurf
+        );
+        await sendReport(blacklistReport).then((result: boolean) => {
+            setLoading(true);
+            clearValues();
+            handleClose();
+        });
+    };
+
+    return (
+        <>
+            <Dialog
+                open={open}
+                onClose={() => handleClose()}
+            >
+                <DialogTitle>
+                    <TitleHeader name={'Creating Hunt: Showdown player report'} handleClose={handleClose}/>
+                </DialogTitle>
+                <Divider sx={{marginTop: '10px', marginBottom: '10px', alignSelf: 'center'}}/>
+                <DialogContent>
+                    <TextField
+                        id="steam-link-field"
+                        label="Steam profile link"
+                        variant="outlined"
+                        value={link}
+                        onChange={(e) => setLink(e.target.value)}
+                        fullWidth
+                        sx={{marginBottom: '20px'}}
+                    />
+                    <TextField
+                        id="steam-nickname-field"
+                        label="Steam profile nickname"
+                        variant="outlined"
+                        value={nickname}
+                        onChange={(e) => setNickname(e.target.value)}
+                        fullWidth
+                        sx={{marginBottom: '20px'}}
+                    />
+                    <TextField
+                        id="steam-comment-field"
+                        label="Your comment"
+                        variant="outlined"
+                        value={comment}
+                        onChange={(e) => setComment(e.target.value)}
+                        fullWidth
+                        multiline
+                        minRows={4}
+                        sx={{marginBottom: '20px', color: '#E0E3E7'}}
+                    />
+                    <div style={{display: 'flex', flexDirection: 'column'}}>
+                        <FormControlLabel
+                            control={<Checkbox sx={{color: '#E0E3E7','&.Mui-checked': {color: '#E0E3E7',}, }}/>}
+                            checked={afk}
+                            onChange={(e) => setAfk((e.target as HTMLInputElement).checked)}
+                            label="AFK"
+                        />
+                        <FormControlLabel
+                            control={<Checkbox sx={{color: '#E0E3E7','&.Mui-checked': {color: '#E0E3E7',}, }}/>}
+                            checked={cheater}
+                            onChange={(e) => setCheater((e.target as HTMLInputElement).checked)}
+                            label="Cheater"
+                        />
+                        <FormControlLabel
+                            control={<Checkbox sx={{color: '#E0E3E7','&.Mui-checked': {color: '#E0E3E7',}, }}/>}
+                            checked={griefer}
+                            onChange={(e) => setGriefer((e.target as HTMLInputElement).checked)}
+                            label="Griefer"
+                        />
+                        <FormControlLabel
+                            control={<Checkbox sx={{color: '#E0E3E7','&.Mui-checked': {color: '#E0E3E7',}, }}/>}
+                            checked={toxic}
+                            onChange={(e) => setToxic((e.target as HTMLInputElement).checked)}
+                            label="Toxic"
+                        />
+                        <FormControlLabel
+                            control={<Checkbox sx={{color: '#E0E3E7','&.Mui-checked': {color: '#E0E3E7',}, }}/>}
+                            checked={useless}
+                            onChange={(e) => setUseless((e.target as HTMLInputElement).checked)}
+                            label="Useless"
+                        />
+                        <FormControlLabel
+                            control={<Checkbox sx={{color: '#E0E3E7','&.Mui-checked': {color: '#E0E3E7',}, }}/>}
+                            checked={smurf}
+                            onChange={(e) => setSmurf((e.target as HTMLInputElement).checked)}
+                            label="Smurf"
+                        />
+                    </div>
+                    <div style={{width: '100%', display: 'flex', justifyContent: 'space-around'}}>
+                        <Button onClick={() => handleSend()} variant="contained">Send</Button>
+                        <Button onClick={() => handleClose()} variant="outlined">Cancel</Button>
+                    </div>
+                </DialogContent>
+            </Dialog>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/app/routes/home.tsx b/app/routes/home.tsx
index cd1341d..12b96e9 100644
--- a/app/routes/home.tsx
+++ b/app/routes/home.tsx
@@ -14,6 +14,7 @@ import {ResponseError} from "~/classes/responseError";
 import ItemList from "~/components/itemList";
 import ItemDialog from "~/components/itemDialog";
 import OutlinedFlagIcon from '@mui/icons-material/OutlinedFlag';
+import ReportDialog from "~/components/reportDialog";
 
 export default function Home() {
     const outerTheme = useTheme();
@@ -24,6 +25,7 @@ export default function Home() {
     const [showDialog, setShowDialog] = useState(false);
     const [currentDialogBlacklistItem, setCurrentDialogBlacklistItem] = useState<BlacklistItem|null>(null);
     const [fabIsHovered, setFabIsHovered] = useState(false);
+    const [showReportDialog, setReportShowDialog] = useState(false);
 
     useEffect(() => {
         let isIgnore = false;
@@ -42,7 +44,7 @@ export default function Home() {
         return () => {
             isIgnore = true; // При следующем изменении someValue старый запрос будет проигнорирован
         };
-    }, [searchText]);
+    }, [searchText, showReportDialog]);
 
     function handleSearch(text: string) {
         setSearchText(text);
@@ -50,7 +52,6 @@ export default function Home() {
 
     function handleItemClick(item: BlacklistItem){
         setCurrentDialogBlacklistItem(item);
-        console.log(item);
         setShowDialog(true);
     }
 
@@ -58,6 +59,14 @@ export default function Home() {
         setShowDialog(false);
     };
 
+    const handleReportDialogOpen = () => {
+        setReportShowDialog(true);
+    };
+
+    const handleReportDialogClose = () => {
+        setReportShowDialog(false);
+    };
+
     return (
         <ThemeProvider theme={customTheme(outerTheme)}>
             <div className="bg-dark">
@@ -76,7 +85,9 @@ export default function Home() {
                 </div>
                 <ItemList isFetching={isFetchingList} blacklistItems={blacklistItems} showDialog={handleItemClick}></ItemList>
                 <ItemDialog blacklistItem={currentDialogBlacklistItem} open={showDialog} handleClose={handleDialogClose}></ItemDialog>
+                <ReportDialog open={showReportDialog} handleClose={handleReportDialogClose}/>
                 <Fab
+                    onClick={() => handleReportDialogOpen()}
                     onMouseEnter={() => setFabIsHovered(true)}
                     onMouseLeave={() => setFabIsHovered(false)}
                     variant={fabIsHovered ? 'extended' : 'circular'}