diff --git a/app/components/button/submit.hbs b/app/components/button/submit.hbs
index b0a3088a8d717847df7f1abb10ee1312f9e41727..8820442534fbd21ac9e661a875e14c6aeff99e60 100644
--- a/app/components/button/submit.hbs
+++ b/app/components/button/submit.hbs
@@ -7,20 +7,20 @@
   </LinkTo>
 {{else}}
   {{! render <button> based component }}
-  {{#if @enabled}}
+  {{#if @disabled}}
+    {{! render a disabled button }}
     <button
       class="btn btn-primary mx-2"
       type="button"
+      disabled
       {{on "click" @onClick}}>
         <i class="bi bi-check-lg"></i>
       {{this.text}}
     </button>
   {{else}}
-    {{! render a disabled button }}
     <button
       class="btn btn-primary mx-2"
       type="button"
-      disabled
       {{on "click" @onClick}}>
         <i class="bi bi-check-lg"></i>
       {{this.text}}
diff --git a/app/components/permission.hbs b/app/components/permission.hbs
new file mode 100644
index 0000000000000000000000000000000000000000..ed12f9c64f5c5ee29bb7026ae4eecdcc4394b24a
--- /dev/null
+++ b/app/components/permission.hbs
@@ -0,0 +1,8 @@
+  <div>
+    <Input
+      @type="checkbox"
+      @checked="{{@permission.isChecked}}"
+      {{on "change" (fn this.onChange @permission)}}
+    />
+    <span class="mx-1">{{@permission.name}}</span>
+  </div>
\ No newline at end of file
diff --git a/app/components/permission.js b/app/components/permission.js
new file mode 100644
index 0000000000000000000000000000000000000000..d4b86cea67a9b30e7245ecfc00d7bc61db1226c6
--- /dev/null
+++ b/app/components/permission.js
@@ -0,0 +1,17 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+
+
+class PermissionComponent extends Component {
+  @service store;
+
+  @action
+  onChange(permission, event) {
+    let checked = event.target.checked;
+    this.args.onChange(permission, checked);
+  }
+}
+
+export default PermissionComponent;
diff --git a/app/components/permissions/index.hbs b/app/components/permissions/index.hbs
new file mode 100644
index 0000000000000000000000000000000000000000..01757cd4f5452bf11f97b689f3e2599e64c1077f
--- /dev/null
+++ b/app/components/permissions/index.hbs
@@ -0,0 +1,3 @@
+{{#each @permissions as |perm|}}
+  <Permission @permission={{perm}} @onChange={{@onChange}} />
+{{/each}}
diff --git a/app/components/permissions/index.js b/app/components/permissions/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..01d07a8781a42f6a13b756ed03aaa67eea906bff
--- /dev/null
+++ b/app/components/permissions/index.js
@@ -0,0 +1,10 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+
+
+class PermissionsComponent extends Component {
+  @service store;
+}
+
+export default PermissionsComponent;
diff --git a/app/components/role/add.hbs b/app/components/role/add.hbs
index 1c6252f5e10215f91fc6b68eeba5cbb9a6229a63..da595dfc35b415e43b72658903559b227ca8df67 100644
--- a/app/components/role/add.hbs
+++ b/app/components/role/add.hbs
@@ -6,6 +6,10 @@
     placeholder="Role's name" />
 </div>
 
+<Permissions
+  @permissions={{this.permissions}}
+  @onChange={{this.onChange}} />
+
 <div class="mb-3">
   <Button::Submit @onClick={{this.onSubmit}} />
   <Button::Cancel @route="roles"/>
diff --git a/app/components/role/add.js b/app/components/role/add.js
index a133ebd044a35a34f404105648196dcdb6d25b42..be1f1974f9eecf89466d6cee4809755e90e9f56a 100644
--- a/app/components/role/add.js
+++ b/app/components/role/add.js
@@ -1,6 +1,7 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
+import { A } from '@ember/array';
 import { inject as service } from '@ember/service';
 
 
@@ -8,14 +9,22 @@ class AddRoleComponent extends Component {
   @service store;
   @service router;
 
-  @tracked dst_folder;
-  @tracked name;
-  @tracked match;
-  @tracked is_case_sensitive = false;
-  @tracked matching_alg;
+  @tracked name = "default name";
+  permissions = A([
+    {name: 'one', isChecked: true},
+    {name: 'two'}
+  ]);
+
+  @action
+  onChange(permission, checked) {
+    permission.isChecked = checked;
+  }
 
   @action
   onSubmit() {
+    console.log(this.name);
+    console.log(this.permissions);
+    /*
     let role;
 
     role = {
@@ -28,6 +37,7 @@ class AddRoleComponent extends Component {
     ).save();
 
     this.router.transitionTo('roles');
+    */
   }
 }
 
diff --git a/app/components/tag/new.hbs b/app/components/tag/new.hbs
index c35bca1b4a904c8cd5f3953cf0d34c42af62540d..076d187c307f0e802e3dbc320c8c1a10b74d5a36 100644
--- a/app/components/tag/new.hbs
+++ b/app/components/tag/new.hbs
@@ -2,15 +2,15 @@
 
 
 {{#if this.form_visible}}
-    <form>
-        <div class="row my-2">
-            <div class="col-md-2">
-                <Tag::Item
-                    @name={{default_string this.new_name "preview"}}
-                    @fg_color={{this.new_fg_color}}
-                    @bg_color={{this.new_bg_color}} />
-            </div>
-        </div>
+  <form>
+    <div class="row my-2">
+      <div class="col-md-2">
+        <Tag::Item
+            @name={{default_string this.new_name "preview"}}
+            @fg_color={{this.new_fg_color}}
+            @bg_color={{this.new_bg_color}} />
+      </div>
+    </div>
 
         <div class="row mb-2">
             <div class="col-md-3">