diff --git a/resources/dist/plugin.css b/resources/dist/plugin.css
index 923488a..728abe5 100644
--- a/resources/dist/plugin.css
+++ b/resources/dist/plugin.css
@@ -108,6 +108,60 @@
 .filament-navigation .right-0 {
     right: 0px
 }
+.filament-navigation .top-0 {
+    top: 0px
+}
+.filament-navigation .right-0 {
+    right: 0px
+}
+.filament-navigation .top-0 {
+    top: 0px
+}
+.filament-navigation .right-0 {
+    right: 0px
+}
+.filament-navigation .top-0 {
+    top: 0px
+}
+.filament-navigation .right-0 {
+    right: 0px
+}
+.filament-navigation .top-0 {
+    top: 0px
+}
+.filament-navigation .right-0 {
+    right: 0px
+}
+.filament-navigation .top-0 {
+    top: 0px
+}
+.filament-navigation .right-0 {
+    right: 0px
+}
+.filament-navigation .top-0 {
+    top: 0px
+}
+.filament-navigation .right-0 {
+    right: 0px
+}
+.filament-navigation .top-0 {
+    top: 0px
+}
+.filament-navigation .right-0 {
+    right: 0px
+}
+.filament-navigation .top-0 {
+    top: 0px
+}
+.filament-navigation .right-0 {
+    right: 0px
+}
+.filament-navigation .top-0 {
+    top: 0px
+}
+.filament-navigation .right-0 {
+    right: 0px
+}
 .filament-navigation .-mx-6 {
     margin-left: -1.5rem;
     margin-right: -1.5rem
@@ -172,6 +226,60 @@
 .filament-navigation .ml-\[25px\] {
     margin-left: 25px
 }
+.filament-navigation .-mr-2 {
+    margin-right: -0.5rem
+}
+.filament-navigation .ml-6 {
+    margin-left: 1.5rem
+}
+.filament-navigation .-mr-2 {
+    margin-right: -0.5rem
+}
+.filament-navigation .ml-6 {
+    margin-left: 1.5rem
+}
+.filament-navigation .-mr-2 {
+    margin-right: -0.5rem
+}
+.filament-navigation .ml-6 {
+    margin-left: 1.5rem
+}
+.filament-navigation .-mr-2 {
+    margin-right: -0.5rem
+}
+.filament-navigation .ml-6 {
+    margin-left: 1.5rem
+}
+.filament-navigation .-mr-2 {
+    margin-right: -0.5rem
+}
+.filament-navigation .ml-6 {
+    margin-left: 1.5rem
+}
+.filament-navigation .-mr-2 {
+    margin-right: -0.5rem
+}
+.filament-navigation .ml-6 {
+    margin-left: 1.5rem
+}
+.filament-navigation .-mr-2 {
+    margin-right: -0.5rem
+}
+.filament-navigation .ml-6 {
+    margin-left: 1.5rem
+}
+.filament-navigation .-mr-2 {
+    margin-right: -0.5rem
+}
+.filament-navigation .ml-6 {
+    margin-left: 1.5rem
+}
+.filament-navigation .-mr-2 {
+    margin-right: -0.5rem
+}
+.filament-navigation .ml-6 {
+    margin-left: 1.5rem
+}
 .filament-navigation .flex {
     display: flex
 }
@@ -268,6 +376,108 @@
 .filament-navigation .h-3 {
     height: 0.75rem
 }
+.filament-navigation .h-4 {
+    height: 1rem
+}
+.filament-navigation .h-6 {
+    height: 1.5rem
+}
+.filament-navigation .h-3 {
+    height: 0.75rem
+}
+.filament-navigation .h-4 {
+    height: 1rem
+}
+.filament-navigation .h-3 {
+    height: 0.75rem
+}
+.filament-navigation .h-6 {
+    height: 1.5rem
+}
+.filament-navigation .h-4 {
+    height: 1rem
+}
+.filament-navigation .h-3\.5 {
+    height: 0.875rem
+}
+.filament-navigation .h-3 {
+    height: 0.75rem
+}
+.filament-navigation .h-6 {
+    height: 1.5rem
+}
+.filament-navigation .h-4 {
+    height: 1rem
+}
+.filament-navigation .h-3\.5 {
+    height: 0.875rem
+}
+.filament-navigation .h-3 {
+    height: 0.75rem
+}
+.filament-navigation .h-6 {
+    height: 1.5rem
+}
+.filament-navigation .h-4 {
+    height: 1rem
+}
+.filament-navigation .h-3\.5 {
+    height: 0.875rem
+}
+.filament-navigation .h-3 {
+    height: 0.75rem
+}
+.filament-navigation .h-6 {
+    height: 1.5rem
+}
+.filament-navigation .h-4 {
+    height: 1rem
+}
+.filament-navigation .h-3\.5 {
+    height: 0.875rem
+}
+.filament-navigation .h-3 {
+    height: 0.75rem
+}
+.filament-navigation .h-6 {
+    height: 1.5rem
+}
+.filament-navigation .h-4 {
+    height: 1rem
+}
+.filament-navigation .h-3\.5 {
+    height: 0.875rem
+}
+.filament-navigation .h-3 {
+    height: 0.75rem
+}
+.filament-navigation .h-6 {
+    height: 1.5rem
+}
+.filament-navigation .h-4 {
+    height: 1rem
+}
+.filament-navigation .h-3\.5 {
+    height: 0.875rem
+}
+.filament-navigation .h-3 {
+    height: 0.75rem
+}
+.filament-navigation .h-6 {
+    height: 1.5rem
+}
+.filament-navigation .h-4 {
+    height: 1rem
+}
+.filament-navigation .h-3\.5 {
+    height: 0.875rem
+}
+.filament-navigation .h-3 {
+    height: 0.75rem
+}
+.filament-navigation .h-6 {
+    height: 1.5rem
+}
 .filament-navigation .w-full {
     width: 100%
 }
@@ -358,60 +568,236 @@
 .filament-navigation .w-3 {
     width: 0.75rem
 }
-.filament-navigation .appearance-none {
-    -webkit-appearance: none;
-       -moz-appearance: none;
-            appearance: none
+.filament-navigation .w-full {
+    width: 100%
 }
-.filament-navigation .items-center {
-    align-items: center
+.filament-navigation .w-4 {
+    width: 1rem
 }
-.filament-navigation .justify-end {
-    justify-content: flex-end
+.filament-navigation .w-6 {
+    width: 1.5rem
 }
-.filament-navigation .space-y-2 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-y-reverse: 0;
-    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
-    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))
+.filament-navigation .w-3 {
+    width: 0.75rem
 }
-.filament-navigation .divide-x > :not([hidden]) ~ :not([hidden]) {
-    --tw-divide-x-reverse: 0;
-    border-right-width: calc(1px * var(--tw-divide-x-reverse));
-    border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)))
+.filament-navigation .w-full {
+    width: 100%
 }
