diff --git a/public/api.php b/public/api.php
index 454fc0f..1d4fddb 100644
--- a/public/api.php
+++ b/public/api.php
@@ -33,6 +33,14 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
             $m->save();
             echo json_encode(['success']);
         }
+    } else if ($action === 'delete_message') {
+        $message = SecureMessage::getByID($params['message_id']);
+        if (!$message) {
+            echo json_encode(['unkown_message']);
+        } else {
+            $message->delete();
+            echo json_encode(['success']);
+        }
     }
 
 }
diff --git a/public/css/messages.css b/public/css/messages.css
index e92a689..8d1872c 100644
--- a/public/css/messages.css
+++ b/public/css/messages.css
@@ -13,3 +13,7 @@
   padding: 10px !important;
   border-radius: 5px;
 }
+
+.message-opt-button {
+  padding: 0 !important;
+}
diff --git a/public/js/app.js b/public/js/app.js
index 625b4ed..0d7af0c 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -7,7 +7,6 @@ $(() => $('.user-tile').addClass('scale-in'));
 
 $(document).ready(function(){
   $('.modal').modal();
-  Materialize.showStaggeredList('#messages-list')
 });
 
 $('.dropdown-button').dropdown({
@@ -26,7 +25,7 @@ $(document).ready(function(){
    $('.collapsible').collapsible();
  });
 
- $('#messages-list li').click(function() {
+ $('#messages-list li.message').click(function() {
    var message_id = this.value;
    var message_icon = $('#inbox-icon-' + message_id);
    if (message_icon.html().trim() != 'check') {
@@ -38,7 +37,31 @@ $(document).ready(function(){
        message_icon.removeClass('red-text');
      });
    }
- })
+ });
+
+function deleteInboxMessage(message_id) {
+   var inbox_list_item = $('#in-message-' + message_id);
+   var params = new URLSearchParams();
+   params.append('action', 'delete_message');
+   params.append('message_id', message_id)
+   axios.post('api.php', params).then(function(response) {
+     inbox_list_item.hide('slide',{direction:'right'},250, function() {
+       inbox_list_item.remove();
+     });
+   });
+ }
+
+ function deleteSentMessage(message_id) {
+   var sent_list_item = $('#out-message-' + message_id);
+   var params = new URLSearchParams();
+   params.append('action', 'delete_message');
+   params.append('message_id', message_id)
+   axios.post('api.php', params).then(function(response) {
+     sent_list_item.hide('slide',{direction:'right'},250, function() {
+       sent_list_item.remove();
+     });
+   });
+}
 
  function addToSent(recipient, message) {
    sentList = $('#sent-list');
diff --git a/public/messages.php b/public/messages.php
index 780b32a..f2a9856 100644
--- a/public/messages.php
+++ b/public/messages.php
@@ -32,7 +32,9 @@ include 'template/user_menu_button.php';
             <div id="inbox" class="col s12">
                 <ul id="messages-list" class="collapsible popout" data-collapsible="accordion">
                     <?php foreach($inbox as $message) { ?>
-                        <li value="<?php echo $message->id ?>">
+                        <li id="in-message-<?php echo $message->id ?>" value="<?php echo $message->id ?>"
+                            class="message"
+                        >
                             <div class="collapsible-header">
                                 <?php if ($message->is_read) { ?>
                                     <i id="inbox-icon-<?php echo $message->id ?>"
@@ -44,6 +46,18 @@ include 'template/user_menu_button.php';
                                     </i>
                                 <?php } ?>
                                 <?php echo htmlspecialchars($message->sender()->username) ?>
+                                <a class="right waves-circle message-opt-button center-align dropdown-button"
+                                    data-activates="message-dropdown-<?php echo $message->id ?>"
+                                >
+                                    <i class="material-icons">more_vert</i>
+                                </a>
+                                <ul id="message-dropdown-<?php echo $message->id ?>" class='dropdown-content'>
+                                    <li>
+                                        <a onclick="deleteInboxMessage(<?php echo $message->id ?>)">
+                                            Delete
+                                        </a>
+                                    </li>
+                                </ul>
                             </div>
                             <div class="collapsible-body">
                                 <span>
@@ -57,7 +71,7 @@ include 'template/user_menu_button.php';
             <div id="sent" class="col s12" style="display:none">
                 <ul id="sent-list" class="collapsible popout" data-collapsible="accordion">
                     <?php foreach($outbox as $message) { ?>
-                        <li>
+                        <li id="out-message-<?php echo $message->id ?>" class="message">
                             <div class="collapsible-header">
                                 <?php if ($message->is_read) { ?>
                                     <i class="material-icons green-text">check_circle</i>
@@ -65,6 +79,18 @@ include 'template/user_menu_button.php';
                                     <i class="material-icons">arrow_forward</i>
                                 <?php } ?>
                                 <?php echo htmlspecialchars($message->receiver()->username) ?>
+                                <a class="right waves-circle message-opt-button center-align dropdown-button"
+                                    data-activates="sent-dropdown-<?php echo $message->id ?>"
+                                >
+                                    <i class="material-icons">more_vert</i>
+                                </a>
+                                <ul id="sent-dropdown-<?php echo $message->id ?>" class='dropdown-content'>
+                                    <li>
+                                        <a onclick="deleteSentMessage(<?php echo $message->id ?>)">
+                                            Delete
+                                        </a>
+                                    </li>
+                                </ul>
                             </div>
                             <div class="collapsible-body">
                                 <span>
diff --git a/public/template/footer.html b/public/template/footer.html
index 5db5d78..3bf52cf 100644
--- a/public/template/footer.html
+++ b/public/template/footer.html
@@ -3,6 +3,10 @@
   src="https://code.jquery.com/jquery-3.1.1.min.js"
   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
   crossorigin="anonymous"></script>
+  <script
+  src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
+  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
+  crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
   <script src="js/app.js"></script>