diff --git a/app/components/Notice.ts b/app/components/Notice.ts
deleted file mode 100644
index a0a4d1d7d..000000000
--- a/app/components/Notice.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import styled from "styled-components";
-
-const Notice = styled.p`
-  background: ${(props) => props.theme.sidebarBackground};
-  color: ${(props) => props.theme.sidebarText};
-  padding: 10px 12px;
-  border-radius: 4px;
-  position: relative;
-`;
-
-export default Notice;
diff --git a/app/components/Notice.tsx b/app/components/Notice.tsx
new file mode 100644
index 000000000..8fff91d67
--- /dev/null
+++ b/app/components/Notice.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import styled from "styled-components";
+import Flex from "./Flex";
+import Text from "./Text";
+
+type Props = {
+  children: React.ReactNode;
+  icon?: JSX.Element;
+  description?: JSX.Element;
+};
+
+const Notice = ({ children, icon, description }: Props) => {
+  return (
+    <Container>
+      <Flex as="span" gap={8}>
+        {icon}
+        <span>
+          <Title>{children}</Title>
+          {description && (
+            <>
+              <br />
+              {description}
+            </>
+          )}
+        </span>
+      </Flex>
+    </Container>
+  );
+};
+
+const Title = styled.span`
+  font-weight: 500;
+  font-size: 16px;
+`;
+
+const Container = styled(Text)`
+  background: ${(props) => props.theme.sidebarBackground};
+  color: ${(props) => props.theme.sidebarText};
+  padding: 10px 12px;
+  border-radius: 4px;
+  position: relative;
+  font-size: 14px;
+  margin: 1em 0 0;
+
+  svg {
+    flex-shrink: 0;
+  }
+`;
+
+export default Notice;
diff --git a/app/scenes/Document/components/Document.tsx b/app/scenes/Document/components/Document.tsx
index 690fb737c..83ab850f9 100644
--- a/app/scenes/Document/components/Document.tsx
+++ b/app/scenes/Document/components/Document.tsx
@@ -1,10 +1,9 @@
 import { debounce } from "lodash";
 import { action, observable } from "mobx";
 import { observer } from "mobx-react";
-import { InputIcon } from "outline-icons";
 import { AllSelection } from "prosemirror-state";
 import * as React from "react";