-.filament-navigation .divide-y > :not([hidden]) ~ :not([hidden]) {
-    --tw-divide-y-reverse: 0;
-    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
-    border-bottom-width: calc(1px * var(--tw-divide-y-reverse))
+.filament-navigation .w-4 {
+    width: 1rem
 }
-.filament-navigation .divide-x > :not([hidden]) ~ :not([hidden]) {
-    --tw-divide-x-reverse: 0;
-    border-right-width: calc(1px * var(--tw-divide-x-reverse));
-    border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)))
+.filament-navigation .w-3 {
+    width: 0.75rem
 }
-.filament-navigation .divide-y > :not([hidden]) ~ :not([hidden]) {
-    --tw-divide-y-reverse: 0;
-    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
-    border-bottom-width: calc(1px * var(--tw-divide-y-reverse))
+.filament-navigation .w-full {
+    width: 100%
 }
-.filament-navigation .divide-gray-300 > :not([hidden]) ~ :not([hidden]) {
-    --tw-divide-opacity: 1;
-    border-color: rgb(209 213 219 / var(--tw-divide-opacity))
+.filament-navigation .w-4 {
+    width: 1rem
 }
-.filament-navigation .overflow-hidden {
-    overflow: hidden
+.filament-navigation .w-3\.5 {
+    width: 0.875rem
 }
-.filament-navigation .rounded-lg {
-    border-radius: 0.5rem
+.filament-navigation .w-3 {
+    width: 0.75rem
 }
-.filament-navigation .rounded-l-lg {
-    border-top-left-radius: 0.5rem;
-    border-bottom-left-radius: 0.5rem
+.filament-navigation .w-full {
+    width: 100%
 }
-.filament-navigation .rounded-b-lg {
-    border-bottom-right-radius: 0.5rem;
+.filament-navigation .w-4 {
+    width: 1rem
+}
+.filament-navigation .w-3\.5 {
+    width: 0.875rem
+}
+.filament-navigation .w-3 {
+    width: 0.75rem
+}
+.filament-navigation .w-full {
+    width: 100%
+}
+.filament-navigation .w-4 {
+    width: 1rem
+}
+.filament-navigation .w-3\.5 {
+    width: 0.875rem
+}
+.filament-navigation .w-3 {
+    width: 0.75rem
+}
+.filament-navigation .w-full {
+    width: 100%
+}
+.filament-navigation .w-4 {
+    width: 1rem
+}
+.filament-navigation .w-3\.5 {
+    width: 0.875rem
+}
+.filament-navigation .w-3 {
+    width: 0.75rem
+}
+.filament-navigation .w-full {
+    width: 100%
+}
+.filament-navigation .w-4 {
+    width: 1rem
+}
+.filament-navigation .w-3\.5 {
+    width: 0.875rem
+}
+.filament-navigation .w-3 {
+    width: 0.75rem
+}
+.filament-navigation .w-full {
+    width: 100%
+}
+.filament-navigation .w-4 {
+    width: 1rem
+}
+.filament-navigation .w-3\.5 {
+    width: 0.875rem
+}
+.filament-navigation .w-3 {
+    width: 0.75rem
+}
+.filament-navigation .w-full {
+    width: 100%
+}
+.filament-navigation .w-4 {
+    width: 1rem
+}
+.filament-navigation .w-3\.5 {
+    width: 0.875rem
+}
+.filament-navigation .w-3 {
+    width: 0.75rem
+}
+.filament-navigation .rotate-90 {
+    --tw-rotate: 90deg;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+}
+.filament-navigation .-rotate-90 {
+    --tw-rotate: -90deg;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+}
+.filament-navigation .appearance-none {
+    -webkit-appearance: none;
+       -moz-appearance: none;
+            appearance: none
+}
+.filament-navigation .items-center {
+    align-items: center
+}
+.filament-navigation .justify-end {
+    justify-content: flex-end
+}
+.filament-navigation .space-y-2 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))
+}
+.filament-navigation .divide-x > :not([hidden]) ~ :not([hidden]) {
+    --tw-divide-x-reverse: 0;
+    border-right-width: calc(1px * var(--tw-divide-x-reverse));
+    border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)))
+}
+.filament-navigation .divide-y > :not([hidden]) ~ :not([hidden]) {
+    --tw-divide-y-reverse: 0;
+    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+    border-bottom-width: calc(1px * var(--tw-divide-y-reverse))
+}
+.filament-navigation .divide-x > :not([hidden]) ~ :not([hidden]) {
+    --tw-divide-x-reverse: 0;
+    border-right-width: calc(1px * var(--tw-divide-x-reverse));
+    border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)))
+}
+.filament-navigation .divide-y > :not([hidden]) ~ :not([hidden]) {
+    --tw-divide-y-reverse: 0;
+    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+    border-bottom-width: calc(1px * var(--tw-divide-y-reverse))
+}
+.filament-navigation .divide-x > :not([hidden]) ~ :not([hidden]) {
+    --tw-divide-x-reverse: 0;
+    border-right-width: calc(1px * var(--tw-divide-x-reverse));
+    border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)))
+}
+.filament-navigation .divide-gray-300 > :not([hidden]) ~ :not([hidden]) {
+    --tw-divide-opacity: 1;
+    border-color: rgb(209 213 219 / var(--tw-divide-opacity))
+}
+.filament-navigation .overflow-hidden {
+    overflow: hidden
+}
+.filament-navigation .rounded-lg {
+    border-radius: 0.5rem
+}
+.filament-navigation .rounded-l-lg {
+    border-top-left-radius: 0.5rem;
+    border-bottom-left-radius: 0.5rem
+}
+.filament-navigation .rounded-b-lg {
+    border-bottom-right-radius: 0.5rem;
+    border-bottom-left-radius: 0.5rem
+}
+.filament-navigation .rounded-l-lg {
+    border-top-left-radius: 0.5rem;
+    border-bottom-left-radius: 0.5rem
+}
+.filament-navigation .rounded-bl-lg {
+    border-bottom-left-radius: 0.5rem
+}
+.filament-navigation .rounded-tr-lg {
+    border-top-right-radius: 0.5rem
+}
+.filament-navigation .rounded-bl-lg {
+    border-bottom-left-radius: 0.5rem
+}
+.filament-navigation .rounded-tr-lg {
+    border-top-right-radius: 0.5rem
+}
+.filament-navigation .rounded-bl-lg {
+    border-bottom-left-radius: 0.5rem
+}
+.filament-navigation .rounded-tr-lg {
+    border-top-right-radius: 0.5rem
+}
+.filament-navigation .rounded-bl-lg {
+    border-bottom-left-radius: 0.5rem
+}
+.filament-navigation .rounded-tr-lg {
+    border-top-right-radius: 0.5rem
+}
+.filament-navigation .rounded-bl-lg {
+    border-bottom-left-radius: 0.5rem
+}
+.filament-navigation .rounded-tr-lg {
+    border-top-right-radius: 0.5rem
+}
+.filament-navigation .rounded-bl-lg {
+    border-bottom-left-radius: 0.5rem
+}
+.filament-navigation .rounded-tr-lg {
+    border-top-right-radius: 0.5rem
+}
+.filament-navigation .rounded-bl-lg {
+    border-bottom-left-radius: 0.5rem
+}
+.filament-navigation .rounded-tr-lg {
+    border-top-right-radius: 0.5rem
+}
+.filament-navigation .rounded-bl-lg {
+    border-bottom-left-radius: 0.5rem
+}
+.filament-navigation .rounded-tr-lg {
+    border-top-right-radius: 0.5rem
+}
+.filament-navigation .rounded-bl-lg {
     border-bottom-left-radius: 0.5rem
 }
