diff --git a/pontoon/base/static/css/check-box.css b/pontoon/base/static/css/check-box.css
index eb8e9c7771..54c1b0856f 100644
--- a/pontoon/base/static/css/check-box.css
+++ b/pontoon/base/static/css/check-box.css
@@ -7,6 +7,10 @@
 
   .check-box {
     padding: 4px 0;
+
+    [type='checkbox'] {
+      display: none;
+    }
   }
 
   .check-box:last-child {
diff --git a/pontoon/base/static/css/sidebar_menu.css b/pontoon/base/static/css/sidebar_menu.css
index 09be38c721..0a6b45e863 100644
--- a/pontoon/base/static/css/sidebar_menu.css
+++ b/pontoon/base/static/css/sidebar_menu.css
@@ -1,5 +1,9 @@
 .menu.left-column {
+  background: var(--background-hover-1);
+  border-radius: 6px;
+  box-sizing: border-box;
   float: left;
+  padding: 10px;
   width: 300px;
 }
 
@@ -8,7 +12,8 @@
 }
 
 .menu.left-column li.selected {
-  background: var(--background-hover-1);
+  background: var(--background-hover-2);
+  border-radius: 6px;
 }
 
 .menu.left-column li.selected a {
@@ -21,8 +26,8 @@
 
 .menu.left-column li a {
   display: block;
-  font-size: 15px;
-  padding: 5px;
+  font-size: 16px;
+  padding: 10px;
 }
 
 .menu.left-column .count {
diff --git a/pontoon/base/static/js/tabs.js b/pontoon/base/static/js/tabs.js
index c62f17d545..b96b6c53ad 100644
--- a/pontoon/base/static/js/tabs.js
+++ b/pontoon/base/static/js/tabs.js
@@ -19,8 +19,8 @@ $(function () {
     'click',
     '#middle .links a, #main .contributors .links a',
     function (e) {
-      // Keep default middle-, control- and command-click behaviour (open in new tab)
-      if (e.which === 2 || e.metaKey || e.ctrlKey) {
+      // Keep default middle-, shift-, control- and command-click behaviour
+      if (e.which === 2 || e.metaKey || e.shiftKey || e.ctrlKey) {
         return;
       }
 
diff --git a/pontoon/base/templates/widgets/checkbox.html b/pontoon/base/templates/widgets/checkbox.html
index 59ef1aa65b..1e822d27ec 100644
--- a/pontoon/base/templates/widgets/checkbox.html
+++ b/pontoon/base/templates/widgets/checkbox.html
@@ -1,4 +1,4 @@
-{% macro checkbox(label, class, attribute, is_enabled=False, title=False, help=False) %}
+{% macro checkbox(label, class, attribute, is_enabled=False, title=False, help=False, form_field=None) %}
 <li class="check-box {{ class }}{% if is_enabled %} enabled{% endif %}" data-attribute="{{ attribute }}"{% if title %} title="{{title}}"{% endif %}>
     <div class="check-box-wrapper">
         <span class="label">{{ label }}</span>
@@ -7,5 +7,8 @@
     {% if help %}
     <p class="help">{{ help|safe }}</p>
     {% endif %}
+    {% if form_field %}
+    {{ form_field }}
+    {% endif %}
 </li>
 {% endmacro %}
diff --git a/pontoon/base/templates/widgets/item_selector_list.html b/pontoon/base/templates/widgets/item_selector_list.html
index 0607e3e492..b93f00ffe2 100644
--- a/pontoon/base/templates/widgets/item_selector_list.html
+++ b/pontoon/base/templates/widgets/item_selector_list.html
@@ -1,4 +1,4 @@
-{% macro list(id, title, items, left_shortcut=None, right_shortcut=None, sortable=False, form_field=None) %}
+{% macro list(id, title, items, left_shortcut=None, right_shortcut=None, sortable=False) %}
 <div class="item select {{ id }}">
     <label for="{{ id }}">
         {% if left_shortcut %}
@@ -25,9 +25,5 @@
             <li class="no-match">No results</li>
         </ul>
     </div>
-
-    {% if form_field %}
-    <input type="hidden" name="{{ form_field }}" value="{{ items|map(attribute='pk')|join(',') }}">
-    {% endif %}
 </div>
 {% endmacro %}
diff --git a/pontoon/base/templatetags/helpers.py b/pontoon/base/templatetags/helpers.py
index ca419cab6d..05886ef56d 100644
--- a/pontoon/base/templatetags/helpers.py
+++ b/pontoon/base/templatetags/helpers.py
@@ -2,6 +2,8 @@
 import html
 import json
 
+from datetime import timedelta
+
 import markupsafe
 
 from allauth.socialaccount import providers
@@ -15,6 +17,7 @@
 from django.contrib.staticfiles.storage import staticfiles_storage
 from django.core.serializers.json import DjangoJSONEncoder
 from django.urls import reverse
+from django.utils import timezone
 from django.utils.http import url_has_allowed_host_and_scheme
 
 from pontoon.base.fluent import get_simple_preview
@@ -177,6 +180,26 @@ def format_timedelta(value):
         return "---"
 
 
+@library.filter
+def format_for_inbox(date):
+    # Localize the date to the current timezone
+    date = timezone.localtime(date)
+    now = timezone.now()
+
+    if date.date() == now.date():
+        # Same day: Only show time, e.g., "13:34"
+        return date.strftime("%H:%M")
+    elif date.date() == (now - timedelta(days=1)).date():
+        # Yesterday: Yesterday and time, e.g., "Yesterday, 13:34"
+        return date.strftime("Yesterday, %H:%M")
+    elif (now - date).days < 7:
+        # Within a week: Day and time, e.g., "Monday, 13:34"
+        return date.strftime("%A, %H:%M")
+    else:
+        # Older than a week: Full date and time, e.g., "Sep 12, 13:34"
+        return date.strftime("%b %d, %H:%M")
+
+
 @register.filter
 @library.filter
 def nospam(self):
diff --git a/pontoon/localizations/urls.py b/pontoon/localizations/urls.py
index 6a6a977b3e..14f9f4eb0a 100644
--- a/pontoon/localizations/urls.py
+++ b/pontoon/localizations/urls.py
@@ -29,7 +29,7 @@
                     views.localization,
                     name="pontoon.localizations.contributors",
                 ),
-                # Project insights
+                # Localization insights
                 path(
                     "insights/",
                     views.localization,
@@ -70,7 +70,7 @@
                                 views.LocalizationContributorsView.as_view(),
                                 name="pontoon.localizations.ajax.contributors",
                             ),
-                            # Project insights
+                            # Localization insights
                             path(
                                 "insights/",
                                 views.ajax_insights,
diff --git a/pontoon/messaging/admin.py b/pontoon/messaging/admin.py
new file mode 100644
index 0000000000..8647ef423d
--- /dev/null
+++ b/pontoon/messaging/admin.py
@@ -0,0 +1,11 @@
+from django.contrib import admin
+
+from pontoon.messaging import models
+
+
+class MessageAdmin(admin.ModelAdmin):
+    list_display = ("pk", "sent_at", "sender", "subject", "body")
+    autocomplete_fields = ["sender", "recipients"]
+
+
+admin.site.register(models.Message, MessageAdmin)
diff --git a/pontoon/messaging/forms.py b/pontoon/messaging/forms.py
index 5855bf30a1..422c3c7037 100644
--- a/pontoon/messaging/forms.py
+++ b/pontoon/messaging/forms.py
@@ -2,38 +2,72 @@
 from django.core import validators
 
 from pontoon.base.forms import HtmlField
+from pontoon.base.models import Project
 
+from .models import Message
 
-class MessageForm(forms.Form):
-    notification = forms.BooleanField(required=False)
-    email = forms.BooleanField(required=False)
-    transactional = forms.BooleanField(required=False)
 
-    subject = forms.CharField()
+class MessageForm(forms.ModelForm):
     body = HtmlField()
-
-    managers = forms.BooleanField(required=False)
-    translators = forms.BooleanField(required=False)
-    contributors = forms.BooleanField(required=False)
+    send_to_myself = forms.BooleanField(required=False)
 
     locales = forms.CharField(
-        validators=[validators.validate_comma_separated_integer_list]
-    )
-    projects = forms.CharField(
-        validators=[validators.validate_comma_separated_integer_list]
+        widget=forms.Textarea(),
+        validators=[validators.validate_comma_separated_integer_list],
     )
 
-    translation_minimum = forms.IntegerField(required=False, min_value=0)
-    translation_maximum = forms.IntegerField(required=False, min_value=0)
-    translation_from = forms.DateField(required=False)
-    translation_to = forms.DateField(required=False)
+    class Meta:
+        model = Message
+        fields = [
+            "notification",
+            "email",
+            "transactional",
+            "subject",
+            "body",
+            "managers",
+            "translators",
+            "contributors",
+            "locales",
+            "projects",
+            "translation_minimum",
+            "translation_maximum",
+            "translation_from",
+            "translation_to",
+            "review_minimum",
+            "review_maximum",
+            "review_from",
+            "review_to",
+            "login_from",
+            "login_to",
+            "send_to_myself",
+        ]
+        widgets = {
+            "translation_from": forms.DateInput(attrs={"type": "date"}),
+            "translation_to": forms.DateInput(attrs={"type": "date"}),
+            "review_from": forms.DateInput(attrs={"type": "date"}),
+            "review_to": forms.DateInput(attrs={"type": "date"}),
+            "login_from": forms.DateInput(attrs={"type": "date"}),
+            "login_to": forms.DateInput(attrs={"type": "date"}),
+        }
+        labels = {
+            "translation_minimum": "Minimum",
+            "translation_maximum": "Maximum",
+            "translation_from": "From",
+            "translation_to": "To",
+            "review_minimum": "Minimum",
+            "review_maximum": "Maximum",
+            "review_from": "From",
+            "review_to": "To",
+            "login_from": "From",
+            "login_to": "To",
+        }
 
-    review_minimum = forms.IntegerField(required=False, min_value=0)
-    review_maximum = forms.IntegerField(required=False, min_value=0)
-    review_from = forms.DateField(required=False)
-    review_to = forms.DateField(required=False)
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
 
-    login_from = forms.DateField(required=False)
-    login_to = forms.DateField(required=False)
+        # Set all available Projects as selected
+        self.fields["projects"].initial = Project.objects.available()
 
-    send_to_myself = forms.BooleanField(required=False)
+        # Remove the colon from all field labels
+        for field in self.fields.values():
+            field.label_suffix = ""
diff --git a/pontoon/messaging/migrations/0001_initial.py b/pontoon/messaging/migrations/0001_initial.py
new file mode 100644
index 0000000000..0653a6e5cd
--- /dev/null
+++ b/pontoon/messaging/migrations/0001_initial.py
@@ -0,0 +1,101 @@
+# Generated by Django 4.2.11 on 2024-09-18 19:47
+
+import django.db.models.deletion
+import django.utils.timezone
+
+from django.conf import settings
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    initial = True
+
+    dependencies = [
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+        ("base", "0065_fix_projectlocale_permissions"),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name="Message",
+            fields=[
+                (
+                    "id",
+                    models.AutoField(
+                        auto_created=True,
+                        primary_key=True,
+                        serialize=False,
+                        verbose_name="ID",
+                    ),
+                ),
+                ("sent_at", models.DateTimeField(default=django.utils.timezone.now)),
+                ("notification", models.BooleanField(default=False)),
+                ("email", models.BooleanField(default=False)),
+                ("transactional", models.BooleanField(default=False)),
+                ("subject", models.CharField(max_length=255)),
+                ("body", models.TextField()),
+                ("managers", models.BooleanField(default=True)),
+                ("translators", models.BooleanField(default=True)),
+                ("contributors", models.BooleanField(default=True)),
+                (
+                    "translation_minimum",
+                    models.PositiveIntegerField(blank=True, null=True),
+                ),
+                (
+                    "translation_maximum",
+                    models.PositiveIntegerField(blank=True, null=True),
+                ),
+                ("translation_from", models.DateField(blank=True, null=True)),
+                ("translation_to", models.DateField(blank=True, null=True)),
+                ("review_minimum", models.PositiveIntegerField(blank=True, null=True)),
+                ("review_maximum", models.PositiveIntegerField(blank=True, null=True)),
+                ("review_from", models.DateField(blank=True, null=True)),
+                ("review_to", models.DateField(blank=True, null=True)),
+                ("login_from", models.DateField(blank=True, null=True)),
+                ("login_to", models.DateField(blank=True, null=True)),
+                (
+                    "locales",
+                    models.ManyToManyField(related_name="messages", to="base.locale"),
+                ),
+                (
+                    "projects",
+                    models.ManyToManyField(related_name="messages", to="base.project"),
+                ),
+                (
+                    "recipients",
+                    models.ManyToManyField(
+                        related_name="received_messages", to=settings.AUTH_USER_MODEL
+                    ),
+                ),
+                (
+                    "sender",
+                    models.ForeignKey(
+                        on_delete=django.db.models.deletion.CASCADE,
+                        related_name="messages",
+                        to=settings.AUTH_USER_MODEL,
+                    ),
+                ),
+            ],
+        ),
+        migrations.AddConstraint(
+            model_name="message",
+            constraint=models.CheckConstraint(
+                check=models.Q(
+                    ("notification", True), ("email", True), _connector="OR"
+                ),
+                name="at_least_one_message_type",
+            ),
+        ),
+        migrations.AddConstraint(
+            model_name="message",
+            constraint=models.CheckConstraint(
+                check=models.Q(
+                    ("managers", True),
+                    ("translators", True),
+                    ("contributors", True),
+                    _connector="OR",
+                ),
+                name="at_least_one_user_role",
+            ),
+        ),
+    ]
diff --git a/pontoon/messaging/migrations/__init__.py b/pontoon/messaging/migrations/__init__.py
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/pontoon/messaging/models.py b/pontoon/messaging/models.py
new file mode 100644
index 0000000000..176b4ff520
--- /dev/null
+++ b/pontoon/messaging/models.py
@@ -0,0 +1,55 @@
+from django.db import models
+from django.db.models import Q
+from django.utils import timezone
+
+from pontoon.base.models.locale import Locale
+from pontoon.base.models.project import Project
+from pontoon.base.models.user import User
+
+
+class Message(models.Model):
+    sent_at = models.DateTimeField(default=timezone.now)
+    sender = models.ForeignKey(User, models.CASCADE, related_name="messages")
+    recipients = models.ManyToManyField(User, related_name="received_messages")
+
+    notification = models.BooleanField(default=False)
+    email = models.BooleanField(default=False)
+    transactional = models.BooleanField(default=False)
+
+    subject = models.CharField(max_length=255)
+    body = models.TextField()
+
+    managers = models.BooleanField(default=True)
+    translators = models.BooleanField(default=True)
+    contributors = models.BooleanField(default=True)
+
+    locales = models.ManyToManyField(Locale, related_name="messages")
+    projects = models.ManyToManyField(Project, related_name="messages")
+
+    translation_minimum = models.PositiveIntegerField(blank=True, null=True)
+    translation_maximum = models.PositiveIntegerField(blank=True, null=True)
+    translation_from = models.DateField(blank=True, null=True)
+    translation_to = models.DateField(blank=True, null=True)
+
+    review_minimum = models.PositiveIntegerField(blank=True, null=True)
+    review_maximum = models.PositiveIntegerField(blank=True, null=True)
+    review_from = models.DateField(blank=True, null=True)
+    review_to = models.DateField(blank=True, null=True)
+
+    login_from = models.DateField(blank=True, null=True)
+    login_to = models.DateField(blank=True, null=True)
+
+    class Meta:
+        constraints = [
+            models.CheckConstraint(
+                check=Q(notification=True) | Q(email=True),
+                name="at_least_one_message_type",
+            ),
+            models.CheckConstraint(
+                check=Q(managers=True) | Q(translators=True) | Q(contributors=True),
+                name="at_least_one_user_role",
+            ),
+        ]
+
+    def is_new(self):
+        return self.sent_at > timezone.now() - timezone.timedelta(minutes=1)
diff --git a/pontoon/messaging/static/css/messaging.css b/pontoon/messaging/static/css/messaging.css
index b5b0917b52..56d2a44f5a 100644
--- a/pontoon/messaging/static/css/messaging.css
+++ b/pontoon/messaging/static/css/messaging.css
@@ -4,9 +4,7 @@
   }
 
   .right-column {
-    > div:not(.selected) {
-      display: none;
-    }
+    background: transparent;
 
     section {
       padding: 20px;
@@ -14,10 +12,11 @@
   }
 
   .controls {
-    margin: 0;
+    margin: 40px 0 20px;
 
     .button {
-      width: 160px;
+      font-size: 15px;
+      padding: 10px 20px;
       .fa-chevron-left {
         margin-right: 5px;
       }
@@ -30,10 +29,6 @@
       color: inherit;
     }
 
-    .button:not(.active) {
-      background: var(--button-background-2);
-    }
-
     .right {
       float: right;
 
@@ -43,9 +38,18 @@
     }
   }
 
+  .no-results {
+    padding: 26px;
+  }
+
   #compose {
     box-sizing: border-box;
 
+    form {
+      background: var(--dark-grey-1);
+      border-radius: 6px;
+    }
+
     li:hover {
       background: inherit;
     }
@@ -62,6 +66,8 @@
     }
 
     .check-list {
+      overflow: visible;
+
       .check-box.transactional {
         display: none;
         padding-left: 20px;
@@ -80,10 +86,6 @@
         margin: 2px 10px 0 0;
         float: left;
       }
-
-      [type='checkbox'] {
-        display: none;
-      }
     }
 
     .field {
@@ -119,15 +121,15 @@
       box-sizing: border-box;
     }
 
-    input.send-to-myself {
-      display: none;
-    }
-
     textarea {
-      border-radius: 3px;
       height: 300px;
     }
 
+    input#id_send_to_myself,
+    textarea#id_body {
+      display: none;
+    }
+
     .message-content .subtitle {
       color: var(--light-grey-7);
       float: right;
@@ -142,6 +144,8 @@
   }
 
   #review {
+    display: none;
+
     p {
       color: var(--light-grey-6);
       font-size: 16px;
@@ -151,103 +155,233 @@
     p.transactional {
       margin-top: 20px;
       font-style: italic;
-      padding: 20px;
-      background: var(--background-1);
-      border-radius: 5px;
 
       i {
-        color: var(--status-translated);
+        color: var(--status-error);
       }
     }
 
-    .body {
+    > section {
+      background: var(--dark-grey-1);
+      border-radius: 6px;
+      margin-bottom: 40px;
+    }
+
+    > section:last-child {
+      margin-bottom: 0;
+    }
+
+    .subject {
       .value {
-        h1,
-        h2,
-        h3,
-        h4,
-        h5,
-        h6 {
-          color: inherit;
-          font-size: inherit;
-          font-style: inherit;
-          font-weight: bold;
-          letter-spacing: inherit;
-          margin: inherit;
-          padding-bottom: 1em;
-          text-transform: inherit;
-        }
+        color: var(--white-1);
+        font-size: 20px;
+        font-weight: bold;
+        margin-bottom: 14px;
+      }
+    }
 
-        h1 {
-          font-size: 2em;
-        }
+    .recipients {
+      > div:not(:last-child) {
+        margin-bottom: 20px;
+      }
 
-        h2 {
-          font-size: 1.8em;
-        }
+      h5 {
+        color: var(--light-grey-6);
+        font-size: 16px;
+      }
 
-        h3 {
-          font-size: 1.5em;
-        }
+      .value {
+        font-weight: 100;
+      }
 
-        h4 {
-          font-size: 1.3em;
-        }
+      .submitted-translations,
+      .performed-reviews,
+      .last-login {
+        display: none;
+      }
+    }
+  }
 
-        h5 {
-          font-size: 1.15em;
-        }
+  #sent {
+    background: var(--black-3);
+
+    .no {
+      padding: 20px;
+      text-align: center;
 
-        p {
-          padding-bottom: 1em;
+      .icon {
+        color: var(--light-grey-1);
+        font-size: 100px;
+      }
+
+      .title {
+        color: var(--light-grey-6);
+        font-size: 20px;
+        font-weight: 100;
+      }
+    }
+
+    ul {
+      max-height: none;
+
+      .message {
+        background: var(--dark-grey-1);
+        border-radius: 6px;
+        color: var(--light-grey-6);
+        margin-bottom: 60px;
+        padding: 20px;
+        position: relative;
+        transition: background-color 2s ease-in;
+
+        > div {
+          display: inline-block;
         }
 
-        a {
-          color: var(--status-translated);
-          font-weight: inherit;
+        .user-avatar {
+          float: left;
+          width: 68px;
         }
 
-        ol,
-        ul {
-          color: var(--light-grey-6);
+        .details {
+          width: 532px;
           font-size: 16px;
-          margin-left: 1.5em;
-          padding-bottom: 1em;
-        }
 
-        ul {
-          overflow: inherit;
-          list-style: disc;
+          .info {
+            margin-bottom: 10px;
+            font-size: 14px;
+
+            .sender {
+              color: var(--status-translated-alt);
+              width: 50%;
+            }
+
+            .types {
+              float: right;
+              text-align: right;
+              width: 50%;
+
+              i {
+                color: var(--status-translated);
+                font-size: 18px;
+                margin-left: 5px;
+              }
+            }
+          }
+
+          .subject {
+            color: var(--white-1);
+            font-size: 20px;
+            font-weight: bold;
+            margin-bottom: 14px;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+          }
         }
 
-        li {
-          color: var(--light-grey-6);
+        .footer {
+          position: absolute;
+          bottom: -25px;
+          left: 5px;
+          right: 5px;
+
+          .use-as-template {
+            color: inherit;
+            float: left;
+            text-transform: uppercase;
+
+            .fa {
+              color: var(--status-translated);
+              margin-right: 5px;
+            }
+          }
+
+          .use-as-template:hover {
+            color: var(--white-1);
+          }
+
+          time {
+            float: right;
+          }
         }
+      }
 
-        li:hover {
-          background: inherit;
-        }
+      .message.new {
+        background: var(--light-grey-1);
       }
     }
+  }
 
-    .recipients {
-      > div:not(:last-child) {
-        margin-bottom: 20px;
+  .body {
+    .value {
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        color: inherit;
+        font-size: inherit;
+        font-style: inherit;
+        font-weight: bold;
+        letter-spacing: inherit;
+        margin: inherit;
+        padding-bottom: 1em;
+        text-transform: inherit;
+      }
+
+      h1 {
+        font-size: 2em;
+      }
+
+      h2 {
+        font-size: 1.8em;
+      }
+
+      h3 {
+        font-size: 1.5em;
+      }
+
+      h4 {
+        font-size: 1.3em;
       }
 
       h5 {
-        color: var(--light-grey-6);
+        font-size: 1.15em;
+      }
+
+      p {
+        font-weight: normal;
+        line-height: 1.5em;
+      }
+
+      p:not(:last-child) {
+        padding-bottom: 1em;
+      }
+
+      a {
+        color: var(--status-translated);
+        font-weight: inherit;
+      }
+
+      ol,
+      ul {
         font-size: 16px;
+        margin-left: 1.5em;
+        padding-bottom: 1em;
       }
 
-      .value {
-        font-weight: 100;
+      ul {
+        overflow: inherit;
+        list-style: disc;
       }
 
-      .submitted-translations,
-      .performed-reviews,
-      .last-login {
-        display: none;
+      li {
+        color: var(--light-grey-6);
+      }
+
+      li:hover {
+        background: inherit;
       }
     }
   }
diff --git a/pontoon/messaging/static/js/messaging.js b/pontoon/messaging/static/js/messaging.js
index 5fa5199eb2..b25693dcac 100644
--- a/pontoon/messaging/static/js/messaging.js
+++ b/pontoon/messaging/static/js/messaging.js
@@ -3,6 +3,7 @@ $(function () {
   const converter = new showdown.Converter({
     simpleLineBreaks: true,
   });
+  let inProgress = false;
 
   function validateForm() {
     const $form = $('#send-message');
@@ -18,19 +19,19 @@ $(function () {
 
     const isValidLocale = $form.find('[name=locales]').val();
 
-    const isValidProject = $form.find('[name=projects]').val();
+    const isValidProject = $form.find('[name=projects]').val().length;
 
     const isValidTranslationMinimum = $form
-      .find('#translation-minimum')[0]
+      .find('[name=translation_minimum]')[0]
       .checkValidity();
     const isValidTranslationMaximum = $form
-      .find('#translation-maximum')[0]
+      .find('[name=translation_maximum]')[0]
       .checkValidity();
     const isValidReviewMinimum = $form
-      .find('#review-minimum')[0]
+      .find('[name=review_minimum]')[0]
       .checkValidity();
     const isValidReviewMaximum = $form
-      .find('#review-maximum')[0]
+      .find('[name=review_maximum]')[0]
       .checkValidity();
 
     $form.find('.errors').css('visibility', 'hidden');
@@ -110,7 +111,7 @@ $(function () {
     }
 
     // Subject
-    $('#review .subject p').html($('#subject').val());
+    $('#review .subject .value').html($('#id_subject').val());
 
     // Body
     const bodyValue = $('#body').val();
@@ -162,13 +163,88 @@ $(function () {
     $('#review .message-type .transactional').toggle(isTransactional);
   }
 
+  function loadPanelContent(path) {
+    if (inProgress) {
+      inProgress.abort();
+    }
+
+    const panel = container.find('.right-column');
+    const relative_path = path.split('/messaging/')[1];
+    const isSentPage = relative_path === 'sent/';
+    const menu_path = isSentPage ? '/messaging/sent/' : '/messaging/';
+
+    // Update menu selected state
+    container
+      .find(`.left-column a[href="${menu_path}"]`)
+      .parents('li')
+      .addClass('selected')
+      .siblings()
+      .removeClass('selected');
+
+    panel.empty();
+
+    inProgress = $.ajax({
+      url: `/messaging/ajax/${relative_path}`,
+      success: function (data) {
+        panel.append(data);
+
+        if (isSentPage) {
+          // Dissolve new message state
+          setTimeout(function () {
+            container.find('.message.new').removeClass('new');
+          }, 1000);
+        } else if (relative_path) {
+          // Convert body content from HTML to markdown
+          const html = $('#compose [name=body]').val();
+          const markdown = converter.makeMarkdown(html);
+          $('#body').val(markdown);
+        }
+      },
+      error: function (error) {
+        if (error.status === 0 && error.statusText !== 'abort') {
+          const message = $('<p>', {
+            class: 'no-results',
+            html: 'Oops, something went wrong.',
+          });
+
+          panel.append(message);
+        }
+      },
+    });
+  }
+
+  // Load panel content on page load
+  loadPanelContent(window.location.pathname);
+
+  // Load panel content on history change
+  window.onpopstate = function () {
+    loadPanelContent(window.location.pathname);
+  };
+
+  // Load panel content on menu click
+  container.on(
+    'click',
+    '.left-column a, .right-column .use-as-template',
+    function (e) {
+      // Keep default middle-, shift-, control- and command-click behaviour
+      if (e.which === 2 || e.metaKey || e.shiftKey || e.ctrlKey) {
+        return;
+      }
+
+      e.preventDefault();
+
+      const path = $(this).attr('href');
+      loadPanelContent(path);
+      window.history.pushState({}, '', path);
+    },
+  );
+
   // Toggle check box
-  $('.check-box').click(function () {
+  container.on('click', '.check-box', function () {
     const self = $(this);
+    const checkbox = self.find('[type=checkbox]')[0];
 
-    const name = self.data('attribute');
-    $(`[type=checkbox][name=${name}]`).click();
-
+    checkbox.checked = !checkbox.checked;
     self.toggleClass('enabled');
 
     // Toggle Transactional check box
@@ -182,14 +258,6 @@ $(function () {
     }
   });
 
-  // Make sure custom checkboxes reflect the state of the HTML checkboxes
-  // TODO: Replace checkboxes with native HTML checkboxes and style them with CSS
-  $(`[type=checkbox]`).each(function () {
-    const name = $(this).attr('name');
-    const isChecked = $(this)[0].checked;
-    $(`.check-box[data-attribute=${name}]`).toggleClass('enabled', isChecked);
-  });
-
   // Toggle between Edit and Review mode
   container.on('click', '.controls .toggle.button', function (e) {
     e.preventDefault();
@@ -227,10 +295,11 @@ $(function () {
   container.on('click', '.controls .send.button', function (e) {
     e.preventDefault();
 
-    // Distinguish between Send and Send to myself
-    $('.send-to-myself').prop('checked', $(this).is('.to-myself'));
-
     const $form = $('#send-message');
+    const sendToMyself = $(this).is('.to-myself');
+
+    // Distinguish between Send and Send to myself
+    $('#id_send_to_myself').prop('checked', sendToMyself);
 
     // Submit form
     $.ajax({
@@ -239,6 +308,9 @@ $(function () {
       data: $form.serialize(),
       success: function () {
         Pontoon.endLoader('Message sent.');
+        if (!sendToMyself) {
+          container.find('.left-column .sent a').click();
+        }
       },
       error: function () {
         Pontoon.endLoader('Oops, something went wrong.', 'error');
diff --git a/pontoon/messaging/templates/messaging/includes/compose.html b/pontoon/messaging/templates/messaging/includes/compose.html
new file mode 100644
index 0000000000..098abb9cf3
--- /dev/null
+++ b/pontoon/messaging/templates/messaging/includes/compose.html
@@ -0,0 +1,224 @@
+{% import "widgets/checkbox.html" as Checkbox %}
+{% import 'teams/widgets/multiple_team_selector.html' as multiple_team_selector %}
+{% import 'widgets/multiple_item_selector.html' as multiple_item_selector %}
+
+<div id="compose" class="selected">
+    <form id="send-message" method="POST" action="{{ url('pontoon.messaging.ajax.send_message') }}">
+        {% csrf_token %}
+        {{ form.send_to_myself }}
+
+        <section class="message-type">
+            <h3>Message type</h3>
+            <ul class="check-list">
+                {{ Checkbox.checkbox('Notification', class='notification', attribute='notification',
+                is_enabled=form.notification.value(), form_field=form.notification) }}
+                {{ Checkbox.checkbox('Email', class='email', attribute='email', is_enabled=form.email.value(),
+                form_field=form.email) }}
+                {{ Checkbox.checkbox('Transactional', class='transactional', attribute='transactional',
+                is_enabled=form.transactional.value(), form_field=form.transactional, help='Transactional emails are
+                also sent to users who have not opted in to email
+                communication. They are restricted in the type of content that can be included.') }}
+            </ul>
+            <div class="errors">
+                <p>You must select at least one message type</p>
+            </div>
+        </section>
+
+        <section class="message-content">
+            <h3>Message content</h3>
+            <div class="field clearfix subject">
+                {{ form.subject.label_tag() }}
+                {{ form.subject }}
+                <div class="errors">
+                    <p>Your message must include a subject</p>
+                </div>
+            </div>
+            <div class="field clearfix body">
+                <label for="body">Body</label>
+                <textarea cols="40" rows="10" required="" id="body"></textarea>
+                {{ form.body }}
+                <div class="subtitle">
+                    <p>Supports Markdown</p>
+                </div>
+                <div class="errors">
+                    <p>Your message must include a body</p>
+                </div>
+            </div>
+        </section>
+
+        <section class="user-roles">
+            <h3>Filter by user role</h3>
+            <ul class="check-list">
+                {{ Checkbox.checkbox('Managers', class='managers', attribute='managers',
+                is_enabled=form.managers.value(), form_field=form.managers) }}
+                {{ Checkbox.checkbox('Translators', class='translators', attribute='translators',
+                is_enabled=form.translators.value(), form_field=form.translators) }}
+                {{ Checkbox.checkbox('Contributors', class='contributors', attribute='contributors',
+                is_enabled=form.contributors.value(), form_field=form.contributors) }}
+            </ul>
+            <div class="errors">
+                <p>You must select at least one user role</p>
+            </div>
+        </section>
+
+        <section class="locale">
+            <h3>Filter by locale</h3>
+            <div class="multi-selector locale-selector">
+                <div class="clearfix">
+                    {{ multiple_team_selector.render(available_locales, selected_locales, form_field='locales') }}
+                </div>
+            </div>
+            <div class="errors">
+                <p>You must select at least one locale</p>
+            </div>
+        </section>
+
+        <section class="project">
+            <h3>Filter by project</h3>
+            <div class="multi-selector project-selector">
+                <div class="clearfix">
+                    {{ multiple_item_selector.render(available_projects, selected_projects, form_field=form.projects) }}
+                </div>
+            </div>
+            <div class="errors">
+                <p>You must select at least one project</p>
+            </div>
+        </section>
+
+        <section class="submitted-translations clearfix">
+            <h3>Filter by submitted translations</h3>
+            <div class="amount">
+                <div class="field clearfix minimum half">
+                    {{ form.translation_minimum.label_tag() }}
+                    {{ form.translation_minimum }}
+                    <div class="errors">
+                        <p>The value must be an integer</p>
+                    </div>
+                </div>
+                <div class="field clearfix maximum half">
+                    {{ form.translation_maximum.label_tag() }}
+                    {{ form.translation_maximum }}
+                    <div class="errors">
+                        <p>The value must be an integer</p>
+                    </div>
+                </div>
+            </div>
+            <div class="date">
+                <div class="field clearfix from half">
+                    {{ form.translation_from.label_tag() }}
+                    {{ form.translation_from }}
+                </div>
+                <div class="field clearfix to half">
+                    {{ form.translation_to.label_tag() }}
+                    {{ form.translation_to }}
+                </div>
+            </div>
+        </section>
+
+        <section class="performed-reviews clearfix">
+            <h3>Filter by performed reviews</h3>
+            <div class="amount">
+                <div class="field clearfix minimum half">
+                    {{ form.review_minimum.label_tag() }}
+                    {{ form.review_minimum }}
+                    <div class="errors">
+                        <p>The value must be an integer</p>
+                    </div>
+                </div>
+                <div class="field clearfix maximum half">
+                    {{ form.review_maximum.label_tag() }}
+                    {{ form.review_maximum }}
+                    <div class="errors">
+                        <p>The value must be an integer</p>
+                    </div>
+                </div>
+            </div>
+            <div class="date">
+                <div class="field clearfix from half">
+                    {{ form.review_from.label_tag() }}
+                    {{ form.review_from }}
+                </div>
+                <div class="field clearfix to half">
+                    {{ form.review_to.label_tag() }}
+                    {{ form.review_to }}
+                </div>
+            </div>
+        </section>
+
+        <section class="last-login clearfix">
+            <h3>Filter by last login</h3>
+            <div class="date">
+
+                <div class="field clearfix from half">
+                    {{ form.login_from.label_tag() }}
+                    {{ form.login_from }}
+                </div>
+                <div class="field clearfix to half">
+                    {{ form.login_to.label_tag() }}
+                    {{ form.login_to }}
+                </div>
+            </div>
+        </section>
+    </form>
+    <menu class="controls">
+        <button class="button toggle review" data-target="#review">Review message<span
+                class="fa fa-chevron-right"></span></button>
+    </menu>
+</div>
+<div id="review">
+    <section class="message-content clearfix">
+        <h3>Review message</h3>
+        <div class="content-wrapper">
+            <div class="subject">
+                <p class="value"></p>
+            </div>
+            <div class="body">
+                <div class="value"></div>
+            </div>
+        </div>
+    </section>
+    <section class="recipients clearfix">
+        <h3>Recipients</h3>
+        <div class="user-roles">
+            <h5>User roles</h5>
+            <p class="value"></p>
+        </div>
+        <div class="locales">
+            <h5>Locales</h5>
+            <p class="value"></p>
+        </div>
+        <div class="projects">
+            <h5>Projects</h5>
+            <p class="value"></p>
+        </div>
+        <div class="submitted-translations">
+            <h5>Submitted translations</h5>
+            <p class="value amount"></p>
+            <p class="value date"></p>
+        </div>
+        <div class="performed-reviews">
+            <h5>Performed reviews</h5>
+            <p class="value amount"></p>
+            <p class="value date"></p>
+        </div>
+        <div class="last-login">
+            <h5>Last login</h5>
+            <p class="value date"></p>
+        </div>
+    </section>
+    <section class="message-type clearfix">
+        <h3>Message type</h3>
+        <p class="value"></p>
+        <p class="transactional"><i>Warning:</i> Transactional emails are also sent to users who have
+            not opted in to email communication. They are restricted in the type of content that can be
+            included. When in doubt, please review with legal.</p>
+    </section>
+    <menu class="controls">
+        <button class="button toggle edit" data-target="#compose"><span class="fa fa-chevron-left"></span>Back to
+            editing</button>
+        <div class="right">
+            <button class="button send to-myself">Send test to myself</button>
+            <button class="button active send">Send</button>
+        </div>
+    </menu>
+</div>
diff --git a/pontoon/messaging/templates/messaging/includes/sent.html b/pontoon/messaging/templates/messaging/includes/sent.html
new file mode 100644
index 0000000000..fa9bb50b75
--- /dev/null
+++ b/pontoon/messaging/templates/messaging/includes/sent.html
@@ -0,0 +1,39 @@
+<div id="sent">
+    {% if sent_messages|length == 0 %}
+    <div class="no">
+        <i class="icon fa fa-envelope fa-fw"></i>
+        <p class="title">No messages sent yet.</p>
+    </div>
+    {% endif %}
+    <ul>
+        {% for message in sent_messages %}
+        <li class="message{% if message.is_new() %} new{% endif %}">
+            <div class="user-avatar">
+                <a href="{{ url('pontoon.contributors.contributor.username', message.sender.username) }}" target="_blank" rel="noopener noreferrer">
+                    <img src="{{ message.sender.gravatar_url(88) }}" height="44" width="44" class="rounded">
+                </a>
+            </div>
+            <div class="details">
+                <div class="info">
+                    <a class="sender" href="{{ url('pontoon.contributors.contributor.username', message.sender.username) }}" target="_blank" rel="noopener noreferrer">{{ message.sender.name_or_email }}</a>
+                    <span class="recipients">
+                    {% with count=message.recipients.count() %}
+                    to {{ count }} recipient{{ count|pluralize }}
+                    {% endwith %}
+                    </span>
+                    <span class="types">
+                    {% if message.notification %}<i class="type far fa-bell" title="Sent as Notification"></i>{% endif %}
+                    {% if message.email %}<i class="type far fa-envelope" title="Sent as Email"></i>{% endif %}
+                    </span>
+                </div>
+                <p class="subject">{{ message.subject }}</p>
+                <div class="body"><div class="value">{{ message.body|safe }}</div></div>
+            </div>
+            <div class="footer">
+                <a href="{{ url('pontoon.messaging.use_as_template', message.pk) }}" class="use-as-template"><i class="fa fa-pencil-alt"></i>Use as template</a>
+                <time>{{ message.sent_at|format_for_inbox }}</time>
+            </div>
+        </li>
+        {% endfor %}
+    </ul>
+</div>
diff --git a/pontoon/messaging/templates/messaging/messaging.html b/pontoon/messaging/templates/messaging/messaging.html
index 62ba10e7d3..dde5d3d0ff 100644
--- a/pontoon/messaging/templates/messaging/messaging.html
+++ b/pontoon/messaging/templates/messaging/messaging.html
@@ -1,9 +1,5 @@
 {% extends 'base.html' %}
-{% import "widgets/checkbox.html" as Checkbox %}
 {% import 'heading.html' as Heading %}
-{% import "contributors/widgets/notifications_menu.html" as Notifications with context %}
-{% import 'teams/widgets/multiple_team_selector.html' as multiple_team_selector %}
-{% import 'widgets/multiple_item_selector.html' as multiple_item_selector %}
 
 {% block title %}Messaging Center{% endblock %}
 
@@ -14,252 +10,25 @@
 {% endblock %}
 
 {% block bottom %}
+{% set current_page = request.path.split('/')[2]|default('') %}
 <section id="main">
     <div class="container">
         <section class="clearfix">
             <div class="menu permanent left-column">
                 <ul>
-                    <li class="selected">
-                        <a href="#compose" data-target="#compose">Compose</a>
+                    <li class="compose{% if current_page == '' %} selected{% endif %}">
+                        <a href="{{ url('pontoon.messaging.compose') }}">Compose</a>
                     </li>
-                    <li class="horizontal-separator"></li>
-                    <li>
-                        <a href="#sent" data-target="#sent">
+                    <li class="sent{% if current_page == 'sent' %} selected{% endif %}">
+                        <a href="{{ url('pontoon.messaging.sent') }}">
                             <span class="name">Sent</span>
-                            <span class="count">{{ messages|length }}</span>
+                            <span class="count">{{ count }}</span>
                         </a>
                     </li>
                 </ul>
             </div>
 
             <div class="menu permanent right-column">
-                <div id="compose" class="selected">
-                    <form id="send-message" method="POST" action="{{ url('pontoon.messaging.send_message') }}">
-                        {% csrf_token %}
-                        <input type="checkbox" class="send-to-myself" name="send_to_myself">
-
-                        <section class="message-type">
-                            <h3>Message type</h3>
-                            <ul class="check-list">
-                                {{ Checkbox.checkbox('Notification', class='notification', attribute='notification') }}
-                                <li><input type="checkbox" name="notification"></li>
-                                {{ Checkbox.checkbox('Email', class='email', attribute='email') }}
-                                <li><input type="checkbox" name="email"></li>
-                                {{ Checkbox.checkbox('Transactional', class='transactional', attribute='transactional',
-                                help='Transactional emails are also sent to users who have not opted in to email
-                                communication. They are restricted in the type of content that can be included.') }}
-                                <li class="transactional"><input type="checkbox" name="transactional"></li>
-                            </ul>
-                            <div class="errors">
-                                <p>You must select at least one message type</p>
-                            </div>
-                        </section>
-
-                        <section class="message-content">
-                            <h3>Message content</h3>
-                            <div class="field clearfix subject">
-                                <label for="subject">Subject</label>
-                                <input type="text" name="subject" required="" id="subject">
-                                <div class="errors">
-                                    <p>Your message must include a subject</p>
-                                </div>
-                            </div>
-                            <div class="field clearfix body">
-                                <label for="body">Body</label>
-                                <textarea cols="40" rows="10" required="" id="body"></textarea>
-                                <textarea name="body" class="hidden"></textarea>
-                                <div class="subtitle">
-                                    <p>Supports Markdown</p>
-                                </div>
-                                <div class="errors">
-                                    <p>Your message must include a body</p>
-                                </div>
-                            </div>
-                        </section>
-
-                        <section class="user-roles">
-                            <h3>Filter by user role</h3>
-                            <ul class="check-list">
-                                {{ Checkbox.checkbox('Managers', class='managers', attribute='managers',
-                                is_enabled=True) }}
-                                <li><input type="checkbox" name="managers" checked="checked"></li>
-                                {{ Checkbox.checkbox('Translators', class='translators', attribute='translators',
-                                is_enabled=True) }}
-                                <li><input type="checkbox" name="translators" checked="checked"></li>
-                                {{ Checkbox.checkbox('Contributors', class='contributors', attribute='contributors',
-                                is_enabled=True) }}
-                                <li><input type="checkbox" name="contributors" checked="checked"></li>
-                            </ul>
-                            <div class="errors">
-                                <p>You must select at least one user role</p>
-                            </div>
-                        </section>
-
-                        <section class="locale">
-                            <h3>Filter by locale</h3>
-                            <div class="multi-selector locale-selector">
-                                <div class="clearfix">
-                                    {{ multiple_team_selector.render([], available_locales, form_field='locales') }}
-                                </div>
-                            </div>
-                            <div class="errors">
-                                <p>You must select at least one locale</p>
-                            </div>
-                        </section>
-
-                        <section class="project">
-                            <h3>Filter by project</h3>
-                            <div class="multi-selector project-selector">
-                                <div class="clearfix">
-                                    {{ multiple_item_selector.render([], available_projects, form_field='projects') }}
-                                </div>
-                            </div>
-                            <div class="errors">
-                                <p>You must select at least one project</p>
-                            </div>
-                        </section>
-
-                        <section class="submitted-translations clearfix">
-                            <h3>Filter by submitted translations</h3>
-                            <div class="amount">
-                                <div class="field clearfix minimum half">
-                                    <label for="translation-minimum">Minimum</label>
-                                    <input type="number" min="0" name="translation_minimum" id="translation-minimum">
-                                    <div class="errors">
-                                        <p>The value must be an integer</p>
-                                    </div>
-                                </div>
-                                <div class="field clearfix maximum half">
-                                    <label for="translation-maximum">Maximum</label>
-                                    <input type="number" min="0" name="translation_maximum" id="translation-maximum">
-                                    <div class="errors">
-                                        <p>The value must be an integer</p>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="date">
-                                <div class="field clearfix from half">
-                                    <label for="translation-from">From</label>
-                                    <input type="date" name="translation_from" id="translation-from">
-                                </div>
-                                <div class="field clearfix to half">
-                                    <label for="translation-to">To</label>
-                                    <input type="date" name="translation_to" id="translation-to">
-                                </div>
-                            </div>
-                        </section>
-
-                        <section class="performed-reviews clearfix">
-                            <h3>Filter by performed reviews</h3>
-                            <div class="amount">
-                                <div class="field clearfix minimum half">
-                                    <label for="review-minimum">Minimum</label>
-                                    <input type="number" min="0" name="review_minimum" id="review-minimum">
-                                    <div class="errors">
-                                        <p>The value must be an integer</p>
-                                    </div>
-                                </div>
-                                <div class="field clearfix maximum half">
-                                    <label for="review-maximum">Maximum</label>
-                                    <input type="number" min="0" name="review_maximum" id="review-maximum">
-                                    <div class="errors">
-                                        <p>The value must be an integer</p>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="date">
-                                <div class="field clearfix from half">
-                                    <label for="review-from">From</label>
-                                    <input type="date" name="review_from" id="review-from">
-                                </div>
-                                <div class="field clearfix to half">
-                                    <label for="review-to">To</label>
-                                    <input type="date" name="review_to" id="review-to">
-                                </div>
-                            </div>
-                        </section>
-
-                        <section class="last-login clearfix">
-                            <h3>Filter by last login</h3>
-                            <div class="date">
-
-                                <div class="field clearfix from half">
-                                    <label for="login-from">From</label>
-                                    <input type="date" name="login_from" id="login-from">
-                                </div>
-                                <div class="field clearfix to half">
-                                    <label for="login-to">To</label>
-                                    <input type="date" name="login_to" id="login-to">
-                                </div>
-                            </div>
-                        </section>
-
-                        <section class="clearfix">
-                            <menu class="controls">
-                                <button class="button toggle review" data-target="#review">Review message<span
-                                        class="fa fa-chevron-right"></span></button>
-                            </menu>
-                        </section>
-                    </form>
-                </div>
-                <div id="review">
-                    <section class="subject clearfix">
-                        <h3>Subject</h3>
-                        <p></p>
-                    </section>
-                    <section class="body clearfix">
-                        <h3>Body</h3>
-                        <div class="value"></div>
-                    </section>
-                    <section class="recipients clearfix">
-                        <h3>Recipients</h3>
-                        <div class="user-roles">
-                            <h5>User roles</h5>
-                            <p class="value"></p>
-                        </div>
-                        <div class="locales">
-                            <h5>Locales</h5>
-                            <p class="value"></p>
-                        </div>
-                        <div class="projects">
-                            <h5>Projects</h5>
-                            <p class="value"></p>
-                        </div>
-                        <div class="submitted-translations">
-                            <h5>Submitted translations</h5>
-                            <p class="value amount"></p>
-                            <p class="value date"></p>
-                        </div>
-                        <div class="performed-reviews">
-                            <h5>Performed reviews</h5>
-                            <p class="value amount"></p>
-                            <p class="value date"></p>
-                        </div>
-                        <div class="last-login">
-                            <h5>Last login</h5>
-                            <p class="value date"></p>
-                        </div>
-                    </section>
-                    <section class="message-type clearfix">
-                        <h3>Message type</h3>
-                        <p class="value"></p>
-                        <p class="transactional"><i>Warning:</i> Transactional emails are also sent to users who have
-                            not opted in to email communication. They are restricted in the type of content that can be
-                            included. When in doubt, please review with legal.</p>
-                    </section>
-                    <section class="clearfix">
-                        <menu class="controls">
-                            <button class="button toggle edit" data-target="#compose"><span
-                                    class="fa fa-chevron-left"></span>Back to editing</button>
-                            <div class="right">
-                                <button class="button send to-myself">Send to myself</button>
-                                <button class="button active send">Send</button>
-                            </div>
-                        </menu>
-                    </section>
-                </div>
-                <div id="sent">
-                </div>
             </div>
         </section>
     </div>
diff --git a/pontoon/messaging/urls.py b/pontoon/messaging/urls.py
index 434b55d6df..a5a5ce3eb6 100644
--- a/pontoon/messaging/urls.py
+++ b/pontoon/messaging/urls.py
@@ -1,4 +1,4 @@
-from django.urls import path
+from django.urls import include, path
 
 from . import views
 
@@ -7,13 +7,60 @@
     # Messaging center
     path(
         "messaging/",
-        views.messaging,
-        name="pontoon.messaging",
-    ),
-    path(
-        "send-message/",
-        views.send_message,
-        name="pontoon.messaging.send_message",
+        include(
+            [
+                # Compose
+                path(
+                    "",
+                    views.messaging,
+                    name="pontoon.messaging.compose",
+                ),
+                # Edit as new
+                path(
+                    "<int:pk>/",
+                    views.messaging,
+                    name="pontoon.messaging.use_as_template",
+                ),
+                # Sent
+                path(
+                    "sent/",
+                    views.messaging,
+                    name="pontoon.messaging.sent",
+                ),
+                # AJAX views
+                path(
+                    "ajax/",
+                    include(
+                        [
+                            # Compose
+                            path(
+                                "",
+                                views.ajax_compose,
+                                name="pontoon.messaging.ajax.compose",
+                            ),
+                            # Edit as new
+                            path(
+                                "<int:pk>/",
+                                views.ajax_use_as_template,
+                                name="pontoon.messaging.ajax.use_as_template",
+                            ),
+                            # Sent
+                            path(
+                                "sent/",
+                                views.ajax_sent,
+                                name="pontoon.messaging.ajax.sent",
+                            ),
+                            # Send message
+                            path(
+                                "send/",
+                                views.send_message,
+                                name="pontoon.messaging.ajax.send_message",
+                            ),
+                        ]
+                    ),
+                ),
+            ]
+        ),
     ),
     # Email consent
     path(
diff --git a/pontoon/messaging/views.py b/pontoon/messaging/views.py
index 5180f72ada..b6b661bd97 100644
--- a/pontoon/messaging/views.py
+++ b/pontoon/messaging/views.py
@@ -20,12 +20,13 @@
 from pontoon.base.models import Locale, Project, Translation, UserProfile
 from pontoon.base.utils import require_AJAX, split_ints
 from pontoon.messaging import forms, utils
+from pontoon.messaging.models import Message
 
 
 log = logging.getLogger(__name__)
 
 
-def messaging(request):
+def messaging(request, pk=None):
     if not request.user.has_perm("base.can_manage_project"):
         raise PermissionDenied
 
@@ -33,8 +34,63 @@ def messaging(request):
         request,
         "messaging/messaging.html",
         {
-            "available_locales": Locale.objects.available(),
-            "available_projects": Project.objects.available().order_by("name"),
+            "count": Message.objects.count(),
+        },
+    )
+
+
+@require_AJAX
+def ajax_compose(request):
+    if not request.user.has_perm("base.can_manage_project"):
+        raise PermissionDenied
+
+    return render(
+        request,
+        "messaging/includes/compose.html",
+        {
+            "form": forms.MessageForm(),
+            "available_locales": [],
+            "selected_locales": Locale.objects.available(),
+            "available_projects": [],
+            "selected_projects": Project.objects.available().order_by("name"),
+        },
+    )
+
+
+@require_AJAX
+def ajax_use_as_template(request, pk):
+    if not request.user.has_perm("base.can_manage_project"):
+        raise PermissionDenied
+
+    message = get_object_or_404(Message, pk=pk)
+
+    return render(
+        request,
+        "messaging/includes/compose.html",
+        {
+            "form": forms.MessageForm(instance=message),
+            "available_locales": Locale.objects.available().exclude(
+                pk__in=message.locales.all()
+            ),
+            "selected_locales": message.locales.all(),
+            "available_projects": Project.objects.available().exclude(
+                pk__in=message.projects.all()
+            ),
+            "selected_projects": message.projects.all().order_by("name"),
+        },
+    )
+
+
+@require_AJAX
+def ajax_sent(request):
+    if not request.user.has_perm("base.can_manage_project"):
+        raise PermissionDenied
+
+    return render(
+        request,
+        "messaging/includes/sent.html",
+        {
+            "sent_messages": Message.objects.order_by("-sent_at"),
         },
     )
 
@@ -49,7 +105,7 @@ def get_recipients(form):
     - Translators of selected Locales
     """
     locale_ids = sorted(split_ints(form.cleaned_data.get("locales")))
-    project_ids = sorted(split_ints(form.cleaned_data.get("projects")))
+    project_ids = form.cleaned_data.get("projects")
     translations = Translation.objects.filter(
         locale_id__in=locale_ids,
         entity__resource__project_id__in=project_ids,
@@ -168,21 +224,22 @@ def send_message(request):
     form = forms.MessageForm(request.POST)
 
     if not form.is_valid():
-        return JsonResponse(dict(form.errors.items()))
+        return JsonResponse(dict(form.errors.items()), status=400)
+
+    send_to_myself = form.cleaned_data.get("send_to_myself")
+    recipients = User.objects.filter(pk=request.user.pk)
 
-    if form.cleaned_data.get("send_to_myself"):
-        recipients = User.objects.filter(pk=request.user.pk)
-    else:
+    """
+    While the feature is in development, messages are sent only to the current user.
+    TODO: Uncomment lines below when the feature is ready.
+    if not send_to_myself:
         recipients = get_recipients(form)
+    """
 
     log.info(
         f"{recipients.count()} Recipients: {list(recipients.values_list('email', flat=True))}"
     )
 
-    # While the feature is in development, notifications and emails are sent only to the current user.
-    # TODO: Remove this line when the feature is ready
-    recipients = User.objects.filter(pk=request.user.pk)
-
     is_notification = form.cleaned_data.get("notification")
     is_email = form.cleaned_data.get("email")
     is_transactional = form.cleaned_data.get("transactional")
@@ -236,6 +293,21 @@ def send_message(request):
             f"Email sent to the following {email_recipients.count()} users: {email_recipients.values_list('email', flat=True)}."
         )
 
+    if not send_to_myself:
+        message = form.save(commit=False)
+        message.sender = request.user
+        message.save()
+
+        message.recipients.set(recipients)
+
+        locale_ids = sorted(split_ints(form.cleaned_data.get("locales")))
+        locales = Locale.objects.filter(pk__in=locale_ids)
+        message.locales.set(locales)
+
+        project_ids = form.cleaned_data.get("projects")
+        projects = Project.objects.filter(pk__in=project_ids)
+        message.projects.set(projects)
+
     return JsonResponse(
         {
             "status": True,
diff --git a/pontoon/settings/base.py b/pontoon/settings/base.py
index 327290db6a..8c294504ca 100644
--- a/pontoon/settings/base.py
+++ b/pontoon/settings/base.py
@@ -705,7 +705,6 @@ def _default_from_email():
     "messaging": {
         "source_filenames": (
             "js/lib/showdown.js",
-            "js/sidebar_menu.js",
             "js/multiple_team_selector.js",
             "js/multiple_item_selector.js",
             "js/messaging.js",
diff --git a/pontoon/urls.py b/pontoon/urls.py
index 8968417d84..8cf369f242 100644
--- a/pontoon/urls.py
+++ b/pontoon/urls.py
@@ -55,13 +55,13 @@ class LocaleConverter(StringConverter):
     # Include URL configurations from installed apps
     path("terminology/", include("pontoon.terminology.urls")),
     path("translations/", include("pontoon.translations.urls")),
+    path("", include("pontoon.messaging.urls")),
     path("", include("pontoon.teams.urls")),
     path("", include("pontoon.tour.urls")),
     path("", include("pontoon.tags.urls")),
     path("", include("pontoon.sync.urls")),
     path("", include("pontoon.projects.urls")),
     path("", include("pontoon.machinery.urls")),
-    path("", include("pontoon.messaging.urls")),
     path("", include("pontoon.insights.urls")),
     path("", include("pontoon.contributors.urls")),
     path("", include("pontoon.localizations.urls")),