diff --git a/src/boot/routes.js b/src/boot/routes.js
index 63dd1297d..2dc900e7e 100644
--- a/src/boot/routes.js
+++ b/src/boot/routes.js
@@ -24,6 +24,7 @@ import Lists from 'components/lists/lists.vue'
 import ListsTimeline from 'components/lists_timeline/lists_timeline.vue'
 import ListsEdit from 'components/lists_edit/lists_edit.vue'
 import NavPanel from 'src/components/nav_panel/nav_panel.vue'
+import AnnouncementsPage from 'components/announcements_page/announcements_page.vue'
 
 export default (store) => {
   const validateAuthenticatedRoute = (to, from, next) => {
@@ -76,6 +77,7 @@ export default (store) => {
     { name: 'search', path: '/search', component: Search, props: (route) => ({ query: route.query.query }) },
     { name: 'who-to-follow', path: '/who-to-follow', component: WhoToFollow, beforeEnter: validateAuthenticatedRoute },
     { name: 'about', path: '/about', component: About },
+    { name: 'announcements', path: '/announcements', component: AnnouncementsPage },
     { name: 'user-profile', path: '/users/:name', component: UserProfile },
     { name: 'legacy-user-profile', path: '/:name', component: UserProfile },
     { name: 'lists', path: '/lists', component: Lists },
diff --git a/src/components/announcement/announcement.js b/src/components/announcement/announcement.js
new file mode 100644
index 000000000..595f3b4e0
--- /dev/null
+++ b/src/components/announcement/announcement.js
@@ -0,0 +1,13 @@
+
+const Announcement = {
+  props: {
+    announcement: Object
+  },
+  computed: {
+    content () {
+      return this.announcement.content
+    }
+  }
+}
+
+export default Announcement
diff --git a/src/components/announcement/announcement.vue b/src/components/announcement/announcement.vue
new file mode 100644
index 000000000..c31328ee6
--- /dev/null
+++ b/src/components/announcement/announcement.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="announcement">
+    <rich-content :html="content" />
+  </div>
+</template>
+
+<script src="./announcement.js"></script>
+
+<style lang="scss">
+@import "../../variables";
+
+.announcement {
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  border-bottom-color: var(--border, $fallback--border);
+  border-radius: 0;
+  padding: var(--status-margin, $status-margin);
+}
+</style>
diff --git a/src/components/announcements_page/announcements_page.js b/src/components/announcements_page/announcements_page.js
new file mode 100644
index 000000000..716468e6a
--- /dev/null
+++ b/src/components/announcements_page/announcements_page.js
@@ -0,0 +1,42 @@
+import Announcement from '../announcement/announcement.vue'
+
+const AnnouncementsPage = {
+  components: {
+    Announcement
+  },
+  computed: {
+    announcements () {
+      return [{
+        "id": "8",
+        "content": "<p>Looks like there was an issue processing audio attachments without embedded art since yesterday due to an experimental new feature. That issue has now been fixed, so you may see older posts with audio from other servers pop up in your feeds now as they are being finally properly processed. Sorry!</p>",
+        "starts_at": null,
+        "ends_at": null,
+        "all_day": false,
+        "published_at": "2020-07-03T01:27:38.726Z",
+        "updated_at": "2020-07-03T01:27:38.752Z",
+        "read": true,
+        "mentions": [],
+        "statuses": [],
+        "tags": [],
+        "emojis": [],
+        "reactions": []
+      }, {
+        "id": "8",
+        "content": "<p>Looks like there was an issue processing audio attachments without embedded art since yesterday due to an experimental new feature. That issue has now been fixed, so you may see older posts with audio from other servers pop up in your feeds now as they are being finally properly processed. Sorry!</p>",
+        "starts_at": null,
+        "ends_at": null,
+        "all_day": false,
+        "published_at": "2020-07-03T01:27:38.726Z",
+        "updated_at": "2020-07-03T01:27:38.752Z",
+        "read": true,
+        "mentions": [],
+        "statuses": [],
+        "tags": [],
+        "emojis": [],
+        "reactions": []
+      }]
+    }
+  }
+}
+
+export default AnnouncementsPage
diff --git a/src/components/announcements_page/announcements_page.vue b/src/components/announcements_page/announcements_page.vue
new file mode 100644
index 000000000..16b2f955f
--- /dev/null
+++ b/src/components/announcements_page/announcements_page.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="panel panel-default announcements-page">
+    <div class="panel-heading">
+      <span>
+        {{ $t('announcements.page_header') }}
+      </span>
+    </div>
+    <div class="panel-body">
+      <section
+        v-for="announcement in announcements"
+        :key="announcement.id"
+      >
+        <announcement
+          :announcement="announcement"
+        />
+      </section>
+    </div>
+  </div>
+</template>
+
+<script src="./announcements_page.js"></script>
diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
index b54f2fa28..66c8a4cde 100644
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@@ -18,7 +18,8 @@ import {
   faBell,
   faInfoCircle,
   faStream,
-  faList
+  faList,
+  faBullhorn
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
@@ -32,7 +33,8 @@ library.add(
   faBell,
   faInfoCircle,
   faStream,
-  faList
+  faList,
+  faBullhorn
 )
 const NavPanel = {
   props: ['forceExpand', 'forceEditMode'],
diff --git a/src/components/navigation/navigation.js b/src/components/navigation/navigation.js
index f66dd9815..4541e60b2 100644
--- a/src/components/navigation/navigation.js
+++ b/src/components/navigation/navigation.js
@@ -71,5 +71,10 @@ export const ROOT_ITEMS = {
     anon: true,
     icon: 'info-circle',
     label: 'nav.about'
+  },
+  announcements: {
+    route: 'announcements',
+    icon: 'bullhorn',
+    label: 'nav.announcements'
   }
 }
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index cbeafdd2a..dccb8ab70 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -191,6 +191,19 @@
             /> {{ $t("nav.administration") }}
           </a>
         </li>
+        <li
+          @click="toggleDrawer"
+        >
+          <router-link
+            :to="{ name: 'announcements' }"
+          >
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="bullhorn"
+            /> {{ $t("nav.announcements") }}
+          </router-link>
+        </li>
         <li
           v-if="currentUser"
           @click="toggleDrawer"