diff --git a/app/assets/styles.css b/app/assets/styles.css
index 4fbbc47..10aa891 100644
--- a/app/assets/styles.css
+++ b/app/assets/styles.css
@@ -209,13 +209,6 @@ body {
         &[type='button'] {
           @apply cursor-pointer select-none;
         }
-
-        svg {
-          width: 1em;
-          height: 1em;
-          bottom: 0.1em;
-          position: relative;
-        }
       }
     }
   }
diff --git a/app/components/icons/arrow-down-thin.js b/app/components/icons/arrow-down-thin.js
new file mode 100644
index 0000000..eeaaeed
--- /dev/null
+++ b/app/components/icons/arrow-down-thin.js
@@ -0,0 +1 @@
+export { ArrowDownThin as default } from 'ember-mdi';
diff --git a/app/components/icons/arrow-up-thin.js b/app/components/icons/arrow-up-thin.js
new file mode 100644
index 0000000..3d5eded
--- /dev/null
+++ b/app/components/icons/arrow-up-thin.js
@@ -0,0 +1 @@
+export { ArrowUpThin as default } from 'ember-mdi';
diff --git a/app/components/icons/sort.js b/app/components/icons/sort.js
new file mode 100644
index 0000000..88f30d9
--- /dev/null
+++ b/app/components/icons/sort.js
@@ -0,0 +1 @@
+export { Sort as default } from 'ember-mdi';
diff --git a/app/components/royal-table/column.hbs b/app/components/royal-table/column.hbs
index bb4a559..e496bbb 100644
--- a/app/components/royal-table/column.hbs
+++ b/app/components/royal-table/column.hbs
@@ -8,22 +8,25 @@
     {{on 'click' this.handleSort}}
     {{! DOTO: align is depricated, use styles align instead }}
   >
-    {{#if @sortable}}
-      {{#if this.isAscSorted}}
-        <Icons::ArrowDown />
-      {{else if this.isDescSorted}}
-        <Icons::ArrowUp />
-      {{else}}
-        <Icons::ArrowUpDown />
+    <span class='inline-flex items-center'>
+      {{#if (has-block 'name')}}
+        {{yield to='name'}}
+      {{else if @name}}
+        {{@name}}
+      {{else if @prop}}
+        {{capitalize @prop}}
       {{/if}}
-    {{/if}}
-    {{#if (has-block 'name')}}
-      {{yield to='name'}}
-    {{else if @name}}
-      {{@name}}
-    {{else if @prop}}
-      {{capitalize @prop}}
-    {{/if}}
+
+      {{#if @sortable}}
+        {{#if this.isAscSorted}}
+          <Icons::ArrowDownThin class="fill-base-3 ml-0.5" @size={{14}} />
+        {{else if this.isDescSorted}}
+          <Icons::ArrowUpThin class="fill-base-3 ml-0.5" @size={{14}} />
+        {{else}}
+          <Icons::ArrowUpDown class="fill-base-3 ml-0.5" @size={{14}} />
+        {{/if}}
+      {{/if}}
+    </span>
   </th>
 {{else if this.isBody}}
   <td align={{@align}} ...attributes>