diff --git a/app/styles/app.scss b/app/styles/app.scss
index 8ddcad9..6371321 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -16,6 +16,7 @@
 
 // Optional - Everything else
 @import "ember-bootstrap/utilities/display";
+@import "ember-bootstrap/utilities/float";
 @import "ember-bootstrap/utilities/screenreaders";
 @import "ember-bootstrap/type";
 @import "ember-bootstrap/tables";
diff --git a/app/templates/components/create-options-datetime.hbs b/app/templates/components/create-options-datetime.hbs
index 2d44551..2c1b7f2 100644
--- a/app/templates/components/create-options-datetime.hbs
+++ b/app/templates/components/create-options-datetime.hbs
@@ -1,17 +1,17 @@
 <div class="cr-form-wrapper box">
   {{#if errorMessage}}
-    {{#bs-alert type="warning"}}
+    <BsAlert type="warning">
       {{t errorMessage}}
-    {{/bs-alert}}
+    </BsAlert>
   {{/if}}
 
-  {{#bs-form
-    onSubmit=(action "submit")
-    formLayout="horizontal"
-    model=this
-    novalidate=true
-  as |form|
-  }}
+  <BsForm
+    @onSubmit={{action "submit"}}
+    @formLayout="horizontal"
+    @model={{this}}
+    novalidate
+    as |form|
+  >
     <div class="days">
       {{#each dates as |date index|}}
         {{!
@@ -25,67 +25,68 @@
           }}
           data-test-day={{date.day}}
         >
-          {{!
-            show label only if it differ from label before
-            Nested-helpers are called first and object-at requires a positive integer
-            but returns undefined if an element with the passed in index does not exist.
-            Therefore we pass in array length if index is null. Cause index starting
-            by zero there can't be any element with an index === array.length.
-          }}
-          {{#form.element
-            classNames="option"
-            label=date.dayFormatted
-            invisibleLabel=(eq date.dayFormatted (get (object-at (if index (sub index 1) dates.length) dates) "dayFormatted"))
-            model=date
-            property="time"
-          as |el|
-          }}
+          <form.element
+            @label={{date.dayFormatted}}
+            {{!
+              show label only if it differ from label before
+              Nested-helpers are called first and object-at requires a positive integer
+              but returns undefined if an element with the passed in index does not exist.
+              Therefore we pass in array length if index is null. Cause index starting
+              by zero there can't be any element with an index === array.length.
+            }}
+            @invisibleLabel={{eq date.dayFormatted (get (object-at (if index (sub index 1) dates.length) dates) "dayFormatted")}}
+            @model={{date}}
+            @property="time"
+            class="option"
+            as |el|
+          >
             <div class="input-group">
-              {{el.control
-                autofocus=(unless index true false)
-                id=el.id
-                placeholder="00:00"
-                type="time"
-                value=el.value
-                onChange=(action (mut el.value))
-              }}
+              <el.control
+                @autofocus={{unless index true false}}
+                @onChange={{action (mut el.value)}}
+                @placeholder="00:00"
+                @type="time"
+                @value={{el.value}}
+                id={{el.id}}
+              />
               <div class="input-group-append">
-                {{! disable delete button if there is only one option }}
-                {{#bs-button
-                  onClick=(action "deleteOption" date)
-                  type="link"
+                <BsButton
+                  @onClick={{action "deleteOption" date}}
+                  @type="link"
                   class="delete"
-                  disabled=(lte dates.length 1)
-                }}
+                  {{! disable delete button if there is only one option }}
+                  disabled={{lte dates.length 1}}
+                >
                   <span class="oi oi-trash" title={{t "create.options.button.delete.label"}} aria-hidden="true"></span>
                   <span class="sr-only">{{t "create.options.button.delete.label"}}</span>
-                {{/bs-button}}
+                </BsButton>
               </div>
             </div>
-            {{#bs-button
-              onClick=(action "addOption" date)
-              type="link"
-              size="sm"
-              class="add cr-option-menu__button cr-option-menu__add-button"
-            }}
+
+            <BsButton
+              @onClick={{action "addOption" date}}
+              @type="link"
+              @size="sm"
+              class="add cr-option-menu__button cr-option-menu__add-button float-left"
+            >
               <span class="oi oi-plus" title={{t "create.options.button.add.label"}} aria-hidden="true"></span>
               <span class="sr-only">{{t "create.options.button.add.label"}}</span>
-            {{/bs-button}}
-          {{/form.element}}
+            </BsButton>
+          </form.element>
         </div>
       {{/each}}
     </div>
 
     {{#if (gt groupedDates.length 1)}}
-      {{#form.element}}
-        {{#bs-button
-          onClick=(action "adoptTimesOfFirstDay")
+      <form.element>
+        <BsButton
+          @onClick={{action "adoptTimesOfFirstDay"}}
+          @size="sm"
           class="adopt-times-of-first-day"
-          size="sm"
-        }}
+        >
           {{t "create.options-datetime.copy-first-line"}}
-        {{/bs-button}}
-      {{/form.element}}
+        </BsButton>
+      </form.element>
     {{/if}}
 
     <div class="row cr-steps-bottom-nav">
@@ -96,5 +97,5 @@
         <NextButton />
       </div>
     </div>
-  {{/bs-form}}
+  </BsForm>
 </div>
diff --git a/app/templates/components/create-options-text.hbs b/app/templates/components/create-options-text.hbs
index 150dafc..b32d9b2 100644
--- a/app/templates/components/create-options-text.hbs
+++ b/app/templates/components/create-options-text.hbs
@@ -1,40 +1,43 @@
-{{#each options as |option index|}}
-  {{! show label only on first item }}
-  {{#form.element
-    classNames="option"
-    label=(unless index (t "create.options.options.label"))
-    model=option
-    property="title"
-  as |el|
-  }}
-    <div class="input-group">
-      {{el.control
-        autofocus=(unless index true false)
-        id=el.id
-        value=el.value
-        onChange=(action (mut el.value))
-      }}
-      <div class="input-group-append">
-        {{! disable delete button if there is only one option }}
-        {{#bs-button
-          onClick=(action "deleteOption" option)
-          type="link"
-          class="delete"
-          disabled=(lte options.length 1)
-        }}
-          <span class="oi oi-trash" title={{t "create.options.button.delete.label"}} aria-hidden="true"></span>
-          <span class="sr-only">{{t "create.options.button.delete.label"}}</span>
-        {{/bs-button}}
+{{#let @form as |form|}}
+  {{#each options as |option index|}}
+    <form.element
+      {{! show label only on first item }}
+      @label={{unless index (t "create.options.options.label")}}
+      @model={{option}}
+      @property="title"
+      class="option"
+      as |el|
+    >
+      <div class="input-group">
+        <el.control
+          @autofocus={{unless index true false}}
+          @id={{el.id}}
+          @value={{el.value}}
+          @onChange={{action (mut el.value)}}
+        />
+        <div class="input-group-append">
+          <BsButton
+            @onClick={{action "deleteOption" option}}
+            @type="link"
+            class="delete"
+            {{! disable delete button if there is only one option }}
+            disabled={{lte options.length 1}}
+          >
+            <span class="oi oi-trash" title={{t "create.options.button.delete.label"}} aria-hidden="true"></span>
+            <span class="sr-only">{{t "create.options.button.delete.label"}}</span>
+          </BsButton>
+        </div>
       </div>
-    </div>
-    {{#bs-button
-      onClick=(action "addOption" option)
-      type="link"
-      size="sm"
-      class="add"
-    }}
-      <span class="oi oi-plus" title={{t "create.options.button.add.label"}} aria-hidden="true"></span>
-      <span class="sr-only">{{t "create.options.button.add.label"}}</span>
-    {{/bs-button}}
-  {{/form.element}}
-{{/each}}
+
+      <BsButton
+        @onClick={{action "addOption" option}}
+        @type="link"
+        @size="sm"
+        class="add float-left"
+      >
+        <span class="oi oi-plus" title={{t "create.options.button.add.label"}} aria-hidden="true"></span>
+        <span class="sr-only">{{t "create.options.button.add.label"}}</span>
+      </BsButton>
+    </form.element>
+  {{/each}}
+{{/let}}
\ No newline at end of file
diff --git a/config/bundlesize.js b/config/bundlesize.js
index a4a2d37..e27acd3 100644
--- a/config/bundlesize.js
+++ b/config/bundlesize.js
@@ -9,7 +9,7 @@ module.exports = {
     },
     css: {
       pattern: 'assets/*.css',
-      limit: '15KB',
+      limit: '15.3KB',
       compression: 'gzip'
     }
   }