diff --git a/addon/controllers/roles/edit.js b/addon/controllers/roles/edit.js
new file mode 100644
index 00000000..259bcd13
--- /dev/null
+++ b/addon/controllers/roles/edit.js
@@ -0,0 +1,21 @@
+import Controller from "@ember/controller";
+import { action } from "@ember/object";
+
+export default class RolesEditController extends Controller {
+  get permissionFilter() {
+    return { roles: this.model.id };
+  }
+
+  get displayPermissionTable() {
+    return !this.model.isNew && this.model.permissions;
+  }
+
+  @action
+  updateModel(model, formElements) {
+    model.slug = formElements.slug.value;
+    model.name = formElements.name.value;
+    model.description = formElements.description.value;
+
+    return model;
+  }
+}
diff --git a/addon/routes/roles/edit.js b/addon/routes/roles/edit.js
new file mode 100644
index 00000000..17dc8bf2
--- /dev/null
+++ b/addon/routes/roles/edit.js
@@ -0,0 +1,14 @@
+import Route from "@ember/routing/route";
+import { inject as service } from "@ember/service";
+
+import handleModelErrors from "ember-emeis/decorators/handle-model-errors";
+
+export default class RolesEditRoute extends Route {
+  @service notification;
+  @service intl;
+
+  @handleModelErrors({ routeFor404: "roles.index" })
+  async model({ role_id: id }) {
+    return await this.store.findRecord("role", id);
+  }
+}
diff --git a/addon/templates/roles/edit.hbs b/addon/templates/roles/edit.hbs
new file mode 100644
index 00000000..42471bc2
--- /dev/null
+++ b/addon/templates/roles/edit.hbs
@@ -0,0 +1,85 @@
+<EditForm @model={{@model}} @updateModel={{this.updateModel}} class="uk-margin">
+  <EditForm::Element @label={{t "emeis.roles.headings.slug"}}>
+    <input
+      class="uk-input"
+      type="text"
+      name="slug"
+      pattern="^[-a-zA-Z0-9_]+$"
+      disabled={{not @model.isNew}}
+      value={{@model.slug}}
+    />
+    <span class="uk-text-meta">
+      {{t "emeis.form.slug-hint"}}
+    </span>
+  </EditForm::Element>
+
+  <EditForm::Element @label={{t "emeis.roles.headings.name"}}>
+    <input
+      class="uk-input"
+      type="text"
+      name="name"
+      placeholder="{{t "emeis.roles.headings.name"}}..."
+      required
+      value={{@model.name}}
+    />
+  </EditForm::Element>
+
+  <EditForm::Element @label={{t "emeis.roles.headings.description"}}>
+    <textarea
+      class="uk-textarea"
+      rows="5"
+      name="description"
+      placeholder="{{t "emeis.roles.headings.description"}}..."
+      value={{@model.description}}
+      required
+    ></textarea>
+  </EditForm::Element>
+</EditForm>
+
+{{#if this.displayPermissionTable}}
+  <SectionTitle @model="permissions" @noCreateLink="true" />
+  <DataTable
+    @modelName="permission"
+    @filter={{this.permissionFilter}}
+    class="uk-margin"
+    data-test-permissions as |table|
+  >
+    <table.head>
+      <th>
+        {{t "emeis.permissions.headings.name"}}
+      </th>
+      <th>
+        {{t "emeis.permissions.headings.slug"}}
+      </th>
+      <th>
+        {{t "emeis.permissions.headings.description"}}
+      </th>
+    </table.head>
+    <table.body as |body|>
+      <body.row data-test-row>
+        {{#with body.model as |permission|}}
+          <td class="uk-width-1-4" data-test-permission-name={{permission.id}}>
+            <LinkTo
+              @route="permissions.edit"
+              @model={{permission}}
+              class="uk-link-text"
+            >
+              {{permission.name}}
+            </LinkTo>
+          </td>
+
+          <td class="uk-width-1-4" data-test-permission-slug={{permission.id}}>
+            {{permission.slug}}
+          </td>
+
+          <td
+            class="uk-width-expand"
+            data-test-permission-desc={{permission.id}}
+          >
+            {{permission.description}}
+          </td>
+        {{/with}}
+      </body.row>
+    </table.body>
+  </DataTable>
+{{/if}}
diff --git a/app/controllers/roles/edit.js b/app/controllers/roles/edit.js
new file mode 100644
index 00000000..131f4bd7
--- /dev/null
+++ b/app/controllers/roles/edit.js
@@ -0,0 +1 @@
+export { default } from "ember-emeis/controllers/roles/edit";
diff --git a/app/routes/roles/edit.js b/app/routes/roles/edit.js
new file mode 100644
index 00000000..6d5d4a18
--- /dev/null
+++ b/app/routes/roles/edit.js
@@ -0,0 +1 @@
+export { default } from "ember-emeis/routes/roles/edit";
diff --git a/app/templates/roles/edit.js b/app/templates/roles/edit.js
new file mode 100644
index 00000000..a8bc8f53
--- /dev/null
+++ b/app/templates/roles/edit.js
@@ -0,0 +1 @@
+export { default } from "ember-emeis/templates/roles/edit";
diff --git a/tests/acceptance/roles-test.js b/tests/acceptance/roles-test.js
index 2af8b798..38a471ee 100644
--- a/tests/acceptance/roles-test.js
+++ b/tests/acceptance/roles-test.js
@@ -1,11 +1,20 @@
-import { visit, currentURL } from "@ember/test-helpers";
+import {
+  visit,
+  currentURL,
+  click,
+  fillIn,
+  waitUntil,
+} from "@ember/test-helpers";
 import { setupMirage } from "ember-cli-mirage/test-support";
 import { setupApplicationTest } from "ember-qunit";
 import { module, test } from "qunit";
 
+import setupRequestAssertions from "./../helpers/assert-request";
+
 module("Acceptance | roles", function (hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);
+  setupRequestAssertions(hooks);
 
   test("list view /roles", async function (assert) {
     assert.expect(6);
@@ -26,4 +35,80 @@ module("Acceptance | roles", function (hooks) {
       .dom(`[data-test-role-name="${role.id}"] a`)
       .hasAttribute("href", `/roles/${role.id}`);
   });
+
+  test("detail view /roles/:id", async function (assert) {
+    assert.expect(8);
+
+    const role = this.server.create("role");
+
+    await visit(`/roles/${role.id}`);
+
+    assert.equal(currentURL(), `/roles/${role.id}`);
+
+    assert.dom('[name="slug"]').hasValue(role.slug);
+    assert.dom('[name="slug"]').hasAttribute("disabled");
+    assert.dom('[name="name"]').hasValue(role.name.en);
+    assert.dom('[name="description"]').hasValue(role.description.en);
+
+    const name = "Role 1",
+      description = "The one and only";
+
+    await fillIn('[name="name"]', name);
+    await fillIn('[name="description"]', description);
+
+    this.assertRequest("PATCH", `/api/v1/roles/${role.id}`, (request) => {
+      const attributes = JSON.parse(request.requestBody).data.attributes;
+
+      assert.equal(attributes.name.en, name);
+      assert.equal(attributes.description.en, description);
+    });
+    await click("[data-test-save]");
+
+    await click("[data-test-back]");
+    assert.equal(currentURL(), "/roles");
+  });
+
+  test("delete /roles/:id", async function (assert) {
+    assert.expect(5);
+
+    const role = this.server.create("role", {
+      name: "test 1",
+      description: "this is test one.",
+    });
+
+    await visit(`/roles`);
+    assert.dom("[data-test-role-name]").exists({ count: 1 });
+
+    await click("[data-test-role-name] a");
+    assert.equal(currentURL(), `/roles/${role.id}`);
+
+    this.assertRequest("DELETE", `/api/v1/roles/:id`, (request) => {
+      assert.equal(role.id, request.params.id);
+    });
+    await click("[data-test-delete]");
+
+    // For some reason the await click is not actually waiting for the delete task to finish.
+    // Probably some runloop issue.
+    await waitUntil(() => currentURL() !== `/roles/${role.id}`);
+
+    assert.equal(currentURL(), `/roles?page=1`);
+    assert.dom("[data-test-role-name]").doesNotExist();
+  });
+
+  test("detail view /roles/:id permission table", async function (assert) {
+    assert.expect(4);
+
+    const role = this.server.create("role");
+    this.server.createList("permission", 10);
+
+    this.assertRequest("GET", `/api/v1/permissions`, (request) => {
+      assert.equal(request.queryParams["filter[role]"], role.id);
+    });
+
+    await visit(`/roles/${role.id}`);
+    assert.equal(currentURL(), `/roles/${role.id}`);
+
+    assert.dom("[data-test-permissions]").exists();
+    assert.dom("[data-test-permissions] [data-test-row]").exists({ count: 10 });
+  });
 });