diff --git a/app/assets/stylesheets/mixins/budgets.scss b/app/assets/stylesheets/mixins/budgets.scss
new file mode 100644
index 000000000..32ab8c285
--- /dev/null
+++ b/app/assets/stylesheets/mixins/budgets.scss
@@ -0,0 +1,26 @@
+@import "mixins/buttons";
+@import "mixins/layouts";
+
+%budget-header {
+  @extend %brand-background;
+  @include full-width-background;
+
+  h1 {
+    font-size: rem-calc(60);
+    padding: $line-height * 2 0 $line-height;
+  }
+
+  h1,
+  h2,
+  p,
+  a,
+  .back,
+  .icon-angle-left,
+  .description {
+    color: inherit;
+  }
+
+  a {
+    text-decoration: underline;
+  }
+}
diff --git a/app/assets/stylesheets/mixins/buttons.scss b/app/assets/stylesheets/mixins/buttons.scss
index 6738c7b55..e76835bd8 100644
--- a/app/assets/stylesheets/mixins/buttons.scss
+++ b/app/assets/stylesheets/mixins/buttons.scss
@@ -1,3 +1,5 @@
+@import "mixins/colors";
+
 @mixin base-button {
   font-size: $base-font-size;
 
diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss
index e2e9d9eda..79358f267 100644
--- a/app/assets/stylesheets/participation.scss
+++ b/app/assets/stylesheets/participation.scss
@@ -1095,8 +1095,8 @@
 // -----------
 
 .budget-header {
-  @extend %brand-background;
-  @include full-width-background;
+  @extend %budget-header;
+
   margin-top: -$line-height;
   min-height: $line-height * 25;
   padding-bottom: $line-height;
@@ -1122,25 +1122,6 @@
     }
   }
 
-  h1 {
-    font-size: rem-calc(60);
-    padding: $line-height * 2 0 $line-height;
-  }
-
-  h1,
-  h2,
-  p,
-  a,
-  .back,
-  .icon-angle-left,
-  .description {
-    color: inherit;
-  }
-
-  a {
-    text-decoration: underline;
-  }
-
   .confirmed {
     font-size: rem-calc(24);
     font-weight: bold;