+.filament-navigation .rounded-tr-lg {
+    border-top-right-radius: 0.5rem
+}
 .filament-navigation .rounded-bl-lg {
     border-bottom-left-radius: 0.5rem
 }
@@ -569,6 +955,87 @@
 .filament-navigation .border-l {
     border-left-width: 1px
 }
+.filament-navigation .border-r {
+    border-right-width: 1px
+}
+.filament-navigation .border-b {
+    border-bottom-width: 1px
+}
+.filament-navigation .border-l {
+    border-left-width: 1px
+}
+.filament-navigation .border-r {
+    border-right-width: 1px
+}
+.filament-navigation .border-b {
+    border-bottom-width: 1px
+}
+.filament-navigation .border-l {
+    border-left-width: 1px
+}
+.filament-navigation .border-r {
+    border-right-width: 1px
+}
+.filament-navigation .border-b {
+    border-bottom-width: 1px
+}
+.filament-navigation .border-l {
+    border-left-width: 1px
+}
+.filament-navigation .border-r {
+    border-right-width: 1px
+}
+.filament-navigation .border-b {
+    border-bottom-width: 1px
+}
+.filament-navigation .border-l {
+    border-left-width: 1px
+}
+.filament-navigation .border-r {
+    border-right-width: 1px
+}
+.filament-navigation .border-b {
+    border-bottom-width: 1px
+}
+.filament-navigation .border-l {
+    border-left-width: 1px
+}
+.filament-navigation .border-r {
+    border-right-width: 1px
+}
+.filament-navigation .border-b {
+    border-bottom-width: 1px
+}
+.filament-navigation .border-l {
+    border-left-width: 1px
+}
+.filament-navigation .border-r {
+    border-right-width: 1px
+}
+.filament-navigation .border-b {
+    border-bottom-width: 1px
+}
+.filament-navigation .border-l {
+    border-left-width: 1px
+}
+.filament-navigation .border-r {
+    border-right-width: 1px
+}
+.filament-navigation .border-b {
+    border-bottom-width: 1px
+}
+.filament-navigation .border-l {
+    border-left-width: 1px
+}
+.filament-navigation .border-r {
+    border-right-width: 1px
+}
+.filament-navigation .border-b {
+    border-bottom-width: 1px
+}
+.filament-navigation .border-l {
+    border-left-width: 1px
+}
 .filament-navigation .border-gray-300 {
     --tw-border-opacity: 1;
     border-color: rgb(209 213 219 / var(--tw-border-opacity))
@@ -653,7 +1120,79 @@
     --tw-bg-opacity: 1;
     background-color: rgb(249 250 251 / var(--tw-bg-opacity))
 }