-import { WithTranslation, Trans, withTranslation } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import {
   Prompt,
   Route,
@@ -26,11 +25,9 @@ import ErrorBoundary from "~/components/ErrorBoundary";
 import Flex from "~/components/Flex";
 import LoadingIndicator from "~/components/LoadingIndicator";
 import Modal from "~/components/Modal";
-import Notice from "~/components/Notice";
 import PageTitle from "~/components/PageTitle";
 import PlaceholderDocument from "~/components/PlaceholderDocument";
 import RegisterKeyDown from "~/components/RegisterKeyDown";
-import Time from "~/components/Time";
 import withStores from "~/components/withStores";
 import { NavigationNode } from "~/types";
 import { client } from "~/utils/ApiClient";
@@ -50,6 +47,7 @@ import Editor from "./Editor";
 import Header from "./Header";
 import KeyboardShortcutsButton from "./KeyboardShortcutsButton";
 import MarkAsViewed from "./MarkAsViewed";
+import Notices from "./Notices";
 import PublicReferences from "./PublicReferences";
 import References from "./References";
 
@@ -534,52 +532,7 @@ class DocumentScene extends React.Component<Props> {
               column
               auto
             >
-              {document.isTemplate && !readOnly && (
-                <Notice>
-                  <Trans>
-                    You’re editing a template. Highlight some text and use the{" "}
-                    <PlaceholderIcon color="currentColor" /> control to add
-                    placeholders that can be filled out when creating new
-                    documents from this template.
-                  </Trans>
-                </Notice>
-              )}
-              {document.archivedAt && !document.deletedAt && (
-                <Notice>
-                  {t("Archived by {{userName}}", {
-                    userName: document.updatedBy.name,
-                  })}{" "}
-                  <Time dateTime={document.updatedAt} addSuffix />
-                </Notice>
-              )}
-              {document.deletedAt && (
-                <Notice>
-                  <strong>
-                    {t("Deleted by {{userName}}", {
-                      userName: document.updatedBy.name,
-                    })}{" "}
-                    <Time dateTime={document.deletedAt || ""} addSuffix />
-                  </strong>
-                  {document.permanentlyDeletedAt && (
-                    <>
-                      <br />
-                      {document.template ? (
-                        <Trans>
-                          This template will be permanently deleted in{" "}
-                          <Time dateTime={document.permanentlyDeletedAt} />{" "}
-                          unless restored.
-                        </Trans>
-                      ) : (
-                        <Trans>
-                          This document will be permanently deleted in{" "}
-                          <Time dateTime={document.permanentlyDeletedAt} />{" "}
-                          unless restored.
-                        </Trans>
-                      )}
-                    </>
-                  )}
-                </Notice>
-              )}
+              <Notices document={document} readOnly={readOnly} />
               <React.Suspense fallback={<PlaceholderDocument />}>
                 <Flex auto={!readOnly}>
                   {showContents && (
@@ -651,11 +604,6 @@ class DocumentScene extends React.Component<Props> {
   }
 }
 
-const PlaceholderIcon = styled(InputIcon)`
-  position: relative;
-  top: 6px;
-`;
-
 const Background = styled(Container)`
   background: ${(props) => props.theme.background};
   transition: ${(props) => props.theme.backgroundTransition};
@@ -677,9 +625,6 @@ type MaxWidthProps = {
 };
 
 const MaxWidth = styled(Flex)<MaxWidthProps>`
-  ${(props) =>
-    props.archived && `* { color: ${props.theme.textSecondary} !important; } `};
-
   // Adds space to the gutter to make room for heading annotations
   padding: 0 32px;
   transition: padding 100ms;
diff --git a/app/scenes/Document/components/Editor.tsx b/app/scenes/Document/components/Editor.tsx
index c106aea9e..9a4d9175a 100644
--- a/app/scenes/Document/components/Editor.tsx
+++ b/app/scenes/Document/components/Editor.tsx
@@ -101,9 +101,7 @@ function DocumentEditor(props: Props, ref: React.RefObject<any>) {
         onGoToNextInput={handleGoToNextInput}
         onChange={onChangeTitle}
         starrable={!shareId}
-        placeholder={
-          document.isTemplate ? t("Name your template…") : t("Untitled")
-        }
+        placeholder={t("Untitled")}
       />
       {!shareId && (
         <DocumentMetaWithViews
diff --git a/app/scenes/Document/components/Notices.tsx b/app/scenes/Document/components/Notices.tsx
new file mode 100644
index 000000000..868a373fb
--- /dev/null
+++ b/app/scenes/Document/components/Notices.tsx
@@ -0,0 +1,80 @@
+import { TrashIcon, ArchiveIcon, ShapesIcon, InputIcon } from "outline-icons";
+import * as React from "react";
+import { Trans, useTranslation } from "react-i18next";
+import styled from "styled-components";
+import Document from "~/models/Document";
+import Notice from "~/components/Notice";
+import Time from "~/components/Time";
+
+type Props = {
+  document: Document;
+  readOnly: boolean;
+};
+
+export default function Notices({ document, readOnly }: Props) {
+  const { t } = useTranslation();
+
+  function permanentlyDeletedDescription() {
+    if (!document.permanentlyDeletedAt) {
+      return;
+    }
+
+    return document.template ? (
+      <Trans>
+        This template will be permanently deleted in{" "}
+        <Time dateTime={document.permanentlyDeletedAt} /> unless restored.
+      </Trans>
+    ) : (
+      <Trans>
+        This document will be permanently deleted in{" "}
+        <Time dateTime={document.permanentlyDeletedAt} /> unless restored.
+      </Trans>
+    );
+  }
+
+  return (
+    <>
+      {document.isTemplate && !readOnly && (
+        <Notice
+          icon={<ShapesIcon />}
+          description={
+            <Trans>
+              Highlight some text and use the{" "}
+              <PlaceholderIcon color="currentColor" /> control to add
+              placeholders that can be filled out when creating new documents
+            </Trans>
+          }
+        >
+          {t("You’re editing a template")}
+        </Notice>
+      )}
+      {document.archivedAt && !document.deletedAt && (
+        <Notice icon={<ArchiveIcon />}>
+          {t("Archived by {{userName}}", {
+            userName: document.updatedBy.name,
+          })}
+          &nbsp;
+          <Time dateTime={document.updatedAt} addSuffix />
+        </Notice>
+      )}
+      {document.deletedAt && (
+        <Notice
+          icon={<TrashIcon />}
+          description={permanentlyDeletedDescription()}
+        >
+          {t("Deleted by {{userName}}", {
+            userName: document.updatedBy.name,
+          })}
+          &nbsp;
+          <Time dateTime={document.deletedAt} addSuffix />
+        </Notice>
+      )}
+    </>
+  );
+}
+
+const PlaceholderIcon = styled(InputIcon)`
+  position: relative;
+  top: 6px;
+  margin-top: -6px;
+`;
diff --git a/shared/i18n/locales/en_US/translation.json b/shared/i18n/locales/en_US/translation.json
index 05fe869f3..762618d16 100644
--- a/shared/i18n/locales/en_US/translation.json
+++ b/shared/i18n/locales/en_US/translation.json
@@ -364,14 +364,11 @@
   "Add groups to {{ collectionName }}": "Add groups to {{ collectionName }}",
   "Add people to {{ collectionName }}": "Add people to {{ collectionName }}",
   "Document updated by {{userName}}": "Document updated by {{userName}}",
-  "You have unsaved changes.\nAre you sure you want to discard them?": "You have unsaved changes.\nAre you sure you want to discard them?",
-  "Images are still uploading.\nAre you sure you want to discard them?": "Images are still uploading.\nAre you sure you want to discard them?",
-  "You’re editing a template. Highlight some text and use the <2></2> control to add placeholders that can be filled out when creating new documents from this template.": "You’re editing a template. Highlight some text and use the <2></2> control to add placeholders that can be filled out when creating new documents from this template.",
-  "Archived by {{userName}}": "Archived by {{userName}}",
-  "Deleted by {{userName}}": "Deleted by {{userName}}",
   "This template will be permanently deleted in <2></2> unless restored.": "This template will be permanently deleted in <2></2> unless restored.",
   "This document will be permanently deleted in <2></2> unless restored.": "This document will be permanently deleted in <2></2> unless restored.",
-  "Name your template…": "Name your template…",
+  "You have unsaved changes.\nAre you sure you want to discard them?": "You have unsaved changes.\nAre you sure you want to discard them?",
+  "Images are still uploading.\nAre you sure you want to discard them?": "Images are still uploading.\nAre you sure you want to discard them?",
+  "Untitled template": "Untitled template",
   "Type '/' to insert, or start writing…": "Type '/' to insert, or start writing…",
   "Hide contents": "Hide contents",
   "Show contents": "Show contents",
@@ -385,6 +382,9 @@
   "Publish": "Publish",
   "Publishing": "Publishing",
   "Sorry, it looks like you don’t have permission to access the document": "Sorry, it looks like you don’t have permission to access the document",
+  "You’re editing a template. Highlight some text and use the <2></2> control to add placeholders that can be filled out when creating new documents from this template.": "You’re editing a template. Highlight some text and use the <2></2> control to add placeholders that can be filled out when creating new documents from this template.",
+  "Archived by {{userName}}": "Archived by {{userName}}",
+  "Deleted by {{userName}}": "Deleted by {{userName}}",
   "Observing {{ userName }}": "Observing {{ userName }}",
   "Nested documents": "Nested documents",
   "Referenced by": "Referenced by",