diff --git a/app/styles/app.css b/app/styles/app.css
index 7d91700..f65e707 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -6,3 +6,42 @@
 .md-icon {
   fill: currentColor;
 }
+
+.royal-table {
+  @apply border border-light text-left mb-4;
+
+  thead {
+    @apply bg-light;
+
+    tr {
+      @apply border-b border-light;
+
+      th {
+        @apply px-4 py-4 text-dark font-normal whitespace-nowrap;
+
+        &[type="button"] {
+          @apply cursor-pointer select-none;
+        }
+
+        svg {
+          width: 1em;
+          height: 1em;
+          bottom: .1em;
+          position: relative;
+        }
+      }
+    }
+  }
+
+  tbody {
+    tr {
+      &:nth-child(even) {
+        @apply bg-light;
+      }
+
+      td {
+        @apply px-4 py-2 text-dark;
+      }
+    }
+  }
+}
diff --git a/app/templates/admin/indexes/item/settings.hbs b/app/templates/admin/indexes/item/settings.hbs
index b52e888..801c536 100644
--- a/app/templates/admin/indexes/item/settings.hbs
+++ b/app/templates/admin/indexes/item/settings.hbs
@@ -1,63 +1,47 @@
-{{page-title "Settings"}}
-
-{{#let (hash td="px-4 py-2 text-left whitespace-nowrap") as |classes|}}
-  <label class="mb-2">Attributes</label>
-  <table class="mb-4 table-auto">
-    <thead>
-      <tr class="bg-gray-50">
-        <th class={{classes.td}}>#</th>
-        <th class={{classes.td}}>Displayed</th>
-        <th class={{classes.td}}>Filterable</th>
-        <th class={{classes.td}}>Searchable</th>
-        <th class={{classes.td}}>Sortable</th>
-      </tr>
-    </thead>
-    <tbody>
-      {{#each @model.attributes as |attribute|}}
-        <tr>
-          <td class={{classes.td}}>{{attribute.name}}</td>
-          <td class={{classes.td}}>
-            <InputCheckbox
-              @checked={{attribute.displayed}}
-              @onChange={{set attribute 'displayed'}}
-            />
-          </td>
-          <td class={{classes.td}}>
-            <InputCheckbox
-              @checked={{attribute.filterable}}
-              @onChange={{set attribute 'filterable'}}
-            />
-          </td>
-          <td class={{classes.td}}>
-            <InputCheckbox
-              @checked={{attribute.searchable}}
-              @onChange={{set attribute 'searchable'}}
-            />
-          </td>
-          <td class={{classes.td}}>
-            <InputCheckbox
-              @checked={{attribute.sortable}}
-              @onChange={{set attribute 'sortable'}}
-            />
-          </td>
-        </tr>
-      {{/each}}
-    </tbody>
-  </table>
-{{/let}}
-
+{{page-title 'Settings'}}
+<label class="mb-2">
+  Attributes
+</label>
+<RoyalTable @data={{@model.attributes}} as |Column dataRow|>
+  <Column @prop="name" />
+  <Column @name="Displayed">
+    <InputCheckbox
+      @checked={{dataRow.displayed}}
+      @onChange={{set dataRow 'displayed'}}
+    />
+  </Column>
+  <Column @name="Filterable">
+    <InputCheckbox
+      @checked={{dataRow.filterable}}
+      @onChange={{set dataRow 'filterable'}}
+    />
+  </Column>
+  <Column @name="Searchable">
+    <InputCheckbox
+      @checked={{dataRow.searchable}}
+      @onChange={{set dataRow 'searchable'}}
+    />
+  </Column>
+  <Column @name="Sortable">
+    <InputCheckbox
+      @checked={{dataRow.sortable}}
+      @onChange={{set dataRow 'sortable'}}
+    />
+  </Column>
+</RoyalTable>
 <InputSelect
   @label="Distinct attribute"
   @options={{keys @model.stats.fieldDistribution}}
   @selected={{@model.settings.distinctAttribute}}
   @onChange={{set @model.settings 'distinctAttribute'}}
-  @allowClear={{true}}
-  as |option|>
+  @allowClear={{true}} as |option|
+>
   {{option}}
 </InputSelect>
-
 <div class="mb-4">
-  <label class="mb-2">Ranking rules</label>
+  <label class="mb-2">
+    Ranking rules
+  </label>
   <SortableObjects
     @sortableObjectList={{@model.settings.rankingRules}}
     @sortingScope="a"
@@ -71,7 +55,7 @@
         class="flex items-center px-4 py-2 mb-2 border max-w-md"
         @dragHandle=".md-icon"
       >
-        <MdIcon @icon="drag-vertical" class="mr-2 -ml-2 cursor-move"/>
+        <MdIcon @icon="drag-vertical" class="mr-2 -ml-2 cursor-move" />
         {{item}}
         <MdIcon
           @icon="close-thick"
@@ -86,37 +70,32 @@
     <InputSelect
       @options={{this.rankingRulesFields}}
       @onChange={{this.selectNewRankingRule}}
-      @placeholder="Add field"
-      as |option|>
+      @placeholder="Add field" as |option|
+    >
       {{option}}
     </InputSelect>
   {{/if}}
 </div>
-
 <InputTextarea
   @label="Stop-words"
   @value={{json-stringify @model.settings.stopWords}}
   @onChange={{fn this.saveStrToJSON 'stopWords' (array)}}
-  @helper='JSON format'
+  @helper="JSON format"
 />
-
 <InputTextarea
   @label="Synonyms"
   @value={{json-stringify @model.settings.synonyms}}
   @onChange={{fn this.saveStrToJSON 'synonyms' this.emptyObj}}
-  @helper='JSON format'
+  @helper="JSON format"
 />
-
 <Button
   @text="Save"
   @pendingText="Saving"
   @fulfilledText="Done"
   @rejectedText="Error"
-
   @icon="database-arrow-up-outline"
   @pendingIcon="clock-outline"
   @fulfilledIcon="check"
   @rejectedIcon="alert-circle-outline"
-
   @onClick={{this.save}}
 />
diff --git a/ember-cli-build.js b/ember-cli-build.js
index e92a9fc..33d1c91 100644
--- a/ember-cli-build.js
+++ b/ember-cli-build.js
@@ -13,16 +13,9 @@ module.exports = function (defaults) {
       compile: {
         cacheInclude: [/.*\.(css|scss|hbs)$/, /.*tailwind.config.js$/],
         plugins: [
-          {
-            module: autoprefixer,
-            options: {},
-          },
-          {
-            module: tailwind,
-            options: {
-              config: './config/tailwind.config.js',
-            },
-          },
+          require('tailwindcss/nesting'),
+          require('tailwindcss')('./config/tailwind.config.js'),
+          require('autoprefixer'),
         ],
       },
     },
diff --git a/package-lock.json b/package-lock.json
index fd5eebc..6ba7f2a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -55,6 +55,7 @@
         "ember-qunit": "^5.1.5",
         "ember-resolver": "^8.0.3",
         "ember-resources": "^4.4.0",
+        "ember-royal-table": "github:kaermorchen/ember-royal-table#master",
         "ember-set-helper": "^2.0.1",
         "ember-source": "~4.2.0",
         "ember-template-lint": "^4.2.0",
@@ -14538,6 +14539,19 @@
         "node": "8.* || 10.* || >= 12"
       }
     },
+    "node_modules/ember-royal-table": {
+      "version": "0.0.0",
+      "resolved": "git+ssh://git@github.com/kaermorchen/ember-royal-table.git#211c5411cc9f5aee3ed90f5b4cc9a71edbc2f422",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ember-cli-babel": "^7.26.11",
+        "ember-cli-htmlbars": "^6.0.1"
+      },
+      "engines": {
+        "node": "12.* || 14.* || >= 16"
+      }
+    },
     "node_modules/ember-set-helper": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/ember-set-helper/-/ember-set-helper-2.0.1.tgz",
@@ -37771,6 +37785,15 @@
         "recast": "^0.18.1"
       }
     },
+    "ember-royal-table": {
+      "version": "git+ssh://git@github.com/kaermorchen/ember-royal-table.git#211c5411cc9f5aee3ed90f5b4cc9a71edbc2f422",
+      "dev": true,
+      "from": "ember-royal-table@kaermorchen/ember-royal-table#master",
+      "requires": {
+        "ember-cli-babel": "^7.26.11",
+        "ember-cli-htmlbars": "^6.0.1"
+      }
+    },
     "ember-set-helper": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/ember-set-helper/-/ember-set-helper-2.0.1.tgz",
diff --git a/package.json b/package.json
index 3375c46..9c2c61d 100644
--- a/package.json
+++ b/package.json
@@ -75,6 +75,7 @@
     "ember-qunit": "^5.1.5",
     "ember-resolver": "^8.0.3",
     "ember-resources": "^4.4.0",
+    "ember-royal-table": "github:kaermorchen/ember-royal-table#master",
     "ember-set-helper": "^2.0.1",
     "ember-source": "~4.2.0",
     "ember-template-lint": "^4.2.0",