-.filament-navigation .p-1 {
+.filament-navigation .bg-white {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity))
+}
+.filament-navigation .bg-gray-50 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(249 250 251 / var(--tw-bg-opacity))
+}
+.filament-navigation .bg-white {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity))
+}
+.filament-navigation .bg-gray-50 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(249 250 251 / var(--tw-bg-opacity))
+}
+.filament-navigation .bg-white {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity))
+}
+.filament-navigation .bg-gray-50 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(249 250 251 / var(--tw-bg-opacity))
+}
+.filament-navigation .bg-white {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity))
+}
+.filament-navigation .bg-gray-50 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(249 250 251 / var(--tw-bg-opacity))
+}
+.filament-navigation .bg-white {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity))
+}
+.filament-navigation .bg-gray-50 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(249 250 251 / var(--tw-bg-opacity))
+}
+.filament-navigation .bg-white {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity))
+}
+.filament-navigation .bg-gray-50 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(249 250 251 / var(--tw-bg-opacity))
+}
+.filament-navigation .bg-white {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity))
+}
+.filament-navigation .bg-gray-50 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(249 250 251 / var(--tw-bg-opacity))
+}
+.filament-navigation .bg-white {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity))
+}
+.filament-navigation .bg-gray-50 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(249 250 251 / var(--tw-bg-opacity))
+}
+.filament-navigation .bg-white {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity))
+}
+.filament-navigation .bg-gray-50 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(249 250 251 / var(--tw-bg-opacity))
+}
+.filament-navigation .p-1 {
     padding: 0.25rem
 }
 .filament-navigation .px-3 {
@@ -744,6 +1283,114 @@
     padding-top: 0.5rem;
     padding-bottom: 0.5rem
 }
+.filament-navigation .px-px {
+    padding-left: 1px;
+    padding-right: 1px
+}
+.filament-navigation .px-3 {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem
+}
+.filament-navigation .py-2 {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem
+}
+.filament-navigation .px-px {
+    padding-left: 1px;
+    padding-right: 1px
+}
+.filament-navigation .px-3 {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem
+}
+.filament-navigation .py-2 {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem
+}
+.filament-navigation .px-px {
+    padding-left: 1px;
+    padding-right: 1px
+}
+.filament-navigation .px-3 {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem
+}
+.filament-navigation .py-2 {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem
+}
+.filament-navigation .px-px {
+    padding-left: 1px;
+    padding-right: 1px
+}
+.filament-navigation .px-3 {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem
+}
+.filament-navigation .py-2 {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem
+}
+.filament-navigation .px-px {
+    padding-left: 1px;
+    padding-right: 1px
+}
+.filament-navigation .px-3 {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem
+}
+.filament-navigation .py-2 {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem
+}
+.filament-navigation .px-px {
+    padding-left: 1px;
+    padding-right: 1px
+}
+.filament-navigation .px-3 {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem
+}
+.filament-navigation .py-2 {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem
+}
+.filament-navigation .px-px {
+    padding-left: 1px;
+    padding-right: 1px
+}
+.filament-navigation .px-3 {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem
+}
+.filament-navigation .py-2 {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem
+}
+.filament-navigation .px-px {
+    padding-left: 1px;
+    padding-right: 1px
+}
+.filament-navigation .px-3 {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem
+}
+.filament-navigation .py-2 {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem
+}
+.filament-navigation .px-px {
+    padding-left: 1px;
+    padding-right: 1px
+}
+.filament-navigation .px-3 {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem
+}
+.filament-navigation .py-2 {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem
+}
 .filament-navigation .text-left {
     text-align: left
 }
