diff --git a/src/newsreader/news/collection/templates/news/collection/views/rule-update.html b/src/newsreader/news/collection/templates/news/collection/views/rule-update.html
index 3f0a8fe..0a705b8 100644
--- a/src/newsreader/news/collection/templates/news/collection/views/rule-update.html
+++ b/src/newsreader/news/collection/templates/news/collection/views/rule-update.html
@@ -1,9 +1,14 @@
 {% extends "base.html" %}
-{% load static %}
+{% load static i18n %}
 
 {% block content %}
   <main id="rule--page" class="main">
+    {% if rule.error %}
+      {% trans "Failed to retrieve posts" as title %}
+      {% include "components/textbox/textbox.html" with title=title body=rule.error class="text-section--error" only %}
+    {% endif %}
+
     {% url "news:collection:rules" as cancel_url %}
-    {% include "components/form/form.html" with form=form title="Update rule" cancel_url=cancel_url confirm_text="Save rule" %}
+    {% include "components/form/form.html" with form=form title="Update rule" cancel_url=cancel_url confirm_text="Save rule" only %}
   </main>
 {% endblock %}
diff --git a/src/newsreader/news/collection/templates/news/collection/views/subreddit-update.html b/src/newsreader/news/collection/templates/news/collection/views/subreddit-update.html
index 9ea7d05..0099e3b 100644
--- a/src/newsreader/news/collection/templates/news/collection/views/subreddit-update.html
+++ b/src/newsreader/news/collection/templates/news/collection/views/subreddit-update.html
@@ -1,8 +1,13 @@
 {% extends "base.html" %}
-{% load static %}
+{% load static i18n %}
 
 {% block content %}
   <main id="subreddit--page" class="main">
+    {% if subreddit.error %}
+      {% trans "Failed to retrieve posts" as title %}
+      {% include "components/textbox/textbox.html" with title=title body=subreddit.error class="text-section--error" only %}
+    {% endif %}
+
     {% url "news:collection:rules" as cancel_url %}
     {% include "components/form/form.html" with form=form title="Update subreddit" cancel_url=cancel_url confirm_text="Save subreddit" %}
   </main>
diff --git a/src/newsreader/news/collection/views/reddit.py b/src/newsreader/news/collection/views/reddit.py
index 533513b..62ec408 100644
--- a/src/newsreader/news/collection/views/reddit.py
+++ b/src/newsreader/news/collection/views/reddit.py
@@ -20,6 +20,7 @@ class SubRedditUpdateView(
 ):
     form_class = SubRedditRuleForm
     template_name = "news/collection/views/subreddit-update.html"
+    context_object_name = "subreddit"
 
     def get_queryset(self):
         queryset = super().get_queryset()
diff --git a/src/newsreader/scss/components/card/_card.scss b/src/newsreader/scss/components/card/_card.scss
index 9866d4d..b77522a 100644
--- a/src/newsreader/scss/components/card/_card.scss
+++ b/src/newsreader/scss/components/card/_card.scss
@@ -3,7 +3,7 @@
   flex-direction: column;
 
   margin: 20px 0;
-  padding: 15px;
+  @include block-padding;
 
   width: 50%;
 
@@ -16,7 +16,7 @@
 
     padding: 15px 0;
 
-    border-bottom: 2px $border-gray solid;
+    border-bottom: 2px $gray solid;
   }
 
   &__content {
diff --git a/src/newsreader/scss/components/category/_category.scss b/src/newsreader/scss/components/category/_category.scss
index e8e1ba9..6710af2 100644
--- a/src/newsreader/scss/components/category/_category.scss
+++ b/src/newsreader/scss/components/category/_category.scss
@@ -36,6 +36,6 @@
   }
 
   &--selected, &:hover {
-    background-color: $border-gray;
+    background-color: $gray;
   }
 }
