diff --git a/addon/components/array-input.hbs b/addon/components/array-input.hbs
index b224993..ff9b0eb 100644
--- a/addon/components/array-input.hbs
+++ b/addon/components/array-input.hbs
@@ -9,7 +9,16 @@
         <div class="h-48 overflow-y-scroll rounded">
             {{#each this.data as |datum index|}}
                 <div class="flex text-gray-800 border-b border-gray-200 dark:border-gray-900 dark:text-gray-100 relative">
-                    <Input @type="text" @value={{datum}} aria-label="Data Input" placeholder={{@placeholder}} {{on "change" (fn this.onChange index)}} {{on "paste" (fn this.onPaste index)}} class="form-input w-full flex-1 border-none shadow-none rounded-none pr-24" {{on "keyup" (fn this.inputDatum index)}} />
+                    <Input
+                        @type="text"
+                        @value={{datum}}
+                        aria-label="Data Input"
+                        placeholder={{@placeholder}}
+                        {{on "change" (fn this.onChange index)}}
+                        {{on "paste" (fn this.onPaste index)}}
+                        class="form-input w-full flex-1 border-none shadow-none rounded-none pr-24"
+                        {{on "keyup" (fn this.inputDatum index)}}
+                    />
                     <div class="absolute right-0 py-2.5 px-4">
                         <button type="button" class="rounded-none border-none bg-transparent shadow-none outline-none text-red-500" {{on "click" (fn this.removeData index)}}>Remove</button>
                     </div>
diff --git a/addon/components/aside-item-scroller.hbs b/addon/components/aside-item-scroller.hbs
index a61271f..85bde0d 100644
--- a/addon/components/aside-item-scroller.hbs
+++ b/addon/components/aside-item-scroller.hbs
@@ -6,7 +6,18 @@
         {{/if}}
     </div>
     <div>
-        <DropdownButton @contentClass="w-full" @buttonWrapperClass="w-full" @buttonClass="w-full" @icon="bars" @iconPrefix="fas" @text={{concat "Select " this.resource}} @matchTriggerWidth={{true}} @verticalPosition="below" @renderInPlace={{true}} as |dd|>
+        <DropdownButton
+            @contentClass="w-full"
+            @buttonWrapperClass="w-full"
+            @buttonClass="w-full"
+            @icon="bars"
+            @iconPrefix="fas"
+            @text={{concat "Select " this.resource}}
+            @matchTriggerWidth={{true}}
+            @verticalPosition="below"
+            @renderInPlace={{true}}
+            as |dd|
+        >
             <div class="next-dd-menu w-full h-screen-50 overflow-y-scroll" aria-orientation="vertical" aria-labelledby="user-menu">
                 {{#each-in this.itemsGroupByTitleLetter as |key items|}}
                     <div class="px-1">
@@ -22,12 +33,12 @@
                             </div>
                         </div>
                     {{/each}}
-                    {{else}}
-                        <div class="flex flex-col items-center text-center my-4">
-                            <div class="mb-4">
-                                <h4 class="dark:text-gray-100">No {{pluralize this.resource}}</h4>
-                            </div>
+                {{else}}
+                    <div class="flex flex-col items-center text-center my-4">
+                        <div class="mb-4">
+                            <h4 class="dark:text-gray-100">No {{pluralize this.resource}}</h4>
                         </div>
+                    </div>
                 {{/each-in}}
             </div>
         </DropdownButton>
@@ -39,7 +50,8 @@
             <div class="flex-1">
                 <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">{{this.title}}</h2>
                 <p class="mt-1 text-sm text-gray-600">
-                    Search {{pluralize @items.length this.resource}}
+                    Search
+                    {{pluralize @items.length this.resource}}
                 </p>
             </div>
             <div>
@@ -67,13 +79,17 @@
                     </ul>
                 {{/if}}
                 {{#each-in this.itemsGroupByTitleLetter as |key items|}}
-                    <div class="z-10 sticky top-0 border-t border-b border-gray-200 bg-gray-50 px-6 py-1 text-sm font-medium text-gray-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100">
+                    <div
+                        class="z-10 sticky top-0 border-t border-b border-gray-200 bg-gray-50 px-6 py-1 text-sm font-medium text-gray-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
+                    >
                         <h3>{{capitalize key}}</h3>
                     </div>
                     <ul class="relative z-0 divide-y divide-gray-200 dark:divide-gray-900">
                         {{#each items as |item|}}
                             <li>
-                                <div class="relative flex items-center space-x-3 hover:bg-gray-50 dark:hover:bg-gray-700 focus-within:ring-2 focus-within:ring-inset focus-within:ring-blue-400">
+                                <div
+                                    class="relative flex items-center space-x-3 hover:bg-gray-50 dark:hover:bg-gray-700 focus-within:ring-2 focus-within:ring-inset focus-within:ring-blue-400"
+                                >
                                     <div class="flex-1 min-w-0">
                                         {{yield item}}
                                     </div>
@@ -81,19 +97,25 @@
                             </li>
                         {{/each}}
                     </ul>
-                    {{else}}
-                        <div class="flex flex-col items-center text-center my-4">
-                            <div class="mb-4">
-                                <h4 class="dark:text-gray-100">No {{pluralize this.resource}}</h4>
-                            </div>
+                {{else}}
+                    <div class="flex flex-col items-center text-center my-4">
+                        <div class="mb-4">
+                            <h4 class="dark:text-gray-100">No {{pluralize this.resource}}</h4>
                         </div>
+                    </div>
                 {{/each-in}}
                 {{#if @customBottomItemComponent}}
                     <ul class="relative z-0 divide-y divide-gray-200 dark:divide-gray-900">
                         <li>
                             <div class="relative flex items-center space-x-3 hover:bg-gray-50 dark:hover:bg-gray-700 focus-within:ring-2 focus-within:ring-inset focus-within:ring-blue-400">
                                 <div class="flex-1 min-w-0">
-                                    {{component @customBottomItemComponent onClick=@customBottomItemOnClick item=@customBottomItem text=@customBottomItemText wrapperClass=@customBottomItemClass}}
+                                    {{component
+                                        @customBottomItemComponent
+                                        onClick=@customBottomItemOnClick
+                                        item=@customBottomItem
+                                        text=@customBottomItemText
+                                        wrapperClass=@customBottomItemClass
+                                    }}
                                 </div>
                             </div>
                         </li>
diff --git a/addon/components/attach/popover.hbs b/addon/components/attach/popover.hbs
index a6e7051..24d6669 100644
--- a/addon/components/attach/popover.hbs
+++ b/addon/components/attach/popover.hbs
@@ -1,13 +1,26 @@
 <div {{did-insert this.setupComponent}}>
     {{#if (and this.currentTarget (or (not this.lazyRender) this.mustRender))}}
-        <Floating id={{this.id}} class="ember-attacher" @ariaRole={{@ariaRole}} @placement={{this.placement}} @container={{this.floatingContainer}} @target={{this.currentTarget}} @registerAPI={{this.registerAPI}} @renderInPlace={{this.renderInPlace}} @arrow={{this.arrow}} @offset={{@offset}} @shiftOptions={{@shiftOptions}} as |floating|>
+        <Floating
+            id={{this.id}}
+            class="ember-attacher"
+            @ariaRole={{@ariaRole}}
+            @placement={{this.placement}}
+            @container={{this.floatingContainer}}
+            @target={{this.currentTarget}}
+            @registerAPI={{this.registerAPI}}
+            @renderInPlace={{this.renderInPlace}}
+            @arrow={{this.arrow}}
+            @offset={{@offset}}
+            @shiftOptions={{@shiftOptions}}
+            as |floating|
+        >
             <div class="{{this.className}} {{@classNames}}" style={{this.computedStyle}}>
                 {{yield floating}}
 
                 {{#if this.arrow}}
                     <div x-arrow></div>
                 {{/if}}
-                {{#if (eq this.animation 'fill')}}
+                {{#if (eq this.animation "fill")}}
                     <div x-circle style={{this.circleTransitionDuration}}></div>
                 {{/if}}
             </div>
diff --git a/addon/components/attach/tooltip.hbs b/addon/components/attach/tooltip.hbs
index 38a9f02..023791a 100644
--- a/addon/components/attach/tooltip.hbs
+++ b/addon/components/attach/tooltip.hbs
@@ -1 +1,19 @@
-<Attach::Popover @classNames="ember-attacher-tooltip" @ariaRole="tooltip" @renderInPlace={{@renderInPlace}} @placement={{this.placement}} @arrow={{@arrow}} @offset={{@offset}} @shiftOptions={{@shiftOptions}} @animation={{@animation}} @hideOn={{@hideOn}} @showOn={{@showOn}} @interactive={{@interactive}} @isShown={{@isShown}} @lazyRender={{@lazyRender}} @showDelay={{@showDelay}} @showDuration={{@showDuration}} @transitionDuration={{@transitionDuration}} ...attributes>{{yield}}</Attach::Popover>
\ No newline at end of file
+<Attach::Popover
+    @classNames="ember-attacher-tooltip"
+    @ariaRole="tooltip"
+    @renderInPlace={{@renderInPlace}}
+    @placement={{this.placement}}
+    @arrow={{@arrow}}
+    @offset={{@offset}}
+    @shiftOptions={{@shiftOptions}}
+    @animation={{@animation}}
+    @hideOn={{@hideOn}}
+    @showOn={{@showOn}}
+    @interactive={{@interactive}}
+    @isShown={{@isShown}}
+    @lazyRender={{@lazyRender}}
+    @showDelay={{@showDelay}}
+    @showDuration={{@showDuration}}
+    @transitionDuration={{@transitionDuration}}
+    ...attributes
+>{{yield}}</Attach::Popover>
\ No newline at end of file
diff --git a/addon/components/autocomplete-input.hbs b/addon/components/autocomplete-input.hbs
index 03d1e54..d05343f 100644
--- a/addon/components/autocomplete-input.hbs
+++ b/addon/components/autocomplete-input.hbs
@@ -1,6 +1,17 @@
 <div class="fleetbase-autocomplete-input relative {{@wrapperClass}}">
     <div class="relative">
-        <Input @type="text" name="geocoder-autocomplete-search" @value={{@value}} class="form-input" {{on "input" this.onInput}} {{on "blur" this.onBlur}} {{on "focus" this.onFocus}} autocomplete="nope" autofill="nope" ...attributes />
+        <Input
+            @type="text"
+            name="geocoder-autocomplete-search"
+            @value={{@value}}
+            class="form-input"
+            {{on "input" this.onInput}}
+            {{on "blur" this.onBlur}}
+            {{on "focus" this.onFocus}}
+            autocomplete="nope"
+            autofill="nope"
+            ...attributes
+        />
         {{#if this.isLoading}}
             <div class="absolute inset-y-0 right-0 h-full w-10 pr-1 flex items-center justify-center">
                 <Spinner @iconClass="text-sky-500 fa-spin-800ms" />
@@ -8,7 +19,10 @@
         {{/if}}
     </div>
 
-    <div class="fleetbase-autocomplete-input--results absolute w-full mt-1 rounded-md bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-sm {{if this.hideResults "hidden"}}">
+    <div
+        class="fleetbase-autocomplete-input--results absolute w-full mt-1 rounded-md bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-sm
+            {{if this.hideResults 'hidden'}}"
+    >
         {{#if this.isLoading}}
             <div class="fleetbase-autocomplete-input--results-result flex px-4 py-2 text-gray-700 dark:text-gray-100 dark-hover:bg-gray-700 hover:bg-gray-50">
                 <div class="flex text-center items-center justify-center">
@@ -18,7 +32,13 @@
             </div>
         {{/if}}
         {{#each this.results as |result index|}}
-            <a href="javascript:;" {{on "click" (fn this.selectResult result)}} class="{{if (eq index 0) 'rounded-t'}} {{if (eq (add index 1) this.results.length) 'rounded-b border-b-0' 'border-b'}} fleetbase-autocomplete-input--results-result flex px-4 py-2 text-gray-700 dark:text-gray-100 dark:hover:bg-gray-700 hover:bg-gray-50 border-gray-200 dark:border-gray-700">
+            <a
+                href="javascript:;"
+                {{on "click" (fn this.selectResult result)}}
+                class="{{if (eq index 0) 'rounded-t'}}
+                    {{if (eq (add index 1) this.results.length) 'rounded-b border-b-0' 'border-b'}}
+                    fleetbase-autocomplete-input--results-result flex px-4 py-2 text-gray-700 dark:text-gray-100 dark:hover:bg-gray-700 hover:bg-gray-50 border-gray-200 dark:border-gray-700"
+            >
                 {{yield result this.value}}
             </a>
         {{/each}}
diff --git a/addon/components/badge.hbs b/addon/components/badge.hbs
index bc528c7..1945407 100644
--- a/addon/components/badge.hbs
+++ b/addon/components/badge.hbs
@@ -1,6 +1,6 @@
 <div class="status-badge {{safe-dasherize (or @type @status)}}-status-badge" ...attributes>
-    <span class="inline-flex items-center {{unless @roundedFull "px-2 py-0.5 rounded" "badge-rounded-full"}} text-xs font-medium leading-4 whitespace-no-wrap {{@spanClass}}">
-        <svg class="{{unless @hideText "mr-1.5"}} h-2 w-2 {{if @hideStatusDot "hidden"}}" fill="currentColor" viewBox="0 0 8 8">
+    <span class="inline-flex items-center {{unless @roundedFull 'px-2 py-0.5 rounded' 'badge-rounded-full'}} text-xs font-medium leading-4 whitespace-no-wrap {{@spanClass}}">
+        <svg class="{{unless @hideText 'mr-1.5'}} h-2 w-2 {{if @hideStatusDot 'hidden'}}" fill="currentColor" viewBox="0 0 8 8">
             <circle cx="4" cy="4" r="3"></circle>
         </svg>
         {{#if (has-block)}}
@@ -15,7 +15,7 @@
             {{/unless}}
         {{/if}}
         {{#if @helpText}}
-            <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPlacement "top" }}>
+            <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPlacement "top"}}>
                 <InputInfo @text={{@helpText}} @exampleText={{@exampleText}} />
             </Attach::Tooltip>
         {{/if}}
diff --git a/addon/components/basic-dropdown-hover.hbs b/addon/components/basic-dropdown-hover.hbs
index 0915bc2..b6efa7f 100644
--- a/addon/components/basic-dropdown-hover.hbs
+++ b/addon/components/basic-dropdown-hover.hbs
@@ -1,15 +1,24 @@
-<BasicDropdown @renderInPlace={{@renderInPlace}} @verticalPosition={{@verticalPosition}} @horizontalPosition={{@horizontalPosition}} @matchTriggerWidth={{@matchTriggerWidth}} @triggerComponent={{@triggerComponent}} @contentComponent={{@contentComponent}} @calculatePosition={{@calculatePosition}} @onOpen={{@onOpen}} @onClose={{@onClose}} @onFocus={{@onFocus}} @calculateInPlacePosition={{@calculateInPlacePosition}} as |dd|>
-    {{yield (assign
-    dd
-    (hash
-      Trigger=(component dd.Trigger
-        onMouseDown=this.prevent
-        onMouseEnter=this.open
-        onMouseLeave=this.close)
-      Content=(component dd.Content
-        onMouseEnter=this.open
-        onMouseLeave=this.close
-      )
-    )
-  )}}
+<BasicDropdown
+    @renderInPlace={{@renderInPlace}}
+    @verticalPosition={{@verticalPosition}}
+    @horizontalPosition={{@horizontalPosition}}
+    @matchTriggerWidth={{@matchTriggerWidth}}
+    @triggerComponent={{@triggerComponent}}
+    @contentComponent={{@contentComponent}}
+    @calculatePosition={{@calculatePosition}}
+    @onOpen={{@onOpen}}
+    @onClose={{@onClose}}
+    @onFocus={{@onFocus}}
+    @calculateInPlacePosition={{@calculateInPlacePosition}}
+    as |dd|
+>
+    {{yield
+        (assign
+            dd
+            (hash
+                Trigger=(component dd.Trigger onMouseDown=this.prevent onMouseEnter=this.open onMouseLeave=this.close)
+                Content=(component dd.Content onMouseEnter=this.open onMouseLeave=this.close)
+            )
+        )
+    }}
 </BasicDropdown>
\ No newline at end of file
diff --git a/addon/components/button.hbs b/addon/components/button.hbs
index aabb979..e426e0f 100644
--- a/addon/components/button.hbs
+++ b/addon/components/button.hbs
@@ -1,5 +1,11 @@
 <span class="btn-wrapper {{@wrapperClass}} inline-flex rounded-md {{if this.isNotSecondary 'shadow-sm'}} {{if @isLoading 'is-loading'}}" {{did-insert this.setupComponent}}>
-    <button class="btn {{if @isLoading 'btn-is-loading'}} {{if @outline 'btn-outline'}} btn-{{or @type 'default'}} btn-{{or @size 'sm'}}" disabled={{this.isDisabled}} ...attributes type={{or @buttonType "button"}} {{on "click" this.onClick}}>
+    <button
+        class="btn {{if @isLoading 'btn-is-loading'}} {{if @outline 'btn-outline'}} btn-{{or @type 'default'}} btn-{{or @size 'sm'}}"
+        disabled={{this.isDisabled}}
+        ...attributes
+        type={{or @buttonType "button"}}
+        {{on "click" this.onClick}}
+    >
         {{#if @isLoading}}
             <span class="btn-icon-wrapper btn-loading-icon-wrapper" data-icon-prefix={{@iconPrefix}}>
                 <Spinner @width={{or @loaderWidth 14}} @height={{or @loaderHeight 14}} />
@@ -7,7 +13,15 @@
         {{/if}}
         {{#if this.showIcon}}
             <span class="btn-icon-wrapper" data-icon-prefix={{@iconPrefix}}>
-                <FaIcon @prefix={{@iconPrefix}} @icon={{@icon}} @size={{@iconSize}} @rotation={{@iconRotation}} @flip={{@iconFlip}} @spin={{@iconSpin}} class="{{if @text 'mr-2'}} {{@iconClass}}" />
+                <FaIcon
+                    @prefix={{@iconPrefix}}
+                    @icon={{@icon}}
+                    @size={{@iconSize}}
+                    @rotation={{@iconRotation}}
+                    @flip={{@iconFlip}}
+                    @spin={{@iconSpin}}
+                    class="{{if @text 'mr-2'}} {{@iconClass}}"
+                />
             </span>
         {{/if}}
         {{#if @text}}
diff --git a/addon/components/chat-tray.hbs b/addon/components/chat-tray.hbs
index 9ae4641..12639e7 100644
--- a/addon/components/chat-tray.hbs
+++ b/addon/components/chat-tray.hbs
@@ -1,5 +1,15 @@
 <div class="next-user-button" ...attributes>
-    <BasicDropdown @registerAPI={{this.registerAPI}} @defaultClass={{@wrapperClass}} @onOpen={{this.unlockAudio}} @onClose={{@onClose}} @verticalPosition={{@verticalPosition}} @horizontalPosition={{@horizontalPosition}} @renderInPlace={{true}} @initiallyOpened={{@initiallyOpened}} as |dd|>
+    <BasicDropdown
+        @registerAPI={{this.registerAPI}}
+        @defaultClass={{@wrapperClass}}
+        @onOpen={{this.unlockAudio}}
+        @onClose={{@onClose}}
+        @verticalPosition={{@verticalPosition}}
+        @horizontalPosition={{@horizontalPosition}}
+        @renderInPlace={{true}}
+        @initiallyOpened={{@initiallyOpened}}
+        as |dd|
+    >
         <dd.Trigger class={{@triggerClass}}>
             <div class="next-org-button-trigger chat-tray-icon flex-shrink-0 {{if dd.isOpen 'is-open'}}">
                 <FaIcon @icon="message" />
@@ -25,13 +35,19 @@
                                 </div>
                                 <div class="flex flex-row">
                                     <div class="w-10">
-                                        <Image src={{channel.last_message.sender.avatar_url}} @fallbackSrc={{config "defaultValues.userImage"}} alt={{channel.last_message.sender.name}} class="chat-tray-channel-preview-avatar rounded-full shadow-sm w-8 h-8" />
+                                        <Image
+                                            src={{channel.last_message.sender.avatar_url}}
+                                            @fallbackSrc={{config "defaultValues.userImage"}}
+                                            alt={{channel.last_message.sender.name}}
+                                            class="chat-tray-channel-preview-avatar rounded-full shadow-sm w-8 h-8"
+                                        />
                                     </div>
                                     <div class="chat-tray-channel-preview-last-message text-sm truncate dark:text-gray-200 text-gray-900">
                                         <span>{{channel.last_message.content}}</span>
                                         {{#if channel.last_message.attachments}}
                                             <div class="chat-tray-channel-preview-last-message-attachments">
-                                                <FaIcon @icon="paperclip" @size="sm" class="mr-0.5" /> {{pluralize channel.last_message.attachments.length "Attachment"}}
+                                                <FaIcon @icon="paperclip" @size="sm" class="mr-0.5" />
+                                                {{pluralize channel.last_message.attachments.length "Attachment"}}
                                             </div>
                                         {{/if}}
                                     </div>
@@ -40,7 +56,11 @@
                             <div class="flex">
                                 {{#if (eq channel.created_by_uuid this.currentUser.id)}}
                                     <div class="btn-wrapper">
-                                        <button type="button" class="chat-tray-channel-preview-close-channel-btn btn btn-danger btn-xs cursor-default" {{on "click" (dropdown-fn dd this.removeChannel channel)}}>
+                                        <button
+                                            type="button"
+                                            class="chat-tray-channel-preview-close-channel-btn btn btn-danger btn-xs cursor-default"
+                                            {{on "click" (dropdown-fn dd this.removeChannel channel)}}
+                                        >
                                             <FaIcon @icon="times" @size="sm" />
                                         </button>
                                     </div>
diff --git a/addon/components/chat-window.hbs b/addon/components/chat-window.hbs
index fe5a071..b3e10a8 100644
--- a/addon/components/chat-window.hbs
+++ b/addon/components/chat-window.hbs
@@ -1,5 +1,10 @@
 {{#if this.isVisible}}
-    <div id={{concat "channel-" this.channel.id "-window"}} class="chat-window-container {{if this.pendingAttachmentFiles "has-attachments"}}" {{did-insert this.positionWindow}} ...attributes>
+    <div
+        id={{concat "channel-" this.channel.id "-window"}}
+        class="chat-window-container {{if this.pendingAttachmentFiles 'has-attachments'}}"
+        {{did-insert this.positionWindow}}
+        ...attributes
+    >
         <div class="chat-window-controls-container">
             <div class="chat-window-name">
                 {{n-a this.channel.name "Untitled Chat"}}
@@ -42,17 +47,23 @@
                             <FaIcon @icon="times" @size="sm" />
                         </button>
                     {{/if}}
-                    <div class="chat-window-participant-online-status {{if chatParticipant.is_online "is-online"}}" />
+                    <div class="chat-window-participant-online-status {{if chatParticipant.is_online 'is-online'}}"></div>
                 </div>
             {{/each}}
         </div>
         <div id={{concat "channel-" this.channel.id "-feed"}} class="chat-window-messages-container" {{did-insert this.scrollMessageWindowBottom}}>
             <ChatWindow::Feed @channel={{this.channel}} @chatParticipant={{this.sender}} />
         </div>
-        <div id={{concat "channel-" this.channel.id "-input"}} class="chat-window-input-container {{if this.pendingAttachmentFiles "has-attachments"}}">
+        <div id={{concat "channel-" this.channel.id "-input"}} class="chat-window-input-container {{if this.pendingAttachmentFiles 'has-attachments'}}">
             <div class="chat-window-attachments-container">
                 <div class="chat-window-attachment-input">
-                    <FileUpload @name={{this.customField.name}} @for={{this.customField.name}} @accept={{join "," this.acceptedFileTypes}} @multiple={{true}} @onFileAdded={{perform this.uploadAttachmentFile}}>
+                    <FileUpload
+                        @name={{this.customField.name}}
+                        @for={{this.customField.name}}
+                        @accept={{join "," this.acceptedFileTypes}}
+                        @multiple={{true}}
+                        @onFileAdded={{perform this.uploadAttachmentFile}}
+                    >
                         <a tabindex={{0}} class="btn btn-default btn-xs cursor-pointer">
                             <FaIcon @icon="paperclip" @size="sm" class="mr-2" />
                             <span>Add Attachment</span>
@@ -77,7 +88,15 @@
                 <Textarea @value={{this.pendingMessageContent}} {{on "keypress" this.handleKeyPress}} placeholder="Type your message here" class="chat-window-input" rows="3" />
             </div>
             <div class="chat-window-submit-container">
-                <Button @type="primary" @icon="paper-plane" @text="Send" @size="xs" @onClick={{perform this.sendMessage}} @disabled={{not this.pendingMessageContent}} @isLoading={{and (not this.sendMessage.isIdle) (not this.uploadAttachmentFile.isIdle)}} />
+                <Button
+                    @type="primary"
+                    @icon="paper-plane"
+                    @text="Send"
+                    @size="xs"
+                    @onClick={{perform this.sendMessage}}
+                    @disabled={{not this.pendingMessageContent}}
+                    @isLoading={{and (not this.sendMessage.isIdle) (not this.uploadAttachmentFile.isIdle)}}
+                />
             </div>
         </div>
     </div>
diff --git a/addon/components/chat-window/message.hbs b/addon/components/chat-window/message.hbs
index ac27e10..398687d 100644
--- a/addon/components/chat-window/message.hbs
+++ b/addon/components/chat-window/message.hbs
@@ -1,4 +1,4 @@
-<div class="chat-message-container {{if this.chatMessage.attachments "has-attachments"}}" {{did-insert this.trackVisibility}}>
+<div class="chat-message-container {{if this.chatMessage.attachments 'has-attachments'}}" {{did-insert this.trackVisibility}}>
     <div class="chat-message-sender-bubble">
         <Image src={{this.chatMessage.sender.avatar_url}} @fallbackSrc={{config "defaultValues.userImage"}} alt={{this.chatMessage.sender.name}} />
         <div class="chat-message-sender-name">{{this.chatMessage.sender.name}}</div>
@@ -6,7 +6,7 @@
             <InputInfo @text={{this.chatMessage.sender.name}} />
         </Attach::Tooltip>
     </div>
-    <div class="chat-message-content-bubble-container {{if this.chatMessage.attachments "has-attachments"}}">
+    <div class="chat-message-content-bubble-container {{if this.chatMessage.attachments 'has-attachments'}}">
         {{#if this.chatMessage.attachments}}
             <div class="chat-message-attachments-container">
                 {{#each this.chatMessage.attachments as |attachment|}}
@@ -23,7 +23,8 @@
                 {{#each this.chatMessage.receipts as |receipt|}}
                     <div class="chat-message-receipt-container">
                         <div class="chat-message-receipt">
-                            <FaIcon @icon="check" class="text-green-500" /> {{receipt.participant_name}}
+                            <FaIcon @icon="check" class="text-green-500" />
+                            {{receipt.participant_name}}
                         </div>
                         <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
                             <InputInfo @text={{concat "Read at " receipt.readAt}} class="xs" />
diff --git a/addon/components/checkbox.hbs b/addon/components/checkbox.hbs
index 76c103f..d885386 100644
--- a/addon/components/checkbox.hbs
+++ b/addon/components/checkbox.hbs
@@ -1,8 +1,17 @@
-<div class="relative flex items-{{or @alignItems "start"}} {{if @disabled 'disabled opacity-75'}}" ...attributes>
+<div class="relative flex items-{{or @alignItems 'start'}} {{if @disabled 'disabled opacity-75'}}" ...attributes>
     <div class="flex items-center h-4">
-        <Input @type="checkbox" id={{this.id}} data-value={{@value}} @checked={{@value}} data-checked={{@value}} disabled={{@disabled}} class="fleetbase-checkbox form-checkbox {{this.colorClass}} {{@inputClass}}" {{on "change" this.toggle}} />
+        <Input
+            @type="checkbox"
+            id={{this.id}}
+            data-value={{@value}}
+            @checked={{@value}}
+            data-checked={{@value}}
+            disabled={{@disabled}}
+            class="fleetbase-checkbox form-checkbox {{this.colorClass}} {{@inputClass}}"
+            {{on "change" this.toggle}}
+        />
         {{#if @helpText}}
-            <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPlacement "top" }}>
+            <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPlacement "top"}}>
                 <InputInfo @text={{@helpText}} @exampleText={{@exampleText}} />
             </Attach::Tooltip>
         {{/if}}
diff --git a/addon/components/click-to-reveal.js b/addon/components/click-to-reveal.js
index d604b74..3227bce 100644
--- a/addon/components/click-to-reveal.js
+++ b/addon/components/click-to-reveal.js
@@ -26,14 +26,27 @@ export default class ClickToRevealComponent extends ClickToCopyComponent {
     @tracked timeout = 600;
 
     /**
-     * The loading state of the reveal process
+     * If click to copy should be enabled.
      *
      * @var {Boolean}
      */
-    @computed('args.clickToCopy') get clickToCopy() {
-        const { clickToCopy } = this.args;
+    @tracked clickToCopy = false;
 
-        return clickToCopy ?? false;
+    /**
+     * Setup the component
+     *
+     * @param {EngineInstance} owner
+     * @param {...Arguments} { column, clickToCopy,  }
+     * @memberof ClickToRevealComponent
+     */
+    constructor(owner, { column, clickToCopy }) {
+        super(...arguments);
+
+        this.clickToCopy = clickToCopy ?? false;
+
+        if (column && column.cellComponentArgs) {
+            this.clickToCopy = column.cellComponentArgs.clickToCopy ?? false;
+        }
     }
 
     /**
diff --git a/addon/components/combo-box.hbs b/addon/components/combo-box.hbs
index 3eec425..f6ff856 100644
--- a/addon/components/combo-box.hbs
+++ b/addon/components/combo-box.hbs
@@ -20,10 +20,18 @@
         </div>
         <div class="controls h-48 flex items-center justify-center">
             <div>
-                <button {{on "click" this.confirmPending}} type="button" class="rounded-t-md px-3 py-2 flex items-center justify-center bg-gray-50 dark:bg-gray-700 hover:bg-opacity:50 w-full border-b border-gray-200 dark:border-gray-900">
+                <button
+                    {{on "click" this.confirmPending}}
+                    type="button"
+                    class="rounded-t-md px-3 py-2 flex items-center justify-center bg-gray-50 dark:bg-gray-700 hover:bg-opacity:50 w-full border-b border-gray-200 dark:border-gray-900"
+                >
                     <FaIcon @icon="arrow-right" class="text-sky-400" />
                 </button>
-                <button {{on "click" this.confirmUnpending}} type="button" class="rounded-b-md px-3 py-2 flex items-center justify-center bg-gray-50 dark:bg-gray-700 hover:bg-opacity:50 w-full">
+                <button
+                    {{on "click" this.confirmUnpending}}
+                    type="button"
+                    class="rounded-b-md px-3 py-2 flex items-center justify-center bg-gray-50 dark:bg-gray-700 hover:bg-opacity:50 w-full"
+                >
                     <FaIcon @icon="arrow-left" class="text-sky-400" />
                 </button>
             </div>
diff --git a/addon/components/comment-thread.hbs b/addon/components/comment-thread.hbs
index 39c8e60..69bc9c8 100644
--- a/addon/components/comment-thread.hbs
+++ b/addon/components/comment-thread.hbs
@@ -1,7 +1,14 @@
 <div class="flex flex-col mb-4" ...attributes>
     <Textarea @value={{this.input}} class="form-input w-full" placeholder={{t "component.comment-thread.comment-input-placeholder"}} rows={{3}} disabled={{not this.publishComment.isIdle}} />
     <div class="flex flex-row items-center justify-end mt-2">
-        <Button @type="primary" @buttonType="button" @icon="paper-plane" @text={{t "component.comment-thread.publish-comment-button-text"}} @onClick={{perform this.publishComment}} @disabled={{or (not this.publishComment.isIdle) (not this.input)}} />
+        <Button
+            @type="primary"
+            @buttonType="button"
+            @icon="paper-plane"
+            @text={{t "component.comment-thread.publish-comment-button-text"}}
+            @onClick={{perform this.publishComment}}
+            @disabled={{or (not this.publishComment.isIdle) (not this.input)}}
+        />
     </div>
 </div>
 <div>
diff --git a/addon/components/comment-thread/comment.hbs b/addon/components/comment-thread/comment.hbs
index 92b76da..d648c00 100644
--- a/addon/components/comment-thread/comment.hbs
+++ b/addon/components/comment-thread/comment.hbs
@@ -9,28 +9,91 @@
         </div>
         <div class="thread-comment-conent-paragraph-wrapper mt-2">
             {{#if this.editing}}
-                <Textarea @value={{this.comment.content}} class="form-input w-full" placeholder={{t "component.comment-thread.comment-reply-placeholder"}} rows={{2}} disabled={{not this.updateComment.isIdle}} />
+                <Textarea
+                    @value={{this.comment.content}}
+                    class="form-input w-full"
+                    placeholder={{t "component.comment-thread.comment-reply-placeholder"}}
+                    rows={{2}}
+                    disabled={{not this.updateComment.isIdle}}
+                />
                 <div class="flex flex-row items-center justify-end space-x-2 mt-2">
                     <Button @type="link" @buttonType="button" @size="xs" @text={{t "common.cancel"}} @onClick={{this.cancelEdit}} @disabled={{not this.updateComment.isIdle}} />
-                    <Button @type="primary" @buttonType="button" @icon="save" @size="xs" @iconSize="xs" @iconClass="text-xs" @text={{t "common.save"}} @onClick={{perform this.updateComment}} @disabled={{or (not this.updateComment.isIdle) (not this.comment.content)}} />
+                    <Button
+                        @type="primary"
+                        @buttonType="button"
+                        @icon="save"
+                        @size="xs"
+                        @iconSize="xs"
+                        @iconClass="text-xs"
+                        @text={{t "common.save"}}
+                        @onClick={{perform this.updateComment}}
+                        @disabled={{or (not this.updateComment.isIdle) (not this.comment.content)}}
+                    />
                 </div>
             {{else}}
                 <p class="thread-comment-conent-paragraph text-xs text-gray-900 dark:text-gray-100">{{this.comment.content}}</p>
             {{/if}}
         </div>
         <div class="thread-comment-conent-actions-wrapper flex flex-row items-center mt-2 space-x-4">
-            <Button @wrapperClass="thread-comment-conent-actions-reply" @type="link" @buttonType="button" @size="xs" @iconSize="xs" @textClass="text-xs" @icon="reply" @text={{t "component.comment-thread.reply-comment-button-text"}} @onClick={{this.reply}} />
+            <Button
+                @wrapperClass="thread-comment-conent-actions-reply"
+                @type="link"
+                @buttonType="button"
+                @size="xs"
+                @iconSize="xs"
+                @textClass="text-xs"
+                @icon="reply"
+                @text={{t "component.comment-thread.reply-comment-button-text"}}
+                @onClick={{this.reply}}
+            />
             {{#if this.comment.editable}}
-                <Button @wrapperClass="thread-comment-conent-actions-edit" @type="link" @buttonType="button" @size="xs" @iconSize="xs" @textClass="text-xs" @icon="edit" @text={{t "component.comment-thread.edit-comment-button-text"}} @onClick={{this.edit}} />
-                <Button @wrapperClass="thread-comment-conent-actions-delete" @type="link" @buttonType="button" @size="xs" @iconSize="xs" @iconClass="text-xs text-danger" @textClass="text-xs text-danger" @icon="trash" @text={{t "component.comment-thread.delete-comment-button-text"}} @onClick={{this.delete}} />
+                <Button
+                    @wrapperClass="thread-comment-conent-actions-edit"
+                    @type="link"
+                    @buttonType="button"
+                    @size="xs"
+                    @iconSize="xs"
+                    @textClass="text-xs"
+                    @icon="edit"
+                    @text={{t "component.comment-thread.edit-comment-button-text"}}
+                    @onClick={{this.edit}}
+                />
+                <Button
+                    @wrapperClass="thread-comment-conent-actions-delete"
+                    @type="link"
+                    @buttonType="button"
+                    @size="xs"
+                    @iconSize="xs"
+                    @iconClass="text-xs text-danger"
+                    @textClass="text-xs text-danger"
+                    @icon="trash"
+                    @text={{t "component.comment-thread.delete-comment-button-text"}}
+                    @onClick={{this.delete}}
+                />
             {{/if}}
         </div>
         {{#if this.replying}}
             <div class="flex flex-col mt-3">
-                <Textarea @value={{this.input}} class="form-input w-full" placeholder={{t "component.comment-thread.comment-reply-placeholder"}} rows={{2}} disabled={{not this.publishReply.isIdle}} />
+                <Textarea
+                    @value={{this.input}}
+                    class="form-input w-full"
+                    placeholder={{t "component.comment-thread.comment-reply-placeholder"}}
+                    rows={{2}}
+                    disabled={{not this.publishReply.isIdle}}
+                />
                 <div class="flex flex-row items-center justify-end space-x-2 mt-2">
                     <Button @type="link" @buttonType="button" @size="xs" @text={{t "common.cancel"}} @onClick={{this.cancelReply}} @disabled={{not this.publishReply.isIdle}} />
-                    <Button @type="primary" @buttonType="button" @icon="reply" @size="xs" @iconSize="xs" @iconClass="text-xs" @text={{t "component.comment-thread.publish-reply-button-text"}} @onClick={{perform this.publishReply}} @disabled={{or (not this.publishReply.isIdle) (not this.input)}} />
+                    <Button
+                        @type="primary"
+                        @buttonType="button"
+                        @icon="reply"
+                        @size="xs"
+                        @iconSize="xs"
+                        @iconClass="text-xs"
+                        @text={{t "component.comment-thread.publish-reply-button-text"}}
+                        @onClick={{perform this.publishReply}}
+                        @disabled={{or (not this.publishReply.isIdle) (not this.input)}}
+                    />
                 </div>
             </div>
         {{/if}}
diff --git a/addon/components/content-panel.hbs b/addon/components/content-panel.hbs
index c7d60ae..ba3469f 100644
--- a/addon/components/content-panel.hbs
+++ b/addon/components/content-panel.hbs
@@ -1,7 +1,12 @@
 <div class="next-content-panel-wrapper {{@wrapperClass}} {{if @isLoading 'is-loading'}}">
     <div class="next-content-panel-container {{@containerClass}}">
         <div class="next-content-panel {{if this.isOpen 'next-content-panel-is-open' 'next-content-panel-is-closed'}} {{@panelClass}} {{if @isLoading 'is-loading'}}">
-            <div class="next-content-panel-header next-content-panel-toggle {{if this.isOpen 'next-content-panel-is-open' 'next-content-panel-is-closed'}} {{@panelHeaderClass}} {{if @isLoading 'is-loading'}}">
+            <div
+                class="next-content-panel-header next-content-panel-toggle
+                    {{if this.isOpen 'next-content-panel-is-open' 'next-content-panel-is-closed'}}
+                    {{@panelHeaderClass}}
+                    {{if @isLoading 'is-loading'}}"
+            >
                 <a href="javascript:;" aria-expanded={{this.isOpen}} class="next-content-panel-header-left {{@panelHeaderLeftClass}}" {{on "click" this.toggle}}>
                     {{#unless @hideCaret}}
                         <span class="icon-container" {{did-insert this.trackIconContainer}}>
@@ -57,11 +62,21 @@
                         {{#if @titleStatusRight}}
                             <span class="ml-2 {{@titleStatusRightContainerClass}}">
                                 {{#if @titleStatusRightText}}
-                                    <Badge @status={{@titleStatusRight}} @hideStatusDot={{@hideRightTitleStatusDot}} class={{@titleStatusRightClass}} @disableHumanize={{@disableTitleStatusRightHumanize}}>
+                                    <Badge
+                                        @status={{@titleStatusRight}}
+                                        @hideStatusDot={{@hideRightTitleStatusDot}}
+                                        class={{@titleStatusRightClass}}
+                                        @disableHumanize={{@disableTitleStatusRightHumanize}}
+                                    >
                                         {{@titleStatusRightText}}
                                     </Badge>
                                 {{else}}
-                                    <Badge @status={{@titleStatusRight}} @hideStatusDot={{@hideRightTitleStatusDot}} class={{@titleStatusRightClass}} @disableHumanize={{@disableTitleStatusRightHumanize}} />
+                                    <Badge
+                                        @status={{@titleStatusRight}}
+                                        @hideStatusDot={{@hideRightTitleStatusDot}}
+                                        class={{@titleStatusRightClass}}
+                                        @disableHumanize={{@disableTitleStatusRightHumanize}}
+                                    />
                                 {{/if}}
                             </span>
                         {{/if}}
@@ -69,7 +84,16 @@
                             <Button @type={{button.type}} @text={{button.text}} @icon={{button.icon}} @size={{button.size}} @iconPrefix={{button.iconPrefix}} @onClick={{button.onClick}} />
                         {{/each}}
                         {{#if @dropdownButton}}
-                            <DropdownButton @icon={{or @dropdownButtonIcon "ellipsis"}} @iconPrefix={{@dropdownButtonIconPrefix}} @text={{@dropdownButtonText}} @size="xs" @horizontalPosition="left" @calculatePosition={{@dropdownButtonCalculatePosition}} @renderInPlace={{this.dropdownButtonRenderInPlace}} as |dd|>
+                            <DropdownButton
+                                @icon={{or @dropdownButtonIcon "ellipsis"}}
+                                @iconPrefix={{@dropdownButtonIconPrefix}}
+                                @text={{@dropdownButtonText}}
+                                @size="xs"
+                                @horizontalPosition="left"
+                                @calculatePosition={{@dropdownButtonCalculatePosition}}
+                                @renderInPlace={{this.dropdownButtonRenderInPlace}}
+                                as |dd|
+                            >
                                 <div class="next-dd-menu mt-0i" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
                                     {{#if @dropdownButtonMenuLabel}}
                                         <div class="px-1">
@@ -105,7 +129,13 @@
             </div>
             <div class="next-content-panel-body {{if this.isOpen 'next-content-panel-is-open' 'next-content-panel-is-closed'}} {{@panelBodyClass}} {{if @isLoading 'is-loading'}}">
                 {{#if this.isOpen}}
-                    <div class="next-content-panel-body-inner next-content-panel-body-wrapper relative {{@panelBodyWrapperClass}} {{if @pad 'p-4'}} {{if @isLoading 'opacity-50'}} {{if @isLoading 'is-loading'}}">
+                    <div
+                        class="next-content-panel-body-inner next-content-panel-body-wrapper relative
+                            {{@panelBodyWrapperClass}}
+                            {{if @pad 'p-4'}}
+                            {{if @isLoading 'opacity-50'}}
+                            {{if @isLoading 'is-loading'}}"
+                    >
                         {{#if @isLoading}}
                             <div class="absolute w-full h-full inset-0 bg-opacity-50 bg-gray-900 flex items-center justify-center">
                                 <div class="flex flex-row items-center">
diff --git a/addon/components/coordinates-input.hbs b/addon/components/coordinates-input.hbs
index 14557fa..8dda317 100644
--- a/addon/components/coordinates-input.hbs
+++ b/addon/components/coordinates-input.hbs
@@ -9,7 +9,17 @@
         </dd.Trigger>
         <dd.Content class="bg-transparent min-w-500px">
             <div class="coordinates-input-map-container rounded shadow-md w-60 h-60 relative my-3 {{@mapContainerClass}}">
-                <LeafletMap class={{@leafletMapClass}} @lat={{this.mapLat}} @lng={{this.mapLng}} @zoomControl={{this.zoomControl}} @zoom={{this.zoom}} @onLoad={{this.onMapLoaded}} @onMoveend={{this.setCoordinatesFromMap}} @doubleClickZoom={{false}} as |layers|>
+                <LeafletMap
+                    class={{@leafletMapClass}}
+                    @lat={{this.mapLat}}
+                    @lng={{this.mapLng}}
+                    @zoomControl={{this.zoomControl}}
+                    @zoom={{this.zoom}}
+                    @onLoad={{this.onMapLoaded}}
+                    @onMoveend={{this.setCoordinatesFromMap}}
+                    @doubleClickZoom={{false}}
+                    as |layers|
+                >
                     <layers.tile @url={{this.tileSourceUrl}} />
                 </LeafletMap>
                 <div class="coordinates-input-zoom-controls {{@zoomControlClass}}">
diff --git a/addon/components/country-select.hbs b/addon/components/country-select.hbs
index d1ded7c..9ad8aa1 100644
--- a/addon/components/country-select.hbs
+++ b/addon/components/country-select.hbs
@@ -1,5 +1,19 @@
 <div class="fleetbase-power-select {{@wrapperClass}}">
-    <PowerSelect @renderInPlace={{true}} @searchEnabled={{true}} @selected={{this.selected}} @searchField="name" @options={{this.countries}} @onChange={{this.selectCountry}} @triggerClass="form-select form-input {{@triggerClass}}" @dropdownClass={{or @dropdownClass "ember-model-select__dropdown"}} @placeholder={{or @placeholder "Select country..."}} @disabled={{this.isLoading}} @allowClear={{@allowClear}} ...attributes as |country|>
+    <PowerSelect
+        @renderInPlace={{true}}
+        @searchEnabled={{true}}
+        @selected={{this.selected}}
+        @searchField="name"
+        @options={{this.countries}}
+        @onChange={{this.selectCountry}}
+        @triggerClass="form-select form-input {{@triggerClass}}"
+        @dropdownClass={{or @dropdownClass "ember-model-select__dropdown"}}
+        @placeholder={{or @placeholder "Select country..."}}
+        @disabled={{this.isLoading}}
+        @allowClear={{@allowClear}}
+        ...attributes
+        as |country|
+    >
         <span class="mr-1">{{country.emoji}}</span>
         <span>{{country.name}}</span>
     </PowerSelect>
diff --git a/addon/components/currency-select.hbs b/addon/components/currency-select.hbs
index f515165..ab03e03 100644
--- a/addon/components/currency-select.hbs
+++ b/addon/components/currency-select.hbs
@@ -1,4 +1,18 @@
-<PowerSelect class="money-input-currency-selector" @placeholder={{@placeholder}} @triggerClass={{@triggerClass}} @matcher={{this.searchCurrencies}} @searchEnabled={{true}} @searchField="code" @searchPlaceholder="Search by currency code" @renderInPlace={{true}} @options={{this.currencies}} @selected={{this.currencyData}} @onChange={{this.onChange}} @triggerComponent={{@triggerComponent}} as |currency|>
+<PowerSelect
+    class="money-input-currency-selector"
+    @placeholder={{@placeholder}}
+    @triggerClass={{@triggerClass}}
+    @matcher={{this.searchCurrencies}}
+    @searchEnabled={{true}}
+    @searchField="code"
+    @searchPlaceholder="Search by currency code"
+    @renderInPlace={{true}}
+    @options={{this.currencies}}
+    @selected={{this.currencyData}}
+    @onChange={{this.onChange}}
+    @triggerComponent={{@triggerComponent}}
+    as |currency|
+>
     {{#if (has-block)}}
         <div class="truncate flex items-center">{{yield currency}}</div>
     {{else}}
diff --git a/addon/components/date-time-input.hbs b/addon/components/date-time-input.hbs
index c95f8e7..79a0434 100644
--- a/addon/components/date-time-input.hbs
+++ b/addon/components/date-time-input.hbs
@@ -1,4 +1,4 @@
-<div class="ui-date-time-input grid grid-cols-2 gap-2" ...attributes> 
+<div class="ui-date-time-input grid grid-cols-2 gap-2" ...attributes>
     <Input @type="date" @value={{this.date}} min={{@minDate}} max={{@maxDate}} aria-label="Date Input" class="border-0 m-0 p-0 bg-transparent" {{on "input" (fn this.update "date")}} />
     <Input @type="time" @value={{this.time}} min={{@minTime}} max={{@maxTime}} aria-label="Time Input" class="border-0 m-0 p-0 bg-transparent" {{on "input" (fn this.update "time")}} />
 </div>
\ No newline at end of file
diff --git a/addon/components/drawer.hbs b/addon/components/drawer.hbs
index 23c0ce0..efd5580 100644
--- a/addon/components/drawer.hbs
+++ b/addon/components/drawer.hbs
@@ -1,4 +1,15 @@
-<div role="dialog" aria-modal="true" class="next-drawer {{if this.isMinimized 'drawer-is-minimized'}} {{if this.isResizing 'drawer-is-resizing'}} {{if this.isOpen 'drawer-is-open'}} {{if this.noBackdrop 'drawer-no-backdrop'}} {{if @fullHeight 'drawer-full-height'}} {{@overlayClass}}" {{did-insert this.setupComponent}}>
+<div
+    role="dialog"
+    aria-modal="true"
+    class="next-drawer
+        {{if this.isMinimized 'drawer-is-minimized'}}
+        {{if this.isResizing 'drawer-is-resizing'}}
+        {{if this.isOpen 'drawer-is-open'}}
+        {{if this.noBackdrop 'drawer-no-backdrop'}}
+        {{if @fullHeight 'drawer-full-height'}}
+        {{@overlayClass}}"
+    {{did-insert this.setupComponent}}
+>
     {{#if this._rendered}}
         <div class="next-drawer-panel-container {{@containerClass}}" {{did-insert (fn this.setupNode "drawerContainer")}}>
             {{#if this.isResizable}}
diff --git a/addon/components/dropdown-button.hbs b/addon/components/dropdown-button.hbs
index ed07448..30fe8d1 100644
--- a/addon/components/dropdown-button.hbs
+++ b/addon/components/dropdown-button.hbs
@@ -1,9 +1,51 @@
-<BasicDropdown id={{@dropdownId}} class={{@wrapperClass}} @renderInPlace={{@renderInPlace}} @registerAPI={{this.onRegisterAPI}} @horizontalPosition={{@horizontalPosition}} @verticalPosition={{@verticalPosition}} @calculatePosition={{@calculatePosition}} @defaultClass={{@defaultClass}} @matchTriggerWidth={{@matchTriggerWidth}} @onOpen={{@onOpen}} @onClose={{@onClose}} {{did-insert this.onInsert}} as |dd|>
+<BasicDropdown
+    id={{@dropdownId}}
+    class={{@wrapperClass}}
+    @renderInPlace={{@renderInPlace}}
+    @registerAPI={{this.onRegisterAPI}}
+    @horizontalPosition={{@horizontalPosition}}
+    @verticalPosition={{@verticalPosition}}
+    @calculatePosition={{@calculatePosition}}
+    @defaultClass={{@defaultClass}}
+    @matchTriggerWidth={{@matchTriggerWidth}}
+    @onOpen={{@onOpen}}
+    @onClose={{@onClose}}
+    {{did-insert this.onInsert}}
+    as |dd|
+>
     <dd.Trigger class={{@triggerClass}} {{did-insert this.onTriggerInsert}}>
         {{#if @buttonComponent}}
-            {{component @buttonComponent buttonComponentArgs=this.buttonComponentArgs text=@text class=(concat @buttonClass (if dd.isOpen ' dd-is-open')) wrapperClass=@buttonWrapperClass type=this.type active=@active size=this.buttonSize isLoading=@isLoading disabled=@disabled textClass=@textClass helpText=@helpText tooltipPlacement=@tooltipPlacement img=@img imgClass=@imgClass alt=@alt}}
+            {{component
+                @buttonComponent
+                buttonComponentArgs=this.buttonComponentArgs
+                text=@text
+                class=(concat @buttonClass (if dd.isOpen " dd-is-open"))
+                wrapperClass=@buttonWrapperClass
+                type=this.type
+                active=@active
+                size=this.buttonSize
+                isLoading=@isLoading
+                disabled=@disabled
+                textClass=@textClass
+                helpText=@helpText
+                tooltipPlacement=@tooltipPlacement
+                img=@img
+                imgClass=@imgClass
+                alt=@alt
+            }}
         {{else}}
-            <Button title={{@text}} class="{{@buttonClass}} {{if dd.isOpen 'dd-is-open'}}" @wrapperClass={{@buttonWrapperClass}} @type={{this.type}} @active={{@active}} @size={{this.buttonSize}} @isLoading={{@isLoading}} disabled={{@disabled}} {{did-insert this.onButtonInsert}} ...attributes>
+            <Button
+                title={{@text}}
+                class="{{@buttonClass}} {{if dd.isOpen 'dd-is-open'}}"
+                @wrapperClass={{@buttonWrapperClass}}
+                @type={{this.type}}
+                @active={{@active}}
+                @size={{this.buttonSize}}
+                @isLoading={{@isLoading}}
+                disabled={{@disabled}}
+                {{did-insert this.onButtonInsert}}
+                ...attributes
+            >
                 {{#if @icon}}
                     <FaIcon @icon={{@icon}} @prefix={{@iconPrefix}} @size={{@iconSize}} class="{{@iconClass}} {{if @text 'mr-2'}}" />
                 {{/if}}
@@ -11,7 +53,7 @@
                     <img src={{@img}} class={{@imgClass}} alt={{or @alt "image"}} />
                 {{/if}}
                 {{#if @helpText}}
-                    <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPlacement "top" }}>
+                    <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPlacement "top"}}>
                         <InputInfo @text={{@helpText}} />
                     </Attach::Tooltip>
                 {{/if}}
diff --git a/addon/components/fetch-select.hbs b/addon/components/fetch-select.hbs
index 65b020a..06700b8 100644
--- a/addon/components/fetch-select.hbs
+++ b/addon/components/fetch-select.hbs
@@ -1,5 +1,63 @@
 <div class="fleetbase-model-select fleetbase-power-select ember-model-select {{@wrapperClass}}">
-    <PowerSelect @registerAPI={{this.registerAPI}} @afterOptionsComponent={{@afterOptionsComponent}} @allowClear={{@allowClear}} @animationEnabled={{@animationEnabled}} @ariaDescribedBy={{@ariaDescribedBy}} @ariaInvalid={{@ariaInvalid}} @ariaLabel={{@ariaLabel}} @ariaLabelledBy={{@ariaLabelledBy}} @beforeOptionsComponent={{@beforeOptionsComponent}} @buildSelection={{@buildSelection}} @calculatePosition={{@calculatePosition}} @closeOnSelect={{@closeOnSelect}} @defaultHighlighted={{@defaultHighlighted}} @destination={{@destination}} @disabled={{@disabled}} @dropdownClass={{or @dropdownClass "ember-model-select__dropdown"}} @extra={{@extra}} @groupComponent={{@groupComponent}} @highlightOnHover={{@highlightOnHover}} @horizontalPosition={{@horizontalPosition}} @initiallyOpened={{@initiallyOpened}} @loadingMessage={{@loadingMessage}} @eventType={{@eventType}} @matcher={{@matcher}} @matchTriggerWidth={{@matchTriggerWidth}} @noMatchesMessage={{@noMatchesMessage}} @onBlur={{@onBlur}} @onChange={{this.onChange}} @onClose={{this.onClose}} @onFocus={{@onFocus}} @onInput={{this.onInput}} @onKeydown={{@onKeydown}} @onOpen={{this.onOpen}} @options={{this.options}} @optionsComponent={{component this.optionsComponent}} @placeholder={{@placeholder}} @placeholderComponent={{@placeholderComponent}} @preventScroll={{@preventScroll}} @renderInPlace={{@renderInPlace}} @scrollTo={{@scrollTo}} @search={{perform this.searchOptions}} @searchEnabled={{get-default-value @searchEnabled true}} @searchField={{@searchField}} @searchMessage={{@searchMessage}} @searchPlaceholder={{@searchPlaceholder}} @selected={{this.selected}} @selectedItemComponent={{@selectedItemComponent}} @tabindex={{@tabindex}} @triggerClass="form-select form-input {{@triggerClass}}" @triggerComponent={{@triggerComponent}} @triggerId={{@triggerId}} @triggerRole={{@triggerRole}} @typeAheadMatcher={{@typeAheadMatcher}} @verticalPosition={{@verticalPosition}} @withCreate={{@withCreate}} ...attributes as |option|>
+    <PowerSelect
+        @registerAPI={{this.registerAPI}}
+        @afterOptionsComponent={{@afterOptionsComponent}}
+        @allowClear={{@allowClear}}
+        @animationEnabled={{@animationEnabled}}
+        @ariaDescribedBy={{@ariaDescribedBy}}
+        @ariaInvalid={{@ariaInvalid}}
+        @ariaLabel={{@ariaLabel}}
+        @ariaLabelledBy={{@ariaLabelledBy}}
+        @beforeOptionsComponent={{@beforeOptionsComponent}}
+        @buildSelection={{@buildSelection}}
+        @calculatePosition={{@calculatePosition}}
+        @closeOnSelect={{@closeOnSelect}}
+        @defaultHighlighted={{@defaultHighlighted}}
+        @destination={{@destination}}
+        @disabled={{@disabled}}
+        @dropdownClass={{or @dropdownClass "ember-model-select__dropdown"}}
+        @extra={{@extra}}
+        @groupComponent={{@groupComponent}}
+        @highlightOnHover={{@highlightOnHover}}
+        @horizontalPosition={{@horizontalPosition}}
+        @initiallyOpened={{@initiallyOpened}}
+        @loadingMessage={{@loadingMessage}}
+        @eventType={{@eventType}}
+        @matcher={{@matcher}}
+        @matchTriggerWidth={{@matchTriggerWidth}}
+        @noMatchesMessage={{@noMatchesMessage}}
+        @onBlur={{@onBlur}}
+        @onChange={{this.onChange}}
+        @onClose={{this.onClose}}
+        @onFocus={{@onFocus}}
+        @onInput={{this.onInput}}
+        @onKeydown={{@onKeydown}}
+        @onOpen={{this.onOpen}}
+        @options={{this.options}}
+        @optionsComponent={{component this.optionsComponent}}
+        @placeholder={{@placeholder}}
+        @placeholderComponent={{@placeholderComponent}}
+        @preventScroll={{@preventScroll}}
+        @renderInPlace={{@renderInPlace}}
+        @scrollTo={{@scrollTo}}
+        @search={{perform this.searchOptions}}
+        @searchEnabled={{get-default-value @searchEnabled true}}
+        @searchField={{@searchField}}
+        @searchMessage={{@searchMessage}}
+        @searchPlaceholder={{@searchPlaceholder}}
+        @selected={{this.selected}}
+        @selectedItemComponent={{@selectedItemComponent}}
+        @tabindex={{@tabindex}}
+        @triggerClass="form-select form-input {{@triggerClass}}"
+        @triggerComponent={{@triggerComponent}}
+        @triggerId={{@triggerId}}
+        @triggerRole={{@triggerRole}}
+        @typeAheadMatcher={{@typeAheadMatcher}}
+        @verticalPosition={{@verticalPosition}}
+        @withCreate={{@withCreate}}
+        ...attributes
+        as |option|
+    >
         {{#if (has-block)}}
             {{yield option}}
         {{else}}
diff --git a/addon/components/file-upload.hbs b/addon/components/file-upload.hbs
index 4454d2d..a27a461 100644
--- a/addon/components/file-upload.hbs
+++ b/addon/components/file-upload.hbs
@@ -1,6 +1,9 @@
-{{#let (file-queue name=@name onFileAdded=@onFileAdded onFileRemoved=@onFileRemoved onUploadStarted=@onUploadStarted onUploadSucceeded=@onUploadSucceeded onUploadFailed=@onUploadFailed) as |queue|}}
+{{#let
+    (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}}>
+        <input type="file" accept={{@accept}} hidden={{or @hidden true}} class={{@inputClass}} {{queue.selectFile}} />
         {{yield queue}}
     </label>
 {{/let}}
\ No newline at end of file
diff --git a/addon/components/file.hbs b/addon/components/file.hbs
index c5488a9..1fbd60b 100644
--- a/addon/components/file.hbs
+++ b/addon/components/file.hbs
@@ -1,7 +1,22 @@
 <div class="x-fleetbase-file" ...attributes>
     <div class="x-fleetbase-file-wrapper">
         <div class="x-fleetbase-file-actions">
-            <DropdownButton @dropdownId="x-fleetbase-file-actions-dropdown" @icon="ellipsis" @iconSize="xs" @iconPrefix={{@dropdownButtonIconPrefix}} @text={{@dropdownButtonText}} @size="xs" @horizontalPosition="left" @calculatePosition={{@dropdownButtonCalculatePosition}} @renderInPlace={{or @dropdownButtonRenderInPlace true}} @wrapperClass={{concat @dropdownButtonWrapperClass " " "next-nav-item-dropdown-button"}} @triggerClass={{@dropdownButtonTriggerClass}} @registerAPI={{@registerAPI}} @onInsert={{this.onDropdownButtonInsert}} as |dd|>
+            <DropdownButton
+                @dropdownId="x-fleetbase-file-actions-dropdown"
+                @icon="ellipsis"
+                @iconSize="xs"
+                @iconPrefix={{@dropdownButtonIconPrefix}}
+                @text={{@dropdownButtonText}}
+                @size="xs"
+                @horizontalPosition="left"
+                @calculatePosition={{@dropdownButtonCalculatePosition}}
+                @renderInPlace={{or @dropdownButtonRenderInPlace true}}
+                @wrapperClass={{concat @dropdownButtonWrapperClass " " "next-nav-item-dropdown-button"}}
+                @triggerClass={{@dropdownButtonTriggerClass}}
+                @registerAPI={{@registerAPI}}
+                @onInsert={{this.onDropdownButtonInsert}}
+                as |dd|
+            >
                 <div class="next-dd-menu mt-0i" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
                     <div class="px-1">
                         <div class="text-sm flex flex-row items-center px-3 py-1 rounded-md my-1 text-gray-800 dark:text-gray-300">
@@ -10,7 +25,7 @@
                     </div>
                     <div class="next-dd-menu-seperator"></div>
                     <div role="group" class="px-1">
-                        {{!-- template-lint-disable no-nested-interactive --}}
+                        {{! template-lint-disable no-nested-interactive }}
                         <a href="javascript:;" role="menuitem" class="next-dd-item text-danger" {{on "click" (fn this.onDropdownItemClick "onDelete" dd)}}>
                             <span class="mr-1">
                                 <FaIcon @icon="trash" @prefix={{@dropdownButtonIconPrefix}} />
diff --git a/addon/components/filter/date.hbs b/addon/components/filter/date.hbs
index bbf1f9b..4133d23 100644
--- a/addon/components/filter/date.hbs
+++ b/addon/components/filter/date.hbs
@@ -1,3 +1,11 @@
 <div class="filter-date">
-    <DatePicker @value={{@value}} @onSelect={{this.onChange}} @placeholder={{@placeholder}} @range={{true}} @toggleSelected={{false}} @autoClose={{false}} class="filter-date-input form-input-sm w-full flex-1" />
+    <DatePicker
+        @value={{@value}}
+        @onSelect={{this.onChange}}
+        @placeholder={{@placeholder}}
+        @range={{true}}
+        @toggleSelected={{false}}
+        @autoClose={{false}}
+        class="filter-date-input form-input-sm w-full flex-1"
+    />
 </div>
\ No newline at end of file
diff --git a/addon/components/filter/model.hbs b/addon/components/filter/model.hbs
index f852ad2..0c74b17 100644
--- a/addon/components/filter/model.hbs
+++ b/addon/components/filter/model.hbs
@@ -1 +1,13 @@
-<ModelSelect @modelName={{@filter.model}} @query={{@filter.query}} @optionLabel={{or @filter.modelNamePath "name"}} @selectedModel={{this.selectedModel}} @placeholder={{@placeholder}} @triggerClass="form-select form-input form-input-sm flex-1" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{this.onChange}} @allowClear={{true}} @onClear={{this.clear}} />
\ No newline at end of file
+<ModelSelect
+    @modelName={{@filter.model}}
+    @query={{@filter.query}}
+    @optionLabel={{or @filter.modelNamePath "name"}}
+    @selectedModel={{this.selectedModel}}
+    @placeholder={{@placeholder}}
+    @triggerClass="form-select form-input form-input-sm flex-1"
+    @infiniteScroll={{false}}
+    @renderInPlace={{true}}
+    @onChange={{this.onChange}}
+    @allowClear={{true}}
+    @onClear={{this.clear}}
+/>
\ No newline at end of file
diff --git a/addon/components/filter/multi-option.hbs b/addon/components/filter/multi-option.hbs
index f0b6859..34f724b 100644
--- a/addon/components/filter/multi-option.hbs
+++ b/addon/components/filter/multi-option.hbs
@@ -1,5 +1,17 @@
 <div class="filter-multi-option">
-    <MultiSelect @selectClass="form-input form-input-sm flex-1" @options={{this.options}} @search={{this.search}} @searchField={{@filter.multiOptionSearchField}} @searchEnabled={{@filter.multiOptionSearchEnabled}} @searchPlaceholder={{@filter.multiOptionSearchPlaceholder}} @selected={{this.value}} @placeholder={{@placeholder}} @onChange={{this.onChange}} @allowClear={{@allowClear}} as |option|>
+    <MultiSelect
+        @selectClass="form-input form-input-sm flex-1"
+        @options={{this.options}}
+        @search={{this.search}}
+        @searchField={{@filter.multiOptionSearchField}}
+        @searchEnabled={{@filter.multiOptionSearchEnabled}}
+        @searchPlaceholder={{@filter.multiOptionSearchPlaceholder}}
+        @selected={{this.value}}
+        @placeholder={{@placeholder}}
+        @onChange={{this.onChange}}
+        @allowClear={{@allowClear}}
+        as |option|
+    >
         {{or (get option @optionLabel) option}}
     </MultiSelect>
 
diff --git a/addon/components/filter/select.hbs b/addon/components/filter/select.hbs
index 6d265d1..4c8f3bd 100644
--- a/addon/components/filter/select.hbs
+++ b/addon/components/filter/select.hbs
@@ -1 +1,10 @@
-<Select @options={{this.options}} @optionLabel={{@filter.optionLabel}} @optionValue={{@filter.optionValue}} @value={{this.value}} @onSelect={{this.onChange}} @placeholder={{@filter.placeholder}} class="w-full form-input form-input-sm" ...attributes />
\ No newline at end of file
+<Select
+    @options={{this.options}}
+    @optionLabel={{this.optionLabel}}
+    @optionValue={{this.optionValue}}
+    @value={{this.value}}
+    @onSelect={{this.onChange}}
+    @placeholder={{this.placeholder}}
+    class="w-full form-input form-input-sm"
+    ...attributes
+/>
\ No newline at end of file
diff --git a/addon/components/filter/select.js b/addon/components/filter/select.js
index 36555b9..8667101 100644
--- a/addon/components/filter/select.js
+++ b/addon/components/filter/select.js
@@ -9,6 +9,9 @@ const { assign } = Object;
 export default class FilterSelectComponent extends Component {
     @service fetch;
     @tracked value;
+    @tracked optionLabel;
+    @tracked optionValue;
+    @tracked placeholder;
     @tracked options = [];
     @tracked isLoading = false;
 
@@ -16,6 +19,9 @@ export default class FilterSelectComponent extends Component {
         super(...arguments);
         this.value = this.args.value;
         this.options = isArray(this.args.options) ? this.args.options : [];
+        this.optionLabel = this.args.optionLabel ?? this.args.filterOptionLabel;
+        this.optionValue = this.args.optionValue ?? this.args.filterOptionValue;
+        this.placeholder = this.args.placeholder ?? this.args.filterPlaceholder;
 
         if (typeof this.args.filter?.filterFetchOptions === 'string') {
             this.fetchOptions(this.args.filter?.filterFetchOptions);
diff --git a/addon/components/filters-picker.hbs b/addon/components/filters-picker.hbs
index 3918b00..2f97c22 100644
--- a/addon/components/filters-picker.hbs
+++ b/addon/components/filters-picker.hbs
@@ -1,4 +1,26 @@
-<DropdownButton @buttonComponent="filters-picker/button" @buttonComponentArgs={{hash activeFilters=this.activeFilters}} @text={{or @text "Filter"}} @icon={{or @icon "filter"}} @type={{@type}} @size={{or @size "xs"}} @buttonClass={{@buttonClass}} @buttonWrapperClass={{@buttonWrapperClass}} @triggerClass={{@triggerClass}} @wrapperClass={{@wrapperClass}} @renderInPlace={{@renderInPlace}} @registerAPI={{@registerAPI}} @horizontalPosition={{@horizontalPosition}} @verticalPosition={{@verticalPosition}} @calculatePosition={{@calculatePosition}} @defaultClass={{@defaultClass}} @matchTriggerWidth={{@matchTriggerWidth}} @onOpen={{this.updateFilters}} @onClose={{this.updateFilters}} ...attributes as |dd|>
+<DropdownButton
+    @buttonComponent="filters-picker/button"
+    @buttonComponentArgs={{hash activeFilters=this.activeFilters}}
+    @text={{or @text "Filter"}}
+    @icon={{or @icon "filter"}}
+    @type={{@type}}
+    @size={{or @size "xs"}}
+    @buttonClass={{@buttonClass}}
+    @buttonWrapperClass={{@buttonWrapperClass}}
+    @triggerClass={{@triggerClass}}
+    @wrapperClass={{@wrapperClass}}
+    @renderInPlace={{@renderInPlace}}
+    @registerAPI={{@registerAPI}}
+    @horizontalPosition={{@horizontalPosition}}
+    @verticalPosition={{@verticalPosition}}
+    @calculatePosition={{@calculatePosition}}
+    @defaultClass={{@defaultClass}}
+    @matchTriggerWidth={{@matchTriggerWidth}}
+    @onOpen={{this.updateFilters}}
+    @onClose={{this.updateFilters}}
+    ...attributes
+    as |dd|
+>
     <div class="filters-dropdown-container">
         <div class="filters-dropdown-header">
             <h4>{{or @dropdownHeaderText "Filters"}}</h4>
@@ -9,19 +31,19 @@
                     <div class="filter-component">
                         <label class="filter-component-label">{{or filter.filterLabel filter.label}}</label>
                         {{component
-                                        filter.filterComponent
-                                        value=filter.filterValue
-                                        filter=filter
-                                        param=(or filter.filterParam filter.valuePath)
-                                        options=filter.filterOptions
-                                        optionLabel=filter.filterOptionLabel
-                                        optionValue=filter.filterOptionValue
-                                        optionFormats=filter.filterOptionFormats
-                                        fetchParams=filter.filterFetchParams
-                                        placeholder=(or filter.filterComponentPlaceholder filter.filterLabel filter.label)
-                                        onChange=this.updateFilterValue
-                                        onClear=this.clearFilterValue
-                                    }}
+                            filter.filterComponent
+                            value=filter.filterValue
+                            filter=filter
+                            param=(or filter.filterParam filter.valuePath)
+                            options=filter.filterOptions
+                            optionLabel=filter.filterOptionLabel
+                            optionValue=filter.filterOptionValue
+                            optionFormats=filter.filterOptionFormats
+                            fetchParams=filter.filterFetchParams
+                            placeholder=(or filter.filterComponentPlaceholder filter.filterLabel filter.label)
+                            onChange=this.updateFilterValue
+                            onClear=this.clearFilterValue
+                        }}
                     </div>
                 {{/each}}
             </div>
diff --git a/addon/components/floating.hbs b/addon/components/floating.hbs
index d9aca5d..29b3165 100644
--- a/addon/components/floating.hbs
+++ b/addon/components/floating.hbs
@@ -3,7 +3,7 @@
         {{yield}}
     </div>
 {{else}}
-    <div class="floating--parent-finder" {{did-insert this.findParent}} />
+    <div class="floating--parent-finder" {{did-insert this.findParent}}></div>
     {{#if this.floatingContainer}}
         {{#in-element this.floatingContainer insertBefore=null}}
             <div {{did-insert this.setupComponent}} role={{@ariaRole}} x-placement={{@placement}} ...attributes>
diff --git a/addon/components/input-group.hbs b/addon/components/input-group.hbs
index 89dafbc..9143abe 100644
--- a/addon/components/input-group.hbs
+++ b/addon/components/input-group.hbs
@@ -5,6 +5,17 @@
     {{#if (has-block)}}
         {{yield this.id @name}}
     {{else}}
-        <Input class="w-full form-input {{@inputClass}}" id={{this.id}} @type={{or @type "text"}} @value={{@value}} placeholder={{or @placeholder @name}} required={{@required}} disabled={{@disabled}} autocomplete={{@autocomplete}} autofill={{@autofill}} ...attributes />
+        <Input
+            class="w-full form-input {{@inputClass}}"
+            id={{this.id}}
+            @type={{or @type "text"}}
+            @value={{@value}}
+            placeholder={{or @placeholder @name}}
+            required={{@required}}
+            disabled={{@disabled}}
+            autocomplete={{@autocomplete}}
+            autofill={{@autofill}}
+            ...attributes
+        />
     {{/if}}
 </div>
\ No newline at end of file
diff --git a/addon/components/input-label.hbs b/addon/components/input-label.hbs
index 75acd91..572530f 100644
--- a/addon/components/input-label.hbs
+++ b/addon/components/input-label.hbs
@@ -1,5 +1,5 @@
 <div class="flex {{@wrapperClass}}">
-    <label class="{{if @required "required"}}" ...attributes>{{@labelText}}</label>
+    <label class="{{if @required 'required'}}" ...attributes>{{@labelText}}</label>
     {{#if @helpText}}
         <div class="ml-2">
             <FaIcon @icon={{or @icon "info-circle"}} @size="xs" class="text-gray-300 dark:text-gray-100 {{@iconClass}}" />
diff --git a/addon/components/key-input.hbs b/addon/components/key-input.hbs
index b8278cc..2b02a5d 100644
--- a/addon/components/key-input.hbs
+++ b/addon/components/key-input.hbs
@@ -1 +1,12 @@
-<Input class="w-full form-input {{@inputClass}}" id={{this.id}} @type={{or @type "text"}} @value={{this.value}} placeholder={{or @placeholder @name}} required={{@required}} disabled={{@disabled}} {{on "input" this.formatKey}} {{on "blur" this.blur}} ...attributes />
\ No newline at end of file
+<Input
+    class="w-full form-input {{@inputClass}}"
+    id={{this.id}}
+    @type={{or @type "text"}}
+    @value={{this.value}}
+    placeholder={{or @placeholder @name}}
+    required={{@required}}
+    disabled={{@disabled}}
+    {{on "input" this.formatKey}}
+    {{on "blur" this.blur}}
+    ...attributes
+/>
\ No newline at end of file
diff --git a/addon/components/layout/header.hbs b/addon/components/layout/header.hbs
index cbc999c..214e8d0 100644
--- a/addon/components/layout/header.hbs
+++ b/addon/components/layout/header.hbs
@@ -9,7 +9,12 @@
         {{#unless (media "isMobile")}}
             <div role="menu" class="next-catalog-menu-items flex mr-4">
                 {{#each @menuItems as |menuItem|}}
-                    <LinkToExternal @route={{menuItem.route}} id={{concat (dasherize menuItem.route) "-header-button"}} class="next-view-header-item truncate {{menuItem.class}}" role="menuitem">
+                    <LinkToExternal
+                        @route={{menuItem.route}}
+                        id={{concat (dasherize menuItem.route) "-header-button"}}
+                        class="next-view-header-item truncate {{menuItem.class}}"
+                        role="menuitem"
+                    >
                         <div class="w-6">
                             {{#if menuItem.iconComponent}}
                                 {{component menuItem.iconComponent options=menuItem.iconComponentOptions}}
@@ -43,14 +48,21 @@
                         <div class="org-badge">
                             {{first-char @user.company_name}}
                         </div>
-                        <div class="text-sm w-10/12 truncate flex-shrink-0 text-gray-800 dark:text-white">{{@user.company_name}}</div>
+                        <div class="text-sm w-10 md:w-14 lg:w-10/12 truncate flex-shrink-0 text-gray-800 dark:text-white">{{@user.company_name}}</div>
                     </div>
                 </Layout::Header::Dropdown>
             </div>
             <div class="flex-1 flex items-center justify-end">
                 <Layout::Header::Dropdown @items={{this.userNavigationItems}} @onAction={{@onAction}} class="flex-shrink-0" @triggerClass="flex-shrink-0" as |dd|>
                     <div class="next-user-button-trigger flex-shrink-0 {{if dd.isOpen 'is-open'}}">
-                        <Image class="rounded-full h-5 w-5 shadow-sm flex-shrink-0" height="20" width="20" src={{@user.avatar_url}} @fallbackSrc="https://s3.ap-southeast-1.amazonaws.com/flb-assets/static/no-avatar.png" alt={{@user.name}} />
+                        <Image
+                            class="rounded-full h-5 w-5 shadow-sm flex-shrink-0"
+                            height="20"
+                            width="20"
+                            src={{@user.avatar_url}}
+                            @fallbackSrc="https://s3.ap-southeast-1.amazonaws.com/flb-assets/static/no-avatar.png"
+                            alt={{@user.name}}
+                        />
                     </div>
                 </Layout::Header::Dropdown>
             </div>
diff --git a/addon/components/layout/header/dropdown.hbs b/addon/components/layout/header/dropdown.hbs
index 5ca2d86..0c41576 100644
--- a/addon/components/layout/header/dropdown.hbs
+++ b/addon/components/layout/header/dropdown.hbs
@@ -1,5 +1,14 @@
 <div class="next-user-button" ...attributes>
-    <BasicDropdown @defaultClass={{@wrapperClass}} @onOpen={{@onOpen}} @onClose={{@onClose}} @verticalPosition={{@verticalPosition}} @horizontalPosition={{@horizontalPosition}} @renderInPlace={{or @renderInPlace true}} @initiallyOpened={{@initiallyOpened}} as |dd|>
+    <BasicDropdown
+        @defaultClass={{@wrapperClass}}
+        @onOpen={{@onOpen}}
+        @onClose={{@onClose}}
+        @verticalPosition={{@verticalPosition}}
+        @horizontalPosition={{@horizontalPosition}}
+        @renderInPlace={{or @renderInPlace true}}
+        @initiallyOpened={{@initiallyOpened}}
+        as |dd|
+    >
         <dd.Trigger class={{@triggerClass}}>
             {{yield dd}}
         </dd.Trigger>
diff --git a/addon/components/layout/header/dropdown/item.hbs b/addon/components/layout/header/dropdown/item.hbs
index 2481d44..76ecc2a 100644
--- a/addon/components/layout/header/dropdown/item.hbs
+++ b/addon/components/layout/header/dropdown/item.hbs
@@ -28,7 +28,13 @@
 
 {{#if this.isAnchor}}
     <div class={{if @item.overwriteWrapperClass @item.wrapperClass (concat @item.wrapperClass " px-1")}}>
-        <a href={{@item.href}} class="next-dd-item {{if @item.disabled 'disabled'}} {{@item.class}}" target={{@item.target}} disabled={{@item.disabled}} {{on "click" (fn @onAction @item.action @item.params)}}>
+        <a
+            href={{@item.href}}
+            class="next-dd-item {{if @item.disabled 'disabled'}} {{@item.class}}"
+            target={{@item.target}}
+            disabled={{@item.disabled}}
+            {{on "click" (fn @onAction @item.action @item.params)}}
+        >
             {{#if @item.icon}}
                 <FaIcon @icon={{@item.icon}} @size={{or @item.iconSize "sm"}} class={{or @item.iconClass "mr-2"}} />
             {{/if}}
diff --git a/addon/components/layout/header/sidebar-toggle.hbs b/addon/components/layout/header/sidebar-toggle.hbs
index ec793ab..cfaa990 100644
--- a/addon/components/layout/header/sidebar-toggle.hbs
+++ b/addon/components/layout/header/sidebar-toggle.hbs
@@ -1,12 +1,16 @@
-<div class="sidebar-toggle-button-wrapper flex-shrink-0 {{if @disabled "disabled opacity-50"}} {{if this.isSidebarVisible "sidebar-is-visible"}}" ...attributes>
-    <button type="button" {{on 'click' this.toggleSidebar}} class="sidebar-toggle-button next-org-button-trigger">
+<div class="sidebar-toggle-button-wrapper flex-shrink-0 {{if @disabled 'disabled opacity-50'}} {{if this.isSidebarVisible 'sidebar-is-visible'}}" ...attributes>
+    <button type="button" {{on "click" this.toggleSidebar}} class="sidebar-toggle-button next-org-button-trigger">
         <svg id="sidebar-toggle-icon" data-name="sidebar-toggle-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 392 340">
             <rect x="0" y="0" width="150" height="340" fill={{if this.isSidebarVisible "white" "transparent"}} rx="40" ry="40"></rect>
-            <path class="cls-1" d="M484.25,220.5A27.76,27.76,0,0,1,512,248.23V496.77a27.76,27.76,0,0,1-27.73,27.73H183.71A27.76,27.76,0,0,1,156,496.77V248.23a27.76,27.76,0,0,1,27.73-27.73H484.25m0-18H183.71A45.73,45.73,0,0,0,138,248.23V496.77a45.72,45.72,0,0,0,45.73,45.73H484.25A45.72,45.72,0,0,0,530,496.77V248.23a45.73,45.73,0,0,0-45.73-45.73Z" transform="translate(-137.98 -202.5)" />
-            <line class="cls-2" x1="159.6" y1="1.04" x2="159.6" y2="335.85" />
-            <rect class="cls-3" x="56.5" y="56.5" width="61" height="9" rx="4.36" />
-            <rect class="cls-3" x="56.5" y="105.5" width="61" height="9" rx="4.36" />
-            <rect class="cls-3" x="56.5" y="154.5" width="61" height="9" rx="4.36" />
+            <path
+                class="cls-1"
+                d="M484.25,220.5A27.76,27.76,0,0,1,512,248.23V496.77a27.76,27.76,0,0,1-27.73,27.73H183.71A27.76,27.76,0,0,1,156,496.77V248.23a27.76,27.76,0,0,1,27.73-27.73H484.25m0-18H183.71A45.73,45.73,0,0,0,138,248.23V496.77a45.72,45.72,0,0,0,45.73,45.73H484.25A45.72,45.72,0,0,0,530,496.77V248.23a45.73,45.73,0,0,0-45.73-45.73Z"
+                transform="translate(-137.98 -202.5)"
+            ></path>
+            <line class="cls-2" x1="159.6" y1="1.04" x2="159.6" y2="335.85"></line>
+            <rect class="cls-3" x="56.5" y="56.5" width="61" height="9" rx="4.36"></rect>
+            <rect class="cls-3" x="56.5" y="105.5" width="61" height="9" rx="4.36"></rect>
+            <rect class="cls-3" x="56.5" y="154.5" width="61" height="9" rx="4.36"></rect>
         </svg>
     </button>
 </div>
\ No newline at end of file
diff --git a/addon/components/layout/mobile-navbar.hbs b/addon/components/layout/mobile-navbar.hbs
index 0f2f126..d72b233 100644
--- a/addon/components/layout/mobile-navbar.hbs
+++ b/addon/components/layout/mobile-navbar.hbs
@@ -1,4 +1,4 @@
-{{#if (media 'isMobile')}}
+{{#if (media "isMobile")}}
     <div class="next-mobile-navbar" {{did-insert this.setupMobileNavbar}} ...attributes>
         <div role="menubar" class="next-mobile-navbar-tabs">
             <div role="menu" class="scrollable-nav-items">
diff --git a/addon/components/layout/section/header.hbs b/addon/components/layout/section/header.hbs
index f8c671b..d941e54 100644
--- a/addon/components/layout/section/header.hbs
+++ b/addon/components/layout/section/header.hbs
@@ -6,7 +6,7 @@
             {{#if @headerTitleComponent}}
                 {{component @headerTitleComponent}}
             {{else}}
-                <div class="flex flex-row items-center">
+                <div class="next-view-section-subheader-left-inner-wrapper flex flex-row items-center">
                     {{#if @badge}}
                         <span class="mr-2 {{@badgeContainerClass}}">
                             <Badge @status={{@badge}} @hideStatusDot={{@hideStatusDot}} class={{@badgeClass}} @disableHumanize={{@disableBadgeHumanize}} />
@@ -24,7 +24,14 @@
                 </div>
             {{/if}}
             {{#if @onSearch}}
-                <Input @type="text" @value={{@searchQuery}} 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}}" {{on "keyup" @onSearch}} />
+                <Input
+                    @type="text"
+                    @value={{@searchQuery}}
+                    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}}"
+                    {{on "keyup" @onSearch}}
+                />
             {{/if}}
         </div>
         {{#unless @hideActions}}
diff --git a/addon/components/layout/sidebar/item.hbs b/addon/components/layout/sidebar/item.hbs
index e5cf408..1bc3853 100644
--- a/addon/components/layout/sidebar/item.hbs
+++ b/addon/components/layout/sidebar/item.hbs
@@ -21,7 +21,20 @@
                 </span>
             {{/if}}
             {{#if @dropdownButton}}
-                <DropdownButton @icon={{or @dropdownButtonIcon "ellipsis"}} @iconPrefix={{@dropdownButtonIconPrefix}} @text={{@dropdownButtonText}} @size="xs" @horizontalPosition={{or @dropdownHorizontalPosition "left"}} @calculatePosition={{@dropdownButtonCalculatePosition}} @renderInPlace={{this.dropdownButtonRenderInPlace}} @wrapperClass="{{@dropdownButtonWrapperClass}} next-nav-item-dropdown-button" @triggerClass="next-nav-item-dropdown-button {{@dropdownButtonTriggerClass}}" @registerAPI={{this.onRegisterAPI}} @onInsert={{this.onDropdownButtonInsert}} as |dd|>
+                <DropdownButton
+                    @icon={{or @dropdownButtonIcon "ellipsis"}}
+                    @iconPrefix={{@dropdownButtonIconPrefix}}
+                    @text={{@dropdownButtonText}}
+                    @size="xs"
+                    @horizontalPosition={{or @dropdownHorizontalPosition "left"}}
+                    @calculatePosition={{@dropdownButtonCalculatePosition}}
+                    @renderInPlace={{this.dropdownButtonRenderInPlace}}
+                    @wrapperClass="{{@dropdownButtonWrapperClass}} next-nav-item-dropdown-button"
+                    @triggerClass="next-nav-item-dropdown-button {{@dropdownButtonTriggerClass}}"
+                    @registerAPI={{this.onRegisterAPI}}
+                    @onInsert={{this.onDropdownButtonInsert}}
+                    as |dd|
+                >
                     <div class="next-dd-menu mt-0i" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
                         {{#if @dropdownButtonMenuLabel}}
                             <div class="px-1">
@@ -37,7 +50,7 @@
                             {{else}}
                                 {{#if (is-dd-item-visible action.context action.isVisible)}}
                                     <div role="group" class="px-1">
-                                        {{!-- template-lint-disable no-nested-interactive --}}
+                                        {{! template-lint-disable no-nested-interactive }}
                                         <a href="javascript:;" role="menuitem" class="next-dd-item {{action.class}}" {{on "click" (fn this.onDropdownItemClick action dd)}}>
                                             {{#if action.icon}}
                                                 <span class="mr-1">
diff --git a/addon/components/layout/sidebar/panel.hbs b/addon/components/layout/sidebar/panel.hbs
index eedf210..93e688d 100644
--- a/addon/components/layout/sidebar/panel.hbs
+++ b/addon/components/layout/sidebar/panel.hbs
@@ -1,3 +1,46 @@
-<ContentPanel @title={{@title}} @titleIcon={{@titleIcon}} @titleIconPrefix={{@titleIconPrefix}} @titleIconClass={{@titleIconClass}} @titleIconSize={{@titleIconSize}} @open={{@open}} @isLoading={{@isLoading}} @hideCaret={{@hideCaret}} @toggleOnCaretOnly={{@toggleOnCaretOnly}} @wrapperClass="next-sidebar-panel-container {{@wrapperClass}}" @containerClass="next-sidebar-panel {{@containerClass}}" @panelHeaderClass="next-sidebar-panel-toggle {{@panelHeaderClass}}" @prefixTitle={{@prefixTitle}} @titleComponent={{@titleComponent}} @titleComponentContext={{@titleComponentContext}} @titleContainerClass={{@titleContainerClass}} @panelTitleClass={{@panelTitleClass}} @titleStatusRight={{@titleStatusRight}} @titleStatusRightText={{@titleStatusRightText}} @titleStatusRightContainerClass={{@titleStatusRightContainerClass}} @hideRightTitleStatusDot={{@hideRightTitleStatusDot}} @titleStatusRightClass={{concat "next-content-panel-status-badge" " " @titleStatusRightClass}} @disableTitleStatusRightHumanize={{@disableTitleStatusRightHumanize}} @prefixTitleRight={{@prefixTitleRight}} @prefixTitleRightContainerClass={{@prefixTitleRightContainerClass}} @prefixTitleRightClass={{@prefixTitleRightClass}} @titleRightSideComponent={{@titleRightSideComponent}} @titleRightSideComponentContext={{@titleRightSideComponentContext}} @actionButtons={{@actionButtons}} @dropdownButton={{@dropdownButton}} @dropdownButtonActions={{@dropdownButtonActions}} @dropdownButtonIcon={{@dropdownButtonIcon}} @dropdownButtonIconPrefix={{@dropdownButtonIconPrefix}} @dropdownButtonText={{@dropdownButtonText}} @dropdownButtonCalculatePosition={{@dropdownButtonCalculatePosition}} @dropdownButtonRenderInPlace={{@dropdownButtonRenderInPlace}} @dropdownButtonMenuLabel={{@dropdownButtonMenuLabel}} @onClickPanelTitle={{@onClickPanelTitle}} @onClickCaret={{@onClickCaret}} @onClick={{@onClick}} @onToggle={{@onToggle}} ...attributes>
+<ContentPanel
+    @title={{@title}}
+    @titleIcon={{@titleIcon}}
+    @titleIconPrefix={{@titleIconPrefix}}
+    @titleIconClass={{@titleIconClass}}
+    @titleIconSize={{@titleIconSize}}
+    @open={{@open}}
+    @isLoading={{@isLoading}}
+    @hideCaret={{@hideCaret}}
+    @toggleOnCaretOnly={{@toggleOnCaretOnly}}
+    @wrapperClass="next-sidebar-panel-container {{@wrapperClass}}"
+    @containerClass="next-sidebar-panel {{@containerClass}}"
+    @panelHeaderClass="next-sidebar-panel-toggle {{@panelHeaderClass}}"
+    @prefixTitle={{@prefixTitle}}
+    @titleComponent={{@titleComponent}}
+    @titleComponentContext={{@titleComponentContext}}
+    @titleContainerClass={{@titleContainerClass}}
+    @panelTitleClass={{@panelTitleClass}}
+    @titleStatusRight={{@titleStatusRight}}
+    @titleStatusRightText={{@titleStatusRightText}}
+    @titleStatusRightContainerClass={{@titleStatusRightContainerClass}}
+    @hideRightTitleStatusDot={{@hideRightTitleStatusDot}}
+    @titleStatusRightClass={{concat "next-content-panel-status-badge" " " @titleStatusRightClass}}
+    @disableTitleStatusRightHumanize={{@disableTitleStatusRightHumanize}}
+    @prefixTitleRight={{@prefixTitleRight}}
+    @prefixTitleRightContainerClass={{@prefixTitleRightContainerClass}}
+    @prefixTitleRightClass={{@prefixTitleRightClass}}
+    @titleRightSideComponent={{@titleRightSideComponent}}
+    @titleRightSideComponentContext={{@titleRightSideComponentContext}}
+    @actionButtons={{@actionButtons}}
+    @dropdownButton={{@dropdownButton}}
+    @dropdownButtonActions={{@dropdownButtonActions}}
+    @dropdownButtonIcon={{@dropdownButtonIcon}}
+    @dropdownButtonIconPrefix={{@dropdownButtonIconPrefix}}
+    @dropdownButtonText={{@dropdownButtonText}}
+    @dropdownButtonCalculatePosition={{@dropdownButtonCalculatePosition}}
+    @dropdownButtonRenderInPlace={{@dropdownButtonRenderInPlace}}
+    @dropdownButtonMenuLabel={{@dropdownButtonMenuLabel}}
+    @onClickPanelTitle={{@onClickPanelTitle}}
+    @onClickCaret={{@onClickCaret}}
+    @onClick={{@onClick}}
+    @onToggle={{@onToggle}}
+    ...attributes
+>
     {{yield}}
 </ContentPanel>
\ No newline at end of file
diff --git a/addon/components/locale-selector-tray.hbs b/addon/components/locale-selector-tray.hbs
index adcb460..f3c4a5c 100644
--- a/addon/components/locale-selector-tray.hbs
+++ b/addon/components/locale-selector-tray.hbs
@@ -1,5 +1,14 @@
 <div class="next-user-button" ...attributes>
-    <BasicDropdown @defaultClass={{@wrapperClass}} @onOpen={{@onOpen}} @onClose={{@onClose}} @verticalPosition={{@verticalPosition}} @horizontalPosition={{@horizontalPosition}} @renderInPlace={{or @renderInPlace true}} @initiallyOpened={{@initiallyOpened}} as |dd|>
+    <BasicDropdown
+        @defaultClass={{@wrapperClass}}
+        @onOpen={{@onOpen}}
+        @onClose={{@onClose}}
+        @verticalPosition={{@verticalPosition}}
+        @horizontalPosition={{@horizontalPosition}}
+        @renderInPlace={{or @renderInPlace true}}
+        @initiallyOpened={{@initiallyOpened}}
+        as |dd|
+    >
         <dd.Trigger class={{@triggerClass}}>
             <div class="next-org-button-trigger flex-shrink-0 {{if dd.isOpen 'is-open'}}">
                 <FaIcon @icon="globe" @size="sm" />
diff --git a/addon/components/modal.hbs b/addon/components/modal.hbs
index 8588166..1c4ec9c 100644
--- a/addon/components/modal.hbs
+++ b/addon/components/modal.hbs
@@ -1,4 +1,4 @@
-<div {{did-insert this.handleVisibilityChanges}} {{did-update this.handleVisibilityChanges @open}} />
+<div {{did-insert this.handleVisibilityChanges}} {{did-update this.handleVisibilityChanges @open}}></div>
 
 {{#if this.inDom}}
     {{!
@@ -10,50 +10,54 @@
         {{on-window "resize" this.adjustDialog}}
     {{/unless}}
 
-    {{#let (component (or @dialogComponent "modal/dialog")
-    onClose=this.close
-    fade=this._fade
-    showModal=this.showModal
-    keyboard=this.keyboard
-    size=@size
-    backdropClose=this.backdropClose
-    inDom=this.inDom
-    paddingLeft=this.paddingLeft
-    paddingRight=this.paddingRight
-    centered=(eq this.position "center")
-    scrollable=this.scrollable
-    fullscreen=@fullscreen
-  ) as |Dialog|}}
+    {{#let
+        (component
+            (or @dialogComponent "modal/dialog")
+            onClose=this.close
+            fade=this._fade
+            showModal=this.showModal
+            keyboard=this.keyboard
+            size=@size
+            backdropClose=this.backdropClose
+            inDom=this.inDom
+            paddingLeft=this.paddingLeft
+            paddingRight=this.paddingRight
+            centered=(eq this.position "center")
+            scrollable=this.scrollable
+            fullscreen=@fullscreen
+        )
+        as |Dialog|
+    }}
         {{#if this._renderInPlace}}
             <Dialog {{create-ref "modalElement"}} ...attributes>
                 {{yield
-          (hash
-            header=(component (or @headerComponent "modal/header") onClose=this.close)
-            body=(component (or @bodyComponent "modal/body"))
-            footer=(component (or @footerComponent "modal/footer") onClose=this.close onSubmit=this.doSubmit)
-            close=this.close
-            submit=this.doSubmit
-          )
-        }}
+                    (hash
+                        header=(component (or @headerComponent "modal/header") onClose=this.close)
+                        body=(component (or @bodyComponent "modal/body"))
+                        footer=(component (or @footerComponent "modal/footer") onClose=this.close onSubmit=this.doSubmit)
+                        close=this.close
+                        submit=this.doSubmit
+                    )
+                }}
             </Dialog>
             {{#if this.shouldShowBackdrop}}
-                <div class="flb--modal-backdrop {{if this._fade "fade"}} {{if this.showModal "show"}}" {{create-ref "backdropElement"}}></div>
+                <div class="flb--modal-backdrop {{if this._fade 'fade'}} {{if this.showModal 'show'}}" {{create-ref "backdropElement"}}></div>
             {{/if}}
         {{else}}
             {{#in-element this.destinationElement insertBefore=null}}
                 <Dialog {{create-ref "modalElement"}} ...attributes>
                     {{yield
-            (hash
-              header=(component (ensure-safe-component (or @headerComponent (component "modal/header"))) onClose=this.close)
-              body=(ensure-safe-component (or @bodyComponent (component "modal/body")))
-              footer=(component (ensure-safe-component (or @footerComponent (component "modal/footer"))) onClose=this.close onSubmit=this.doSubmit)
-              close=this.close
-              submit=this.doSubmit
-            )
-          }}
+                        (hash
+                            header=(component (ensure-safe-component (or @headerComponent (component "modal/header"))) onClose=this.close)
+                            body=(ensure-safe-component (or @bodyComponent (component "modal/body")))
+                            footer=(component (ensure-safe-component (or @footerComponent (component "modal/footer"))) onClose=this.close onSubmit=this.doSubmit)
+                            close=this.close
+                            submit=this.doSubmit
+                        )
+                    }}
                 </Dialog>
                 {{#if this.shouldShowBackdrop}}
-                    <div class="flb--modal-backdrop {{if this._fade "fade"}} {{if this.showModal "show"}}" {{create-ref "backdropElement"}}></div>
+                    <div class="flb--modal-backdrop {{if this._fade 'fade'}} {{if this.showModal 'show'}}" {{create-ref "backdropElement"}}></div>
                 {{/if}}
             {{/in-element}}
         {{/if}}
diff --git a/addon/components/modal/body.hbs b/addon/components/modal/body.hbs
index 833b09f..97860c0 100644
--- a/addon/components/modal/body.hbs
+++ b/addon/components/modal/body.hbs
@@ -1,3 +1,3 @@
 <div class="flb--modal-body" ...attributes>
-  {{yield}}
+    {{yield}}
 </div>
\ No newline at end of file
diff --git a/addon/components/modal/default.hbs b/addon/components/modal/default.hbs
index 052ec48..b1fe0e6 100644
--- a/addon/components/modal/default.hbs
+++ b/addon/components/modal/default.hbs
@@ -23,8 +23,27 @@
         {{else}}
             {{#unless @options.hideFooterActions}}
                 <div class="modal-footer-actions {{@options.modalFooterActionsClass}}">
-                    <Button class="mr-2 {{if @options.hideDeclineButton "hidden"}}" @type={{or @options.declineButtonScheme "default"}} @size={{or @options.buttonSize "md"}} @icon={{or @options.declineButtonIcon "times"}} @iconPrefix={{@options.declineButtonIconPrefix}} @text={{or @options.declineButtonText "Cancel"}} @onClick={{modal.close}} @disabled={{or @options.declineButtonDisabled @options.isLoading}} />
-                    <Button class="{{if @options.hideAcceptButton "hidden"}}" @type={{or @options.acceptButtonScheme "primary"}} @size={{or @options.buttonSize "md"}} @icon={{or @options.acceptButtonIcon "check"}} @iconPrefix={{@options.acceptButtonIconPrefix}} @isLoading={{@options.isLoading}} @text={{or @options.acceptButtonText "Confirm"}} @onClick={{modal.submit}} @disabled={{or @options.acceptButtonDisabled @options.isLoading}} />
+                    <Button
+                        class="mr-2 {{if @options.hideDeclineButton 'hidden'}}"
+                        @type={{or @options.declineButtonScheme "default"}}
+                        @size={{or @options.buttonSize "md"}}
+                        @icon={{or @options.declineButtonIcon "times"}}
+                        @iconPrefix={{@options.declineButtonIconPrefix}}
+                        @text={{or @options.declineButtonText "Cancel"}}
+                        @onClick={{modal.close}}
+                        @disabled={{or @options.declineButtonDisabled @options.isLoading}}
+                    />
+                    <Button
+                        class="{{if @options.hideAcceptButton 'hidden'}}"
+                        @type={{or @options.acceptButtonScheme "primary"}}
+                        @size={{or @options.buttonSize "md"}}
+                        @icon={{or @options.acceptButtonIcon "check"}}
+                        @iconPrefix={{@options.acceptButtonIconPrefix}}
+                        @isLoading={{@options.isLoading}}
+                        @text={{or @options.acceptButtonText "Confirm"}}
+                        @onClick={{modal.submit}}
+                        @disabled={{or @options.acceptButtonDisabled @options.isLoading}}
+                    />
                 </div>
             {{/unless}}
         {{/if}}
diff --git a/addon/components/modal/dialog.hbs b/addon/components/modal/dialog.hbs
index 34df7cc..3c64396 100644
--- a/addon/components/modal/dialog.hbs
+++ b/addon/components/modal/dialog.hbs
@@ -1,21 +1,29 @@
-<div role="dialog" tabindex="-1" aria-labelledby={{this.titleId}} class="flb--modal {{if @fade "fade"}} {{if @showModal "show"}} {{if @inDom "block"}}" ...attributes {{on "keydown" this.handleKeyDown}} {{on "mousedown" this.handleMouseDown}} {{on "mouseup" this.handleMouseUp}} {{on "click" this.handleClick}} {{style
-    paddingLeft=(concat @paddingLeft "px")
-    paddingRight=(concat @paddingRight "px")
-    display=(if @inDom "block" "")
-  }} {{create-ref "mainNode"}} {{did-insert this.getOrSetTitleId}} {{did-insert this.setInitialFocus}}>
-  <div class="flb--modal-dialog
-      {{this.sizeClass}}
-      {{if @centered "flb--modal-dialog-centered"}}
-      {{if @scrollable "flb--modal-dialog-scrollable"}}
-      {{if
-        (macroCondition (macroGetOwnConfig "isBS5"))
-        (if
-          @fullscreen (if (eq @fullscreen true) "flb--modal-fullscreen" (concat "flb--modal-fullscreen-" @fullscreen "-down"))
-        )
-      }}
-      " role="document">
-    <div class="flb--modal-content" tabindex="-1" {{focus-trap shouldSelfFocus=true focusTrapOptions=(hash clickOutsideDeactivates=true fallbackFocus=".flb--modal")}}>
-      {{yield}}
+<div
+    role="dialog"
+    tabindex="-1"
+    aria-labelledby={{this.titleId}}
+    class="flb--modal {{if @fade 'fade'}} {{if @showModal 'show'}} {{if @inDom 'block'}}"
+    ...attributes
+    {{on "keydown" this.handleKeyDown}}
+    {{on "mousedown" this.handleMouseDown}}
+    {{on "mouseup" this.handleMouseUp}}
+    {{on "click" this.handleClick}}
+    {{style paddingLeft=(concat @paddingLeft "px") paddingRight=(concat @paddingRight "px") display=(if @inDom "block" "")}}
+    {{create-ref "mainNode"}}
+    {{did-insert this.getOrSetTitleId}}
+    {{did-insert this.setInitialFocus}}
+>
+    <div
+        class="flb--modal-dialog
+            {{this.sizeClass}}
+            {{if @centered 'flb--modal-dialog-centered'}}
+            {{if @scrollable 'flb--modal-dialog-scrollable'}}
+            {{if (macroCondition (macroGetOwnConfig 'isBS5')) (if @fullscreen (if (eq @fullscreen true) 'flb--modal-fullscreen' (concat 'flb--modal-fullscreen-' @fullscreen '-down')))}}
+            "
+        role="document"
+    >
+        <div class="flb--modal-content" tabindex="-1" {{focus-trap shouldSelfFocus=true focusTrapOptions=(hash clickOutsideDeactivates=true fallbackFocus=".flb--modal")}}>
+            {{yield}}
+        </div>
     </div>
-  </div>
 </div>
\ No newline at end of file
diff --git a/addon/components/modal/footer.hbs b/addon/components/modal/footer.hbs
index db9fb5e..f10e1f5 100644
--- a/addon/components/modal/footer.hbs
+++ b/addon/components/modal/footer.hbs
@@ -1,14 +1,14 @@
 {{#let (component (or @buttonComponent "button")) as |Button|}}
-  <div class="flb--modal-footer" ...attributes {{on "submit" (or @onSubmit (noop))}}>
-    {{#if (has-block)}}
-      {{yield}}
-    {{else}}
-      {{#if @submitTitle}}
-        <Button @onClick={{@onClose}}>{{or @closeTitle "Ok"}}</Button>
-        <Button @type={{or @submitButtonType "primary"}} @onClick={{@onSubmit}} disabled={{or @submitDisabled false}}>{{@submitTitle}}</Button>
-      {{else}}
-        <Button @type="primary" @onClick={{@onClose}}>{{or @closeTitle "Ok"}}</Button>
-      {{/if}}
-    {{/if}}
-  </div>
+    <div class="flb--modal-footer" ...attributes {{on "submit" (or @onSubmit (noop))}}>
+        {{#if (has-block)}}
+            {{yield}}
+        {{else}}
+            {{#if @submitTitle}}
+                <Button @onClick={{@onClose}}>{{or @closeTitle "Ok"}}</Button>
+                <Button @type={{or @submitButtonType "primary"}} @onClick={{@onSubmit}} disabled={{or @submitDisabled false}}>{{@submitTitle}}</Button>
+            {{else}}
+                <Button @type="primary" @onClick={{@onClose}}>{{or @closeTitle "Ok"}}</Button>
+            {{/if}}
+        {{/if}}
+    </div>
 {{/let}}
\ No newline at end of file
diff --git a/addon/components/modal/header.hbs b/addon/components/modal/header.hbs
index 5c4a703..c533b55 100644
--- a/addon/components/modal/header.hbs
+++ b/addon/components/modal/header.hbs
@@ -1,25 +1,16 @@
-{{#let
-  (component (or @titleComponent "modal/header/title"))
-  (component (or @closeComponent "modal/header/close") onClick=@onClose)
-as |Title Close|
-}}
-  <div class="flb--modal-header" ...attributes>
-    {{#if (has-block-params)}}
-      {{yield
-        (hash
-          title=Title
-          close=Close
-        )
-      }}
-    {{else}}
-      {{#if (has-block)}}
-        {{yield}}
-      {{else}}
-        <Modal::Header::Title>{{@title}}</Modal::Header::Title>
-      {{/if}}
-      {{#if (or @closeButton true)}}
-        <Modal::Header::Close @onClick={{@onClose}} />
-      {{/if}}
-    {{/if}}
-  </div>
+{{#let (component (or @titleComponent "modal/header/title")) (component (or @closeComponent "modal/header/close") onClick=@onClose) as |Title Close|}}
+    <div class="flb--modal-header" ...attributes>
+        {{#if (has-block-params)}}
+            {{yield (hash title=Title close=Close)}}
+        {{else}}
+            {{#if (has-block)}}
+                {{yield}}
+            {{else}}
+                <Modal::Header::Title>{{@title}}</Modal::Header::Title>
+            {{/if}}
+            {{#if (or @closeButton true)}}
+                <Modal::Header::Close @onClick={{@onClose}} />
+            {{/if}}
+        {{/if}}
+    </div>
 {{/let}}
\ No newline at end of file
diff --git a/addon/components/modal/header/close.hbs b/addon/components/modal/header/close.hbs
index 6c9ad63..09cfa7e 100644
--- a/addon/components/modal/header/close.hbs
+++ b/addon/components/modal/header/close.hbs
@@ -1,3 +1,3 @@
 <button type="button" aria-label="Close" class="close" ...attributes {{on "click" (or @onClick (noop))}}>
-  <span aria-hidden="true">&times;</span>
+    <span aria-hidden="true">&times;</span>
 </button>
\ No newline at end of file
diff --git a/addon/components/modal/header/title.hbs b/addon/components/modal/header/title.hbs
index 1be4a64..bbf1d6e 100644
--- a/addon/components/modal/header/title.hbs
+++ b/addon/components/modal/header/title.hbs
@@ -1,3 +1,3 @@
 <h5 class="flb--modal-title" ...attributes>
-  {{yield}}
-</h5>
+    {{yield}}
+</h5>
\ No newline at end of file
diff --git a/addon/components/modal/layouts/alert.hbs b/addon/components/modal/layouts/alert.hbs
index e035c8f..eba58d1 100644
--- a/addon/components/modal/layouts/alert.hbs
+++ b/addon/components/modal/layouts/alert.hbs
@@ -1 +1 @@
-<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}></Modal::Default>
\ No newline at end of file
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}} />
\ No newline at end of file
diff --git a/addon/components/modal/layouts/bulk-action.hbs b/addon/components/modal/layouts/bulk-action.hbs
index e035c8f..eba58d1 100644
--- a/addon/components/modal/layouts/bulk-action.hbs
+++ b/addon/components/modal/layouts/bulk-action.hbs
@@ -1 +1 @@
-<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}></Modal::Default>
\ No newline at end of file
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}} />
\ No newline at end of file
diff --git a/addon/components/modal/layouts/confirm.hbs b/addon/components/modal/layouts/confirm.hbs
index 236b163..53ba739 100644
--- a/addon/components/modal/layouts/confirm.hbs
+++ b/addon/components/modal/layouts/confirm.hbs
@@ -5,7 +5,12 @@
                 <FaIcon @icon={{@options.icon}} @size={{@options.iconSize}} @spin={{@options.iconSpin}} @flip={{@options.iconFlip}} class={{@options.iconClass}} />
             {{else}}
                 <svg class="w-6 h-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z">
+                    <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                    >
                     </path>
                 </svg>
             {{/if}}
diff --git a/addon/components/modal/layouts/loading.hbs b/addon/components/modal/layouts/loading.hbs
index e035c8f..eba58d1 100644
--- a/addon/components/modal/layouts/loading.hbs
+++ b/addon/components/modal/layouts/loading.hbs
@@ -1 +1 @@
-<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}></Modal::Default>
\ No newline at end of file
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}} />
\ No newline at end of file
diff --git a/addon/components/modal/layouts/option-prompt.hbs b/addon/components/modal/layouts/option-prompt.hbs
index 1ee94ff..27b379f 100644
--- a/addon/components/modal/layouts/option-prompt.hbs
+++ b/addon/components/modal/layouts/option-prompt.hbs
@@ -2,7 +2,14 @@
     <div class="p-4 space-y-4">
         {{#each @options.promptOptions as |option index|}}
             <div class="flex flex-row items-center bg-gray-100 border-gray-200 px-4 py-2 dark:bg-gray-800 dark:border-gray-700 rounded-lg">
-                <RadioButton @radioClass="focus:ring-blue-500 mr-3" @radioId={{concat "option_" index}} @value={{option}} @groupValue={{@options.selected}} @name="option" @changed={{fn (mut @options.selected)}}>
+                <RadioButton
+                    @radioClass="focus:ring-blue-500 mr-3"
+                    @radioId={{concat "option_" index}}
+                    @value={{option}}
+                    @groupValue={{@options.selected}}
+                    @name="option"
+                    @changed={{fn (mut @options.selected)}}
+                >
                     <span class="dark:text-white font-semibold">{{humanize option}}</span>
                 </RadioButton>
             </div>
diff --git a/addon/components/modal/layouts/process.hbs b/addon/components/modal/layouts/process.hbs
index e035c8f..eba58d1 100644
--- a/addon/components/modal/layouts/process.hbs
+++ b/addon/components/modal/layouts/process.hbs
@@ -1 +1 @@
-<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}></Modal::Default>
\ No newline at end of file
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}} />
\ No newline at end of file
diff --git a/addon/components/modal/layouts/progress.hbs b/addon/components/modal/layouts/progress.hbs
index e035c8f..eba58d1 100644
--- a/addon/components/modal/layouts/progress.hbs
+++ b/addon/components/modal/layouts/progress.hbs
@@ -1 +1 @@
-<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}></Modal::Default>
\ No newline at end of file
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}} />
\ No newline at end of file
diff --git a/addon/components/modal/layouts/prompt.hbs b/addon/components/modal/layouts/prompt.hbs
index e035c8f..eba58d1 100644
--- a/addon/components/modal/layouts/prompt.hbs
+++ b/addon/components/modal/layouts/prompt.hbs
@@ -1 +1 @@
-<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}></Modal::Default>
\ No newline at end of file
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}} />
\ No newline at end of file
diff --git a/addon/components/modal/title-with-buttons.hbs b/addon/components/modal/title-with-buttons.hbs
index 0f57ac5..2d1c580 100644
--- a/addon/components/modal/title-with-buttons.hbs
+++ b/addon/components/modal/title-with-buttons.hbs
@@ -13,7 +13,17 @@
         {{#if @options.headerButtons}}
             {{#each @options.headerButtons as |button|}}
                 {{#if button.options}}
-                    <DropdownButton @buttonWrapperClass="btn-flex" @text={{button.title}} @icon={{button.icon}} @iconPrefix={{button.iconPrefix}} @type={{button.type}} @size={{or button.size "xs"}} @horizontalPosition="left" @renderInPlace={{true}} as |dd|>
+                    <DropdownButton
+                        @buttonWrapperClass="btn-flex"
+                        @text={{button.title}}
+                        @icon={{button.icon}}
+                        @iconPrefix={{button.iconPrefix}}
+                        @type={{button.type}}
+                        @size={{or button.size "xs"}}
+                        @horizontalPosition="left"
+                        @renderInPlace={{true}}
+                        as |dd|
+                    >
                         <div class="next-dd-menu" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
                             {{#if button.ddMenuLabel}}
                                 <div class="px-1">
diff --git a/addon/components/modals-container.hbs b/addon/components/modals-container.hbs
index d8e03c1..de93449 100644
--- a/addon/components/modals-container.hbs
+++ b/addon/components/modals-container.hbs
@@ -1,9 +1,9 @@
 {{#if this.modalsManager.modalIsOpened}}
-  {{component
-    (component this.modalsManager.componentToRender)
-    modalIsOpened=this.modalsManager.modalIsOpened
-    options=this.modalsManager.options
-    onConfirm=this.confirm
-    onDecline=this.decline
-  }}
+    {{component
+        (component this.modalsManager.componentToRender)
+        modalIsOpened=this.modalsManager.modalIsOpened
+        options=this.modalsManager.options
+        onConfirm=this.confirm
+        onDecline=this.decline
+    }}
 {{/if}}
\ No newline at end of file
diff --git a/addon/components/modals/bulk-action-model.hbs b/addon/components/modals/bulk-action-model.hbs
index b146d8b..e2c7730 100644
--- a/addon/components/modals/bulk-action-model.hbs
+++ b/addon/components/modals/bulk-action-model.hbs
@@ -3,7 +3,12 @@
         <div class="sm:flex sm:items-start mb-6 p-3">
             <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                 <svg class="h-6 w-6 text-red-600" stroke="currentColor" fill="none" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                    <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                    ></path>
                 </svg>
             </div>
             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
@@ -11,7 +16,10 @@
                     {{#if @options.subtitle}}
                         {{@options.message}}
                     {{else}}
-                        Are you sure you want to {{@options.verb}} these {{pluralize @options.modelName}}?
+                        Are you sure you want to
+                        {{@options.verb}}
+                        these
+                        {{pluralize @options.modelName}}?
                     {{/if}}
                 </h3>
                 <div class="mt-2">
@@ -19,7 +27,10 @@
                         {{#if @options.message}}
                             {{@options.message}}
                         {{else}}
-                            You have selected {{pluralize @options.count @options.modelName}} for {{@options.verb}}.
+                            You have selected
+                            {{pluralize @options.count @options.modelName}}
+                            for
+                            {{@options.verb}}.
                         {{/if}}
                     </p>
                 </div>
diff --git a/addon/components/modals/bulk-delete-model.hbs b/addon/components/modals/bulk-delete-model.hbs
index f98f626..552b3f8 100644
--- a/addon/components/modals/bulk-delete-model.hbs
+++ b/addon/components/modals/bulk-delete-model.hbs
@@ -3,16 +3,24 @@
         <div class="sm:flex sm:items-start mb-6 p-3">
             <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                 <svg class="h-6 w-6 text-red-600" stroke="currentColor" fill="none" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                    <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                    ></path>
                 </svg>
             </div>
             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                 <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
-                    Are you sure you want to delete these {{pluralize @options.modelName}}?
+                    Are you sure you want to delete these
+                    {{pluralize @options.modelName}}?
                 </h3>
                 <div class="mt-2">
                     <p class="text-sm leading-5 text-gray-500 dark:text-gray-50">
-                        You have selected {{pluralize @options.count @options.modelName}} for deletion.
+                        You have selected
+                        {{pluralize @options.count @options.modelName}}
+                        for deletion.
                     </p>
                 </div>
             </div>
diff --git a/addon/components/modals/create-or-join-org.hbs b/addon/components/modals/create-or-join-org.hbs
index aa5ba2b..b345687 100644
--- a/addon/components/modals/create-or-join-org.hbs
+++ b/addon/components/modals/create-or-join-org.hbs
@@ -2,7 +2,12 @@
     <div class="modal-body-container">
         <InputGroup>
             <div class="space-x-4 flex">
-                <button type="button" class="outline-none flex-1 rounded-lg bg-white dark:bg-gray-900 border-2 px-4 py-2 flex items-center justify-center {{if (eq @options.action "join") 'border-blue-500' 'border-transparent'}}" {{on "click" (fn @options.changeAction "join")}}>
+                <button
+                    type="button"
+                    class="outline-none flex-1 rounded-lg bg-white dark:bg-gray-900 border-2 px-4 py-2 flex items-center justify-center
+                        {{if (eq @options.action 'join') 'border-blue-500' 'border-transparent'}}"
+                    {{on "click" (fn @options.changeAction "join")}}
+                >
                     <div class="mr-2.5">
                         <FaIcon @icon="handshake" @size="xl" class="text-blue-500" />
                     </div>
@@ -10,7 +15,12 @@
                         <span class="text-gray-900 dark:text-gray-100 text-lg">Join an Organization</span>
                     </div>
                 </button>
-                <button type="button" class="outline-none flex-1 rounded-lg bg-white dark:bg-gray-900 border-2 px-4 py-2 flex items-center justify-center {{if (eq @options.action "create") 'border-blue-500' 'border-transparent'}}" {{on "click" (fn @options.changeAction "create")}}>
+                <button
+                    type="button"
+                    class="outline-none flex-1 rounded-lg bg-white dark:bg-gray-900 border-2 px-4 py-2 flex items-center justify-center
+                        {{if (eq @options.action 'create') 'border-blue-500' 'border-transparent'}}"
+                    {{on "click" (fn @options.changeAction "create")}}
+                >
                     <div class="mr-2.5">
                         <FaIcon @icon="building" @size="xl" class="text-blue-500" />
                     </div>
@@ -30,7 +40,7 @@
                 <PhoneInput @value={{@options.phone}} @onInput={{fn (mut @options.phone)}} class="form-input w-full" />
             </InputGroup>
             <InputGroup @name="Organization currency">
-                <CurrencySelect @value={{@options.currency}} @onSelect={{fn (mut @options.currency)}} @triggerClass="w-full form-select"  />
+                <CurrencySelect @value={{@options.currency}} @onSelect={{fn (mut @options.currency)}} @triggerClass="w-full form-select" />
             </InputGroup>
         {{/if}}
     </div>
diff --git a/addon/components/modals/extension-details.hbs b/addon/components/modals/extension-details.hbs
index 4c47cc2..eba58d1 100644
--- a/addon/components/modals/extension-details.hbs
+++ b/addon/components/modals/extension-details.hbs
@@ -1,3 +1 @@
-<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
-    
-</Modal::Default>
\ No newline at end of file
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}} />
\ No newline at end of file
diff --git a/addon/components/modals/import-form.hbs b/addon/components/modals/import-form.hbs
new file mode 100644
index 0000000..0a6c708
--- /dev/null
+++ b/addon/components/modals/import-form.hbs
@@ -0,0 +1,102 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container my-5">
+        {{#if @options.isProcessing}}
+            <div
+                class="min-h-56 dropzone w-full rounded px-4 py-8 min-h text-gray-900 dark:text-white text-center flex flex-col items-center justify-center border-2 border-dashed border-gray-200 dark:border-indigo-500"
+            >
+                <div class="flex items-center justify-center py-5">
+                    <Spinner class="text-sm dark:text-gray-100" @loadingMessage={{t "component.import-modal.loading-message"}} />
+                </div>
+            </div>
+        {{else}}
+            {{#let (file-queue name="spreadsheets" onFileAdded=this.queueFile accept=(join "," @options.acceptedFileTypes)) as |queue|}}
+                <FileDropzone
+                    @queue={{queue}}
+                    class="min-h-56 dropzone w-full rounded px-4 py-8 min-h text-gray-900 dark:text-white text-center flex flex-col items-center justify-center border-2 border-dashed border-gray-200 dark:border-indigo-500"
+                    as |dropzone|
+                >
+                    {{#if dropzone.active}}
+                        {{#if dropzone.valid}}
+                            {{t "component.import-modal.drop-upload"}}
+                        {{else}}
+                            {{t "component.import-modal.invalid"}}
+                        {{/if}}
+                    {{else if queue.files.length}}
+                        <div class="my-2">
+                            <FaIcon @icon="file-import" class="text-indigo-500 mr-2" />
+                            {{pluralize queue.files.length "spreadsheet"}}
+                            {{t "component.import-modal.ready-upload"}}
+                        </div>
+                        <div class="my-2">({{queue.progress}}%)</div>
+                    {{else}}
+                        <h4 class="font-semibold mb-8">
+                            <FaIcon @icon="file-import" class="text-indigo-500 mr-2" />
+                            {{t "component.import-modal.upload-spreadsheets"}}
+                        </h4>
+                        <div>
+                            {{#if dropzone.supported}}
+                                <p class="text-base font-semibold my-5">{{t "component.import-modal.drag-drop"}}</p>
+                            {{/if}}
+
+                            <UploadButton
+                                @buttonText={{t "component.import-modal.button-text"}}
+                                @type="magic"
+                                @icon="file-import"
+                                @name={{t "component.import-modal.spreadsheets"}}
+                                @for="spreadsheets"
+                                @accept={{join "," @options.acceptedFileTypes}}
+                                @multiple={{true}}
+                                @onFileAdded={{@options.queueFile}}
+                                class="w-72 justify-center"
+                            />
+                        </div>
+                    {{/if}}
+                </FileDropzone>
+            {{/let}}
+
+            {{#if @options.uploadQueue}}
+                <div class="mx-0 my-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <span class="leading-6 dark:text-gray-100">{{t "component.import-modal.upload-queue"}}</span>
+                    </div>
+
+                    <div class="table-wrapper table-fluid">
+                        <table class="table table-fixed">
+                            <thead>
+                                <tr>
+                                    {{#each @options.fileQueueColumns as |column|}}
+                                        <th>{{column.name}}</th>
+                                    {{/each}}
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {{#each @options.uploadQueue as |file|}}
+                                    <tr>
+                                        {{#each @options.fileQueueColumns as |column|}}
+                                            <td>
+                                                {{#if (eq column.key "delete")}}
+                                                    <a href="javascript:;" {{on "click" (fn @options.removeFile file)}}>
+                                                        <FaIcon @icon="trash" class="text-red-500" />
+                                                    </a>
+                                                {{else if (eq column.key "type")}}
+                                                    <FileIcon @file={{file}} />
+                                                {{else if (eq column.key "fileSize")}}
+                                                    {{format-bytes (get file column.valuePath)}}
+                                                {{else if (eq column.key "uploadDate")}}
+                                                    {{format-date (get file column.valuePath) "d MMM yyyy"}}
+                                                {{else}}
+                                                    <div class="min-w-225px max-w-225px truncate">{{get file column.valuePath}}</div>
+                                                {{/if}}
+                                            </td>
+                                        {{/each}}
+                                    </tr>
+                                {{/each}}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            {{/if}}
+        {{/if}}
+
+    </div>
+</Modal::Default>
\ No newline at end of file
diff --git a/addon/components/modals/install-prompt.hbs b/addon/components/modals/install-prompt.hbs
index dd3b3a3..90de5e0 100644
--- a/addon/components/modals/install-prompt.hbs
+++ b/addon/components/modals/install-prompt.hbs
@@ -7,8 +7,7 @@
                 </div>
             </div>
             <div class="flex-1 dark:text-gray-100">
-                <p class="text-base mb-2">You are attempting to install the extension "{{or @options.extensionName}}".
-                    Are you sure you wish to proceed with this installation?</p>
+                <p class="text-base mb-2">You are attempting to install the extension "{{or @options.extensionName}}". Are you sure you wish to proceed with this installation?</p>
                 <small>Some extensions require access to your resources.</small>
             </div>
         </div>
diff --git a/addon/components/modals/resend-verification-email.hbs b/addon/components/modals/resend-verification-email.hbs
index e816b0f..34f0ff3 100644
--- a/addon/components/modals/resend-verification-email.hbs
+++ b/addon/components/modals/resend-verification-email.hbs
@@ -4,7 +4,11 @@
             <div class="flex">
                 <div class="flex-shrink-0">
                     <svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
+                        <path
+                            fill-rule="evenodd"
+                            d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
+                            clip-rule="evenodd"
+                        ></path>
                     </svg>
                 </div>
                 <div class="ml-3 flex items-center">
@@ -16,6 +20,12 @@
             </div>
         </div>
 
-        <InputGroup @type="email" @name="Verify your email address" @value={{@options.email}} @helpText="Have a second look and confirm your email address is correct." @inputClass="input-lg" />
+        <InputGroup
+            @type="email"
+            @name="Verify your email address"
+            @value={{@options.email}}
+            @helpText="Have a second look and confirm your email address is correct."
+            @inputClass="input-lg"
+        />
     </div>
 </Modal::Default>
\ No newline at end of file
diff --git a/addon/components/modals/verify-by-sms.hbs b/addon/components/modals/verify-by-sms.hbs
index d4583d9..ddf653a 100644
--- a/addon/components/modals/verify-by-sms.hbs
+++ b/addon/components/modals/verify-by-sms.hbs
@@ -3,11 +3,12 @@
         <div class="bg-yellow-50 rounded shadow-sm border-l-4 border-yellow-400 p-4 mb-5">
             <div class="flex">
                 <div class="flex-shrink-0">
-                    <svg class="h-5 w-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
-                        fill="currentColor" aria-hidden="true">
-                        <path fill-rule="evenodd"
+                    <svg class="h-5 w-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                        <path
+                            fill-rule="evenodd"
                             d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
-                            clip-rule="evenodd" />
+                            clip-rule="evenodd"
+                        ></path>
                     </svg>
                 </div>
                 <div class="ml-3 flex items-center">
diff --git a/addon/components/modals/verify-email.hbs b/addon/components/modals/verify-email.hbs
index 901b437..eb32229 100644
--- a/addon/components/modals/verify-email.hbs
+++ b/addon/components/modals/verify-email.hbs
@@ -3,11 +3,12 @@
         <div class="bg-blue-50 rounded shadow-sm border-l-4 border-blue-400 p-4 mb-5">
             <div class="flex">
                 <div class="flex-shrink-0">
-                    <svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
-                        fill="currentColor" aria-hidden="true">
-                        <path fill-rule="evenodd"
+                    <svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                        <path
+                            fill-rule="evenodd"
                             d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
-                            clip-rule="evenodd" />
+                            clip-rule="evenodd"
+                        ></path>
                     </svg>
                 </div>
                 <div class="ml-3 flex items-center">
@@ -19,9 +20,21 @@
             </div>
         </div>
         {{#if @options.sent}}
-            <InputGroup @type="tel" @name="Enter verification code" @value={{@options.code}} @helpText="Enter the code you received in your email, please check spam if not in inbox." @inputClass="input-lg" />
+            <InputGroup
+                @type="tel"
+                @name="Enter verification code"
+                @value={{@options.code}}
+                @helpText="Enter the code you received in your email, please check spam if not in inbox."
+                @inputClass="input-lg"
+            />
         {{else}}
-            <InputGroup @type="email" @name="Verify your email address" @value={{@options.email}} @helpText="Have a second look and confirm your email address is correct." @inputClass="input-lg" />
+            <InputGroup
+                @type="email"
+                @name="Verify your email address"
+                @value={{@options.email}}
+                @helpText="Have a second look and confirm your email address is correct."
+                @inputClass="input-lg"
+            />
         {{/if}}
     </div>
 </Modal::Default>
\ No newline at end of file
diff --git a/addon/components/model-select-multiple.hbs b/addon/components/model-select-multiple.hbs
index 614a7d2..e5dfad3 100644
--- a/addon/components/model-select-multiple.hbs
+++ b/addon/components/model-select-multiple.hbs
@@ -1,4 +1,81 @@
-<ModelSelect @modelName={{@modelName}} @selectedModel={{@selectedModel}} @optionLabel={{@optionLabel}} @searchProperty={{@searchProperty}} @searchKey={{@searchKey}} @loadDefaultOptions={{@loadDefaultOptions}} @infiniteScroll={{@infiniteScroll}} @pageSize={{@pageSize}} @query={{@query}} @debounceDuration={{this.debounceDuration}} @withCreate={{@withCreate}} @buildSuggestion={{@buildSuggestion}} @perPageParam={{@perPageParam}} @pageParam={{@pageParam}} @totalPagesParam={{@totalPagesParam}} @onCreate={{@onCreate}} {{!-- overwritten arguments --}} @onChange={{this.change}} @searchField={{@optionLabel}} @triggerClass="ember-model-select-multiple-trigger {{@triggerClass}}" {{!-- power-select-multiple defaults --}} @triggerRole={{@triggerRole}} @ariaDescribedBy={{@ariaDescribedBy}} @ariaInvalid={{@ariaInvalid}} @ariaLabel={{@ariaLabel}} @ariaLabelledBy={{@ariaLabelledBy}} @afterOptionsComponent={{@afterOptionsComponent}} @allowClear={{@allowClear}} @beforeOptionsComponent={{or @beforeOptionsComponent null}} @buildSelection={{or @buildSelection this.defaultBuildSelection}} @calculatePosition={{@calculatePosition}} @closeOnSelect={{@closeOnSelect}} @defaultHighlighted={{@defaultHighlighted}} @destination={{@destination}} @disabled={{@disabled}} @dropdownClass={{@dropdownClass}} @extra={{@extra}} @groupComponent={{@groupComponent}} @horizontalPosition={{@horizontalPosition}} @initiallyOpened={{@initiallyOpened}} @loadingMessage={{@loadingMessage}} @matcher={{@matcher}} @matchTriggerWidth={{@matchTriggerWidth}} @noMatchesMessage={{@noMatchesMessage}} @onBlur={{@onBlur}} {{!-- @onChange={{@onChange}} --}} @onClose={{@onClose}} @onFocus={{this.handleFocus}} @onInput={{@onInput}} @onKeydown={{this.handleKeydown}} @onOpen={{this.handleOpen}} @options={{@options}} @optionsComponent={{@optionsComponent}} @placeholder={{@placeholder}} @placeholderComponent={{@placeholderComponent}} @preventScroll={{@preventScroll}} @registerAPI={{@registerAPI}} @renderInPlace={{@renderInPlace}} @required={{@required}} @scrollTo={{@scrollTo}} @search={{@search}} @searchEnabled={{@searchEnabled}} {{!-- @searchField={{@searchField}} --}} @searchMessage={{@searchMessage}} @searchPlaceholder={{@searchPlaceholder}} {{!-- @selected={{@selected}} --}} @selectedItemComponent={{@selectedItemComponent}} @eventType={{@eventType}} @title={{@title}} {{!-- @triggerClass="ember-power-select-multiple-trigger {{@triggerClass}}" --}} @triggerComponent={{component (or @triggerComponent "power-select-multiple/trigger") tabindex=@tabindex}} @triggerId={{@triggerId}} @verticalPosition={{@verticalPosition}} @tabindex={{this.computedTabIndex}} ...attributes as |model|>
+<ModelSelect
+    @modelName={{@modelName}}
+    @selectedModel={{@selectedModel}}
+    @optionLabel={{@optionLabel}}
+    @searchProperty={{@searchProperty}}
+    @searchKey={{@searchKey}}
+    @loadDefaultOptions={{@loadDefaultOptions}}
+    @infiniteScroll={{@infiniteScroll}}
+    @pageSize={{@pageSize}}
+    @query={{@query}}
+    @debounceDuration={{this.debounceDuration}}
+    @withCreate={{@withCreate}}
+    @buildSuggestion={{@buildSuggestion}}
+    @perPageParam={{@perPageParam}}
+    @pageParam={{@pageParam}}
+    @totalPagesParam={{@totalPagesParam}}
+    @onCreate={{@onCreate}}
+    {{! overwritten arguments }}
+    @onChange={{this.change}}
+    @searchField={{@optionLabel}}
+    @triggerClass="ember-model-select-multiple-trigger {{@triggerClass}}"
+    {{! power-select-multiple defaults }}
+    @triggerRole={{@triggerRole}}
+    @ariaDescribedBy={{@ariaDescribedBy}}
+    @ariaInvalid={{@ariaInvalid}}
+    @ariaLabel={{@ariaLabel}}
+    @ariaLabelledBy={{@ariaLabelledBy}}
+    @afterOptionsComponent={{@afterOptionsComponent}}
+    @allowClear={{@allowClear}}
+    @beforeOptionsComponent={{or @beforeOptionsComponent null}}
+    @buildSelection={{or @buildSelection this.defaultBuildSelection}}
+    @calculatePosition={{@calculatePosition}}
+    @closeOnSelect={{@closeOnSelect}}
+    @defaultHighlighted={{@defaultHighlighted}}
+    @destination={{@destination}}
+    @disabled={{@disabled}}
+    @dropdownClass={{@dropdownClass}}
+    @extra={{@extra}}
+    @groupComponent={{@groupComponent}}
+    @horizontalPosition={{@horizontalPosition}}
+    @initiallyOpened={{@initiallyOpened}}
+    @loadingMessage={{@loadingMessage}}
+    @matcher={{@matcher}}
+    @matchTriggerWidth={{@matchTriggerWidth}}
+    @noMatchesMessage={{@noMatchesMessage}}
+    @onBlur={{@onBlur}}
+    {{!-- @onChange={{@onChange}} --}}
+    @onClose={{@onClose}}
+    @onFocus={{this.handleFocus}}
+    @onInput={{@onInput}}
+    @onKeydown={{this.handleKeydown}}
+    @onOpen={{this.handleOpen}}
+    @options={{@options}}
+    @optionsComponent={{@optionsComponent}}
+    @placeholder={{@placeholder}}
+    @placeholderComponent={{@placeholderComponent}}
+    @preventScroll={{@preventScroll}}
+    @registerAPI={{@registerAPI}}
+    @renderInPlace={{@renderInPlace}}
+    @required={{@required}}
+    @scrollTo={{@scrollTo}}
+    @search={{@search}}
+    @searchEnabled={{@searchEnabled}}
+    {{!-- @searchField={{@searchField}} --}}
+    @searchMessage={{@searchMessage}}
+    @searchPlaceholder={{@searchPlaceholder}}
+    {{!-- @selected={{@selected}} --}}
+    @selectedItemComponent={{@selectedItemComponent}}
+    @eventType={{@eventType}}
+    @title={{@title}}
+    {{!-- @triggerClass="ember-power-select-multiple-trigger {{@triggerClass}}" --}}
+    @triggerComponent={{component (or @triggerComponent "power-select-multiple/trigger") tabindex=@tabindex}}
+    @triggerId={{@triggerId}}
+    @verticalPosition={{@verticalPosition}}
+    @tabindex={{this.computedTabIndex}}
+    ...attributes
+    as |model|
+>
     {{#if (has-block)}}
         {{yield model}}
     {{else}}
diff --git a/addon/components/model-select.hbs b/addon/components/model-select.hbs
index 0b06fba..63ea797 100644
--- a/addon/components/model-select.hbs
+++ b/addon/components/model-select.hbs
@@ -1,5 +1,62 @@
 <div class="fleetbase-model-select fleetbase-power-select ember-model-select" {{did-update this.selectedModelChanged @selectedModel}}>
-    <PowerSelect @afterOptionsComponent={{@afterOptionsComponent}} @allowClear={{@allowClear}} @animationEnabled={{@animationEnabled}} @ariaDescribedBy={{@ariaDescribedBy}} @ariaInvalid={{@ariaInvalid}} @ariaLabel={{@ariaLabel}} @ariaLabelledBy={{@ariaLabelledBy}} @beforeOptionsComponent={{@beforeOptionsComponent}} @buildSelection={{@buildSelection}} @calculatePosition={{@calculatePosition}} @closeOnSelect={{@closeOnSelect}} @defaultHighlighted={{@defaultHighlighted}} @destination={{@destination}} @disabled={{@disabled}} @dropdownClass={{or @dropdownClass "ember-model-select__dropdown"}} @extra={{@extra}} @groupComponent={{@groupComponent}} @highlightOnHover={{@highlightOnHover}} @horizontalPosition={{@horizontalPosition}} @initiallyOpened={{@initiallyOpened}} @loadingMessage={{@loadingMessage}} @eventType={{@eventType}} @matcher={{@matcher}} @matchTriggerWidth={{@matchTriggerWidth}} @noMatchesMessage={{@noMatchesMessage}} @onBlur={{@onBlur}} @onChange={{this.change}} @onClose={{this.onClose}} @onFocus={{@onFocus}} @onInput={{this.onInput}} @onKeydown={{@onKeydown}} @onOpen={{this.onOpen}} @options={{this._options}} @optionsComponent={{component this.optionsComponent infiniteScroll=this.infiniteScroll infiniteModel=this.model withCreate=this.withCreate}} @placeholder={{@placeholder}} @placeholderComponent={{@placeholderComponent}} @preventScroll={{@preventScroll}} @renderInPlace={{@renderInPlace}} @scrollTo={{@scrollTo}} @search={{perform this.searchModels}} @searchEnabled={{get-default-value @searchEnabled true}} @searchField={{@searchField}} @searchMessage={{@searchMessage}} @searchPlaceholder={{@searchPlaceholder}} @selected={{this.selectedModel}} @selectedItemComponent={{@selectedItemComponent}} @tabindex={{@tabindex}} @triggerClass={{@triggerClass}} @triggerComponent={{@triggerComponent}} @triggerId={{@triggerId}} @triggerRole={{@triggerRole}} @typeAheadMatcher={{@typeAheadMatcher}} @verticalPosition={{@verticalPosition}} @withCreate={{@withCreate}} ...attributes as |model|>
+    <PowerSelect
+        @afterOptionsComponent={{@afterOptionsComponent}}
+        @allowClear={{@allowClear}}
+        @animationEnabled={{@animationEnabled}}
+        @ariaDescribedBy={{@ariaDescribedBy}}
+        @ariaInvalid={{@ariaInvalid}}
+        @ariaLabel={{@ariaLabel}}
+        @ariaLabelledBy={{@ariaLabelledBy}}
+        @beforeOptionsComponent={{@beforeOptionsComponent}}
+        @buildSelection={{@buildSelection}}
+        @calculatePosition={{@calculatePosition}}
+        @closeOnSelect={{@closeOnSelect}}
+        @defaultHighlighted={{@defaultHighlighted}}
+        @destination={{@destination}}
+        @disabled={{@disabled}}
+        @dropdownClass={{or @dropdownClass "ember-model-select__dropdown"}}
+        @extra={{@extra}}
+        @groupComponent={{@groupComponent}}
+        @highlightOnHover={{@highlightOnHover}}
+        @horizontalPosition={{@horizontalPosition}}
+        @initiallyOpened={{@initiallyOpened}}
+        @loadingMessage={{@loadingMessage}}
+        @eventType={{@eventType}}
+        @matcher={{@matcher}}
+        @matchTriggerWidth={{@matchTriggerWidth}}
+        @noMatchesMessage={{@noMatchesMessage}}
+        @onBlur={{@onBlur}}
+        @onChange={{this.change}}
+        @onClose={{this.onClose}}
+        @onFocus={{@onFocus}}
+        @onInput={{this.onInput}}
+        @onKeydown={{@onKeydown}}
+        @onOpen={{this.onOpen}}
+        @options={{this._options}}
+        @optionsComponent={{component this.optionsComponent infiniteScroll=this.infiniteScroll infiniteModel=this.model withCreate=this.withCreate}}
+        @placeholder={{@placeholder}}
+        @placeholderComponent={{@placeholderComponent}}
+        @preventScroll={{@preventScroll}}
+        @renderInPlace={{@renderInPlace}}
+        @scrollTo={{@scrollTo}}
+        @search={{perform this.searchModels}}
+        @searchEnabled={{get-default-value @searchEnabled true}}
+        @searchField={{@searchField}}
+        @searchMessage={{@searchMessage}}
+        @searchPlaceholder={{@searchPlaceholder}}
+        @selected={{this.selectedModel}}
+        @selectedItemComponent={{@selectedItemComponent}}
+        @tabindex={{@tabindex}}
+        @triggerClass={{@triggerClass}}
+        @triggerComponent={{@triggerComponent}}
+        @triggerId={{@triggerId}}
+        @triggerRole={{@triggerRole}}
+        @typeAheadMatcher={{@typeAheadMatcher}}
+        @verticalPosition={{@verticalPosition}}
+        @withCreate={{@withCreate}}
+        ...attributes
+        as |model|
+    >
         {{#if (has-block)}}
             {{yield model}}
         {{else}}
diff --git a/addon/components/model-select/options.hbs b/addon/components/model-select/options.hbs
index f6d7ed0..a7de966 100644
--- a/addon/components/model-select/options.hbs
+++ b/addon/components/model-select/options.hbs
@@ -1,6 +1,16 @@
 <ul role="listbox" ...attributes>
     <li>
-        <PowerSelect::Options @loadingMessage={{@loadingMessage}} @select={{@select}} @options={{@options}} @groupIndex={{@groupIndex}} @optionsComponent={{@optionsComponent}} @extra={{@extra}} @highlightOnHover={{@highlightOnHover}} @groupComponent={{@groupComponent}} as |option select|>
+        <PowerSelect::Options
+            @loadingMessage={{@loadingMessage}}
+            @select={{@select}}
+            @options={{@options}}
+            @groupIndex={{@groupIndex}}
+            @optionsComponent={{@optionsComponent}}
+            @extra={{@extra}}
+            @highlightOnHover={{@highlightOnHover}}
+            @groupComponent={{@groupComponent}}
+            as |option select|
+        >
             {{yield option select}}
         </PowerSelect::Options>
     </li>
diff --git a/addon/components/model-select/spinner.hbs b/addon/components/model-select/spinner.hbs
index 6148090..314725a 100644
--- a/addon/components/model-select/spinner.hbs
+++ b/addon/components/model-select/spinner.hbs
@@ -1,4 +1,4 @@
 <svg class="ember-model-select__spinner" width="25" height="25" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" style={{html-safe "fill-rule:evenodd; clip-rule:evenodd; fill:none;"}}>
-  <circle cx="19" cy="19" r="17" stroke-width="3.9px" />
-  <path d="M36,19c0,-9.388 -7.612,-17 -17,-17" stroke-width="3.9px" />
+    <circle cx="19" cy="19" r="17" stroke-width="3.9px"></circle>
+    <path d="M36,19c0,-9.388 -7.612,-17 -17,-17" stroke-width="3.9px"></path>
 </svg>
\ No newline at end of file
diff --git a/addon/components/money-input.hbs b/addon/components/money-input.hbs
index 1e51a36..cf88d23 100644
--- a/addon/components/money-input.hbs
+++ b/addon/components/money-input.hbs
@@ -1,8 +1,15 @@
 <div class="ui-money-input {{@wrapperClass}}">
     <div class="flex rounded-md shadow-sm">
-        <span class="shadow-sm inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 dark:border-gray-900 dark:bg-gray-800 dark:text-gray-200 sm:text-sm">
+        <span
+            class="shadow-sm inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 dark:border-gray-900 dark:bg-gray-800 dark:text-gray-200 sm:text-sm"
+        >
             {{#if @canSelectCurrency}}
-                <CurrencySelect @onChange={{this.setCurrency}} @currency={{this.currency}} @currencyData={{this.currencyData}} @triggerComponent={{component "money-input/currency-handle" currency=this.currencyData}} />
+                <CurrencySelect
+                    @onChange={{this.setCurrency}}
+                    @currency={{this.currency}}
+                    @currencyData={{this.currencyData}}
+                    @triggerComponent={{component "money-input/currency-handle" currency=this.currencyData}}
+                />
             {{else}}
                 <MoneyInput::CurrencyHandle @currency={{this.currencyData}} />
             {{/if}}
diff --git a/addon/components/multi-select.hbs b/addon/components/multi-select.hbs
index c43d844..0950a38 100644
--- a/addon/components/multi-select.hbs
+++ b/addon/components/multi-select.hbs
@@ -1,3 +1,18 @@
-<PowerSelectMultiple class="form-select form-input {{@selectClass}}" @registerAPI={{@registerAPI}} @searchEnabled={{@searchEnabled}} @search={{@search}} @options={{@options}} @selected={{@selected}} @placeholder={{@placeholder}} @onChange={{@onChange}} @allowClear={{@allowClear}} @placeholderComponent={{@placeholderComponent}} @preventScroll={{@preventScroll}} @renderInPlace={{@renderInPlace}} @scrollTo={{@scrollTo}} as |option|>
+<PowerSelectMultiple
+    class="form-select form-input {{@selectClass}}"
+    @registerAPI={{@registerAPI}}
+    @searchEnabled={{@searchEnabled}}
+    @search={{@search}}
+    @options={{@options}}
+    @selected={{@selected}}
+    @placeholder={{@placeholder}}
+    @onChange={{@onChange}}
+    @allowClear={{@allowClear}}
+    @placeholderComponent={{@placeholderComponent}}
+    @preventScroll={{@preventScroll}}
+    @renderInPlace={{@renderInPlace}}
+    @scrollTo={{@scrollTo}}
+    as |option|
+>
     {{yield option}}
 </PowerSelectMultiple>
\ No newline at end of file
diff --git a/addon/components/notification-tray.hbs b/addon/components/notification-tray.hbs
index bd86220..5cf7f18 100644
--- a/addon/components/notification-tray.hbs
+++ b/addon/components/notification-tray.hbs
@@ -1,5 +1,15 @@
 <div class="next-user-button" ...attributes>
-    <BasicDropdown @registerAPI={{this.registerAPI}} @defaultClass={{@wrapperClass}} @onOpen={{@onOpen}} @onClose={{@onClose}} @verticalPosition={{@verticalPosition}} @horizontalPosition={{@horizontalPosition}} @renderInPlace={{true}} @initiallyOpened={{@initiallyOpened}} as |dd|>
+    <BasicDropdown
+        @registerAPI={{this.registerAPI}}
+        @defaultClass={{@wrapperClass}}
+        @onOpen={{@onOpen}}
+        @onClose={{@onClose}}
+        @verticalPosition={{@verticalPosition}}
+        @horizontalPosition={{@horizontalPosition}}
+        @renderInPlace={{true}}
+        @initiallyOpened={{@initiallyOpened}}
+        as |dd|
+    >
         <dd.Trigger class={{@triggerClass}}>
             <div class="next-org-button-trigger flex-shrink-0 {{if dd.isOpen 'is-open'}}">
                 <FaIcon @icon="inbox" />
diff --git a/addon/components/otp-input.hbs b/addon/components/otp-input.hbs
index 1e068f9..f87e14d 100644
--- a/addon/components/otp-input.hbs
+++ b/addon/components/otp-input.hbs
@@ -1,5 +1,12 @@
-<div class="otp-input-container flex space-x-2">
-    {{#each this.otpValues as |value index|}}
-        <input type="text" id={{concat "otp-input-" index}} value={{value}} maxlength="1" {{on "input" (fn this.handleInput index)}} {{on "focus" (fn this.handleFocus index)}} {{on "keydown" (fn this.handleKeyDown index)}} {{on "paste" (fn this.handlePaste index)}} {{did-insert (fn this.handleDidInsert index)}} />
-    {{/each}}
+<div class="otp-input-container">
+    <Input
+        @value={{this.value}}
+        @type="tel"
+        class="form-input form-input-lg otp-input"
+        autocomplete="off"
+        {{did-insert this.setup}}
+        placeholder={{this.placeholder}}
+        {{on "input" this.validate}}
+        ...attributes
+    />
 </div>
\ No newline at end of file
diff --git a/addon/components/otp-input.js b/addon/components/otp-input.js
index d75ba16..69eef2f 100644
--- a/addon/components/otp-input.js
+++ b/addon/components/otp-input.js
@@ -1,173 +1,87 @@
-// app/components/otp-input.js
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { isBlank } from '@ember/utils';
-import { notifyPropertyChange } from '@ember/object';
+import { action } from '@ember/object';
 
 /**
  * Glimmer component for handling OTP (One-Time Password) input.
+ * This component is responsible for rendering an OTP input field and managing its state.
  *
  * @class OtpInputComponent
  * @extends Component
  */
 export default class OtpInputComponent extends Component {
-    numberOfDigits = 6;
-
     /**
-     * Array to track individual digit values of the OTP.
-     *
-     * @property {Array} otpValues
-     * @default ['', '', '', '', '', '']
-     * @tracked
+     * Tracks the size of the OTP, typically the number of characters the OTP should have.
+     * @property size
+     * @type {Number}
+     * @default 6
      */
-    @tracked otpValues;
+    @tracked size = 6;
 
     /**
-     * Tracked property for handling the OTP value passed from the parent.
-     *
-     * @property {String} value
-     * @tracked
+     * Tracks the current value entered by the user in the OTP input.
+     * @property value
+     * @type {String}
      */
     @tracked value;
 
     /**
-     * Constructor for the OTP input component.
+     * The placeholder for the OTP input.
      *
-     * @constructor
+     * @type {String}
+     * @memberof OtpInputComponent
      */
-    constructor() {
-        super(...arguments);
-        this.otpValues = Array.from({ length: this.numberOfDigits }, () => '');
-        this.handleInput = this.handleInput.bind(this);
-        this.handleFocus = this.handleFocus.bind(this);
-        this.handleKeyDown = this.handleKeyDown.bind(this);
-    }
+    @tracked placeholder;
 
     /**
-     * Getter for the complete OTP value obtained by joining individual digits.
+     * Component constructor that initializes the component with specified properties.
+     * Allows setting the initial `size` and `value` of the OTP input upon component instantiation.
      *
-     * @property {String} otpValue
-     */
-    get otpValue() {
-        return this.otpValues.join('');
-    }
-
-    /**
-     * Setter for updating the OTP value based on user input.
-     *
-     * @property {String} otpValue
+     * @constructor
+     * @param owner The owner object of this component instance.
+     * @param {Object} args Component arguments.
      */
-    set otpValue(newValue) {
-        if (typeof newValue === 'string') {
-            this.otpValues = newValue.split('').slice(0, this.numberOfDigits);
-        }
+    constructor(owner, { size, value, placeholder }) {
+        super(...arguments);
+        this.value = value;
+        this.size = size;
+        this.placeholder = placeholder ?? '0'.repeat(size);
     }
 
     /**
-     * Handles focus on the input field at a specified index.
+     * Focus action that sets the focus on the given HTML element.
+     * Typically used to focus the input element when the component is rendered.
      *
-     * @method handleFocus
-     * @param {Number} index - The index of the input field to focus on.
+     * @method focus
+     * @param {HTMLElement} el The element to be focused.
      */
-    handleFocus(index) {
-        const inputId = `otp-input-${index}`;
-        const inputElement = document.getElementById(inputId);
-
-        if (inputElement) {
-            inputElement.focus();
-        }
+    @action setup(inputEl) {
+        inputEl.focus();
     }
 
     /**
-     * Handles input events on the input field at a specified index.
+     * Validates the input as the user types into the OTP field.
+     * Checks the length of the entered value and triggers appropriate callbacks on certain conditions.
      *
-     * @method handleInput
-     * @param {Number} index - The index of the input field being edited.
-     * @param {Event} event - The input event object.
+     * @method validate
+     * @param {Event} event The input event that triggered this action.
      */
-    handleInput(index, event) {
-        if (!event || !event.target) {
-            console.error('Invalid event object in handleInput');
-            return;
-        }
-
-        const inputValue = event.target.value;
-
-        this.otpValues[index] = inputValue;
+    @action validate({ target }) {
+        const value = target.value;
 
-        if (inputValue === '' && index > 0) {
-            this.handleFocus(index - 1);
-        } else if (index < this.numberOfDigits - 1) {
-            this.handleFocus(index + 1);
-        }
+        // Update value
+        this.value = value;
 
-        // on every input
+        // Call the onInput function if provided in the component's arguments.
         if (typeof this.args.onInput === 'function') {
-            this.args.onInput(inputValue);
+            this.args.onInput(value);
         }
 
-        if (this.otpValues.every((value) => !isBlank(value))) {
-            const completeOtpValue = this.otpValues.join('');
-
+        // Check if the entered value meets the required size and if so, trigger the onInputCompleted callback.
+        if (typeof value === 'string' && value.length === this.size) {
             if (typeof this.args.onInputCompleted === 'function') {
-                this.args.onInputCompleted(completeOtpValue);
+                this.args.onInputCompleted(value);
             }
         }
     }
-
-    /**
-     * Handles keydown events on the input field at a specified index.
-     *
-     * @method handleKeyDown
-     * @param {Number} index - The index of the input field.
-     * @param {Event} event - The keydown event object.
-     */
-    handleKeyDown(index, event) {
-        switch (event.keyCode) {
-            case 37:
-                if (index > 0) {
-                    this.handleFocus(index - 1);
-                }
-                break;
-            case 39:
-                if (index < this.numberOfDigits - 1) {
-                    this.handleFocus(index + 1);
-                }
-                break;
-            case 8:
-                if (this.otpValues[index] !== '') {
-                    this.otpValues[index] = '';
-                } else if (index > 0) {
-                    this.handleFocus(index - 1);
-                }
-                break;
-            default:
-                break;
-        }
-    }
-
-    handlePaste = (index, event) => {
-        event.preventDefault();
-        const pastedData = event.clipboardData.getData('text/plain');
-
-        if (/^\d{6}$/.test(pastedData)) {
-            const pastedValues = pastedData.split('');
-
-            for (let i = 0; i < this.numberOfDigits; i++) {
-                this.otpValues[index + i] = pastedValues[i] || '';
-            }
-            const completeOtpValue = this.otpValues.join('');
-
-            if (typeof this.args.onInputCompleted === 'function') {
-                this.args.onInputCompleted(completeOtpValue);
-            }
-        }
-        notifyPropertyChange(this, 'otpValues');
-    };
-
-    handleDidInsert(index, element) {
-        if (index === 0) {
-            element.focus();
-        }
-    }
 }
diff --git a/addon/components/overlay.hbs b/addon/components/overlay.hbs
index b1ddff5..fbde839 100644
--- a/addon/components/overlay.hbs
+++ b/addon/components/overlay.hbs
@@ -1,4 +1,16 @@
-<div role="dialog" aria-modal="true" class="next-content-overlay next-content-overlay-pos-{{or @position "right"}} {{if this.isOpen 'is-open'}} {{if @noBackdrop 'no-backdrop'}} {{if @outView 'outview'}} {{if @fullHeight 'full-height'}} {{if this.isMaximized "maximized"}} {{if this.isMinimized "minimized"}} {{@overlayClass}}" {{did-insert this.setupComponent}}>
+<div
+    role="dialog"
+    aria-modal="true"
+    class="next-content-overlay next-content-overlay-pos-{{or @position 'right'}}
+        {{if this.isOpen 'is-open'}}
+        {{if @noBackdrop 'no-backdrop'}}
+        {{if @outView 'outview'}}
+        {{if @fullHeight 'full-height'}}
+        {{if this.isMaximized 'maximized'}}
+        {{if this.isMinimized 'minimized'}}
+        {{@overlayClass}}"
+    {{did-insert this.setupComponent}}
+>
     <div class="next-content-overlay-panel-container {{@containerClass}}" {{did-insert (fn this.setupNode "overlayContainer")}}>
         <div class="next-content-overlay-panel" {{did-insert (fn this.setupNode "overlayPanel")}} {{set-width @width}} ...attributes>{{yield this.context}}</div>
         {{#if @isResizable}}
diff --git a/addon/components/overlay/header.hbs b/addon/components/overlay/header.hbs
index 28e2678..e809be7 100644
--- a/addon/components/overlay/header.hbs
+++ b/addon/components/overlay/header.hbs
@@ -28,17 +28,35 @@
     <div class="next-view-header-right {{@actionsWrapperClass}}">
         {{yield}}
         {{#if @overlay.onMaximize}}
-            <button type="button" class="next-content-overlay-panel-maximize-button {{@maximizeButtonClass}}" {{set-height @maximizeButtonHeight}} {{set-width @maximizeButtonWidth}} {{on "click" @overlay.maximize}}>
+            <button
+                type="button"
+                class="next-content-overlay-panel-maximize-button {{@maximizeButtonClass}}"
+                {{set-height @maximizeButtonHeight}}
+                {{set-width @maximizeButtonWidth}}
+                {{on "click" @overlay.maximize}}
+            >
                 <FaIcon @icon={{or @minimizeIcon "window-maximize"}} @size={{@iconSize}} @prefix={{or @iconPrefix "fas"}} class={{@iconClass}} />
             </button>
         {{/if}}
         {{#if @overlay.onMinimize}}
-            <button type="button" class="next-content-overlay-panel-minimize-button {{@minimizeButtonClass}}" {{set-height @minimizeButtonHeight}} {{set-width @minimizeButtonWidth}} {{on "click" @overlay.minimize}}>
+            <button
+                type="button"
+                class="next-content-overlay-panel-minimize-button {{@minimizeButtonClass}}"
+                {{set-height @minimizeButtonHeight}}
+                {{set-width @minimizeButtonWidth}}
+                {{on "click" @overlay.minimize}}
+            >
                 <FaIcon @icon={{or @minimizeIcon "window-minimize"}} @size={{@iconSize}} @prefix={{or @iconPrefix "fas"}} class={{@iconClass}} />
             </button>
         {{/if}}
         {{#if @onPressCancel}}
-            <button type="button" class="next-content-overlay-panel-cancel-button {{@cancelButtonClass}}" {{set-height @cancelButtonHeight}} {{set-width @cancelButtonWidth}} {{on "click" this.cancel}}>
+            <button
+                type="button"
+                class="next-content-overlay-panel-cancel-button {{@cancelButtonClass}}"
+                {{set-height @cancelButtonHeight}}
+                {{set-width @cancelButtonWidth}}
+                {{on "click" this.cancel}}
+            >
                 <FaIcon @icon={{or @cancelIcon "times"}} @size={{@iconSize}} @prefix={{or @iconPrefix "fas"}} class={{@iconClass}} />
             </button>
         {{/if}}
diff --git a/addon/components/pagination.hbs b/addon/components/pagination.hbs
index d72566c..ba5c1e1 100644
--- a/addon/components/pagination.hbs
+++ b/addon/components/pagination.hbs
@@ -40,7 +40,7 @@
                 results
             </p>
         </div>
-       
+
         <div class="fleetbase-pagination-meta-info-paging-wrapper flex items-center justify-end {{@paginationClass}} ">
             {{#if @isLoading}}
                 <div class="flex items-center justify-center mr-2 {{@loadingWrapperClass}}">
@@ -65,7 +65,12 @@
                 </button>
 
                 {{#each this.pageItems as |item|}}
-                    <button type="button" class="fleetbase-pagination-page-item page-item {{if item.current 'active'}} {{@pageItemClass}}" disabled={{or item.active item.dots}} {{on "click" (fn this.goToPage item.page)}}>
+                    <button
+                        type="button"
+                        class="fleetbase-pagination-page-item page-item {{if item.current 'active'}} {{@pageItemClass}}"
+                        disabled={{or item.active item.dots}}
+                        {{on "click" (fn this.goToPage item.page)}}
+                    >
                         {{#if item.dots}}
                             <span>
                                 ...
diff --git a/addon/components/select.hbs b/addon/components/select.hbs
index df278da..3a5e1ce 100644
--- a/addon/components/select.hbs
+++ b/addon/components/select.hbs
@@ -10,7 +10,10 @@
             {{#if (is-object @options)}}
                 {{#each-in @options as |key selectable|}}
                     {{#if @optionLabel}}
-                        <option value={{if @optionValue (get selectable @optionValue) selectable}} selected={{if @optionValue (eq this.value (get selectable @optionValue)) (eq this.value selectable)}}>
+                        <option
+                            value={{if @optionValue (get selectable @optionValue) selectable}}
+                            selected={{if @optionValue (eq this.value (get selectable @optionValue)) (eq this.value selectable)}}
+                        >
                             {{yield (get selectable @optionLabel) key}}
                         </option>
                     {{else}}
@@ -22,7 +25,10 @@
             {{else}}
                 {{#each @options as |selectable|}}
                     {{#if @optionLabel}}
-                        <option value={{if @optionValue (get selectable @optionValue) selectable}} selected={{if @optionValue (eq this.value (get selectable @optionValue)) (eq this.value selectable)}}>
+                        <option
+                            value={{if @optionValue (get selectable @optionValue) selectable}}
+                            selected={{if @optionValue (eq this.value (get selectable @optionValue)) (eq this.value selectable)}}
+                        >
                             {{yield (get selectable @optionLabel) selectable}}
                         </option>
                     {{else}}
@@ -35,7 +41,10 @@
         {{else}}
             {{#each @options as |selectable|}}
                 {{#if @optionLabel}}
-                    <option value={{if @optionValue (get selectable @optionValue) selectable}} selected={{if @optionValue (eq this.value (get selectable @optionValue)) (eq this.value selectable)}}>
+                    <option
+                        value={{if @optionValue (get selectable @optionValue) selectable}}
+                        selected={{if @optionValue (eq this.value (get selectable @optionValue)) (eq this.value selectable)}}
+                    >
                         {{yield (get selectable @optionLabel) selectable}}
                     </option>
                 {{else}}
@@ -49,7 +58,10 @@
         {{#each @options as |selectable|}}
             {{#if @optionLabel}}
                 {{#let (get selectable @optionLabel) as |label|}}
-                    <option value={{if @optionValue (get selectable @optionValue) selectable}} selected={{if @optionValue (eq this.value (get selectable @optionValue)) (eq this.value selectable)}}>
+                    <option
+                        value={{if @optionValue (get selectable @optionValue) selectable}}
+                        selected={{if @optionValue (eq this.value (get selectable @optionValue)) (eq this.value selectable)}}
+                    >
                         {{#if @humanize}}
                             {{or (humanize label) (humanize (get selectable @optionValue))}}
                         {{else}}
diff --git a/addon/components/table.hbs b/addon/components/table.hbs
index 7dbf990..069c234 100644
--- a/addon/components/table.hbs
+++ b/addon/components/table.hbs
@@ -1,13 +1,24 @@
 <div class="next-table-wrapper {{@wrapperClass}}">
     <table class="{{if @canExpand 'is-expandable'}}" ...attributes {{did-insert this.setupComponent}}>
         {{#if (has-block)}}
-            {{yield (hash 
-                columns=this.visibleColumns 
-                rows=@rows 
-                pagination=@pagination
-                body=(component "table/body" selectable=@selectable rows=@rows columns=this.visibleColumns canExpand=@canExpand onRowClick=@onRowClick)
-                head=(component "table/head" canSelectAll=@canSelectAll canExpand=@canExpand rows=@rows columns=this.visibleColumns allRowsToggled=this.allRowsToggled selectAllRows=this.selectAllRows selectAllColumnWidth=@selectAllColumnWidth)
-            )}}
+            {{yield
+                (hash
+                    columns=this.visibleColumns
+                    rows=@rows
+                    pagination=@pagination
+                    body=(component "table/body" selectable=@selectable rows=@rows columns=this.visibleColumns canExpand=@canExpand onRowClick=@onRowClick)
+                    head=(component
+                        "table/head"
+                        canSelectAll=@canSelectAll
+                        canExpand=@canExpand
+                        rows=@rows
+                        columns=this.visibleColumns
+                        allRowsToggled=this.allRowsToggled
+                        selectAllRows=this.selectAllRows
+                        selectAllColumnWidth=@selectAllColumnWidth
+                    )
+                )
+            }}
             {{#if @insertPagination}}
                 <Table::Foot @tfootVerticalOffset={{@tfootVerticalOffset}} @tfootVerticalOffsetElements={{@tfootVerticalOffsetElements}}>
                     <tr class="tfoot-row {{if @pagination 'next-pagination-row'}}">
@@ -36,10 +47,10 @@
             </Table::Head>
             <Table::Body @selectable={{@selectable}} @rows={{@rows}} @columns={{this.visibleColumns}} @canExpand={{@canExpand}} @onRowClick={{@onRowClick}}>
                 {{#each @rows as |row|}}
-                    <Table::Row @selected={{get row 'checked'}} @onRowClick={{@onRowClick}} @row={{row}}>
+                    <Table::Row @selected={{get row "checked"}} @onRowClick={{@onRowClick}} @row={{row}}>
                         {{#if @selectable}}
                             <Table::Td>
-                                <Table::Cell::Checkbox @row={{row}} @value={{get row 'checked'}} />
+                                <Table::Cell::Checkbox @row={{row}} @value={{get row "checked"}} />
                             </Table::Td>
                         {{/if}}
                         {{#each this.visibleColumns as |column|}}
diff --git a/addon/components/table.js b/addon/components/table.js
index e8a9419..e03b86a 100644
--- a/addon/components/table.js
+++ b/addon/components/table.js
@@ -76,4 +76,12 @@ export default class TableComponent extends Component {
             set(row, 'checked', this.allRowsToggled);
         }
     }
+
+    @action untoggleSelectAll() {
+        this.allRowsToggled = false;
+    }
+
+    @action toggleSelectAll() {
+        this.allRowsToggled = true;
+    }
 }
diff --git a/addon/components/table/body.hbs b/addon/components/table/body.hbs
index 1ba1921..323a485 100644
--- a/addon/components/table/body.hbs
+++ b/addon/components/table/body.hbs
@@ -2,13 +2,13 @@
     {{#if (has-block)}}
         {{#if @canExpand}}
             {{#each @rows as |row|}}
-                <Table::ExpandableRow @colspan={{@columns.length}} @row={{row}} @selected={{get row 'checked'}} @onRowClick={{@onRowClick}}>
+                <Table::ExpandableRow @colspan={{@columns.length}} @row={{row}} @selected={{get row "checked"}} @onRowClick={{@onRowClick}}>
                     <Table::Td>
-                        <Table::Cell::ExpandArrow @isExpanded={{get row 'expanded'}} />
+                        <Table::Cell::ExpandArrow @isExpanded={{get row "expanded"}} />
                     </Table::Td>
                     {{#if @selectable}}
                         <Table::Td>
-                            <Table::Cell::Checkbox @row={{row}} @value={{get row 'checked'}} />
+                            <Table::Cell::Checkbox @row={{row}} @value={{get row "checked"}} />
                         </Table::Td>
                     {{/if}}
                     {{#each @columns as |column|}}
@@ -23,13 +23,13 @@
     {{else}}
         {{#if @canExpand}}
             {{#each @rows as |row|}}
-                <Table::ExpandableRow @colspan={{@columns.length}} @row={{row}} @selected={{get row 'checked'}} @onRowClick={{@onRowClick}}>
+                <Table::ExpandableRow @colspan={{@columns.length}} @row={{row}} @selected={{get row "checked"}} @onRowClick={{@onRowClick}}>
                     <Table::Td>
-                        <Table::Cell::ExpandArrow @isExpanded={{get row 'expanded'}} />
+                        <Table::Cell::ExpandArrow @isExpanded={{get row "expanded"}} />
                     </Table::Td>
                     {{#if @selectable}}
                         <Table::Td>
-                            <Table::Cell::Checkbox @row={{row}} @value={{get row 'checked'}} />
+                            <Table::Cell::Checkbox @row={{row}} @value={{get row "checked"}} />
                         </Table::Td>
                     {{/if}}
                     {{#each @columns as |column|}}
@@ -40,10 +40,10 @@
             {{/each}}
         {{else}}
             {{#each @rows as |row|}}
-                <Table::Row @selected={{get row 'checked'}} @onRowClick={{@onRowClick}} @row={{row}}>
+                <Table::Row @selected={{get row "checked"}} @onRowClick={{@onRowClick}} @row={{row}}>
                     {{#if @selectable}}
                         <Table::Td>
-                            <Table::Cell::Checkbox @row={{row}} @value={{get row 'checked'}} />
+                            <Table::Cell::Checkbox @row={{row}} @value={{get row "checked"}} />
                         </Table::Td>
                     {{/if}}
                     {{#each @columns as |column|}}
diff --git a/addon/components/table/cell/anchor.hbs b/addon/components/table/cell/anchor.hbs
index 9387c9a..653fb1c 100644
--- a/addon/components/table/cell/anchor.hbs
+++ b/addon/components/table/cell/anchor.hbs
@@ -1,7 +1,15 @@
 <a href="#" {{on "click" this.onClick}} class={{@column.anchorClass}} disabled={{not @value}} ...attributes>
     {{#if @column.anchorIcon}}
         <span class="btn-icon-wrapper" data-icon-prefix={{@column.anchorIconPrefix}}>
-            <FaIcon @prefix={{@column.anchorIconPrefix}} @icon={{@column.anchorIcon}} @size={{@column.anchorIconSize}} @rotation={{@column.anchorIconRotation}} @flip={{@column.anchorIconFlip}} @spin={{@column.anchorIconSpin}} class={{@column.anchorIconClass}} />
+            <FaIcon
+                @prefix={{@column.anchorIconPrefix}}
+                @icon={{@column.anchorIcon}}
+                @size={{@column.anchorIconSize}}
+                @rotation={{@column.anchorIconRotation}}
+                @flip={{@column.anchorIconFlip}}
+                @spin={{@column.anchorIconSpin}}
+                class={{@column.anchorIconClass}}
+            />
         </span>
     {{/if}}
     {{#if (has-block)}}
diff --git a/addon/components/table/cell/base.hbs b/addon/components/table/cell/base.hbs
index 4064004..8f3e6b1 100644
--- a/addon/components/table/cell/base.hbs
+++ b/addon/components/table/cell/base.hbs
@@ -7,6 +7,6 @@
         {{/if}}
     </span>
     {{#if @column.showOnlineIndicator}}
-        <FaIcon @icon="circle" class="absolute left-0 top-0 {{if (get @row (or @onlineColumn 'online')) "text-green-500" "text-yellow-200"}}" />
+        <FaIcon @icon="circle" class="absolute left-0 top-0 {{if (get @row (or @onlineColumn 'online')) 'text-green-500' 'text-yellow-200'}}" />
     {{/if}}
 </div>
\ No newline at end of file
diff --git a/addon/components/table/cell/driver-name.hbs b/addon/components/table/cell/driver-name.hbs
index f41b045..440970c 100644
--- a/addon/components/table/cell/driver-name.hbs
+++ b/addon/components/table/cell/driver-name.hbs
@@ -1,10 +1,10 @@
 {{#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" />
+        <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)}}>
             <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"}}" />
+        <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'}}" />
     </div>
 {{else}}
     <div class="flex items-center">
diff --git a/addon/components/table/cell/dropdown.hbs b/addon/components/table/cell/dropdown.hbs
index e306c5c..66e32a0 100644
--- a/addon/components/table/cell/dropdown.hbs
+++ b/addon/components/table/cell/dropdown.hbs
@@ -1,5 +1,14 @@
 <div class="cell-dropdown-button overflow-visible {{@column.wrapperClass}}" {{did-insert this.setupComponent}} ...attributes>
-    <DropdownButton @icon={{@column.ddButtonIcon}} @iconPrefix={{@column.ddButtonIconPrefix}} @text={{this.buttonText}} @size="xs" @horizontalPosition="left" @calculatePosition={{this.calculatePosition}} @renderInPlace={{true}} as |dd|>
+    <DropdownButton
+        @icon={{@column.ddButtonIcon}}
+        @iconPrefix={{@column.ddButtonIconPrefix}}
+        @text={{this.buttonText}}
+        @size="xs"
+        @horizontalPosition="left"
+        @calculatePosition={{this.calculatePosition}}
+        @renderInPlace={{true}}
+        as |dd|
+    >
         <div class="next-dd-menu mt-0i" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
             {{#if @column.ddMenuLabel}}
                 <div class="px-1">
diff --git a/addon/components/table/cell/link-to.hbs b/addon/components/table/cell/link-to.hbs
index aaefb45..3c000f7 100644
--- a/addon/components/table/cell/link-to.hbs
+++ b/addon/components/table/cell/link-to.hbs
@@ -1,7 +1,15 @@
 <LinkTo @route={{@column.route}} @model={{@row}} class={{@column.linkClass}} ...attributes>
     {{#if @column.linkIcon}}
         <span class="btn-icon-wrapper" data-icon-prefix={{@column.linkIconPrefix}}>
-            <FaIcon @prefix={{@column.linkIconPrefix}} @icon={{@column.linkIcon}} @size={{@column.linkIconSize}} @rotation={{@column.linkIconRotation}} @flip={{@column.linkIconFlip}} @spin={{@column.linkIconSpin}} class={{@column.linkIconClass}} />
+            <FaIcon
+                @prefix={{@column.linkIconPrefix}}
+                @icon={{@column.linkIcon}}
+                @size={{@column.linkIconSize}}
+                @rotation={{@column.linkIconRotation}}
+                @flip={{@column.linkIconFlip}}
+                @spin={{@column.linkIconSpin}}
+                class={{@column.linkIconClass}}
+            />
         </span>
     {{/if}}
     {{#if (has-block)}}
diff --git a/addon/components/table/cell/media-name.hbs b/addon/components/table/cell/media-name.hbs
index d51d291..77de558 100644
--- a/addon/components/table/cell/media-name.hbs
+++ b/addon/components/table/cell/media-name.hbs
@@ -1,5 +1,5 @@
 <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"}}" />
+    <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}}>
             {{#if (has-block)}}
@@ -12,6 +12,6 @@
         </a>
     </span>
     {{#if @column.showOnlineIndicator}}
-        <FaIcon @icon="circle" class="absolute left-0 top-0 {{if @row.online "text-green-500" "text-yellow-200"}}" />
+        <FaIcon @icon="circle" class="absolute left-0 top-0 {{if @row.online 'text-green-500' 'text-yellow-200'}}" />
     {{/if}}
 </div>
\ No newline at end of file
diff --git a/addon/components/table/cell/resizer.hbs b/addon/components/table/cell/resizer.hbs
index f2d1060..3ad359d 100644
--- a/addon/components/table/cell/resizer.hbs
+++ b/addon/components/table/cell/resizer.hbs
@@ -1 +1 @@
-<div class="resizer" {{did-insert this.setupComponent}} {{on "mousedown" this.onMouseDown}} />
\ No newline at end of file
+<div class="resizer" {{did-insert this.setupComponent}} {{on "mousedown" this.onMouseDown}}></div>
\ No newline at end of file
diff --git a/addon/components/table/cell/vehicle-name.hbs b/addon/components/table/cell/vehicle-name.hbs
index e12eaf8..fb70799 100644
--- a/addon/components/table/cell/vehicle-name.hbs
+++ b/addon/components/table/cell/vehicle-name.hbs
@@ -1,5 +1,11 @@
 <div class="relative flex items-center">
-    <Image src={{this.mediaUrl}} @fallbackSrc={{config "defaultValues.vehicleAvatar"}} data-vehicle={{@row.id}} alt={{this.altText}} class="w-6 h-6 rounded-md {{if @column.hasOnline "mx-2" "mr-2"}}" />
+    <Image
+        src={{this.mediaUrl}}
+        @fallbackSrc={{config "defaultValues.vehicleAvatar"}}
+        data-vehicle={{@row.id}}
+        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}}>
             {{#if (has-block)}}
@@ -12,6 +18,6 @@
         </a>
     </span>
     {{#if @column.showOnlineIndicator}}
-        <FaIcon @icon="circle" class="absolute left-0 top-0 {{if @row.online "text-green-500" "text-yellow-200"}}" />
+        <FaIcon @icon="circle" class="absolute left-0 top-0 {{if @row.online 'text-green-500' 'text-yellow-200'}}" />
     {{/if}}
 </div>
\ No newline at end of file
diff --git a/addon/components/table/foot.hbs b/addon/components/table/foot.hbs
index 21bdfb1..740fbc7 100644
--- a/addon/components/table/foot.hbs
+++ b/addon/components/table/foot.hbs
@@ -1 +1,3 @@
-<tfoot ...attributes {{vertical-offset-by "bottom" offset=@tfootVerticalOffset elements=@tfootVerticalOffsetElements}}>{{yield}}</tfoot>
\ No newline at end of file
+{{#if this.ready}}
+    <tfoot ...attributes {{vertical-offset-by "bottom" offset=this.tfootVerticalOffset elements=this.tfootVerticalOffsetElements}}>{{yield}}</tfoot>
+{{/if}}
\ No newline at end of file
diff --git a/addon/components/table/foot.js b/addon/components/table/foot.js
index beda022..5198a87 100644
--- a/addon/components/table/foot.js
+++ b/addon/components/table/foot.js
@@ -1,3 +1,53 @@
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { isBlank } from '@ember/utils';
+import { later } from '@ember/runloop';
 
-export default class TableFootComponent extends Component {}
+export default class TableFootComponent extends Component {
+    @tracked tfootVerticalOffset;
+    @tracked tfootVerticalOffsetElements;
+    @tracked ready;
+
+    constructor(owner, { tfootVerticalOffset, tfootVerticalOffsetElements }) {
+        super(...arguments);
+
+        this.tfootVerticalOffsetElements = tfootVerticalOffsetElements;
+        this.tfootVerticalOffset = tfootVerticalOffset;
+
+        later(
+            this,
+            () => {
+                if (isBlank(this.tfootVerticalOffsetElements) && isBlank(this.tfootVerticalOffset)) {
+                    this.tfootVerticalOffset = this.calculateTableFooterVerticalOffset();
+                }
+
+                this.ready = true;
+            },
+            0
+        );
+    }
+
+    calculateTableFooterVerticalOffset() {
+        const offsetElements = ['#next-view-section-subheader', '.next-table-wrapper > table > thead'];
+        const offsetContant = 7;
+        let calculatedOffset = 0;
+
+        for (let i = 0; i < offsetElements.length; i++) {
+            const element = offsetElements.objectAt(i);
+
+            if (element instanceof HTMLElement) {
+                calculatedOffset += element.offsetHeight;
+            }
+
+            if (typeof element === 'string') {
+                const foundElement = document.querySelector(element);
+
+                if (foundElement instanceof HTMLElement) {
+                    calculatedOffset += foundElement.offsetHeight;
+                }
+            }
+        }
+
+        return calculatedOffset + offsetContant;
+    }
+}
diff --git a/addon/components/tabs.hbs b/addon/components/tabs.hbs
index d4bf3a5..3f0f72b 100644
--- a/addon/components/tabs.hbs
+++ b/addon/components/tabs.hbs
@@ -2,5 +2,5 @@
     <ul class="nav nav-tabs" role="tablist">
         {{yield (component "tabs/tab" tabsId=this.id activeTab=this.activeTab onClick=this.onClick onCreated=this.onCreated)}}
     </ul>
-    <div id={{this.id}} class="tab-content {{or @tagContentClass ""}}"></div>
+    <div id={{this.id}} class="tab-content {{or @tagContentClass ''}}"></div>
 </div>
\ No newline at end of file
diff --git a/addon/components/tabs/tab.hbs b/addon/components/tabs/tab.hbs
index c7d4eae..280bfa9 100644
--- a/addon/components/tabs/tab.hbs
+++ b/addon/components/tabs/tab.hbs
@@ -1,11 +1,11 @@
-<li class="nav-item {{if this.isActive "active"}} {{or @tabListItemClass ""}}">
-    <a href="javascript:;" class="nav-link {{or @tabClass ""}} {{this.activeTabClass}}" {{on "click" this.onClick}}>
+<li class="nav-item {{if this.isActive 'active'}} {{or @tabListItemClass ''}}">
+    <a href="javascript:;" class="nav-link {{or @tabClass ''}} {{this.activeTabClass}}" {{on "click" this.onClick}}>
         <span>{{@title}}</span>
     </a>
 </li>
 {{#if this.isActive}}
     <EmberWormhole @to={{@tabsId}}>
-        <div class="ui-tab-pane tab-pane fade {{or @tagPaneClass ""}} {{this.activePaneClass}}" role="tabpanel" ...attributes>
+        <div class="ui-tab-pane tab-pane fade {{or @tagPaneClass ''}} {{this.activePaneClass}}" role="tabpanel" ...attributes>
             {{yield}}
         </div>
     </EmberWormhole>
diff --git a/addon/components/timeline.hbs b/addon/components/timeline.hbs
index 6bbbcca..3e61dea 100644
--- a/addon/components/timeline.hbs
+++ b/addon/components/timeline.hbs
@@ -15,7 +15,12 @@
 
     <div class="timeline-controls {{@controlsClass}}">
         <div class="timeline-controls-button-wrapper">
-            <button class="timeline-arrow-right {{@arrowClass}} {{@arrowRightClass}}" disabled={{eq this.endIndex (sub @activity.length 1)}} type="button" {{on "click" this.next}}>&rarr;</button>
+            <button
+                class="timeline-arrow-right {{@arrowClass}} {{@arrowRightClass}}"
+                disabled={{eq this.endIndex (sub @activity.length 1)}}
+                type="button"
+                {{on "click" this.next}}
+            >&rarr;</button>
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/addon/components/toggle.hbs b/addon/components/toggle.hbs
index b4592e9..63f1520 100644
--- a/addon/components/toggle.hbs
+++ b/addon/components/toggle.hbs
@@ -1,11 +1,18 @@
 <div class="flex items-center {{@wrapperClass}}" {{did-update this.onChange @isToggled}}>
-    <span role="checkbox" tabindex="0" aria-checked="false" class="relative inline-flex items-center justify-center flex-shrink-0 w-10 h-5 cursor-pointer group focus:outline-none {{if @disabled 'opacity-50'}}" ...attributes {{on "click" (fn this.toggle this.isToggled)}}>
-        <span aria-hidden="true" class="{{if this.isToggled this.activeColorClass " bg-gray-200"}} absolute h-4 w-9 mx-auto
-            rounded-full transition-colors ease-in-out duration-200"></span>
-        <span aria-hidden="true" class="{{
-            if @isToggled " translate-x-5" "translate-x-0" }} absolute left-0 inline-block h-5 w-5 border
-            border-gray-200 rounded-full bg-white shadow transform group-focus:shadow-outline
-            group-focus:border-blue-300 transition-transform ease-in-out duration-200"></span>
+    <span
+        role="checkbox"
+        tabindex="0"
+        aria-checked="false"
+        class="relative inline-flex items-center justify-center flex-shrink-0 w-10 h-5 cursor-pointer group focus:outline-none {{if @disabled 'opacity-50'}}"
+        ...attributes
+        {{on "click" (fn this.toggle this.isToggled)}}
+    >
+        <span aria-hidden="true" class="{{if this.isToggled this.activeColorClass ' bg-gray-200'}} absolute h-4 w-9 mx-auto rounded-full transition-colors ease-in-out duration-200"></span>
+        <span
+            aria-hidden="true"
+            class="{{if @isToggled ' translate-x-5' 'translate-x-0'}}
+                absolute left-0 inline-block h-5 w-5 border border-gray-200 rounded-full bg-white shadow transform group-focus:shadow-outline group-focus:border-blue-300 transition-transform ease-in-out duration-200"
+        ></span>
     </span>
     <div class="flex items-center">
         {{yield}}
@@ -14,8 +21,8 @@
         {{/if}}
         {{#if @helpText}}
             <div class={{if @label "ml-2"}}>
-                <FaIcon @icon={{or @icon "info-circle" }} class="text-gray-300 dark:text-gray-100 {{@iconClass}}" />
-                <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPlacement "right" }}>
+                <FaIcon @icon={{or @icon "info-circle"}} class="text-gray-300 dark:text-gray-100 {{@iconClass}}" />
+                <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPlacement "right"}}>
                     <InputInfo @text={{@helpText}} @exampleText={{@exampleText}} />
                 </Attach::Tooltip>
             </div>
diff --git a/addon/components/unit-input.hbs b/addon/components/unit-input.hbs
index 2b759ee..8091232 100644
--- a/addon/components/unit-input.hbs
+++ b/addon/components/unit-input.hbs
@@ -1,9 +1,19 @@
 <div class="ui-unit-input {{@wrapperClass}}">
     <div class="flex rounded-md shadow-sm">
         <Input @type="tel" @value={{@value}} class="form-input rounded-r-none" placeholder={{this.placeholder}} ...attributes />
-        <span class="shadow-sm inline-flex items-center px-3 border rounded-r-lg border-gray-300 bg-gray-50 text-gray-500 dark:border-gray-900 dark:bg-gray-800 dark:text-gray-200 sm:text-sm">
+        <span
+            class="shadow-sm inline-flex items-center px-3 border rounded-r-lg border-gray-300 bg-gray-50 text-gray-500 dark:border-gray-900 dark:bg-gray-800 dark:text-gray-200 sm:text-sm"
+        >
             {{#if @canSelectUnit}}
-                <PowerSelect class="unit-input-selector" @renderInPlace={{true}} @options={{this.units}} @selected={{this.selectedUnitObject}} @onChange={{this.setUnit}} @triggerComponent={{component "unit-input/unit-handle" unit=this.selectedUnitObject}} as |unit|>
+                <PowerSelect
+                    class="unit-input-selector"
+                    @renderInPlace={{true}}
+                    @options={{this.units}}
+                    @selected={{this.selectedUnitObject}}
+                    @onChange={{this.setUnit}}
+                    @triggerComponent={{component "unit-input/unit-handle" unit=this.selectedUnitObject}}
+                    as |unit|
+                >
                     <div class="truncate flex items-center space-x-1">
                         <span>{{unit.name}}</span>
                         <span class="italic">({{unit.value}})</span>
@@ -12,6 +22,6 @@
             {{else}}
                 <span>{{this.unit}}</span>
             {{/if}}
-         </span>
+        </span>
     </div>
 </div>
\ No newline at end of file
diff --git a/addon/components/upload-button.hbs b/addon/components/upload-button.hbs
index 6624cb1..7bc2e4e 100644
--- a/addon/components/upload-button.hbs
+++ b/addon/components/upload-button.hbs
@@ -1,14 +1,18 @@
 <FileUpload @name={{@name}} @accept={{@accept}} @onFileAdded={{@onFileAdded}} @labelClass={{@labelClass}} 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'}}" ...attributes>
+    <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'}}"
+        ...attributes
+    >
         {{#if queue.files.length}}
             <Spinner class={{unless @hideButtonText "mr-2"}} />
             {{#unless @hideButtonText}}
-            <span>
-                Uploading...
-            </span>
+                <span>
+                    Uploading...
+                </span>
             {{/unless}}
         {{else}}
-            <FaIcon @icon={{or @icon "image"}} class="{{@iconClass}} {{unless @hideButtonText "mr-2"}}" />
+            <FaIcon @icon={{or @icon "image"}} class="{{@iconClass}} {{unless @hideButtonText 'mr-2'}}" />
             {{#unless @hideButtonText}}
                 <span>
                     {{or @buttonText "Upload new"}}
diff --git a/addon/components/visible-column-picker.hbs b/addon/components/visible-column-picker.hbs
index 6b4df62..518be74 100644
--- a/addon/components/visible-column-picker.hbs
+++ b/addon/components/visible-column-picker.hbs
@@ -1,4 +1,24 @@
-<DropdownButton @text={{or @text "Columns"}} @icon={{or @icon "sliders-h"}} @type={{@type}} @size={{or @size "xs"}} @buttonClass={{@buttonClass}} @buttonWrapperClass={{@buttonWrapperClass}} @triggerClass={{@triggerClass}} @wrapperClass={{@wrapperClass}} @renderInPlace={{@renderInPlace}} @registerAPI={{@registerAPI}} @horizontalPosition={{@horizontalPosition}} @verticalPosition={{@verticalPosition}} @calculatePosition={{@calculatePosition}} @defaultClass={{@defaultClass}} @matchTriggerWidth={{@matchTriggerWidth}} @onOpen={{@onOpen}} @onClose={{@onClose}} ...attributes as |dd|>
+<DropdownButton
+    @text={{or @text "Columns"}}
+    @icon={{or @icon "sliders-h"}}
+    @type={{@type}}
+    @size={{or @size "xs"}}
+    @buttonClass={{@buttonClass}}
+    @buttonWrapperClass={{@buttonWrapperClass}}
+    @triggerClass={{@triggerClass}}
+    @wrapperClass={{@wrapperClass}}
+    @renderInPlace={{@renderInPlace}}
+    @registerAPI={{@registerAPI}}
+    @horizontalPosition={{@horizontalPosition}}
+    @verticalPosition={{@verticalPosition}}
+    @calculatePosition={{@calculatePosition}}
+    @defaultClass={{@defaultClass}}
+    @matchTriggerWidth={{@matchTriggerWidth}}
+    @onOpen={{@onOpen}}
+    @onClose={{@onClose}}
+    ...attributes
+    as |dd|
+>
     <div class="customize-columns-dropdown-container">
         <div class="customize-columns-dropdown-header justify-between">
             <h4>{{or @dropdownHeaderText "Customize Columns"}}</h4>
diff --git a/addon/modifiers/vertical-offset-by.js b/addon/modifiers/vertical-offset-by.js
index 04312af..c6495ff 100644
--- a/addon/modifiers/vertical-offset-by.js
+++ b/addon/modifiers/vertical-offset-by.js
@@ -4,7 +4,7 @@ import { isBlank } from '@ember/utils';
 import { later } from '@ember/runloop';
 import numbersOnly from '../utils/numbers-only';
 
-function calculateOffset(offset, elements) {
+function calculateOffset(offset = 0, elements) {
     let calculatedOffset = 0;
 
     if (offset) {
@@ -16,14 +16,14 @@ function calculateOffset(offset, elements) {
             const element = elements.objectAt(i);
 
             if (element instanceof HTMLElement) {
-                calculatedOffset += parseInt(numbersOnly(element.offsetHeight));
+                calculatedOffset += element.offsetHeight;
             }
 
             if (typeof element === 'string') {
                 const foundElement = document.querySelector(element);
 
                 if (foundElement instanceof HTMLElement) {
-                    calculatedOffset += parseInt(numbersOnly(foundElement.offsetHeight));
+                    calculatedOffset += foundElement.offsetHeight;
                 }
             }
         }
@@ -61,6 +61,6 @@ export default modifier(function verticalOffsetBy(element, [direction = 'bottom'
         () => {
             element.style[direction] = `${calculatedOffset}px`;
         },
-        100
+        0
     );
 });
diff --git a/addon/styles/components/input.css b/addon/styles/components/input.css
index 5b18fd7..1db5a5b 100644
--- a/addon/styles/components/input.css
+++ b/addon/styles/components/input.css
@@ -500,7 +500,7 @@ body[data-theme='dark'] .iti__dropdown-content {
     line-height: 1.25rem;
 }
 
-body[data-theme="dark"] .iti__selected-dial-code {
+body[data-theme='dark'] .iti__selected-dial-code {
     color: #fff;
 }
 
diff --git a/addon/styles/components/otp-input.css b/addon/styles/components/otp-input.css
index 21b3f07..9f54e10 100644
--- a/addon/styles/components/otp-input.css
+++ b/addon/styles/components/otp-input.css
@@ -1,29 +1,64 @@
 .otp-input-container {
+    position: relative;
+    width: 100%;
+    padding: 0 2rem;
     display: flex;
-    justify-content: space-between;
-    width: 400px;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    line-height: 1.5rem;
+    letter-spacing: 1rem;
+    text-align: center;
+    font-family: monospace;
 }
 
-.otp-input-container input {
-    width: 68px;
-    height: 68px;
-    font-size: 24px;
+.otp-input-container > .otp-input-placeholder {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.72rem;
+    line-height: 1.5rem;
+    letter-spacing: 1.1rem;
+    color: #6b7280;
+    opacity: 0.5; 
     text-align: center;
+    font-family: monospace;
+    pointer-events: none;
+    background-color: transparent;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    width: 100%;
+    overflow: hidden;
+}
+
+body[data-theme="dark"] > input.otp-input,
+.otp-input-container > input.otp-input,
+.otp-input-container > input {
+    text-align: center;
+    font-family: monospace;
+    font-size: 1.5rem;
+    line-height: 1.5rem;
+    letter-spacing: 1rem;
     border: 3px solid #3498db;
-    border-radius: 8px;
-    background-color: #2c3e50;
     color: #ecf0f1;
-    margin: 0;
     transition: all 0.3s ease;
 }
 
+body[data-theme="dark"] > input.otp-input::placeholder,
+.otp-input-container > input.otp-input::placeholder,
+.otp-input-container > input::placeholder {
+    color: rgba(107, 114, 128, 0.5);
+    letter-spacing: 1rem;
+}
+
 .otp-input-container input:focus {
     outline: none;
     border-color: #2980b9;
-    transform: scale(1.1);
 }
 
 .otp-input-container input:hover {
-    transform: scale(1.1);
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 }
diff --git a/addon/styles/layout/next.css b/addon/styles/layout/next.css
index cfccb7a..0fb7390 100644
--- a/addon/styles/layout/next.css
+++ b/addon/styles/layout/next.css
@@ -1076,12 +1076,23 @@ body[data-theme='dark'] .next-content-panel-wrapper .next-content-panel-containe
 
 .next-view-section-footer,
 .next-view-section-subheader {
-    @apply grid grid-cols-2 min-w-full max-w-full border-b border-gray-200 dark:border-gray-700;
+    @apply border-gray-200 dark:border-gray-700;
+    border-bottom-width: 1px;
+    display: flex;
+    min-width: 100%;
+    max-width: 100%;
+    width: 100%;
     box-align: center;
     padding: 0px 24px 0px 36px;
     height: 57px;
 }
 
+.next-view-section-subheader,
+.next-view-section-footer.next-view-section-footer-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
 .next-view-section-footer {
     @apply border-b-0 border-t sticky bottom-0 inset-x-0 dark:bg-gray-900;
 }
@@ -1097,6 +1108,10 @@ body[data-theme='dark'] .next-content-panel-wrapper .next-content-panel-containe
     align-items: center;
 }
 
+.next-view-section-subheader .next-view-section-subheader-left .next-view-section-subheader-left-inner-wrapper {
+    min-width: 100px;
+}
+
 .next-view-section-subheader .next-view-section-subheader-actions {
     flex: 1;
     display: flex;
@@ -1455,7 +1470,7 @@ body[data-theme='dark'] .next-table-wrapper .tfoot-row > td {
     position: fixed;
     right: 0;
     bottom: 0;
-    padding-bottom: 8px;
+    padding-bottom: 11px;
     padding-right: 24px;
 }
 
diff --git a/addon/styles/layout/reset.css b/addon/styles/layout/reset.css
index 98d7e69..8a6c954 100644
--- a/addon/styles/layout/reset.css
+++ b/addon/styles/layout/reset.css
@@ -4,3 +4,34 @@
     margin-inline-start: 0;
     margin-inline-end: 0;
 }
+
+body {
+    --sb-track-color: #111827;
+    --sb-thumb-color: #374151;
+    --sb-thumb-hover-color: rgba(55, 65, 81, .5);
+    --sb-size: 7px;
+}
+
+::-webkit-scrollbar {
+    width: var(--sb-size);
+}
+
+::-webkit-scrollbar-track {
+    background: var(--sb-track-color);
+    border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--sb-thumb-color);
+    border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--sb-thumb-hover-color);
+}
+
+@supports not selector(::-webkit-scrollbar) {
+    body {
+        scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
+    }
+}
diff --git a/app/components/modals/import-form.js b/app/components/modals/import-form.js
new file mode 100644
index 0000000..00d50c5
--- /dev/null
+++ b/app/components/modals/import-form.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/components/modals/import-form';
diff --git a/package.json b/package.json
index 59c2b63..7e96e88 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@fleetbase/ember-ui",
-    "version": "0.2.15",
+    "version": "0.2.16",
     "description": "Fleetbase UI provides all the interface components, helpers, services and utilities for building a Fleetbase extension into the Console.",
     "keywords": [
         "fleetbase-ui",
diff --git a/tests/integration/components/modals/import-form-test.js b/tests/integration/components/modals/import-form-test.js
new file mode 100644
index 0000000..91f3ed6
--- /dev/null
+++ b/tests/integration/components/modals/import-form-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 | modals/import-form', 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`<Modals::ImportForm />`);
+
+        assert.dom().hasText('');
+
+        // Template block usage:
+        await render(hbs`
+      <Modals::ImportForm>
+        template block text
+      </Modals::ImportForm>
+    `);
+
+        assert.dom().hasText('template block text');
+    });
+});