@@ -823,6 +1470,82 @@
     --tw-text-opacity: 1;
     color: rgb(107 114 128 / var(--tw-text-opacity))
 }
+.filament-navigation .text-gray-400 {
+    --tw-text-opacity: 1;
+    color: rgb(156 163 175 / var(--tw-text-opacity))
+}
+.filament-navigation .text-gray-500 {
+    --tw-text-opacity: 1;
+    color: rgb(107 114 128 / var(--tw-text-opacity))
+}
+.filament-navigation .text-gray-400 {
+    --tw-text-opacity: 1;
+    color: rgb(156 163 175 / var(--tw-text-opacity))
+}
+.filament-navigation .text-gray-300 {
+    --tw-text-opacity: 1;
+    color: rgb(209 213 219 / var(--tw-text-opacity))
+}
+.filament-navigation .text-gray-500 {
+    --tw-text-opacity: 1;
+    color: rgb(107 114 128 / var(--tw-text-opacity))
+}
+.filament-navigation .text-gray-400 {
+    --tw-text-opacity: 1;
+    color: rgb(156 163 175 / var(--tw-text-opacity))
+}
+.filament-navigation .text-gray-500 {
+    --tw-text-opacity: 1;
+    color: rgb(107 114 128 / var(--tw-text-opacity))
+}
+.filament-navigation .text-gray-400 {
+    --tw-text-opacity: 1;
+    color: rgb(156 163 175 / var(--tw-text-opacity))
+}
+.filament-navigation .text-gray-500 {
+    --tw-text-opacity: 1;
+    color: rgb(107 114 128 / var(--tw-text-opacity))
+}
+.filament-navigation .text-gray-400 {
+    --tw-text-opacity: 1;
+    color: rgb(156 163 175 / var(--tw-text-opacity))
+}
+.filament-navigation .text-gray-500 {
+    --tw-text-opacity: 1;
+    color: rgb(107 114 128 / var(--tw-text-opacity))
+}
+.filament-navigation .text-gray-400 {
+    --tw-text-opacity: 1;
+    color: rgb(156 163 175 / var(--tw-text-opacity))
+}
+.filament-navigation .text-gray-500 {
+    --tw-text-opacity: 1;
+    color: rgb(107 114 128 / var(--tw-text-opacity))
+}
+.filament-navigation .text-gray-400 {
+    --tw-text-opacity: 1;
+    color: rgb(156 163 175 / var(--tw-text-opacity))
+}
+.filament-navigation .text-gray-500 {
+    --tw-text-opacity: 1;
+    color: rgb(107 114 128 / var(--tw-text-opacity))
+}
+.filament-navigation .text-gray-400 {
+    --tw-text-opacity: 1;
+    color: rgb(156 163 175 / var(--tw-text-opacity))
+}
+.filament-navigation .text-gray-500 {
+    --tw-text-opacity: 1;
+    color: rgb(107 114 128 / var(--tw-text-opacity))
+}
+.filament-navigation .text-gray-400 {
+    --tw-text-opacity: 1;
+    color: rgb(156 163 175 / var(--tw-text-opacity))
+}
+.filament-navigation .text-gray-500 {
+    --tw-text-opacity: 1;
+    color: rgb(107 114 128 / var(--tw-text-opacity))
+}
 .filament-navigation .opacity-0 {
     opacity: 0
 }
@@ -833,25 +1556,140 @@
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms
 }
