diff --git a/.eslintrc.js b/.eslintrc.js
index 0c585b6..cc589c7 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -36,6 +36,8 @@ module.exports = {
                     'postcss-mixins',
                     'postcss-conditionals-renewed',
                     'postcss-at-rules-variables',
+                    'broccoli-funnel',
+                    'broccoli-merge-trees',
                     'autoprefixer',
                     'tailwindcss',
                     '@tailwindcss/forms',
diff --git a/addon/components/button.hbs b/addon/components/button.hbs
index e426e0f..7d0ef9a 100644
--- a/addon/components/button.hbs
+++ b/addon/components/button.hbs
@@ -31,7 +31,11 @@
         {{/if}}
         {{yield}}
     </button>
-    {{#if @helpText}}
+    {{#if this.disabledByPermission}}
+        <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPlacement "top"}}>
+            <InputInfo @text={{t "common.unauthorized"}} />
+        </Attach::Tooltip>
+    {{else if @helpText}}
         <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPlacement "top"}}>
             <InputInfo @text={{@helpText}} @exampleText={{@exampleText}} />
         </Attach::Tooltip>
diff --git a/addon/components/button.js b/addon/components/button.js
index af13414..cd00a8f 100644
--- a/addon/components/button.js
+++ b/addon/components/button.js
@@ -1,17 +1,26 @@
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
 import { computed, action } from '@ember/object';
 import { not, equal } from '@ember/object/computed';
 
 export default class ButtonComponent extends Component {
+    /**
+     * Inject abilities service.
+     *
+     * @memberof ButtonComponent
+     */
+    @service abilities;
+
     /**
      * Determines if the button should be disabled
      *
      * @var {Boolean}
      */
-    @computed('args.{isLoading,disabled}') get isDisabled() {
+    @computed('args.{disabled,disabledByPermission,isLoading}', 'disabledByPermission') get isDisabled() {
         const { isLoading, disabled } = this.args;
 
-        return disabled || isLoading;
+        return this.disabledByPermission || disabled || isLoading;
     }
 
     /**
@@ -39,6 +48,27 @@ export default class ButtonComponent extends Component {
         return icon && !isLoading;
     }
 
+    /**
+     * If the button is disabled by permissions.
+     *
+     * @memberof ButtonComponent
+     */
+    @tracked disabledByPermission = false;
+
+    /**
+     * Creates an instance of ButtonComponent.
+     * @param {*} owner
+     * @param {*} { permission = null }
+     * @memberof ButtonComponent
+     */
+    constructor(owner, { permission = null, disabled = false }) {
+        super(...arguments);
+        this.permissionRequired = permission;
+        if (!disabled) {
+            this.disabledByPermission = permission && this.abilities.cannot(permission);
+        }
+    }
+
     /**
      * Setup this component
      *
diff --git a/addon/components/content-panel.hbs b/addon/components/content-panel.hbs
index 2fe04fe..9f95b8f 100644
--- a/addon/components/content-panel.hbs
+++ b/addon/components/content-panel.hbs
@@ -81,7 +81,16 @@
                             </span>
                         {{/if}}
                         {{#each @actionButtons as |button|}}
-                            <Button @type={{button.type}} @text={{button.text}} @icon={{button.icon}} @size={{button.size}} @iconPrefix={{button.iconPrefix}} @onClick={{button.onClick}} @wrapperClass={{button.wrapperClass}} class={{button.class}} />
+                            <Button
+                                @type={{button.type}}
+                                @text={{button.text}}
+                                @icon={{button.icon}}
+                                @size={{button.size}}
+                                @iconPrefix={{button.iconPrefix}}
+                                @onClick={{button.onClick}}
+                                @wrapperClass={{button.wrapperClass}}
+                                class={{button.class}}
+                            />
                         {{/each}}
                         {{#if @dropdownButton}}
                             <DropdownButton
diff --git a/addon/components/country-select.hbs b/addon/components/country-select.hbs
index 9ad8aa1..449d99d 100644
--- a/addon/components/country-select.hbs
+++ b/addon/components/country-select.hbs
@@ -9,7 +9,7 @@
         @triggerClass="form-select form-input {{@triggerClass}}"
         @dropdownClass={{or @dropdownClass "ember-model-select__dropdown"}}
         @placeholder={{or @placeholder "Select country..."}}
-        @disabled={{this.isLoading}}
+        @disabled={{or this.disabled this.fetchCountries.isRunning}}
         @allowClear={{@allowClear}}
         ...attributes
         as |country|
diff --git a/addon/components/country-select.js b/addon/components/country-select.js
index 3ef42d4..630a69c 100644
--- a/addon/components/country-select.js
+++ b/addon/components/country-select.js
@@ -3,30 +3,32 @@ import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
+import { task } from 'ember-concurrency';
 
 export default class CountrySelectComponent extends Component {
     @service fetch;
     @tracked countries = [];
     @tracked selected;
-    @tracked isLoading = true;
+    @tracked disabled = false;
     @tracked value;
     @tracked id = guidFor(this);
 
-    constructor() {
+    constructor(owner, { value = null, disabled = false }) {
         super(...arguments);
+        this.disabled = disabled;
+        this.value = value;
+        this.fetchCountries.perform(value);
+    }
 
-        this.fetch
-            .get('lookup/countries', { columns: ['name', 'cca2', 'flag', 'emoji'] })
-            .then((countries) => {
-                this.countries = countries;
-
-                if (this.args.value) {
-                    this.selected = this.findCountry(this.args.value);
-                }
-            })
-            .finally(() => {
-                this.isLoading = false;
-            });
+    @task *fetchCountries(value = null) {
+        try {
+            this.countries = yield this.fetch.get('lookup/countries', { columns: ['name', 'cca2', 'flag', 'emoji'] });
+            if (value) {
+                this.selected = this.findCountry(value);
+            }
+        } catch (error) {
+            this.countries = [];
+        }
     }
 
     @action changed(value) {
diff --git a/addon/components/dropdown-button.hbs b/addon/components/dropdown-button.hbs
index 30fe8d1..614bb7d 100644
--- a/addon/components/dropdown-button.hbs
+++ b/addon/components/dropdown-button.hbs
@@ -10,6 +10,7 @@
     @matchTriggerWidth={{@matchTriggerWidth}}
     @onOpen={{@onOpen}}
     @onClose={{@onClose}}
+    @disabled={{this.disabled}}
     {{did-insert this.onInsert}}
     as |dd|
 >
@@ -25,7 +26,7 @@
                 active=@active
                 size=this.buttonSize
                 isLoading=@isLoading
-                disabled=@disabled
+                disabled=this.disabled
                 textClass=@textClass
                 helpText=@helpText
                 tooltipPlacement=@tooltipPlacement
@@ -42,7 +43,7 @@
                 @active={{@active}}
                 @size={{this.buttonSize}}
                 @isLoading={{@isLoading}}
-                disabled={{@disabled}}
+                disabled={{this.disabled}}
                 {{did-insert this.onButtonInsert}}
                 ...attributes
             >
@@ -52,7 +53,7 @@
                 {{#if @img}}
                     <img src={{@img}} class={{@imgClass}} alt={{or @alt "image"}} />
                 {{/if}}
-                {{#if @helpText}}
+                {{#if (and (not this.doesntHavePermissions) @helpText)}}
                     <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPlacement "top"}}>
                         <InputInfo @text={{@helpText}} />
                     </Attach::Tooltip>
@@ -62,6 +63,11 @@
                 </div>
             </Button>
         {{/if}}
+        {{#if this.doesntHavePermissions}}
+            <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPlacement "top"}}>
+                <InputInfo @text={{t "common.unauthorized"}} />
+            </Attach::Tooltip>
+        {{/if}}
     </dd.Trigger>
     <dd.Content class={{@contentClass}} @overlay={{@overlay}}>
         {{yield dd}}
diff --git a/addon/components/dropdown-button.js b/addon/components/dropdown-button.js
index d7d385b..3b591a5 100644
--- a/addon/components/dropdown-button.js
+++ b/addon/components/dropdown-button.js
@@ -1,14 +1,19 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 
 export default class DropdownButtonComponent extends Component {
+    @service abilities;
     @tracked type = 'default';
     @tracked buttonSize = 'md';
     @tracked buttonComponentArgs = {};
     @tracked _onInsertFired = false;
     @tracked _onTriggerInsertFired = false;
     @tracked _onButtonInsertFired = false;
+    @tracked disabled = false;
+    @tracked permissionRequired = false;
+    @tracked doesntHavePermissions = false;
 
     /**
      * Creates an instance of DropdownButtonComponent.
@@ -16,12 +21,18 @@ export default class DropdownButtonComponent extends Component {
      * @param {Object} { type = 'default', size = 'md', buttonComponentArgs = {}}
      * @memberof DropdownButtonComponent
      */
-    constructor(owner, { type = 'default', size = 'md', buttonComponentArgs = {} }) {
+    constructor(owner, { type = 'default', size = 'md', buttonComponentArgs = {}, permission = null, disabled = false }) {
         super(...arguments);
 
         this.type = type;
         this.buttonSize = size;
         this.buttonComponentArgs = buttonComponentArgs;
+        this.permissionRequired = permission;
+        this.disabled = disabled;
+        // If no permissions disable
+        if (!disabled) {
+            this.disabled = this.doesntHavePermissions = permission && this.abilities.cannot(permission);
+        }
     }
 
     @action onRegisterAPI() {
diff --git a/addon/components/file-upload.hbs b/addon/components/file-upload.hbs
index a27a461..b1d88f7 100644
--- a/addon/components/file-upload.hbs
+++ b/addon/components/file-upload.hbs
@@ -2,8 +2,8 @@
     (file-queue name=@name onFileAdded=@onFileAdded onFileRemoved=@onFileRemoved onUploadStarted=@onUploadStarted onUploadSucceeded=@onUploadSucceeded onUploadFailed=@onUploadFailed)
     as |queue|
 }}
-    <label class="file-upload {{@labelClass}}">
-        <input type="file" accept={{@accept}} hidden={{or @hidden true}} class={{@inputClass}} {{queue.selectFile}} />
+    <label class="file-upload {{@labelClass}}" disabled={{@disabled}}>
+        <input type="file" accept={{@accept}} hidden={{or @hidden true}} class={{@inputClass}} {{queue.selectFile}} disabled={{@disabled}} ...attributes />
         {{yield queue}}
     </label>
 {{/let}}
\ No newline at end of file
diff --git a/addon/components/layout/section/header.hbs b/addon/components/layout/section/header.hbs
index d941e54..9c29983 100644
--- a/addon/components/layout/section/header.hbs
+++ b/addon/components/layout/section/header.hbs
@@ -30,6 +30,7 @@
                     aria-label={{t "common.search-input"}}
                     placeholder={{or @searchPlaceholder (concat (t "common.search") " " (pluralize @title))}}
                     class="w-64 ml-3 form-input form-input-sm {{@searchInputClass}}"
+                    disabled={{@searchDisabled}}
                     {{on "keyup" @onSearch}}
                 />
             {{/if}}
diff --git a/addon/components/layout/sidebar/item.hbs b/addon/components/layout/sidebar/item.hbs
index 1bc3853..46b9e9b 100644
--- a/addon/components/layout/sidebar/item.hbs
+++ b/addon/components/layout/sidebar/item.hbs
@@ -1,4 +1,10 @@
-<a href="javascript:;" class="next-nav-item {{if this.active 'active'}} {{if @dropdownButton 'next-nav-item-with-dropdown'}}" {{on "click" this.onClick}} ...attributes>
+<a
+    href="javascript:;"
+    class="next-nav-item {{if this.active 'active'}} {{if @dropdownButton 'next-nav-item-with-dropdown'}}"
+    disabled={{this.disabled}}
+    {{on "click" this.onClick}}
+    ...attributes
+>
     <div class="next-nav-item-icon-container {{@iconWrapperClass}}">
         {{#if @icon}}
             <FaIcon @prefix={{@iconPrefix}} @icon={{@icon}} @size={{or @iconSize "xs"}} class={{@iconClass}} />
@@ -33,6 +39,7 @@
                     @triggerClass="next-nav-item-dropdown-button {{@dropdownButtonTriggerClass}}"
                     @registerAPI={{this.onRegisterAPI}}
                     @onInsert={{this.onDropdownButtonInsert}}
+                    @disabled={{this.disabled}}
                     as |dd|
                 >
                     <div class="next-dd-menu mt-0i" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
@@ -68,4 +75,13 @@
             {{/if}}
         {{/if}}
     </div>
+    {{#if this.doesntHavePermissions}}
+        <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPlacement "right"}}>
+            <InputInfo @text={{t "common.unauthorized"}} />
+        </Attach::Tooltip>
+    {{else if @helpText}}
+        <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPlacement "right"}}>
+            <InputInfo @text={{@helpText}} @exampleText={{@exampleText}} />
+        </Attach::Tooltip>
+    {{/if}}
 </a>
\ No newline at end of file
diff --git a/addon/components/layout/sidebar/item.js b/addon/components/layout/sidebar/item.js
index aa48382..0ce0228 100644
--- a/addon/components/layout/sidebar/item.js
+++ b/addon/components/layout/sidebar/item.js
@@ -8,15 +8,25 @@ import isMenuItemActive from '../../../utils/is-menu-item-active';
 export default class LayoutSidebarItemComponent extends Component {
     @service router;
     @service hostRouter;
+    @service abilities;
     @tracked active;
     @tracked dropdownButtonNode;
     @tracked dropdownButtonRenderInPlace = true;
+    @tracked permissionRequired = null;
+    @tracked disabled = false;
+    @tracked doesntHavePermissions = false;
 
-    constructor(owner, { dropdownButtonRenderInPlace = true }) {
+    constructor(owner, { dropdownButtonRenderInPlace = true, permission = null, disabled = false }) {
         super(...arguments);
 
         this.active = this.checkIfActive();
         this.dropdownButtonRenderInPlace = dropdownButtonRenderInPlace;
+        this.permissionRequired = permission;
+        this.disabled = disabled;
+        // If no permissions disable
+        if (!disabled) {
+            this.disabled = this.doesntHavePermissions = permission && this.abilities.cannot(permission);
+        }
 
         const router = this.getRouter();
         router.on('routeDidChange', this.trackActiveFlag);
@@ -51,6 +61,12 @@ export default class LayoutSidebarItemComponent extends Component {
             return;
         }
 
+        const doesntHavePermissions = this.permissionRequired && this.abilities.cannot(this.permissionRequired);
+        if (doesntHavePermissions) {
+            event.preventDefault();
+            return;
+        }
+
         const { url, target, route, model, onClick, options } = this.args;
         const router = this.getRouter();
         const anchor = event.target?.closest('a');
diff --git a/addon/components/table/cell/anchor.hbs b/addon/components/table/cell/anchor.hbs
index 653fb1c..9c0da65 100644
--- a/addon/components/table/cell/anchor.hbs
+++ b/addon/components/table/cell/anchor.hbs
@@ -1,4 +1,4 @@
-<a href="#" {{on "click" this.onClick}} class={{@column.anchorClass}} disabled={{not @value}} ...attributes>
+<a href="#" {{on "click" this.onClick}} class={{@column.anchorClass}} disabled={{and @column.permission (cannot @column.permission)}} ...attributes>
     {{#if @column.anchorIcon}}
         <span class="btn-icon-wrapper" data-icon-prefix={{@column.anchorIconPrefix}}>
             <FaIcon
diff --git a/addon/components/table/cell/driver-name.hbs b/addon/components/table/cell/driver-name.hbs
index 440970c..63a12f0 100644
--- a/addon/components/table/cell/driver-name.hbs
+++ b/addon/components/table/cell/driver-name.hbs
@@ -1,7 +1,7 @@
 {{#if this.driver}}
     <div class="relative flex items-center" ...attributes>
         <img src={{this.driver.photo_url}} alt={{this.driver.name}} {{fallback-img-src (config "defaultValues.driverImage")}} class="w-5 h-5 mr-2 rounded-md" />
-        <a href="javascript:;" class="relative block" {{on "click" (fn this.onClick this.driver)}}>
+        <a href="javascript:;" class="relative block" {{on "click" (fn this.onClick this.driver)}} disabled={{and @column.permission (cannot @column.permission)}}>
             <span>{{get-default-value this.driver.name}}</span>
         </a>
         <FaIcon @icon="circle" @size="2xs" class="absolute left-0 top-0 -mt-1 -ml-1 {{if this.driver.online 'text-green-500' 'text-yellow-200'}}" />
diff --git a/addon/components/table/cell/dropdown.hbs b/addon/components/table/cell/dropdown.hbs
index 66e32a0..4daf562 100644
--- a/addon/components/table/cell/dropdown.hbs
+++ b/addon/components/table/cell/dropdown.hbs
@@ -18,23 +18,8 @@
                 </div>
                 <div class="next-dd-menu-seperator"></div>
             {{/if}}
-            {{#each @column.actions as |action|}}
-                {{#if action.separator}}
-                    <div class="next-dd-menu-seperator"></div>
-                {{else}}
-                    {{#if (is-dd-item-visible @row action.isVisible)}}
-                        <div role="group" class="px-1">
-                            <a href="javascript:;" role="menuitem" class="next-dd-item {{action.class}}" {{on "click" (fn this.onDropdownItemClick action @row dd)}}>
-                                {{#if action.icon}}
-                                    <span class="mr-1">
-                                        <FaIcon class={{action.iconClass}} @icon={{action.icon}} @prefix={{action.iconPrefix}} />
-                                    </span>
-                                {{/if}}
-                                {{action.label}}
-                            </a>
-                        </div>
-                    {{/if}}
-                {{/if}}
+            {{#each @column.actions as |columnAction|}}
+                <Table::Cell::Dropdown::ActionItem @columnAction={{columnAction}} @row={{@row}} @column={{@column}} @dd={{dd}} />
             {{/each}}
         </div>
     </DropdownButton>
diff --git a/addon/components/table/cell/dropdown/action-item.hbs b/addon/components/table/cell/dropdown/action-item.hbs
new file mode 100644
index 0000000..cb3bff8
--- /dev/null
+++ b/addon/components/table/cell/dropdown/action-item.hbs
@@ -0,0 +1,31 @@
+{{#if @columnAction.separator}}
+    <div class="next-dd-menu-seperator"></div>
+{{else}}
+    {{#if this.isVisible}}
+        <div role="group" class="px-1">
+            <a
+                href="javascript:;"
+                role="menuitem"
+                class="next-dd-item {{@columnAction.class}} {{if this.disabled 'disabled'}}"
+                disabled={{this.disabled}}
+                {{on "click" (fn this.onClick @columnAction @row @dd)}}
+            >
+                {{#if @columnAction.icon}}
+                    <span class="mr-1">
+                        <FaIcon class={{@columnAction.iconClass}} @icon={{@columnAction.icon}} @prefix={{@columnAction.iconPrefix}} />
+                    </span>
+                {{/if}}
+                {{@columnAction.label}}
+                {{#if this.doesntHavePermissions}}
+                    <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @columnAction.tooltipPlacement "right"}}>
+                        <InputInfo @text={{t "common.unauthorized"}} />
+                    </Attach::Tooltip>
+                {{else if @columnAction.helpText}}
+                    <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @columnAction.tooltipPlacement "right"}}>
+                        <InputInfo @text={{@columnAction.helpText}} @exampleText={{@columnAction.exampleText}} />
+                    </Attach::Tooltip>
+                {{/if}}
+            </a>
+        </div>
+    {{/if}}
+{{/if}}
\ No newline at end of file
diff --git a/addon/components/table/cell/dropdown/action-item.js b/addon/components/table/cell/dropdown/action-item.js
new file mode 100644
index 0000000..7483a7d
--- /dev/null
+++ b/addon/components/table/cell/dropdown/action-item.js
@@ -0,0 +1,62 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { isNone } from '@ember/utils';
+
+export default class TableCellDropdownActionItemComponent extends Component {
+    @service abilities;
+    @tracked permissionRequired;
+    @tracked doesntHavePermissions = false;
+    @tracked disabled = false;
+    @tracked isVisible = true;
+
+    constructor(owner, { columnAction = {}, row = {}, disabled = false, permission = null }) {
+        super(...arguments);
+        this.permissionRequired = columnAction.permission ?? permission;
+        this.disabled = this.disabledCheck(columnAction, this.permissionRequired, disabled);
+        this.isVisible = this.visibilityCheck(columnAction, row);
+    }
+
+    @action onClick(columnAction, row, dd) {
+        if (this.disabled) {
+            return;
+        }
+
+        if (typeof dd?.actions?.close === 'function') {
+            dd.actions.close();
+        }
+
+        if (typeof columnAction?.fn === 'function') {
+            columnAction.fn(row);
+        }
+    }
+
+    disabledCheck(columnAction, permission, defaultValue = false) {
+        let disabled = columnAction.disabled ?? defaultValue;
+        if (!disabled) {
+            disabled = permission && this.abilities.cannot(permission);
+            this.doesntHavePermissions = disabled;
+        }
+
+        return disabled;
+    }
+
+    visibilityCheck(columnAction, context) {
+        const isVisible = columnAction.isVisible;
+
+        if (isNone(context) || !isVisible) {
+            return true;
+        }
+
+        if (typeof isVisible === 'boolean') {
+            return isVisible;
+        }
+
+        if (typeof isVisible === 'function') {
+            return isVisible(context);
+        }
+
+        return true;
+    }
+}
diff --git a/addon/components/table/cell/link-to.hbs b/addon/components/table/cell/link-to.hbs
index 3c000f7..268ef4a 100644
--- a/addon/components/table/cell/link-to.hbs
+++ b/addon/components/table/cell/link-to.hbs
@@ -1,4 +1,4 @@
-<LinkTo @route={{@column.route}} @model={{@row}} class={{@column.linkClass}} ...attributes>
+<LinkTo @route={{@column.route}} @model={{@row}} @disabled={{and @column.permission (cannot @column.permission)}} class={{@column.linkClass}} ...attributes>
     {{#if @column.linkIcon}}
         <span class="btn-icon-wrapper" data-icon-prefix={{@column.linkIconPrefix}}>
             <FaIcon
diff --git a/addon/components/table/cell/media-name.hbs b/addon/components/table/cell/media-name.hbs
index 77de558..c6c2494 100644
--- a/addon/components/table/cell/media-name.hbs
+++ b/addon/components/table/cell/media-name.hbs
@@ -1,7 +1,7 @@
 <div class="relative flex items-center">
     <img src={{this.mediaUrl}} alt={{this.altText}} class="w-6 h-6 rounded-md {{if @column.hasOnline 'mx-2' 'mr-2'}}" />
     <span class="relative block">
-        <a href="javascript:;" class="relative block" {{on "click" this.onClick}}>
+        <a href="javascript:;" class="relative block" {{on "click" this.onClick}} disabled={{and @column.permission (cannot @column.permission)}}>
             {{#if (has-block)}}
                 {{yield}}
             {{else}}
diff --git a/addon/components/table/cell/vehicle-name.hbs b/addon/components/table/cell/vehicle-name.hbs
index fb70799..d4d29b2 100644
--- a/addon/components/table/cell/vehicle-name.hbs
+++ b/addon/components/table/cell/vehicle-name.hbs
@@ -7,7 +7,7 @@
         class="w-6 h-6 rounded-md {{if @column.hasOnline 'mx-2' 'mr-2'}}"
     />
     <span class="relative block">
-        <a href="javascript:;" class="relative block" {{on "click" this.onClick}}>
+        <a href="javascript:;" class="relative block" {{on "click" this.onClick}} disabled={{and @column.permission (cannot @column.permission)}}>
             {{#if (has-block)}}
                 {{yield}}
             {{else}}
diff --git a/addon/components/upload-button.hbs b/addon/components/upload-button.hbs
index 7bc2e4e..d36bbc3 100644
--- a/addon/components/upload-button.hbs
+++ b/addon/components/upload-button.hbs
@@ -1,7 +1,12 @@
-<FileUpload @name={{@name}} @accept={{@accept}} @onFileAdded={{@onFileAdded}} @labelClass={{@labelClass}} as |queue|>
+<FileUpload @name={{@name}} @accept={{@accept}} @onFileAdded={{@onFileAdded}} @labelClass={{@labelClass}} @disabled={{@disabled}} as |queue|>
     <a
         tabindex={{0}}
-        class="flex items-center px-0 mt-2 text-xs no-underline truncate cursor-pointer btn {{if @outline 'btn-outline'}} btn-{{or @type 'default'}} btn-{{or @size 'sm'}}"
+        class="flex items-center px-0 mt-2 text-xs no-underline truncate cursor-pointer btn
+            {{if @outline 'btn-outline'}}
+            btn-{{or @type 'default'}}
+            btn-{{or @size 'sm'}}
+            {{if @disabled 'opacity-50 cursor-not-allowed'}}"
+        disabled={{@disabled}}
         ...attributes
     >
         {{#if queue.files.length}}
diff --git a/addon/components/widget/count.hbs b/addon/components/widget/count.hbs
new file mode 100644
index 0000000..42d5734
--- /dev/null
+++ b/addon/components/widget/count.hbs
@@ -0,0 +1,6 @@
+<div class="widget-count {{@options.wrapperClass}}" ...attributes>
+    <h3 class="text-sm dark:text-gray-100 text-black mb-4 {{@options.titleClass}}">{{this.title}}</h3>
+    <h1 class="text-3xl font-bold dark:text-gray-100 text-black {{@options.valueClass}}">
+        {{this.value}}
+    </h1>
+</div>
\ No newline at end of file
diff --git a/addon/components/widget/count.js b/addon/components/widget/count.js
new file mode 100644
index 0000000..1f45d5c
--- /dev/null
+++ b/addon/components/widget/count.js
@@ -0,0 +1,78 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import formatCurrency from '../../utils/format-currency';
+import formatMeters from '../../utils/format-meters';
+import formatBytes from '../../utils/format-bytes';
+import formatDuration from '../../utils/format-duration';
+import formatDate from '../../utils/format-date';
+
+export default class WidgetCountComponent extends Component {
+    /**
+     * The title of the metric count.
+     *
+     * @memberof WidgetCountComponent
+     */
+    @tracked title;
+
+    /**
+     * The value to render
+     *
+     * @memberof WidgetCountComponent
+     */
+    @tracked value = null;
+
+    /**
+     * Creates an instance of WidgetCountComponent.
+     * @param {EngineInstance} owner
+     * @param {Object} { options }
+     * @memberof WidgetCountComponent
+     */
+    constructor(owner, { title, value = null, options = {} }) {
+        super(...arguments);
+        this.title = title;
+        this.createRenderValueFromOptions(options, value);
+    }
+
+    /**
+     * Creates the value to render using the options provided.
+     *
+     * @param {Object} [options={}]
+     * @param {String|Number} defaultValue
+     * @memberof WidgetCountComponent
+     */
+    createRenderValueFromOptions(options = {}, defaultValue = null) {
+        if (defaultValue !== null) {
+            this.value = defaultValue;
+            return;
+        }
+
+        let { format, currency, dateFormat, value } = options;
+
+        switch (format) {
+            case 'money':
+                value = formatCurrency([value, currency]);
+                break;
+
+            case 'meters':
+                value = formatMeters([value]);
+                break;
+
+            case 'bytes':
+                value = formatBytes([value]);
+                break;
+
+            case 'duration':
+                value = formatDuration([value]);
+                break;
+
+            case 'date':
+                value = formatDate([value, dateFormat]);
+                break;
+
+            default:
+                break;
+        }
+
+        this.value = value;
+    }
+}
diff --git a/addon/components/widget/query-params.hbs b/addon/components/widget/query-params.hbs
new file mode 100644
index 0000000..77cf6ed
--- /dev/null
+++ b/addon/components/widget/query-params.hbs
@@ -0,0 +1,8 @@
+<div class="flex flex-row items-center space-x-3" ...attributes>
+    {{#each-in @params as |param options|}}
+        <div class="flex flex-col lg:flex-row lg:items-center">
+            <label class="hidden lg:flex mr-2 text-sm">{{humanize param}}:</label>
+            {{component options.component onChange=(fn this.onChange param) placeholder=(humanize param) class="form-input-sm"}}
+        </div>
+    {{/each-in}}
+</div>
\ No newline at end of file
diff --git a/addon/components/widget/query-params.js b/addon/components/widget/query-params.js
new file mode 100644
index 0000000..4ffa8f5
--- /dev/null
+++ b/addon/components/widget/query-params.js
@@ -0,0 +1,21 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class WidgetQueryParamsComponent extends Component {
+    @tracked changedParams = {};
+
+    @action onChange(param, value) {
+        const component = this.args.params[param].component;
+
+        if (component === 'date-picker') {
+            value = value.formattedDate;
+        }
+
+        this.changedParams = { ...this.changedParams, [param]: value };
+
+        if (typeof this.args.onChange === 'function') {
+            this.args.onChange(this.changedParams);
+        }
+    }
+}
diff --git a/addon/styles/components/dashboard.css b/addon/styles/components/dashboard.css
index 16b3eb4..ff6f93e 100644
--- a/addon/styles/components/dashboard.css
+++ b/addon/styles/components/dashboard.css
@@ -1,7 +1,9 @@
+.widget-title,
 .fleetbase-dashboard-grid .dashboard-title {
     @apply flex flex-col lg:flex-row lg:items-center lg:justify-between rounded-lg border border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800 shadow-sm px-4 py-2 mb-4;
 }
 
+.widget-count,
 .fleetbase-dashboard-grid .dashboard-component-count {
     @apply flex flex-col items-center justify-center rounded-lg border border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800 shadow-sm py-4;
 }
diff --git a/addon/styles/components/input.css b/addon/styles/components/input.css
index 1db5a5b..b4ba0d0 100644
--- a/addon/styles/components/input.css
+++ b/addon/styles/components/input.css
@@ -649,3 +649,8 @@ body[data-theme='light'] .coordinates-input-zoom-controls > .coordinates-input-z
 body[data-theme='light'] .coordinates-input-zoom-controls > .coordinates-input-zoom-controls-container .toolbar-button:hover {
     @apply bg-gray-200;
 }
+
+body[data-theme='dark'] .iti__selected-country[aria-disabled="true"]
+.iti__selected-country[aria-disabled="true"] {
+    @apply opacity-50 cursor-not-allowed;
+}
\ No newline at end of file
diff --git a/addon/styles/layout/next.css b/addon/styles/layout/next.css
index b313393..91e0066 100644
--- a/addon/styles/layout/next.css
+++ b/addon/styles/layout/next.css
@@ -107,7 +107,12 @@ body[data-theme='dark'] .fleetbase-next-container {
     z-index: 800;
 }
 
-.next-content-overlay > .next-content-overlay-panel-container > .next-content-overlay-panel .next-content-overlay-panel-body .next-content-overlay-panel-body-inner-wrapper > .section-header-actions {
+.next-content-overlay
+    > .next-content-overlay-panel-container
+    > .next-content-overlay-panel
+    .next-content-overlay-panel-body
+    .next-content-overlay-panel-body-inner-wrapper
+    > .section-header-actions {
     overflow-y: hidden;
 }
 
@@ -1049,11 +1054,11 @@ body[data-theme='dark'] .next-content-panel-wrapper .next-content-panel-containe
 }
 
 .next-view-header .next-view-header-right .next-user-button svg.svg-inline--fa {
-    color: #1e293b
+    color: #1e293b;
 }
 
-body[data-theme="dark"] .next-view-header .next-view-header-right .next-user-button svg.svg-inline--fa {
-    color: #cbd5e1
+body[data-theme='dark'] .next-view-header .next-view-header-right .next-user-button svg.svg-inline--fa {
+    color: #cbd5e1;
 }
 
 .next-view-header #view-header-left-content-a,
@@ -1262,19 +1267,53 @@ body[data-theme='dark'] .next-sidebar .next-sidebar-panel-container > .next-side
     @apply pl-8;
 }
 
-.next-sidebar .next-sidebar-panel-container > .next-sidebar-panel > .next-content-panel > .next-content-panel-body .next-nav-item.next-nav-item-with-dropdown:hover .ember-basic-dropdown-trigger > span.btn-wrapper > button.btn:hover {
+.next-sidebar
+    .next-sidebar-panel-container
+    > .next-sidebar-panel
+    > .next-content-panel
+    > .next-content-panel-body
+    .next-nav-item.next-nav-item-with-dropdown:hover
+    .ember-basic-dropdown-trigger
+    > span.btn-wrapper
+    > button.btn:hover {
     background-color: #ffffff;
 }
 
-body[data-theme="dark"] .next-sidebar .next-sidebar-panel-container > .next-sidebar-panel > .next-content-panel > .next-content-panel-body .next-nav-item.next-nav-item-with-dropdown:hover .ember-basic-dropdown-trigger > span.btn-wrapper > button.btn:hover {
+body[data-theme='dark']
+    .next-sidebar
+    .next-sidebar-panel-container
+    > .next-sidebar-panel
+    > .next-content-panel
+    > .next-content-panel-body
+    .next-nav-item.next-nav-item-with-dropdown:hover
+    .ember-basic-dropdown-trigger
+    > span.btn-wrapper
+    > button.btn:hover {
     background-color: #374151;
 }
 
-.next-sidebar .next-sidebar-panel-container > .next-sidebar-panel > .next-content-panel > .next-content-panel-body .next-nav-item.next-nav-item-with-dropdown:hover .ember-basic-dropdown-trigger > span.btn-wrapper > button.btn {
+.next-sidebar
+    .next-sidebar-panel-container
+    > .next-sidebar-panel
+    > .next-content-panel
+    > .next-content-panel-body
+    .next-nav-item.next-nav-item-with-dropdown:hover
+    .ember-basic-dropdown-trigger
+    > span.btn-wrapper
+    > button.btn {
     color: #000000;
 }
 
-body[data-theme="dark"] .next-sidebar .next-sidebar-panel-container > .next-sidebar-panel > .next-content-panel > .next-content-panel-body .next-nav-item.next-nav-item-with-dropdown:hover .ember-basic-dropdown-trigger > span.btn-wrapper > button.btn {
+body[data-theme='dark']
+    .next-sidebar
+    .next-sidebar-panel-container
+    > .next-sidebar-panel
+    > .next-content-panel
+    > .next-content-panel-body
+    .next-nav-item.next-nav-item-with-dropdown:hover
+    .ember-basic-dropdown-trigger
+    > span.btn-wrapper
+    > button.btn {
     color: #ffffff;
 }
 
@@ -1376,6 +1415,15 @@ body[data-theme='dark'] .next-dd-menu .next-dd-title {
     @apply bg-blue-500 text-white;
 }
 
+body[data-theme='dark'] .next-dd-menu .next-dd-item.disabled,
+.next-dd-menu .next-dd-item.disabled,
+body[data-theme='dark'] .next-dd-menu .next-dd-item:disabled,
+.next-dd-menu .next-dd-item:disabled {
+    opacity: 0.5;
+    background-color: transparent;
+    box-shadow: none;
+}
+
 .next-dd-menu-seperator {
     @apply flex h-px my-2 bg-gray-700;
 }
@@ -1802,21 +1850,21 @@ body[data-theme='light'] .next-dd-menu-seperator {
     height: 57px;
 }
 
-body[data-theme="light"] .text-danger,
-body[data-theme="light"] span.text-danger,
-body[data-theme="light"] a.text-danger,
+body[data-theme='light'] .text-danger,
+body[data-theme='light'] span.text-danger,
+body[data-theme='light'] a.text-danger,
 .text-danger,
 span.text-danger,
 a.text-danger {
     @apply text-red-500;
 }
 
-body[data-theme="light"] .text-danger:active,
-body[data-theme="light"] .text-danger:hover,
-body[data-theme="light"] span.text-danger:active,
-body[data-theme="light"] span.text-danger:hover,
-body[data-theme="light"] a.text-danger:active,
-body[data-theme="light"] a.text-danger:hover,
+body[data-theme='light'] .text-danger:active,
+body[data-theme='light'] .text-danger:hover,
+body[data-theme='light'] span.text-danger:active,
+body[data-theme='light'] span.text-danger:hover,
+body[data-theme='light'] a.text-danger:active,
+body[data-theme='light'] a.text-danger:hover,
 .text-danger:active,
 .text-danger:hover,
 span.text-danger:active,
@@ -1925,16 +1973,16 @@ a.text-danger:hover {
 }
 
 .overloader > .loader-container {
-    background: rgba(243, 244, 246, .25);
+    background: rgba(243, 244, 246, 0.25);
     border: 1px solid #d1d5db;
     backdrop-filter: blur(3.5px);
-    border-radius: .5rem;
-    padding: .25rem .85rem;
+    border-radius: 0.5rem;
+    padding: 0.25rem 0.85rem;
 }
 
-body[data-theme="dark"] .overloader > .loader-container {
-    background: rgb(31, 41, 55, .25);
-    border: 1px solid rgba(15, 23, 42, .25);
+body[data-theme='dark'] .overloader > .loader-container {
+    background: rgb(31, 41, 55, 0.25);
+    border: 1px solid rgba(15, 23, 42, 0.25);
 }
 
 @keyframes rotation {
diff --git a/app/components/table/cell/dropdown/action-item.js b/app/components/table/cell/dropdown/action-item.js
new file mode 100644
index 0000000..db8202d
--- /dev/null
+++ b/app/components/table/cell/dropdown/action-item.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/components/table/cell/dropdown/action-item';
diff --git a/app/components/widget/count.js b/app/components/widget/count.js
new file mode 100644
index 0000000..2c44bd2
--- /dev/null
+++ b/app/components/widget/count.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/components/widget/count';
diff --git a/app/components/widget/query-params.js b/app/components/widget/query-params.js
new file mode 100644
index 0000000..214ae79
--- /dev/null
+++ b/app/components/widget/query-params.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/components/widget/query-params';
diff --git a/index.js b/index.js
index 8525748..cf72c25 100644
--- a/index.js
+++ b/index.js
@@ -69,13 +69,16 @@ module.exports = {
             new Funnel(`${intlTelInputPath}/build/js`, {
                 include: ['utils.js'],
                 destDir: 'assets/libphonenumber',
+                allowEmpty: true,
             }),
             new Funnel(`${intlTelInputPath}/build/img`, {
                 destDir: 'img',
                 overwrite: false,
+                allowEmpty: true,
             }),
             new Funnel(path.join(__dirname, 'assets'), {
                 destDir: '/',
+                allowEmpty: true,
             }),
         ];
 
diff --git a/package.json b/package.json
index e9d135d..d658605 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@fleetbase/ember-ui",
-    "version": "0.2.21",
+    "version": "0.2.22",
     "description": "Fleetbase UI provides all the interface components, helpers, services and utilities for building a Fleetbase extension into the Console.",
     "keywords": [
         "fleetbase-ui",
@@ -49,7 +49,6 @@
         "@fullcalendar/daygrid": "^6.1.9",
         "@fullcalendar/interaction": "^6.1.9",
         "@makepanic/ember-power-calendar-date-fns": "^0.4.2",
-        "@tailwindcss/forms": "^0.5.3",
         "@tiptap/core": "^2.5.7",
         "@tiptap/extension-color": "^2.5.8",
         "@tiptap/extension-font-family": "^2.5.8",
@@ -71,14 +70,13 @@
         "air-datepicker": "^3.3.5",
         "autonumeric": "^4.6.2",
         "autoprefixer": "^10.4.15",
-        "broccoli-funnel": "^3.0.8",
-        "broccoli-merge-trees": "^4.2.0",
         "chart.js": "^4.2.1",
         "chartjs-adapter-date-fns": "^3.0.0",
         "date-fns": "^2.30.0",
         "ember-animated": "^1.1.2",
         "ember-auto-import": "^2.6.3",
         "ember-basic-dropdown": "^7.3.0",
+        "ember-can": "^6.0.0",
         "ember-cli-babel": "^8.2.0",
         "ember-cli-htmlbars": "^6.3.0",
         "ember-cli-postcss": "^8.2.0",
@@ -104,14 +102,7 @@
         "ember-window-mock": "^0.9.0",
         "ember-wormhole": "^0.6.0",
         "imask": "^6.4.3",
-        "intl-tel-input": "^22.0.2",
-        "postcss-at-rules-variables": "^0.3.0",
-        "postcss-conditionals-renewed": "^1.0.0",
-        "postcss-each": "^1.1.0",
-        "postcss-import": "^15.1.0",
-        "postcss-mixins": "^9.0.4",
-        "postcss-preset-env": "^9.1.1",
-        "tailwindcss": "^3.1.8"
+        "intl-tel-input": "^22.0.2"
     },
     "devDependencies": {
         "@babel/eslint-parser": "^7.22.15",
@@ -122,7 +113,17 @@
         "@glimmer/component": "^1.1.2",
         "@glimmer/tracking": "^1.1.2",
         "broccoli-asset-rev": "^3.0.0",
+        "broccoli-funnel": "^3.0.8",
+        "broccoli-merge-trees": "^4.2.0",
         "clean-css": "^5.3.2",
+        "postcss-at-rules-variables": "^0.3.0",
+        "postcss-conditionals-renewed": "^1.0.0",
+        "postcss-each": "^1.1.0",
+        "postcss-import": "^15.1.0",
+        "postcss-mixins": "^9.0.4",
+        "postcss-preset-env": "^9.1.1",
+        "tailwindcss": "^3.1.8",
+        "@tailwindcss/forms": "^0.5.3",
         "concurrently": "^8.2.2",
         "ember-cli": "~5.4.1",
         "ember-cli-clean-css": "^3.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 65064e1..05166c5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -53,9 +53,6 @@ importers:
       '@makepanic/ember-power-calendar-date-fns':
         specifier: ^0.4.2
         version: 0.4.2
-      '@tailwindcss/forms':
-        specifier: ^0.5.3
-        version: 0.5.3(tailwindcss@3.1.8(postcss@8.4.39))
       '@tiptap/core':
         specifier: ^2.5.7
         version: 2.5.7(@tiptap/pm@2.5.7)
@@ -119,12 +116,6 @@ importers:
       autoprefixer:
         specifier: ^10.4.15
         version: 10.4.15(postcss@8.4.39)
-      broccoli-funnel:
-        specifier: ^3.0.8
-        version: 3.0.8
-      broccoli-merge-trees:
-        specifier: ^4.2.0
-        version: 4.2.0
       chart.js:
         specifier: ^4.2.1
         version: 4.2.1
@@ -143,6 +134,9 @@ importers:
       ember-basic-dropdown:
         specifier: ^7.3.0
         version: 7.3.0(@babel/core@7.23.2)(@ember/string@3.0.1)(ember-source@5.4.0(@babel/core@7.23.2)(@glimmer/component@1.1.2(@babel/core@7.23.2))(rsvp@4.8.5)(webpack@5.89.0))(webpack@5.89.0)
+      ember-can:
+        specifier: ^6.0.0
+        version: 6.0.0(@babel/core@7.23.2)(@ember/string@3.0.1)(ember-inflector@4.0.2)(ember-resolver@11.0.1(ember-source@5.4.0(@babel/core@7.23.2)(@glimmer/component@1.1.2(@babel/core@7.23.2))(rsvp@4.8.5)(webpack@5.89.0)))(ember-source@5.4.0(@babel/core@7.23.2)(@glimmer/component@1.1.2(@babel/core@7.23.2))(rsvp@4.8.5)(webpack@5.89.0))
       ember-cli-babel:
         specifier: ^8.2.0
         version: 8.2.0(@babel/core@7.23.2)
@@ -221,27 +215,6 @@ importers:
       intl-tel-input:
         specifier: ^22.0.2
         version: 22.0.2
-      postcss-at-rules-variables:
-        specifier: ^0.3.0
-        version: 0.3.0(postcss@8.4.39)
-      postcss-conditionals-renewed:
-        specifier: ^1.0.0
-        version: 1.0.0(postcss@8.4.39)
-      postcss-each:
-        specifier: ^1.1.0
-        version: 1.1.0(postcss@8.4.39)
-      postcss-import:
-        specifier: ^15.1.0
-        version: 15.1.0(postcss@8.4.39)
-      postcss-mixins:
-        specifier: ^9.0.4
-        version: 9.0.4(postcss@8.4.39)
-      postcss-preset-env:
-        specifier: ^9.1.1
-        version: 9.1.1(postcss@8.4.39)
-      tailwindcss:
-        specifier: ^3.1.8
-        version: 3.1.8(postcss@8.4.39)
     devDependencies:
       '@babel/eslint-parser':
         specifier: ^7.22.15
@@ -264,9 +237,18 @@ importers:
       '@glimmer/tracking':
         specifier: ^1.1.2
         version: 1.1.2
+      '@tailwindcss/forms':
+        specifier: ^0.5.3
+        version: 0.5.3(tailwindcss@3.1.8(postcss@8.4.39))
       broccoli-asset-rev:
         specifier: ^3.0.0
         version: 3.0.0
+      broccoli-funnel:
+        specifier: ^3.0.8
+        version: 3.0.8
+      broccoli-merge-trees:
+        specifier: ^4.2.0
+        version: 4.2.0
       clean-css:
         specifier: ^5.3.2
         version: 5.3.2
@@ -336,6 +318,24 @@ importers:
       loader.js:
         specifier: ^4.7.0
         version: 4.7.0
+      postcss-at-rules-variables:
+        specifier: ^0.3.0
+        version: 0.3.0(postcss@8.4.39)
+      postcss-conditionals-renewed:
+        specifier: ^1.0.0
+        version: 1.0.0(postcss@8.4.39)
+      postcss-each:
+        specifier: ^1.1.0
+        version: 1.1.0(postcss@8.4.39)
+      postcss-import:
+        specifier: ^15.1.0
+        version: 15.1.0(postcss@8.4.39)
+      postcss-mixins:
+        specifier: ^9.0.4
+        version: 9.0.4(postcss@8.4.39)
+      postcss-preset-env:
+        specifier: ^9.1.1
+        version: 9.1.1(postcss@8.4.39)
       prettier:
         specifier: ^3.0.3
         version: 3.0.3
@@ -354,6 +354,9 @@ importers:
       stylelint-prettier:
         specifier: ^4.0.2
         version: 4.0.2(prettier@3.0.3)(stylelint@15.11.0)
+      tailwindcss:
+        specifier: ^3.1.8
+        version: 3.1.8(postcss@8.4.39)
       webpack:
         specifier: ^5.89.0
         version: 5.89.0
@@ -3388,6 +3391,9 @@ packages:
     resolution: {integrity: sha512-BzRPQuY1ip+qDonAOz42gRm/pg9F768C+npV/4JOsxRC2sq+Rlk+Q4ZCAsOhnIaMrgarILY+RMUIvMmmX1qAEA==}
     engines: {node: '>=4'}
 
+  decorator-transforms@2.0.0:
+    resolution: {integrity: sha512-ETfQccGcotK01YJsoB0AGTdUp7kS9jI93mBzrRY5Oyo+bOJfa2UKTSjCNf+iRNwAWBmBKlbiCcyL4tkY4C4dZQ==}
+
   deep-extend@0.6.0:
     resolution: {integrity: sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==}
     engines: {node: '>=4.0.0'}
@@ -3563,6 +3569,14 @@ packages:
     peerDependencies:
       ember-source: ^3.28.0 || ^4.0.0 || >=5.0.0
 
+  ember-can@6.0.0:
+    resolution: {integrity: sha512-/8TnWxU9Yu0HXCk04qCHK3nnjrNMe3j6wrJJjW9ffLsnBBHKTT8yNP1f54EsHaHoNtWd73JGSSTmtcpBHhWAyw==}
+    peerDependencies:
+      '@ember/string': ^3.1.1 || ^4.0.0
+      ember-inflector: ^4.0.2 || ^5.0.1
+      ember-resolver: '>= 8.0.0'
+      ember-source: ^3.28.0 || ^4.0.0 || >=5.0.0
+
   ember-cli-babel-plugin-helpers@1.1.1:
     resolution: {integrity: sha512-sKvOiPNHr5F/60NLd7SFzMpYPte/nnGkq/tMIfXejfKHIhaiIkYFqX8Z9UFTKWLLn+V7NOaby6niNPZUdvKCRw==}
     engines: {node: 6.* || 8.* || >= 10.*}
@@ -11785,6 +11799,13 @@ snapshots:
     dependencies:
       mimic-response: 1.0.1
 
+  decorator-transforms@2.0.0(@babel/core@7.23.2):
+    dependencies:
+      '@babel/plugin-syntax-decorators': 7.24.7(@babel/core@7.23.2)
+      babel-import-util: 3.0.0
+    transitivePeerDependencies:
+      - '@babel/core'
+
   deep-extend@0.6.0: {}
 
   deep-is@0.1.4: {}
@@ -12066,6 +12087,18 @@ snapshots:
       - supports-color
       - webpack
 
+  ember-can@6.0.0(@babel/core@7.23.2)(@ember/string@3.0.1)(ember-inflector@4.0.2)(ember-resolver@11.0.1(ember-source@5.4.0(@babel/core@7.23.2)(@glimmer/component@1.1.2(@babel/core@7.23.2))(rsvp@4.8.5)(webpack@5.89.0)))(ember-source@5.4.0(@babel/core@7.23.2)(@glimmer/component@1.1.2(@babel/core@7.23.2))(rsvp@4.8.5)(webpack@5.89.0)):
+    dependencies:
+      '@ember/string': 3.0.1
+      '@embroider/addon-shim': 1.8.9
+      decorator-transforms: 2.0.0(@babel/core@7.23.2)
+      ember-inflector: 4.0.2
+      ember-resolver: 11.0.1(ember-source@5.4.0(@babel/core@7.23.2)(@glimmer/component@1.1.2(@babel/core@7.23.2))(rsvp@4.8.5)(webpack@5.89.0))
+      ember-source: 5.4.0(@babel/core@7.23.2)(@glimmer/component@1.1.2(@babel/core@7.23.2))(rsvp@4.8.5)(webpack@5.89.0)
+    transitivePeerDependencies:
+      - '@babel/core'
+      - supports-color
+
   ember-cli-babel-plugin-helpers@1.1.1: {}
 
   ember-cli-babel@7.26.11:
diff --git a/tests/integration/components/table/cell/dropdown/action-item-test.js b/tests/integration/components/table/cell/dropdown/action-item-test.js
new file mode 100644
index 0000000..19598a8
--- /dev/null
+++ b/tests/integration/components/table/cell/dropdown/action-item-test.js
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'dummy/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | table/cell/dropdown/action-item', 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`<Table::Cell::Dropdown::ActionItem />`);
+
+        assert.dom().hasText('');
+
+        // Template block usage:
+        await render(hbs`
+      <Table::Cell::Dropdown::ActionItem>
+        template block text
+      </Table::Cell::Dropdown::ActionItem>
+    `);
+
+        assert.dom().hasText('template block text');
+    });
+});
diff --git a/tests/integration/components/widget/count-test.js b/tests/integration/components/widget/count-test.js
new file mode 100644
index 0000000..a873cce
--- /dev/null
+++ b/tests/integration/components/widget/count-test.js
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'dummy/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | widget/count', 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`<Widget::Count />`);
+
+        assert.dom().hasText('');
+
+        // Template block usage:
+        await render(hbs`
+      <Widget::Count>
+        template block text
+      </Widget::Count>
+    `);
+
+        assert.dom().hasText('template block text');
+    });
+});
diff --git a/tests/integration/components/widget/query-params-test.js b/tests/integration/components/widget/query-params-test.js
new file mode 100644
index 0000000..4525f6e
--- /dev/null
+++ b/tests/integration/components/widget/query-params-test.js
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'dummy/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | widget/query-params', 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`<Widget::QueryParams />`);
+
+        assert.dom().hasText('');
+
+        // Template block usage:
+        await render(hbs`
+      <Widget::QueryParams>
+        template block text
+      </Widget::QueryParams>
+    `);
+
+        assert.dom().hasText('template block text');
+    });
+});