diff --git a/CHANGELOG.md b/CHANGELOG.md
index 20bbf21..cbb1ffd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -122,6 +122,7 @@ and login again.
 * 🎨 Theme Editor (`/admin/theme`) - Choose from 4 base themes and then customize with css custom properties via our live editor
 * ✏️ Profile editing: Users can now edit their Display name and Bio from the web interface.
 * 🚮 Remove avatar: Users can now remove Avatar models from their Avatar collection from the web interface (Does not delete the Avatar).
+* 🗑️ Delete posts: Users can delete messages from their Outbox from the web interface
 
 ### Changed
 
diff --git a/views/ap/Post.css b/views/ap/Post.css
index 330fdf5..09a579c 100644
--- a/views/ap/Post.css
+++ b/views/ap/Post.css
@@ -25,6 +25,7 @@
   overflow-wrap: break-word;
   overflow: hidden;
   margin-bottom: 0;
+  min-height: 36px;
 }
 
 .postBody .centered {
diff --git a/views/ap/Post.js b/views/ap/Post.js
index 565909e..0624272 100644
--- a/views/ap/Post.js
+++ b/views/ap/Post.js
@@ -5,6 +5,7 @@ import ProfileIcon from '../components/ProfileIcon'
 import SanitizedHTML from '../components/SanitizedHTML'
 import './Post.css'
 import { Link } from 'react-router-dom'
+import NotePostBody from '../components/NotePostBody'
 import ModelPostBody from '../components/ModelPostBody'
 import PlacePostBody from '../components/PlacePostBody'
 import { handleImmerLink, ImmerLink } from '../components/ImmerLink'
@@ -67,7 +68,7 @@ function getPostBody (object, { showAvatarControls, expandLocationPosts }, id, h
   const { type, content, url } = object
   switch (type) {
     case 'Note':
-      return <SanitizedHTML html={content} />
+      return <NotePostBody html={content} activityId={id} />
     case 'Image':
       return <img className='postMedia' src={ImmersClient.URLFromProperty(url)} />
     case 'Video':
diff --git a/views/components/DialogModal.js b/views/components/DialogModal.js
index 3ead5ef..4156a14 100644
--- a/views/components/DialogModal.js
+++ b/views/components/DialogModal.js
@@ -2,10 +2,11 @@ import React, { useEffect, useRef } from 'react'
 
 const DialogModal = ({
   title,
+  description,
+  actionVerb,
   isOpened,
   onProceed,
   onClose,
-  description,
   children
 }) => {
   const ref = useRef(null)
@@ -40,7 +41,7 @@ const DialogModal = ({
         </section>
         <footer>
           <a role='button' href='#cancel' className='secondary' onClick={onClose}>Cancel</a>
-          <a role='button' href='#remove' onClick={proceedAndClose}>Remove</a>
+          <a role='button' href='#remove' onClick={proceedAndClose}>{actionVerb}</a>
         </footer>
       </article>
     </dialog>
diff --git a/views/components/ModelPostBody.js b/views/components/ModelPostBody.js
index b32dd24..ff4e1f4 100644
--- a/views/components/ModelPostBody.js
+++ b/views/components/ModelPostBody.js
@@ -37,10 +37,11 @@ export default function ModelPostBody ({ model, showControls, activityID, handle
       {isOpened && (
         <DialogModal
           title='Remove avatar'
+          description='Remove this avatar from your collection? The original will not be deleted.'
+          actionVerb='Remove'
           isOpened={isOpened}
           onProceed={onProceed}
           onClose={onClose}
-          description='Remove this avatar from your collection? The original will not be deleted.'
         >
           <AvatarPreview avatar={model} {...props} />
         </DialogModal>)}
diff --git a/views/components/NotePostBody.js b/views/components/NotePostBody.js
new file mode 100644
index 0000000..97d2b36
--- /dev/null
+++ b/views/components/NotePostBody.js
@@ -0,0 +1,38 @@
+import React, { useState } from 'react'
+import DialogModal from './DialogModal'
+import './ModelPostBody.css'
+import EmojiButton from './EmojiButton'
+import { immersClient } from '../ap/utils/immersClient'
+import SanitizedHTML from '../components/SanitizedHTML'
+
+export default function NotePostBody ({ className, html, activityId, ...props }) {
+  const [isOpened, setIsOpened] = useState(false)
+  const handleDeleteNote = () => { immersClient.deleteMessage(activityId) }
+  const onProceed = () => {
+    handleDeleteNote()
+  }
+  const onClose = () => {
+    document.body.classList.remove('modal-open')
+    setIsOpened(false)
+  }
+
+  return (
+    <div className='relative'>
+      <SanitizedHTML html={html} />
+      <div className='modelActionButtons'>
+        <EmojiButton emoji='x' title='Delete this Note' tipSide='left' onClick={() => setIsOpened(true)} />
+      </div>
+      {isOpened && (
+        <DialogModal
+          title='Delete Note'
+          description='Delete this message?'
+          actionVerb='Delete'
+          isOpened={isOpened}
+          onProceed={onProceed}
+          onClose={onClose}
+        >
+          <SanitizedHTML html={html} />
+        </DialogModal>)}
+    </div>
+  )
+}