diff --git a/addon/components/content-panel.hbs b/addon/components/content-panel.hbs
index 8fea000..ccb2811 100644
--- a/addon/components/content-panel.hbs
+++ b/addon/components/content-panel.hbs
@@ -44,19 +44,61 @@
                     </div>
                 </a>
                 <div class="next-content-panel-header-right {{@panelHeaderRightClass}}">
-                    {{#if @prefixTitleRight}}
-                        <div class={{@prefixTitleRightContainerClass}}>
-                            <span class="text-xs {{@prefixTitleRightClass}}">{{@prefixTitleRight}}</span>
-                        </div>
-                    {{/if}}
-                    {{#if @titleStatusRight}}
-                        <span class="ml-2 {{@titleStatusRightContainerClass}}">
-                            <Badge @status={{@titleStatusRight}} @hideStatusDot={{@hideStatusDot}} class={{@titleStatusRightClass}} @disableHumanize={{@disableTitleStatusRightHumanize}} />
-                        </span>
+                    {{#if @titleRightSideComponent}}
+                        {{component @titleRightSideComponent context=@titleRightSideComponentContext}}
+                    {{else}}
+                        {{#if @prefixTitleRight}}
+                            <div class={{@prefixTitleRightContainerClass}}>
+                                <span class="text-xs {{@prefixTitleRightClass}}">{{@prefixTitleRight}}</span>
+                            </div>
+                        {{/if}}
+                        {{#if @titleStatusRight}}
+                            <span class="ml-2 {{@titleStatusRightContainerClass}}">
+                                {{#if @titleStatusRightText}}
+                                    <Badge @status={{@titleStatusRight}} @hideStatusDot={{@hideRightTitleStatusDot}} class={{@titleStatusRightClass}} @disableHumanize={{@disableTitleStatusRightHumanize}}>
+                                        {{@titleStatusRightText}}
+                                    </Badge>
+                                {{else}}
+                                    <Badge @status={{@titleStatusRight}} @hideStatusDot={{@hideRightTitleStatusDot}} class={{@titleStatusRightClass}} @disableHumanize={{@disableTitleStatusRightHumanize}} />
+                                {{/if}}
+                            </span>
+                        {{/if}}
+                        {{#each @actionButtons as |button|}}
+                            <Button @type={{button.type}} @text={{button.text}} @icon={{button.icon}} @size={{button.size}} @iconPrefix={{button.iconPrefix}} @onClick={{button.onClick}} />
+                        {{/each}}
+                        {{#if @dropdownButton}}
+                            <DropdownButton @icon={{or @dropdownButtonIcon "ellipsis"}} @iconPrefix={{@dropdownButtonIconPrefix}} @text={{@dropdownButtonText}} @size="xs" @horizontalPosition="left" @calculatePosition={{@dropdownButtonCalculatePosition}} @renderInPlace={{or @dropdownButtonRenderInPlace true}} as |dd|>
+                                <div class="next-dd-menu mt-0i" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
+                                    {{#if @dropdownButtonMenuLabel}}
+                                        <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">
+                                                {{@dropdownButtonMenuLabel}}
+                                            </div>
+                                        </div>
+                                        <div class="next-dd-menu-seperator"></div>
+                                    {{/if}}
+                                    {{#each @dropdownButtonActions as |action|}}
+                                        {{#if action.separator}}
+                                            <div class="next-dd-menu-seperator"></div>
+                                        {{else}}
+                                            {{#if (is-dd-item-visible action.context action.isVisible)}}
+                                                <div role="group" class="px-1">
+                                                    <a href="javascript:;" role="menuitem" class="next-dd-item {{action.class}}" {{on "click" (fn this.onDropdownItemClick action dd)}}>
+                                                        {{#if action.icon}}
+                                                            <span class="mr-1">
+                                                                <FaIcon class={{action.iconClass}} @icon={{action.icon}} @prefix={{action.iconPrefix}} />
+                                                            </span>
+                                                        {{/if}}
+                                                        {{action.label}}
+                                                    </a>
+                                                </div>
+                                            {{/if}}
+                                        {{/if}}
+                                    {{/each}}
+                                </div>
+                            </DropdownButton>
+                        {{/if}}
                     {{/if}}
-                    {{#each @actionButtons as |button|}}
-                        <Button @type={{button.type}} @text={{button.text}} @icon={{button.icon}} @size={{button.size}} @iconPrefix={{button.iconPrefix}} @onClick={{button.onClick}} />
-                    {{/each}}
                 </div>
             </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'}}">
diff --git a/addon/components/content-panel.js b/addon/components/content-panel.js
index 621185f..b5d4fdd 100644
--- a/addon/components/content-panel.js
+++ b/addon/components/content-panel.js
@@ -26,4 +26,18 @@ export default class ContentPanelComponent extends Component {
     @action close() {
         this.isOpen = false;
     }
+
+    @action onDropdownItemClick(action, dd) {
+        if (typeof dd.actions === 'object' && typeof dd.actions.close === 'function') {
+            dd.actions.close();
+        }
+
+        if (typeof action.fn === 'function') {
+            action.fn(action.context);
+        }
+
+        if (typeof action.onClick === 'function') {
+            action.onClick(action.context);
+        }
+    }
 }
diff --git a/addon/components/dropdown-button.hbs b/addon/components/dropdown-button.hbs
index 1fee8d8..4d5cfcc 100644
--- a/addon/components/dropdown-button.hbs
+++ b/addon/components/dropdown-button.hbs
@@ -1,4 +1,4 @@
-<BasicDropdown class={{@wrapperClass}} @renderInPlace={{@renderInPlace}} @registerAPI={{@registerAPI}} @horizontalPosition={{@horizontalPosition}} @verticalPosition={{@verticalPosition}} @calculatePosition={{@calculatePosition}} @defaultClass={{@defaultClass}} @matchTriggerWidth={{@matchTriggerWidth}} @onOpen={{@onOpen}} @onClose={{@onClose}} as |dd|>
+<BasicDropdown class={{@wrapperClass}} @renderInPlace={{@renderInPlace}} @registerAPI={{@registerAPI}} @horizontalPosition={{@horizontalPosition}} @verticalPosition={{@verticalPosition}} @calculatePosition={{@calculatePosition}} @defaultClass={{@defaultClass}} @matchTriggerWidth={{@matchTriggerWidth}} @onOpen={{@onOpen}} @onClose={{@onClose}} {{did-insert this.onInsert}} as |dd|>
     <dd.Trigger class={{@triggerClass}}>
         {{#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}}
diff --git a/addon/components/dropdown-button.js b/addon/components/dropdown-button.js
index e05af6a..e951bc3 100644
--- a/addon/components/dropdown-button.js
+++ b/addon/components/dropdown-button.js
@@ -1,5 +1,5 @@
 import Component from '@glimmer/component';
-import { computed } from '@ember/object';
+import { computed, action } from '@ember/object';
 import { isBlank } from '@ember/utils';
 
 export default class DropdownButtonComponent extends Component {
@@ -32,4 +32,15 @@ export default class DropdownButtonComponent extends Component {
 
         return isBlank(buttonComponentArgs) || typeof buttonComponentArgs !== 'object' ? {} : buttonComponentArgs;
     }
+
+    /**
+     * Trigger callback when dropdown button node is inserted to dom.
+     *
+     * @memberof DropdownButtonComponent
+     */
+    @action onInsert() {
+        if (typeof this.args.onInsert === 'function') {
+            this.args.onInsert(...arguments);
+        }
+    }
 }
diff --git a/addon/components/layout/sidebar/item.hbs b/addon/components/layout/sidebar/item.hbs
index f1ddc0f..8669837 100644
--- a/addon/components/layout/sidebar/item.hbs
+++ b/addon/components/layout/sidebar/item.hbs
@@ -1,8 +1,58 @@
-<a href="javascript:;" class="next-nav-item {{if this.active 'active'}}" {{on "click" this.onClick}} ...attributes>
+<a href="javascript:;" class="next-nav-item {{if this.active 'active'}} {{if @dropdownButton 'next-nav-item-with-dropdown'}}" {{on "click" this.onClick}} ...attributes>
     <div class="next-nav-item-icon-container {{@iconWrapperClass}}">
         {{#if @icon}}
             <FaIcon @prefix={{@iconPrefix}} @icon={{@icon}} @size={{or @iconSize "xs"}} class={{@iconClass}} />
         {{/if}}
     </div>
     <div class="truncate w-10/12 {{@itemWrapperClass}}">{{yield}}</div>
+    <div class="next-nav-item-right-side {{@itemRightSideContainerClass}}">
+        {{#if @rightSideComponent}}
+            {{component @rightSideComponent context=@rightSideComponentContext}}
+        {{else}}
+            {{#if @rightSideStatus}}
+                <span class="ml-2 {{@rightSideStatusContainerClass}}">
+                    {{#if @rightSideStatusText}}
+                        <Badge @status={{@rightSideStatus}} @hideStatusDot={{@hideRightSideStatusDot}} class={{@rightSideStatusClass}} @disableHumanize={{@disableRightSideStatusHumanize}}>
+                            {{@rightSideStatusText}}
+                        </Badge>
+                    {{else}}
+                        <Badge @status={{@rightSideStatus}} @hideStatusDot={{@hideRightSideStatusDot}} class={{@rightSideStatusClass}} @disableHumanize={{@disableRightSideStatusHumanize}} />
+                    {{/if}}
+                </span>
+            {{/if}}
+            {{#if @dropdownButton}}
+                <DropdownButton @icon={{or @dropdownButtonIcon "ellipsis"}} @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.onInsert}} as |dd|>
+                    <div class="next-dd-menu mt-0i" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
+                        {{#if @dropdownButtonMenuLabel}}
+                            <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">
+                                    {{@dropdownButtonMenuLabel}}
+                                </div>
+                            </div>
+                            <div class="next-dd-menu-seperator"></div>
+                        {{/if}}
+                        {{#each @dropdownButtonActions as |action|}}
+                            {{#if action.separator}}
+                                <div class="next-dd-menu-seperator"></div>
+                            {{else}}
+                                {{#if (is-dd-item-visible action.context action.isVisible)}}
+                                    <div role="group" class="px-1">
+                                        {{!-- 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">
+                                                    <FaIcon class={{action.iconClass}} @icon={{action.icon}} @prefix={{action.iconPrefix}} />
+                                                </span>
+                                            {{/if}}
+                                            {{action.label}}
+                                        </a>
+                                    </div>
+                                {{/if}}
+                            {{/if}}
+                        {{/each}}
+                    </div>
+                </DropdownButton>
+            {{/if}}
+        {{/if}}
+    </div>
 </a>
\ No newline at end of file
diff --git a/addon/components/layout/sidebar/item.js b/addon/components/layout/sidebar/item.js
index 211b1dd..ea6f28a 100644
--- a/addon/components/layout/sidebar/item.js
+++ b/addon/components/layout/sidebar/item.js
@@ -9,6 +9,7 @@ export default class LayoutSidebarItemComponent extends Component {
     @service router;
     @service hostRouter;
     @tracked active;
+    @tracked dropdownButtonNode;
 
     constructor() {
         super(...arguments);
@@ -41,6 +42,11 @@ export default class LayoutSidebarItemComponent extends Component {
     }
 
     @action onClick(event) {
+        if (this.isPointerWithinDropdownButton(event)) {
+            event.preventDefault();
+            return;
+        }
+
         const { url, target, route, model, onClick, options } = this.args;
         const router = this.getRouter();
         const anchor = event.target?.closest('a');
@@ -78,6 +84,36 @@ export default class LayoutSidebarItemComponent extends Component {
         }
     }
 
+    @action onDropdownItemClick(action, dd) {
+        if (typeof dd.actions === 'object' && typeof dd.actions.close === 'function') {
+            dd.actions.close();
+        }
+
+        if (typeof action.fn === 'function') {
+            action.fn(action.context);
+        }
+
+        if (typeof action.onClick === 'function') {
+            action.onClick(action.context);
+        }
+    }
+
+    @action onInsert(dropdownButtonNode) {
+        this.dropdownButtonNode = dropdownButtonNode;
+
+        if (typeof this.args.onDropdownButtonInsert === 'function') {
+            this.args.onDropdownButtonInsert(...arguments);
+        }
+    }
+
+    isPointerWithinDropdownButton({ target }) {
+        if (this.dropdownButtonNode) {
+            return this.dropdownButtonNode.contains(target);
+        }
+
+        return false;
+    }
+
     getRouter() {
         return this.router ?? this.hostRouter;
     }
diff --git a/addon/components/layout/sidebar/panel.hbs b/addon/components/layout/sidebar/panel.hbs
index 3d59b90..c2abddb 100644
--- a/addon/components/layout/sidebar/panel.hbs
+++ b/addon/components/layout/sidebar/panel.hbs
@@ -1,3 +1,3 @@
-<ContentPanel @title={{@title}} @open={{@open}} @wrapperClass="next-sidebar-panel-container {{@wrapperClass}}" @containerClass="next-sidebar-panel {{@containerClass}}" @panelHeaderClass="next-sidebar-panel-toggle {{@panelHeaderClass}}">
+<ContentPanel @title={{@title}} @open={{@open}} @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}} ...attributes>
     {{yield}}
 </ContentPanel>
\ No newline at end of file
diff --git a/addon/components/pagination.hbs b/addon/components/pagination.hbs
index cdd04e7..d72566c 100644
--- a/addon/components/pagination.hbs
+++ b/addon/components/pagination.hbs
@@ -1,15 +1,30 @@
 <div id="fleetbase-pagination" class="fleetbase-pagination" ...attributes>
     <div id="fleetbase-pagination-button-wrapper" class="flex justify-between flex-1 sm:hidden {{@directionButtonWrapperClass}}">
-        <a href="#" id="fleetbase-pagination-previous-button" class="direction-button {{@directionButtonClass}} {{if this.cannotStepBackward "disabled"}}" disabled={{this.cannotStepBackward}} tabindex="-1" aria-label="Previous" {{on "click" (fn this.incrementPage -1)}}>
+        <a
+            href="#"
+            id="fleetbase-pagination-previous-button"
+            class="direction-button {{@directionButtonClass}} {{if this.cannotStepBackward 'disabled'}}"
+            disabled={{this.cannotStepBackward}}
+            tabindex="-1"
+            aria-label="Previous"
+            {{on "click" (fn this.incrementPage -1)}}
+        >
             Previous
         </a>
-        <a href="#" id="fleetbase-pagination-next-button" class="ml-3 direction-button {{@directionButtonClass}} {{if this.cannotStepForward "disabled"}}" disabled={{this.cannotStepForward}} aria-label="Next" {{on "click" (fn this.incrementPage 1)}}>
+        <a
+            href="#"
+            id="fleetbase-pagination-next-button"
+            class="ml-3 direction-button {{@directionButtonClass}} {{if this.cannotStepForward 'disabled'}}"
+            disabled={{this.cannotStepForward}}
+            aria-label="Next"
+            {{on "click" (fn this.incrementPage 1)}}
+        >
             Next
         </a>
     </div>
-    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between {{@metaInfoWrapperClass}}">
-        <div class={{@metaInfoClass}}>
-            <p class="text-sm leading-5 text-gray-700 pagination-showing {{@metaInfoParagraph}}">
+    <div class="fleetbase-pagination-meta-info-wrapper hidden sm:flex-1 sm:flex sm:items-center sm:justify-between {{@metaInfoWrapperClass}}">
+        <div class={{concat "fleetbase-pagination-meta-info" " " @metaInfoClass}}>
+            <p class="fleetbase-pagination-meta-info-content text-sm leading-5 text-gray-700 pagination-showing {{@metaInfoParagraph}}">
                 Showing
                 <span class="font-medium">
                     {{this.from}}
@@ -25,21 +40,32 @@
                 results
             </p>
         </div>
-        <div class="flex items-center justify-end {{@paginationClass}}">
+       
+        <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}}">
                     <Spinner @iconClass="text-sky-500 fa-spin-800ms {{@loadingIconClass}}" />
                 </div>
             {{/if}}
-            <span class="relative z-0 inline-flex shadow-sm {{@innerPaginationClass}}">
-                <button id="fleetbase-pagination-backward-button" type="button" class="page-item-arrow {{@backwardClass}} {{if this.cannotStepBackward "disabled"}}" disabled={{this.cannotStepBackward}} {{on "click" (fn this.incrementPage -1)}}>
+            <span class="fleetbase-pagination-meta-info-paging-inner relative z-0 inline-flex shadow-sm {{@innerPaginationClass}}">
+                <button
+                    id="fleetbase-pagination-backward-button"
+                    type="button"
+                    class="page-item-arrow {{@backwardClass}} {{if this.cannotStepBackward 'disabled'}}"
+                    disabled={{this.cannotStepBackward}}
+                    {{on "click" (fn this.incrementPage -1)}}
+                >
                     <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-                        <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path>
+                        <path
+                            fill-rule="evenodd"
+                            d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+                            clip-rule="evenodd"
+                        ></path>
                     </svg>
                 </button>
 
                 {{#each this.pageItems as |item|}}
-                    <button type="button" class="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>
                                 ...
@@ -50,9 +76,19 @@
                     </button>
                 {{/each}}
 
-                <button id="fleetbase-pagination-forward-button" type="button" class="page-item-arrow {{@forwardClass}} {{if this.cannotStepForward "disabled"}}" disabled={{this.cannotStepForward}} {{on "click" (fn this.incrementPage 1)}}>
+                <button
+                    id="fleetbase-pagination-forward-button"
+                    type="button"
+                    class="page-item-arrow {{@forwardClass}} {{if this.cannotStepForward 'disabled'}}"
+                    disabled={{this.cannotStepForward}}
+                    {{on "click" (fn this.incrementPage 1)}}
+                >
                     <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-                        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
+                        <path
+                            fill-rule="evenodd"
+                            d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                            clip-rule="evenodd"
+                        ></path>
                     </svg>
                 </button>
             </span>
diff --git a/addon/helpers/is-dd-item-visible.js b/addon/helpers/is-dd-item-visible.js
index 11b3d91..34ec373 100644
--- a/addon/helpers/is-dd-item-visible.js
+++ b/addon/helpers/is-dd-item-visible.js
@@ -1,7 +1,8 @@
 import { helper } from '@ember/component/helper';
+import { isNone } from '@ember/utils';
 
-export default helper(function isDdItemVisible([row, isVisible]) {
-    if (!isVisible) {
+export default helper(function isDdItemVisible([context, isVisible]) {
+    if (isNone(context) || !isVisible) {
         return true;
     }
 
@@ -10,7 +11,7 @@ export default helper(function isDdItemVisible([row, isVisible]) {
     }
 
     if (typeof isVisible === 'function') {
-        return isVisible(row);
+        return isVisible(context);
     }
 
     return true;
diff --git a/addon/styles/components/panel.css b/addon/styles/components/panel.css
index 1f589b6..8c47106 100644
--- a/addon/styles/components/panel.css
+++ b/addon/styles/components/panel.css
@@ -53,3 +53,38 @@
 #serviceContainer.developers-console-service .content-panel > .content-panel-header:not(.min-h-0) {
     min-height: 75px;
 }
+
+.next-content-panel > .next-content-panel-header > .next-content-panel-header-right .next-content-panel-status-badge {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+}
+
+.next-content-panel > .next-content-panel-header > .next-content-panel-header-right .next-content-panel-status-badge > span {
+    font-size: 10px;
+    padding: 0.25rem;
+    line-height: 1;
+    font-weight: 600;
+    border-radius: 0.35rem;
+    @apply shadow-sm;
+}
+
+.next-content-panel a.next-nav-item.next-nav-item-with-dropdown .next-nav-item-dropdown-button,
+.next-content-panel a.next-nav-item.next-nav-item-with-dropdown .next-nav-item-dropdown-button button {
+    cursor: default;
+}
+
+.next-content-panel a.next-nav-item.next-nav-item-with-dropdown .next-nav-item-dropdown-button button:hover {
+    background-color: initial;
+}
+
+.next-content-panel a.next-nav-item.next-nav-item-with-dropdown .next-nav-item-dropdown-button button.btn {
+    padding-top: 0.15rem;
+    padding-bottom: 0.15rem;
+    font-size: 10px;
+    margin-right: -0.5rem;
+    line-height: 0.5;
+}
+.next-content-panel a.next-nav-item.next-nav-item-with-dropdown {
+    overflow: visible;
+}
diff --git a/addon/styles/layout/next.css b/addon/styles/layout/next.css
index 4a5dbf9..896600d 100644
--- a/addon/styles/layout/next.css
+++ b/addon/styles/layout/next.css
@@ -1049,7 +1049,7 @@ body[data-theme='dark'] .next-content-panel-wrapper .next-content-panel-containe
 
 .next-view-section-footer,
 .next-view-section-subheader {
-    @apply flex items-center justify-between min-w-full max-w-full flex-shrink-0 border-b border-gray-200 dark:border-gray-700;
+    @apply grid grid-cols-2 min-w-full max-w-full border-b border-gray-200 dark:border-gray-700;
     box-align: center;
     padding: 0px 24px 0px 36px;
     height: 57px;
@@ -1335,7 +1335,7 @@ section.next-view-section {
 .next-table-wrapper {
     overflow: scroll;
     height: 100vh;
-    @apply inline-block w-full min-w-full align-middle;
+    @apply grid grid-cols-1;
 }
 
 .next-table-wrapper > table {
@@ -1396,11 +1396,19 @@ body[data-theme='dark'] .next-table-wrapper .tfoot-row > td {
 }
 
 .next-table-wrapper .tfoot-wrapper {
+    @apply grid grid-cols-1;
     padding: 0px 24px 0px 36px;
     height: 53px;
     min-width: 100%;
     max-width: 100%;
-    @apply flex flex-1 flex-row items-center justify-between flex-shrink-0;
+}
+
+.next-table-wrapper .tfoot-wrapper > .fleetbase-pagination > .fleetbase-pagination-meta-info-wrapper > .fleetbase-pagination-meta-info-paging-wrapper > .fleetbase-pagination-meta-info-paging-inner {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    padding-bottom: 8px;
+    padding-right: 24px;
 }
 
 .next-table-wrapper .lt-body-wrap > .lt-scrollable .tse-scroll-content .tse-content table {
diff --git a/package.json b/package.json
index 704178b..044e663 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@fleetbase/ember-ui",
-    "version": "0.2.5",
+    "version": "0.2.6",
     "description": "Fleetbase UI provides all the interface components, helpers, services and utilities for building a Fleetbase extension into the Console.",
     "keywords": [
         "fleetbase-ui",