diff --git a/app/components/form-element.hbs b/app/components/form-element.hbs
new file mode 100644
index 0000000..897dcfd
--- /dev/null
+++ b/app/components/form-element.hbs
@@ -0,0 +1,19 @@
+<div class="mb-4">
+  {{#if @label}}
+    <label for={{this.id}} class="block font-medium mb-1 text-dark {{if @required "after:content-['*'] after:text-red-500"}}">
+      {{~ capitalize @label ~}}
+    </label>
+  {{/if}}
+
+  {{#if (has-block)}}
+    {{yield}}
+  {{else}}
+    {{@value}}
+  {{/if}}
+
+  {{#if @helper}}
+    <div class="mt-1 text-sm">
+      {{@helper}}
+    </div>
+  {{/if}}
+</div>
diff --git a/app/router.js b/app/router.js
index 0999403..ed08932 100644
--- a/app/router.js
+++ b/app/router.js
@@ -16,7 +16,7 @@ Router.map(function () {
       });
     });
     this.route('keys', function () {
-      this.route('key');
+      this.route('key', { path: '/:uid' });
     });
   });
   this.route('login');
diff --git a/app/routes/admin/keys.js b/app/routes/admin/keys.js
index b92f324..cb8d863 100644
--- a/app/routes/admin/keys.js
+++ b/app/routes/admin/keys.js
@@ -1,10 +1,3 @@
 import Route from '@ember/routing/route';
-import { inject as service } from '@ember/service';
 
-export default class AdminKeysRoute extends Route {
-  @service meilisearch;
-
-  model() {
-    return this.meilisearch.getKeys();
-  }
-}
+export default class AdminKeysRoute extends Route {}
diff --git a/app/routes/admin/keys/index.js b/app/routes/admin/keys/index.js
new file mode 100644
index 0000000..258153d
--- /dev/null
+++ b/app/routes/admin/keys/index.js
@@ -0,0 +1,10 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+
+export default class AdminKeysIndexRoute extends Route {
+  @service meilisearch;
+
+  model() {
+    return this.meilisearch.getKeys();
+  }
+}
diff --git a/app/routes/admin/keys/key.js b/app/routes/admin/keys/key.js
index 17008f9..95eb9cf 100644
--- a/app/routes/admin/keys/key.js
+++ b/app/routes/admin/keys/key.js
@@ -1,3 +1,10 @@
 import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
 
-export default class AdminKeysKeyRoute extends Route {}
+export default class AdminKeysKeyRoute extends Route {
+  @service meilisearch;
+
+  model({ uid }) {
+    return this.meilisearch.getKey(uid);
+  }
+}
diff --git a/app/services/meilisearch.js b/app/services/meilisearch.js
index 3a78d52..8011c09 100644
--- a/app/services/meilisearch.js
+++ b/app/services/meilisearch.js
@@ -24,4 +24,8 @@ export default class MeilisearchService extends Service {
   getKeys() {
     return query('keys');
   }
+
+  getKey(uid) {
+    return query(`keys/${uid}`);
+  }
 }
diff --git a/app/templates/admin/keys.hbs b/app/templates/admin/keys.hbs
index 8e9e706..c24cd68 100644
--- a/app/templates/admin/keys.hbs
+++ b/app/templates/admin/keys.hbs
@@ -1,13 +1 @@
-<h1 class='text-3xl mb-4'>Keys</h1>
-
-<RoyalTable @data={{@model.results}} class='w-full' as |Row data|>
-  <Row as |Column|>
-    <Column @prop='name'>
-      <LinkTo @route='admin.keys.key' @model={{data.uid}}>
-        {{data.name}}
-      </LinkTo>
-    </Column>
-    <Column @prop='actions' />
-    <Column @prop='indexes' />
-  </Row>
-</RoyalTable>
+{{outlet}}
diff --git a/app/templates/admin/keys/index.hbs b/app/templates/admin/keys/index.hbs
new file mode 100644
index 0000000..8e9e706
--- /dev/null
+++ b/app/templates/admin/keys/index.hbs
@@ -0,0 +1,13 @@
+<h1 class='text-3xl mb-4'>Keys</h1>
+
+<RoyalTable @data={{@model.results}} class='w-full' as |Row data|>
+  <Row as |Column|>
+    <Column @prop='name'>
+      <LinkTo @route='admin.keys.key' @model={{data.uid}}>
+        {{data.name}}
+      </LinkTo>
+    </Column>
+    <Column @prop='actions' />
+    <Column @prop='indexes' />
+  </Row>
+</RoyalTable>
diff --git a/app/templates/admin/keys/key.hbs b/app/templates/admin/keys/key.hbs
index 436ef93..0ef3f3d 100644
--- a/app/templates/admin/keys/key.hbs
+++ b/app/templates/admin/keys/key.hbs
@@ -1,2 +1,40 @@
-{{page-title "Key"}}
-{{outlet}}
\ No newline at end of file
+<h1 class='text-3xl mb-4'>{{@model.name}}</h1>
+
+<FormElement @label='description' @value={{@model.description}} />
+<FormElement @label='key' @value={{@model.key}} />
+<FormElement @label='uid' @value={{@model.uid}} />
+<FormElement @label='actions' @value={{@model.actions}} />
+<FormElement @label='indexes' @value={{@model.indexes}} />
+<FormElement @label='expiresAt'>
+  {{date-time-format
+    @model.expiresAt
+    year='numeric'
+    month='numeric'
+    day='numeric'
+    hour='numeric'
+    minute='numeric'
+    second='numeric'
+  }}
+</FormElement>
+<FormElement @label='createdAt'>
+  {{date-time-format
+    @model.createdAt
+    year='numeric'
+    month='numeric'
+    day='numeric'
+    hour='numeric'
+    minute='numeric'
+    second='numeric'
+  }}
+</FormElement>
+<FormElement @label='updatedAt'>
+  {{date-time-format
+    @model.updatedAt
+    year='numeric'
+    month='numeric'
+    day='numeric'
+    hour='numeric'
+    minute='numeric'
+    second='numeric'
+  }}
+</FormElement>
diff --git a/tests/integration/components/form-element-test.js b/tests/integration/components/form-element-test.js
new file mode 100644
index 0000000..28f4f40
--- /dev/null
+++ b/tests/integration/components/form-element-test.js
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'meiliadmin/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | form-element', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<FormElement />`);
+
+    assert.dom(this.element).hasText('');
+
+    // Template block usage:
+    await render(hbs`
+      <FormElement>
+        template block text
+      </FormElement>
+    `);
+
+    assert.dom(this.element).hasText('template block text');
+  });
+});
diff --git a/tests/unit/routes/admin/keys/index-test.js b/tests/unit/routes/admin/keys/index-test.js
new file mode 100644
index 0000000..856290f
--- /dev/null
+++ b/tests/unit/routes/admin/keys/index-test.js
@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'meiliadmin/tests/helpers';
+
+module('Unit | Route | admin/keys/index', function (hooks) {
+  setupTest(hooks);
+
+  test('it exists', function (assert) {
+    let route = this.owner.lookup('route:admin/keys/index');
+    assert.ok(route);
+  });
+});