diff --git a/front/src/api/removeAnnouncement/index.ts b/front/src/api/removeAnnouncement/index.ts
new file mode 100644
index 0000000..fa88c16
--- /dev/null
+++ b/front/src/api/removeAnnouncement/index.ts
@@ -0,0 +1,12 @@
+import { API_URL } from '../../config'
+import { RemoveAnnouncement, RemoveAnnouncementResponse } from './types'
+
+const composeRemoveAnnouncementURL = () => (
+    API_URL + '/announcement?'
+)
+
+const processRemoveAnnouncement = (data: RemoveAnnouncementResponse): RemoveAnnouncement => {
+    return data.Answer
+}
+
+export { composeRemoveAnnouncementURL, processRemoveAnnouncement }
diff --git a/front/src/api/removeAnnouncement/types.ts b/front/src/api/removeAnnouncement/types.ts
new file mode 100644
index 0000000..0c5bb2b
--- /dev/null
+++ b/front/src/api/removeAnnouncement/types.ts
@@ -0,0 +1,17 @@
+import { isObject } from '../../utils/types'
+
+type RemoveAnnouncementResponse = {
+    Answer: boolean
+}
+
+const isRemoveAnnouncementResponse = (obj: unknown): obj is RemoveAnnouncementResponse => (
+    isObject(obj, {
+        'Answer': 'boolean'
+    })
+)
+
+type RemoveAnnouncement = boolean
+
+export type { RemoveAnnouncementResponse, RemoveAnnouncement }
+
+export { isRemoveAnnouncementResponse }
diff --git a/front/src/components/AnnouncementDetails.tsx b/front/src/components/AnnouncementDetails.tsx
index b604909..4a20086 100644
--- a/front/src/components/AnnouncementDetails.tsx
+++ b/front/src/components/AnnouncementDetails.tsx
@@ -3,10 +3,11 @@ import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet'
 
 import LineDot from './LineDot'
 import { categoryNames } from '../assets/category'
-import { useBook } from '../hooks/api'
+import { useBook, useRemoveAnnouncement } from '../hooks/api'
 import { Announcement } from '../api/announcement/types'
 import { iconItem } from '../utils/markerIcons'
 import { CSSProperties } from 'react'
+import { useId } from '../hooks'
 
 type AnnouncementDetailsProps = {
     close: () => void,
@@ -19,12 +20,19 @@ const styles = {
         alignItems: 'center',
         justifyContent: 'center',
     } as CSSProperties,
+    map: {
+        width: '100%',
+        minHeight: 300,
+    } as CSSProperties,
 }
 
 function AnnouncementDetails({ close, announcement: {
-    id, name, category, bestBy, description, lat, lng, address, metro
+    id, name, category, bestBy, description, lat, lng, address, metro, bookedBy, userId
 } }: AnnouncementDetailsProps) {
     const { handleBook, bookButton } = useBook()
+    const { handleRemove, removeButton } = useRemoveAnnouncement(close)
+
+    const myId = useId()
 
     return (
         <div
@@ -47,7 +55,7 @@ function AnnouncementDetails({ close, announcement: {
 
                     <p className='mb-3'>{description}</p>
 
-                    <MapContainer style={{ width: '100%', minHeight: 300 }} center={[lat, lng]} zoom={16} >
+                    <MapContainer style={styles.map} center={[lat, lng]} zoom={16} >
                         <TileLayer
                             attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                             url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
@@ -64,7 +72,12 @@ function AnnouncementDetails({ close, announcement: {
                 </Modal.Body>
 
                 <Modal.Footer>
-                    <Button variant='success' onClick={() => void handleBook(id)} {...bookButton} />
+                    <p>Забронировали {bookedBy} чел.</p>
+                    {(myId === userId) ? (
+                        <Button variant='success' onClick={() => void handleRemove(id)} {...removeButton} />
+                    ) : (
+                        <Button variant='success' onClick={() => void handleBook(id)} {...bookButton} />
+                    )}
                 </Modal.Footer>
             </Modal.Dialog>
         </div>
diff --git a/front/src/hooks/api/index.ts b/front/src/hooks/api/index.ts
index ce87039..1d3d229 100644
--- a/front/src/hooks/api/index.ts
+++ b/front/src/hooks/api/index.ts
@@ -5,3 +5,4 @@ export { default as useTrashboxes } from './useTrashboxes'
 export { default as useAddAnnouncement } from './useAddAnnouncement'
 export { default as useOsmAddresses } from './useOsmAddress'
 export { default as useUser } from './useUser'
+export { default as useRemoveAnnouncement } from './useRemoveAnnouncement'
diff --git a/front/src/hooks/api/useRemoveAnnouncement.ts b/front/src/hooks/api/useRemoveAnnouncement.ts
new file mode 100644
index 0000000..f24ca00
--- /dev/null
+++ b/front/src/hooks/api/useRemoveAnnouncement.ts
@@ -0,0 +1,31 @@
+import { useCallback } from 'react'
+import { useSendWithButton } from '..'
+import { composeRemoveAnnouncementURL, processRemoveAnnouncement } from '../../api/removeAnnouncement'
+import { isRemoveAnnouncementResponse } from '../../api/removeAnnouncement/types'
+
+const useRemoveAnnouncement = (close: () => void) => {
+    const { doSend, button } = useSendWithButton(
+        'Удалить',
+        'Удалено',
+        true,
+        composeRemoveAnnouncementURL(),
+        'DELETE',
+        true,
+        isRemoveAnnouncementResponse,
+        processRemoveAnnouncement
+    )
+
+    const doSendWithClose = useCallback(async (id: number) => {
+        await doSend({
+            body: JSON.stringify({
+                id
+            })
+        })
+
+        close()
+    }, [doSend, close])
+
+    return { handleRemove: doSendWithClose, removeButton: button }
+}
+
+export default useRemoveAnnouncement