diff --git a/src/app/components/main-header/main-header.html b/src/app/components/main-header/main-header.html
index 5c50e32..2afa64f 100644
--- a/src/app/components/main-header/main-header.html
+++ b/src/app/components/main-header/main-header.html
@@ -1,8 +1,11 @@
 <div class="bar-container">
     <div class="bar-container__elements">
         <div class="bar-container__action-button bar-container__action-button--left">
-            <ng-content select="[slot='action-button']"></ng-content>
+            <ng-content select="[slot='action-button-left']"></ng-content>
         </div>
         <h1 class="bar-container__title">{{title()|titlecase}}</h1>
+        <div class="bar-container__action-button bar-container__action-button--right">
+            <ng-content select="[slot='action-button-right']"></ng-content>
+        </div>
     </div>
 </div>
diff --git a/src/app/components/main-header/main-header.scss b/src/app/components/main-header/main-header.scss
index fad88cb..c614d2e 100644
--- a/src/app/components/main-header/main-header.scss
+++ b/src/app/components/main-header/main-header.scss
@@ -1,7 +1,7 @@
 .bar-container {
   background-color: var(--primaryDark);
   width: 100%;
-  
+
   &__elements {
     position: relative;
     display: flex;
@@ -13,6 +13,7 @@
   &__title {
     display: flex;
     justify-content: center;
+    font-size: 1.3em;
   }
 
   &__action-button {
@@ -20,9 +21,30 @@
     flex-direction: column;
     height: 100%;
     justify-content: center;
-    &--left {
+    &--left,
+    &--right {
       position: absolute;
     }
+    &--left {
+      margin-left: 8px;
+    }
+    &--right {
+      margin-right: 8px;
+      right: 0;
+    }
   }
 
+  @media screen and (min-width: 480px) {
+    &__title {
+      font-size: 2em;
+    }
+    &__action-button {
+      &--left {
+        margin-left: 0;
+      }
+      &--right {
+        margin-right: 0;
+      }
+    }
+  }
 }