diff --git a/addon/components/hyper-table/cell-renderers/image.hbs b/addon/components/hyper-table/cell-renderers/image.hbs
index f3742535..a7847ebf 100644
--- a/addon/components/hyper-table/cell-renderers/image.hbs
+++ b/addon/components/hyper-table/cell-renderers/image.hbs
@@ -1,5 +1,5 @@
 <div>
-  {{upf-image src=this.imageURL classNames="upf-image--round-36"}}
+  <OSS::Avatar @image={{this.imageURL}} @size="sm" @initials={{this.initials}} />
 </div>
 
 {{#if (gt @column.labels.length 0)}}
diff --git a/addon/components/hyper-table/cell-renderers/image.js b/addon/components/hyper-table/cell-renderers/image.js
index 12b54fa7..86ef41f2 100644
--- a/addon/components/hyper-table/cell-renderers/image.js
+++ b/addon/components/hyper-table/cell-renderers/image.js
@@ -5,4 +5,14 @@ export default class ImageCellRenderer extends Component {
   get imageURL() {
     return get(this.args.item, this.args.column.key);
   }
+
+  get initials() {
+    return (
+      (get(this.args.item, this.args.column.labels[0]) || '')
+        .match(/\b[a-zA-Z]/g)
+        ?.slice(0, 2)
+        .join('')
+        .toUpperCase() || ''
+    );
+  }
 }
diff --git a/addon/core/handler.ts b/addon/core/handler.ts
index 3209dbf3..77f74592 100644
--- a/addon/core/handler.ts
+++ b/addon/core/handler.ts
@@ -21,6 +21,8 @@ import { isEmpty } from '@ember/utils';
 
 export type RowMutator = (row: Row) => boolean;
 
+const ROWS_PER_PAGE = 30;
+
 export default class TableHandler {
   private _context: unknown;
   private _renderingResolver?: RendererResolver;
@@ -103,7 +105,7 @@ export default class TableHandler {
     this.loadingRows = true;
 
     return this.rowsFetcher
-      .fetch(this.currentPage, 20)
+      .fetch(this.currentPage, ROWS_PER_PAGE)
       .then(({ rows, meta }) => {
         this.rows = [...this.rows, ...rows.filter((row) => !this.rows.map((r) => r.record_id).includes(row.record_id))];
         this.rowsMeta = meta;
diff --git a/app/styles/cells.less b/app/styles/cells.less
index ae707f39..c23bb313 100644
--- a/app/styles/cells.less
+++ b/app/styles/cells.less
@@ -1,4 +1,4 @@
-@cell-height: 60px;
+@cell-height: 50px;
 
 .hypertable__cell {
   border-bottom: 1px solid var(--color-border-default);
@@ -9,7 +9,7 @@
 
   height: @cell-height;
   max-height: @cell-height;
-  padding: var(--spacing-px-12);
+  padding: var(--spacing-px-3) var(--spacing-px-12);
   width: 100%;
 
   .ember-flatpickr-input {
diff --git a/app/styles/columns.less b/app/styles/columns.less
index 1c37003f..69644350 100644
--- a/app/styles/columns.less
+++ b/app/styles/columns.less
@@ -66,7 +66,7 @@
   z-index: 15;
   height: @cell-height;
   max-height: @cell-height;
-  padding: var(--spacing-px-12) var(--spacing-px-18);
+  padding: var(--spacing-px-3) var(--spacing-px-12);
   border-left: 1px solid var(--color-border-default);
   border-bottom: 1px solid var(--color-border-default);
   width: 100%;
diff --git a/tests/integration/components/hyper-table/cell-renderers/image-test.js b/tests/integration/components/hyper-table/cell-renderers/image-test.js
index 601f59c2..ce61eb48 100644
--- a/tests/integration/components/hyper-table/cell-renderers/image-test.js
+++ b/tests/integration/components/hyper-table/cell-renderers/image-test.js
@@ -12,9 +12,7 @@ module('Integration | Component | hyper-table/cell-renderers/image', function (h
 
     await render(hbs`<HyperTable::CellRenderers::Image @item={{this.item}} @column={{this.column}} />`);
 
-    assert
-      .dom('div.upf-image.upf-image--round-36')
-      .hasAttribute('style', 'background-image: url("foo.png"), url("assets/images/no-image.svg");');
+    assert.dom('.upf-avatar.upf-avatar--sm img').hasAttribute('src', 'foo.png');
   });
 
   module('it has labels to show', function () {
@@ -24,9 +22,7 @@ module('Integration | Component | hyper-table/cell-renderers/image', function (h
 
       await render(hbs`<HyperTable::CellRenderers::Image @item={{this.item}} @column={{this.column}} />`);
 
-      assert
-        .dom('div.upf-image.upf-image--round-36')
-        .hasAttribute('style', 'background-image: url("foo.png"), url("assets/images/no-image.svg");');
+      assert.dom('.upf-avatar.upf-avatar--sm img').exists();
 
       assert.dom('span.margin-left-xx-sm.text-ellipsis-160').hasText('FooBar');
     });
@@ -39,9 +35,7 @@ module('Integration | Component | hyper-table/cell-renderers/image', function (h
 
       await render(hbs`<HyperTable::CellRenderers::Image @item={{this.item}} @column={{this.column}} />`);
 
-      assert
-        .dom('div.upf-image.upf-image--round-36')
-        .hasAttribute('style', 'background-image: url("foo.png"), url("assets/images/no-image.svg");');
+      assert.dom('.upf-avatar.upf-avatar--sm img').exists();
 
       assert.dom('span.margin-left-xx-sm.text-ellipsis-160').hasText('FooBar');
       assert.dom('span.upf-notification--inline').exists();
diff --git a/tests/unit/core/handler-test.ts b/tests/unit/core/handler-test.ts
index 4650d3f2..32935ac4 100644
--- a/tests/unit/core/handler-test.ts
+++ b/tests/unit/core/handler-test.ts
@@ -242,7 +242,7 @@ module('Unit | core/handler', function (hooks) {
     // @ts-ignore
     assert.ok(rowsFetcherSpy.fetch.calledTwice);
     // @ts-ignore
-    assert.ok(rowsFetcherSpy.fetch.calledWithExactly(1, 20));
+    assert.ok(rowsFetcherSpy.fetch.calledWithExactly(1, 30));
     assert.equal(handler.rows.length, 3);
   });