diff --git a/addon/components/hyper-table-v2/filtering-renderers/common/ordering.hbs b/addon/components/hyper-table-v2/filtering-renderers/common/ordering.hbs
index 196b3bf0..115b5c60 100644
--- a/addon/components/hyper-table-v2/filtering-renderers/common/ordering.hbs
+++ b/addon/components/hyper-table-v2/filtering-renderers/common/ordering.hbs
@@ -1,14 +1,8 @@
-<div class="fx-col">
+<div class="fx-col" ...attributes>
   <label>{{@label}}</label>
-  <div class="btn-group upf-radio-group" ...attributes>
-    {{#each-in this.orderingOptions as |label value|}}
-      <RadioButton
-        @value={{value}}
-        @currentValue={{this.currentOrderingDirection}}
-        @label={{label}}
-        @options={{this.orderingOptions}}
-        @onCheck={{this.orderingDirectionChanged}}
-      />
-    {{/each-in}}
-  </div>
+  <OSS::ToggleButtons
+    @toggles={{this.toggles}}
+    @selectedToggle={{this.currentOrderingDirection}}
+    @onSelection={{this.orderingDirectionChanged}}
+  />
 </div>
\ No newline at end of file
diff --git a/addon/components/hyper-table-v2/filtering-renderers/common/ordering.ts b/addon/components/hyper-table-v2/filtering-renderers/common/ordering.ts
index 0ff8351c..0b3cbe15 100644
--- a/addon/components/hyper-table-v2/filtering-renderers/common/ordering.ts
+++ b/addon/components/hyper-table-v2/filtering-renderers/common/ordering.ts
@@ -20,24 +20,34 @@ const defaultOrderingDirections: { [key: string]: OrderDirection } = {
 const THROTTLE_TIME = 300;
 
 export default class HyperTableV2FilteringRenderersOrdering extends Component<HyperTableV2FilteringRenderersOrderingArgs> {
-  @tracked _selectedDirection: OrderDirection | undefined;
+  @tracked _selectedDirection?: OrderDirection | null;
 
   constructor(owner: unknown, args: HyperTableV2FilteringRenderersOrderingArgs) {
     super(owner, args);
 
     args.handler.on('reset-columns', (columns) => {
       if (columns.includes(args.column)) {
-        this._selectedDirection = undefined;
+        this._selectedDirection = null;
       }
     });
   }
 
+  get toggles(): { label: string; value: OrderDirection }[] {
+    return Object.keys(this.orderingOptions).reduce((acc: { label: string; value: OrderDirection }[], v: string) => {
+      acc.push({
+        label: v,
+        value: this.orderingOptions[v] as OrderDirection
+      });
+      return acc;
+    }, []);
+  }
+
   get orderingOptions() {
-    return this.args?.orderingOptions || defaultOrderingDirections;
+    return this.args.orderingOptions ?? defaultOrderingDirections;
   }
 
-  get currentOrderingDirection(): OrderDirection | undefined {
-    return this._selectedDirection || this.args.column.order?.direction;
+  get currentOrderingDirection(): OrderDirection | null {
+    return (this._selectedDirection || this.args.column.order?.direction) ?? null;
   }
 
   @action
diff --git a/addon/components/hyper-table-v2/filtering-renderers/common/search.hbs b/addon/components/hyper-table-v2/filtering-renderers/common/search.hbs
index 106844a5..eaef3e0f 100644
--- a/addon/components/hyper-table-v2/filtering-renderers/common/search.hbs
+++ b/addon/components/hyper-table-v2/filtering-renderers/common/search.hbs
@@ -5,6 +5,8 @@
       @value={{this.searchQuery}}
       @onChange={{this.onInputChanged}}
       @placeholder={{t "hypertable.column.filtering.search_term.placeholder"}}
+      {{(if (eq @type "number") (modifier "did-insert" this.setupOnlyNumericListener))}}
+      {{(if (eq @type "number") (modifier "will-destroy" this.teardownOnlyNumericListener))}}
     >
       <:suffix>
         {{#if (gt this.searchQuery.length 0)}}
diff --git a/addon/components/hyper-table-v2/filtering-renderers/common/search.ts b/addon/components/hyper-table-v2/filtering-renderers/common/search.ts
index 7de24190..c084ee40 100644
--- a/addon/components/hyper-table-v2/filtering-renderers/common/search.ts
+++ b/addon/components/hyper-table-v2/filtering-renderers/common/search.ts
@@ -5,10 +5,12 @@ import { tracked } from '@glimmer/tracking';
 
 import TableHandler from '@upfluence/hypertable/core/handler';
 import { Column } from '@upfluence/hypertable/core/interfaces';
+import { onlyNumeric } from '@upfluence/hypertable/utils';
 
 interface HyperTableV2FilteringRenderersSearchArgs {
   handler: TableHandler;
   column: Column;
+  type?: string;
 }
 
 const SEARCH_DEBOUNCE_TIME: number = 300;
@@ -28,6 +30,16 @@ export default class HyperTableV2FilteringRenderersSearch extends Component<Hype
     });
   }
 
+  setupOnlyNumericListener(element: HTMLElement): void {
+    const input = element.querySelector('input');
+    input?.addEventListener('keydown', onlyNumeric);
+  }
+
+  teardownOnlyNumericListener(element: HTMLElement): void {
+    const input = element.querySelector('input');
+    input?.removeEventListener('keydown', onlyNumeric);
+  }
+
   @action
   onInputChanged(): void {
     debounce(this, this._applyFilters, SEARCH_DEBOUNCE_TIME);
diff --git a/addon/components/hyper-table-v2/filtering-renderers/date.hbs b/addon/components/hyper-table-v2/filtering-renderers/date.hbs
index 1dd50f39..48a6b2a5 100644
--- a/addon/components/hyper-table-v2/filtering-renderers/date.hbs
+++ b/addon/components/hyper-table-v2/filtering-renderers/date.hbs
@@ -15,21 +15,13 @@
   {{#if @column.definition.filterable}}
     <div class="fx-col">
       <label>{{t "hypertable.column.filtering.label"}}</label>
-
-      <div
-        class="btn-group upf-radio-group"
+      <OSS::ToggleButtons
+        @toggles={{this.filteringOptions}}
+        @selectedToggle={{this.filterOption}}
+        @onSelection={{this.filterOptionChanged}}
         data-control-name={{concat "hypertable__column_filtering_for_" @column.definition.key "_filter_by_radiogroup"}}
-      >
-        {{#each-in this.filteringOptions as |label value|}}
-          <RadioButton
-            @value={{value}}
-            @currentValue={{this.filterOption}}
-            @label={{label}}
-            @options={{this.filteringOptions}}
-            @onCheck="filterOptionChanged"
-          />
-        {{/each-in}}
-      </div>
+      />
+
       <div
         class="filters"
         data-control-name={{concat "hypertable__column_filtering_for_" @column.definition.key "_date_range_inputs"}}
diff --git a/addon/components/hyper-table-v2/filtering-renderers/date.ts b/addon/components/hyper-table-v2/filtering-renderers/date.ts
index 56ca8eca..1224733d 100644
--- a/addon/components/hyper-table-v2/filtering-renderers/date.ts
+++ b/addon/components/hyper-table-v2/filtering-renderers/date.ts
@@ -20,10 +20,10 @@ export default class HyperTableV2FilteringRenderersDate extends Component<HyperT
 
   private _calendarContainer: any = null;
 
-  filteringOptions = Object.freeze({
-    Moving: 'moving',
-    Fixed: 'fixed'
-  });
+  filteringOptions: { label: string; value: FilterOption }[] = [
+    { label: 'Moving', value: 'moving' },
+    { label: 'Fixed', value: 'fixed' }
+  ];
 
   movingDateOptions = Object.freeze({
     Today: 'today',
diff --git a/addon/components/hyper-table-v2/filtering-renderers/numeric.hbs b/addon/components/hyper-table-v2/filtering-renderers/numeric.hbs
index 78ab7a72..419fc2ec 100644
--- a/addon/components/hyper-table-v2/filtering-renderers/numeric.hbs
+++ b/addon/components/hyper-table-v2/filtering-renderers/numeric.hbs
@@ -19,17 +19,20 @@
       @activateWithValue={{this.hasBoundFiltersDefined}}
       data-control-name={{concat "hypertable__column_filtering_for_" @column.definition.key "_existence_selector"}}
     />
-    <div class="fx-row fx-gap-px-30">
+    <div class="fx-row fx-gap-px-12">
       <div class="fx-col">
         <label>{{t "hypertable.column.filtering.from"}}</label>
         <OSS::InputContainer>
           <:input>
             <Input
-              type="number"
-              @placeholder={{t "hypertable.column.filtering.from"}}
               @value={{this.lowerBoundFilter}}
+              @type="number"
+              placeholder={{t "hypertable.column.filtering.from"}}
+              aria-label={{t "hypertable.column.filtering.from"}}
               autocomplete="off"
               {{on "keydown" this.addRangeFilter}}
+              {{did-insert this.setupOnlyNumericListener}}
+              {{will-destroy this.teardownOnlyNumericListener}}
               data-control-name={{concat "hypertable__column_filtering_for_" @column.definition.key "_range_from"}}
             />
           </:input>
@@ -40,11 +43,13 @@
         <OSS::InputContainer>
           <:input>
             <Input
-              type="number"
-              @placeholder={{t "hypertable.column.filtering.to"}}
+              @type="number"
               @value={{this.upperBoundFilter}}
+              placeholder={{t "hypertable.column.filtering.to"}}
               autocomplete="off"
               {{on "keydown" this.addRangeFilter}}
+              {{did-insert this.setupOnlyNumericListener}}
+              {{will-destroy this.teardownOnlyNumericListener}}
               data-control-name={{concat "hypertable__column_filtering_for_" @column.definition.key "_range_to"}}
             />
           </:input>
diff --git a/addon/components/hyper-table-v2/filtering-renderers/numeric.ts b/addon/components/hyper-table-v2/filtering-renderers/numeric.ts
index 606c2af2..a1538f92 100644
--- a/addon/components/hyper-table-v2/filtering-renderers/numeric.ts
+++ b/addon/components/hyper-table-v2/filtering-renderers/numeric.ts
@@ -3,9 +3,11 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { isTesting } from '@embroider/macros';
 
+import { debounce } from '@ember/runloop';
+
 import TableHandler from '@upfluence/hypertable/core/handler';
 import { Column, OrderDirection } from '@upfluence/hypertable/core/interfaces';
-import { debounce } from '@ember/runloop';
+import { onlyNumeric } from '@upfluence/hypertable/utils';
 
 interface HyperTableV2FilteringRenderersNumericArgs {
   handler: TableHandler;
@@ -39,11 +41,14 @@ export default class HyperTableV2FilteringRenderersNumeric extends Component<Hyp
     return this.lowerBoundFilter || this.upperBoundFilter ? true : false;
   }
 
-  private _addRangeFilter(): void {
-    this.args.handler.applyFilters(this.args.column, [
-      ...(this.lowerBoundFilter ? [{ key: 'lower_bound', value: this.lowerBoundFilter }] : []),
-      ...(this.upperBoundFilter ? [{ key: 'upper_bound', value: this.upperBoundFilter }] : [])
-    ]);
+  setupOnlyNumericListener(element: HTMLElement): void {
+    const input = element.querySelector('input');
+    input?.addEventListener('keydown', onlyNumeric);
+  }
+
+  teardownOnlyNumericListener(element: HTMLElement): void {
+    const input = element.querySelector('input');
+    input?.removeEventListener('keydown', onlyNumeric);
   }
 
   @action
@@ -61,4 +66,11 @@ export default class HyperTableV2FilteringRenderersNumeric extends Component<Hyp
     this.lowerBoundFilter = '';
     this.upperBoundFilter = '';
   }
+
+  private _addRangeFilter(): void {
+    this.args.handler.applyFilters(this.args.column, [
+      ...(this.lowerBoundFilter ? [{ key: 'lower_bound', value: this.lowerBoundFilter }] : []),
+      ...(this.upperBoundFilter ? [{ key: 'upper_bound', value: this.upperBoundFilter }] : [])
+    ]);
+  }
 }
diff --git a/addon/components/hyper-table/filters-renderers/date.hbs b/addon/components/hyper-table/filters-renderers/date.hbs
index 7cbcbb9a..e1d13667 100644
--- a/addon/components/hyper-table/filters-renderers/date.hbs
+++ b/addon/components/hyper-table/filters-renderers/date.hbs
@@ -1,33 +1,22 @@
 {{#if @column.orderable}}
   <label>{{t "hypertable.column.ordering.label"}}</label>
-  <div class="btn-group upf-radio-group" data-control-name={{concat this._controlNamePrefix "_order_by_radiogroup"}}>
-    {{#each-in this.orderingOptions as |label value|}}
-      <RadioButton
-        @value={{value}}
-        @currentValue={{@column.orderBy}}
-        @label={{label}}
-        @options={{this.orderingOptions}}
-        @onCheck="orderingOptionChanged"
-      />
-    {{/each-in}}
-  </div>
+  <OSS::ToggleButtons
+    @toggles={{this.orderingOptions}}
+    @selectedToggle={{@column.orderBy}}
+    @onSelection={{this.orderingOptionChanged}}
+    data-control-name={{concat this._controlNamePrefix "_order_by_radiogroup"}}
+  />
 {{/if}}
 
 {{#if @column.filterable}}
   <div class={{if @column.orderable "margin-top-xx-sm"}}>
     <label>{{t "hypertable.column.filtering.label"}}</label>
-
-    <div class="btn-group upf-radio-group" data-control-name={{concat this._controlNamePrefix "_filter_by_radiogroup"}}>
-      {{#each-in this.filteringOptions as |label value|}}
-        <RadioButton
-          @value={{value}}
-          @currentValue={{this.filterOption}}
-          @label={{label}}
-          @options={{this.filteringOptions}}
-          @onCheck="filterOptionChanged"
-        />
-      {{/each-in}}
-    </div>
+    <OSS::ToggleButtons
+      @toggles={{this.filteringOptions}}
+      @selectedToggle={{this.filterOption}}
+      @onSelection={{this.filterOptionChanged}}
+      data-control-name={{concat this._controlNamePrefix "_filter_by_radiogroup"}}
+    />
 
     <div class="filters" data-control-name={{concat this._controlNamePrefix "_date_range_inputs"}}>
       {{#if (eq this.filterOption "fixed")}}
diff --git a/addon/components/hyper-table/filters-renderers/date.js b/addon/components/hyper-table/filters-renderers/date.js
index 3f56906d..d9ffa553 100644
--- a/addon/components/hyper-table/filters-renderers/date.js
+++ b/addon/components/hyper-table/filters-renderers/date.js
@@ -29,16 +29,16 @@ export default class DateFiltersRenderer extends FiltersRenderer {
   }
 
   get orderingOptions() {
-    return {
-      'Oldest — Newest': `${this.args.column.orderKey}:asc`,
-      'Newest — Oldest': `${this.args.column.orderKey}:desc`
-    };
+    return [
+      { label: 'Oldest — Newest', value: `${this.args.column.orderKey}:asc` },
+      { label: 'Newest — Oldest', value: `${this.args.column.orderKey}:desc` }
+    ];
   }
 
-  filteringOptions = Object.freeze({
-    Moving: 'moving',
-    Fixed: 'fixed'
-  });
+  filteringOptions = [
+    { label: 'Moving', value: 'moving' },
+    { label: 'Fixed', value: 'fixed' }
+  ];
 
   movingDateOptions = Object.freeze({
     Today: 'today',
diff --git a/addon/components/hyper-table/filters-renderers/money.hbs b/addon/components/hyper-table/filters-renderers/money.hbs
index e0e87b6d..615bc010 100644
--- a/addon/components/hyper-table/filters-renderers/money.hbs
+++ b/addon/components/hyper-table/filters-renderers/money.hbs
@@ -1,49 +1,65 @@
-{{#if column.orderable}}
-  {{#input-wrapper}}
+{{#if this.column.orderable}}
+  <div class="fx-col">
     <label>Order By</label>
-    <div class="btn-group upf-radio-group" data-control-name={{concat _controlNamePrefix "_order_by_radio"}}>
-      {{#each-in orderingOptions as |label value|}}
-        {{radio-button
-          value=value
-          currentValue=column.orderBy
-          label=label
-          options=orderingOptions
-          onCheck="orderingOptionChanged"
-        }}
-      {{/each-in}}
-    </div>
-  {{/input-wrapper}}
+    <OSS::ToggleButtons
+      @toggles={{this.orderingOptions}}
+      @selectedToggle={{this.column.orderBy}}
+      @onSelection={{action "orderingOptionChanged"}}
+      data-control-name={{concat this._controlNamePrefix "_order_by_radio"}}
+    />
+  </div>
 {{/if}}
 
-{{#if column.filterable}}
-  {{#input-wrapper classNames=(if column.orderable "margin-top-xx-sm")}}
+{{#if this.column.filterable}}
+  <div class={{concat "fx-col" (if this.column.orderable " margin-top-px-12")}}>
     <label>Display</label>
-    <div
-      class="btn-group upf-radio-group upf-radio-group--block"
-      data-control-name={{concat _controlNamePrefix "_filter_by_radio"}}
-    >
-      {{#each-in existenceFilters as |label value|}}
-        {{radio-button
-          value=value
-          currentValue=currentExistenceFilter
-          label=label
-          options=existenceFilters
-          onCheck="existenceFilterChanged"
-        }}
+    <div class="fx-col fx-gap-px-3" data-control-name={{concat this._controlNamePrefix "_filter_by_radio"}}>
+      {{#each-in this.existenceFilters as |label value|}}
+        <div class="fx-row fx-gap-px-6" role="button" {{on "click" (action "existenceFilterChanged" value)}}>
+          <OSS::RadioButton @selected={{eq this.currentExistenceFilter value}} />
+          <span class="font-color-gray-900">{{label}}</span>
+        </div>
       {{/each-in}}
     </div>
-  {{/input-wrapper}}
+  </div>
 
-  <div class="row" data-control-name={{concat _controlNamePrefix "_range_inputs"}}>
-    {{#input-wrapper classNames="col-xs-6"}}
+  <div
+    class="fx-row fx-gap-px-12 margin-top-px-12"
+    data-control-name={{concat this._controlNamePrefix "_range_inputs"}}
+  >
+    <div class="fx-col">
       <label>From</label>
-      {{input type="number" placeholder="From" value=lowerBoundFilter class="form-control upf-input"}}
-    {{/input-wrapper}}
+      <OSS::InputContainer>
+        <:input>
+          <Input
+            @value={{this.lowerBoundFilter}}
+            @type="number"
+            placeholder="From"
+            aria-label="From"
+            autocomplete="off"
+            {{did-insert this.setupOnlyNumericListener}}
+            {{will-destroy this.teardownOnlyNumericListener}}
+          />
+        </:input>
+      </OSS::InputContainer>
+    </div>
 
-    {{#input-wrapper classNames="col-xs-6"}}
+    <div class="fx-col">
       <label>To</label>
-      {{input type="number" placeholder="To" value=upperBoundFilter class="form-control upf-input"}}
-    {{/input-wrapper}}
+      <OSS::InputContainer>
+        <:input>
+          <Input
+            @value={{this.upperBoundFilter}}
+            @type="number"
+            placeholder="To"
+            aria-label="To"
+            autocomplete="off"
+            {{did-insert this.setupOnlyNumericListener}}
+            {{will-destroy this.teardownOnlyNumericListener}}
+          />
+        </:input>
+      </OSS::InputContainer>
+    </div>
   </div>
 
   <div class="margin-top-px-12 fx-row fx-malign-space-between">
diff --git a/addon/components/hyper-table/filters-renderers/numeric.hbs b/addon/components/hyper-table/filters-renderers/numeric.hbs
index 5d9bf362..51800a4e 100644
--- a/addon/components/hyper-table/filters-renderers/numeric.hbs
+++ b/addon/components/hyper-table/filters-renderers/numeric.hbs
@@ -1,49 +1,65 @@
-{{#if column.orderable}}
-  {{#input-wrapper}}
-    <label>Order By</label>
-    <div class="btn-group upf-radio-group" data-control-name={{concat _controlNamePrefix "_order_by_radiogroup"}}>
-      {{#each-in orderingOptions as |label value|}}
-        {{radio-button
-          value=value
-          currentValue=column.orderBy
-          label=label
-          options=orderingOptions
-          onCheck="orderingOptionChanged"
-        }}
-      {{/each-in}}
-    </div>
-  {{/input-wrapper}}
+{{#if this.column.orderable}}
+  <div class="fx-col fx-gap-px-6">
+    <span class="font-color-gray-500 font-size-md">Order By</span>
+    <OSS::ToggleButtons
+      @toggles={{this.orderingOptions}}
+      @selectedToggle={{this.column.orderBy}}
+      @onSelection={{action "orderingOptionChanged"}}
+      data-control-name={{concat this._controlNamePrefix "_order_by_radiogroup"}}
+    />
+  </div>
 {{/if}}
 
-{{#if column.filterable}}
-  {{#input-wrapper classNames=(if column.orderable "margin-top-xx-sm")}}
+{{#if this.column.filterable}}
+  <div class={{concat "fx-col" (if this.column.orderable " margin-top-px-12")}}>
     <label>Display</label>
-    <div
-      class="btn-group upf-radio-group upf-radio-group--block"
-      data-control-name={{concat _controlNamePrefix "_display_radiogroup"}}
-    >
-      {{#each-in existenceFilters as |label value|}}
-        {{radio-button
-          value=value
-          currentValue=currentExistenceFilter
-          label=label
-          options=existenceFilters
-          onCheck="existenceFilterChanged"
-        }}
+    <div class="fx-col fx-gap-px-3" data-control-name={{concat this._controlNamePrefix "_display_radiogroup"}}>
+      {{#each-in this.existenceFilters as |label value|}}
+        <div class="fx-row fx-gap-px-6" role="button" {{on "click" (action "existenceFilterChanged" value)}}>
+          <OSS::RadioButton @selected={{eq this.currentExistenceFilter value}} />
+          <span class="font-color-gray-900">{{label}}</span>
+        </div>
       {{/each-in}}
     </div>
-  {{/input-wrapper}}
+  </div>
 
-  <div class="row margin-top-xx-sm" data-control-name={{concat _controlNamePrefix "_range_radiogroup"}}>
-    {{#input-wrapper classNames="col-xs-6"}}
+  <div
+    class="fx-row fx-gap-px-12 margin-top-px-12"
+    data-control-name={{concat this._controlNamePrefix "_range_inputs"}}
+  >
+    <div class="fx-col">
       <label>From</label>
-      {{input type="number" placeholder="From" value=lowerBoundFilter class="form-control upf-input"}}
-    {{/input-wrapper}}
+      <OSS::InputContainer>
+        <:input>
+          <Input
+            @value={{this.lowerBoundFilter}}
+            @type="number"
+            placeholder="From"
+            aria-label="From"
+            autocomplete="off"
+            {{did-insert this.setupOnlyNumericListener}}
+            {{will-destroy this.teardownOnlyNumericListener}}
+          />
+        </:input>
+      </OSS::InputContainer>
+    </div>
 
-    {{#input-wrapper classNames="col-xs-6"}}
+    <div class="fx-col">
       <label>To</label>
-      {{input type="number" placeholder="To" value=upperBoundFilter class="form-control upf-input"}}
-    {{/input-wrapper}}
+      <OSS::InputContainer>
+        <:input>
+          <Input
+            @value={{this.upperBoundFilter}}
+            @type="number"
+            placeholder="To"
+            aria-label="To"
+            autocomplete="off"
+            {{did-insert this.setupOnlyNumericListener}}
+            {{will-destroy this.teardownOnlyNumericListener}}
+          />
+        </:input>
+      </OSS::InputContainer>
+    </div>
   </div>
 
   <div class="margin-top-px-12 fx-row fx-malign-space-between">
diff --git a/addon/components/hyper-table/filters-renderers/numeric.js b/addon/components/hyper-table/filters-renderers/numeric.js
index 47afe82b..dda111cf 100644
--- a/addon/components/hyper-table/filters-renderers/numeric.js
+++ b/addon/components/hyper-table/filters-renderers/numeric.js
@@ -3,6 +3,7 @@ import { computed, observer } from '@ember/object';
 import { debounce } from '@ember/runloop';
 
 import FiltersRendererMixin from '@upfluence/hypertable/mixins/filters-renderer';
+import { onlyNumeric } from '@upfluence/hypertable/utils';
 
 export default Component.extend(FiltersRendererMixin, {
   lowerBoundFilter: null,
@@ -14,10 +15,10 @@ export default Component.extend(FiltersRendererMixin, {
   },
 
   orderingOptions: computed('column.orderKey', function () {
-    return {
-      '0 — 9': `${this.column.orderKey}:asc`,
-      '9 — 0': `${this.column.orderKey}:desc`
-    };
+    return [
+      { label: '0 — 9', value: `${this.column.orderKey}:asc` },
+      { label: '9 — 0', value: `${this.column.orderKey}:desc` }
+    ];
   }),
 
   currentExistenceFilter: computed('column.filters.[]', 'lowerBoundFilter', 'upperBoundFilter', function () {
@@ -44,6 +45,16 @@ export default Component.extend(FiltersRendererMixin, {
     this.manager.hooks.onColumnsChange('columns:change');
   },
 
+  setupOnlyNumericListener(element) {
+    const input = element.querySelector('input');
+    input?.addEventListener('keydown', onlyNumeric);
+  },
+
+  teardownOnlyNumericListener(element) {
+    const input = element.querySelector('input');
+    input?.removeEventListener('keydown', onlyNumeric);
+  },
+
   didReceiveAttrs() {
     this._super();
     if (this.column) {
diff --git a/addon/components/hyper-table/filters-renderers/text.hbs b/addon/components/hyper-table/filters-renderers/text.hbs
index aac6abfe..c6421a68 100644
--- a/addon/components/hyper-table/filters-renderers/text.hbs
+++ b/addon/components/hyper-table/filters-renderers/text.hbs
@@ -1,51 +1,36 @@
-{{#if column.orderable}}
-  {{#input-wrapper}}
+{{#if this.column.orderable}}
+  <div class="fx-col">
     <label>Sort</label>
-    <div class="btn-group upf-radio-group" data-control-name={{concat _controlNamePrefix "_sort_radiogroup"}}>
-      {{#each-in orderingOptions as |label value|}}
-        {{radio-button
-          value=value
-          currentValue=column.orderBy
-          label=label
-          options=orderingOptions
-          onCheck="orderingOptionChanged"
-        }}
-      {{/each-in}}
-    </div>
-  {{/input-wrapper}}
+    <OSS::ToggleButtons
+      @toggles={{this.orderingOptions}}
+      @selectedToggle={{this.column.orderBy}}
+      @onSelection={{action "orderingOptionChanged"}}
+      data-control-name={{concat this._controlNamePrefix "_sort_radiogroup"}}
+    />
+  </div>
 {{/if}}
 
-{{#if column.filterable}}
-  {{#input-wrapper classNames=(if column.orderable "margin-top-xx-sm")}}
+{{#if this.column.filterable}}
+  <div class={{concat "fx-col" (if this.column.orderable " margin-top-px-12")}}>
     <label>Display</label>
-    <div
-      class="btn-group upf-radio-group upf-radio-group--block"
-      data-control-name={{concat _controlNamePrefix "_display_radiogroup"}}
-    >
-      {{#each-in existenceFilters as |label value|}}
-        {{radio-button
-          value=value
-          currentValue=currentExistenceFilter
-          label=label
-          options=existenceFilters
-          onCheck="existenceFilterChanged"
-        }}
+    <div class="fx-col fx-gap-px-3" data-control-name={{concat this._controlNamePrefix "_display_radiogroup"}}>
+      {{#each-in this.existenceFilters as |label value|}}
+        <div class="fx-row fx-gap-px-6" role="button" {{on "click" (action "existenceFilterChanged" value)}}>
+          <OSS::RadioButton @selected={{eq this.currentExistenceFilter value}} />
+          <span class="font-color-gray-900">{{label}}</span>
+        </div>
       {{/each-in}}
     </div>
-  {{/input-wrapper}}
+  </div>
 
-  {{#input-wrapper}}
+  <div class="fx-col margin-top-px-12">
     <label>Search</label>
-    <div>
-      <Input
-        type="text"
-        placeholder="Search..."
-        @value={{_searchQuery}}
-        data-control-name={{concat _controlNamePrefix "_search_input"}}
-        class="form-control upf-input"
-      />
-    </div>
-  {{/input-wrapper}}
+    <OSS::InputContainer
+      @value={{this._searchQuery}}
+      placeholder="Search..."
+      data-control-name={{concat this._controlNamePrefix "_search_input"}}
+    />
+  </div>
 
   <div class="margin-top-px-12 fx-row fx-malign-space-between">
     <OSS::Button @skin="destructive" @label="Remove field" {{action "removeColumn"}} />
diff --git a/addon/components/hyper-table/filters-renderers/text.js b/addon/components/hyper-table/filters-renderers/text.js
index a8f42dc7..3344bce9 100644
--- a/addon/components/hyper-table/filters-renderers/text.js
+++ b/addon/components/hyper-table/filters-renderers/text.js
@@ -9,10 +9,10 @@ export default Component.extend(FiltersRendererMixin, {
   _searchQuery: null,
 
   orderingOptions: computed('column.orderKey', function () {
-    return {
-      'A — Z': `${this.column.orderKey}:asc`,
-      'Z — A': `${this.column.orderKey}:desc`
-    };
+    return [
+      { label: 'A — Z', value: `${this.column.orderKey}:asc` },
+      { label: 'Z — A', value: `${this.column.orderKey}:desc` }
+    ];
   }),
 
   existenceFilters: {
diff --git a/addon/core/handler.ts b/addon/core/handler.ts
index 0ea06b7b..eb4d1d66 100644
--- a/addon/core/handler.ts
+++ b/addon/core/handler.ts
@@ -67,6 +67,7 @@ export default class TableHandler {
       .fetchColumns()
       .then(({ columns }) => {
         this.columns = columns;
+        this._lastOrderedColumn = columns.find((column) => column.order);
       })
       .catch(() => {
         this.communicationError = true;
diff --git a/addon/utils/index.ts b/addon/utils/index.ts
new file mode 100644
index 00000000..528e182c
--- /dev/null
+++ b/addon/utils/index.ts
@@ -0,0 +1,26 @@
+const NUMERIC_ONLY = /^\d$/i;
+const AUTHORIZED_INPUTS = [
+  'Backspace',
+  'Delete',
+  'ArrowLeft',
+  'ArrowRight',
+  'Tab',
+  'Shift',
+  'Control',
+  'ArrowUp',
+  'ArrowDown'
+];
+
+export function onlyNumeric(event: KeyboardEvent): void {
+  _ensureValueFormat(event, NUMERIC_ONLY);
+}
+
+function _ensureValueFormat(event: KeyboardEvent, regexp: RegExp): void {
+  if (['c', 'v', 'a'].includes(event.key) && (event.metaKey || event.ctrlKey)) {
+    return;
+  }
+
+  if (![regexp.test(event.key)].every((c) => c) && !AUTHORIZED_INPUTS.find((key: string) => key === event.key)) {
+    event.preventDefault();
+  }
+}
diff --git a/app/styles/columns.less b/app/styles/columns.less
index a6746122..9914cde0 100644
--- a/app/styles/columns.less
+++ b/app/styles/columns.less
@@ -290,6 +290,8 @@
   opacity: 0;
 
   .filters {
+    display: flex;
+    flex-direction: column;
     padding-top: var(--spacing-px-12);
 
     .filters__option {
diff --git a/app/utils/index.js b/app/utils/index.js
new file mode 100644
index 00000000..2760f7d9
--- /dev/null
+++ b/app/utils/index.js
@@ -0,0 +1 @@
+export { onlyNumeric } from '@upfluence/hypertable/utils';
diff --git a/package.json b/package.json
index b61d9a8b..3dae4807 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
     "ember-cli-typescript": "^4.2.1",
     "ember-flatpickr": "^3.1.1",
     "ember-named-blocks-polyfill": "^0.2.5",
-    "ember-sortable": "4.0.0",
+    "ember-sortable": "^4.0.3",
     "ember-truth-helpers": "^3.1.1",
     "moment": "^2.29.4",
     "tether": "^1.4.7"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bfa6b9f9..f189e2cb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -33,8 +33,8 @@ dependencies:
     specifier: ^0.2.5
     version: 0.2.5
   ember-sortable:
-    specifier: 4.0.0
-    version: 4.0.0(@babel/core@7.23.9)(@glint/template@1.2.1)(ember-source@3.28.12)
+    specifier: ^4.0.3
+    version: 4.0.3(@babel/core@7.23.9)(@glint/template@1.2.1)
   ember-truth-helpers:
     specifier: ^3.1.1
     version: 3.1.1
@@ -6728,17 +6728,6 @@ packages:
       - supports-color
     dev: false
 
-  /ember-get-config@2.1.1(@glint/template@1.2.1):
-    resolution: {integrity: sha512-uNmv1cPG/4qsac8oIf5txJ2FZ8p88LEpG4P3dNcjsJS98Y8hd0GPMFwVqpnzI78Lz7VYRGQWY4jnE4qm5R3j4g==}
-    engines: {node: 12.* || 14.* || >= 16}
-    dependencies:
-      '@embroider/macros': 1.13.4(@glint/template@1.2.1)
-      ember-cli-babel: 7.26.11
-    transitivePeerDependencies:
-      - '@glint/template'
-      - supports-color
-    dev: false
-
   /ember-intl@6.4.0(@babel/core@7.23.9)(@glint/template@1.2.1)(typescript@4.9.5)(webpack@5.88.2):
     resolution: {integrity: sha512-BXxscjgoqzXQ6tUSV8aJsQcUAIcfqLJnNjegarFWdBBHLEOffQ8xARhvQC0hW40zGi/RHFEyTTx7vbiCPGtP1A==}
     engines: {node: 16.* || >= 18}
@@ -6921,22 +6910,17 @@ packages:
       - supports-color
     dev: true
 
-  /ember-sortable@4.0.0(@babel/core@7.23.9)(@glint/template@1.2.1)(ember-source@3.28.12):
-    resolution: {integrity: sha512-fRR7946IXwIt7SPMqRN2dJ3Gxaw6ioF/fzv/yzOPRBAaLMRRy3U8BGqCM0bNnE8IRuhRd63ox98Y0aFIkK43Hw==}
+  /ember-sortable@4.0.3(@babel/core@7.23.9)(@glint/template@1.2.1):
+    resolution: {integrity: sha512-iZ898uEXhIe/ywmhU8ASJPOHU9HV77cCRcnls0QtFIdwHV6hOc5+yoNaySMsud563gPdo1kXbVClot30y9RCUQ==}
     engines: {node: 14.* || >= 16}
     dependencies:
-      '@ember/render-modifiers': 2.1.0(@babel/core@7.23.9)(@glint/template@1.2.1)(ember-source@3.28.12)
       '@ember/test-waiters': 3.0.2
+      '@embroider/macros': 1.13.4(@glint/template@1.2.1)
       ember-cli-babel: 7.26.11
-      ember-cli-htmlbars: 6.3.0
-      ember-cli-version-checker: 5.1.2
-      ember-get-config: 2.1.1(@glint/template@1.2.1)
       ember-modifier: 3.2.7(@babel/core@7.23.9)
-      ember-test-selectors: 6.0.0
     transitivePeerDependencies:
       - '@babel/core'
       - '@glint/template'
-      - ember-source
       - supports-color
     dev: false
 
@@ -7036,17 +7020,6 @@ packages:
       - supports-color
     dev: true
 
-  /ember-test-selectors@6.0.0:
-    resolution: {integrity: sha512-PgYcI9PeNvtKaF0QncxfbS68olMYM1idwuI8v/WxsjOGqUx5bmsu6V17vy/d9hX4mwmjgsBhEghrVasGSuaIgw==}
-    engines: {node: 12.* || 14.* || >= 16.*}
-    dependencies:
-      calculate-cache-key-for-tree: 2.0.0
-      ember-cli-babel: 7.26.11
-      ember-cli-version-checker: 5.1.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
   /ember-truth-helpers@3.1.1:
     resolution: {integrity: sha512-FHwJAx77aA5q27EhdaaiBFuy9No+8yaWNT5A7zs0sIFCmf14GbcLn69vJEp6mW7vkITezizGAWhw7gL0Wbk7DA==}
     engines: {node: 10.* || >= 12}
diff --git a/tests/dummy/app/controllers/application.ts b/tests/dummy/app/controllers/application.ts
index 54e50345..7ab9d631 100644
--- a/tests/dummy/app/controllers/application.ts
+++ b/tests/dummy/app/controllers/application.ts
@@ -23,6 +23,18 @@ const columnDefinitions = [
 ];
 
 const columns = [
+  { key: 'foo', extra: { filterable: true, category: 'influencer', clustering_key: 'instagram' } },
+  { key: 'time', extra: { orderable: true, filterable: true, category: 'influencer', type: 'timestamp' } },
+  { key: 'total', extra: { orderable: true, filterable: true, category: 'influencer', type: 'integer' } },
+  { key: 'bar', extra: { category: 'influencer', clustering_key: 'youtube' } },
+  { key: 'code', extra: { category: 'affiliation', clustering_key: '' } },
+
+  { key: 'foo', extra: { filterable: true, category: 'influencer', clustering_key: 'instagram' } },
+  { key: 'time', extra: { orderable: true, filterable: true, category: 'influencer', type: 'timestamp' } },
+  { key: 'total', extra: { orderable: true, filterable: true, category: 'influencer', type: 'integer' } },
+  { key: 'bar', extra: { category: 'influencer', clustering_key: 'youtube' } },
+  { key: 'code', extra: { category: 'affiliation', clustering_key: '' } },
+
   { key: 'foo', extra: { filterable: true, category: 'influencer', clustering_key: 'instagram' } },
   { key: 'time', extra: { orderable: true, filterable: true, category: 'influencer', type: 'timestamp' } },
   { key: 'total', extra: { orderable: true, filterable: true, category: 'influencer', type: 'integer' } },
diff --git a/tests/integration/components/hyper-table-v2/filtering-renderers/common/ordering-test.ts b/tests/integration/components/hyper-table-v2/filtering-renderers/common/ordering-test.ts
index bbdd5291..b14c97bc 100644
--- a/tests/integration/components/hyper-table-v2/filtering-renderers/common/ordering-test.ts
+++ b/tests/integration/components/hyper-table-v2/filtering-renderers/common/ordering-test.ts
@@ -28,11 +28,11 @@ module('Integration | Component | hyper-table-v2/filtering-renderers/common/orde
     this.column = this.handler.columns[0];
   });
 
-  test('it has the right data-control-name', async function (assert: Assert) {
+  test('it is properly rendered', async function (assert: Assert) {
     await render(
       hbs`<HyperTableV2::FilteringRenderers::Common::Ordering @handler={{this.handler}} @column={{this.column}} />`
     );
-    assert.dom('.btn-group').exists();
+    assert.dom('.oss-toggle-buttons-container').exists();
   });
 
   test('it uses the default orderingOptions when no @orderingOptions are passed', async function (assert: Assert) {
@@ -40,10 +40,10 @@ module('Integration | Component | hyper-table-v2/filtering-renderers/common/orde
       hbs`<HyperTableV2::FilteringRenderers::Common::Ordering @handler={{this.handler}} @column={{this.column}} />`
     );
 
-    assert.dom('.btn-group').exists();
-    assert.dom('.btn-group .btn').exists({ count: 2 });
-    assert.dom('.btn-group .btn:nth-child(1)').hasText('A — Z');
-    assert.dom('.btn-group .btn:nth-child(2)').hasText('Z — A');
+    assert.dom('.oss-toggle-buttons-container').exists();
+    assert.dom('.oss-toggle-buttons-container .oss-toggle-buttons-btn').exists({ count: 2 });
+    assert.dom('.oss-toggle-buttons-container .oss-toggle-buttons-btn:nth-child(1)').hasText('A — Z');
+    assert.dom('.oss-toggle-buttons-container .oss-toggle-buttons-btn:nth-child(2)').hasText('Z — A');
   });
 
   test('it properly displays @orderingOptions when they are passed', async function (assert: Assert) {
@@ -56,10 +56,10 @@ module('Integration | Component | hyper-table-v2/filtering-renderers/common/orde
                                                               @orderingOptions={{this.orderingOptions}} />`
     );
 
-    assert.dom('.btn-group').exists();
-    assert.dom('.btn-group .btn').exists({ count: 2 });
-    assert.dom('.btn-group .btn:nth-child(1)').hasText('Oldest — Newest');
-    assert.dom('.btn-group .btn:nth-child(2)').hasText('Newest — Oldest');
+    assert.dom('.oss-toggle-buttons-container').exists();
+    assert.dom('.oss-toggle-buttons-container .oss-toggle-buttons-btn').exists({ count: 2 });
+    assert.dom('.oss-toggle-buttons-container .oss-toggle-buttons-btn:nth-child(1)').hasText('Oldest — Newest');
+    assert.dom('.oss-toggle-buttons-container .oss-toggle-buttons-btn:nth-child(2)').hasText('Newest — Oldest');
   });
 
   test('it calls the Handler#applyOrder method correctly via the radio buttons', async function (assert: Assert) {
@@ -70,7 +70,7 @@ module('Integration | Component | hyper-table-v2/filtering-renderers/common/orde
 
     assert.equal(this.column.order, undefined);
 
-    await click('.upf-radio-btn:first-child');
+    await click('.oss-toggle-buttons-container .oss-toggle-buttons-btn:nth-child(1)');
     //@ts-ignore
     assert.ok(handlerSpy.applyOrder.calledWith(this.column, 'asc'));
     assert.deepEqual(this.column.order, {
@@ -78,7 +78,7 @@ module('Integration | Component | hyper-table-v2/filtering-renderers/common/orde
       key: 'date'
     });
 
-    await click('.upf-radio-btn:last-child');
+    await click('.oss-toggle-buttons-container .oss-toggle-buttons-btn:nth-child(2)');
     //@ts-ignore
     assert.ok(handlerSpy.applyOrder.calledWith(this.column, 'desc'));
     assert.deepEqual(this.column.order, {
diff --git a/tests/integration/components/hyper-table-v2/filtering-renderers/date-test.ts b/tests/integration/components/hyper-table-v2/filtering-renderers/date-test.ts
index 0c7c52c3..b2c29265 100644
--- a/tests/integration/components/hyper-table-v2/filtering-renderers/date-test.ts
+++ b/tests/integration/components/hyper-table-v2/filtering-renderers/date-test.ts
@@ -34,25 +34,18 @@ module('Integration | Component | hyper-table-v2/filtering-renderers/date', func
     this.column = this.handler.columns[1];
   });
 
-  test('it has the right data-control-name', async function (assert: Assert) {
-    await render(hbs`<HyperTableV2::FilteringRenderers::Date @handler={{this.handler}} @column={{this.column}} />`);
-
-    assert.dom('div[data-control-name="hypertable__column_filtering_for_date"]').exists();
-  });
-
   module('ordering', function () {
     test('it does not render the section if the column is not orderable', async function (assert: Assert) {
       this.column.definition.orderable = false;
 
       await render(hbs`<HyperTableV2::FilteringRenderers::Date @handler={{this.handler}} @column={{this.column}} />`);
 
-      assert.dom('div[data-control-name="hypertable__column_filtering_for_date_order_by_radiogroup"]').doesNotExist();
+      assert.dom('[data-control-name="hypertable__column_filtering_for_date_order_by_radiogroup"]').doesNotExist();
     });
 
     test('it renders if the column is orderable', async function (assert: Assert) {
       await render(hbs`<HyperTableV2::FilteringRenderers::Date @handler={{this.handler}} @column={{this.column}} />`);
-
-      assert.dom('div[data-control-name="hypertable__column_filtering_for_date_order_by_radiogroup"]').exists();
+      assert.dom('[data-control-name="hypertable__column_filtering_for_date_order_by_radiogroup"]').exists();
     });
 
     test('it calls the Handler#applyOrder method correctly via the radio buttons', async function (assert: Assert) {
@@ -63,7 +56,7 @@ module('Integration | Component | hyper-table-v2/filtering-renderers/date', func
 
       assert.equal(this.column.order, undefined);
       await click(
-        'div[data-control-name="hypertable__column_filtering_for_date_ordering"] .upf-radio-btn:first-child '
+        '[data-control-name="hypertable__column_filtering_for_date_ordering"] .oss-toggle-buttons-btn:nth-child(1)'
       );
 
       //@ts-ignore
@@ -73,7 +66,9 @@ module('Integration | Component | hyper-table-v2/filtering-renderers/date', func
         key: 'date'
       });
 
-      await click('div[data-control-name="hypertable__column_filtering_for_date_ordering"] .upf-radio-btn:last-child ');
+      await click(
+        'div[data-control-name="hypertable__column_filtering_for_date_ordering"] .oss-toggle-buttons-btn:nth-child(2)'
+      );
 
       //@ts-ignore
       assert.ok(handlerSpy.applyOrder.calledWith(this.column, 'desc'));
@@ -105,7 +100,7 @@ module('Integration | Component | hyper-table-v2/filtering-renderers/date', func
       await render(hbs`<HyperTableV2::FilteringRenderers::Date @handler={{this.handler}} @column={{this.column}} />`);
 
       await click(
-        'div[data-control-name="hypertable__column_filtering_for_date_filter_by_radiogroup"] .upf-radio-btn:first-child'
+        'div[data-control-name="hypertable__column_filtering_for_date_filter_by_radiogroup"] .oss-toggle-buttons-btn:nth-child(1)'
       );
       let filterOptions = findAll('.filters__option');
       assert.equal(filterOptions.length, 6);
@@ -122,7 +117,7 @@ module('Integration | Component | hyper-table-v2/filtering-renderers/date', func
       await render(hbs`<HyperTableV2::FilteringRenderers::Date @handler={{this.handler}} @column={{this.column}} />`);
 
       await click(
-        'div[data-control-name="hypertable__column_filtering_for_date_filter_by_radiogroup"] .upf-radio-btn:first-child'
+        'div[data-control-name="hypertable__column_filtering_for_date_filter_by_radiogroup"] .oss-toggle-buttons-btn:nth-child(1)'
       );
       await click('.filters__option');
       assert.ok(
@@ -139,7 +134,7 @@ module('Integration | Component | hyper-table-v2/filtering-renderers/date', func
       await render(hbs`<HyperTableV2::FilteringRenderers::Date @handler={{this.handler}} @column={{this.column}} />`);
 
       await click(
-        'div[data-control-name="hypertable__column_filtering_for_date_filter_by_radiogroup"] .upf-radio-btn:last-child'
+        'div[data-control-name="hypertable__column_filtering_for_date_filter_by_radiogroup"] .oss-toggle-buttons-btn:nth-child(2)'
       );
       assert.dom('div[data-control-name="hypertable__column_filtering_for_date_date_range_inputs"]').exists();
     });
@@ -148,7 +143,7 @@ module('Integration | Component | hyper-table-v2/filtering-renderers/date', func
       await render(hbs`<HyperTableV2::FilteringRenderers::Date @handler={{this.handler}} @column={{this.column}} />`);
 
       await click(
-        'div[data-control-name="hypertable__column_filtering_for_date_filter_by_radiogroup"] .upf-radio-btn:last-child'
+        'div[data-control-name="hypertable__column_filtering_for_date_filter_by_radiogroup"] .oss-toggle-buttons-btn:nth-child(2)'
       );
 
       await click('div[data-control-name="hypertable__column_filtering_for_date_date_range_inputs"] .upf-input');
diff --git a/tests/integration/components/hyper-table-v2/filtering-renderers/numeric-test.ts b/tests/integration/components/hyper-table-v2/filtering-renderers/numeric-test.ts
index db98a507..10d77125 100644
--- a/tests/integration/components/hyper-table-v2/filtering-renderers/numeric-test.ts
+++ b/tests/integration/components/hyper-table-v2/filtering-renderers/numeric-test.ts
@@ -66,7 +66,7 @@ module('Integration | Component | hyper-table-v2/filtering-renderers/numeric', f
 
       assert.equal(this.column.order, undefined);
       await click(
-        'div[data-control-name="hypertable__column_filtering_for_total_ordering"] .upf-radio-btn:first-child '
+        'div[data-control-name="hypertable__column_filtering_for_total_ordering"] .oss-toggle-buttons-btn:nth-child(1)'
       );
 
       //@ts-ignore
@@ -77,7 +77,7 @@ module('Integration | Component | hyper-table-v2/filtering-renderers/numeric', f
       });
 
       await click(
-        'div[data-control-name="hypertable__column_filtering_for_total_ordering"] .upf-radio-btn:last-child '
+        'div[data-control-name="hypertable__column_filtering_for_total_ordering"] .oss-toggle-buttons-btn:nth-child(2)'
       );
 
       //@ts-ignore
diff --git a/tests/integration/components/hyper-table-v2/filtering-renderers/text-test.ts b/tests/integration/components/hyper-table-v2/filtering-renderers/text-test.ts
index 76702b44..9003c631 100644
--- a/tests/integration/components/hyper-table-v2/filtering-renderers/text-test.ts
+++ b/tests/integration/components/hyper-table-v2/filtering-renderers/text-test.ts
@@ -59,7 +59,9 @@ module('Integration | Component | hyper-table-v2/filtering-renderers/text', func
       await render(hbs`<HyperTableV2::FilteringRenderers::Text @handler={{this.handler}} @column={{this.column}} />`);
 
       assert.equal(this.column.order, undefined);
-      await click('div[data-control-name="hypertable__column_filtering_for_foo_ordering"] .upf-radio-btn:first-child ');
+      await click(
+        'div[data-control-name="hypertable__column_filtering_for_foo_ordering"] .oss-toggle-buttons-btn:nth-child(1)'
+      );
 
       //@ts-ignore
       assert.ok(handlerSpy.applyOrder.calledWith(this.column, 'asc'));
@@ -68,7 +70,9 @@ module('Integration | Component | hyper-table-v2/filtering-renderers/text', func
         key: 'foo'
       });
 
-      await click('div[data-control-name="hypertable__column_filtering_for_foo_ordering"] .upf-radio-btn:last-child ');
+      await click(
+        'div[data-control-name="hypertable__column_filtering_for_foo_ordering"] .oss-toggle-buttons-btn:nth-child(2)'
+      );
 
       //@ts-ignore
       assert.ok(handlerSpy.applyOrder.calledWith(this.column, 'desc'));