diff --git a/app/assets/images/envelope-1st-class.png b/app/assets/images/envelope-1st-class.png
new file mode 100644
index 000000000..71f09948f
Binary files /dev/null and b/app/assets/images/envelope-1st-class.png differ
diff --git a/app/assets/images/envelope-1st-class.svg b/app/assets/images/envelope-1st-class.svg
new file mode 100644
index 000000000..ce91bb30a
--- /dev/null
+++ b/app/assets/images/envelope-1st-class.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 277.3 233.2" style="enable-background:new 0 0 277.3 233.2;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#B7A47E;}
+	.st1{fill:#C4B186;}
+	.st2{fill:#DEE0E1;}
+	.st3{fill:#2B271D;}
+	.st4{fill:#FFFFFF;}
+	.st5{fill:url(#SVGID_1_);fill-opacity:3.000000e-02;}
+</style>
+<rect y="0" class="st0" width="277.3" height="233.2"/>
+<rect x="0" y="3" class="st1" width="274.3" height="230.2"/>
+<polyline class="st2" points="277.3,233.2 0,233.2 0,0 "/>
+<path class="st3" d="M62,28.2v148.2h189.7V28.2H62z"/>
+<g>
+	<path class="st1" d="M209.2,165.9V83.5h-31.9V64.1c4.5,0.1,8.8-0.2,13-1c4.2-0.8,7.9-2.2,11.3-4.2c3.3-2,6.1-4.6,8.4-7.9
+		c2.3-3.3,3.8-7.3,4.5-12.2H235v127H209.2z"/>
+</g>
+<polygon class="st4" points="277.3,233.2 0,233.2 0,0 "/>
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="67.975" y1="51.415" x2="142.925" y2="126.365" gradientTransform="matrix(1 0 0 -1 0 233.89)">
+	<stop  offset="0" style="stop-color:#FFFFFF"/>
+	<stop  offset="1" style="stop-color:#000000"/>
+</linearGradient>
+<path class="st5" d="M163.8,136.1L62,50.5v126h149.9l-12.6-10.6"/>
+</svg>
diff --git a/app/assets/images/envelope-2nd-class.png b/app/assets/images/envelope-2nd-class.png
new file mode 100644
index 000000000..adba7ecc9
Binary files /dev/null and b/app/assets/images/envelope-2nd-class.png differ
diff --git a/app/assets/images/envelope-2nd-class.svg b/app/assets/images/envelope-2nd-class.svg
new file mode 100644
index 000000000..ec54d710b
--- /dev/null
+++ b/app/assets/images/envelope-2nd-class.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 277.3 233.2" style="enable-background:new 0 0 277.3 233.2;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#B7A47E;}
+	.st1{fill:#C4B186;}
+	.st2{fill:#2B271D;}
+	.st3{fill:#FFFFFF;}
+	.st4{fill:url(#SVGID_1_);fill-opacity:3.000000e-02;}
+</style>
+<rect y="0" class="st0" width="277.3" height="233.2"/>
+<rect x="0" y="3" class="st1" width="274.3" height="230.2"/>
+<path class="st2" d="M62,28.2v148.2h189.7V28.2H62z M241.7,165.9h-86.3c0.2-9,2.2-17.3,5.8-24.8c3.5-8.4,11.9-17.3,25-26.7
+	c11.4-8.2,18.8-14,22.2-17.6c5.2-5.5,7.7-11.5,7.7-18.1c0-5.3-1.5-9.8-4.4-13.3c-3-3.5-7.2-5.3-12.7-5.3c-7.5,0-12.7,2.8-15.4,8.4
+	c-1.6,3.2-2.5,8.4-2.8,15.5h-24.1c0.4-10.7,2.3-19.4,5.8-26c6.6-12.6,18.4-18.9,35.2-18.9c13.3,0,23.9,3.7,31.8,11.1
+	c7.9,7.4,11.8,17.2,11.8,29.3c0,9.3-2.8,17.6-8.4,24.8c-3.7,4.8-9.7,10.2-18,16.1l-9.9,7c-6.2,4.4-10.5,7.6-12.7,9.6
+	c-2.3,2-4.2,4.3-5.8,6.9h55v22H241.7z"/>
+<polygon class="st3" points="277.3,233.2 0,233.2 0,0 "/>
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="67.975" y1="51.415" x2="142.925" y2="126.365" gradientTransform="matrix(1 0 0 -1 0 233.89)">
+	<stop  offset="0" style="stop-color:#FFFFFF"/>
+	<stop  offset="1" style="stop-color:#000000"/>
+</linearGradient>
+<path class="st4" d="M199.3,165.9h-43.9c0.2-9,2.2-17.3,5.8-24.8c0.7-1.6,1.6-3.3,2.6-5L62,50.5v126h149.9L199.3,165.9z"/>
+</svg>
diff --git a/app/assets/stylesheets/components/letter.scss b/app/assets/stylesheets/components/letter.scss
index 61cc2f28b..1e50953d3 100644
--- a/app/assets/stylesheets/components/letter.scss
+++ b/app/assets/stylesheets/components/letter.scss
@@ -38,6 +38,52 @@ $iso-paper-ratio: 141.42135624%;
     box-shadow: inset 0 0 0 1px $border-colour;
   }
 
+  &-postage {
+
+    $art-width: 97.83;
+    $art-height: 82.27;
+    $fold-height: 124px;
+    $envelope-colour: #C4B186;
+
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 10;
+    width: $fold-height * ($art-width / $art-height);
+    height: $fold-height;
+    margin: 0;
+    background-color: mix($envelope-colour, $grey-1);
+    background-size: auto $fold-height;
+    background-position: right 0;
+    background-repeat: no-repeat;
+    background-origin: border-box;
+    text-indent: -1000em;
+    border-bottom: 1px solid $border-colour;
+    border-left: 1px solid $border-colour;
+    box-shadow: 0 2px 0 0 rgba($border-colour, 0.2);
+
+    &-first {
+
+      background-image: file-url('envelope-1st-class.svg');
+
+      @include ie-lte(8) {
+        background-image: file-url('envelope-1st-class.png');
+      }
+
+    }
+
+    &-second {
+
+      background-image: file-url('envelope-2nd-class.svg');
+
+      @include ie-lte(8) {
+        background-image: file-url('envelope-2nd-class.png');
+      }
+
+    }
+
+  }
+
   img {
     display: block;
     width: 100%;
diff --git a/app/main/views/notifications.py b/app/main/views/notifications.py
index a4841d970..3e031c632 100644
--- a/app/main/views/notifications.py
+++ b/app/main/views/notifications.py
@@ -70,6 +70,9 @@ def view_notification(service_id, notification_id):
     else:
         page_count = get_page_count_for_letter(notification['template'], values=personalisation)
 
+    if notification.get('postage'):
+        notification['template']['postage'] = notification['postage']
+
     template = get_template(
         notification['template'],
         current_service,
diff --git a/app/utils.py b/app/utils.py
index 6a7bb02e8..d2efab1a7 100644
--- a/app/utils.py
+++ b/app/utils.py
@@ -331,7 +331,8 @@ def get_template(
                 template,
                 image_url=letter_preview_url,
                 page_count=int(page_count),
-                contact_block=template['reply_to_text']
+                contact_block=template['reply_to_text'],
+                postage=template.get('postage') or service.postage,
             )
         else:
             return LetterPreviewTemplate(
diff --git a/requirements-app.txt b/requirements-app.txt
index 80af0678e..9b9dcf302 100644
--- a/requirements-app.txt
+++ b/requirements-app.txt
@@ -23,4 +23,4 @@ awscli-cwlogs>=1.4,<1.5
 # Putting upgrade on hold due to v1.0.0 using sha512 instead of sha1 by default
 itsdangerous==0.24  # pyup: <1.0.0
 
-git+https://github.com/alphagov/notifications-utils.git@30.7.5#egg=notifications-utils==30.7.5
+git+https://github.com/alphagov/notifications-utils.git@31.0.0#egg=notifications-utils==31.0.0
diff --git a/requirements.txt b/requirements.txt
index 82ed99091..5f997fece 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -25,13 +25,13 @@ awscli-cwlogs>=1.4,<1.5
 # Putting upgrade on hold due to v1.0.0 using sha512 instead of sha1 by default
 itsdangerous==0.24  # pyup: <1.0.0
 
-git+https://github.com/alphagov/notifications-utils.git@30.7.5#egg=notifications-utils==30.7.5
+git+https://github.com/alphagov/notifications-utils.git@31.0.0#egg=notifications-utils==31.0.0
 
 ## The following requirements were added by pip freeze:
-awscli==1.16.96
+awscli==1.16.97
 bleach==3.0.2
 boto3==1.6.16
-botocore==1.12.86
+botocore==1.12.87
 certifi==2018.11.29
 chardet==3.0.4
 Click==7.0
@@ -59,7 +59,7 @@ pyasn1==0.4.5
 pyexcel-ezodf==0.3.4
 PyJWT==1.7.1
 PyPDF2==1.26.0
-python-dateutil==2.7.5
+python-dateutil==2.8.0
 python-json-logger==0.1.10
 PyYAML==3.12
 redis==3.1.0