-.filament-navigation .ease-in-out {
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
+.filament-navigation .duration-200 {
+    transition-duration: 200ms
+}
+.filament-navigation .ease-in-out {
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
+}
+
+.sortable-container-maybe-active {
+
+}
+
+.filament-navigation .hover\:text-gray-900:hover {
+    --tw-text-opacity: 1;
+    color: rgb(17 24 39 / var(--tw-text-opacity))
+}
+
+.filament-navigation .hover\:text-gray-700:hover {
+    --tw-text-opacity: 1;
+    color: rgb(55 65 81 / var(--tw-text-opacity))
+}
+
+.filament-navigation .hover\:text-gray-900:hover {
+    --tw-text-opacity: 1;
+    color: rgb(17 24 39 / var(--tw-text-opacity))
+}
+
+.filament-navigation .hover\:text-gray-700:hover {
+    --tw-text-opacity: 1;
+    color: rgb(55 65 81 / var(--tw-text-opacity))
+}
+
+.filament-navigation .hover\:text-gray-900:hover {
+    --tw-text-opacity: 1;
+    color: rgb(17 24 39 / var(--tw-text-opacity))
+}
+
+.filament-navigation .hover\:text-gray-700:hover {
+    --tw-text-opacity: 1;
+    color: rgb(55 65 81 / var(--tw-text-opacity))
+}
+
+.filament-navigation .hover\:text-gray-900:hover {
+    --tw-text-opacity: 1;
+    color: rgb(17 24 39 / var(--tw-text-opacity))
+}
+
+.filament-navigation .hover\:text-gray-700:hover {
+    --tw-text-opacity: 1;
+    color: rgb(55 65 81 / var(--tw-text-opacity))
+}
+
+.filament-navigation .hover\:text-gray-900:hover {
+    --tw-text-opacity: 1;
+    color: rgb(17 24 39 / var(--tw-text-opacity))
+}
+
+.filament-navigation .group:hover .group-hover\:flex {
+    display: flex
+}
+
+.filament-navigation .group:hover .group-hover\:opacity-100 {
+    opacity: 1
+}
+
+.filament-navigation [dir="rtl"] .rtl\:right-auto {
+    right: auto
+}
+
+.filament-navigation [dir="rtl"] .rtl\:left-0 {
+    left: 0px
+}
+
+.filament-navigation [dir="rtl"] .rtl\:right-auto {
+    right: auto
+}
+
+.filament-navigation [dir="rtl"] .rtl\:left-0 {
+    left: 0px
+}
+
+.filament-navigation [dir="rtl"] .rtl\:right-auto {
+    right: auto
+}
+
+.filament-navigation [dir="rtl"] .rtl\:left-0 {
+    left: 0px
+}
+
+.filament-navigation [dir="rtl"] .rtl\:right-auto {
+    right: auto
+}
+
+.filament-navigation [dir="rtl"] .rtl\:left-0 {
+    left: 0px
+}
+
+.filament-navigation [dir="rtl"] .rtl\:right-auto {
+    right: auto
+}
+
+.filament-navigation [dir="rtl"] .rtl\:left-0 {
+    left: 0px
+}
+
+.filament-navigation [dir="rtl"] .rtl\:right-auto {
+    right: auto
+}
+
+.filament-navigation [dir="rtl"] .rtl\:left-0 {
+    left: 0px
 }
 
-.sortable-container-maybe-active {
+.filament-navigation [dir="rtl"] .rtl\:right-auto {
+    right: auto
+}
 
+.filament-navigation [dir="rtl"] .rtl\:left-0 {
+    left: 0px
 }
 
-.filament-navigation .hover\:text-gray-900:hover {
-    --tw-text-opacity: 1;
-    color: rgb(17 24 39 / var(--tw-text-opacity))
+.filament-navigation [dir="rtl"] .rtl\:right-auto {
+    right: auto
 }
 
-.filament-navigation .group:hover .group-hover\:flex {
-    display: flex
+.filament-navigation [dir="rtl"] .rtl\:left-0 {
+    left: 0px
 }
 
-.filament-navigation .group:hover .group-hover\:opacity-100 {
-    opacity: 1
+.filament-navigation [dir="rtl"] .rtl\:right-auto {
+    right: auto
+}
+
+.filament-navigation [dir="rtl"] .rtl\:left-0 {
+    left: 0px
 }
 
 .filament-navigation [dir="rtl"] .rtl\:right-auto {
@@ -1094,6 +1932,222 @@
     border-top-left-radius: 0.5rem
 }
 
+.filament-navigation [dir="rtl"] .rtl\:rounded-bl-none {
+    border-bottom-left-radius: 0px
+}
+
+.filament-navigation [dir="rtl"] .rtl\:rounded-br-lg {
+    border-bottom-right-radius: 0.5rem
+}
+
+.filament-navigation [dir="rtl"] .rtl\:rounded-tr-none {
+    border-top-right-radius: 0px
+}
+
+.filament-navigation [dir="rtl"] .rtl\:rounded-tl-lg {
+    border-top-left-radius: 0.5rem
+}
+
+.filament-navigation [dir="rtl"] .rtl\:rounded-bl-none {
+    border-bottom-left-radius: 0px
+}
+
+.filament-navigation [dir="rtl"] .rtl\:rounded-br-lg {
+    border-bottom-right-radius: 0.5rem
+}
+
+.filament-navigation [dir="rtl"] .rtl\:rounded-tr-none {
+    border-top-right-radius: 0px
+}
+
+.filament-navigation [dir="rtl"] .rtl\:rounded-tl-lg {
+    border-top-left-radius: 0.5rem
+}
+
+.filament-navigation [dir="rtl"] .rtl\:rounded-bl-none {
+    border-bottom-left-radius: 0px
+}
+
+.filament-navigation [dir="rtl"] .rtl\:rounded-br-lg {
+    border-bottom-right-radius: 0.5rem
+}
+
+.filament-navigation [dir="rtl"] .rtl\:rounded-tr-none {
+    border-top-right-radius: 0px
+}
+
+.filament-navigation [dir="rtl"] .rtl\:rounded-tl-lg {
+    border-top-left-radius: 0.5rem
+}
+
+.filament-navigation [dir="rtl"] .rtl\:rounded-bl-none {
+    border-bottom-left-radius: 0px
+}
+
+.filament-navigation [dir="rtl"] .rtl\:rounded-br-lg {
+    border-bottom-right-radius: 0.5rem
+}
+
+.filament-navigation [dir="rtl"] .rtl\:rounded-tr-none {
+    border-top-right-radius: 0px
+}
+
+.filament-navigation [dir="rtl"] .rtl\:rounded-tl-lg {
+    border-top-left-radius: 0.5rem
+}
+
+.filament-navigation [dir="rtl"] .rtl\:rounded-bl-none {
+    border-bottom-left-radius: 0px
+}
+
+.filament-navigation [dir="rtl"] .rtl\:rounded-br-lg {
+    border-bottom-right-radius: 0.5rem
+}
+
+.filament-navigation [dir="rtl"] .rtl\:rounded-tr-none {
+    border-top-right-radius: 0px
+}
+
+.filament-navigation [dir="rtl"] .rtl\:rounded-tl-lg {
+    border-top-left-radius: 0.5rem
+}
+
+.filament-navigation [dir="rtl"] .rtl\:rounded-bl-none {
+    border-bottom-left-radius: 0px
+}
+
+.filament-navigation [dir="rtl"] .rtl\:rounded-br-lg {
+    border-bottom-right-radius: 0.5rem
+}
+
+.filament-navigation [dir="rtl"] .rtl\:rounded-tr-none {
+    border-top-right-radius: 0px
+}
+
+.filament-navigation [dir="rtl"] .rtl\:rounded-tl-lg {
+    border-top-left-radius: 0.5rem
+}
+
+.filament-navigation [dir="rtl"] .rtl\:rounded-bl-none {
+    border-bottom-left-radius: 0px
+}
+
+.filament-navigation [dir="rtl"] .rtl\:rounded-br-lg {
+    border-bottom-right-radius: 0.5rem
+}
+
+.filament-navigation [dir="rtl"] .rtl\:rounded-tr-none {
+    border-top-right-radius: 0px
+}
+
+.filament-navigation [dir="rtl"] .rtl\:rounded-tl-lg {
+    border-top-left-radius: 0.5rem
+}
+
+.filament-navigation [dir="rtl"] .rtl\:rounded-bl-none {
+    border-bottom-left-radius: 0px
+}
+
+.filament-navigation [dir="rtl"] .rtl\:rounded-br-lg {
+    border-bottom-right-radius: 0.5rem
+}
+
+.filament-navigation [dir="rtl"] .rtl\:rounded-tr-none {
+    border-top-right-radius: 0px
+}
+
+.filament-navigation [dir="rtl"] .rtl\:rounded-tl-lg {
+    border-top-left-radius: 0.5rem
+}
+
+.filament-navigation [dir="rtl"] .rtl\:rounded-bl-none {
+    border-bottom-left-radius: 0px
+}
+
+.filament-navigation [dir="rtl"] .rtl\:rounded-br-lg {
+    border-bottom-right-radius: 0.5rem
+}
+
+.filament-navigation [dir="rtl"] .rtl\:rounded-tr-none {
+    border-top-right-radius: 0px
+}
+
+.filament-navigation [dir="rtl"] .rtl\:rounded-tl-lg {
+    border-top-left-radius: 0.5rem
+}
+
+.filament-navigation [dir="rtl"] .rtl\:border-l-0 {
+    border-left-width: 0px
+}
+
+.filament-navigation [dir="rtl"] .rtl\:border-r {
+    border-right-width: 1px
+}
+
+.filament-navigation [dir="rtl"] .rtl\:border-l-0 {
+    border-left-width: 0px
+}
+
+.filament-navigation [dir="rtl"] .rtl\:border-r {
+    border-right-width: 1px
+}
+
+.filament-navigation [dir="rtl"] .rtl\:border-l-0 {
+    border-left-width: 0px
+}
+
+.filament-navigation [dir="rtl"] .rtl\:border-r {
+    border-right-width: 1px
+}
+
+.filament-navigation [dir="rtl"] .rtl\:border-l-0 {
+    border-left-width: 0px
+}
+
+.filament-navigation [dir="rtl"] .rtl\:border-r {
+    border-right-width: 1px
+}
+
+.filament-navigation [dir="rtl"] .rtl\:border-l-0 {
+    border-left-width: 0px
+}
+
+.filament-navigation [dir="rtl"] .rtl\:border-r {
+    border-right-width: 1px
+}
+
+.filament-navigation [dir="rtl"] .rtl\:border-l-0 {
+    border-left-width: 0px
+}
+
+.filament-navigation [dir="rtl"] .rtl\:border-r {
+    border-right-width: 1px
+}
+
+.filament-navigation [dir="rtl"] .rtl\:border-l-0 {
+    border-left-width: 0px
+}
+
+.filament-navigation [dir="rtl"] .rtl\:border-r {
+    border-right-width: 1px
+}
+
+.filament-navigation [dir="rtl"] .rtl\:border-l-0 {
+    border-left-width: 0px
+}
+
+.filament-navigation [dir="rtl"] .rtl\:border-r {
+    border-right-width: 1px
+}
+
+.filament-navigation [dir="rtl"] .rtl\:border-l-0 {
+    border-left-width: 0px
+}
+
+.filament-navigation [dir="rtl"] .rtl\:border-r {
+    border-right-width: 1px
+}
+
 .filament-navigation [dir="rtl"] .rtl\:border-l-0 {
     border-left-width: 0px
 }
@@ -1189,3 +2243,18 @@
     background-color: rgb(55 65 81 / var(--tw-bg-opacity))
 }
 
+.filament-navigation .dark .dark\:bg-gray-800 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(31 41 55 / var(--tw-bg-opacity))
+}
+
+.filament-navigation .dark .dark\:hover\:text-gray-100:hover {
+    --tw-text-opacity: 1;
+    color: rgb(243 244 246 / var(--tw-text-opacity))
+}
+
+.filament-navigation .dark .hover\:dark\:text-gray-100:hover {
+    --tw-text-opacity: 1;
+    color: rgb(243 244 246 / var(--tw-text-opacity))
+}
+
diff --git a/resources/views/components/nav-item.blade.php b/resources/views/components/nav-item.blade.php
index b4a5789..d8842c6 100644
--- a/resources/views/components/nav-item.blade.php
+++ b/resources/views/components/nav-item.blade.php
@@ -1,6 +1,7 @@
 @props(['item', 'statePath'])
 
 <div
+    x-data="{ open: $persist(true) }"
     wire:key="{{ $statePath }}"
     data-id="{{ $statePath }}"
     class="space-y-2"
@@ -11,7 +12,10 @@ class="space-y-2"
             'bg-white rounded-lg border border-gray-300 w-full flex',
             'dark:bg-gray-700 dark:border-gray-600' => config('filament.dark_mode'),
         ])>
-            <button type="button" class="flex items-center bg-gray-50 rounded-l-lg border-r border-gray-300 px-px" data-sortable-handle>
+            <button type="button" @class([
+                'flex items-center bg-gray-50 rounded-l-lg border-r border-gray-300 px-px',
+                'dark:bg-gray-800 dark:border-gray-600' => config('filament.dark_mode'),
+            ]) data-sortable-handle>
                 @svg('heroicon-o-dots-vertical', 'text-gray-400 w-4 h-4 -mr-2')
                 @svg('heroicon-o-dots-vertical', 'text-gray-400 w-4 h-4')
             </button>
@@ -19,10 +23,18 @@ class="space-y-2"
             <button
                 type="button"
                 wire:click="editItem('{{ $statePath }}')"
-                class="appearance-none w-full px-3 py-2 text-left"
+                class="appearance-none px-3 py-2 text-left"
             >
-                {{ $item['label'] }}
+                <span>{{ $item['label'] }}</span>
             </button>
+
+            @if(count($item['children']) > 0)
+                <button type="button" x-on:click="open = !open" title="Toggle children" class="appearance-none text-gray-500">
+                    <svg class="w-3.5 h-3.5 transition ease-in-out duration-200" x-bind:class="{
+                        '-rotate-90': !open,
+                    }" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+                </button>
+            @endif
         </div>
 
         <div @class([
@@ -53,8 +65,9 @@ class="p-1"
         </div>
     </div>
 
-    <div class="ml-6 space-y-2">
+    <div x-show="open" x-collapse class="ml-6">
         <div
+            class="space-y-2"
             wire:key="{{ $statePath }}-children"
             x-data="navigationSortableContainer({
                 statePath: @js($statePath . '.children')
diff --git a/resources/views/navigation-builder.blade.php b/resources/views/navigation-builder.blade.php
index 47a9821..ad33998 100644
--- a/resources/views/navigation-builder.blade.php
+++ b/resources/views/navigation-builder.blade.php
@@ -10,9 +10,13 @@
     class="filament-navigation"
 >
     <div wire:key="navigation-items-wrapper">
-        <div x-data="navigationSortableContainer({
-            statePath: @js($getStatePath())
-        })" data-sortable-container>
+        <div
+            class="space-y-2"
+            x-data="navigationSortableContainer({
+                statePath: @js($getStatePath())
+            })"
+            data-sortable-container
+        >
             @forelse($getState() as $uuid => $item)
                 <x-filament-navigation::nav-item :statePath="$getStatePath() . '.' . $uuid" :item="$item" />
             @empty