diff --git a/src/newsreader/scss/components/errorlist/_errorlist.scss b/src/newsreader/scss/components/errorlist/_errorlist.scss
index 6dbc458..d9c592c 100644
--- a/src/newsreader/scss/components/errorlist/_errorlist.scss
+++ b/src/newsreader/scss/components/errorlist/_errorlist.scss
@@ -11,9 +11,9 @@
 
   &__item {
     margin: 10px 0;
-    padding: 10px;
+    @include text-padding;
 
-    background-color: $error-red;
+    background-color: $transparant-red;
   }
 
   & li {
diff --git a/src/newsreader/scss/components/form/_form.scss b/src/newsreader/scss/components/form/_form.scss
index 089c4f1..9af3b12 100644
--- a/src/newsreader/scss/components/form/_form.scss
+++ b/src/newsreader/scss/components/form/_form.scss
@@ -1,5 +1,3 @@
-@import "mixin.scss";
-
 .form {
   display: flex;
   flex-direction: column;
@@ -39,7 +37,7 @@
     display: flex;
     flex-direction: row;
 
-    @include form-padding;
+    @include block-padding;
   }
 
   &__actions {
@@ -47,7 +45,7 @@
     flex-direction: row;
     gap: 15px;
 
-    @include form-padding;
+    @include block-padding;
   }
 
   &__title {
@@ -55,7 +53,7 @@
   }
 
   &__intro {
-    @include form-padding;
+    @include block-padding;
   }
 
   & .favicon {
diff --git a/src/newsreader/scss/components/form/_mixin.scss b/src/newsreader/scss/components/form/_mixin.scss
deleted file mode 100644
index 4f55a9e..0000000
--- a/src/newsreader/scss/components/form/_mixin.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@mixin form-padding {
-  padding: 15px;
-}
diff --git a/src/newsreader/scss/components/messages/_messages.scss b/src/newsreader/scss/components/messages/_messages.scss
index b8ee6b5..74d88b5 100644
--- a/src/newsreader/scss/components/messages/_messages.scss
+++ b/src/newsreader/scss/components/messages/_messages.scss
@@ -20,15 +20,16 @@
     background-color: $blue;
 
     &--error {
-      background-color: $error-red;
+      background-color: $transparant-red;
     }
 
     &--warning {
-      background-color: $light-orange;
+      background-color: $transparant-orange;
     }
 
+    // TODO check this color
     &--success {
-      background-color: $success-green;
+      background-color: $transparant-green;
     }
 
     & .gg-close {
diff --git a/src/newsreader/scss/components/pagination/_pagination.scss b/src/newsreader/scss/components/pagination/_pagination.scss
index d4ba4a9..31dca88 100644
--- a/src/newsreader/scss/components/pagination/_pagination.scss
+++ b/src/newsreader/scss/components/pagination/_pagination.scss
@@ -1,5 +1,3 @@
-@import "../../elements/button/mixins";
-
 .pagination {
   display: flex;
   justify-content: space-evenly;
diff --git a/src/newsreader/scss/components/post/_post.scss b/src/newsreader/scss/components/post/_post.scss
index 9374f39..e73dbd2 100644
--- a/src/newsreader/scss/components/post/_post.scss
+++ b/src/newsreader/scss/components/post/_post.scss
@@ -46,7 +46,7 @@
   }
 
   &__rule, &__category {
-    background-color: $light-orange !important;
+    background-color: $orange !important;
 
     & a {
       color: $black;
@@ -82,11 +82,11 @@
     position: relative;
     margin: 1% 2% 0 0;
     align-self: flex-end;
-    background-color: $button-blue;
+    background-color: $blue;
     color: $white;
 
     &:hover {
-      background-color: lighten($button-blue, +1%);
+      background-color: lighten($blue, +1%);
     }
   }
 
diff --git a/src/newsreader/scss/components/posts/_posts.scss b/src/newsreader/scss/components/posts/_posts.scss
index 94223a6..8bb86e9 100644
--- a/src/newsreader/scss/components/posts/_posts.scss
+++ b/src/newsreader/scss/components/posts/_posts.scss
@@ -30,7 +30,7 @@
     }
 
     & .badge {
-      background-color: $light-orange;
+      background-color: $orange;
     }
 
     &:last-child {
diff --git a/src/newsreader/scss/components/rules/_rules.scss b/src/newsreader/scss/components/rules/_rules.scss
index b07d03d..527d99a 100644
--- a/src/newsreader/scss/components/rules/_rules.scss
+++ b/src/newsreader/scss/components/rules/_rules.scss
@@ -14,11 +14,11 @@
 
     &:hover {
       cursor: pointer;
-      background-color: $border-gray;
+      background-color: $gray;
     }
 
     &--selected {
-      background-color: $border-gray;
+      background-color: $gray;
     }
   }
 
diff --git a/src/newsreader/scss/components/section/_text-section.scss b/src/newsreader/scss/components/section/_text-section.scss
index bab9f6a..2efe0a4 100644
--- a/src/newsreader/scss/components/section/_text-section.scss
+++ b/src/newsreader/scss/components/section/_text-section.scss
@@ -1,9 +1,14 @@
 .text-section {
   @extend .section;
+  @include block-padding;
 
   width: 70%;
 
-  padding: 10px;
+  &--error {
+    background-color: $transparant-red;
+  }
 
-  background-color: $white;
+  &__body {
+    @include text-padding;
+  }
 }
diff --git a/src/newsreader/scss/components/table/_table.scss b/src/newsreader/scss/components/table/_table.scss
index 69bb298..74d5d6e 100644
--- a/src/newsreader/scss/components/table/_table.scss
+++ b/src/newsreader/scss/components/table/_table.scss
@@ -1,5 +1,3 @@
-@import "../../lib/mixins";
-
 .table {
   table-layout: fixed;
 
@@ -16,7 +14,7 @@
 
   &__row {
     &--error {
-      background-color: transparentize($error-red, 0.8);
+      background-color: $transparant-red;
     }
   }
 
diff --git a/src/newsreader/scss/elements/button/_button.scss b/src/newsreader/scss/elements/button/_button.scss
index 50af49e..a8eb3bc 100644
--- a/src/newsreader/scss/elements/button/_button.scss
+++ b/src/newsreader/scss/elements/button/_button.scss
@@ -1,5 +1,3 @@
-@import "mixins";
-
 .button {
   display: flex;
 
@@ -18,29 +16,29 @@
 
   &--success, &--confirm {
     color: $white !important;
-    background-color: $confirm-green;
+    background-color: $green;
 
     &:hover {
-      background-color: lighten($confirm-green, +5%);
+      background-color: lighten($green, +5%);
     }
   }
 
   &--error, &--cancel {
     color: $white !important;
-    background-color: $error-red;
+    background-color: $red;
 
     &:hover {
-      background-color: lighten($error-red, +5%);
+      background-color: lighten($red, +5%);
     }
 
   }
 
   &--primary {
     color: $white !important;
-    background-color: $button-blue;
+    background-color: $blue;
 
     &:hover {
-      background-color: lighten($button-blue, 5%);
+      background-color: lighten($blue, 5%);
     }
   }
 
diff --git a/src/newsreader/scss/elements/button/_mixins.scss b/src/newsreader/scss/elements/button/_mixins.scss
deleted file mode 100644
index 75b70e3..0000000
--- a/src/newsreader/scss/elements/button/_mixins.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@mixin button-padding {
-  padding: 7px 40px;
-}
diff --git a/src/newsreader/scss/elements/button/_read-button.scss b/src/newsreader/scss/elements/button/_read-button.scss
index 940d895..2c345b5 100644
--- a/src/newsreader/scss/elements/button/_read-button.scss
+++ b/src/newsreader/scss/elements/button/_read-button.scss
@@ -4,9 +4,9 @@
   margin: 20px 0 0 0;
 
   color: $white;
-  background-color: $confirm-green;
+  background-color: $green;
 
   &:hover {
-    background-color: darken($confirm-green, 10%);
+    background-color: darken($green, 10%);
   }
 }
diff --git a/src/newsreader/scss/elements/input/_input.scss b/src/newsreader/scss/elements/input/_input.scss
index 8258020..16e6fad 100644
--- a/src/newsreader/scss/elements/input/_input.scss
+++ b/src/newsreader/scss/elements/input/_input.scss
@@ -1,7 +1,7 @@
 .input {
-  padding: 10px;
+  @include text-padding;
 
-  border: 1px $border-gray solid;
+  border: 1px $gray solid;
 
   &:focus {
     border: 1px $focus-blue solid;
diff --git a/src/newsreader/scss/elements/label/_label.scss b/src/newsreader/scss/elements/label/_label.scss
index 5030a4c..6481b02 100644
--- a/src/newsreader/scss/elements/label/_label.scss
+++ b/src/newsreader/scss/elements/label/_label.scss
@@ -1,5 +1,5 @@
 .label {
-  padding: 10px;
+  @include text-padding;
 }
 
 label {
diff --git a/src/newsreader/scss/lib/_mixins.scss b/src/newsreader/scss/lib/_mixins.scss
index 8b13789..72c9932 100644
--- a/src/newsreader/scss/lib/_mixins.scss
+++ b/src/newsreader/scss/lib/_mixins.scss
@@ -1 +1,11 @@
+@mixin text-padding {
+  padding: 10px;
+}
 
+@mixin block-padding {
+  padding: 15px;
+}
+
+@mixin button-padding {
+  padding: 7px 40px;
+}
diff --git a/src/newsreader/scss/lib/index.scss b/src/newsreader/scss/lib/index.scss
index ec6885e..026bf87 100644
--- a/src/newsreader/scss/lib/index.scss
+++ b/src/newsreader/scss/lib/index.scss
@@ -1 +1,2 @@
 @import 'css.gg';
+@import 'mixins';
diff --git a/src/newsreader/scss/partials/_colors.scss b/src/newsreader/scss/partials/_colors.scss
index aee33c2..b2f124d 100644
--- a/src/newsreader/scss/partials/_colors.scss
+++ b/src/newsreader/scss/partials/_colors.scss
@@ -1,44 +1,27 @@
-// light blue
-$azureish-white: rgba(205, 230, 245, 1);
-
-// dark blue
-$pewter-blue: rgba(141, 167, 190, 1);
-
-// light gray
-$gainsboro: rgba(238, 238, 238, 1);
-
-// medium gray
-$roman-silver: rgba(135, 145, 158, 1);
-
-//dark gray
-$nickel: rgba(112, 112, 120, 1);
-
-$pink: rgba(235, 229, 229, 1);
-$lavendal-pink: rgba(162, 155, 254, 1);
-
-$beige: rgba(245, 245, 220, 1);
-
-$light-green: rgba(230, 247, 185, 1);
-$light-orange: rgba(255, 212, 153, 1);
-$light-red: rgba(255, 118, 117, 1);
-
-$success-green: rgba(89, 181, 128, 1);
-$error-red: lighten(rgba(231, 76, 60, 1), 10%);
-
-$confirm-green: $success-green;
-$cancel-red: $error-red;
-
-$border-gray: rgba(227, 227, 227, 1);
-
-$button-blue: rgba(111, 164, 196, 1);
-$focus-blue: darken($azureish-white, +10%);
-$checkbox-blue: rgba(34, 170, 253, 1);
-$font-color: rgba(48, 51, 53, 1);
-$header-color: rgba(100, 101, 102, 1);
+$orange: rgba(255, 212, 153, 1);
+$green: rgba(89, 181, 128, 1);
+$red: lighten(rgba(231, 76, 60, 1), 10%);
+$gray: rgba(227, 227, 227, 1);
+$blue: rgba(111, 164, 196, 1);
 
 $white: rgba(255, 255, 255, 1);
 $black: rgba(0, 0, 0, 1);
-$blue: darken($azureish-white, +50%);
 $dark: rgba(0, 0, 0, 0.4);
 
+$font-color: rgba(48, 51, 53, 1);
+$header-color: rgba(100, 101, 102, 1);
+
 $reddit-orange: rgba(255, 69, 0, 1);
+
+$transparant-red: transparentize($red, 0.8);
+$transparant-blue: transparentize($blue, 0.8);
+$transparant-orange: transparentize($orange, 0.4);
+$transparant-green: transparentize($green, 0.4);
+
+$azureish-white: rgba(205, 230, 245, 1);
+$gainsboro: rgba(238, 238, 238, 1);
+$nickel: rgba(112, 112, 120, 1);
+$lavendal-pink: rgba(162, 155, 254, 1);
+
+$focus-blue: darken($azureish-white, +10%);
+$checkbox-blue: rgba(34, 170, 253, 1);
diff --git a/src/newsreader/templates/components/form/form.html b/src/newsreader/templates/components/form/form.html
index d854eb1..e183c25 100644
--- a/src/newsreader/templates/components/form/form.html
+++ b/src/newsreader/templates/components/form/form.html
@@ -26,7 +26,10 @@
 
           {{ field.errors }}
           {{ field }}
-          {% include "components/form/help-text.html" %}
+
+          {% if field.help_text %}
+            {% include "components/form/help-text.html" %}
+          {% endif %}
         </fieldset>
       {% endfor %}
     </section>
diff --git a/src/newsreader/templates/components/textbox/textbox.html b/src/newsreader/templates/components/textbox/textbox.html
new file mode 100644
index 0000000..425cf60
--- /dev/null
+++ b/src/newsreader/templates/components/textbox/textbox.html
@@ -0,0 +1,13 @@
+<section class="section text-section{% if class %} {{ class }}{% endif %}">
+  {% if title %}
+    <h1 class="h1 section__title text-section__title">{{ title }}</h1>
+  {% endif %}
+
+  {% if body %}
+    <p class="section__title text-section__body">{{ body }}</p>
+  {% endif %}
+
+  {% if footer %}
+    <p class="section__footer text-section__footer">{{ footer }}</p>
+  {% endif %}
+</section>