From b59bd7508e1a536fd7b16218649da7cf3e6a6704 Mon Sep 17 00:00:00 2001
From: Drew Bednar <drew@runcible.io>
Date: Sat, 26 Jul 2025 17:12:18 -0400
Subject: [PATCH] More items

---
 .../data_display/calendars/double.html        | 1020 ++++++
 .../forms/select_menus/simple_native.html     |   27 +
 .../navigation/breadcrumbs/contained.html     |   61 +
 .../breadcrumbs/full_width_bar.html           |   64 +
 .../breadcrumbs/simple_with_slashes.html      |   59 +
 .../breadcrumbs/wimple_with_chevrrons.html    |   69 +
 .../command_palettes/dark_with_icons.html     |  694 ++++
 .../semi_transparent_with_icons.html          |  694 ++++
 .../navigation/command_palettes/simple.html   |  218 ++
 .../command_palettes/simple_with_padding.html |  221 ++
 .../command_palettes/with_footer.html         |  978 ++++++
 .../command_palettes/with_groups.html         |  241 ++
 .../command_palettes/with_icons.html          |  694 ++++
 .../with_images_and_descriptions.html         |  480 +++
 .../command_palettes/with_preview.html        | 2918 +++++++++++++++++
 .../navbars/dark_with_quick_action.html       |  250 ++
 .../navigation/navbars/dark_with_search.html  |  253 ++
 application_ui/navigation/navbars/simple.html |  227 ++
 .../navigation/navbars/simple_dark.html       |  229 ++
 .../simple_dark_with_menu_button_on_left.html |  177 +
 .../simple_with_menu_button_on_left.html      |  173 +
 ...h_centered_search_and_secondary_links.html |  260 ++
 ...tered_search_and_secondary_links_dark.html |  261 ++
 .../navigation/navbars/with_quick_action.html |  248 ++
 .../navigation/navbars/with_search.html       |  252 ++
 .../navbars/with_search_in_column_layout.html |  253 ++
 .../card_footer_with_page_buttons.html        |  110 +
 .../pagination/centered_page_numbers.html     |   84 +
 .../pagination/simple_card_footer.html        |   28 +
 .../navigation/progress_bars/bullets.html     |   49 +
 .../progress_bars/bullets_and_text.html       |   93 +
 .../navigation/progress_bars/circles.html     |  103 +
 .../progress_bars/circles_with_text.html      |  140 +
 .../navigation/progress_bars/panels.html      |  107 +
 .../progress_bars/panels_with_border.html     |  152 +
 .../progress_bars/progress_bar.html           |   20 +
 .../navigation/progress_bars/simple.html      |   41 +
 .../navigation/sidebar_navigation/brand.html  |  234 ++
 .../navigation/sidebar_navigation/dark.html   |  234 ++
 .../navigation/sidebar_navigation/light.html  |  236 ++
 .../with_expandable_sections.html             |  167 +
 .../with_secondary_navigation.html            |  273 ++
 .../navigation/tabs/bar_with_underline.html   |   76 +
 .../tabs/full_width_tabs_with_underline.html  |   55 +
 .../navigation/tabs/simple_on_dark.html       |   50 +
 .../navigation/tabs/tabs_in_pills.html        |   53 +
 .../tabs/tabs_in_pills_on_gray.html           |   53 +
 .../tabs/tabs_in_pills_with_brand_color.html  |   53 +
 .../navigation/tabs/tabs_with_underline.html  |   55 +
 .../tabs/tabs_with_underline_and_badges.html  |   79 +
 .../tabs/tabs_with_underline_and_icons.html   |  108 +
 .../vertical_navigation/on_gray.html          |  221 ++
 .../vertical_navigation/simple.html           |   47 +
 .../vertical_navigation/with_badges.html      |   68 +
 .../vertical_navigation/with_icons.html       |  148 +
 .../with_icons_and_badges.html                |  163 +
 .../with_secondary_navigation.html            |  221 ++
 57 files changed, 14542 insertions(+)
 create mode 100644 application_ui/navigation/breadcrumbs/contained.html
 create mode 100644 application_ui/navigation/breadcrumbs/full_width_bar.html
 create mode 100644 application_ui/navigation/breadcrumbs/simple_with_slashes.html
 create mode 100644 application_ui/navigation/breadcrumbs/wimple_with_chevrrons.html
 create mode 100644 application_ui/navigation/command_palettes/dark_with_icons.html
 create mode 100644 application_ui/navigation/command_palettes/semi_transparent_with_icons.html
 create mode 100644 application_ui/navigation/command_palettes/simple.html
 create mode 100644 application_ui/navigation/command_palettes/simple_with_padding.html
 create mode 100644 application_ui/navigation/command_palettes/with_footer.html
 create mode 100644 application_ui/navigation/command_palettes/with_groups.html
 create mode 100644 application_ui/navigation/command_palettes/with_icons.html
 create mode 100644 application_ui/navigation/command_palettes/with_images_and_descriptions.html
 create mode 100644 application_ui/navigation/command_palettes/with_preview.html
 create mode 100644 application_ui/navigation/navbars/dark_with_quick_action.html
 create mode 100644 application_ui/navigation/navbars/dark_with_search.html
 create mode 100644 application_ui/navigation/navbars/simple.html
 create mode 100644 application_ui/navigation/navbars/simple_dark.html
 create mode 100644 application_ui/navigation/navbars/simple_dark_with_menu_button_on_left.html
 create mode 100644 application_ui/navigation/navbars/simple_with_menu_button_on_left.html
 create mode 100644 application_ui/navigation/navbars/with_centered_search_and_secondary_links.html
 create mode 100644 application_ui/navigation/navbars/with_centered_search_and_secondary_links_dark.html
 create mode 100644 application_ui/navigation/navbars/with_quick_action.html
 create mode 100644 application_ui/navigation/navbars/with_search.html
 create mode 100644 application_ui/navigation/navbars/with_search_in_column_layout.html
 create mode 100644 application_ui/navigation/pagination/card_footer_with_page_buttons.html
 create mode 100644 application_ui/navigation/pagination/centered_page_numbers.html
 create mode 100644 application_ui/navigation/pagination/simple_card_footer.html
 create mode 100644 application_ui/navigation/progress_bars/bullets.html
 create mode 100644 application_ui/navigation/progress_bars/bullets_and_text.html
 create mode 100644 application_ui/navigation/progress_bars/circles.html
 create mode 100644 application_ui/navigation/progress_bars/circles_with_text.html
 create mode 100644 application_ui/navigation/progress_bars/panels.html
 create mode 100644 application_ui/navigation/progress_bars/panels_with_border.html
 create mode 100644 application_ui/navigation/progress_bars/progress_bar.html
 create mode 100644 application_ui/navigation/progress_bars/simple.html
 create mode 100644 application_ui/navigation/sidebar_navigation/brand.html
 create mode 100644 application_ui/navigation/sidebar_navigation/dark.html
 create mode 100644 application_ui/navigation/sidebar_navigation/light.html
 create mode 100644 application_ui/navigation/sidebar_navigation/with_expandable_sections.html
 create mode 100644 application_ui/navigation/sidebar_navigation/with_secondary_navigation.html
 create mode 100644 application_ui/navigation/tabs/bar_with_underline.html
 create mode 100644 application_ui/navigation/tabs/full_width_tabs_with_underline.html
 create mode 100644 application_ui/navigation/tabs/simple_on_dark.html
 create mode 100644 application_ui/navigation/tabs/tabs_in_pills.html
 create mode 100644 application_ui/navigation/tabs/tabs_in_pills_on_gray.html
 create mode 100644 application_ui/navigation/tabs/tabs_in_pills_with_brand_color.html
 create mode 100644 application_ui/navigation/tabs/tabs_with_underline.html
 create mode 100644 application_ui/navigation/tabs/tabs_with_underline_and_badges.html
 create mode 100644 application_ui/navigation/tabs/tabs_with_underline_and_icons.html
 create mode 100644 application_ui/navigation/vertical_navigation/on_gray.html
 create mode 100644 application_ui/navigation/vertical_navigation/simple.html
 create mode 100644 application_ui/navigation/vertical_navigation/with_badges.html
 create mode 100644 application_ui/navigation/vertical_navigation/with_icons.html
 create mode 100644 application_ui/navigation/vertical_navigation/with_icons_and_badges.html
 create mode 100644 application_ui/navigation/vertical_navigation/with_secondary_navigation.html

diff --git a/application_ui/data_display/calendars/double.html b/application_ui/data_display/calendars/double.html
index e69de29..8a30348 100644
--- a/application_ui/data_display/calendars/double.html
+++ b/application_ui/data_display/calendars/double.html
@@ -0,0 +1,1020 @@
+<div>
+    <div class="relative grid grid-cols-1 gap-x-14 md:grid-cols-2">
+        <button
+            type="button"
+            class="absolute -top-1 -left-1.5 flex items-center justify-center p-1.5 text-gray-400 hover:text-gray-500"
+        >
+            <span class="sr-only">Previous month</span>
+            <svg
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                data-slot="icon"
+                aria-hidden="true"
+                class="size-5"
+            >
+                <path
+                    d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z"
+                    clip-rule="evenodd"
+                    fill-rule="evenodd"
+                />
+            </svg>
+        </button>
+        <button
+            type="button"
+            class="absolute -top-1 -right-1.5 flex items-center justify-center p-1.5 text-gray-400 hover:text-gray-500"
+        >
+            <span class="sr-only">Next month</span>
+            <svg
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                data-slot="icon"
+                aria-hidden="true"
+                class="size-5"
+            >
+                <path
+                    d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                    clip-rule="evenodd"
+                    fill-rule="evenodd"
+                />
+            </svg>
+        </button>
+        <section class="text-center last:max-md:hidden">
+            <h2 class="text-sm font-semibold text-gray-900">January</h2>
+            <div class="mt-6 grid grid-cols-7 text-xs/6 text-gray-500">
+                <div>M</div>
+                <div>T</div>
+                <div>W</div>
+                <div>T</div>
+                <div>F</div>
+                <div>S</div>
+                <div>S</div>
+            </div>
+            <div
+                class="isolate mt-2 grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm shadow-sm ring-1 ring-gray-200"
+            >
+                <button
+                    type="button"
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2021-12-27"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >27</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2021-12-28"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >28</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2021-12-29"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >29</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2021-12-30"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >30</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2021-12-31"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >31</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-01-01"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >1</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-01-02"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >2</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-01-03"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >3</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-01-04"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >4</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-01-05"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >5</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-01-06"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >6</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-01-07"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >7</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-01-08"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >8</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-01-09"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >9</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-01-10"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >10</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-01-11"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >11</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-today
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-01-12"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >12</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-01-13"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >13</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-01-14"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >14</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-01-15"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >15</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-01-16"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >16</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-01-17"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >17</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-01-18"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >18</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-01-19"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >19</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-01-20"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >20</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-01-21"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >21</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-01-22"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >22</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-01-23"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >23</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-01-24"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >24</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-01-25"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >25</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-01-26"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >26</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-01-27"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >27</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-01-28"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >28</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-01-29"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >29</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-01-30"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >30</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-01-31"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >31</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-02-01"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >1</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-02-02"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >2</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-02-03"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >3</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-02-04"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >4</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-02-05"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >5</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-02-06"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >6</time
+                    >
+                </button>
+            </div>
+        </section>
+        <section class="text-center last:max-md:hidden">
+            <h2 class="text-sm font-semibold text-gray-900">February</h2>
+            <div class="mt-6 grid grid-cols-7 text-xs/6 text-gray-500">
+                <div>M</div>
+                <div>T</div>
+                <div>W</div>
+                <div>T</div>
+                <div>F</div>
+                <div>S</div>
+                <div>S</div>
+            </div>
+            <div
+                class="isolate mt-2 grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm shadow-sm ring-1 ring-gray-200"
+            >
+                <button
+                    type="button"
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-01-31"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >31</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-02-01"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >1</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-02-02"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >2</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-02-03"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >3</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-02-04"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >4</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-02-05"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >5</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-02-06"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >6</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-02-07"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >7</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-02-08"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >8</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-02-09"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >9</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-02-10"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >10</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-02-11"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >11</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-02-12"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >12</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-02-13"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >13</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-02-14"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >14</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-02-15"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >15</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-02-16"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >16</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-02-17"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >17</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-02-18"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >18</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-02-19"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >19</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-02-20"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >20</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-02-21"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >21</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-02-22"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >22</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-02-23"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >23</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-02-24"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >24</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-02-25"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >25</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-02-26"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >26</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-02-27"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >27</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    data-is-current-month
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-02-28"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >28</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-03-01"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >1</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-03-02"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >2</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-03-03"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >3</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-03-04"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >4</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-03-05"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >5</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-03-06"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >6</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-03-07"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >7</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-03-08"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >8</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-03-09"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >9</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-03-10"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >10</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-03-11"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >11</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-03-12"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >12</time
+                    >
+                </button>
+                <button
+                    type="button"
+                    class="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg"
+                >
+                    <time
+                        datetime="2022-03-13"
+                        class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
+                        >13</time
+                    >
+                </button>
+            </div>
+        </section>
+    </div>
+    <section class="mt-12">
+        <h2 class="text-base font-semibold text-gray-900">Upcoming events</h2>
+        <ol class="mt-2 divide-y divide-gray-200 text-sm/6 text-gray-500">
+            <li class="py-4 sm:flex">
+                <time datetime="2022-01-17" class="w-28 flex-none"
+                    >Wed, Jan 12</time
+                >
+                <p class="mt-2 flex-auto sm:mt-0">
+                    Nothing on today’s schedule
+                </p>
+            </li>
+            <li class="py-4 sm:flex">
+                <time datetime="2022-01-19" class="w-28 flex-none"
+                    >Thu, Jan 13</time
+                >
+                <p class="mt-2 flex-auto font-semibold text-gray-900 sm:mt-0">
+                    View house with real estate agent
+                </p>
+                <p class="flex-none sm:ml-6">
+                    <time datetime="2022-01-13T14:30">2:30 PM</time> -
+                    <time datetime="2022-01-13T16:30">4:30 PM</time>
+                </p>
+            </li>
+            <li class="py-4 sm:flex">
+                <time datetime="2022-01-20" class="w-28 flex-none"
+                    >Fri, Jan 14</time
+                >
+                <p class="mt-2 flex-auto font-semibold text-gray-900 sm:mt-0">
+                    Meeting with bank manager
+                </p>
+                <p class="flex-none sm:ml-6">All day</p>
+            </li>
+            <li class="py-4 sm:flex">
+                <time datetime="2022-01-18" class="w-28 flex-none"
+                    >Mon, Jan 17</time
+                >
+                <p class="mt-2 flex-auto font-semibold text-gray-900 sm:mt-0">
+                    Sign paperwork at lawyers
+                </p>
+                <p class="flex-none sm:ml-6">
+                    <time datetime="2022-01-17T10:00">10:00 AM</time> -
+                    <time datetime="2022-01-17T10:15">10:15 AM</time>
+                </p>
+            </li>
+        </ol>
+    </section>
+</div>
diff --git a/application_ui/forms/select_menus/simple_native.html b/application_ui/forms/select_menus/simple_native.html
index e69de29..8261c16 100644
--- a/application_ui/forms/select_menus/simple_native.html
+++ b/application_ui/forms/select_menus/simple_native.html
@@ -0,0 +1,27 @@
+<label for="location" class="block text-sm/6 font-medium text-gray-900"
+    >Location</label
+>
+<div class="mt-2 grid grid-cols-1">
+    <select
+        id="location"
+        name="location"
+        class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-1.5 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-600 sm:text-sm/6"
+    >
+        <option>United States</option>
+        <option selected>Canada</option>
+        <option>Mexico</option>
+    </select>
+    <svg
+        viewBox="0 0 16 16"
+        fill="currentColor"
+        data-slot="icon"
+        aria-hidden="true"
+        class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4"
+    >
+        <path
+            d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
+            clip-rule="evenodd"
+            fill-rule="evenodd"
+        />
+    </svg>
+</div>
diff --git a/application_ui/navigation/breadcrumbs/contained.html b/application_ui/navigation/breadcrumbs/contained.html
new file mode 100644
index 0000000..4571a4c
--- /dev/null
+++ b/application_ui/navigation/breadcrumbs/contained.html
@@ -0,0 +1,61 @@
+<nav aria-label="Breadcrumb" class="flex">
+    <ol role="list" class="flex space-x-4 rounded-md bg-white px-6 shadow-sm">
+        <li class="flex">
+            <div class="flex items-center">
+                <a href="#" class="text-gray-400 hover:text-gray-500">
+                    <svg
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-5 shrink-0"
+                    >
+                        <path
+                            d="M9.293 2.293a1 1 0 0 1 1.414 0l7 7A1 1 0 0 1 17 11h-1v6a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6H3a1 1 0 0 1-.707-1.707l7-7Z"
+                            clip-rule="evenodd"
+                            fill-rule="evenodd"
+                        />
+                    </svg>
+                    <span class="sr-only">Home</span>
+                </a>
+            </div>
+        </li>
+        <li class="flex">
+            <div class="flex items-center">
+                <svg
+                    viewBox="0 0 24 44"
+                    fill="currentColor"
+                    preserveAspectRatio="none"
+                    aria-hidden="true"
+                    class="h-full w-6 shrink-0 text-gray-200"
+                >
+                    <path d="M.293 0l22 22-22 22h1.414l22-22-22-22H.293z" />
+                </svg>
+                <a
+                    href="#"
+                    class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
+                    >Projects</a
+                >
+            </div>
+        </li>
+        <li class="flex">
+            <div class="flex items-center">
+                <svg
+                    viewBox="0 0 24 44"
+                    fill="currentColor"
+                    preserveAspectRatio="none"
+                    aria-hidden="true"
+                    class="h-full w-6 shrink-0 text-gray-200"
+                >
+                    <path d="M.293 0l22 22-22 22h1.414l22-22-22-22H.293z" />
+                </svg>
+                <a
+                    href="#"
+                    aria-current="page"
+                    class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
+                    >Project Nero</a
+                >
+            </div>
+        </li>
+    </ol>
+</nav>
diff --git a/application_ui/navigation/breadcrumbs/full_width_bar.html b/application_ui/navigation/breadcrumbs/full_width_bar.html
new file mode 100644
index 0000000..beb5b8c
--- /dev/null
+++ b/application_ui/navigation/breadcrumbs/full_width_bar.html
@@ -0,0 +1,64 @@
+<nav aria-label="Breadcrumb" class="flex border-b border-gray-200 bg-white">
+    <ol
+        role="list"
+        class="mx-auto flex w-full max-w-(--breakpoint-xl) space-x-4 px-4 sm:px-6 lg:px-8"
+    >
+        <li class="flex">
+            <div class="flex items-center">
+                <a href="#" class="text-gray-400 hover:text-gray-500">
+                    <svg
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-5 shrink-0"
+                    >
+                        <path
+                            d="M9.293 2.293a1 1 0 0 1 1.414 0l7 7A1 1 0 0 1 17 11h-1v6a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6H3a1 1 0 0 1-.707-1.707l7-7Z"
+                            clip-rule="evenodd"
+                            fill-rule="evenodd"
+                        />
+                    </svg>
+                    <span class="sr-only">Home</span>
+                </a>
+            </div>
+        </li>
+        <li class="flex">
+            <div class="flex items-center">
+                <svg
+                    viewBox="0 0 24 44"
+                    fill="currentColor"
+                    preserveAspectRatio="none"
+                    aria-hidden="true"
+                    class="h-full w-6 shrink-0 text-gray-200"
+                >
+                    <path d="M.293 0l22 22-22 22h1.414l22-22-22-22H.293z" />
+                </svg>
+                <a
+                    href="#"
+                    class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
+                    >Projects</a
+                >
+            </div>
+        </li>
+        <li class="flex">
+            <div class="flex items-center">
+                <svg
+                    viewBox="0 0 24 44"
+                    fill="currentColor"
+                    preserveAspectRatio="none"
+                    aria-hidden="true"
+                    class="h-full w-6 shrink-0 text-gray-200"
+                >
+                    <path d="M.293 0l22 22-22 22h1.414l22-22-22-22H.293z" />
+                </svg>
+                <a
+                    href="#"
+                    aria-current="page"
+                    class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
+                    >Project Nero</a
+                >
+            </div>
+        </li>
+    </ol>
+</nav>
diff --git a/application_ui/navigation/breadcrumbs/simple_with_slashes.html b/application_ui/navigation/breadcrumbs/simple_with_slashes.html
new file mode 100644
index 0000000..e6c6b1c
--- /dev/null
+++ b/application_ui/navigation/breadcrumbs/simple_with_slashes.html
@@ -0,0 +1,59 @@
+<nav aria-label="Breadcrumb" class="flex">
+    <ol role="list" class="flex items-center space-x-4">
+        <li>
+            <div>
+                <a href="#" class="text-gray-400 hover:text-gray-500">
+                    <svg
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-5 shrink-0"
+                    >
+                        <path
+                            d="M9.293 2.293a1 1 0 0 1 1.414 0l7 7A1 1 0 0 1 17 11h-1v6a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6H3a1 1 0 0 1-.707-1.707l7-7Z"
+                            clip-rule="evenodd"
+                            fill-rule="evenodd"
+                        />
+                    </svg>
+                    <span class="sr-only">Home</span>
+                </a>
+            </div>
+        </li>
+        <li>
+            <div class="flex items-center">
+                <svg
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    class="size-5 shrink-0 text-gray-300"
+                >
+                    <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
+                </svg>
+                <a
+                    href="#"
+                    class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
+                    >Projects</a
+                >
+            </div>
+        </li>
+        <li>
+            <div class="flex items-center">
+                <svg
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    class="size-5 shrink-0 text-gray-300"
+                >
+                    <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
+                </svg>
+                <a
+                    href="#"
+                    aria-current="page"
+                    class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
+                    >Project Nero</a
+                >
+            </div>
+        </li>
+    </ol>
+</nav>
diff --git a/application_ui/navigation/breadcrumbs/wimple_with_chevrrons.html b/application_ui/navigation/breadcrumbs/wimple_with_chevrrons.html
new file mode 100644
index 0000000..fa4fb01
--- /dev/null
+++ b/application_ui/navigation/breadcrumbs/wimple_with_chevrrons.html
@@ -0,0 +1,69 @@
+<nav aria-label="Breadcrumb" class="flex">
+    <ol role="list" class="flex items-center space-x-4">
+        <li>
+            <div>
+                <a href="#" class="text-gray-400 hover:text-gray-500">
+                    <svg
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-5 shrink-0"
+                    >
+                        <path
+                            d="M9.293 2.293a1 1 0 0 1 1.414 0l7 7A1 1 0 0 1 17 11h-1v6a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6H3a1 1 0 0 1-.707-1.707l7-7Z"
+                            clip-rule="evenodd"
+                            fill-rule="evenodd"
+                        />
+                    </svg>
+                    <span class="sr-only">Home</span>
+                </a>
+            </div>
+        </li>
+        <li>
+            <div class="flex items-center">
+                <svg
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    data-slot="icon"
+                    aria-hidden="true"
+                    class="size-5 shrink-0 text-gray-400"
+                >
+                    <path
+                        d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                        clip-rule="evenodd"
+                        fill-rule="evenodd"
+                    />
+                </svg>
+                <a
+                    href="#"
+                    class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
+                    >Projects</a
+                >
+            </div>
+        </li>
+        <li>
+            <div class="flex items-center">
+                <svg
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    data-slot="icon"
+                    aria-hidden="true"
+                    class="size-5 shrink-0 text-gray-400"
+                >
+                    <path
+                        d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                        clip-rule="evenodd"
+                        fill-rule="evenodd"
+                    />
+                </svg>
+                <a
+                    href="#"
+                    aria-current="page"
+                    class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
+                    >Project Nero</a
+                >
+            </div>
+        </li>
+    </ol>
+</nav>
diff --git a/application_ui/navigation/command_palettes/dark_with_icons.html b/application_ui/navigation/command_palettes/dark_with_icons.html
new file mode 100644
index 0000000..9826b2b
--- /dev/null
+++ b/application_ui/navigation/command_palettes/dark_with_icons.html
@@ -0,0 +1,694 @@
+<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
+<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
+<button
+    command="show-modal"
+    commandfor="dialog"
+    class="rounded-md bg-white/80 px-2.5 py-1.5 text-sm font-semibold text-gray-900 hover:bg-white/90"
+>
+    Open command palette
+</button>
+
+<el-dialog>
+    <dialog id="dialog" class="backdrop:bg-transparent">
+        <el-dialog-backdrop
+            class="fixed inset-0 bg-gray-500/25 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
+        ></el-dialog-backdrop>
+
+        <div
+            tabindex="0"
+            class="fixed inset-0 w-screen overflow-y-auto p-4 focus:outline-none sm:p-6 md:p-20"
+        >
+            <el-dialog-panel
+                class="mx-auto block max-w-2xl transform overflow-hidden rounded-xl bg-gray-900 shadow-2xl transition-all data-closed:scale-95 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
+            >
+                <el-command-palette>
+                    <div class="grid grid-cols-1 border-b border-gray-500/20">
+                        <input
+                            type="text"
+                            autofocus
+                            placeholder="Search..."
+                            class="col-start-1 row-start-1 h-12 w-full bg-transparent pr-4 pl-11 text-base text-white outline-hidden placeholder:text-gray-500 sm:text-sm"
+                        />
+                        <svg
+                            viewBox="0 0 20 20"
+                            fill="currentColor"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="pointer-events-none col-start-1 row-start-1 ml-4 size-5 self-center text-gray-500"
+                        >
+                            <path
+                                d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z"
+                                clip-rule="evenodd"
+                                fill-rule="evenodd"
+                            />
+                        </svg>
+                    </div>
+
+                    <el-command-list
+                        class="block max-h-80 scroll-py-2 overflow-y-auto"
+                    >
+                        <el-defaults class="block divide-y divide-gray-500/20">
+                            <div class="p-2">
+                                <h2
+                                    class="mt-4 mb-2 px-3 text-xs font-semibold text-gray-200"
+                                >
+                                    Recent searches
+                                </h2>
+                                <div class="text-sm text-gray-400">
+                                    <a
+                                        href="#"
+                                        class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-800 aria-selected:text-white"
+                                    >
+                                        <svg
+                                            viewBox="0 0 24 24"
+                                            fill="none"
+                                            stroke="currentColor"
+                                            stroke-width="1.5"
+                                            data-slot="icon"
+                                            aria-hidden="true"
+                                            class="size-6 flex-none text-gray-500 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                        >
+                                            <path
+                                                d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                                stroke-linecap="round"
+                                                stroke-linejoin="round"
+                                            />
+                                        </svg>
+                                        <span class="ml-3 flex-auto truncate"
+                                            >Workflow Inc. / Website
+                                            Redesign</span
+                                        >
+                                        <span
+                                            aria-hidden="true"
+                                            class="ml-3 hidden flex-none text-gray-400 group-aria-selected:inline"
+                                            >Jump to...</span
+                                        >
+                                    </a>
+                                </div>
+                            </div>
+
+                            <div class="p-2">
+                                <h2 class="sr-only">Quick actions</h2>
+                                <div class="text-sm text-gray-400">
+                                    <a
+                                        href="#"
+                                        class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-800 aria-selected:text-white"
+                                    >
+                                        <svg
+                                            viewBox="0 0 24 24"
+                                            fill="none"
+                                            stroke="currentColor"
+                                            stroke-width="1.5"
+                                            data-slot="icon"
+                                            aria-hidden="true"
+                                            class="size-6 flex-none text-gray-500 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                        >
+                                            <path
+                                                d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
+                                                stroke-linecap="round"
+                                                stroke-linejoin="round"
+                                            />
+                                        </svg>
+                                        <span class="ml-3 flex-auto truncate"
+                                            >Add new file...</span
+                                        >
+                                        <span
+                                            aria-hidden="true"
+                                            class="ml-3 flex-none text-xs font-semibold text-gray-400"
+                                        >
+                                            <kbd class="font-sans">⌘</kbd
+                                            ><kbd class="font-sans">N</kbd>
+                                        </span>
+                                    </a>
+                                    <a
+                                        href="#"
+                                        class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-800 aria-selected:text-white"
+                                    >
+                                        <svg
+                                            viewBox="0 0 24 24"
+                                            fill="none"
+                                            stroke="currentColor"
+                                            stroke-width="1.5"
+                                            data-slot="icon"
+                                            aria-hidden="true"
+                                            class="size-6 flex-none text-gray-500 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                        >
+                                            <path
+                                                d="M12 10.5v6m3-3H9m4.06-7.19-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                                stroke-linecap="round"
+                                                stroke-linejoin="round"
+                                            />
+                                        </svg>
+                                        <span class="ml-3 flex-auto truncate"
+                                            >Add new folder...</span
+                                        >
+                                        <span
+                                            aria-hidden="true"
+                                            class="ml-3 flex-none text-xs font-semibold text-gray-400"
+                                        >
+                                            <kbd class="font-sans">⌘</kbd
+                                            ><kbd class="font-sans">F</kbd>
+                                        </span>
+                                    </a>
+                                    <a
+                                        href="#"
+                                        class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-800 aria-selected:text-white"
+                                    >
+                                        <svg
+                                            viewBox="0 0 24 24"
+                                            fill="none"
+                                            stroke="currentColor"
+                                            stroke-width="1.5"
+                                            data-slot="icon"
+                                            aria-hidden="true"
+                                            class="size-6 flex-none text-gray-500 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                        >
+                                            <path
+                                                d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5"
+                                                stroke-linecap="round"
+                                                stroke-linejoin="round"
+                                            />
+                                        </svg>
+                                        <span class="ml-3 flex-auto truncate"
+                                            >Add hashtag...</span
+                                        >
+                                        <span
+                                            aria-hidden="true"
+                                            class="ml-3 flex-none text-xs font-semibold text-gray-400"
+                                        >
+                                            <kbd class="font-sans">⌘</kbd
+                                            ><kbd class="font-sans">H</kbd>
+                                        </span>
+                                    </a>
+                                    <a
+                                        href="#"
+                                        class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-800 aria-selected:text-white"
+                                    >
+                                        <svg
+                                            viewBox="0 0 24 24"
+                                            fill="none"
+                                            stroke="currentColor"
+                                            stroke-width="1.5"
+                                            data-slot="icon"
+                                            aria-hidden="true"
+                                            class="size-6 flex-none text-gray-500 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                        >
+                                            <path
+                                                d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z"
+                                                stroke-linecap="round"
+                                                stroke-linejoin="round"
+                                            />
+                                            <path
+                                                d="M6 6h.008v.008H6V6Z"
+                                                stroke-linecap="round"
+                                                stroke-linejoin="round"
+                                            />
+                                        </svg>
+                                        <span class="ml-3 flex-auto truncate"
+                                            >Add label...</span
+                                        >
+                                        <span
+                                            aria-hidden="true"
+                                            class="ml-3 flex-none text-xs font-semibold text-gray-400"
+                                        >
+                                            <kbd class="font-sans">⌘</kbd
+                                            ><kbd class="font-sans">L</kbd>
+                                        </span>
+                                    </a>
+                                </div>
+                            </div>
+                        </el-defaults>
+
+                        <el-command-group
+                            hidden
+                            class="block p-2 text-sm text-gray-400"
+                        >
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-800 aria-selected:text-white"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-500 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Workflow Inc. / Website Redesign</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-gray-400 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-800 aria-selected:text-white"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-500 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Workflow Inc. / Open Graph Image</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-gray-400 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-800 aria-selected:text-white"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-500 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Workflow Inc. / Logo Design</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-gray-400 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-800 aria-selected:text-white"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-500 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Workflow Inc. / Advertising Campaign</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-gray-400 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-800 aria-selected:text-white"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-500 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Conglomerate Inc. / TV Ad Campaign</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-gray-400 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-800 aria-selected:text-white"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-500 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Conglomerate Inc. / Mobile App</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-gray-400 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-800 aria-selected:text-white"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-500 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Conglomerate Inc. / Product Design</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-gray-400 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-800 aria-selected:text-white"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-500 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Conglomerate Inc. / Intranet</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-gray-400 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-800 aria-selected:text-white"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-500 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Conglomerate Inc. / Custom
+                                    Programming</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-gray-400 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-800 aria-selected:text-white"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-500 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Multinational LLC / Creative Writing</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-gray-400 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-800 aria-selected:text-white"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-500 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Multinational LLC / Animation</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-gray-400 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-800 aria-selected:text-white"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-500 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Multinational LLC / Product
+                                    Illustration</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-gray-400 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-800 aria-selected:text-white"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-500 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Products Inc. / Video Production</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-gray-400 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-800 aria-selected:text-white"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-500 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Products Inc. / Print Brochure</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-gray-400 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-800 aria-selected:text-white"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-500 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Products Inc. / Documentation</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-gray-400 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                        </el-command-group>
+                    </el-command-list>
+
+                    <el-no-results
+                        hidden
+                        class="block px-6 py-14 text-center sm:px-14"
+                    >
+                        <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="mx-auto size-6 text-gray-500"
+                        >
+                            <path
+                                d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                        <p class="mt-4 text-sm text-gray-200">
+                            We couldn't find any projects with that term. Please
+                            try again.
+                        </p>
+                    </el-no-results>
+                </el-command-palette>
+            </el-dialog-panel>
+        </div>
+    </dialog>
+</el-dialog>
diff --git a/application_ui/navigation/command_palettes/semi_transparent_with_icons.html b/application_ui/navigation/command_palettes/semi_transparent_with_icons.html
new file mode 100644
index 0000000..0e43d62
--- /dev/null
+++ b/application_ui/navigation/command_palettes/semi_transparent_with_icons.html
@@ -0,0 +1,694 @@
+<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
+<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
+<button
+    command="show-modal"
+    commandfor="dialog"
+    class="rounded-md bg-white/80 px-2.5 py-1.5 text-sm font-semibold text-gray-900 hover:bg-white/90"
+>
+    Open command palette
+</button>
+
+<el-dialog>
+    <dialog id="dialog" class="backdrop:bg-transparent">
+        <el-dialog-backdrop
+            class="fixed inset-0 bg-gray-500/25 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
+        ></el-dialog-backdrop>
+
+        <div
+            tabindex="0"
+            class="fixed inset-0 w-screen overflow-y-auto p-4 focus:outline-none sm:p-6 md:p-20"
+        >
+            <el-dialog-panel
+                class="mx-auto block max-w-2xl transform overflow-hidden rounded-xl bg-white/80 shadow-2xl ring-1 ring-black/5 backdrop-blur-sm backdrop-filter transition-all data-closed:scale-95 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
+            >
+                <el-command-palette>
+                    <div class="grid grid-cols-1 border-b border-gray-500/10">
+                        <input
+                            type="text"
+                            autofocus
+                            placeholder="Search..."
+                            class="col-start-1 row-start-1 h-12 w-full bg-transparent pr-4 pl-11 text-base text-gray-900 outline-hidden placeholder:text-gray-500 sm:text-sm"
+                        />
+                        <svg
+                            viewBox="0 0 20 20"
+                            fill="currentColor"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="pointer-events-none col-start-1 row-start-1 ml-4 size-5 self-center text-gray-900/40"
+                        >
+                            <path
+                                d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z"
+                                clip-rule="evenodd"
+                                fill-rule="evenodd"
+                            />
+                        </svg>
+                    </div>
+
+                    <el-command-list
+                        class="block max-h-80 scroll-py-2 overflow-y-auto"
+                    >
+                        <el-defaults class="block divide-y divide-gray-500/10">
+                            <div class="p-2">
+                                <h2
+                                    class="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900"
+                                >
+                                    Recent searches
+                                </h2>
+                                <div class="text-sm text-gray-700">
+                                    <a
+                                        href="#"
+                                        class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-900/5 aria-selected:text-gray-900"
+                                    >
+                                        <svg
+                                            viewBox="0 0 24 24"
+                                            fill="none"
+                                            stroke="currentColor"
+                                            stroke-width="1.5"
+                                            data-slot="icon"
+                                            aria-hidden="true"
+                                            class="size-6 flex-none text-gray-900/40 group-aria-selected:text-gray-900"
+                                        >
+                                            <path
+                                                d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                                stroke-linecap="round"
+                                                stroke-linejoin="round"
+                                            />
+                                        </svg>
+                                        <span class="ml-3 flex-auto truncate"
+                                            >Workflow Inc. / Website
+                                            Redesign</span
+                                        >
+                                        <span
+                                            aria-hidden="true"
+                                            class="ml-3 hidden flex-none text-gray-500 group-aria-selected:inline"
+                                            >Jump to...</span
+                                        >
+                                    </a>
+                                </div>
+                            </div>
+
+                            <div class="p-2">
+                                <h2 class="sr-only">Quick actions</h2>
+                                <div class="text-sm text-gray-700">
+                                    <a
+                                        href="#"
+                                        class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-900/5 aria-selected:text-gray-900"
+                                    >
+                                        <svg
+                                            viewBox="0 0 24 24"
+                                            fill="none"
+                                            stroke="currentColor"
+                                            stroke-width="1.5"
+                                            data-slot="icon"
+                                            aria-hidden="true"
+                                            class="size-6 flex-none text-gray-900/40 group-aria-selected:text-gray-900"
+                                        >
+                                            <path
+                                                d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
+                                                stroke-linecap="round"
+                                                stroke-linejoin="round"
+                                            />
+                                        </svg>
+                                        <span class="ml-3 flex-auto truncate"
+                                            >Add new file...</span
+                                        >
+                                        <span
+                                            aria-hidden="true"
+                                            class="ml-3 flex-none text-xs font-semibold text-gray-500"
+                                        >
+                                            <kbd class="font-sans">⌘</kbd
+                                            ><kbd class="font-sans">N</kbd>
+                                        </span>
+                                    </a>
+                                    <a
+                                        href="#"
+                                        class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-900/5 aria-selected:text-gray-900"
+                                    >
+                                        <svg
+                                            viewBox="0 0 24 24"
+                                            fill="none"
+                                            stroke="currentColor"
+                                            stroke-width="1.5"
+                                            data-slot="icon"
+                                            aria-hidden="true"
+                                            class="size-6 flex-none text-gray-900/40 group-aria-selected:text-gray-900"
+                                        >
+                                            <path
+                                                d="M12 10.5v6m3-3H9m4.06-7.19-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                                stroke-linecap="round"
+                                                stroke-linejoin="round"
+                                            />
+                                        </svg>
+                                        <span class="ml-3 flex-auto truncate"
+                                            >Add new folder...</span
+                                        >
+                                        <span
+                                            aria-hidden="true"
+                                            class="ml-3 flex-none text-xs font-semibold text-gray-500"
+                                        >
+                                            <kbd class="font-sans">⌘</kbd
+                                            ><kbd class="font-sans">F</kbd>
+                                        </span>
+                                    </a>
+                                    <a
+                                        href="#"
+                                        class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-900/5 aria-selected:text-gray-900"
+                                    >
+                                        <svg
+                                            viewBox="0 0 24 24"
+                                            fill="none"
+                                            stroke="currentColor"
+                                            stroke-width="1.5"
+                                            data-slot="icon"
+                                            aria-hidden="true"
+                                            class="size-6 flex-none text-gray-900/40 group-aria-selected:text-gray-900"
+                                        >
+                                            <path
+                                                d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5"
+                                                stroke-linecap="round"
+                                                stroke-linejoin="round"
+                                            />
+                                        </svg>
+                                        <span class="ml-3 flex-auto truncate"
+                                            >Add hashtag...</span
+                                        >
+                                        <span
+                                            aria-hidden="true"
+                                            class="ml-3 flex-none text-xs font-semibold text-gray-500"
+                                        >
+                                            <kbd class="font-sans">⌘</kbd
+                                            ><kbd class="font-sans">H</kbd>
+                                        </span>
+                                    </a>
+                                    <a
+                                        href="#"
+                                        class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-900/5 aria-selected:text-gray-900"
+                                    >
+                                        <svg
+                                            viewBox="0 0 24 24"
+                                            fill="none"
+                                            stroke="currentColor"
+                                            stroke-width="1.5"
+                                            data-slot="icon"
+                                            aria-hidden="true"
+                                            class="size-6 flex-none text-gray-900/40 group-aria-selected:text-gray-900"
+                                        >
+                                            <path
+                                                d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z"
+                                                stroke-linecap="round"
+                                                stroke-linejoin="round"
+                                            />
+                                            <path
+                                                d="M6 6h.008v.008H6V6Z"
+                                                stroke-linecap="round"
+                                                stroke-linejoin="round"
+                                            />
+                                        </svg>
+                                        <span class="ml-3 flex-auto truncate"
+                                            >Add label...</span
+                                        >
+                                        <span
+                                            aria-hidden="true"
+                                            class="ml-3 flex-none text-xs font-semibold text-gray-500"
+                                        >
+                                            <kbd class="font-sans">⌘</kbd
+                                            ><kbd class="font-sans">L</kbd>
+                                        </span>
+                                    </a>
+                                </div>
+                            </div>
+                        </el-defaults>
+
+                        <el-command-group
+                            hidden
+                            class="block p-2 text-sm text-gray-700"
+                        >
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-900/5 aria-selected:text-gray-900"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-900/40 group-aria-selected:text-gray-900"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Workflow Inc. / Website Redesign</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-gray-500 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-900/5 aria-selected:text-gray-900"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-900/40 group-aria-selected:text-gray-900"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Workflow Inc. / Open Graph Image</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-gray-500 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-900/5 aria-selected:text-gray-900"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-900/40 group-aria-selected:text-gray-900"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Workflow Inc. / Logo Design</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-gray-500 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-900/5 aria-selected:text-gray-900"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-900/40 group-aria-selected:text-gray-900"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Workflow Inc. / Advertising Campaign</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-gray-500 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-900/5 aria-selected:text-gray-900"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-900/40 group-aria-selected:text-gray-900"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Conglomerate Inc. / TV Ad Campaign</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-gray-500 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-900/5 aria-selected:text-gray-900"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-900/40 group-aria-selected:text-gray-900"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Conglomerate Inc. / Mobile App</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-gray-500 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-900/5 aria-selected:text-gray-900"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-900/40 group-aria-selected:text-gray-900"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Conglomerate Inc. / Product Design</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-gray-500 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-900/5 aria-selected:text-gray-900"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-900/40 group-aria-selected:text-gray-900"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Conglomerate Inc. / Intranet</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-gray-500 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-900/5 aria-selected:text-gray-900"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-900/40 group-aria-selected:text-gray-900"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Conglomerate Inc. / Custom
+                                    Programming</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-gray-500 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-900/5 aria-selected:text-gray-900"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-900/40 group-aria-selected:text-gray-900"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Multinational LLC / Creative Writing</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-gray-500 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-900/5 aria-selected:text-gray-900"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-900/40 group-aria-selected:text-gray-900"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Multinational LLC / Animation</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-gray-500 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-900/5 aria-selected:text-gray-900"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-900/40 group-aria-selected:text-gray-900"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Multinational LLC / Product
+                                    Illustration</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-gray-500 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-900/5 aria-selected:text-gray-900"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-900/40 group-aria-selected:text-gray-900"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Products Inc. / Video Production</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-gray-500 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-900/5 aria-selected:text-gray-900"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-900/40 group-aria-selected:text-gray-900"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Products Inc. / Print Brochure</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-gray-500 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-900/5 aria-selected:text-gray-900"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-900/40 group-aria-selected:text-gray-900"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Products Inc. / Documentation</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-gray-500 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                        </el-command-group>
+                    </el-command-list>
+
+                    <el-no-results
+                        hidden
+                        class="block px-6 py-14 text-center sm:px-14"
+                    >
+                        <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="mx-auto size-6 text-gray-900/40"
+                        >
+                            <path
+                                d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                        <p class="mt-4 text-sm text-gray-900">
+                            We couldn't find any projects with that term. Please
+                            try again.
+                        </p>
+                    </el-no-results>
+                </el-command-palette>
+            </el-dialog-panel>
+        </div>
+    </dialog>
+</el-dialog>
diff --git a/application_ui/navigation/command_palettes/simple.html b/application_ui/navigation/command_palettes/simple.html
new file mode 100644
index 0000000..84ab5fa
--- /dev/null
+++ b/application_ui/navigation/command_palettes/simple.html
@@ -0,0 +1,218 @@
+<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
+<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
+<button
+    command="show-modal"
+    commandfor="dialog"
+    class="rounded-md bg-white/80 px-2.5 py-1.5 text-sm font-semibold text-gray-900 hover:bg-white/90"
+>
+    Open command palette
+</button>
+
+<el-dialog>
+    <dialog id="dialog" class="backdrop:bg-transparent">
+        <el-dialog-backdrop
+            class="fixed inset-0 bg-gray-500/25 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
+        ></el-dialog-backdrop>
+
+        <div
+            tabindex="0"
+            class="fixed inset-0 w-screen overflow-y-auto p-4 focus:outline-none sm:p-6 md:p-20"
+        >
+            <el-dialog-panel
+                class="mx-auto block max-w-xl transform overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black/5 transition-all data-closed:scale-95 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
+            >
+                <el-command-palette>
+                    <div class="grid grid-cols-1 border-b border-gray-100">
+                        <input
+                            type="text"
+                            autofocus
+                            placeholder="Search..."
+                            class="col-start-1 row-start-1 h-12 w-full pr-4 pl-11 text-base text-gray-900 outline-hidden placeholder:text-gray-400 sm:text-sm"
+                        />
+                        <svg
+                            viewBox="0 0 20 20"
+                            fill="currentColor"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="pointer-events-none col-start-1 row-start-1 ml-4 size-5 self-center text-gray-400"
+                        >
+                            <path
+                                d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z"
+                                clip-rule="evenodd"
+                                fill-rule="evenodd"
+                            />
+                        </svg>
+                    </div>
+
+                    <el-command-list
+                        hidden
+                        class="block max-h-72 scroll-py-2 overflow-y-auto py-2 text-sm text-gray-800"
+                    >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Leslie Alexander</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Michael Foster</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Dries Vincent</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Lindsay Walton</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Courtney Henry</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Tom Cook</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Whitney Francis</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Leonard Krasner</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Floyd Miles</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Emily Selman</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Kristin Watson</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Emma Dorsey</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Alicia Bell</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Jenny Wilson</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Anna Roberts</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Benjamin Russel</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Jeffrey Webb</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Kathryn Murphy</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Lawrence Hunter</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Yvette Armstrong</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Angela Fisher</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Blake Reid</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Hector Gibbons</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Fabricio Mendes</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Jillian Steward</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Chelsea Hagon</a
+                        >
+                    </el-command-list>
+
+                    <el-no-results
+                        hidden
+                        class="block p-4 text-sm text-gray-500"
+                        >No people found.</el-no-results
+                    >
+                </el-command-palette>
+            </el-dialog-panel>
+        </div>
+    </dialog>
+</el-dialog>
diff --git a/application_ui/navigation/command_palettes/simple_with_padding.html b/application_ui/navigation/command_palettes/simple_with_padding.html
new file mode 100644
index 0000000..adf1e59
--- /dev/null
+++ b/application_ui/navigation/command_palettes/simple_with_padding.html
@@ -0,0 +1,221 @@
+<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
+<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
+<button
+    command="show-modal"
+    commandfor="dialog"
+    class="rounded-md bg-white/80 px-2.5 py-1.5 text-sm font-semibold text-gray-900 hover:bg-white/90"
+>
+    Open command palette
+</button>
+
+<el-dialog>
+    <dialog id="dialog" class="backdrop:bg-transparent">
+        <el-dialog-backdrop
+            class="fixed inset-0 bg-gray-500/25 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
+        ></el-dialog-backdrop>
+
+        <div
+            tabindex="0"
+            class="fixed inset-0 w-screen overflow-y-auto p-4 focus:outline-none sm:p-6 md:p-20"
+        >
+            <el-dialog-panel
+                class="mx-auto block max-w-xl transform rounded-xl bg-white p-2 shadow-2xl ring-1 ring-black/5 transition-all data-closed:scale-95 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
+            >
+                <el-command-palette>
+                    <input
+                        type="text"
+                        autofocus
+                        placeholder="Search..."
+                        class="w-full rounded-md bg-gray-100 px-4 py-2.5 text-gray-900 outline-hidden placeholder:text-gray-500 sm:text-sm"
+                    />
+
+                    <el-command-list
+                        hidden
+                        class="-mb-2 block max-h-72 scroll-py-2 overflow-y-auto py-2 text-sm text-gray-800"
+                    >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Leslie Alexander</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Michael Foster</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Dries Vincent</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Lindsay Walton</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Courtney Henry</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Tom Cook</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Whitney Francis</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Leonard Krasner</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Floyd Miles</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Emily Selman</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Kristin Watson</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Emma Dorsey</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Alicia Bell</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Jenny Wilson</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Anna Roberts</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Benjamin Russel</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Jeffrey Webb</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Kathryn Murphy</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Lawrence Hunter</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Yvette Armstrong</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Angela Fisher</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Blake Reid</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Hector Gibbons</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Fabricio Mendes</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Jillian Steward</a
+                        >
+                        <a
+                            href="#"
+                            hidden
+                            class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >Chelsea Hagon</a
+                        >
+                    </el-command-list>
+
+                    <el-no-results
+                        hidden
+                        class="block px-4 py-14 text-center sm:px-14"
+                    >
+                        <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="mx-auto size-6 text-gray-400"
+                        >
+                            <path
+                                d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                        <p class="mt-4 text-sm text-gray-900">
+                            No people found using that search term.
+                        </p>
+                    </el-no-results>
+                </el-command-palette>
+            </el-dialog-panel>
+        </div>
+    </dialog>
+</el-dialog>
diff --git a/application_ui/navigation/command_palettes/with_footer.html b/application_ui/navigation/command_palettes/with_footer.html
new file mode 100644
index 0000000..acbbcf0
--- /dev/null
+++ b/application_ui/navigation/command_palettes/with_footer.html
@@ -0,0 +1,978 @@
+<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
+<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
+<script type="module">
+    function onReady() {
+        let command = document.getElementById("command");
+
+        command.querySelector("input").addEventListener("input", (event) => {
+            let value = event.target.value;
+            if (value === "?") {
+                command.dataset.mode = "help";
+            } else if (value.startsWith("#")) {
+                command.dataset.mode = "project";
+            } else if (value.startsWith(">")) {
+                command.dataset.mode = "user";
+            } else {
+                delete command.dataset.mode;
+            }
+        });
+
+        command.setFilterCallback(({ query, node, content }) => {
+            if (query === "?") {
+                return false;
+            }
+            if (query.startsWith("#")) {
+                return (
+                    node.dataset.type === "project" &&
+                    content.toLowerCase().includes(query.slice(1).toLowerCase())
+                );
+            }
+            if (query.startsWith(">")) {
+                return (
+                    node.dataset.type === "user" &&
+                    content.toLowerCase().includes(query.slice(1).toLowerCase())
+                );
+            }
+            return content.toLowerCase().includes(query.toLowerCase());
+        });
+    }
+
+    if (customElements.get("el-command")) {
+        onReady();
+    } else {
+        window.addEventListener("elements:ready", onReady);
+    }
+</script>
+
+<button
+    command="show-modal"
+    commandfor="dialog"
+    class="rounded-md bg-white/80 px-2.5 py-1.5 text-sm font-semibold text-gray-900 hover:bg-white/90"
+>
+    Open command palette
+</button>
+
+<el-dialog>
+    <dialog id="dialog" class="backdrop:bg-transparent">
+        <el-dialog-backdrop
+            class="fixed inset-0 bg-gray-500/25 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
+        ></el-dialog-backdrop>
+
+        <div
+            tabindex="0"
+            class="fixed inset-0 w-screen overflow-y-auto p-4 focus:outline-none sm:p-6 md:p-20"
+        >
+            <el-dialog-panel
+                class="mx-auto block max-w-xl transform overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black/5 transition-all data-closed:scale-95 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
+            >
+                <el-command-palette
+                    id="command"
+                    class="divide-y divide-gray-100"
+                >
+                    <div class="grid grid-cols-1">
+                        <input
+                            type="text"
+                            autofocus
+                            placeholder="Search..."
+                            class="col-start-1 row-start-1 h-12 w-full pr-4 pl-11 text-base text-gray-900 outline-hidden placeholder:text-gray-400 sm:text-sm"
+                        />
+                        <svg
+                            viewBox="0 0 20 20"
+                            fill="currentColor"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="pointer-events-none col-start-1 row-start-1 ml-4 size-5 self-center text-gray-400"
+                        >
+                            <path
+                                d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z"
+                                clip-rule="evenodd"
+                                fill-rule="evenodd"
+                            />
+                        </svg>
+                    </div>
+
+                    <el-command-list
+                        hidden
+                        class="flex max-h-80 transform-gpu scroll-py-10 scroll-pb-2 flex-col gap-4 overflow-y-auto p-4 pb-2"
+                    >
+                        <el-command-group
+                            hidden
+                            aria-labelledby="projects-label"
+                        >
+                            <h2
+                                id="projects-label"
+                                class="text-xs font-semibold text-gray-900"
+                            >
+                                Projects
+                            </h2>
+                            <div class="-mx-4 mt-2 text-sm text-gray-700">
+                                <a
+                                    href="#"
+                                    hidden
+                                    data-type="project"
+                                    class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                >
+                                    <svg
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="1.5"
+                                        data-slot="icon"
+                                        aria-hidden="true"
+                                        class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                    >
+                                        <path
+                                            d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                        />
+                                    </svg>
+                                    <span class="ml-3 flex-auto truncate"
+                                        >Workflow Inc. / Website Redesign</span
+                                    >
+                                </a>
+                                <a
+                                    href="#"
+                                    hidden
+                                    data-type="project"
+                                    class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                >
+                                    <svg
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="1.5"
+                                        data-slot="icon"
+                                        aria-hidden="true"
+                                        class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                    >
+                                        <path
+                                            d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                        />
+                                    </svg>
+                                    <span class="ml-3 flex-auto truncate"
+                                        >Workflow Inc. / Open Graph Image</span
+                                    >
+                                </a>
+                                <a
+                                    href="#"
+                                    hidden
+                                    data-type="project"
+                                    class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                >
+                                    <svg
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="1.5"
+                                        data-slot="icon"
+                                        aria-hidden="true"
+                                        class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                    >
+                                        <path
+                                            d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                        />
+                                    </svg>
+                                    <span class="ml-3 flex-auto truncate"
+                                        >Workflow Inc. / Logo Design</span
+                                    >
+                                </a>
+                                <a
+                                    href="#"
+                                    hidden
+                                    data-type="project"
+                                    class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                >
+                                    <svg
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="1.5"
+                                        data-slot="icon"
+                                        aria-hidden="true"
+                                        class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                    >
+                                        <path
+                                            d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                        />
+                                    </svg>
+                                    <span class="ml-3 flex-auto truncate"
+                                        >Workflow Inc. / Advertising
+                                        Campaign</span
+                                    >
+                                </a>
+                                <a
+                                    href="#"
+                                    hidden
+                                    data-type="project"
+                                    class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                >
+                                    <svg
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="1.5"
+                                        data-slot="icon"
+                                        aria-hidden="true"
+                                        class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                    >
+                                        <path
+                                            d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                        />
+                                    </svg>
+                                    <span class="ml-3 flex-auto truncate"
+                                        >Conglomerate Inc. / TV Ad
+                                        Campaign</span
+                                    >
+                                </a>
+                                <a
+                                    href="#"
+                                    hidden
+                                    data-type="project"
+                                    class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                >
+                                    <svg
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="1.5"
+                                        data-slot="icon"
+                                        aria-hidden="true"
+                                        class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                    >
+                                        <path
+                                            d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                        />
+                                    </svg>
+                                    <span class="ml-3 flex-auto truncate"
+                                        >Conglomerate Inc. / Mobile App</span
+                                    >
+                                </a>
+                                <a
+                                    href="#"
+                                    hidden
+                                    data-type="project"
+                                    class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                >
+                                    <svg
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="1.5"
+                                        data-slot="icon"
+                                        aria-hidden="true"
+                                        class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                    >
+                                        <path
+                                            d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                        />
+                                    </svg>
+                                    <span class="ml-3 flex-auto truncate"
+                                        >Conglomerate Inc. / Product
+                                        Design</span
+                                    >
+                                </a>
+                                <a
+                                    href="#"
+                                    hidden
+                                    data-type="project"
+                                    class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                >
+                                    <svg
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="1.5"
+                                        data-slot="icon"
+                                        aria-hidden="true"
+                                        class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                    >
+                                        <path
+                                            d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                        />
+                                    </svg>
+                                    <span class="ml-3 flex-auto truncate"
+                                        >Conglomerate Inc. / Intranet</span
+                                    >
+                                </a>
+                                <a
+                                    href="#"
+                                    hidden
+                                    data-type="project"
+                                    class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                >
+                                    <svg
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="1.5"
+                                        data-slot="icon"
+                                        aria-hidden="true"
+                                        class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                    >
+                                        <path
+                                            d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                        />
+                                    </svg>
+                                    <span class="ml-3 flex-auto truncate"
+                                        >Conglomerate Inc. / Custom
+                                        Programming</span
+                                    >
+                                </a>
+                                <a
+                                    href="#"
+                                    hidden
+                                    data-type="project"
+                                    class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                >
+                                    <svg
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="1.5"
+                                        data-slot="icon"
+                                        aria-hidden="true"
+                                        class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                    >
+                                        <path
+                                            d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                        />
+                                    </svg>
+                                    <span class="ml-3 flex-auto truncate"
+                                        >Multinational LLC. / Creative
+                                        Writing</span
+                                    >
+                                </a>
+                                <a
+                                    href="#"
+                                    hidden
+                                    data-type="project"
+                                    class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                >
+                                    <svg
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="1.5"
+                                        data-slot="icon"
+                                        aria-hidden="true"
+                                        class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                    >
+                                        <path
+                                            d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                        />
+                                    </svg>
+                                    <span class="ml-3 flex-auto truncate"
+                                        >Multinational LLC. / Animation</span
+                                    >
+                                </a>
+                                <a
+                                    href="#"
+                                    hidden
+                                    data-type="project"
+                                    class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                >
+                                    <svg
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="1.5"
+                                        data-slot="icon"
+                                        aria-hidden="true"
+                                        class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                    >
+                                        <path
+                                            d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                        />
+                                    </svg>
+                                    <span class="ml-3 flex-auto truncate"
+                                        >Multinational LLC. / Product
+                                        Illustration</span
+                                    >
+                                </a>
+                                <a
+                                    href="#"
+                                    hidden
+                                    data-type="project"
+                                    class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                >
+                                    <svg
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="1.5"
+                                        data-slot="icon"
+                                        aria-hidden="true"
+                                        class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                    >
+                                        <path
+                                            d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                        />
+                                    </svg>
+                                    <span class="ml-3 flex-auto truncate"
+                                        >Products Inc. / Video Production</span
+                                    >
+                                </a>
+                                <a
+                                    href="#"
+                                    hidden
+                                    data-type="project"
+                                    class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                >
+                                    <svg
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="1.5"
+                                        data-slot="icon"
+                                        aria-hidden="true"
+                                        class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                    >
+                                        <path
+                                            d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                        />
+                                    </svg>
+                                    <span class="ml-3 flex-auto truncate"
+                                        >Products Inc. / Print Brochure</span
+                                    >
+                                </a>
+                                <a
+                                    href="#"
+                                    hidden
+                                    data-type="project"
+                                    class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                >
+                                    <svg
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="1.5"
+                                        data-slot="icon"
+                                        aria-hidden="true"
+                                        class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                    >
+                                        <path
+                                            d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                        />
+                                    </svg>
+                                    <span class="ml-3 flex-auto truncate"
+                                        >Products Inc. / Documentation</span
+                                    >
+                                </a>
+                            </div>
+                        </el-command-group>
+
+                        <el-command-group hidden aria-labelledby="users-label">
+                            <h2
+                                id="users-label"
+                                class="text-xs font-semibold text-gray-900"
+                            >
+                                Users
+                            </h2>
+                            <div class="-mx-4 mt-2 text-sm text-gray-700">
+                                <a
+                                    href="#"
+                                    hidden
+                                    data-type="user"
+                                    class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                >
+                                    <img
+                                        src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                        alt=""
+                                        class="size-6 flex-none rounded-full"
+                                    />
+                                    <span class="ml-3 flex-auto truncate"
+                                        >Leslie Alexander</span
+                                    >
+                                </a>
+                                <a
+                                    href="#"
+                                    hidden
+                                    data-type="user"
+                                    class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                >
+                                    <img
+                                        src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                        alt=""
+                                        class="size-6 flex-none rounded-full"
+                                    />
+                                    <span class="ml-3 flex-auto truncate"
+                                        >Michael Foster</span
+                                    >
+                                </a>
+                                <a
+                                    href="#"
+                                    hidden
+                                    data-type="user"
+                                    class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                >
+                                    <img
+                                        src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                        alt=""
+                                        class="size-6 flex-none rounded-full"
+                                    />
+                                    <span class="ml-3 flex-auto truncate"
+                                        >Dries Vincent</span
+                                    >
+                                </a>
+                                <a
+                                    href="#"
+                                    hidden
+                                    data-type="user"
+                                    class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                >
+                                    <img
+                                        src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                        alt=""
+                                        class="size-6 flex-none rounded-full"
+                                    />
+                                    <span class="ml-3 flex-auto truncate"
+                                        >Lindsay Walton</span
+                                    >
+                                </a>
+                                <a
+                                    href="#"
+                                    hidden
+                                    data-type="user"
+                                    class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                >
+                                    <img
+                                        src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                        alt=""
+                                        class="size-6 flex-none rounded-full"
+                                    />
+                                    <span class="ml-3 flex-auto truncate"
+                                        >Courtney Henry</span
+                                    >
+                                </a>
+                                <a
+                                    href="#"
+                                    hidden
+                                    data-type="user"
+                                    class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                >
+                                    <img
+                                        src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                        alt=""
+                                        class="size-6 flex-none rounded-full"
+                                    />
+                                    <span class="ml-3 flex-auto truncate"
+                                        >Tom Cook</span
+                                    >
+                                </a>
+                                <a
+                                    href="#"
+                                    hidden
+                                    data-type="user"
+                                    class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                >
+                                    <img
+                                        src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                        alt=""
+                                        class="size-6 flex-none rounded-full"
+                                    />
+                                    <span class="ml-3 flex-auto truncate"
+                                        >Whitney Francis</span
+                                    >
+                                </a>
+                                <a
+                                    href="#"
+                                    hidden
+                                    data-type="user"
+                                    class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                >
+                                    <img
+                                        src="https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                        alt=""
+                                        class="size-6 flex-none rounded-full"
+                                    />
+                                    <span class="ml-3 flex-auto truncate"
+                                        >Leonard Krasner</span
+                                    >
+                                </a>
+                                <a
+                                    href="#"
+                                    hidden
+                                    data-type="user"
+                                    class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                >
+                                    <img
+                                        src="https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                        alt=""
+                                        class="size-6 flex-none rounded-full"
+                                    />
+                                    <span class="ml-3 flex-auto truncate"
+                                        >Floyd Miles</span
+                                    >
+                                </a>
+                                <a
+                                    href="#"
+                                    hidden
+                                    data-type="user"
+                                    class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                >
+                                    <img
+                                        src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                        alt=""
+                                        class="size-6 flex-none rounded-full"
+                                    />
+                                    <span class="ml-3 flex-auto truncate"
+                                        >Emily Selman</span
+                                    >
+                                </a>
+                                <a
+                                    href="#"
+                                    hidden
+                                    data-type="user"
+                                    class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                >
+                                    <img
+                                        src="https://images.unsplash.com/photo-1500917293891-ef795e70e1f6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                        alt=""
+                                        class="size-6 flex-none rounded-full"
+                                    />
+                                    <span class="ml-3 flex-auto truncate"
+                                        >Kristin Watson</span
+                                    >
+                                </a>
+                                <a
+                                    href="#"
+                                    hidden
+                                    data-type="user"
+                                    class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                >
+                                    <img
+                                        src="https://images.unsplash.com/photo-1505840717430-882ce147ef2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                        alt=""
+                                        class="size-6 flex-none rounded-full"
+                                    />
+                                    <span class="ml-3 flex-auto truncate"
+                                        >Emma Dorsey</span
+                                    >
+                                </a>
+                                <a
+                                    href="#"
+                                    hidden
+                                    data-type="user"
+                                    class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                >
+                                    <img
+                                        src="https://images.unsplash.com/photo-1509783236416-c9ad59bae472?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                        alt=""
+                                        class="size-6 flex-none rounded-full"
+                                    />
+                                    <span class="ml-3 flex-auto truncate"
+                                        >Alicia Bell</span
+                                    >
+                                </a>
+                                <a
+                                    href="#"
+                                    hidden
+                                    data-type="user"
+                                    class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                >
+                                    <img
+                                        src="https://images.unsplash.com/photo-1507101105822-7472b28e22ac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                        alt=""
+                                        class="size-6 flex-none rounded-full"
+                                    />
+                                    <span class="ml-3 flex-auto truncate"
+                                        >Jenny Wilson</span
+                                    >
+                                </a>
+                                <a
+                                    href="#"
+                                    hidden
+                                    data-type="user"
+                                    class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                >
+                                    <img
+                                        src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                        alt=""
+                                        class="size-6 flex-none rounded-full"
+                                    />
+                                    <span class="ml-3 flex-auto truncate"
+                                        >Anna Roberts</span
+                                    >
+                                </a>
+                                <a
+                                    href="#"
+                                    hidden
+                                    data-type="user"
+                                    class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                >
+                                    <img
+                                        src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                        alt=""
+                                        class="size-6 flex-none rounded-full"
+                                    />
+                                    <span class="ml-3 flex-auto truncate"
+                                        >Benjamin Russel</span
+                                    >
+                                </a>
+                                <a
+                                    href="#"
+                                    hidden
+                                    data-type="user"
+                                    class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                >
+                                    <img
+                                        src="https://images.unsplash.com/photo-1517070208541-6ddc4d3efbcb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                        alt=""
+                                        class="size-6 flex-none rounded-full"
+                                    />
+                                    <span class="ml-3 flex-auto truncate"
+                                        >Jeffrey Webb</span
+                                    >
+                                </a>
+                                <a
+                                    href="#"
+                                    hidden
+                                    data-type="user"
+                                    class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                >
+                                    <img
+                                        src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                        alt=""
+                                        class="size-6 flex-none rounded-full"
+                                    />
+                                    <span class="ml-3 flex-auto truncate"
+                                        >Kathryn Murphy</span
+                                    >
+                                </a>
+                                <a
+                                    href="#"
+                                    hidden
+                                    data-type="user"
+                                    class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                >
+                                    <img
+                                        src="https://images.unsplash.com/photo-1513910367299-bce8d8a0ebf6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                        alt=""
+                                        class="size-6 flex-none rounded-full"
+                                    />
+                                    <span class="ml-3 flex-auto truncate"
+                                        >Lawrence Hunter</span
+                                    >
+                                </a>
+                                <a
+                                    href="#"
+                                    hidden
+                                    data-type="user"
+                                    class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                >
+                                    <img
+                                        src="https://images.unsplash.com/photo-1506980595904-70325b7fdd90?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                        alt=""
+                                        class="size-6 flex-none rounded-full"
+                                    />
+                                    <span class="ml-3 flex-auto truncate"
+                                        >Yvette Armstrong</span
+                                    >
+                                </a>
+                                <a
+                                    href="#"
+                                    hidden
+                                    data-type="user"
+                                    class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                >
+                                    <img
+                                        src="https://images.unsplash.com/photo-1501031170107-cfd33f0cbdcc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                        alt=""
+                                        class="size-6 flex-none rounded-full"
+                                    />
+                                    <span class="ml-3 flex-auto truncate"
+                                        >Angela Fisher</span
+                                    >
+                                </a>
+                                <a
+                                    href="#"
+                                    hidden
+                                    data-type="user"
+                                    class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                >
+                                    <img
+                                        src="https://images.unsplash.com/photo-1520785643438-5bf77931f493?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                        alt=""
+                                        class="size-6 flex-none rounded-full"
+                                    />
+                                    <span class="ml-3 flex-auto truncate"
+                                        >Blake Reid</span
+                                    >
+                                </a>
+                                <a
+                                    href="#"
+                                    hidden
+                                    data-type="user"
+                                    class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                >
+                                    <img
+                                        src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                        alt=""
+                                        class="size-6 flex-none rounded-full"
+                                    />
+                                    <span class="ml-3 flex-auto truncate"
+                                        >Hector Gibbons</span
+                                    >
+                                </a>
+                                <a
+                                    href="#"
+                                    hidden
+                                    data-type="user"
+                                    class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                >
+                                    <img
+                                        src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                        alt=""
+                                        class="size-6 flex-none rounded-full"
+                                    />
+                                    <span class="ml-3 flex-auto truncate"
+                                        >Fabricio Mendes</span
+                                    >
+                                </a>
+                                <a
+                                    href="#"
+                                    hidden
+                                    data-type="user"
+                                    class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                >
+                                    <img
+                                        src="https://images.unsplash.com/photo-1504703395950-b89145a5425b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                        alt=""
+                                        class="size-6 flex-none rounded-full"
+                                    />
+                                    <span class="ml-3 flex-auto truncate"
+                                        >Jillian Steward</span
+                                    >
+                                </a>
+                                <a
+                                    href="#"
+                                    hidden
+                                    data-type="user"
+                                    class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                >
+                                    <img
+                                        src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                        alt=""
+                                        class="size-6 flex-none rounded-full"
+                                    />
+                                    <span class="ml-3 flex-auto truncate"
+                                        >Chelsea Hagon</span
+                                    >
+                                </a>
+                            </div>
+                        </el-command-group>
+                    </el-command-list>
+
+                    <div
+                        class="hidden px-6 py-14 text-center text-sm in-data-[mode=help]:block sm:px-14"
+                    >
+                        <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="mx-auto size-6 text-gray-400"
+                        >
+                            <path
+                                d="M16.712 4.33a9.027 9.027 0 0 1 1.652 1.306c.51.51.944 1.064 1.306 1.652M16.712 4.33l-3.448 4.138m3.448-4.138a9.014 9.014 0 0 0-9.424 0M19.67 7.288l-4.138 3.448m4.138-3.448a9.014 9.014 0 0 1 0 9.424m-4.138-5.976a3.736 3.736 0 0 0-.88-1.388 3.737 3.737 0 0 0-1.388-.88m2.268 2.268a3.765 3.765 0 0 1 0 2.528m-2.268-4.796a3.765 3.765 0 0 0-2.528 0m4.796 4.796c-.181.506-.475.982-.88 1.388a3.736 3.736 0 0 1-1.388.88m2.268-2.268 4.138 3.448m0 0a9.027 9.027 0 0 1-1.306 1.652c-.51.51-1.064.944-1.652 1.306m0 0-3.448-4.138m3.448 4.138a9.014 9.014 0 0 1-9.424 0m5.976-4.138a3.765 3.765 0 0 1-2.528 0m0 0a3.736 3.736 0 0 1-1.388-.88 3.737 3.737 0 0 1-.88-1.388m2.268 2.268L7.288 19.67m0 0a9.024 9.024 0 0 1-1.652-1.306 9.027 9.027 0 0 1-1.306-1.652m0 0 4.138-3.448M4.33 16.712a9.014 9.014 0 0 1 0-9.424m4.138 5.976a3.765 3.765 0 0 1 0-2.528m0 0c.181-.506.475-.982.88-1.388a3.736 3.736 0 0 1 1.388-.88m-2.268 2.268L4.33 7.288m6.406 1.18L7.288 4.33m0 0a9.024 9.024 0 0 0-1.652 1.306A9.025 9.025 0 0 0 4.33 7.288"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                        <p class="mt-4 font-semibold text-gray-900">
+                            Help with searching
+                        </p>
+                        <p class="mt-2 text-gray-500">
+                            Use this tool to quickly search for users and
+                            projects across our entire platform. You can also
+                            use the search modifiers found in the footer below
+                            to limit the results to just users or projects.
+                        </p>
+                    </div>
+
+                    <el-no-results
+                        hidden
+                        class="block px-6 py-14 text-center text-sm in-data-[mode=help]:hidden sm:px-14"
+                    >
+                        <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="mx-auto size-6 text-gray-400"
+                        >
+                            <path
+                                d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                        <p class="mt-4 font-semibold text-gray-900">
+                            No results found
+                        </p>
+                        <p class="mt-2 text-gray-500">
+                            We couldn't find anything with that term. Please try
+                            again.
+                        </p>
+                    </el-no-results>
+
+                    <div
+                        class="flex flex-wrap items-center bg-gray-50 px-4 py-2.5 text-xs text-gray-700"
+                    >
+                        Type
+                        <kbd
+                            class="mx-1 flex size-5 items-center justify-center rounded-sm border border-gray-400 bg-white font-semibold text-gray-900 in-data-[mode=project]:border-indigo-600 in-data-[mode=project]:text-indigo-600 sm:mx-2"
+                            >#</kbd
+                        >
+                        <span class="sm:hidden">for projects,</span
+                        ><span class="hidden sm:inline"
+                            >to access projects,</span
+                        ><kbd
+                            class="mx-1 flex size-5 items-center justify-center rounded-sm border border-gray-400 bg-white font-semibold text-gray-900 in-data-[mode=user]:border-indigo-600 in-data-[mode=user]:text-indigo-600 sm:mx-2"
+                            >&gt;</kbd
+                        >
+                        for users, and
+                        <kbd
+                            class="mx-1 flex size-5 items-center justify-center rounded-sm border border-gray-400 bg-white font-semibold text-gray-900 in-data-[mode=help]:border-indigo-600 in-data-[mode=help]:text-indigo-600 sm:mx-2"
+                            >?</kbd
+                        >
+                        for help.
+                    </div>
+                </el-command-palette>
+            </el-dialog-panel>
+        </div>
+    </dialog>
+</el-dialog>
diff --git a/application_ui/navigation/command_palettes/with_groups.html b/application_ui/navigation/command_palettes/with_groups.html
new file mode 100644
index 0000000..be4ef60
--- /dev/null
+++ b/application_ui/navigation/command_palettes/with_groups.html
@@ -0,0 +1,241 @@
+<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
+<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
+<button
+    command="show-modal"
+    commandfor="dialog"
+    class="rounded-md bg-white/80 px-2.5 py-1.5 text-sm font-semibold text-gray-900 hover:bg-white/90"
+>
+    Open command palette
+</button>
+
+<el-dialog>
+    <dialog id="dialog" class="backdrop:bg-transparent">
+        <el-dialog-backdrop
+            class="fixed inset-0 bg-gray-500/25 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
+        ></el-dialog-backdrop>
+
+        <div
+            tabindex="0"
+            class="fixed inset-0 w-screen overflow-y-auto p-4 focus:outline-none sm:p-6 md:p-20"
+        >
+            <el-dialog-panel
+                class="mx-auto block max-w-xl transform overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black/5 transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in data-closed:sm:translate-y-0 data-closed:sm:scale-95"
+            >
+                <el-command-palette>
+                    <div class="grid grid-cols-1">
+                        <input
+                            type="text"
+                            autofocus
+                            placeholder="Search..."
+                            class="col-start-1 row-start-1 h-12 w-full pr-4 pl-11 text-base text-gray-900 outline-hidden placeholder:text-gray-400 sm:text-sm"
+                        />
+                        <svg
+                            viewBox="0 0 20 20"
+                            fill="currentColor"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="pointer-events-none col-start-1 row-start-1 ml-4 size-5 self-center text-gray-400"
+                        >
+                            <path
+                                d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z"
+                                clip-rule="evenodd"
+                                fill-rule="evenodd"
+                            />
+                        </svg>
+                    </div>
+
+                    <el-defaults
+                        class="block border-t border-gray-100 px-6 py-14 text-center text-sm sm:px-14"
+                    >
+                        <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="mx-auto size-6 text-gray-400"
+                        >
+                            <path
+                                d="m6.115 5.19.319 1.913A6 6 0 0 0 8.11 10.36L9.75 12l-.387.775c-.217.433-.132.956.21 1.298l1.348 1.348c.21.21.329.497.329.795v1.089c0 .426.24.815.622 1.006l.153.076c.433.217.956.132 1.298-.21l.723-.723a8.7 8.7 0 0 0 2.288-4.042 1.087 1.087 0 0 0-.358-1.099l-1.33-1.108c-.251-.21-.582-.299-.905-.245l-1.17.195a1.125 1.125 0 0 1-.98-.314l-.295-.295a1.125 1.125 0 0 1 0-1.591l.13-.132a1.125 1.125 0 0 1 1.3-.21l.603.302a.809.809 0 0 0 1.086-1.086L14.25 7.5l1.256-.837a4.5 4.5 0 0 0 1.528-1.732l.146-.292M6.115 5.19A9 9 0 1 0 17.18 4.64M6.115 5.19A8.965 8.965 0 0 1 12 3c1.929 0 3.716.607 5.18 1.64"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                        <p class="mt-4 font-semibold text-gray-900">
+                            Search for clients and projects
+                        </p>
+                        <p class="mt-2 text-gray-500">
+                            Quickly access clients and projects by running a
+                            global search.
+                        </p>
+                    </el-defaults>
+
+                    <el-command-list
+                        hidden
+                        class="block max-h-80 scroll-pt-11 scroll-pb-2 space-y-2 overflow-y-auto pb-2"
+                    >
+                        <el-command-group
+                            hidden
+                            aria-labelledby="clients-label"
+                            class="block"
+                        >
+                            <div
+                                id="clients-label"
+                                class="bg-gray-100 px-4 py-2.5 text-xs font-semibold text-gray-900"
+                            >
+                                Clients
+                            </div>
+                            <div class="mt-2 text-sm text-gray-800">
+                                <a
+                                    href="#"
+                                    class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                    >Workflow Inc.</a
+                                >
+                                <a
+                                    href="#"
+                                    class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                    >Multinational LLC.</a
+                                >
+                                <a
+                                    href="#"
+                                    class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                    >Products Inc.</a
+                                >
+                                <a
+                                    href="#"
+                                    class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                    >Conglomerate Inc.</a
+                                >
+                                <a
+                                    href="#"
+                                    class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                    >Big Ltd.</a
+                                >
+                            </div>
+                        </el-command-group>
+
+                        <el-command-group
+                            hidden
+                            aria-labelledby="projects-label"
+                            class="block"
+                        >
+                            <div
+                                id="projects-label"
+                                class="bg-gray-100 px-4 py-2.5 text-xs font-semibold text-gray-900"
+                            >
+                                Projects
+                            </div>
+                            <div class="mt-2 text-sm text-gray-800">
+                                <a
+                                    href="#"
+                                    class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                    >Workflow Inc. / Website Redesign</a
+                                >
+                                <a
+                                    href="#"
+                                    class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                    >Workflow Inc. / Open Graph Image</a
+                                >
+                                <a
+                                    href="#"
+                                    class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                    >Workflow Inc. / Logo Design</a
+                                >
+                                <a
+                                    href="#"
+                                    class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                    >Workflow Inc. / Advertising Campaign</a
+                                >
+                                <a
+                                    href="#"
+                                    class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                    >Conglomerate Inc. / TV Ad Campaign</a
+                                >
+                                <a
+                                    href="#"
+                                    class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                    >Conglomerate Inc. / Mobile App</a
+                                >
+                                <a
+                                    href="#"
+                                    class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                    >Conglomerate Inc. / Product Design</a
+                                >
+                                <a
+                                    href="#"
+                                    class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                    >Conglomerate Inc. / Intranet</a
+                                >
+                                <a
+                                    href="#"
+                                    class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                    >Conglomerate Inc. / Custom Programming</a
+                                >
+                                <a
+                                    href="#"
+                                    class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                    >Multinational LLC. / Creative Writing</a
+                                >
+                                <a
+                                    href="#"
+                                    class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                    >Multinational LLC. / Animation</a
+                                >
+                                <a
+                                    href="#"
+                                    class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                    >Multinational LLC. / Product
+                                    Illustration</a
+                                >
+                                <a
+                                    href="#"
+                                    class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                    >Products Inc. / Video Production</a
+                                >
+                                <a
+                                    href="#"
+                                    class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                    >Products Inc. / Print Brochure</a
+                                >
+                                <a
+                                    href="#"
+                                    class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                    >Products Inc. / Documentation</a
+                                >
+                            </div>
+                        </el-command-group>
+                    </el-command-list>
+
+                    <el-no-results
+                        hidden
+                        class="block border-t border-gray-100 px-6 py-14 text-center text-sm sm:px-14"
+                    >
+                        <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="mx-auto size-6 text-gray-400"
+                        >
+                            <path
+                                d="M15.182 16.318A4.486 4.486 0 0 0 12.016 15a4.486 4.486 0 0 0-3.198 1.318M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                        <p class="mt-4 font-semibold text-gray-900">
+                            No results found
+                        </p>
+                        <p class="mt-2 text-gray-500">
+                            We couldn't find anything with that term. Please try
+                            again.
+                        </p>
+                    </el-no-results>
+                </el-command-palette>
+            </el-dialog-panel>
+        </div>
+    </dialog>
+</el-dialog>
diff --git a/application_ui/navigation/command_palettes/with_icons.html b/application_ui/navigation/command_palettes/with_icons.html
new file mode 100644
index 0000000..83f6f03
--- /dev/null
+++ b/application_ui/navigation/command_palettes/with_icons.html
@@ -0,0 +1,694 @@
+<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
+<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
+<button
+    command="show-modal"
+    commandfor="dialog"
+    class="rounded-md bg-white/80 px-2.5 py-1.5 text-sm font-semibold text-gray-900 hover:bg-white/90"
+>
+    Open command palette
+</button>
+
+<el-dialog>
+    <dialog id="dialog" class="backdrop:bg-transparent">
+        <el-dialog-backdrop
+            class="fixed inset-0 bg-gray-500/25 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
+        ></el-dialog-backdrop>
+
+        <div
+            tabindex="0"
+            class="fixed inset-0 w-screen overflow-y-auto p-4 focus:outline-none sm:p-6 md:p-20"
+        >
+            <el-dialog-panel
+                class="mx-auto block max-w-2xl transform overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black/5 transition-all data-closed:scale-95 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
+            >
+                <el-command-palette>
+                    <div class="grid grid-cols-1 border-b border-gray-100">
+                        <input
+                            type="text"
+                            autofocus
+                            placeholder="Search..."
+                            class="col-start-1 row-start-1 h-12 w-full pr-4 pl-11 text-base text-gray-900 outline-hidden placeholder:text-gray-400 sm:text-sm"
+                        />
+                        <svg
+                            viewBox="0 0 20 20"
+                            fill="currentColor"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="pointer-events-none col-start-1 row-start-1 ml-4 size-5 self-center text-gray-400"
+                        >
+                            <path
+                                d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z"
+                                clip-rule="evenodd"
+                                fill-rule="evenodd"
+                            />
+                        </svg>
+                    </div>
+
+                    <el-command-list
+                        class="block max-h-80 scroll-py-2 overflow-y-auto"
+                    >
+                        <el-defaults class="block divide-y divide-gray-100">
+                            <div class="p-2">
+                                <h2
+                                    class="mt-4 mb-2 px-3 text-xs font-semibold text-gray-500"
+                                >
+                                    Recent searches
+                                </h2>
+                                <div class="text-sm text-gray-700">
+                                    <a
+                                        href="#"
+                                        class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                    >
+                                        <svg
+                                            viewBox="0 0 24 24"
+                                            fill="none"
+                                            stroke="currentColor"
+                                            stroke-width="1.5"
+                                            data-slot="icon"
+                                            aria-hidden="true"
+                                            class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                        >
+                                            <path
+                                                d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                                stroke-linecap="round"
+                                                stroke-linejoin="round"
+                                            />
+                                        </svg>
+                                        <span class="ml-3 flex-auto truncate"
+                                            >Workflow Inc. / Website
+                                            Redesign</span
+                                        >
+                                        <span
+                                            aria-hidden="true"
+                                            class="ml-3 hidden flex-none text-indigo-100 group-aria-selected:inline"
+                                            >Jump to...</span
+                                        >
+                                    </a>
+                                </div>
+                            </div>
+
+                            <div class="p-2">
+                                <h2 class="sr-only">Quick actions</h2>
+                                <div class="text-sm text-gray-700">
+                                    <a
+                                        href="#"
+                                        class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                    >
+                                        <svg
+                                            viewBox="0 0 24 24"
+                                            fill="none"
+                                            stroke="currentColor"
+                                            stroke-width="1.5"
+                                            data-slot="icon"
+                                            aria-hidden="true"
+                                            class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                        >
+                                            <path
+                                                d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
+                                                stroke-linecap="round"
+                                                stroke-linejoin="round"
+                                            />
+                                        </svg>
+                                        <span class="ml-3 flex-auto truncate"
+                                            >Add new file...</span
+                                        >
+                                        <span
+                                            aria-hidden="true"
+                                            class="ml-3 flex-none text-xs font-semibold text-gray-400 group-aria-selected:text-indigo-100"
+                                        >
+                                            <kbd class="font-sans">⌘</kbd
+                                            ><kbd class="font-sans">N</kbd>
+                                        </span>
+                                    </a>
+                                    <a
+                                        href="#"
+                                        class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                    >
+                                        <svg
+                                            viewBox="0 0 24 24"
+                                            fill="none"
+                                            stroke="currentColor"
+                                            stroke-width="1.5"
+                                            data-slot="icon"
+                                            aria-hidden="true"
+                                            class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                        >
+                                            <path
+                                                d="M12 10.5v6m3-3H9m4.06-7.19-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                                stroke-linecap="round"
+                                                stroke-linejoin="round"
+                                            />
+                                        </svg>
+                                        <span class="ml-3 flex-auto truncate"
+                                            >Add new folder...</span
+                                        >
+                                        <span
+                                            aria-hidden="true"
+                                            class="ml-3 flex-none text-xs font-semibold text-gray-400 group-aria-selected:text-indigo-100"
+                                        >
+                                            <kbd class="font-sans">⌘</kbd
+                                            ><kbd class="font-sans">F</kbd>
+                                        </span>
+                                    </a>
+                                    <a
+                                        href="#"
+                                        class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                    >
+                                        <svg
+                                            viewBox="0 0 24 24"
+                                            fill="none"
+                                            stroke="currentColor"
+                                            stroke-width="1.5"
+                                            data-slot="icon"
+                                            aria-hidden="true"
+                                            class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                        >
+                                            <path
+                                                d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5"
+                                                stroke-linecap="round"
+                                                stroke-linejoin="round"
+                                            />
+                                        </svg>
+                                        <span class="ml-3 flex-auto truncate"
+                                            >Add hashtag...</span
+                                        >
+                                        <span
+                                            aria-hidden="true"
+                                            class="ml-3 flex-none text-xs font-semibold text-gray-400 group-aria-selected:text-indigo-100"
+                                        >
+                                            <kbd class="font-sans">⌘</kbd
+                                            ><kbd class="font-sans">H</kbd>
+                                        </span>
+                                    </a>
+                                    <a
+                                        href="#"
+                                        class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                                    >
+                                        <svg
+                                            viewBox="0 0 24 24"
+                                            fill="none"
+                                            stroke="currentColor"
+                                            stroke-width="1.5"
+                                            data-slot="icon"
+                                            aria-hidden="true"
+                                            class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                        >
+                                            <path
+                                                d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z"
+                                                stroke-linecap="round"
+                                                stroke-linejoin="round"
+                                            />
+                                            <path
+                                                d="M6 6h.008v.008H6V6Z"
+                                                stroke-linecap="round"
+                                                stroke-linejoin="round"
+                                            />
+                                        </svg>
+                                        <span class="ml-3 flex-auto truncate"
+                                            >Add label...</span
+                                        >
+                                        <span
+                                            aria-hidden="true"
+                                            class="ml-3 flex-none text-xs font-semibold text-gray-400 group-aria-selected:text-indigo-100"
+                                        >
+                                            <kbd class="font-sans">⌘</kbd
+                                            ><kbd class="font-sans">L</kbd>
+                                        </span>
+                                    </a>
+                                </div>
+                            </div>
+                        </el-defaults>
+
+                        <el-command-group
+                            hidden
+                            class="block p-2 text-sm text-gray-700"
+                        >
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Workflow Inc. / Website Redesign</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-indigo-100 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Workflow Inc. / Open Graph Image</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-indigo-100 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Workflow Inc. / Logo Design</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-indigo-100 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Workflow Inc. / Advertising Campaign</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-indigo-100 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Conglomerate Inc. / TV Ad Campaign</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-indigo-100 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Conglomerate Inc. / Mobile App</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-indigo-100 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Conglomerate Inc. / Product Design</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-indigo-100 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Conglomerate Inc. / Intranet</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-indigo-100 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Conglomerate Inc. / Custom
+                                    Programming</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-indigo-100 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Multinational LLC / Creative Writing</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-indigo-100 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Multinational LLC / Animation</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-indigo-100 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Multinational LLC / Product
+                                    Illustration</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-indigo-100 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Products Inc. / Video Production</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-indigo-100 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Products Inc. / Print Brochure</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-indigo-100 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                            <a
+                                href="#"
+                                hidden
+                                class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
+                                >
+                                    <path
+                                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <span class="ml-3 flex-auto truncate"
+                                    >Products Inc. / Documentation</span
+                                >
+                                <span
+                                    aria-hidden="true"
+                                    class="ml-3 hidden flex-none text-indigo-100 group-aria-selected:inline"
+                                    >Jump to...</span
+                                >
+                            </a>
+                        </el-command-group>
+                    </el-command-list>
+
+                    <el-no-results
+                        hidden
+                        class="block px-6 py-14 text-center sm:px-14"
+                    >
+                        <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="mx-auto size-6 text-gray-400"
+                        >
+                            <path
+                                d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                        <p class="mt-4 text-sm text-gray-900">
+                            We couldn't find any projects with that term. Please
+                            try again.
+                        </p>
+                    </el-no-results>
+                </el-command-palette>
+            </el-dialog-panel>
+        </div>
+    </dialog>
+</el-dialog>
diff --git a/application_ui/navigation/command_palettes/with_images_and_descriptions.html b/application_ui/navigation/command_palettes/with_images_and_descriptions.html
new file mode 100644
index 0000000..b16a33f
--- /dev/null
+++ b/application_ui/navigation/command_palettes/with_images_and_descriptions.html
@@ -0,0 +1,480 @@
+<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
+<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
+<button
+    command="show-modal"
+    commandfor="dialog"
+    class="rounded-md bg-white/80 px-2.5 py-1.5 text-sm font-semibold text-gray-900 hover:bg-white/90"
+>
+    Open command palette
+</button>
+
+<el-dialog>
+    <dialog id="dialog" class="backdrop:bg-transparent">
+        <el-dialog-backdrop
+            class="fixed inset-0 bg-gray-500/25 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
+        ></el-dialog-backdrop>
+
+        <div
+            tabindex="0"
+            class="fixed inset-0 w-screen overflow-y-auto p-4 focus:outline-none sm:p-6 md:p-20"
+        >
+            <el-dialog-panel
+                class="mx-auto block max-w-xl transform overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black/5 transition-all data-closed:scale-95 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
+            >
+                <el-command-palette>
+                    <div class="grid grid-cols-1 border-b border-gray-100">
+                        <input
+                            type="text"
+                            autofocus
+                            placeholder="Search..."
+                            class="col-start-1 row-start-1 h-12 w-full pr-4 pl-11 text-base text-gray-900 outline-hidden placeholder:text-gray-400 sm:text-sm"
+                        />
+                        <svg
+                            viewBox="0 0 20 20"
+                            fill="currentColor"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="pointer-events-none col-start-1 row-start-1 ml-4 size-5 self-center text-gray-400"
+                        >
+                            <path
+                                d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z"
+                                clip-rule="evenodd"
+                                fill-rule="evenodd"
+                            />
+                        </svg>
+                    </div>
+
+                    <el-command-list
+                        hidden
+                        class="block max-h-96 transform-gpu scroll-py-3 overflow-y-auto p-3"
+                    >
+                        <a
+                            href="#"
+                            hidden
+                            aria-labelledby="item-1-label"
+                            class="group flex cursor-default rounded-xl p-3 select-none focus:outline-hidden aria-selected:bg-gray-100"
+                        >
+                            <div
+                                class="flex size-10 flex-none items-center justify-center rounded-lg bg-indigo-500"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 text-white"
+                                >
+                                    <path
+                                        d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                            </div>
+                            <div class="ml-4 flex-auto">
+                                <p
+                                    id="item-1-label"
+                                    class="text-sm font-medium text-gray-700 group-aria-selected:text-gray-900"
+                                >
+                                    Text
+                                </p>
+                                <p
+                                    class="text-sm text-gray-500 group-aria-selected:text-gray-700"
+                                >
+                                    Add freeform text with basic formatting
+                                    options.
+                                </p>
+                            </div>
+                        </a>
+                        <a
+                            href="#"
+                            hidden
+                            aria-labelledby="item-2-label"
+                            class="group flex cursor-default rounded-xl p-3 select-none focus:outline-hidden aria-selected:bg-gray-100"
+                        >
+                            <div
+                                class="flex size-10 flex-none items-center justify-center rounded-lg bg-blue-500"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 text-white"
+                                >
+                                    <path
+                                        d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                            </div>
+                            <div class="ml-4 flex-auto">
+                                <p
+                                    id="item-2-label"
+                                    class="text-sm font-medium text-gray-700 group-aria-selected:text-gray-900"
+                                >
+                                    Video
+                                </p>
+                                <p
+                                    class="text-sm text-gray-500 group-aria-selected:text-gray-700"
+                                >
+                                    Add a video from YouTube, Vimeo or other
+                                    services.
+                                </p>
+                            </div>
+                        </a>
+                        <a
+                            href="#"
+                            hidden
+                            aria-labelledby="item-3-label"
+                            class="group flex cursor-default rounded-xl p-3 select-none focus:outline-hidden aria-selected:bg-gray-100"
+                        >
+                            <div
+                                class="flex size-10 flex-none items-center justify-center rounded-lg bg-violet-500"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 text-white"
+                                >
+                                    <path
+                                        d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                            </div>
+                            <div class="ml-4 flex-auto">
+                                <p
+                                    id="item-3-label"
+                                    class="text-sm font-medium text-gray-700 group-aria-selected:text-gray-900"
+                                >
+                                    Page
+                                </p>
+                                <p
+                                    class="text-sm text-gray-500 group-aria-selected:text-gray-700"
+                                >
+                                    Add a new blank page to your project.
+                                </p>
+                            </div>
+                        </a>
+                        <a
+                            href="#"
+                            hidden
+                            aria-labelledby="item-4-label"
+                            class="group flex cursor-default rounded-xl p-3 select-none focus:outline-hidden aria-selected:bg-gray-100"
+                        >
+                            <div
+                                class="flex size-10 flex-none items-center justify-center rounded-lg bg-sky-500"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 text-white"
+                                >
+                                    <path
+                                        d="M3.75 5.25h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                            </div>
+                            <div class="ml-4 flex-auto">
+                                <p
+                                    id="item-4-label"
+                                    class="text-sm font-medium text-gray-700 group-aria-selected:text-gray-900"
+                                >
+                                    List
+                                </p>
+                                <p
+                                    class="text-sm text-gray-500 group-aria-selected:text-gray-700"
+                                >
+                                    Add an ordered or unordered list.
+                                </p>
+                            </div>
+                        </a>
+                        <a
+                            href="#"
+                            hidden
+                            aria-labelledby="item-5-label"
+                            class="group flex cursor-default rounded-xl p-3 select-none focus:outline-hidden aria-selected:bg-gray-100"
+                        >
+                            <div
+                                class="flex size-10 flex-none items-center justify-center rounded-lg bg-pink-500"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 text-white"
+                                >
+                                    <path
+                                        d="M9 4.5v15m6-15v15m-10.875 0h15.75c.621 0 1.125-.504 1.125-1.125V5.625c0-.621-.504-1.125-1.125-1.125H4.125C3.504 4.5 3 5.004 3 5.625v12.75c0 .621.504 1.125 1.125 1.125Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                            </div>
+                            <div class="ml-4 flex-auto">
+                                <p
+                                    id="item-5-label"
+                                    class="text-sm font-medium text-gray-700 group-aria-selected:text-gray-900"
+                                >
+                                    Board
+                                </p>
+                                <p
+                                    class="text-sm text-gray-500 group-aria-selected:text-gray-700"
+                                >
+                                    Add a kanban style board with cards and
+                                    columns.
+                                </p>
+                            </div>
+                        </a>
+                        <a
+                            href="#"
+                            hidden
+                            aria-labelledby="item-6-label"
+                            class="group flex cursor-default rounded-xl p-3 select-none focus:outline-hidden aria-selected:bg-gray-100"
+                        >
+                            <div
+                                class="flex size-10 flex-none items-center justify-center rounded-lg bg-teal-500"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 text-white"
+                                >
+                                    <path
+                                        d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                            </div>
+                            <div class="ml-4 flex-auto">
+                                <p
+                                    id="item-6-label"
+                                    class="text-sm font-medium text-gray-700 group-aria-selected:text-gray-900"
+                                >
+                                    Calendar
+                                </p>
+                                <p
+                                    class="text-sm text-gray-500 group-aria-selected:text-gray-700"
+                                >
+                                    Add a full month calendar or a week view
+                                    calendar.
+                                </p>
+                            </div>
+                        </a>
+                        <a
+                            href="#"
+                            hidden
+                            aria-labelledby="item-7-label"
+                            class="group flex cursor-default rounded-xl p-3 select-none focus:outline-hidden aria-selected:bg-gray-100"
+                        >
+                            <div
+                                class="flex size-10 flex-none items-center justify-center rounded-lg bg-cyan-500"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 text-white"
+                                >
+                                    <path
+                                        d="M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 0 1-1.125-1.125M3.375 19.5h7.5c.621 0 1.125-.504 1.125-1.125m-9.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-7.5A1.125 1.125 0 0 1 12 18.375m9.75-12.75c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125m19.5 0v1.5c0 .621-.504 1.125-1.125 1.125M2.25 5.625v1.5c0 .621.504 1.125 1.125 1.125m0 0h17.25m-17.25 0h7.5c.621 0 1.125.504 1.125 1.125M3.375 8.25c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125m17.25-3.75h-7.5c-.621 0-1.125.504-1.125 1.125m8.625-1.125c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125M12 10.875v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 10.875c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125M13.125 12h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125M20.625 12c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5M12 14.625v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 14.625c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125m0 1.5v-1.5m0 0c0-.621.504-1.125 1.125-1.125m0 0h7.5"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                            </div>
+                            <div class="ml-4 flex-auto">
+                                <p
+                                    id="item-7-label"
+                                    class="text-sm font-medium text-gray-700 group-aria-selected:text-gray-900"
+                                >
+                                    Table
+                                </p>
+                                <p
+                                    class="text-sm text-gray-500 group-aria-selected:text-gray-700"
+                                >
+                                    Add a table for displaying larger sets of
+                                    data.
+                                </p>
+                            </div>
+                        </a>
+                        <a
+                            href="#"
+                            hidden
+                            aria-labelledby="item-8-label"
+                            class="group flex cursor-default rounded-xl p-3 select-none focus:outline-hidden aria-selected:bg-gray-100"
+                        >
+                            <div
+                                class="flex size-10 flex-none items-center justify-center rounded-lg bg-fuchsia-500"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 text-white"
+                                >
+                                    <path
+                                        d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                            </div>
+                            <div class="ml-4 flex-auto">
+                                <p
+                                    id="item-8-label"
+                                    class="text-sm font-medium text-gray-700 group-aria-selected:text-gray-900"
+                                >
+                                    Link
+                                </p>
+                                <p
+                                    class="text-sm text-gray-500 group-aria-selected:text-gray-700"
+                                >
+                                    Add a link to another page, website, or
+                                    email address.
+                                </p>
+                            </div>
+                        </a>
+                        <a
+                            href="#"
+                            hidden
+                            aria-labelledby="item-9-label"
+                            class="group flex cursor-default rounded-xl p-3 select-none focus:outline-hidden aria-selected:bg-gray-100"
+                        >
+                            <div
+                                class="flex size-10 flex-none items-center justify-center rounded-lg bg-purple-500"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 text-white"
+                                >
+                                    <path
+                                        d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                            </div>
+                            <div class="ml-4 flex-auto">
+                                <p
+                                    id="item-9-label"
+                                    class="text-sm font-medium text-gray-700 group-aria-selected:text-gray-900"
+                                >
+                                    Code
+                                </p>
+                                <p
+                                    class="text-sm text-gray-500 group-aria-selected:text-gray-700"
+                                >
+                                    Add raw HTML, JavaScript or CSS code.
+                                </p>
+                            </div>
+                        </a>
+                        <a
+                            href="#"
+                            hidden
+                            aria-labelledby="item-10-label"
+                            class="group flex cursor-default rounded-xl p-3 select-none focus:outline-hidden aria-selected:bg-gray-100"
+                        >
+                            <div
+                                class="flex size-10 flex-none items-center justify-center rounded-lg bg-rose-500"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6 text-white"
+                                >
+                                    <path
+                                        d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                            </div>
+                            <div class="ml-4 flex-auto">
+                                <p
+                                    id="item-10-label"
+                                    class="text-sm font-medium text-gray-700 group-aria-selected:text-gray-900"
+                                >
+                                    Image
+                                </p>
+                                <p
+                                    class="text-sm text-gray-500 group-aria-selected:text-gray-700"
+                                >
+                                    Add a simple image or a photo gallery.
+                                </p>
+                            </div>
+                        </a>
+                    </el-command-list>
+
+                    <el-no-results
+                        hidden
+                        class="block px-6 py-14 text-center text-sm sm:px-14"
+                    >
+                        <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="mx-auto size-6 text-gray-400"
+                        >
+                            <path
+                                d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                        <p class="mt-4 font-semibold text-gray-900">
+                            No results found
+                        </p>
+                        <p class="mt-2 text-gray-500">
+                            No components found for this search term. Please try
+                            again.
+                        </p>
+                    </el-no-results>
+                </el-command-palette>
+            </el-dialog-panel>
+        </div>
+    </dialog>
+</el-dialog>
diff --git a/application_ui/navigation/command_palettes/with_preview.html b/application_ui/navigation/command_palettes/with_preview.html
new file mode 100644
index 0000000..0f23baf
--- /dev/null
+++ b/application_ui/navigation/command_palettes/with_preview.html
@@ -0,0 +1,2918 @@
+<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
+<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
+<button
+    command="show-modal"
+    commandfor="dialog"
+    class="rounded-md bg-white/80 px-2.5 py-1.5 text-sm font-semibold text-gray-900 hover:bg-white/90"
+>
+    Open command palette
+</button>
+
+<el-dialog>
+    <dialog id="dialog" class="backdrop:bg-transparent">
+        <el-dialog-backdrop
+            class="fixed inset-0 bg-gray-500/25 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
+        ></el-dialog-backdrop>
+
+        <div
+            tabindex="0"
+            class="fixed inset-0 w-screen overflow-y-auto p-4 focus:outline-none sm:p-6 md:p-20"
+        >
+            <el-dialog-panel
+                class="mx-auto block max-w-3xl transform overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black/5 transition-all data-closed:scale-95 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
+            >
+                <el-command-palette class="divide-y divide-gray-100">
+                    <div class="grid grid-cols-1">
+                        <input
+                            type="text"
+                            autofocus
+                            placeholder="Search..."
+                            class="col-start-1 row-start-1 h-12 w-full pr-4 pl-11 text-base text-gray-900 outline-hidden placeholder:text-gray-400 sm:text-sm"
+                        />
+                        <svg
+                            viewBox="0 0 20 20"
+                            fill="currentColor"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="pointer-events-none col-start-1 row-start-1 ml-4 size-5 self-center text-gray-400"
+                        >
+                            <path
+                                d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z"
+                                clip-rule="evenodd"
+                                fill-rule="evenodd"
+                            />
+                        </svg>
+                    </div>
+
+                    <div class="flex transform-gpu divide-x divide-gray-100">
+                        <div
+                            class="max-h-96 min-w-0 flex-auto scroll-py-4 overflow-y-auto px-6 py-4"
+                        >
+                            <el-command-list
+                                class="-mx-2 block text-sm text-gray-700"
+                            >
+                                <el-defaults>
+                                    <h2
+                                        class="mx-2 mt-2 mb-4 text-xs font-semibold text-gray-500"
+                                    >
+                                        Recent searches
+                                    </h2>
+                                    <div class="text-sm text-gray-700">
+                                        <a
+                                            id="person-suggestion-6"
+                                            href="#"
+                                            class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
+                                        >
+                                            <img
+                                                src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                                alt=""
+                                                class="size-6 flex-none rounded-full"
+                                            />
+                                            <span
+                                                class="ml-3 flex-auto truncate"
+                                                >Tom Cook</span
+                                            >
+                                            <svg
+                                                viewBox="0 0 20 20"
+                                                fill="currentColor"
+                                                data-slot="icon"
+                                                aria-hidden="true"
+                                                class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
+                                            >
+                                                <path
+                                                    d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                                                    clip-rule="evenodd"
+                                                    fill-rule="evenodd"
+                                                />
+                                            </svg>
+                                        </a>
+                                        <a
+                                            id="person-suggestion-5"
+                                            href="#"
+                                            class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
+                                        >
+                                            <img
+                                                src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                                alt=""
+                                                class="size-6 flex-none rounded-full"
+                                            />
+                                            <span
+                                                class="ml-3 flex-auto truncate"
+                                                >Courtney Henry</span
+                                            >
+                                            <svg
+                                                viewBox="0 0 20 20"
+                                                fill="currentColor"
+                                                data-slot="icon"
+                                                aria-hidden="true"
+                                                class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
+                                            >
+                                                <path
+                                                    d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                                                    clip-rule="evenodd"
+                                                    fill-rule="evenodd"
+                                                />
+                                            </svg>
+                                        </a>
+                                        <a
+                                            id="person-suggestion-3"
+                                            href="#"
+                                            class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
+                                        >
+                                            <img
+                                                src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                                alt=""
+                                                class="size-6 flex-none rounded-full"
+                                            />
+                                            <span
+                                                class="ml-3 flex-auto truncate"
+                                                >Dries Vincent</span
+                                            >
+                                            <svg
+                                                viewBox="0 0 20 20"
+                                                fill="currentColor"
+                                                data-slot="icon"
+                                                aria-hidden="true"
+                                                class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
+                                            >
+                                                <path
+                                                    d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                                                    clip-rule="evenodd"
+                                                    fill-rule="evenodd"
+                                                />
+                                            </svg>
+                                        </a>
+                                        <a
+                                            id="person-suggestion-11"
+                                            href="#"
+                                            class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
+                                        >
+                                            <img
+                                                src="https://images.unsplash.com/photo-1500917293891-ef795e70e1f6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                                alt=""
+                                                class="size-6 flex-none rounded-full"
+                                            />
+                                            <span
+                                                class="ml-3 flex-auto truncate"
+                                                >Kristin Watson</span
+                                            >
+                                            <svg
+                                                viewBox="0 0 20 20"
+                                                fill="currentColor"
+                                                data-slot="icon"
+                                                aria-hidden="true"
+                                                class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
+                                            >
+                                                <path
+                                                    d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                                                    clip-rule="evenodd"
+                                                    fill-rule="evenodd"
+                                                />
+                                            </svg>
+                                        </a>
+                                        <a
+                                            id="person-suggestion-17"
+                                            href="#"
+                                            class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
+                                        >
+                                            <img
+                                                src="https://images.unsplash.com/photo-1517070208541-6ddc4d3efbcb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                                alt=""
+                                                class="size-6 flex-none rounded-full"
+                                            />
+                                            <span
+                                                class="ml-3 flex-auto truncate"
+                                                >Jeffrey Webb</span
+                                            >
+                                            <svg
+                                                viewBox="0 0 20 20"
+                                                fill="currentColor"
+                                                data-slot="icon"
+                                                aria-hidden="true"
+                                                class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
+                                            >
+                                                <path
+                                                    d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                                                    clip-rule="evenodd"
+                                                    fill-rule="evenodd"
+                                                />
+                                            </svg>
+                                        </a>
+                                    </div>
+                                </el-defaults>
+
+                                <el-command-group hidden class="sm:h-96">
+                                    <a
+                                        id="person-1"
+                                        href="#"
+                                        hidden
+                                        class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
+                                    >
+                                        <img
+                                            src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                            alt=""
+                                            class="size-6 flex-none rounded-full"
+                                        />
+                                        <span class="ml-3 flex-auto truncate"
+                                            >Leslie Alexander</span
+                                        >
+                                        <svg
+                                            viewBox="0 0 20 20"
+                                            fill="currentColor"
+                                            data-slot="icon"
+                                            aria-hidden="true"
+                                            class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
+                                        >
+                                            <path
+                                                d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                                                clip-rule="evenodd"
+                                                fill-rule="evenodd"
+                                            />
+                                        </svg>
+                                    </a>
+                                    <a
+                                        id="person-2"
+                                        href="#"
+                                        hidden
+                                        class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
+                                    >
+                                        <img
+                                            src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                            alt=""
+                                            class="size-6 flex-none rounded-full"
+                                        />
+                                        <span class="ml-3 flex-auto truncate"
+                                            >Michael Foster</span
+                                        >
+                                        <svg
+                                            viewBox="0 0 20 20"
+                                            fill="currentColor"
+                                            data-slot="icon"
+                                            aria-hidden="true"
+                                            class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
+                                        >
+                                            <path
+                                                d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                                                clip-rule="evenodd"
+                                                fill-rule="evenodd"
+                                            />
+                                        </svg>
+                                    </a>
+                                    <a
+                                        id="person-3"
+                                        href="#"
+                                        hidden
+                                        class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
+                                    >
+                                        <img
+                                            src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                            alt=""
+                                            class="size-6 flex-none rounded-full"
+                                        />
+                                        <span class="ml-3 flex-auto truncate"
+                                            >Dries Vincent</span
+                                        >
+                                        <svg
+                                            viewBox="0 0 20 20"
+                                            fill="currentColor"
+                                            data-slot="icon"
+                                            aria-hidden="true"
+                                            class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
+                                        >
+                                            <path
+                                                d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                                                clip-rule="evenodd"
+                                                fill-rule="evenodd"
+                                            />
+                                        </svg>
+                                    </a>
+                                    <a
+                                        id="person-4"
+                                        href="#"
+                                        hidden
+                                        class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
+                                    >
+                                        <img
+                                            src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                            alt=""
+                                            class="size-6 flex-none rounded-full"
+                                        />
+                                        <span class="ml-3 flex-auto truncate"
+                                            >Lindsay Walton</span
+                                        >
+                                        <svg
+                                            viewBox="0 0 20 20"
+                                            fill="currentColor"
+                                            data-slot="icon"
+                                            aria-hidden="true"
+                                            class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
+                                        >
+                                            <path
+                                                d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                                                clip-rule="evenodd"
+                                                fill-rule="evenodd"
+                                            />
+                                        </svg>
+                                    </a>
+                                    <a
+                                        id="person-5"
+                                        href="#"
+                                        hidden
+                                        class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
+                                    >
+                                        <img
+                                            src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                            alt=""
+                                            class="size-6 flex-none rounded-full"
+                                        />
+                                        <span class="ml-3 flex-auto truncate"
+                                            >Courtney Henry</span
+                                        >
+                                        <svg
+                                            viewBox="0 0 20 20"
+                                            fill="currentColor"
+                                            data-slot="icon"
+                                            aria-hidden="true"
+                                            class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
+                                        >
+                                            <path
+                                                d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                                                clip-rule="evenodd"
+                                                fill-rule="evenodd"
+                                            />
+                                        </svg>
+                                    </a>
+                                    <a
+                                        id="person-6"
+                                        href="#"
+                                        hidden
+                                        class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
+                                    >
+                                        <img
+                                            src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                            alt=""
+                                            class="size-6 flex-none rounded-full"
+                                        />
+                                        <span class="ml-3 flex-auto truncate"
+                                            >Tom Cook</span
+                                        >
+                                        <svg
+                                            viewBox="0 0 20 20"
+                                            fill="currentColor"
+                                            data-slot="icon"
+                                            aria-hidden="true"
+                                            class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
+                                        >
+                                            <path
+                                                d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                                                clip-rule="evenodd"
+                                                fill-rule="evenodd"
+                                            />
+                                        </svg>
+                                    </a>
+                                    <a
+                                        id="person-7"
+                                        href="#"
+                                        hidden
+                                        class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
+                                    >
+                                        <img
+                                            src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                            alt=""
+                                            class="size-6 flex-none rounded-full"
+                                        />
+                                        <span class="ml-3 flex-auto truncate"
+                                            >Whitney Francis</span
+                                        >
+                                        <svg
+                                            viewBox="0 0 20 20"
+                                            fill="currentColor"
+                                            data-slot="icon"
+                                            aria-hidden="true"
+                                            class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
+                                        >
+                                            <path
+                                                d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                                                clip-rule="evenodd"
+                                                fill-rule="evenodd"
+                                            />
+                                        </svg>
+                                    </a>
+                                    <a
+                                        id="person-8"
+                                        href="#"
+                                        hidden
+                                        class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
+                                    >
+                                        <img
+                                            src="https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                            alt=""
+                                            class="size-6 flex-none rounded-full"
+                                        />
+                                        <span class="ml-3 flex-auto truncate"
+                                            >Leonard Krasner</span
+                                        >
+                                        <svg
+                                            viewBox="0 0 20 20"
+                                            fill="currentColor"
+                                            data-slot="icon"
+                                            aria-hidden="true"
+                                            class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
+                                        >
+                                            <path
+                                                d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                                                clip-rule="evenodd"
+                                                fill-rule="evenodd"
+                                            />
+                                        </svg>
+                                    </a>
+                                    <a
+                                        id="person-9"
+                                        href="#"
+                                        hidden
+                                        class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
+                                    >
+                                        <img
+                                            src="https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                            alt=""
+                                            class="size-6 flex-none rounded-full"
+                                        />
+                                        <span class="ml-3 flex-auto truncate"
+                                            >Floyd Miles</span
+                                        >
+                                        <svg
+                                            viewBox="0 0 20 20"
+                                            fill="currentColor"
+                                            data-slot="icon"
+                                            aria-hidden="true"
+                                            class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
+                                        >
+                                            <path
+                                                d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                                                clip-rule="evenodd"
+                                                fill-rule="evenodd"
+                                            />
+                                        </svg>
+                                    </a>
+                                    <a
+                                        id="person-10"
+                                        href="#"
+                                        hidden
+                                        class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
+                                    >
+                                        <img
+                                            src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                            alt=""
+                                            class="size-6 flex-none rounded-full"
+                                        />
+                                        <span class="ml-3 flex-auto truncate"
+                                            >Emily Selman</span
+                                        >
+                                        <svg
+                                            viewBox="0 0 20 20"
+                                            fill="currentColor"
+                                            data-slot="icon"
+                                            aria-hidden="true"
+                                            class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
+                                        >
+                                            <path
+                                                d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                                                clip-rule="evenodd"
+                                                fill-rule="evenodd"
+                                            />
+                                        </svg>
+                                    </a>
+                                    <a
+                                        id="person-11"
+                                        href="#"
+                                        hidden
+                                        class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
+                                    >
+                                        <img
+                                            src="https://images.unsplash.com/photo-1500917293891-ef795e70e1f6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                            alt=""
+                                            class="size-6 flex-none rounded-full"
+                                        />
+                                        <span class="ml-3 flex-auto truncate"
+                                            >Kristin Watson</span
+                                        >
+                                        <svg
+                                            viewBox="0 0 20 20"
+                                            fill="currentColor"
+                                            data-slot="icon"
+                                            aria-hidden="true"
+                                            class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
+                                        >
+                                            <path
+                                                d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                                                clip-rule="evenodd"
+                                                fill-rule="evenodd"
+                                            />
+                                        </svg>
+                                    </a>
+                                    <a
+                                        id="person-12"
+                                        href="#"
+                                        hidden
+                                        class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
+                                    >
+                                        <img
+                                            src="https://images.unsplash.com/photo-1505840717430-882ce147ef2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                            alt=""
+                                            class="size-6 flex-none rounded-full"
+                                        />
+                                        <span class="ml-3 flex-auto truncate"
+                                            >Emma Dorsey</span
+                                        >
+                                        <svg
+                                            viewBox="0 0 20 20"
+                                            fill="currentColor"
+                                            data-slot="icon"
+                                            aria-hidden="true"
+                                            class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
+                                        >
+                                            <path
+                                                d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                                                clip-rule="evenodd"
+                                                fill-rule="evenodd"
+                                            />
+                                        </svg>
+                                    </a>
+                                    <a
+                                        id="person-13"
+                                        href="#"
+                                        hidden
+                                        class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
+                                    >
+                                        <img
+                                            src="https://images.unsplash.com/photo-1509783236416-c9ad59bae472?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                            alt=""
+                                            class="size-6 flex-none rounded-full"
+                                        />
+                                        <span class="ml-3 flex-auto truncate"
+                                            >Alicia Bell</span
+                                        >
+                                        <svg
+                                            viewBox="0 0 20 20"
+                                            fill="currentColor"
+                                            data-slot="icon"
+                                            aria-hidden="true"
+                                            class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
+                                        >
+                                            <path
+                                                d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                                                clip-rule="evenodd"
+                                                fill-rule="evenodd"
+                                            />
+                                        </svg>
+                                    </a>
+                                    <a
+                                        id="person-14"
+                                        href="#"
+                                        hidden
+                                        class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
+                                    >
+                                        <img
+                                            src="https://images.unsplash.com/photo-1507101105822-7472b28e22ac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                            alt=""
+                                            class="size-6 flex-none rounded-full"
+                                        />
+                                        <span class="ml-3 flex-auto truncate"
+                                            >Jenny Wilson</span
+                                        >
+                                        <svg
+                                            viewBox="0 0 20 20"
+                                            fill="currentColor"
+                                            data-slot="icon"
+                                            aria-hidden="true"
+                                            class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
+                                        >
+                                            <path
+                                                d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                                                clip-rule="evenodd"
+                                                fill-rule="evenodd"
+                                            />
+                                        </svg>
+                                    </a>
+                                    <a
+                                        id="person-15"
+                                        href="#"
+                                        hidden
+                                        class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
+                                    >
+                                        <img
+                                            src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                            alt=""
+                                            class="size-6 flex-none rounded-full"
+                                        />
+                                        <span class="ml-3 flex-auto truncate"
+                                            >Anna Roberts</span
+                                        >
+                                        <svg
+                                            viewBox="0 0 20 20"
+                                            fill="currentColor"
+                                            data-slot="icon"
+                                            aria-hidden="true"
+                                            class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
+                                        >
+                                            <path
+                                                d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                                                clip-rule="evenodd"
+                                                fill-rule="evenodd"
+                                            />
+                                        </svg>
+                                    </a>
+                                    <a
+                                        id="person-16"
+                                        href="#"
+                                        hidden
+                                        class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
+                                    >
+                                        <img
+                                            src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                            alt=""
+                                            class="size-6 flex-none rounded-full"
+                                        />
+                                        <span class="ml-3 flex-auto truncate"
+                                            >Benjamin Russel</span
+                                        >
+                                        <svg
+                                            viewBox="0 0 20 20"
+                                            fill="currentColor"
+                                            data-slot="icon"
+                                            aria-hidden="true"
+                                            class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
+                                        >
+                                            <path
+                                                d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                                                clip-rule="evenodd"
+                                                fill-rule="evenodd"
+                                            />
+                                        </svg>
+                                    </a>
+                                    <a
+                                        id="person-17"
+                                        href="#"
+                                        hidden
+                                        class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
+                                    >
+                                        <img
+                                            src="https://images.unsplash.com/photo-1517070208541-6ddc4d3efbcb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                            alt=""
+                                            class="size-6 flex-none rounded-full"
+                                        />
+                                        <span class="ml-3 flex-auto truncate"
+                                            >Jeffrey Webb</span
+                                        >
+                                        <svg
+                                            viewBox="0 0 20 20"
+                                            fill="currentColor"
+                                            data-slot="icon"
+                                            aria-hidden="true"
+                                            class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
+                                        >
+                                            <path
+                                                d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                                                clip-rule="evenodd"
+                                                fill-rule="evenodd"
+                                            />
+                                        </svg>
+                                    </a>
+                                    <a
+                                        id="person-18"
+                                        href="#"
+                                        hidden
+                                        class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
+                                    >
+                                        <img
+                                            src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                            alt=""
+                                            class="size-6 flex-none rounded-full"
+                                        />
+                                        <span class="ml-3 flex-auto truncate"
+                                            >Kathryn Murphy</span
+                                        >
+                                        <svg
+                                            viewBox="0 0 20 20"
+                                            fill="currentColor"
+                                            data-slot="icon"
+                                            aria-hidden="true"
+                                            class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
+                                        >
+                                            <path
+                                                d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                                                clip-rule="evenodd"
+                                                fill-rule="evenodd"
+                                            />
+                                        </svg>
+                                    </a>
+                                    <a
+                                        id="person-19"
+                                        href="#"
+                                        hidden
+                                        class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
+                                    >
+                                        <img
+                                            src="https://images.unsplash.com/photo-1513910367299-bce8d8a0ebf6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                            alt=""
+                                            class="size-6 flex-none rounded-full"
+                                        />
+                                        <span class="ml-3 flex-auto truncate"
+                                            >Lawrence Hunter</span
+                                        >
+                                        <svg
+                                            viewBox="0 0 20 20"
+                                            fill="currentColor"
+                                            data-slot="icon"
+                                            aria-hidden="true"
+                                            class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
+                                        >
+                                            <path
+                                                d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                                                clip-rule="evenodd"
+                                                fill-rule="evenodd"
+                                            />
+                                        </svg>
+                                    </a>
+                                    <a
+                                        id="person-20"
+                                        href="#"
+                                        hidden
+                                        class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
+                                    >
+                                        <img
+                                            src="https://images.unsplash.com/photo-1506980595904-70325b7fdd90?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                            alt=""
+                                            class="size-6 flex-none rounded-full"
+                                        />
+                                        <span class="ml-3 flex-auto truncate"
+                                            >Yvette Armstrong</span
+                                        >
+                                        <svg
+                                            viewBox="0 0 20 20"
+                                            fill="currentColor"
+                                            data-slot="icon"
+                                            aria-hidden="true"
+                                            class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
+                                        >
+                                            <path
+                                                d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                                                clip-rule="evenodd"
+                                                fill-rule="evenodd"
+                                            />
+                                        </svg>
+                                    </a>
+                                    <a
+                                        id="person-21"
+                                        href="#"
+                                        hidden
+                                        class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
+                                    >
+                                        <img
+                                            src="https://images.unsplash.com/photo-1501031170107-cfd33f0cbdcc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                            alt=""
+                                            class="size-6 flex-none rounded-full"
+                                        />
+                                        <span class="ml-3 flex-auto truncate"
+                                            >Angela Fisher</span
+                                        >
+                                        <svg
+                                            viewBox="0 0 20 20"
+                                            fill="currentColor"
+                                            data-slot="icon"
+                                            aria-hidden="true"
+                                            class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
+                                        >
+                                            <path
+                                                d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                                                clip-rule="evenodd"
+                                                fill-rule="evenodd"
+                                            />
+                                        </svg>
+                                    </a>
+                                    <a
+                                        id="person-22"
+                                        href="#"
+                                        hidden
+                                        class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
+                                    >
+                                        <img
+                                            src="https://images.unsplash.com/photo-1520785643438-5bf77931f493?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                            alt=""
+                                            class="size-6 flex-none rounded-full"
+                                        />
+                                        <span class="ml-3 flex-auto truncate"
+                                            >Blake Reid</span
+                                        >
+                                        <svg
+                                            viewBox="0 0 20 20"
+                                            fill="currentColor"
+                                            data-slot="icon"
+                                            aria-hidden="true"
+                                            class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
+                                        >
+                                            <path
+                                                d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                                                clip-rule="evenodd"
+                                                fill-rule="evenodd"
+                                            />
+                                        </svg>
+                                    </a>
+                                    <a
+                                        id="person-23"
+                                        href="#"
+                                        hidden
+                                        class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
+                                    >
+                                        <img
+                                            src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                            alt=""
+                                            class="size-6 flex-none rounded-full"
+                                        />
+                                        <span class="ml-3 flex-auto truncate"
+                                            >Hector Gibbons</span
+                                        >
+                                        <svg
+                                            viewBox="0 0 20 20"
+                                            fill="currentColor"
+                                            data-slot="icon"
+                                            aria-hidden="true"
+                                            class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
+                                        >
+                                            <path
+                                                d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                                                clip-rule="evenodd"
+                                                fill-rule="evenodd"
+                                            />
+                                        </svg>
+                                    </a>
+                                    <a
+                                        id="person-24"
+                                        href="#"
+                                        hidden
+                                        class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
+                                    >
+                                        <img
+                                            src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                            alt=""
+                                            class="size-6 flex-none rounded-full"
+                                        />
+                                        <span class="ml-3 flex-auto truncate"
+                                            >Fabricio Mendes</span
+                                        >
+                                        <svg
+                                            viewBox="0 0 20 20"
+                                            fill="currentColor"
+                                            data-slot="icon"
+                                            aria-hidden="true"
+                                            class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
+                                        >
+                                            <path
+                                                d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                                                clip-rule="evenodd"
+                                                fill-rule="evenodd"
+                                            />
+                                        </svg>
+                                    </a>
+                                    <a
+                                        id="person-25"
+                                        href="#"
+                                        hidden
+                                        class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
+                                    >
+                                        <img
+                                            src="https://images.unsplash.com/photo-1504703395950-b89145a5425b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                            alt=""
+                                            class="size-6 flex-none rounded-full"
+                                        />
+                                        <span class="ml-3 flex-auto truncate"
+                                            >Jillian Steward</span
+                                        >
+                                        <svg
+                                            viewBox="0 0 20 20"
+                                            fill="currentColor"
+                                            data-slot="icon"
+                                            aria-hidden="true"
+                                            class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
+                                        >
+                                            <path
+                                                d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                                                clip-rule="evenodd"
+                                                fill-rule="evenodd"
+                                            />
+                                        </svg>
+                                    </a>
+                                    <a
+                                        id="person-26"
+                                        href="#"
+                                        hidden
+                                        class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
+                                    >
+                                        <img
+                                            src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                            alt=""
+                                            class="size-6 flex-none rounded-full"
+                                        />
+                                        <span class="ml-3 flex-auto truncate"
+                                            >Chelsea Hagon</span
+                                        >
+                                        <svg
+                                            viewBox="0 0 20 20"
+                                            fill="currentColor"
+                                            data-slot="icon"
+                                            aria-hidden="true"
+                                            class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
+                                        >
+                                            <path
+                                                d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                                                clip-rule="evenodd"
+                                                fill-rule="evenodd"
+                                            />
+                                        </svg>
+                                    </a>
+                                </el-command-group>
+                            </el-command-list>
+
+                            <el-no-results
+                                hidden
+                                class="block px-6 py-14 text-center text-sm sm:px-14"
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="mx-auto size-6 text-gray-400"
+                                >
+                                    <path
+                                        d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                                <p class="mt-4 font-semibold text-gray-900">
+                                    No people found
+                                </p>
+                                <p class="mt-2 text-gray-500">
+                                    We couldn't find anything with that term.
+                                    Please try again.
+                                </p>
+                            </el-no-results>
+                        </div>
+
+                        <el-command-preview
+                            for="person-suggestion-6"
+                            hidden
+                            class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
+                        >
+                            <div class="flex-none p-6 text-center">
+                                <img
+                                    src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                    alt=""
+                                    class="mx-auto size-16 rounded-full"
+                                />
+                                <h2 class="mt-3 font-semibold text-gray-900">
+                                    Tom Cook
+                                </h2>
+                                <p class="text-sm/6 text-gray-500">
+                                    Director, Product Development
+                                </p>
+                            </div>
+                            <div
+                                class="flex flex-auto flex-col justify-between p-6"
+                            >
+                                <dl
+                                    class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
+                                >
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Phone
+                                    </dt>
+                                    <dd>881-460-8515</dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        URL
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="https://example.com"
+                                            class="text-indigo-600 underline"
+                                            >https://example.com</a
+                                        >
+                                    </dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Email
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="mailto:tomcook@example.com"
+                                            class="text-indigo-600 underline"
+                                            >tomcook@example.com</a
+                                        >
+                                    </dd>
+                                </dl>
+                                <button
+                                    type="button"
+                                    class="mt-6 w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                                >
+                                    Send message
+                                </button>
+                            </div>
+                        </el-command-preview>
+                        <el-command-preview
+                            for="person-suggestion-5"
+                            hidden
+                            class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
+                        >
+                            <div class="flex-none p-6 text-center">
+                                <img
+                                    src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                    alt=""
+                                    class="mx-auto size-16 rounded-full"
+                                />
+                                <h2 class="mt-3 font-semibold text-gray-900">
+                                    Courtney Henry
+                                </h2>
+                                <p class="text-sm/6 text-gray-500">Designer</p>
+                            </div>
+                            <div
+                                class="flex flex-auto flex-col justify-between p-6"
+                            >
+                                <dl
+                                    class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
+                                >
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Phone
+                                    </dt>
+                                    <dd>640-309-4790</dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        URL
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="https://example.com"
+                                            class="text-indigo-600 underline"
+                                            >https://example.com</a
+                                        >
+                                    </dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Email
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="mailto:courtneyhenry@example.com"
+                                            class="text-indigo-600 underline"
+                                            >courtneyhenry@example.com</a
+                                        >
+                                    </dd>
+                                </dl>
+                                <button
+                                    type="button"
+                                    class="mt-6 w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                                >
+                                    Send message
+                                </button>
+                            </div>
+                        </el-command-preview>
+                        <el-command-preview
+                            for="person-suggestion-3"
+                            hidden
+                            class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
+                        >
+                            <div class="flex-none p-6 text-center">
+                                <img
+                                    src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                    alt=""
+                                    class="mx-auto size-16 rounded-full"
+                                />
+                                <h2 class="mt-3 font-semibold text-gray-900">
+                                    Dries Vincent
+                                </h2>
+                                <p class="text-sm/6 text-gray-500">
+                                    Manager, Business Relations
+                                </p>
+                            </div>
+                            <div
+                                class="flex flex-auto flex-col justify-between p-6"
+                            >
+                                <dl
+                                    class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
+                                >
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Phone
+                                    </dt>
+                                    <dd>713-330-1164</dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        URL
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="https://example.com"
+                                            class="text-indigo-600 underline"
+                                            >https://example.com</a
+                                        >
+                                    </dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Email
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="mailto:driesvincent@example.com"
+                                            class="text-indigo-600 underline"
+                                            >driesvincent@example.com</a
+                                        >
+                                    </dd>
+                                </dl>
+                                <button
+                                    type="button"
+                                    class="mt-6 w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                                >
+                                    Send message
+                                </button>
+                            </div>
+                        </el-command-preview>
+                        <el-command-preview
+                            for="person-suggestion-11"
+                            hidden
+                            class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
+                        >
+                            <div class="flex-none p-6 text-center">
+                                <img
+                                    src="https://images.unsplash.com/photo-1500917293891-ef795e70e1f6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                    alt=""
+                                    class="mx-auto size-16 rounded-full"
+                                />
+                                <h2 class="mt-3 font-semibold text-gray-900">
+                                    Kristin Watson
+                                </h2>
+                                <p class="text-sm/6 text-gray-500">
+                                    VP, Human Resources
+                                </p>
+                            </div>
+                            <div
+                                class="flex flex-auto flex-col justify-between p-6"
+                            >
+                                <dl
+                                    class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
+                                >
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Phone
+                                    </dt>
+                                    <dd>628.594.9386</dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        URL
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="https://example.com"
+                                            class="text-indigo-600 underline"
+                                            >https://example.com</a
+                                        >
+                                    </dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Email
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="mailto:kristinwatson@example.com"
+                                            class="text-indigo-600 underline"
+                                            >kristinwatson@example.com</a
+                                        >
+                                    </dd>
+                                </dl>
+                                <button
+                                    type="button"
+                                    class="mt-6 w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                                >
+                                    Send message
+                                </button>
+                            </div>
+                        </el-command-preview>
+                        <el-command-preview
+                            for="person-suggestion-17"
+                            hidden
+                            class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
+                        >
+                            <div class="flex-none p-6 text-center">
+                                <img
+                                    src="https://images.unsplash.com/photo-1517070208541-6ddc4d3efbcb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                    alt=""
+                                    class="mx-auto size-16 rounded-full"
+                                />
+                                <h2 class="mt-3 font-semibold text-gray-900">
+                                    Jeffrey Webb
+                                </h2>
+                                <p class="text-sm/6 text-gray-500">
+                                    Senior Art Director
+                                </p>
+                            </div>
+                            <div
+                                class="flex flex-auto flex-col justify-between p-6"
+                            >
+                                <dl
+                                    class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
+                                >
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Phone
+                                    </dt>
+                                    <dd>735-907-6338</dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        URL
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="https://example.com"
+                                            class="text-indigo-600 underline"
+                                            >https://example.com</a
+                                        >
+                                    </dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Email
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="mailto:jeffreywebb@example.com"
+                                            class="text-indigo-600 underline"
+                                            >jeffreywebb@example.com</a
+                                        >
+                                    </dd>
+                                </dl>
+                                <button
+                                    type="button"
+                                    class="mt-6 w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                                >
+                                    Send message
+                                </button>
+                            </div>
+                        </el-command-preview>
+
+                        <el-command-preview
+                            for="person-1"
+                            hidden
+                            class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
+                        >
+                            <div class="flex-none p-6 text-center">
+                                <img
+                                    src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                    alt=""
+                                    class="mx-auto size-16 rounded-full"
+                                />
+                                <h2 class="mt-3 font-semibold text-gray-900">
+                                    Leslie Alexander
+                                </h2>
+                                <p class="text-sm/6 text-gray-500">
+                                    Co-Founder / CEO
+                                </p>
+                            </div>
+                            <div
+                                class="flex flex-auto flex-col justify-between p-6"
+                            >
+                                <dl
+                                    class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
+                                >
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Phone
+                                    </dt>
+                                    <dd>1-493-747-9031</dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        URL
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="https://example.com"
+                                            class="text-indigo-600 underline"
+                                            >https://example.com</a
+                                        >
+                                    </dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Email
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="mailto:lesliealexander@example.com"
+                                            class="text-indigo-600 underline"
+                                            >lesliealexander@example.com</a
+                                        >
+                                    </dd>
+                                </dl>
+                                <button
+                                    type="button"
+                                    class="mt-6 w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                                >
+                                    Send message
+                                </button>
+                            </div>
+                        </el-command-preview>
+                        <el-command-preview
+                            for="person-2"
+                            hidden
+                            class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
+                        >
+                            <div class="flex-none p-6 text-center">
+                                <img
+                                    src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                    alt=""
+                                    class="mx-auto size-16 rounded-full"
+                                />
+                                <h2 class="mt-3 font-semibold text-gray-900">
+                                    Michael Foster
+                                </h2>
+                                <p class="text-sm/6 text-gray-500">
+                                    Co-Founder / CTO
+                                </p>
+                            </div>
+                            <div
+                                class="flex flex-auto flex-col justify-between p-6"
+                            >
+                                <dl
+                                    class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
+                                >
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Phone
+                                    </dt>
+                                    <dd>(520) 717-3793</dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        URL
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="https://example.com"
+                                            class="text-indigo-600 underline"
+                                            >https://example.com</a
+                                        >
+                                    </dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Email
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="mailto:michaelfoster@example.com"
+                                            class="text-indigo-600 underline"
+                                            >michaelfoster@example.com</a
+                                        >
+                                    </dd>
+                                </dl>
+                                <button
+                                    type="button"
+                                    class="mt-6 w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                                >
+                                    Send message
+                                </button>
+                            </div>
+                        </el-command-preview>
+                        <el-command-preview
+                            for="person-3"
+                            hidden
+                            class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
+                        >
+                            <div class="flex-none p-6 text-center">
+                                <img
+                                    src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                    alt=""
+                                    class="mx-auto size-16 rounded-full"
+                                />
+                                <h2 class="mt-3 font-semibold text-gray-900">
+                                    Dries Vincent
+                                </h2>
+                                <p class="text-sm/6 text-gray-500">
+                                    Manager, Business Relations
+                                </p>
+                            </div>
+                            <div
+                                class="flex flex-auto flex-col justify-between p-6"
+                            >
+                                <dl
+                                    class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
+                                >
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Phone
+                                    </dt>
+                                    <dd>713-330-1164</dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        URL
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="https://example.com"
+                                            class="text-indigo-600 underline"
+                                            >https://example.com</a
+                                        >
+                                    </dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Email
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="mailto:driesvincent@example.com"
+                                            class="text-indigo-600 underline"
+                                            >driesvincent@example.com</a
+                                        >
+                                    </dd>
+                                </dl>
+                                <button
+                                    type="button"
+                                    class="mt-6 w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                                >
+                                    Send message
+                                </button>
+                            </div>
+                        </el-command-preview>
+                        <el-command-preview
+                            for="person-4"
+                            hidden
+                            class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
+                        >
+                            <div class="flex-none p-6 text-center">
+                                <img
+                                    src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                    alt=""
+                                    class="mx-auto size-16 rounded-full"
+                                />
+                                <h2 class="mt-3 font-semibold text-gray-900">
+                                    Lindsay Walton
+                                </h2>
+                                <p class="text-sm/6 text-gray-500">
+                                    Front-end Developer
+                                </p>
+                            </div>
+                            <div
+                                class="flex flex-auto flex-col justify-between p-6"
+                            >
+                                <dl
+                                    class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
+                                >
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Phone
+                                    </dt>
+                                    <dd>929-472-9421</dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        URL
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="https://example.com"
+                                            class="text-indigo-600 underline"
+                                            >https://example.com</a
+                                        >
+                                    </dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Email
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="mailto:lindsaywalton@example.com"
+                                            class="text-indigo-600 underline"
+                                            >lindsaywalton@example.com</a
+                                        >
+                                    </dd>
+                                </dl>
+                                <button
+                                    type="button"
+                                    class="mt-6 w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                                >
+                                    Send message
+                                </button>
+                            </div>
+                        </el-command-preview>
+                        <el-command-preview
+                            for="person-5"
+                            hidden
+                            class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
+                        >
+                            <div class="flex-none p-6 text-center">
+                                <img
+                                    src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                    alt=""
+                                    class="mx-auto size-16 rounded-full"
+                                />
+                                <h2 class="mt-3 font-semibold text-gray-900">
+                                    Courtney Henry
+                                </h2>
+                                <p class="text-sm/6 text-gray-500">Designer</p>
+                            </div>
+                            <div
+                                class="flex flex-auto flex-col justify-between p-6"
+                            >
+                                <dl
+                                    class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
+                                >
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Phone
+                                    </dt>
+                                    <dd>640-309-4790</dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        URL
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="https://example.com"
+                                            class="text-indigo-600 underline"
+                                            >https://example.com</a
+                                        >
+                                    </dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Email
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="mailto:courtneyhenry@example.com"
+                                            class="text-indigo-600 underline"
+                                            >courtneyhenry@example.com</a
+                                        >
+                                    </dd>
+                                </dl>
+                                <button
+                                    type="button"
+                                    class="mt-6 w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                                >
+                                    Send message
+                                </button>
+                            </div>
+                        </el-command-preview>
+                        <el-command-preview
+                            for="person-6"
+                            hidden
+                            class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
+                        >
+                            <div class="flex-none p-6 text-center">
+                                <img
+                                    src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                    alt=""
+                                    class="mx-auto size-16 rounded-full"
+                                />
+                                <h2 class="mt-3 font-semibold text-gray-900">
+                                    Tom Cook
+                                </h2>
+                                <p class="text-sm/6 text-gray-500">
+                                    Director, Product Development
+                                </p>
+                            </div>
+                            <div
+                                class="flex flex-auto flex-col justify-between p-6"
+                            >
+                                <dl
+                                    class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
+                                >
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Phone
+                                    </dt>
+                                    <dd>881-460-8515</dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        URL
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="https://example.com"
+                                            class="text-indigo-600 underline"
+                                            >https://example.com</a
+                                        >
+                                    </dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Email
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="mailto:tomcook@example.com"
+                                            class="text-indigo-600 underline"
+                                            >tomcook@example.com</a
+                                        >
+                                    </dd>
+                                </dl>
+                                <button
+                                    type="button"
+                                    class="mt-6 w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                                >
+                                    Send message
+                                </button>
+                            </div>
+                        </el-command-preview>
+                        <el-command-preview
+                            for="person-7"
+                            hidden
+                            class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
+                        >
+                            <div class="flex-none p-6 text-center">
+                                <img
+                                    src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                    alt=""
+                                    class="mx-auto size-16 rounded-full"
+                                />
+                                <h2 class="mt-3 font-semibold text-gray-900">
+                                    Whitney Francis
+                                </h2>
+                                <p class="text-sm/6 text-gray-500">
+                                    Copywriter
+                                </p>
+                            </div>
+                            <div
+                                class="flex flex-auto flex-col justify-between p-6"
+                            >
+                                <dl
+                                    class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
+                                >
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Phone
+                                    </dt>
+                                    <dd>885.518.1274</dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        URL
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="https://example.com"
+                                            class="text-indigo-600 underline"
+                                            >https://example.com</a
+                                        >
+                                    </dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Email
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="mailto:whitneyfrancis@example.com"
+                                            class="text-indigo-600 underline"
+                                            >whitneyfrancis@example.com</a
+                                        >
+                                    </dd>
+                                </dl>
+                                <button
+                                    type="button"
+                                    class="mt-6 w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                                >
+                                    Send message
+                                </button>
+                            </div>
+                        </el-command-preview>
+                        <el-command-preview
+                            for="person-8"
+                            hidden
+                            class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
+                        >
+                            <div class="flex-none p-6 text-center">
+                                <img
+                                    src="https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                    alt=""
+                                    class="mx-auto size-16 rounded-full"
+                                />
+                                <h2 class="mt-3 font-semibold text-gray-900">
+                                    Leonard Krasner
+                                </h2>
+                                <p class="text-sm/6 text-gray-500">
+                                    Senior Designer
+                                </p>
+                            </div>
+                            <div
+                                class="flex flex-auto flex-col justify-between p-6"
+                            >
+                                <dl
+                                    class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
+                                >
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Phone
+                                    </dt>
+                                    <dd>(515) 552-4223</dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        URL
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="https://example.com"
+                                            class="text-indigo-600 underline"
+                                            >https://example.com</a
+                                        >
+                                    </dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Email
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="mailto:leonardkrasner@example.com"
+                                            class="text-indigo-600 underline"
+                                            >leonardkrasner@example.com</a
+                                        >
+                                    </dd>
+                                </dl>
+                                <button
+                                    type="button"
+                                    class="mt-6 w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                                >
+                                    Send message
+                                </button>
+                            </div>
+                        </el-command-preview>
+                        <el-command-preview
+                            for="person-9"
+                            hidden
+                            class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
+                        >
+                            <div class="flex-none p-6 text-center">
+                                <img
+                                    src="https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                    alt=""
+                                    class="mx-auto size-16 rounded-full"
+                                />
+                                <h2 class="mt-3 font-semibold text-gray-900">
+                                    Floyd Miles
+                                </h2>
+                                <p class="text-sm/6 text-gray-500">
+                                    Principal Designer
+                                </p>
+                            </div>
+                            <div
+                                class="flex flex-auto flex-col justify-between p-6"
+                            >
+                                <dl
+                                    class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
+                                >
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Phone
+                                    </dt>
+                                    <dd>345-500-5753</dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        URL
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="https://example.com"
+                                            class="text-indigo-600 underline"
+                                            >https://example.com</a
+                                        >
+                                    </dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Email
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="mailto:floydmiles@example.com"
+                                            class="text-indigo-600 underline"
+                                            >floydmiles@example.com</a
+                                        >
+                                    </dd>
+                                </dl>
+                                <button
+                                    type="button"
+                                    class="mt-6 w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                                >
+                                    Send message
+                                </button>
+                            </div>
+                        </el-command-preview>
+                        <el-command-preview
+                            for="person-10"
+                            hidden
+                            class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
+                        >
+                            <div class="flex-none p-6 text-center">
+                                <img
+                                    src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                    alt=""
+                                    class="mx-auto size-16 rounded-full"
+                                />
+                                <h2 class="mt-3 font-semibold text-gray-900">
+                                    Emily Selman
+                                </h2>
+                                <p class="text-sm/6 text-gray-500">
+                                    VP, User Experience
+                                </p>
+                            </div>
+                            <div
+                                class="flex flex-auto flex-col justify-between p-6"
+                            >
+                                <dl
+                                    class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
+                                >
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Phone
+                                    </dt>
+                                    <dd>902-649-9025</dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        URL
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="https://example.com"
+                                            class="text-indigo-600 underline"
+                                            >https://example.com</a
+                                        >
+                                    </dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Email
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="mailto:emilyselman@example.com"
+                                            class="text-indigo-600 underline"
+                                            >emilyselman@example.com</a
+                                        >
+                                    </dd>
+                                </dl>
+                                <button
+                                    type="button"
+                                    class="mt-6 w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                                >
+                                    Send message
+                                </button>
+                            </div>
+                        </el-command-preview>
+                        <el-command-preview
+                            for="person-11"
+                            hidden
+                            class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
+                        >
+                            <div class="flex-none p-6 text-center">
+                                <img
+                                    src="https://images.unsplash.com/photo-1500917293891-ef795e70e1f6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                    alt=""
+                                    class="mx-auto size-16 rounded-full"
+                                />
+                                <h2 class="mt-3 font-semibold text-gray-900">
+                                    Kristin Watson
+                                </h2>
+                                <p class="text-sm/6 text-gray-500">
+                                    VP, Human Resources
+                                </p>
+                            </div>
+                            <div
+                                class="flex flex-auto flex-col justify-between p-6"
+                            >
+                                <dl
+                                    class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
+                                >
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Phone
+                                    </dt>
+                                    <dd>628.594.9386</dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        URL
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="https://example.com"
+                                            class="text-indigo-600 underline"
+                                            >https://example.com</a
+                                        >
+                                    </dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Email
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="mailto:kristinwatson@example.com"
+                                            class="text-indigo-600 underline"
+                                            >kristinwatson@example.com</a
+                                        >
+                                    </dd>
+                                </dl>
+                                <button
+                                    type="button"
+                                    class="mt-6 w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                                >
+                                    Send message
+                                </button>
+                            </div>
+                        </el-command-preview>
+                        <el-command-preview
+                            for="person-12"
+                            hidden
+                            class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
+                        >
+                            <div class="flex-none p-6 text-center">
+                                <img
+                                    src="https://images.unsplash.com/photo-1505840717430-882ce147ef2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                    alt=""
+                                    class="mx-auto size-16 rounded-full"
+                                />
+                                <h2 class="mt-3 font-semibold text-gray-900">
+                                    Emma Dorsey
+                                </h2>
+                                <p class="text-sm/6 text-gray-500">
+                                    Senior Front-end Developer
+                                </p>
+                            </div>
+                            <div
+                                class="flex flex-auto flex-col justify-between p-6"
+                            >
+                                <dl
+                                    class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
+                                >
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Phone
+                                    </dt>
+                                    <dd>(861) 305-6606</dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        URL
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="https://example.com"
+                                            class="text-indigo-600 underline"
+                                            >https://example.com</a
+                                        >
+                                    </dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Email
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="mailto:emmadorsey@example.com"
+                                            class="text-indigo-600 underline"
+                                            >emmadorsey@example.com</a
+                                        >
+                                    </dd>
+                                </dl>
+                                <button
+                                    type="button"
+                                    class="mt-6 w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                                >
+                                    Send message
+                                </button>
+                            </div>
+                        </el-command-preview>
+                        <el-command-preview
+                            for="person-13"
+                            hidden
+                            class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
+                        >
+                            <div class="flex-none p-6 text-center">
+                                <img
+                                    src="https://images.unsplash.com/photo-1509783236416-c9ad59bae472?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                    alt=""
+                                    class="mx-auto size-16 rounded-full"
+                                />
+                                <h2 class="mt-3 font-semibold text-gray-900">
+                                    Alicia Bell
+                                </h2>
+                                <p class="text-sm/6 text-gray-500">
+                                    Junior Copywriter
+                                </p>
+                            </div>
+                            <div
+                                class="flex flex-auto flex-col justify-between p-6"
+                            >
+                                <dl
+                                    class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
+                                >
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Phone
+                                    </dt>
+                                    <dd>(401) 357-1796</dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        URL
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="https://example.com"
+                                            class="text-indigo-600 underline"
+                                            >https://example.com</a
+                                        >
+                                    </dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Email
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="mailto:aliciabell@example.com"
+                                            class="text-indigo-600 underline"
+                                            >aliciabell@example.com</a
+                                        >
+                                    </dd>
+                                </dl>
+                                <button
+                                    type="button"
+                                    class="mt-6 w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                                >
+                                    Send message
+                                </button>
+                            </div>
+                        </el-command-preview>
+                        <el-command-preview
+                            for="person-14"
+                            hidden
+                            class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
+                        >
+                            <div class="flex-none p-6 text-center">
+                                <img
+                                    src="https://images.unsplash.com/photo-1507101105822-7472b28e22ac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                    alt=""
+                                    class="mx-auto size-16 rounded-full"
+                                />
+                                <h2 class="mt-3 font-semibold text-gray-900">
+                                    Jenny Wilson
+                                </h2>
+                                <p class="text-sm/6 text-gray-500">
+                                    Studio Artist
+                                </p>
+                            </div>
+                            <div
+                                class="flex flex-auto flex-col justify-between p-6"
+                            >
+                                <dl
+                                    class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
+                                >
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Phone
+                                    </dt>
+                                    <dd>(974) 557-5873</dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        URL
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="https://example.com"
+                                            class="text-indigo-600 underline"
+                                            >https://example.com</a
+                                        >
+                                    </dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Email
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="mailto:jennywilson@example.com"
+                                            class="text-indigo-600 underline"
+                                            >jennywilson@example.com</a
+                                        >
+                                    </dd>
+                                </dl>
+                                <button
+                                    type="button"
+                                    class="mt-6 w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                                >
+                                    Send message
+                                </button>
+                            </div>
+                        </el-command-preview>
+                        <el-command-preview
+                            for="person-15"
+                            hidden
+                            class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
+                        >
+                            <div class="flex-none p-6 text-center">
+                                <img
+                                    src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                    alt=""
+                                    class="mx-auto size-16 rounded-full"
+                                />
+                                <h2 class="mt-3 font-semibold text-gray-900">
+                                    Anna Roberts
+                                </h2>
+                                <p class="text-sm/6 text-gray-500">
+                                    Partner, Creative
+                                </p>
+                            </div>
+                            <div
+                                class="flex flex-auto flex-col justify-between p-6"
+                            >
+                                <dl
+                                    class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
+                                >
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Phone
+                                    </dt>
+                                    <dd>(424) 411-6610</dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        URL
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="https://example.com"
+                                            class="text-indigo-600 underline"
+                                            >https://example.com</a
+                                        >
+                                    </dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Email
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="mailto:annaroberts@example.com"
+                                            class="text-indigo-600 underline"
+                                            >annaroberts@example.com</a
+                                        >
+                                    </dd>
+                                </dl>
+                                <button
+                                    type="button"
+                                    class="mt-6 w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                                >
+                                    Send message
+                                </button>
+                            </div>
+                        </el-command-preview>
+                        <el-command-preview
+                            for="person-16"
+                            hidden
+                            class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
+                        >
+                            <div class="flex-none p-6 text-center">
+                                <img
+                                    src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                    alt=""
+                                    class="mx-auto size-16 rounded-full"
+                                />
+                                <h2 class="mt-3 font-semibold text-gray-900">
+                                    Benjamin Russel
+                                </h2>
+                                <p class="text-sm/6 text-gray-500">
+                                    Director, Print Operations
+                                </p>
+                            </div>
+                            <div
+                                class="flex flex-auto flex-col justify-between p-6"
+                            >
+                                <dl
+                                    class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
+                                >
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Phone
+                                    </dt>
+                                    <dd>645-664-8590</dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        URL
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="https://example.com"
+                                            class="text-indigo-600 underline"
+                                            >https://example.com</a
+                                        >
+                                    </dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Email
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="mailto:benjaminrussel@example.com"
+                                            class="text-indigo-600 underline"
+                                            >benjaminrussel@example.com</a
+                                        >
+                                    </dd>
+                                </dl>
+                                <button
+                                    type="button"
+                                    class="mt-6 w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                                >
+                                    Send message
+                                </button>
+                            </div>
+                        </el-command-preview>
+                        <el-command-preview
+                            for="person-17"
+                            hidden
+                            class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
+                        >
+                            <div class="flex-none p-6 text-center">
+                                <img
+                                    src="https://images.unsplash.com/photo-1517070208541-6ddc4d3efbcb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                    alt=""
+                                    class="mx-auto size-16 rounded-full"
+                                />
+                                <h2 class="mt-3 font-semibold text-gray-900">
+                                    Jeffrey Webb
+                                </h2>
+                                <p class="text-sm/6 text-gray-500">
+                                    Senior Art Director
+                                </p>
+                            </div>
+                            <div
+                                class="flex flex-auto flex-col justify-between p-6"
+                            >
+                                <dl
+                                    class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
+                                >
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Phone
+                                    </dt>
+                                    <dd>735-907-6338</dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        URL
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="https://example.com"
+                                            class="text-indigo-600 underline"
+                                            >https://example.com</a
+                                        >
+                                    </dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Email
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="mailto:jeffreywebb@example.com"
+                                            class="text-indigo-600 underline"
+                                            >jeffreywebb@example.com</a
+                                        >
+                                    </dd>
+                                </dl>
+                                <button
+                                    type="button"
+                                    class="mt-6 w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                                >
+                                    Send message
+                                </button>
+                            </div>
+                        </el-command-preview>
+                        <el-command-preview
+                            for="person-18"
+                            hidden
+                            class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
+                        >
+                            <div class="flex-none p-6 text-center">
+                                <img
+                                    src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                    alt=""
+                                    class="mx-auto size-16 rounded-full"
+                                />
+                                <h2 class="mt-3 font-semibold text-gray-900">
+                                    Kathryn Murphy
+                                </h2>
+                                <p class="text-sm/6 text-gray-500">
+                                    Associate Creative Director
+                                </p>
+                            </div>
+                            <div
+                                class="flex flex-auto flex-col justify-between p-6"
+                            >
+                                <dl
+                                    class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
+                                >
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Phone
+                                    </dt>
+                                    <dd>801.262.8098</dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        URL
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="https://example.com"
+                                            class="text-indigo-600 underline"
+                                            >https://example.com</a
+                                        >
+                                    </dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Email
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="mailto:kathrynmurphy@example.com"
+                                            class="text-indigo-600 underline"
+                                            >kathrynmurphy@example.com</a
+                                        >
+                                    </dd>
+                                </dl>
+                                <button
+                                    type="button"
+                                    class="mt-6 w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                                >
+                                    Send message
+                                </button>
+                            </div>
+                        </el-command-preview>
+                        <el-command-preview
+                            for="person-19"
+                            hidden
+                            class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
+                        >
+                            <div class="flex-none p-6 text-center">
+                                <img
+                                    src="https://images.unsplash.com/photo-1513910367299-bce8d8a0ebf6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                    alt=""
+                                    class="mx-auto size-16 rounded-full"
+                                />
+                                <h2 class="mt-3 font-semibold text-gray-900">
+                                    Lawrence Hunter
+                                </h2>
+                                <p class="text-sm/6 text-gray-500">
+                                    Content Specialist
+                                </p>
+                            </div>
+                            <div
+                                class="flex flex-auto flex-col justify-between p-6"
+                            >
+                                <dl
+                                    class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
+                                >
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Phone
+                                    </dt>
+                                    <dd>582-792-1717</dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        URL
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="https://example.com"
+                                            class="text-indigo-600 underline"
+                                            >https://example.com</a
+                                        >
+                                    </dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Email
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="mailto:lawrencehunter@example.com"
+                                            class="text-indigo-600 underline"
+                                            >lawrencehunter@example.com</a
+                                        >
+                                    </dd>
+                                </dl>
+                                <button
+                                    type="button"
+                                    class="mt-6 w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                                >
+                                    Send message
+                                </button>
+                            </div>
+                        </el-command-preview>
+                        <el-command-preview
+                            for="person-20"
+                            hidden
+                            class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
+                        >
+                            <div class="flex-none p-6 text-center">
+                                <img
+                                    src="https://images.unsplash.com/photo-1506980595904-70325b7fdd90?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                    alt=""
+                                    class="mx-auto size-16 rounded-full"
+                                />
+                                <h2 class="mt-3 font-semibold text-gray-900">
+                                    Yvette Armstrong
+                                </h2>
+                                <p class="text-sm/6 text-gray-500">
+                                    Studio Artist
+                                </p>
+                            </div>
+                            <div
+                                class="flex flex-auto flex-col justify-between p-6"
+                            >
+                                <dl
+                                    class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
+                                >
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Phone
+                                    </dt>
+                                    <dd>952.256.5380</dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        URL
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="https://example.com"
+                                            class="text-indigo-600 underline"
+                                            >https://example.com</a
+                                        >
+                                    </dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Email
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="mailto:yvettearmstrong@example.com"
+                                            class="text-indigo-600 underline"
+                                            >yvettearmstrong@example.com</a
+                                        >
+                                    </dd>
+                                </dl>
+                                <button
+                                    type="button"
+                                    class="mt-6 w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                                >
+                                    Send message
+                                </button>
+                            </div>
+                        </el-command-preview>
+                        <el-command-preview
+                            for="person-21"
+                            hidden
+                            class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
+                        >
+                            <div class="flex-none p-6 text-center">
+                                <img
+                                    src="https://images.unsplash.com/photo-1501031170107-cfd33f0cbdcc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                    alt=""
+                                    class="mx-auto size-16 rounded-full"
+                                />
+                                <h2 class="mt-3 font-semibold text-gray-900">
+                                    Angela Fisher
+                                </h2>
+                                <p class="text-sm/6 text-gray-500">
+                                    Chief Strategy Officer
+                                </p>
+                            </div>
+                            <div
+                                class="flex flex-auto flex-col justify-between p-6"
+                            >
+                                <dl
+                                    class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
+                                >
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Phone
+                                    </dt>
+                                    <dd>295.646.2328</dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        URL
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="https://example.com"
+                                            class="text-indigo-600 underline"
+                                            >https://example.com</a
+                                        >
+                                    </dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Email
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="mailto:angelafisher@example.com"
+                                            class="text-indigo-600 underline"
+                                            >angelafisher@example.com</a
+                                        >
+                                    </dd>
+                                </dl>
+                                <button
+                                    type="button"
+                                    class="mt-6 w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                                >
+                                    Send message
+                                </button>
+                            </div>
+                        </el-command-preview>
+                        <el-command-preview
+                            for="person-22"
+                            hidden
+                            class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
+                        >
+                            <div class="flex-none p-6 text-center">
+                                <img
+                                    src="https://images.unsplash.com/photo-1520785643438-5bf77931f493?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                    alt=""
+                                    class="mx-auto size-16 rounded-full"
+                                />
+                                <h2 class="mt-3 font-semibold text-gray-900">
+                                    Blake Reid
+                                </h2>
+                                <p class="text-sm/6 text-gray-500">
+                                    Account Coordinator
+                                </p>
+                            </div>
+                            <div
+                                class="flex flex-auto flex-col justify-between p-6"
+                            >
+                                <dl
+                                    class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
+                                >
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Phone
+                                    </dt>
+                                    <dd>(963) 209-3673</dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        URL
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="https://example.com"
+                                            class="text-indigo-600 underline"
+                                            >https://example.com</a
+                                        >
+                                    </dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Email
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="mailto:blakereid@example.com"
+                                            class="text-indigo-600 underline"
+                                            >blakereid@example.com</a
+                                        >
+                                    </dd>
+                                </dl>
+                                <button
+                                    type="button"
+                                    class="mt-6 w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                                >
+                                    Send message
+                                </button>
+                            </div>
+                        </el-command-preview>
+                        <el-command-preview
+                            for="person-23"
+                            hidden
+                            class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
+                        >
+                            <div class="flex-none p-6 text-center">
+                                <img
+                                    src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                    alt=""
+                                    class="mx-auto size-16 rounded-full"
+                                />
+                                <h2 class="mt-3 font-semibold text-gray-900">
+                                    Hector Gibbons
+                                </h2>
+                                <p class="text-sm/6 text-gray-500">
+                                    VP, Marketing
+                                </p>
+                            </div>
+                            <div
+                                class="flex flex-auto flex-col justify-between p-6"
+                            >
+                                <dl
+                                    class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
+                                >
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Phone
+                                    </dt>
+                                    <dd>(441) 383-1416</dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        URL
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="https://example.com"
+                                            class="text-indigo-600 underline"
+                                            >https://example.com</a
+                                        >
+                                    </dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Email
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="mailto:hectorgibbons@example.com"
+                                            class="text-indigo-600 underline"
+                                            >hectorgibbons@example.com</a
+                                        >
+                                    </dd>
+                                </dl>
+                                <button
+                                    type="button"
+                                    class="mt-6 w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                                >
+                                    Send message
+                                </button>
+                            </div>
+                        </el-command-preview>
+                        <el-command-preview
+                            for="person-24"
+                            hidden
+                            class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
+                        >
+                            <div class="flex-none p-6 text-center">
+                                <img
+                                    src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                    alt=""
+                                    class="mx-auto size-16 rounded-full"
+                                />
+                                <h2 class="mt-3 font-semibold text-gray-900">
+                                    Fabricio Mendes
+                                </h2>
+                                <p class="text-sm/6 text-gray-500">
+                                    Senior Art Director
+                                </p>
+                            </div>
+                            <div
+                                class="flex flex-auto flex-col justify-between p-6"
+                            >
+                                <dl
+                                    class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
+                                >
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Phone
+                                    </dt>
+                                    <dd>(412) 542-8899</dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        URL
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="https://example.com"
+                                            class="text-indigo-600 underline"
+                                            >https://example.com</a
+                                        >
+                                    </dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Email
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="mailto:fabriciomendes@example.com"
+                                            class="text-indigo-600 underline"
+                                            >fabriciomendes@example.com</a
+                                        >
+                                    </dd>
+                                </dl>
+                                <button
+                                    type="button"
+                                    class="mt-6 w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                                >
+                                    Send message
+                                </button>
+                            </div>
+                        </el-command-preview>
+                        <el-command-preview
+                            for="person-25"
+                            hidden
+                            class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
+                        >
+                            <div class="flex-none p-6 text-center">
+                                <img
+                                    src="https://images.unsplash.com/photo-1504703395950-b89145a5425b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                    alt=""
+                                    class="mx-auto size-16 rounded-full"
+                                />
+                                <h2 class="mt-3 font-semibold text-gray-900">
+                                    Jillian Steward
+                                </h2>
+                                <p class="text-sm/6 text-gray-500">Designer</p>
+                            </div>
+                            <div
+                                class="flex flex-auto flex-col justify-between p-6"
+                            >
+                                <dl
+                                    class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
+                                >
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Phone
+                                    </dt>
+                                    <dd>908-440-7071</dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        URL
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="https://example.com"
+                                            class="text-indigo-600 underline"
+                                            >https://example.com</a
+                                        >
+                                    </dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Email
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="mailto:jilliansteward@example.com"
+                                            class="text-indigo-600 underline"
+                                            >jilliansteward@example.com</a
+                                        >
+                                    </dd>
+                                </dl>
+                                <button
+                                    type="button"
+                                    class="mt-6 w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                                >
+                                    Send message
+                                </button>
+                            </div>
+                        </el-command-preview>
+                        <el-command-preview
+                            for="person-26"
+                            hidden
+                            class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
+                        >
+                            <div class="flex-none p-6 text-center">
+                                <img
+                                    src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                    alt=""
+                                    class="mx-auto size-16 rounded-full"
+                                />
+                                <h2 class="mt-3 font-semibold text-gray-900">
+                                    Chelsea Hagon
+                                </h2>
+                                <p class="text-sm/6 text-gray-500">
+                                    Human Resources Manager
+                                </p>
+                            </div>
+                            <div
+                                class="flex flex-auto flex-col justify-between p-6"
+                            >
+                                <dl
+                                    class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
+                                >
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Phone
+                                    </dt>
+                                    <dd>343-829-4718</dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        URL
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="https://example.com"
+                                            class="text-indigo-600 underline"
+                                            >https://example.com</a
+                                        >
+                                    </dd>
+                                    <dt
+                                        class="col-end-1 font-semibold text-gray-900"
+                                    >
+                                        Email
+                                    </dt>
+                                    <dd class="truncate">
+                                        <a
+                                            href="mailto:chelseahagon@example.com"
+                                            class="text-indigo-600 underline"
+                                            >chelseahagon@example.com</a
+                                        >
+                                    </dd>
+                                </dl>
+                                <button
+                                    type="button"
+                                    class="mt-6 w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                                >
+                                    Send message
+                                </button>
+                            </div>
+                        </el-command-preview>
+                    </div>
+                </el-command-palette>
+            </el-dialog-panel>
+        </div>
+    </dialog>
+</el-dialog>
diff --git a/application_ui/navigation/navbars/dark_with_quick_action.html b/application_ui/navigation/navbars/dark_with_quick_action.html
new file mode 100644
index 0000000..a2381e5
--- /dev/null
+++ b/application_ui/navigation/navbars/dark_with_quick_action.html
@@ -0,0 +1,250 @@
+<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
+<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
+<nav class="bg-gray-800">
+    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div class="flex h-16 justify-between">
+            <div class="flex">
+                <div class="mr-2 -ml-2 flex items-center md:hidden">
+                    <!-- Mobile menu button -->
+                    <button
+                        type="button"
+                        command="--toggle"
+                        commandfor="mobile-menu"
+                        class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:ring-2 focus:ring-white focus:outline-hidden focus:ring-inset"
+                    >
+                        <span class="absolute -inset-0.5"></span>
+                        <span class="sr-only">Open main menu</span>
+                        <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="size-6 in-aria-expanded:hidden"
+                        >
+                            <path
+                                d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                        <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="size-6 not-in-aria-expanded:hidden"
+                        >
+                            <path
+                                d="M6 18 18 6M6 6l12 12"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                    </button>
+                </div>
+                <div class="flex shrink-0 items-center">
+                    <img
+                        src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500"
+                        alt="Your Company"
+                        class="h-8 w-auto"
+                    />
+                </div>
+                <div
+                    class="hidden md:ml-6 md:flex md:items-center md:space-x-4"
+                >
+                    <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
+                    <a
+                        href="#"
+                        aria-current="page"
+                        class="rounded-md bg-gray-900 px-3 py-2 text-sm font-medium text-white"
+                        >Dashboard</a
+                    >
+                    <a
+                        href="#"
+                        class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
+                        >Team</a
+                    >
+                    <a
+                        href="#"
+                        class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
+                        >Projects</a
+                    >
+                    <a
+                        href="#"
+                        class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
+                        >Calendar</a
+                    >
+                </div>
+            </div>
+            <div class="flex items-center">
+                <div class="shrink-0">
+                    <button
+                        type="button"
+                        class="relative inline-flex items-center gap-x-1.5 rounded-md bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
+                    >
+                        <svg
+                            viewBox="0 0 20 20"
+                            fill="currentColor"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="-ml-0.5 size-5"
+                        >
+                            <path
+                                d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z"
+                            />
+                        </svg>
+                        New Job
+                    </button>
+                </div>
+                <div class="hidden md:ml-4 md:flex md:shrink-0 md:items-center">
+                    <button
+                        type="button"
+                        class="relative rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800 focus:outline-hidden"
+                    >
+                        <span class="absolute -inset-1.5"></span>
+                        <span class="sr-only">View notifications</span>
+                        <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="size-6"
+                        >
+                            <path
+                                d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                    </button>
+
+                    <!-- Profile dropdown -->
+                    <el-dropdown class="relative ml-3">
+                        <button
+                            class="relative flex rounded-full bg-gray-800 text-sm focus:outline-hidden focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-gray-800"
+                        >
+                            <span class="absolute -inset-1.5"></span>
+                            <span class="sr-only">Open user menu</span>
+                            <img
+                                src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                alt=""
+                                class="size-8 rounded-full"
+                            />
+                        </button>
+
+                        <el-menu
+                            anchor="bottom end"
+                            popover
+                            class="w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(2)] focus:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-200 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
+                        >
+                            <a
+                                href="#"
+                                class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
+                                >Your Profile</a
+                            >
+                            <a
+                                href="#"
+                                class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
+                                >Settings</a
+                            >
+                            <a
+                                href="#"
+                                class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
+                                >Sign out</a
+                            >
+                        </el-menu>
+                    </el-dropdown>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <el-disclosure id="mobile-menu" hidden class="block md:hidden">
+        <div class="space-y-1 px-2 pt-2 pb-3 sm:px-3">
+            <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
+            <a
+                href="#"
+                aria-current="page"
+                class="block rounded-md bg-gray-900 px-3 py-2 text-base font-medium text-white"
+                >Dashboard</a
+            >
+            <a
+                href="#"
+                class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
+                >Team</a
+            >
+            <a
+                href="#"
+                class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
+                >Projects</a
+            >
+            <a
+                href="#"
+                class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
+                >Calendar</a
+            >
+        </div>
+        <div class="border-t border-gray-700 pt-4 pb-3">
+            <div class="flex items-center px-5 sm:px-6">
+                <div class="shrink-0">
+                    <img
+                        src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                        alt=""
+                        class="size-10 rounded-full"
+                    />
+                </div>
+                <div class="ml-3">
+                    <div class="text-base font-medium text-white">Tom Cook</div>
+                    <div class="text-sm font-medium text-gray-400">
+                        tom@example.com
+                    </div>
+                </div>
+                <button
+                    type="button"
+                    class="relative ml-auto shrink-0 rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800 focus:outline-hidden"
+                >
+                    <span class="absolute -inset-1.5"></span>
+                    <span class="sr-only">View notifications</span>
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-6"
+                    >
+                        <path
+                            d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                </button>
+            </div>
+            <div class="mt-3 space-y-1 px-2 sm:px-3">
+                <a
+                    href="#"
+                    class="block rounded-md px-3 py-2 text-base font-medium text-gray-400 hover:bg-gray-700 hover:text-white"
+                    >Your Profile</a
+                >
+                <a
+                    href="#"
+                    class="block rounded-md px-3 py-2 text-base font-medium text-gray-400 hover:bg-gray-700 hover:text-white"
+                    >Settings</a
+                >
+                <a
+                    href="#"
+                    class="block rounded-md px-3 py-2 text-base font-medium text-gray-400 hover:bg-gray-700 hover:text-white"
+                    >Sign out</a
+                >
+            </div>
+        </div>
+    </el-disclosure>
+</nav>
diff --git a/application_ui/navigation/navbars/dark_with_search.html b/application_ui/navigation/navbars/dark_with_search.html
new file mode 100644
index 0000000..1bc89b2
--- /dev/null
+++ b/application_ui/navigation/navbars/dark_with_search.html
@@ -0,0 +1,253 @@
+<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
+<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
+<nav class="bg-gray-800">
+    <div class="mx-auto max-w-7xl px-2 sm:px-4 lg:px-8">
+        <div class="relative flex h-16 items-center justify-between">
+            <div class="flex items-center px-2 lg:px-0">
+                <div class="shrink-0">
+                    <img
+                        src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500"
+                        alt="Your Company"
+                        class="h-8 w-auto"
+                    />
+                </div>
+                <div class="hidden lg:ml-6 lg:block">
+                    <div class="flex space-x-4">
+                        <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
+                        <a
+                            href="#"
+                            class="rounded-md bg-gray-900 px-3 py-2 text-sm font-medium text-white"
+                            >Dashboard</a
+                        >
+                        <a
+                            href="#"
+                            class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
+                            >Team</a
+                        >
+                        <a
+                            href="#"
+                            class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
+                            >Projects</a
+                        >
+                        <a
+                            href="#"
+                            class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
+                            >Calendar</a
+                        >
+                    </div>
+                </div>
+            </div>
+            <div class="flex flex-1 justify-center px-2 lg:ml-6 lg:justify-end">
+                <div class="grid w-full max-w-lg grid-cols-1 lg:max-w-xs">
+                    <input
+                        type="search"
+                        name="search"
+                        placeholder="Search"
+                        aria-label="Search"
+                        class="col-start-1 row-start-1 block w-full rounded-md bg-gray-700 py-1.5 pr-3 pl-10 text-base text-white outline-hidden placeholder:text-gray-400 focus:bg-white focus:text-gray-900 focus:placeholder:text-gray-400 sm:text-sm/6"
+                    />
+                    <svg
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="pointer-events-none col-start-1 row-start-1 ml-3 size-5 self-center text-gray-400"
+                    >
+                        <path
+                            d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z"
+                            clip-rule="evenodd"
+                            fill-rule="evenodd"
+                        />
+                    </svg>
+                </div>
+            </div>
+            <div class="flex lg:hidden">
+                <!-- Mobile menu button -->
+                <button
+                    type="button"
+                    command="--toggle"
+                    commandfor="mobile-menu"
+                    class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:ring-2 focus:ring-white focus:outline-hidden focus:ring-inset"
+                >
+                    <span class="absolute -inset-0.5"></span>
+                    <span class="sr-only">Open main menu</span>
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-6 in-aria-expanded:hidden"
+                    >
+                        <path
+                            d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-6 not-in-aria-expanded:hidden"
+                    >
+                        <path
+                            d="M6 18 18 6M6 6l12 12"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                </button>
+            </div>
+            <div class="hidden lg:ml-4 lg:block">
+                <div class="flex items-center">
+                    <button
+                        type="button"
+                        class="relative shrink-0 rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800 focus:outline-hidden"
+                    >
+                        <span class="absolute -inset-1.5"></span>
+                        <span class="sr-only">View notifications</span>
+                        <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="size-6"
+                        >
+                            <path
+                                d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                    </button>
+
+                    <!-- Profile dropdown -->
+                    <el-dropdown class="relative ml-4 shrink-0">
+                        <button
+                            class="relative flex rounded-full bg-gray-800 text-sm text-white focus:outline-hidden focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-gray-800"
+                        >
+                            <span class="absolute -inset-1.5"></span>
+                            <span class="sr-only">Open user menu</span>
+                            <img
+                                src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                alt=""
+                                class="size-8 rounded-full"
+                            />
+                        </button>
+
+                        <el-menu
+                            anchor="bottom end"
+                            popover
+                            class="w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(2)] focus:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
+                        >
+                            <a
+                                href="#"
+                                class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
+                                >Your Profile</a
+                            >
+                            <a
+                                href="#"
+                                class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
+                                >Settings</a
+                            >
+                            <a
+                                href="#"
+                                class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
+                                >Sign out</a
+                            >
+                        </el-menu>
+                    </el-dropdown>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <el-disclosure id="mobile-menu" hidden class="block lg:hidden">
+        <div class="space-y-1 px-2 pt-2 pb-3">
+            <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
+            <a
+                href="#"
+                class="block rounded-md bg-gray-900 px-3 py-2 text-base font-medium text-white"
+                >Dashboard</a
+            >
+            <a
+                href="#"
+                class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
+                >Team</a
+            >
+            <a
+                href="#"
+                class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
+                >Projects</a
+            >
+            <a
+                href="#"
+                class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
+                >Calendar</a
+            >
+        </div>
+        <div class="border-t border-gray-700 pt-4 pb-3">
+            <div class="flex items-center px-5">
+                <div class="shrink-0">
+                    <img
+                        src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                        alt=""
+                        class="size-10 rounded-full"
+                    />
+                </div>
+                <div class="ml-3">
+                    <div class="text-base font-medium text-white">Tom Cook</div>
+                    <div class="text-sm font-medium text-gray-400">
+                        tom@example.com
+                    </div>
+                </div>
+                <button
+                    type="button"
+                    class="relative ml-auto shrink-0 rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800 focus:outline-hidden"
+                >
+                    <span class="absolute -inset-1.5"></span>
+                    <span class="sr-only">View notifications</span>
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-6"
+                    >
+                        <path
+                            d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                </button>
+            </div>
+            <div class="mt-3 space-y-1 px-2">
+                <a
+                    href="#"
+                    class="block rounded-md px-3 py-2 text-base font-medium text-gray-400 hover:bg-gray-700 hover:text-white"
+                    >Your Profile</a
+                >
+                <a
+                    href="#"
+                    class="block rounded-md px-3 py-2 text-base font-medium text-gray-400 hover:bg-gray-700 hover:text-white"
+                    >Settings</a
+                >
+                <a
+                    href="#"
+                    class="block rounded-md px-3 py-2 text-base font-medium text-gray-400 hover:bg-gray-700 hover:text-white"
+                    >Sign out</a
+                >
+            </div>
+        </div>
+    </el-disclosure>
+</nav>
diff --git a/application_ui/navigation/navbars/simple.html b/application_ui/navigation/navbars/simple.html
new file mode 100644
index 0000000..b380253
--- /dev/null
+++ b/application_ui/navigation/navbars/simple.html
@@ -0,0 +1,227 @@
+<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
+<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
+<nav class="bg-white shadow-sm">
+    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div class="flex h-16 justify-between">
+            <div class="flex">
+                <div class="flex shrink-0 items-center">
+                    <img
+                        src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
+                        alt="Your Company"
+                        class="h-8 w-auto"
+                    />
+                </div>
+                <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
+                    <!-- Current: "border-indigo-500 text-gray-900", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
+                    <a
+                        href="#"
+                        class="inline-flex items-center border-b-2 border-indigo-500 px-1 pt-1 text-sm font-medium text-gray-900"
+                        >Dashboard</a
+                    >
+                    <a
+                        href="#"
+                        class="inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
+                        >Team</a
+                    >
+                    <a
+                        href="#"
+                        class="inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
+                        >Projects</a
+                    >
+                    <a
+                        href="#"
+                        class="inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
+                        >Calendar</a
+                    >
+                </div>
+            </div>
+            <div class="hidden sm:ml-6 sm:flex sm:items-center">
+                <button
+                    type="button"
+                    class="relative rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden"
+                >
+                    <span class="absolute -inset-1.5"></span>
+                    <span class="sr-only">View notifications</span>
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-6"
+                    >
+                        <path
+                            d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                </button>
+
+                <!-- Profile dropdown -->
+                <el-dropdown class="relative ml-3">
+                    <button
+                        class="relative flex rounded-full bg-white text-sm focus:outline-hidden focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2"
+                    >
+                        <span class="absolute -inset-1.5"></span>
+                        <span class="sr-only">Open user menu</span>
+                        <img
+                            src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                            alt=""
+                            class="size-8 rounded-full"
+                        />
+                    </button>
+
+                    <el-menu
+                        anchor="bottom end"
+                        popover
+                        class="w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(2)] focus:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-200 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
+                    >
+                        <a
+                            href="#"
+                            class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
+                            >Your Profile</a
+                        >
+                        <a
+                            href="#"
+                            class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
+                            >Settings</a
+                        >
+                        <a
+                            href="#"
+                            class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
+                            >Sign out</a
+                        >
+                    </el-menu>
+                </el-dropdown>
+            </div>
+            <div class="-mr-2 flex items-center sm:hidden">
+                <!-- Mobile menu button -->
+                <button
+                    type="button"
+                    command="--toggle"
+                    commandfor="mobile-menu"
+                    class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:outline-hidden focus:ring-inset"
+                >
+                    <span class="absolute -inset-0.5"></span>
+                    <span class="sr-only">Open main menu</span>
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-6 in-aria-expanded:hidden"
+                    >
+                        <path
+                            d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-6 not-in-aria-expanded:hidden"
+                    >
+                        <path
+                            d="M6 18 18 6M6 6l12 12"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <el-disclosure id="mobile-menu" hidden class="block sm:hidden">
+        <div class="space-y-1 pt-2 pb-3">
+            <!-- Current: "bg-indigo-50 border-indigo-500 text-indigo-700", Default: "border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700" -->
+            <a
+                href="#"
+                class="block border-l-4 border-indigo-500 bg-indigo-50 py-2 pr-4 pl-3 text-base font-medium text-indigo-700"
+                >Dashboard</a
+            >
+            <a
+                href="#"
+                class="block border-l-4 border-transparent py-2 pr-4 pl-3 text-base font-medium text-gray-500 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700"
+                >Team</a
+            >
+            <a
+                href="#"
+                class="block border-l-4 border-transparent py-2 pr-4 pl-3 text-base font-medium text-gray-500 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700"
+                >Projects</a
+            >
+            <a
+                href="#"
+                class="block border-l-4 border-transparent py-2 pr-4 pl-3 text-base font-medium text-gray-500 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700"
+                >Calendar</a
+            >
+        </div>
+        <div class="border-t border-gray-200 pt-4 pb-3">
+            <div class="flex items-center px-4">
+                <div class="shrink-0">
+                    <img
+                        src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                        alt=""
+                        class="size-10 rounded-full"
+                    />
+                </div>
+                <div class="ml-3">
+                    <div class="text-base font-medium text-gray-800">
+                        Tom Cook
+                    </div>
+                    <div class="text-sm font-medium text-gray-500">
+                        tom@example.com
+                    </div>
+                </div>
+                <button
+                    type="button"
+                    class="relative ml-auto shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden"
+                >
+                    <span class="absolute -inset-1.5"></span>
+                    <span class="sr-only">View notifications</span>
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-6"
+                    >
+                        <path
+                            d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                </button>
+            </div>
+            <div class="mt-3 space-y-1">
+                <a
+                    href="#"
+                    class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800"
+                    >Your Profile</a
+                >
+                <a
+                    href="#"
+                    class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800"
+                    >Settings</a
+                >
+                <a
+                    href="#"
+                    class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800"
+                    >Sign out</a
+                >
+            </div>
+        </div>
+    </el-disclosure>
+</nav>
diff --git a/application_ui/navigation/navbars/simple_dark.html b/application_ui/navigation/navbars/simple_dark.html
new file mode 100644
index 0000000..fe5cba1
--- /dev/null
+++ b/application_ui/navigation/navbars/simple_dark.html
@@ -0,0 +1,229 @@
+<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
+<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
+<nav class="bg-gray-800">
+    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div class="flex h-16 items-center justify-between">
+            <div class="flex items-center">
+                <div class="shrink-0">
+                    <img
+                        src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500"
+                        alt="Your Company"
+                        class="h-8 w-auto"
+                    />
+                </div>
+                <div class="hidden sm:ml-6 sm:block">
+                    <div class="flex space-x-4">
+                        <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
+                        <a
+                            href="#"
+                            class="rounded-md bg-gray-900 px-3 py-2 text-sm font-medium text-white"
+                            >Dashboard</a
+                        >
+                        <a
+                            href="#"
+                            class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
+                            >Team</a
+                        >
+                        <a
+                            href="#"
+                            class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
+                            >Projects</a
+                        >
+                        <a
+                            href="#"
+                            class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
+                            >Calendar</a
+                        >
+                    </div>
+                </div>
+            </div>
+            <div class="hidden sm:ml-6 sm:block">
+                <div class="flex items-center">
+                    <button
+                        type="button"
+                        class="relative rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800 focus:outline-hidden"
+                    >
+                        <span class="absolute -inset-1.5"></span>
+                        <span class="sr-only">View notifications</span>
+                        <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="size-6"
+                        >
+                            <path
+                                d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                    </button>
+
+                    <!-- Profile dropdown -->
+                    <el-dropdown class="relative ml-3">
+                        <button
+                            class="relative flex rounded-full bg-gray-800 text-sm focus:outline-hidden focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-gray-800"
+                        >
+                            <span class="absolute -inset-1.5"></span>
+                            <span class="sr-only">Open user menu</span>
+                            <img
+                                src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                alt=""
+                                class="size-8 rounded-full"
+                            />
+                        </button>
+
+                        <el-menu
+                            anchor="bottom end"
+                            popover
+                            class="w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(2)] focus:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
+                        >
+                            <a
+                                href="#"
+                                class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
+                                >Your Profile</a
+                            >
+                            <a
+                                href="#"
+                                class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
+                                >Settings</a
+                            >
+                            <a
+                                href="#"
+                                class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
+                                >Sign out</a
+                            >
+                        </el-menu>
+                    </el-dropdown>
+                </div>
+            </div>
+            <div class="-mr-2 flex sm:hidden">
+                <!-- Mobile menu button -->
+                <button
+                    type="button"
+                    command="--toggle"
+                    commandfor="mobile-menu"
+                    class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:ring-2 focus:ring-white focus:outline-hidden focus:ring-inset"
+                >
+                    <span class="absolute -inset-0.5"></span>
+                    <span class="sr-only">Open main menu</span>
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-6 in-aria-expanded:hidden"
+                    >
+                        <path
+                            d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-6 not-in-aria-expanded:hidden"
+                    >
+                        <path
+                            d="M6 18 18 6M6 6l12 12"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <el-disclosure id="mobile-menu" hidden class="block sm:hidden">
+        <div class="space-y-1 px-2 pt-2 pb-3">
+            <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
+            <a
+                href="#"
+                class="block rounded-md bg-gray-900 px-3 py-2 text-base font-medium text-white"
+                >Dashboard</a
+            >
+            <a
+                href="#"
+                class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
+                >Team</a
+            >
+            <a
+                href="#"
+                class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
+                >Projects</a
+            >
+            <a
+                href="#"
+                class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
+                >Calendar</a
+            >
+        </div>
+        <div class="border-t border-gray-700 pt-4 pb-3">
+            <div class="flex items-center px-5">
+                <div class="shrink-0">
+                    <img
+                        src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                        alt=""
+                        class="size-10 rounded-full"
+                    />
+                </div>
+                <div class="ml-3">
+                    <div class="text-base font-medium text-white">Tom Cook</div>
+                    <div class="text-sm font-medium text-gray-400">
+                        tom@example.com
+                    </div>
+                </div>
+                <button
+                    type="button"
+                    class="relative ml-auto shrink-0 rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800 focus:outline-hidden"
+                >
+                    <span class="absolute -inset-1.5"></span>
+                    <span class="sr-only">View notifications</span>
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-6"
+                    >
+                        <path
+                            d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                </button>
+            </div>
+            <div class="mt-3 space-y-1 px-2">
+                <a
+                    href="#"
+                    class="block rounded-md px-3 py-2 text-base font-medium text-gray-400 hover:bg-gray-700 hover:text-white"
+                    >Your Profile</a
+                >
+                <a
+                    href="#"
+                    class="block rounded-md px-3 py-2 text-base font-medium text-gray-400 hover:bg-gray-700 hover:text-white"
+                    >Settings</a
+                >
+                <a
+                    href="#"
+                    class="block rounded-md px-3 py-2 text-base font-medium text-gray-400 hover:bg-gray-700 hover:text-white"
+                    >Sign out</a
+                >
+            </div>
+        </div>
+    </el-disclosure>
+</nav>
diff --git a/application_ui/navigation/navbars/simple_dark_with_menu_button_on_left.html b/application_ui/navigation/navbars/simple_dark_with_menu_button_on_left.html
new file mode 100644
index 0000000..dd77ebe
--- /dev/null
+++ b/application_ui/navigation/navbars/simple_dark_with_menu_button_on_left.html
@@ -0,0 +1,177 @@
+<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
+<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
+<nav class="bg-gray-800">
+    <div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
+        <div class="relative flex h-16 items-center justify-between">
+            <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
+                <!-- Mobile menu button-->
+                <button
+                    type="button"
+                    command="--toggle"
+                    commandfor="mobile-menu"
+                    class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:ring-2 focus:ring-white focus:outline-hidden focus:ring-inset"
+                >
+                    <span class="absolute -inset-0.5"></span>
+                    <span class="sr-only">Open main menu</span>
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-6 in-aria-expanded:hidden"
+                    >
+                        <path
+                            d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-6 not-in-aria-expanded:hidden"
+                    >
+                        <path
+                            d="M6 18 18 6M6 6l12 12"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                </button>
+            </div>
+            <div
+                class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start"
+            >
+                <div class="flex shrink-0 items-center">
+                    <img
+                        src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500"
+                        alt="Your Company"
+                        class="h-8 w-auto"
+                    />
+                </div>
+                <div class="hidden sm:ml-6 sm:block">
+                    <div class="flex space-x-4">
+                        <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
+                        <a
+                            href="#"
+                            aria-current="page"
+                            class="rounded-md bg-gray-900 px-3 py-2 text-sm font-medium text-white"
+                            >Dashboard</a
+                        >
+                        <a
+                            href="#"
+                            class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
+                            >Team</a
+                        >
+                        <a
+                            href="#"
+                            class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
+                            >Projects</a
+                        >
+                        <a
+                            href="#"
+                            class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
+                            >Calendar</a
+                        >
+                    </div>
+                </div>
+            </div>
+            <div
+                class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0"
+            >
+                <button
+                    type="button"
+                    class="relative rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800 focus:outline-hidden"
+                >
+                    <span class="absolute -inset-1.5"></span>
+                    <span class="sr-only">View notifications</span>
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-6"
+                    >
+                        <path
+                            d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                </button>
+
+                <!-- Profile dropdown -->
+                <el-dropdown class="relative ml-3">
+                    <button
+                        class="relative flex rounded-full bg-gray-800 text-sm focus:outline-hidden focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-gray-800"
+                    >
+                        <span class="absolute -inset-1.5"></span>
+                        <span class="sr-only">Open user menu</span>
+                        <img
+                            src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                            alt=""
+                            class="size-8 rounded-full"
+                        />
+                    </button>
+
+                    <el-menu
+                        anchor="bottom end"
+                        popover
+                        class="w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(2)] focus:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
+                    >
+                        <a
+                            href="#"
+                            class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
+                            >Your Profile</a
+                        >
+                        <a
+                            href="#"
+                            class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
+                            >Settings</a
+                        >
+                        <a
+                            href="#"
+                            class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
+                            >Sign out</a
+                        >
+                    </el-menu>
+                </el-dropdown>
+            </div>
+        </div>
+    </div>
+
+    <el-disclosure id="mobile-menu" hidden class="block sm:hidden">
+        <div class="space-y-1 px-2 pt-2 pb-3">
+            <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
+            <a
+                href="#"
+                aria-current="page"
+                class="block rounded-md bg-gray-900 px-3 py-2 text-base font-medium text-white"
+                >Dashboard</a
+            >
+            <a
+                href="#"
+                class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
+                >Team</a
+            >
+            <a
+                href="#"
+                class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
+                >Projects</a
+            >
+            <a
+                href="#"
+                class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
+                >Calendar</a
+            >
+        </div>
+    </el-disclosure>
+</nav>
diff --git a/application_ui/navigation/navbars/simple_with_menu_button_on_left.html b/application_ui/navigation/navbars/simple_with_menu_button_on_left.html
new file mode 100644
index 0000000..aed9c07
--- /dev/null
+++ b/application_ui/navigation/navbars/simple_with_menu_button_on_left.html
@@ -0,0 +1,173 @@
+<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
+<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
+<nav class="bg-white shadow-sm">
+    <div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
+        <div class="relative flex h-16 justify-between">
+            <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
+                <!-- Mobile menu button -->
+                <button
+                    type="button"
+                    command="--toggle"
+                    commandfor="mobile-menu"
+                    class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:outline-hidden focus:ring-inset"
+                >
+                    <span class="absolute -inset-0.5"></span>
+                    <span class="sr-only">Open main menu</span>
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-6 in-aria-expanded:hidden"
+                    >
+                        <path
+                            d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-6 not-in-aria-expanded:hidden"
+                    >
+                        <path
+                            d="M6 18 18 6M6 6l12 12"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                </button>
+            </div>
+            <div
+                class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start"
+            >
+                <div class="flex shrink-0 items-center">
+                    <img
+                        src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
+                        alt="Your Company"
+                        class="h-8 w-auto"
+                    />
+                </div>
+                <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
+                    <!-- Current: "border-indigo-500 text-gray-900", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
+                    <a
+                        href="#"
+                        class="inline-flex items-center border-b-2 border-indigo-500 px-1 pt-1 text-sm font-medium text-gray-900"
+                        >Dashboard</a
+                    >
+                    <a
+                        href="#"
+                        class="inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
+                        >Team</a
+                    >
+                    <a
+                        href="#"
+                        class="inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
+                        >Projects</a
+                    >
+                    <a
+                        href="#"
+                        class="inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
+                        >Calendar</a
+                    >
+                </div>
+            </div>
+            <div
+                class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0"
+            >
+                <button
+                    type="button"
+                    class="relative rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden"
+                >
+                    <span class="absolute -inset-1.5"></span>
+                    <span class="sr-only">View notifications</span>
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-6"
+                    >
+                        <path
+                            d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                </button>
+
+                <!-- Profile dropdown -->
+                <el-dropdown class="relative ml-3">
+                    <button
+                        class="relative flex rounded-full bg-white text-sm focus:outline-hidden focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2"
+                    >
+                        <span class="absolute -inset-1.5"></span>
+                        <span class="sr-only">Open user menu</span>
+                        <img
+                            src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                            alt=""
+                            class="size-8 rounded-full"
+                        />
+                    </button>
+
+                    <el-menu
+                        anchor="bottom end"
+                        popover
+                        class="w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(2)] focus:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-200 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
+                    >
+                        <a
+                            href="#"
+                            class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
+                            >Your Profile</a
+                        >
+                        <a
+                            href="#"
+                            class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
+                            >Settings</a
+                        >
+                        <a
+                            href="#"
+                            class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
+                            >Sign out</a
+                        >
+                    </el-menu>
+                </el-dropdown>
+            </div>
+        </div>
+    </div>
+
+    <el-disclosure id="mobile-menu" hidden class="block sm:hidden">
+        <div class="space-y-1 pt-2 pb-4">
+            <!-- Current: "bg-indigo-50 border-indigo-500 text-indigo-700", Default: "border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700" -->
+            <a
+                href="#"
+                class="block border-l-4 border-indigo-500 bg-indigo-50 py-2 pr-4 pl-3 text-base font-medium text-indigo-700"
+                >Dashboard</a
+            >
+            <a
+                href="#"
+                class="block border-l-4 border-transparent py-2 pr-4 pl-3 text-base font-medium text-gray-500 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700"
+                >Team</a
+            >
+            <a
+                href="#"
+                class="block border-l-4 border-transparent py-2 pr-4 pl-3 text-base font-medium text-gray-500 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700"
+                >Projects</a
+            >
+            <a
+                href="#"
+                class="block border-l-4 border-transparent py-2 pr-4 pl-3 text-base font-medium text-gray-500 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700"
+                >Calendar</a
+            >
+        </div>
+    </el-disclosure>
+</nav>
diff --git a/application_ui/navigation/navbars/with_centered_search_and_secondary_links.html b/application_ui/navigation/navbars/with_centered_search_and_secondary_links.html
new file mode 100644
index 0000000..4426ea2
--- /dev/null
+++ b/application_ui/navigation/navbars/with_centered_search_and_secondary_links.html
@@ -0,0 +1,260 @@
+<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
+<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
+<header class="bg-white shadow-sm">
+    <div
+        class="mx-auto max-w-7xl px-2 sm:px-4 lg:divide-y lg:divide-gray-200 lg:px-8"
+    >
+        <div class="relative flex h-16 justify-between">
+            <div class="relative z-10 flex px-2 lg:px-0">
+                <div class="flex shrink-0 items-center">
+                    <img
+                        src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
+                        alt="Your Company"
+                        class="h-8 w-auto"
+                    />
+                </div>
+            </div>
+            <div
+                class="relative z-0 flex flex-1 items-center justify-center px-2 sm:absolute sm:inset-0"
+            >
+                <div class="grid w-full grid-cols-1 sm:max-w-xs">
+                    <input
+                        type="search"
+                        name="search"
+                        placeholder="Search"
+                        class="col-start-1 row-start-1 block w-full rounded-md bg-white py-1.5 pr-3 pl-10 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
+                    />
+                    <svg
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="pointer-events-none col-start-1 row-start-1 ml-3 size-5 self-center text-gray-400"
+                    >
+                        <path
+                            d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z"
+                            clip-rule="evenodd"
+                            fill-rule="evenodd"
+                        />
+                    </svg>
+                </div>
+            </div>
+            <div class="relative z-10 flex items-center lg:hidden">
+                <!-- Mobile menu button -->
+                <button
+                    type="button"
+                    command="--toggle"
+                    commandfor="mobile-menu"
+                    class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:outline-hidden focus:ring-inset"
+                >
+                    <span class="absolute -inset-0.5"></span>
+                    <span class="sr-only">Open menu</span>
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-6 in-aria-expanded:hidden"
+                    >
+                        <path
+                            d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-6 not-in-aria-expanded:hidden"
+                    >
+                        <path
+                            d="M6 18 18 6M6 6l12 12"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                </button>
+            </div>
+            <div
+                class="hidden lg:relative lg:z-10 lg:ml-4 lg:flex lg:items-center"
+            >
+                <button
+                    type="button"
+                    class="relative shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden"
+                >
+                    <span class="absolute -inset-1.5"></span>
+                    <span class="sr-only">View notifications</span>
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-6"
+                    >
+                        <path
+                            d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                </button>
+
+                <!-- Profile dropdown -->
+                <el-dropdown class="relative ml-4 shrink-0">
+                    <button
+                        class="relative flex rounded-full bg-white focus:outline-hidden focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2"
+                    >
+                        <span class="absolute -inset-1.5"></span>
+                        <span class="sr-only">Open user menu</span>
+                        <img
+                            src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                            alt=""
+                            class="size-8 rounded-full"
+                        />
+                    </button>
+
+                    <el-menu
+                        anchor="bottom end"
+                        popover
+                        class="w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(2)] focus:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
+                    >
+                        <a
+                            href="#"
+                            class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
+                            >Your Profile</a
+                        >
+                        <a
+                            href="#"
+                            class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
+                            >Settings</a
+                        >
+                        <a
+                            href="#"
+                            class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
+                            >Sign out</a
+                        >
+                    </el-menu>
+                </el-dropdown>
+            </div>
+        </div>
+        <nav aria-label="Global" class="hidden lg:flex lg:space-x-8 lg:py-2">
+            <!-- Current: "bg-gray-100 text-gray-900", Default: "text-gray-900 hover:bg-gray-50 hover:text-gray-900" -->
+            <a
+                href="#"
+                aria-current="page"
+                class="inline-flex items-center rounded-md bg-gray-100 px-3 py-2 text-sm font-medium text-gray-900"
+                >Dashboard</a
+            >
+            <a
+                href="#"
+                class="inline-flex items-center rounded-md px-3 py-2 text-sm font-medium text-gray-900 hover:bg-gray-50 hover:text-gray-900"
+                >Team</a
+            >
+            <a
+                href="#"
+                class="inline-flex items-center rounded-md px-3 py-2 text-sm font-medium text-gray-900 hover:bg-gray-50 hover:text-gray-900"
+                >Projects</a
+            >
+            <a
+                href="#"
+                class="inline-flex items-center rounded-md px-3 py-2 text-sm font-medium text-gray-900 hover:bg-gray-50 hover:text-gray-900"
+                >Calendar</a
+            >
+        </nav>
+    </div>
+
+    <el-disclosure id="mobile-menu" hidden class="contents lg:hidden">
+        <nav aria-label="Global">
+            <div class="space-y-1 px-2 pt-2 pb-3">
+                <!-- Current: "bg-gray-100 text-gray-900", Default: "text-gray-900 hover:bg-gray-50 hover:text-gray-900" -->
+                <a
+                    href="#"
+                    aria-current="page"
+                    class="block rounded-md bg-gray-100 px-3 py-2 text-base font-medium text-gray-900"
+                    >Dashboard</a
+                >
+                <a
+                    href="#"
+                    class="block rounded-md px-3 py-2 text-base font-medium text-gray-900 hover:bg-gray-50 hover:text-gray-900"
+                    >Team</a
+                >
+                <a
+                    href="#"
+                    class="block rounded-md px-3 py-2 text-base font-medium text-gray-900 hover:bg-gray-50 hover:text-gray-900"
+                    >Projects</a
+                >
+                <a
+                    href="#"
+                    class="block rounded-md px-3 py-2 text-base font-medium text-gray-900 hover:bg-gray-50 hover:text-gray-900"
+                    >Calendar</a
+                >
+            </div>
+            <div class="border-t border-gray-200 pt-4 pb-3">
+                <div class="flex items-center px-4">
+                    <div class="shrink-0">
+                        <img
+                            src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                            alt=""
+                            class="size-10 rounded-full"
+                        />
+                    </div>
+                    <div class="ml-3">
+                        <div class="text-base font-medium text-gray-800">
+                            Tom Cook
+                        </div>
+                        <div class="text-sm font-medium text-gray-500">
+                            tom@example.com
+                        </div>
+                    </div>
+                    <button
+                        type="button"
+                        class="relative ml-auto shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden"
+                    >
+                        <span class="absolute -inset-1.5"></span>
+                        <span class="sr-only">View notifications</span>
+                        <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="size-6"
+                        >
+                            <path
+                                d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                    </button>
+                </div>
+                <div class="mt-3 space-y-1 px-2">
+                    <a
+                        href="#"
+                        class="block rounded-md px-3 py-2 text-base font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-900"
+                        >Your Profile</a
+                    >
+                    <a
+                        href="#"
+                        class="block rounded-md px-3 py-2 text-base font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-900"
+                        >Settings</a
+                    >
+                    <a
+                        href="#"
+                        class="block rounded-md px-3 py-2 text-base font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-900"
+                        >Sign out</a
+                    >
+                </div>
+            </div>
+        </nav>
+    </el-disclosure>
+</header>
diff --git a/application_ui/navigation/navbars/with_centered_search_and_secondary_links_dark.html b/application_ui/navigation/navbars/with_centered_search_and_secondary_links_dark.html
new file mode 100644
index 0000000..5cd02a7
--- /dev/null
+++ b/application_ui/navigation/navbars/with_centered_search_and_secondary_links_dark.html
@@ -0,0 +1,261 @@
+<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
+<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
+<header class="bg-gray-800">
+    <div
+        class="mx-auto max-w-7xl px-2 sm:px-4 lg:divide-y lg:divide-gray-700 lg:px-8"
+    >
+        <div class="relative flex h-16 justify-between">
+            <div class="relative z-10 flex px-2 lg:px-0">
+                <div class="flex shrink-0 items-center">
+                    <img
+                        src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500"
+                        alt="Your Company"
+                        class="h-8 w-auto"
+                    />
+                </div>
+            </div>
+            <div
+                class="relative z-0 flex flex-1 items-center justify-center px-2 sm:absolute sm:inset-0"
+            >
+                <div class="grid w-full grid-cols-1 sm:max-w-xs">
+                    <input
+                        type="search"
+                        name="search"
+                        placeholder="Search"
+                        aria-label="Search"
+                        class="col-start-1 row-start-1 block w-full rounded-md bg-gray-700 py-1.5 pr-3 pl-10 text-base text-white outline-hidden placeholder:text-gray-400 focus:bg-white focus:text-gray-900 focus:placeholder:text-gray-400 sm:text-sm/6"
+                    />
+                    <svg
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="pointer-events-none col-start-1 row-start-1 ml-3 size-5 self-center text-gray-400"
+                    >
+                        <path
+                            d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z"
+                            clip-rule="evenodd"
+                            fill-rule="evenodd"
+                        />
+                    </svg>
+                </div>
+            </div>
+            <div class="relative z-10 flex items-center lg:hidden">
+                <!-- Mobile menu button -->
+                <button
+                    type="button"
+                    command="--toggle"
+                    commandfor="mobile-menu"
+                    class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:ring-2 focus:ring-white focus:outline-hidden focus:ring-inset"
+                >
+                    <span class="absolute -inset-0.5"></span>
+                    <span class="sr-only">Open menu</span>
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-6 in-aria-expanded:hidden"
+                    >
+                        <path
+                            d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-6 not-in-aria-expanded:hidden"
+                    >
+                        <path
+                            d="M6 18 18 6M6 6l12 12"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                </button>
+            </div>
+            <div
+                class="hidden lg:relative lg:z-10 lg:ml-4 lg:flex lg:items-center"
+            >
+                <button
+                    type="button"
+                    class="relative shrink-0 rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800 focus:outline-hidden"
+                >
+                    <span class="absolute -inset-1.5"></span>
+                    <span class="sr-only">View notifications</span>
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-6"
+                    >
+                        <path
+                            d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                </button>
+
+                <!-- Profile dropdown -->
+                <el-dropdown class="relative ml-4 shrink-0">
+                    <button
+                        class="relative flex rounded-full bg-gray-800 text-sm text-white focus:outline-hidden focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-gray-800"
+                    >
+                        <span class="absolute -inset-1.5"></span>
+                        <span class="sr-only">Open user menu</span>
+                        <img
+                            src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                            alt=""
+                            class="size-8 rounded-full"
+                        />
+                    </button>
+
+                    <el-menu
+                        anchor="bottom end"
+                        popover
+                        class="w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(2)] focus:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
+                    >
+                        <a
+                            href="#"
+                            class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
+                            >Your Profile</a
+                        >
+                        <a
+                            href="#"
+                            class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
+                            >Settings</a
+                        >
+                        <a
+                            href="#"
+                            class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
+                            >Sign out</a
+                        >
+                    </el-menu>
+                </el-dropdown>
+            </div>
+        </div>
+        <nav aria-label="Global" class="hidden lg:flex lg:space-x-8 lg:py-2">
+            <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
+            <a
+                href="#"
+                aria-current="page"
+                class="inline-flex items-center rounded-md bg-gray-900 px-3 py-2 text-sm font-medium text-white"
+                >Dashboard</a
+            >
+            <a
+                href="#"
+                class="inline-flex items-center rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
+                >Team</a
+            >
+            <a
+                href="#"
+                class="inline-flex items-center rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
+                >Projects</a
+            >
+            <a
+                href="#"
+                class="inline-flex items-center rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
+                >Calendar</a
+            >
+        </nav>
+    </div>
+
+    <el-disclosure id="mobile-menu" hidden class="contents lg:hidden">
+        <nav aria-label="Global">
+            <div class="space-y-1 px-2 pt-2 pb-3">
+                <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
+                <a
+                    href="#"
+                    aria-current="page"
+                    class="block rounded-md bg-gray-900 px-3 py-2 text-base font-medium text-white"
+                    >Dashboard</a
+                >
+                <a
+                    href="#"
+                    class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
+                    >Team</a
+                >
+                <a
+                    href="#"
+                    class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
+                    >Projects</a
+                >
+                <a
+                    href="#"
+                    class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
+                    >Calendar</a
+                >
+            </div>
+            <div class="border-t border-gray-700 pt-4 pb-3">
+                <div class="flex items-center px-4">
+                    <div class="shrink-0">
+                        <img
+                            src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                            alt=""
+                            class="size-10 rounded-full"
+                        />
+                    </div>
+                    <div class="ml-3">
+                        <div class="text-base font-medium text-white">
+                            Tom Cook
+                        </div>
+                        <div class="text-sm font-medium text-gray-400">
+                            tom@example.com
+                        </div>
+                    </div>
+                    <button
+                        type="button"
+                        class="relative ml-auto shrink-0 rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800 focus:outline-hidden"
+                    >
+                        <span class="absolute -inset-1.5"></span>
+                        <span class="sr-only">View notifications</span>
+                        <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="size-6"
+                        >
+                            <path
+                                d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                    </button>
+                </div>
+                <div class="mt-3 space-y-1 px-2">
+                    <a
+                        href="#"
+                        class="block rounded-md px-3 py-2 text-base font-medium text-gray-400 hover:bg-gray-700 hover:text-white"
+                        >Your Profile</a
+                    >
+                    <a
+                        href="#"
+                        class="block rounded-md px-3 py-2 text-base font-medium text-gray-400 hover:bg-gray-700 hover:text-white"
+                        >Settings</a
+                    >
+                    <a
+                        href="#"
+                        class="block rounded-md px-3 py-2 text-base font-medium text-gray-400 hover:bg-gray-700 hover:text-white"
+                        >Sign out</a
+                    >
+                </div>
+            </div>
+        </nav>
+    </el-disclosure>
+</header>
diff --git a/application_ui/navigation/navbars/with_quick_action.html b/application_ui/navigation/navbars/with_quick_action.html
new file mode 100644
index 0000000..7cbcf7d
--- /dev/null
+++ b/application_ui/navigation/navbars/with_quick_action.html
@@ -0,0 +1,248 @@
+<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
+<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
+<nav class="bg-white shadow-sm">
+    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div class="flex h-16 justify-between">
+            <div class="flex">
+                <div class="mr-2 -ml-2 flex items-center md:hidden">
+                    <!-- Mobile menu button -->
+                    <button
+                        type="button"
+                        command="--toggle"
+                        commandfor="mobile-menu"
+                        class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:outline-hidden focus:ring-inset"
+                    >
+                        <span class="absolute -inset-0.5"></span>
+                        <span class="sr-only">Open main menu</span>
+                        <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="size-6 in-aria-expanded:hidden"
+                        >
+                            <path
+                                d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                        <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="size-6 not-in-aria-expanded:hidden"
+                        >
+                            <path
+                                d="M6 18 18 6M6 6l12 12"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                    </button>
+                </div>
+                <div class="flex shrink-0 items-center">
+                    <img
+                        src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
+                        alt="Your Company"
+                        class="h-8 w-auto"
+                    />
+                </div>
+                <div class="hidden md:ml-6 md:flex md:space-x-8">
+                    <!-- Current: "border-indigo-500 text-gray-900", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
+                    <a
+                        href="#"
+                        class="inline-flex items-center border-b-2 border-indigo-500 px-1 pt-1 text-sm font-medium text-gray-900"
+                        >Dashboard</a
+                    >
+                    <a
+                        href="#"
+                        class="inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
+                        >Team</a
+                    >
+                    <a
+                        href="#"
+                        class="inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
+                        >Projects</a
+                    >
+                    <a
+                        href="#"
+                        class="inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
+                        >Calendar</a
+                    >
+                </div>
+            </div>
+            <div class="flex items-center">
+                <div class="shrink-0">
+                    <button
+                        type="button"
+                        class="relative inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                    >
+                        <svg
+                            viewBox="0 0 20 20"
+                            fill="currentColor"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="-ml-0.5 size-5"
+                        >
+                            <path
+                                d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z"
+                            />
+                        </svg>
+                        New Job
+                    </button>
+                </div>
+                <div class="hidden md:ml-4 md:flex md:shrink-0 md:items-center">
+                    <button
+                        type="button"
+                        class="relative rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden"
+                    >
+                        <span class="absolute -inset-1.5"></span>
+                        <span class="sr-only">View notifications</span>
+                        <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="size-6"
+                        >
+                            <path
+                                d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                    </button>
+
+                    <!-- Profile dropdown -->
+                    <el-dropdown class="relative ml-3">
+                        <button
+                            class="relative flex rounded-full bg-white text-sm focus:outline-hidden focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2"
+                        >
+                            <span class="absolute -inset-1.5"></span>
+                            <span class="sr-only">Open user menu</span>
+                            <img
+                                src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                alt=""
+                                class="size-8 rounded-full"
+                            />
+                        </button>
+
+                        <el-menu
+                            anchor="bottom end"
+                            popover
+                            class="w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(2)] focus:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-200 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
+                        >
+                            <a
+                                href="#"
+                                class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
+                                >Your Profile</a
+                            >
+                            <a
+                                href="#"
+                                class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
+                                >Settings</a
+                            >
+                            <a
+                                href="#"
+                                class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
+                                >Sign out</a
+                            >
+                        </el-menu>
+                    </el-dropdown>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <el-disclosure id="mobile-menu" hidden class="block md:hidden">
+        <div class="space-y-1 pt-2 pb-3">
+            <!-- Current: "bg-indigo-50 border-indigo-500 text-indigo-700", Default: "border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700" -->
+            <a
+                href="#"
+                class="block border-l-4 border-indigo-500 bg-indigo-50 py-2 pr-4 pl-3 text-base font-medium text-indigo-700 sm:pr-6 sm:pl-5"
+                >Dashboard</a
+            >
+            <a
+                href="#"
+                class="block border-l-4 border-transparent py-2 pr-4 pl-3 text-base font-medium text-gray-500 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700 sm:pr-6 sm:pl-5"
+                >Team</a
+            >
+            <a
+                href="#"
+                class="block border-l-4 border-transparent py-2 pr-4 pl-3 text-base font-medium text-gray-500 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700 sm:pr-6 sm:pl-5"
+                >Projects</a
+            >
+            <a
+                href="#"
+                class="block border-l-4 border-transparent py-2 pr-4 pl-3 text-base font-medium text-gray-500 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700 sm:pr-6 sm:pl-5"
+                >Calendar</a
+            >
+        </div>
+        <div class="border-t border-gray-200 pt-4 pb-3">
+            <div class="flex items-center px-4 sm:px-6">
+                <div class="shrink-0">
+                    <img
+                        src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                        alt=""
+                        class="size-10 rounded-full"
+                    />
+                </div>
+                <div class="ml-3">
+                    <div class="text-base font-medium text-gray-800">
+                        Tom Cook
+                    </div>
+                    <div class="text-sm font-medium text-gray-500">
+                        tom@example.com
+                    </div>
+                </div>
+                <button
+                    type="button"
+                    class="relative ml-auto shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden"
+                >
+                    <span class="absolute -inset-1.5"></span>
+                    <span class="sr-only">View notifications</span>
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-6"
+                    >
+                        <path
+                            d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                </button>
+            </div>
+            <div class="mt-3 space-y-1">
+                <a
+                    href="#"
+                    class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800 sm:px-6"
+                    >Your Profile</a
+                >
+                <a
+                    href="#"
+                    class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800 sm:px-6"
+                    >Settings</a
+                >
+                <a
+                    href="#"
+                    class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800 sm:px-6"
+                    >Sign out</a
+                >
+            </div>
+        </div>
+    </el-disclosure>
+</nav>
diff --git a/application_ui/navigation/navbars/with_search.html b/application_ui/navigation/navbars/with_search.html
new file mode 100644
index 0000000..5a8e958
--- /dev/null
+++ b/application_ui/navigation/navbars/with_search.html
@@ -0,0 +1,252 @@
+<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
+<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
+<nav class="bg-white shadow-sm">
+    <div class="mx-auto max-w-7xl px-2 sm:px-4 lg:px-8">
+        <div class="flex h-16 justify-between">
+            <div class="flex px-2 lg:px-0">
+                <div class="flex shrink-0 items-center">
+                    <img
+                        src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
+                        alt="Your Company"
+                        class="h-8 w-auto"
+                    />
+                </div>
+                <div class="hidden lg:ml-6 lg:flex lg:space-x-8">
+                    <!-- Current: "border-indigo-500 text-gray-900", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
+                    <a
+                        href="#"
+                        class="inline-flex items-center border-b-2 border-indigo-500 px-1 pt-1 text-sm font-medium text-gray-900"
+                        >Dashboard</a
+                    >
+                    <a
+                        href="#"
+                        class="inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
+                        >Team</a
+                    >
+                    <a
+                        href="#"
+                        class="inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
+                        >Projects</a
+                    >
+                    <a
+                        href="#"
+                        class="inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
+                        >Calendar</a
+                    >
+                </div>
+            </div>
+            <div
+                class="flex flex-1 items-center justify-center px-2 lg:ml-6 lg:justify-end"
+            >
+                <div class="grid w-full max-w-lg grid-cols-1 lg:max-w-xs">
+                    <input
+                        type="search"
+                        name="search"
+                        placeholder="Search"
+                        class="col-start-1 row-start-1 block w-full rounded-md bg-white py-1.5 pr-3 pl-10 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
+                    />
+                    <svg
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="pointer-events-none col-start-1 row-start-1 ml-3 size-5 self-center text-gray-400"
+                    >
+                        <path
+                            d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z"
+                            clip-rule="evenodd"
+                            fill-rule="evenodd"
+                        />
+                    </svg>
+                </div>
+            </div>
+            <div class="flex items-center lg:hidden">
+                <!-- Mobile menu button -->
+                <button
+                    type="button"
+                    command="--toggle"
+                    commandfor="mobile-menu"
+                    class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:outline-hidden focus:ring-inset"
+                >
+                    <span class="absolute -inset-0.5"></span>
+                    <span class="sr-only">Open main menu</span>
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-6 in-aria-expanded:hidden"
+                    >
+                        <path
+                            d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-6 not-in-aria-expanded:hidden"
+                    >
+                        <path
+                            d="M6 18 18 6M6 6l12 12"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                </button>
+            </div>
+            <div class="hidden lg:ml-4 lg:flex lg:items-center">
+                <button
+                    type="button"
+                    class="relative shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden"
+                >
+                    <span class="absolute -inset-1.5"></span>
+                    <span class="sr-only">View notifications</span>
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-6"
+                    >
+                        <path
+                            d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                </button>
+
+                <!-- Profile dropdown -->
+                <el-dropdown class="relative ml-4 shrink-0">
+                    <button
+                        class="relative flex rounded-full bg-white text-sm focus:outline-hidden focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2"
+                    >
+                        <span class="absolute -inset-1.5"></span>
+                        <span class="sr-only">Open user menu</span>
+                        <img
+                            src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                            alt=""
+                            class="size-8 rounded-full"
+                        />
+                    </button>
+
+                    <el-menu
+                        anchor="bottom end"
+                        popover
+                        class="w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(2)] focus:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
+                    >
+                        <a
+                            href="#"
+                            class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
+                            >Your Profile</a
+                        >
+                        <a
+                            href="#"
+                            class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
+                            >Settings</a
+                        >
+                        <a
+                            href="#"
+                            class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
+                            >Sign out</a
+                        >
+                    </el-menu>
+                </el-dropdown>
+            </div>
+        </div>
+    </div>
+
+    <el-disclosure id="mobile-menu" hidden class="block lg:hidden">
+        <div class="space-y-1 pt-2 pb-3">
+            <!-- Current: "bg-indigo-50 border-indigo-500 text-indigo-700", Default: "border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800" -->
+            <a
+                href="#"
+                class="block border-l-4 border-indigo-500 bg-indigo-50 py-2 pr-4 pl-3 text-base font-medium text-indigo-700"
+                >Dashboard</a
+            >
+            <a
+                href="#"
+                class="block border-l-4 border-transparent py-2 pr-4 pl-3 text-base font-medium text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800"
+                >Team</a
+            >
+            <a
+                href="#"
+                class="block border-l-4 border-transparent py-2 pr-4 pl-3 text-base font-medium text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800"
+                >Projects</a
+            >
+            <a
+                href="#"
+                class="block border-l-4 border-transparent py-2 pr-4 pl-3 text-base font-medium text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800"
+                >Calendar</a
+            >
+        </div>
+        <div class="border-t border-gray-200 pt-4 pb-3">
+            <div class="flex items-center px-4">
+                <div class="shrink-0">
+                    <img
+                        src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                        alt=""
+                        class="size-10 rounded-full"
+                    />
+                </div>
+                <div class="ml-3">
+                    <div class="text-base font-medium text-gray-800">
+                        Tom Cook
+                    </div>
+                    <div class="text-sm font-medium text-gray-500">
+                        tom@example.com
+                    </div>
+                </div>
+                <button
+                    type="button"
+                    class="relative ml-auto shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden"
+                >
+                    <span class="absolute -inset-1.5"></span>
+                    <span class="sr-only">View notifications</span>
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-6"
+                    >
+                        <path
+                            d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                </button>
+            </div>
+            <div class="mt-3 space-y-1">
+                <a
+                    href="#"
+                    class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800"
+                    >Your Profile</a
+                >
+                <a
+                    href="#"
+                    class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800"
+                    >Settings</a
+                >
+                <a
+                    href="#"
+                    class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800"
+                    >Sign out</a
+                >
+            </div>
+        </div>
+    </el-disclosure>
+</nav>
diff --git a/application_ui/navigation/navbars/with_search_in_column_layout.html b/application_ui/navigation/navbars/with_search_in_column_layout.html
new file mode 100644
index 0000000..6d40d54
--- /dev/null
+++ b/application_ui/navigation/navbars/with_search_in_column_layout.html
@@ -0,0 +1,253 @@
+<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
+<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
+<!-- When the mobile menu is open, add `overflow-hidden` to the `body` element to prevent double scrollbars -->
+<header class="bg-white shadow-xs lg:static lg:overflow-y-visible">
+    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div
+            class="relative flex justify-between lg:gap-8 xl:grid xl:grid-cols-12"
+        >
+            <div
+                class="flex md:absolute md:inset-y-0 md:left-0 lg:static xl:col-span-2"
+            >
+                <div class="flex shrink-0 items-center">
+                    <a href="#">
+                        <img
+                            src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
+                            alt="Your Company"
+                            class="h-8 w-auto"
+                        />
+                    </a>
+                </div>
+            </div>
+            <div class="min-w-0 flex-1 md:px-8 lg:px-0 xl:col-span-6">
+                <div
+                    class="flex items-center px-6 py-4 md:mx-auto md:max-w-3xl lg:mx-0 lg:max-w-none xl:px-0"
+                >
+                    <div class="grid w-full grid-cols-1">
+                        <input
+                            type="search"
+                            name="search"
+                            placeholder="Search"
+                            class="col-start-1 row-start-1 block w-full rounded-md bg-white py-1.5 pr-3 pl-10 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
+                        />
+                        <svg
+                            viewBox="0 0 20 20"
+                            fill="currentColor"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="pointer-events-none col-start-1 row-start-1 ml-3 size-5 self-center text-gray-400"
+                        >
+                            <path
+                                d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z"
+                                clip-rule="evenodd"
+                                fill-rule="evenodd"
+                            />
+                        </svg>
+                    </div>
+                </div>
+            </div>
+            <div
+                class="flex items-center md:absolute md:inset-y-0 md:right-0 lg:hidden"
+            >
+                <!-- Mobile menu button -->
+                <button
+                    popovertarget="mobile-menu-popover"
+                    class="relative -mx-2 inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:outline-hidden focus:ring-inset"
+                >
+                    <span class="absolute -inset-0.5"></span>
+                    <span class="sr-only">Open menu</span>
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-6 in-aria-expanded:hidden"
+                    >
+                        <path
+                            d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-6 not-in-aria-expanded:hidden"
+                    >
+                        <path
+                            d="M6 18 18 6M6 6l12 12"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                </button>
+            </div>
+            <div
+                class="hidden lg:flex lg:items-center lg:justify-end xl:col-span-4"
+            >
+                <button
+                    type="button"
+                    class="relative ml-5 shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden"
+                >
+                    <span class="absolute -inset-1.5"></span>
+                    <span class="sr-only">View notifications</span>
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-6"
+                    >
+                        <path
+                            d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                </button>
+
+                <!-- Profile dropdown -->
+                <el-dropdown class="relative ml-5 shrink-0">
+                    <button
+                        class="relative flex rounded-full bg-white focus:outline-hidden focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2"
+                    >
+                        <span class="absolute -inset-1.5"></span>
+                        <span class="sr-only">Open user menu</span>
+                        <img
+                            src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                            alt=""
+                            class="size-8 rounded-full"
+                        />
+                    </button>
+
+                    <el-menu
+                        anchor="bottom end"
+                        popover
+                        class="w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(2)] focus:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
+                    >
+                        <a
+                            href="#"
+                            class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
+                            >Your Profile</a
+                        >
+                        <a
+                            href="#"
+                            class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
+                            >Settings</a
+                        >
+                        <a
+                            href="#"
+                            class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
+                            >Sign out</a
+                        >
+                    </el-menu>
+                </el-dropdown>
+
+                <a
+                    href="#"
+                    class="ml-6 inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                    >New Project</a
+                >
+            </div>
+        </div>
+    </div>
+
+    <el-popover
+        id="mobile-menu-popover"
+        anchor="bottom"
+        popover
+        aria-label="Global"
+        class="w-full overflow-visible backdrop:bg-transparent open:block lg:hidden"
+    >
+        <div class="mx-auto max-w-3xl space-y-1 px-2 pt-2 pb-3 sm:px-4">
+            <!-- Current: "bg-gray-100 text-gray-900", Default: "hover:bg-gray-50" -->
+            <a
+                href="#"
+                aria-current="page"
+                class="block rounded-md bg-gray-100 px-3 py-2 text-base font-medium text-gray-900"
+                >Dashboard</a
+            >
+            <a
+                href="#"
+                class="block rounded-md px-3 py-2 text-base font-medium hover:bg-gray-50"
+                >Calendar</a
+            >
+            <a
+                href="#"
+                class="block rounded-md px-3 py-2 text-base font-medium hover:bg-gray-50"
+                >Teams</a
+            >
+            <a
+                href="#"
+                class="block rounded-md px-3 py-2 text-base font-medium hover:bg-gray-50"
+                >Directory</a
+            >
+        </div>
+        <div class="border-t border-gray-200 pt-4 pb-3">
+            <div class="mx-auto flex max-w-3xl items-center px-4 sm:px-6">
+                <div class="shrink-0">
+                    <img
+                        src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                        alt=""
+                        class="size-10 rounded-full"
+                    />
+                </div>
+                <div class="ml-3">
+                    <div class="text-base font-medium text-gray-800">
+                        Chelsea Hagon
+                    </div>
+                    <div class="text-sm font-medium text-gray-500">
+                        chelsea.hagon@example.com
+                    </div>
+                </div>
+                <button
+                    type="button"
+                    class="relative ml-auto shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden"
+                >
+                    <span class="absolute -inset-1.5"></span>
+                    <span class="sr-only">View notifications</span>
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-6"
+                    >
+                        <path
+                            d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                </button>
+            </div>
+            <div class="mx-auto mt-3 max-w-3xl space-y-1 px-2 sm:px-4">
+                <a
+                    href="#"
+                    class="block rounded-md px-3 py-2 text-base font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-900"
+                    >Your Profile</a
+                >
+                <a
+                    href="#"
+                    class="block rounded-md px-3 py-2 text-base font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-900"
+                    >Settings</a
+                >
+                <a
+                    href="#"
+                    class="block rounded-md px-3 py-2 text-base font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-900"
+                    >Sign out</a
+                >
+            </div>
+        </div>
+    </el-popover>
+</header>
diff --git a/application_ui/navigation/pagination/card_footer_with_page_buttons.html b/application_ui/navigation/pagination/card_footer_with_page_buttons.html
new file mode 100644
index 0000000..59d5c60
--- /dev/null
+++ b/application_ui/navigation/pagination/card_footer_with_page_buttons.html
@@ -0,0 +1,110 @@
+<div
+    class="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6"
+>
+    <div class="flex flex-1 justify-between sm:hidden">
+        <a
+            href="#"
+            class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
+            >Previous</a
+        >
+        <a
+            href="#"
+            class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
+            >Next</a
+        >
+    </div>
+    <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
+        <div>
+            <p class="text-sm text-gray-700">
+                Showing
+                <span class="font-medium">1</span>
+                to
+                <span class="font-medium">10</span>
+                of
+                <span class="font-medium">97</span>
+                results
+            </p>
+        </div>
+        <div>
+            <nav
+                aria-label="Pagination"
+                class="isolate inline-flex -space-x-px rounded-md shadow-xs"
+            >
+                <a
+                    href="#"
+                    class="relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-gray-300 ring-inset hover:bg-gray-50 focus:z-20 focus:outline-offset-0"
+                >
+                    <span class="sr-only">Previous</span>
+                    <svg
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-5"
+                    >
+                        <path
+                            d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z"
+                            clip-rule="evenodd"
+                            fill-rule="evenodd"
+                        />
+                    </svg>
+                </a>
+                <!-- Current: "z-10 bg-indigo-600 text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600", Default: "text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:outline-offset-0" -->
+                <a
+                    href="#"
+                    aria-current="page"
+                    class="relative z-10 inline-flex items-center bg-indigo-600 px-4 py-2 text-sm font-semibold text-white focus:z-20 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                    >1</a
+                >
+                <a
+                    href="#"
+                    class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-gray-300 ring-inset hover:bg-gray-50 focus:z-20 focus:outline-offset-0"
+                    >2</a
+                >
+                <a
+                    href="#"
+                    class="relative hidden items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-gray-300 ring-inset hover:bg-gray-50 focus:z-20 focus:outline-offset-0 md:inline-flex"
+                    >3</a
+                >
+                <span
+                    class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-700 ring-1 ring-gray-300 ring-inset focus:outline-offset-0"
+                    >...</span
+                >
+                <a
+                    href="#"
+                    class="relative hidden items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-gray-300 ring-inset hover:bg-gray-50 focus:z-20 focus:outline-offset-0 md:inline-flex"
+                    >8</a
+                >
+                <a
+                    href="#"
+                    class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-gray-300 ring-inset hover:bg-gray-50 focus:z-20 focus:outline-offset-0"
+                    >9</a
+                >
+                <a
+                    href="#"
+                    class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-gray-300 ring-inset hover:bg-gray-50 focus:z-20 focus:outline-offset-0"
+                    >10</a
+                >
+                <a
+                    href="#"
+                    class="relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-gray-300 ring-inset hover:bg-gray-50 focus:z-20 focus:outline-offset-0"
+                >
+                    <span class="sr-only">Next</span>
+                    <svg
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-5"
+                    >
+                        <path
+                            d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                            clip-rule="evenodd"
+                            fill-rule="evenodd"
+                        />
+                    </svg>
+                </a>
+            </nav>
+        </div>
+    </div>
+</div>
diff --git a/application_ui/navigation/pagination/centered_page_numbers.html b/application_ui/navigation/pagination/centered_page_numbers.html
new file mode 100644
index 0000000..09ef1ed
--- /dev/null
+++ b/application_ui/navigation/pagination/centered_page_numbers.html
@@ -0,0 +1,84 @@
+<nav
+    class="flex items-center justify-between border-t border-gray-200 px-4 sm:px-0"
+>
+    <div class="-mt-px flex w-0 flex-1">
+        <a
+            href="#"
+            class="inline-flex items-center border-t-2 border-transparent pt-4 pr-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
+        >
+            <svg
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                data-slot="icon"
+                aria-hidden="true"
+                class="mr-3 size-5 text-gray-400"
+            >
+                <path
+                    d="M18 10a.75.75 0 0 1-.75.75H4.66l2.1 1.95a.75.75 0 1 1-1.02 1.1l-3.5-3.25a.75.75 0 0 1 0-1.1l3.5-3.25a.75.75 0 1 1 1.02 1.1l-2.1 1.95h12.59A.75.75 0 0 1 18 10Z"
+                    clip-rule="evenodd"
+                    fill-rule="evenodd"
+                />
+            </svg>
+            Previous
+        </a>
+    </div>
+    <div class="hidden md:-mt-px md:flex">
+        <a
+            href="#"
+            class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
+            >1</a
+        >
+        <!-- Current: "border-indigo-500 text-indigo-600", Default: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" -->
+        <a
+            href="#"
+            aria-current="page"
+            class="inline-flex items-center border-t-2 border-indigo-500 px-4 pt-4 text-sm font-medium text-indigo-600"
+            >2</a
+        >
+        <a
+            href="#"
+            class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
+            >3</a
+        >
+        <span
+            class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500"
+            >...</span
+        >
+        <a
+            href="#"
+            class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
+            >8</a
+        >
+        <a
+            href="#"
+            class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
+            >9</a
+        >
+        <a
+            href="#"
+            class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
+            >10</a
+        >
+    </div>
+    <div class="-mt-px flex w-0 flex-1 justify-end">
+        <a
+            href="#"
+            class="inline-flex items-center border-t-2 border-transparent pt-4 pl-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
+        >
+            Next
+            <svg
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                data-slot="icon"
+                aria-hidden="true"
+                class="ml-3 size-5 text-gray-400"
+            >
+                <path
+                    d="M2 10a.75.75 0 0 1 .75-.75h12.59l-2.1-1.95a.75.75 0 1 1 1.02-1.1l3.5 3.25a.75.75 0 0 1 0 1.1l-3.5 3.25a.75.75 0 1 1-1.02-1.1l2.1-1.95H2.75A.75.75 0 0 1 2 10Z"
+                    clip-rule="evenodd"
+                    fill-rule="evenodd"
+                />
+            </svg>
+        </a>
+    </div>
+</nav>
diff --git a/application_ui/navigation/pagination/simple_card_footer.html b/application_ui/navigation/pagination/simple_card_footer.html
new file mode 100644
index 0000000..245a92b
--- /dev/null
+++ b/application_ui/navigation/pagination/simple_card_footer.html
@@ -0,0 +1,28 @@
+<nav
+    aria-label="Pagination"
+    class="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6"
+>
+    <div class="hidden sm:block">
+        <p class="text-sm text-gray-700">
+            Showing
+            <span class="font-medium">1</span>
+            to
+            <span class="font-medium">10</span>
+            of
+            <span class="font-medium">20</span>
+            results
+        </p>
+    </div>
+    <div class="flex flex-1 justify-between sm:justify-end">
+        <a
+            href="#"
+            class="relative inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-gray-300 ring-inset hover:bg-gray-50 focus-visible:outline-offset-0"
+            >Previous</a
+        >
+        <a
+            href="#"
+            class="relative ml-3 inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-gray-300 ring-inset hover:bg-gray-50 focus-visible:outline-offset-0"
+            >Next</a
+        >
+    </div>
+</nav>
diff --git a/application_ui/navigation/progress_bars/bullets.html b/application_ui/navigation/progress_bars/bullets.html
new file mode 100644
index 0000000..c2ff8af
--- /dev/null
+++ b/application_ui/navigation/progress_bars/bullets.html
@@ -0,0 +1,49 @@
+<nav aria-label="Progress" class="flex items-center justify-center">
+    <p class="text-sm font-medium">Step 2 of 4</p>
+    <ol role="list" class="ml-8 flex items-center space-x-5">
+        <li>
+            <!-- Completed Step -->
+            <a
+                href="#"
+                class="block size-2.5 rounded-full bg-indigo-600 hover:bg-indigo-900"
+            >
+                <span class="sr-only">Step 1</span>
+            </a>
+        </li>
+        <li>
+            <!-- Current Step -->
+            <a
+                href="#"
+                aria-current="step"
+                class="relative flex items-center justify-center"
+            >
+                <span aria-hidden="true" class="absolute flex size-5 p-px">
+                    <span class="size-full rounded-full bg-indigo-200"></span>
+                </span>
+                <span
+                    aria-hidden="true"
+                    class="relative block size-2.5 rounded-full bg-indigo-600"
+                ></span>
+                <span class="sr-only">Step 2</span>
+            </a>
+        </li>
+        <li>
+            <!-- Upcoming Step -->
+            <a
+                href="#"
+                class="block size-2.5 rounded-full bg-gray-200 hover:bg-gray-400"
+            >
+                <span class="sr-only">Step 3</span>
+            </a>
+        </li>
+        <li>
+            <!-- Upcoming Step -->
+            <a
+                href="#"
+                class="block size-2.5 rounded-full bg-gray-200 hover:bg-gray-400"
+            >
+                <span class="sr-only">Step 4</span>
+            </a>
+        </li>
+    </ol>
+</nav>
diff --git a/application_ui/navigation/progress_bars/bullets_and_text.html b/application_ui/navigation/progress_bars/bullets_and_text.html
new file mode 100644
index 0000000..b31210f
--- /dev/null
+++ b/application_ui/navigation/progress_bars/bullets_and_text.html
@@ -0,0 +1,93 @@
+<div class="px-4 py-12 sm:px-6 lg:px-8">
+    <nav aria-label="Progress" class="flex justify-center">
+        <ol role="list" class="space-y-6">
+            <li>
+                <!-- Complete Step -->
+                <a href="#" class="group">
+                    <span class="flex items-start">
+                        <span
+                            class="relative flex size-5 shrink-0 items-center justify-center"
+                        >
+                            <svg
+                                viewBox="0 0 20 20"
+                                fill="currentColor"
+                                data-slot="icon"
+                                aria-hidden="true"
+                                class="size-full text-indigo-600 group-hover:text-indigo-800"
+                            >
+                                <path
+                                    d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z"
+                                    clip-rule="evenodd"
+                                    fill-rule="evenodd"
+                                />
+                            </svg>
+                        </span>
+                        <span
+                            class="ml-3 text-sm font-medium text-gray-500 group-hover:text-gray-900"
+                            >Create account</span
+                        >
+                    </span>
+                </a>
+            </li>
+            <li>
+                <!-- Current Step -->
+                <a href="#" aria-current="step" class="flex items-start">
+                    <span
+                        aria-hidden="true"
+                        class="relative flex size-5 shrink-0 items-center justify-center"
+                    >
+                        <span
+                            class="absolute size-4 rounded-full bg-indigo-200"
+                        ></span>
+                        <span
+                            class="relative block size-2 rounded-full bg-indigo-600"
+                        ></span>
+                    </span>
+                    <span class="ml-3 text-sm font-medium text-indigo-600"
+                        >Profile information</span
+                    >
+                </a>
+            </li>
+            <li>
+                <!-- Upcoming Step -->
+                <a href="#" class="group">
+                    <div class="flex items-start">
+                        <div
+                            aria-hidden="true"
+                            class="relative flex size-5 shrink-0 items-center justify-center"
+                        >
+                            <div
+                                class="size-2 rounded-full bg-gray-300 group-hover:bg-gray-400"
+                            ></div>
+                        </div>
+                        <p
+                            class="ml-3 text-sm font-medium text-gray-500 group-hover:text-gray-900"
+                        >
+                            Theme
+                        </p>
+                    </div>
+                </a>
+            </li>
+            <li>
+                <!-- Upcoming Step -->
+                <a href="#" class="group">
+                    <div class="flex items-start">
+                        <div
+                            aria-hidden="true"
+                            class="relative flex size-5 shrink-0 items-center justify-center"
+                        >
+                            <div
+                                class="size-2 rounded-full bg-gray-300 group-hover:bg-gray-400"
+                            ></div>
+                        </div>
+                        <p
+                            class="ml-3 text-sm font-medium text-gray-500 group-hover:text-gray-900"
+                        >
+                            Preview
+                        </p>
+                    </div>
+                </a>
+            </li>
+        </ol>
+    </nav>
+</div>
diff --git a/application_ui/navigation/progress_bars/circles.html b/application_ui/navigation/progress_bars/circles.html
new file mode 100644
index 0000000..eb77cc4
--- /dev/null
+++ b/application_ui/navigation/progress_bars/circles.html
@@ -0,0 +1,103 @@
+<nav aria-label="Progress">
+    <ol role="list" class="flex items-center">
+        <li class="relative pr-8 sm:pr-20">
+            <!-- Completed Step -->
+            <div aria-hidden="true" class="absolute inset-0 flex items-center">
+                <div class="h-0.5 w-full bg-indigo-600"></div>
+            </div>
+            <a
+                href="#"
+                class="relative flex size-8 items-center justify-center rounded-full bg-indigo-600 hover:bg-indigo-900"
+            >
+                <svg
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    data-slot="icon"
+                    aria-hidden="true"
+                    class="size-5 text-white"
+                >
+                    <path
+                        d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
+                        clip-rule="evenodd"
+                        fill-rule="evenodd"
+                    />
+                </svg>
+                <span class="sr-only">Step 1</span>
+            </a>
+        </li>
+        <li class="relative pr-8 sm:pr-20">
+            <!-- Completed Step -->
+            <div aria-hidden="true" class="absolute inset-0 flex items-center">
+                <div class="h-0.5 w-full bg-indigo-600"></div>
+            </div>
+            <a
+                href="#"
+                class="relative flex size-8 items-center justify-center rounded-full bg-indigo-600 hover:bg-indigo-900"
+            >
+                <svg
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    data-slot="icon"
+                    aria-hidden="true"
+                    class="size-5 text-white"
+                >
+                    <path
+                        d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
+                        clip-rule="evenodd"
+                        fill-rule="evenodd"
+                    />
+                </svg>
+                <span class="sr-only">Step 2</span>
+            </a>
+        </li>
+        <li class="relative pr-8 sm:pr-20">
+            <!-- Current Step -->
+            <div aria-hidden="true" class="absolute inset-0 flex items-center">
+                <div class="h-0.5 w-full bg-gray-200"></div>
+            </div>
+            <a
+                href="#"
+                aria-current="step"
+                class="relative flex size-8 items-center justify-center rounded-full border-2 border-indigo-600 bg-white"
+            >
+                <span
+                    aria-hidden="true"
+                    class="size-2.5 rounded-full bg-indigo-600"
+                ></span>
+                <span class="sr-only">Step 3</span>
+            </a>
+        </li>
+        <li class="relative pr-8 sm:pr-20">
+            <!-- Upcoming Step -->
+            <div aria-hidden="true" class="absolute inset-0 flex items-center">
+                <div class="h-0.5 w-full bg-gray-200"></div>
+            </div>
+            <a
+                href="#"
+                class="group relative flex size-8 items-center justify-center rounded-full border-2 border-gray-300 bg-white hover:border-gray-400"
+            >
+                <span
+                    aria-hidden="true"
+                    class="size-2.5 rounded-full bg-transparent group-hover:bg-gray-300"
+                ></span>
+                <span class="sr-only">Step 4</span>
+            </a>
+        </li>
+        <li class="relative">
+            <!-- Upcoming Step -->
+            <div aria-hidden="true" class="absolute inset-0 flex items-center">
+                <div class="h-0.5 w-full bg-gray-200"></div>
+            </div>
+            <a
+                href="#"
+                class="group relative flex size-8 items-center justify-center rounded-full border-2 border-gray-300 bg-white hover:border-gray-400"
+            >
+                <span
+                    aria-hidden="true"
+                    class="size-2.5 rounded-full bg-transparent group-hover:bg-gray-300"
+                ></span>
+                <span class="sr-only">Step 5</span>
+            </a>
+        </li>
+    </ol>
+</nav>
diff --git a/application_ui/navigation/progress_bars/circles_with_text.html b/application_ui/navigation/progress_bars/circles_with_text.html
new file mode 100644
index 0000000..4853bf6
--- /dev/null
+++ b/application_ui/navigation/progress_bars/circles_with_text.html
@@ -0,0 +1,140 @@
+<nav aria-label="Progress">
+    <ol role="list" class="overflow-hidden">
+        <li class="relative pb-10">
+            <div
+                aria-hidden="true"
+                class="absolute top-4 left-4 mt-0.5 -ml-px h-full w-0.5 bg-indigo-600"
+            ></div>
+            <!-- Complete Step -->
+            <a href="#" class="group relative flex items-start">
+                <span class="flex h-9 items-center">
+                    <span
+                        class="relative z-10 flex size-8 items-center justify-center rounded-full bg-indigo-600 group-hover:bg-indigo-800"
+                    >
+                        <svg
+                            viewBox="0 0 20 20"
+                            fill="currentColor"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="size-5 text-white"
+                        >
+                            <path
+                                d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
+                                clip-rule="evenodd"
+                                fill-rule="evenodd"
+                            />
+                        </svg>
+                    </span>
+                </span>
+                <span class="ml-4 flex min-w-0 flex-col">
+                    <span class="text-sm font-medium">Create account</span>
+                    <span class="text-sm text-gray-500"
+                        >Vitae sed mi luctus laoreet.</span
+                    >
+                </span>
+            </a>
+        </li>
+        <li class="relative pb-10">
+            <div
+                aria-hidden="true"
+                class="absolute top-4 left-4 mt-0.5 -ml-px h-full w-0.5 bg-gray-300"
+            ></div>
+            <!-- Current Step -->
+            <a
+                href="#"
+                aria-current="step"
+                class="group relative flex items-start"
+            >
+                <span aria-hidden="true" class="flex h-9 items-center">
+                    <span
+                        class="relative z-10 flex size-8 items-center justify-center rounded-full border-2 border-indigo-600 bg-white"
+                    >
+                        <span
+                            class="size-2.5 rounded-full bg-indigo-600"
+                        ></span>
+                    </span>
+                </span>
+                <span class="ml-4 flex min-w-0 flex-col">
+                    <span class="text-sm font-medium text-indigo-600"
+                        >Profile information</span
+                    >
+                    <span class="text-sm text-gray-500"
+                        >Cursus semper viverra facilisis et et some more.</span
+                    >
+                </span>
+            </a>
+        </li>
+        <li class="relative pb-10">
+            <div
+                aria-hidden="true"
+                class="absolute top-4 left-4 mt-0.5 -ml-px h-full w-0.5 bg-gray-300"
+            ></div>
+            <!-- Upcoming Step -->
+            <a href="#" class="group relative flex items-start">
+                <span aria-hidden="true" class="flex h-9 items-center">
+                    <span
+                        class="relative z-10 flex size-8 items-center justify-center rounded-full border-2 border-gray-300 bg-white group-hover:border-gray-400"
+                    >
+                        <span
+                            class="size-2.5 rounded-full bg-transparent group-hover:bg-gray-300"
+                        ></span>
+                    </span>
+                </span>
+                <span class="ml-4 flex min-w-0 flex-col">
+                    <span class="text-sm font-medium text-gray-500"
+                        >Business information</span
+                    >
+                    <span class="text-sm text-gray-500"
+                        >Penatibus eu quis ante.</span
+                    >
+                </span>
+            </a>
+        </li>
+        <li class="relative pb-10">
+            <div
+                aria-hidden="true"
+                class="absolute top-4 left-4 mt-0.5 -ml-px h-full w-0.5 bg-gray-300"
+            ></div>
+            <!-- Upcoming Step -->
+            <a href="#" class="group relative flex items-start">
+                <span aria-hidden="true" class="flex h-9 items-center">
+                    <span
+                        class="relative z-10 flex size-8 items-center justify-center rounded-full border-2 border-gray-300 bg-white group-hover:border-gray-400"
+                    >
+                        <span
+                            class="size-2.5 rounded-full bg-transparent group-hover:bg-gray-300"
+                        ></span>
+                    </span>
+                </span>
+                <span class="ml-4 flex min-w-0 flex-col">
+                    <span class="text-sm font-medium text-gray-500">Theme</span>
+                    <span class="text-sm text-gray-500"
+                        >Faucibus nec enim leo et.</span
+                    >
+                </span>
+            </a>
+        </li>
+        <li class="relative">
+            <!-- Upcoming Step -->
+            <a href="#" class="group relative flex items-start">
+                <span aria-hidden="true" class="flex h-9 items-center">
+                    <span
+                        class="relative z-10 flex size-8 items-center justify-center rounded-full border-2 border-gray-300 bg-white group-hover:border-gray-400"
+                    >
+                        <span
+                            class="size-2.5 rounded-full bg-transparent group-hover:bg-gray-300"
+                        ></span>
+                    </span>
+                </span>
+                <span class="ml-4 flex min-w-0 flex-col">
+                    <span class="text-sm font-medium text-gray-500"
+                        >Preview</span
+                    >
+                    <span class="text-sm text-gray-500"
+                        >Iusto et officia maiores porro ad non quas.</span
+                    >
+                </span>
+            </a>
+        </li>
+    </ol>
+</nav>
diff --git a/application_ui/navigation/progress_bars/panels.html b/application_ui/navigation/progress_bars/panels.html
new file mode 100644
index 0000000..8c6e44e
--- /dev/null
+++ b/application_ui/navigation/progress_bars/panels.html
@@ -0,0 +1,107 @@
+<nav aria-label="Progress">
+    <ol
+        role="list"
+        class="divide-y divide-gray-300 rounded-md border border-gray-300 md:flex md:divide-y-0"
+    >
+        <li class="relative md:flex md:flex-1">
+            <!-- Completed Step -->
+            <a href="#" class="group flex w-full items-center">
+                <span class="flex items-center px-6 py-4 text-sm font-medium">
+                    <span
+                        class="flex size-10 shrink-0 items-center justify-center rounded-full bg-indigo-600 group-hover:bg-indigo-800"
+                    >
+                        <svg
+                            viewBox="0 0 24 24"
+                            fill="currentColor"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="size-6 text-white"
+                        >
+                            <path
+                                d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z"
+                                clip-rule="evenodd"
+                                fill-rule="evenodd"
+                            />
+                        </svg>
+                    </span>
+                    <span class="ml-4 text-sm font-medium text-gray-900"
+                        >Job details</span
+                    >
+                </span>
+            </a>
+            <!-- Arrow separator for lg screens and up -->
+            <div
+                aria-hidden="true"
+                class="absolute top-0 right-0 hidden h-full w-5 md:block"
+            >
+                <svg
+                    viewBox="0 0 22 80"
+                    fill="none"
+                    preserveAspectRatio="none"
+                    class="size-full text-gray-300"
+                >
+                    <path
+                        d="M0 -2L20 40L0 82"
+                        stroke="currentcolor"
+                        vector-effect="non-scaling-stroke"
+                        stroke-linejoin="round"
+                    />
+                </svg>
+            </div>
+        </li>
+        <li class="relative md:flex md:flex-1">
+            <!-- Current Step -->
+            <a
+                href="#"
+                aria-current="step"
+                class="flex items-center px-6 py-4 text-sm font-medium"
+            >
+                <span
+                    class="flex size-10 shrink-0 items-center justify-center rounded-full border-2 border-indigo-600"
+                >
+                    <span class="text-indigo-600">02</span>
+                </span>
+                <span class="ml-4 text-sm font-medium text-indigo-600"
+                    >Application form</span
+                >
+            </a>
+            <!-- Arrow separator for lg screens and up -->
+            <div
+                aria-hidden="true"
+                class="absolute top-0 right-0 hidden h-full w-5 md:block"
+            >
+                <svg
+                    viewBox="0 0 22 80"
+                    fill="none"
+                    preserveAspectRatio="none"
+                    class="size-full text-gray-300"
+                >
+                    <path
+                        d="M0 -2L20 40L0 82"
+                        stroke="currentcolor"
+                        vector-effect="non-scaling-stroke"
+                        stroke-linejoin="round"
+                    />
+                </svg>
+            </div>
+        </li>
+        <li class="relative md:flex md:flex-1">
+            <!-- Upcoming Step -->
+            <a href="#" class="group flex items-center">
+                <span class="flex items-center px-6 py-4 text-sm font-medium">
+                    <span
+                        class="flex size-10 shrink-0 items-center justify-center rounded-full border-2 border-gray-300 group-hover:border-gray-400"
+                    >
+                        <span class="text-gray-500 group-hover:text-gray-900"
+                            >03</span
+                        >
+                    </span>
+                    <span
+                        class="ml-4 text-sm font-medium text-gray-500 group-hover:text-gray-900"
+                        >Preview</span
+                    >
+                </span>
+            </a>
+        </li>
+    </ol>
+</nav>
diff --git a/application_ui/navigation/progress_bars/panels_with_border.html b/application_ui/navigation/progress_bars/panels_with_border.html
new file mode 100644
index 0000000..eacc93e
--- /dev/null
+++ b/application_ui/navigation/progress_bars/panels_with_border.html
@@ -0,0 +1,152 @@
+<div class="lg:border-t lg:border-b lg:border-gray-200">
+    <nav aria-label="Progress" class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <ol
+            role="list"
+            class="overflow-hidden rounded-md lg:flex lg:rounded-none lg:border-r lg:border-l lg:border-gray-200"
+        >
+            <li class="relative overflow-hidden lg:flex-1">
+                <div
+                    class="overflow-hidden rounded-t-md border border-b-0 border-gray-200 lg:border-0"
+                >
+                    <!-- Completed Step -->
+                    <a href="#" class="group">
+                        <span
+                            aria-hidden="true"
+                            class="absolute top-0 left-0 h-full w-1 bg-transparent group-hover:bg-gray-200 lg:top-auto lg:bottom-0 lg:h-1 lg:w-full"
+                        ></span>
+                        <span
+                            class="flex items-start px-6 py-5 text-sm font-medium"
+                        >
+                            <span class="shrink-0">
+                                <span
+                                    class="flex size-10 items-center justify-center rounded-full bg-indigo-600"
+                                >
+                                    <svg
+                                        viewBox="0 0 24 24"
+                                        fill="currentColor"
+                                        data-slot="icon"
+                                        aria-hidden="true"
+                                        class="size-6 text-white"
+                                    >
+                                        <path
+                                            d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z"
+                                            clip-rule="evenodd"
+                                            fill-rule="evenodd"
+                                        />
+                                    </svg>
+                                </span>
+                            </span>
+                            <span class="mt-0.5 ml-4 flex min-w-0 flex-col">
+                                <span class="text-sm font-medium"
+                                    >Job Details</span
+                                >
+                                <span class="text-sm font-medium text-gray-500"
+                                    >Vitae sed mi luctus laoreet.</span
+                                >
+                            </span>
+                        </span>
+                    </a>
+                </div>
+            </li>
+            <li class="relative overflow-hidden lg:flex-1">
+                <div class="overflow-hidden border border-gray-200 lg:border-0">
+                    <!-- Current Step -->
+                    <a href="#" aria-current="step">
+                        <span
+                            aria-hidden="true"
+                            class="absolute top-0 left-0 h-full w-1 bg-indigo-600 lg:top-auto lg:bottom-0 lg:h-1 lg:w-full"
+                        ></span>
+                        <span
+                            class="flex items-start px-6 py-5 text-sm font-medium lg:pl-9"
+                        >
+                            <span class="shrink-0">
+                                <span
+                                    class="flex size-10 items-center justify-center rounded-full border-2 border-indigo-600"
+                                >
+                                    <span class="text-indigo-600">02</span>
+                                </span>
+                            </span>
+                            <span class="mt-0.5 ml-4 flex min-w-0 flex-col">
+                                <span
+                                    class="text-sm font-medium text-indigo-600"
+                                    >Application form</span
+                                >
+                                <span class="text-sm font-medium text-gray-500"
+                                    >Cursus semper viverra.</span
+                                >
+                            </span>
+                        </span>
+                    </a>
+                    <!-- Separator -->
+                    <div
+                        aria-hidden="true"
+                        class="absolute inset-0 top-0 left-0 hidden w-3 lg:block"
+                    >
+                        <svg
+                            viewBox="0 0 12 82"
+                            fill="none"
+                            preserveAspectRatio="none"
+                            class="size-full text-gray-300"
+                        >
+                            <path
+                                d="M0.5 0V31L10.5 41L0.5 51V82"
+                                stroke="currentcolor"
+                                vector-effect="non-scaling-stroke"
+                            />
+                        </svg>
+                    </div>
+                </div>
+            </li>
+            <li class="relative overflow-hidden lg:flex-1">
+                <div
+                    class="overflow-hidden rounded-b-md border border-t-0 border-gray-200 lg:border-0"
+                >
+                    <!-- Upcoming Step -->
+                    <a href="#" class="group">
+                        <span
+                            aria-hidden="true"
+                            class="absolute top-0 left-0 h-full w-1 bg-transparent group-hover:bg-gray-200 lg:top-auto lg:bottom-0 lg:h-1 lg:w-full"
+                        ></span>
+                        <span
+                            class="flex items-start px-6 py-5 text-sm font-medium lg:pl-9"
+                        >
+                            <span class="shrink-0">
+                                <span
+                                    class="flex size-10 items-center justify-center rounded-full border-2 border-gray-300"
+                                >
+                                    <span class="text-gray-500">03</span>
+                                </span>
+                            </span>
+                            <span class="mt-0.5 ml-4 flex min-w-0 flex-col">
+                                <span class="text-sm font-medium text-gray-500"
+                                    >Preview</span
+                                >
+                                <span class="text-sm font-medium text-gray-500"
+                                    >Penatibus eu quis ante.</span
+                                >
+                            </span>
+                        </span>
+                    </a>
+                    <!-- Separator -->
+                    <div
+                        aria-hidden="true"
+                        class="absolute inset-0 top-0 left-0 hidden w-3 lg:block"
+                    >
+                        <svg
+                            viewBox="0 0 12 82"
+                            fill="none"
+                            preserveAspectRatio="none"
+                            class="size-full text-gray-300"
+                        >
+                            <path
+                                d="M0.5 0V31L10.5 41L0.5 51V82"
+                                stroke="currentcolor"
+                                vector-effect="non-scaling-stroke"
+                            />
+                        </svg>
+                    </div>
+                </div>
+            </li>
+        </ol>
+    </nav>
+</div>
diff --git a/application_ui/navigation/progress_bars/progress_bar.html b/application_ui/navigation/progress_bars/progress_bar.html
new file mode 100644
index 0000000..f63813f
--- /dev/null
+++ b/application_ui/navigation/progress_bars/progress_bar.html
@@ -0,0 +1,20 @@
+<div>
+    <h4 class="sr-only">Status</h4>
+    <p class="text-sm font-medium text-gray-900">Migrating MySQL database...</p>
+    <div aria-hidden="true" class="mt-6">
+        <div class="overflow-hidden rounded-full bg-gray-200">
+            <div
+                style="width: 37.5%"
+                class="h-2 rounded-full bg-indigo-600"
+            ></div>
+        </div>
+        <div
+            class="mt-6 hidden grid-cols-4 text-sm font-medium text-gray-600 sm:grid"
+        >
+            <div class="text-indigo-600">Copying files</div>
+            <div class="text-center text-indigo-600">Migrating database</div>
+            <div class="text-center">Compiling assets</div>
+            <div class="text-right">Deployed</div>
+        </div>
+    </div>
+</div>
diff --git a/application_ui/navigation/progress_bars/simple.html b/application_ui/navigation/progress_bars/simple.html
new file mode 100644
index 0000000..c13ff66
--- /dev/null
+++ b/application_ui/navigation/progress_bars/simple.html
@@ -0,0 +1,41 @@
+<nav aria-label="Progress">
+    <ol role="list" class="space-y-4 md:flex md:space-y-0 md:space-x-8">
+        <li class="md:flex-1">
+            <!-- Completed Step -->
+            <a
+                href="#"
+                class="group flex flex-col border-l-4 border-indigo-600 py-2 pl-4 hover:border-indigo-800 md:border-t-4 md:border-l-0 md:pt-4 md:pb-0 md:pl-0"
+            >
+                <span
+                    class="text-sm font-medium text-indigo-600 group-hover:text-indigo-800"
+                    >Step 1</span
+                >
+                <span class="text-sm font-medium">Job details</span>
+            </a>
+        </li>
+        <li class="md:flex-1">
+            <!-- Current Step -->
+            <a
+                href="#"
+                aria-current="step"
+                class="flex flex-col border-l-4 border-indigo-600 py-2 pl-4 md:border-t-4 md:border-l-0 md:pt-4 md:pb-0 md:pl-0"
+            >
+                <span class="text-sm font-medium text-indigo-600">Step 2</span>
+                <span class="text-sm font-medium">Application form</span>
+            </a>
+        </li>
+        <li class="md:flex-1">
+            <!-- Upcoming Step -->
+            <a
+                href="#"
+                class="group flex flex-col border-l-4 border-gray-200 py-2 pl-4 hover:border-gray-300 md:border-t-4 md:border-l-0 md:pt-4 md:pb-0 md:pl-0"
+            >
+                <span
+                    class="text-sm font-medium text-gray-500 group-hover:text-gray-700"
+                    >Step 3</span
+                >
+                <span class="text-sm font-medium">Preview</span>
+            </a>
+        </li>
+    </ol>
+</nav>
diff --git a/application_ui/navigation/sidebar_navigation/brand.html b/application_ui/navigation/sidebar_navigation/brand.html
new file mode 100644
index 0000000..7e3df87
--- /dev/null
+++ b/application_ui/navigation/sidebar_navigation/brand.html
@@ -0,0 +1,234 @@
+<div class="flex grow flex-col gap-y-5 overflow-y-auto bg-indigo-600 px-6">
+    <div class="flex h-16 shrink-0 items-center">
+        <img
+            src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=white"
+            alt="Your Company"
+            class="h-8 w-auto"
+        />
+    </div>
+    <nav class="flex flex-1 flex-col">
+        <ul role="list" class="flex flex-1 flex-col gap-y-7">
+            <li>
+                <ul role="list" class="-mx-2 space-y-1">
+                    <li>
+                        <!-- Current: "bg-indigo-700 text-white", Default: "text-indigo-200 hover:text-white hover:bg-indigo-700" -->
+                        <a
+                            href="#"
+                            class="group flex gap-x-3 rounded-md bg-indigo-700 p-2 text-sm/6 font-semibold text-white"
+                        >
+                            <svg
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                data-slot="icon"
+                                aria-hidden="true"
+                                class="size-6 shrink-0 text-white"
+                            >
+                                <path
+                                    d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                />
+                            </svg>
+                            Dashboard
+                            <span
+                                aria-hidden="true"
+                                class="ml-auto w-9 min-w-max rounded-full bg-indigo-600 px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-white ring-1 ring-indigo-500 ring-inset"
+                                >5</span
+                            >
+                        </a>
+                    </li>
+                    <li>
+                        <a
+                            href="#"
+                            class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-indigo-200 hover:bg-indigo-700 hover:text-white"
+                        >
+                            <svg
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                data-slot="icon"
+                                aria-hidden="true"
+                                class="size-6 shrink-0 text-indigo-200 group-hover:text-white"
+                            >
+                                <path
+                                    d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                />
+                            </svg>
+                            Team
+                        </a>
+                    </li>
+                    <li>
+                        <a
+                            href="#"
+                            class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-indigo-200 hover:bg-indigo-700 hover:text-white"
+                        >
+                            <svg
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                data-slot="icon"
+                                aria-hidden="true"
+                                class="size-6 shrink-0 text-indigo-200 group-hover:text-white"
+                            >
+                                <path
+                                    d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                />
+                            </svg>
+                            Projects
+                            <span
+                                aria-hidden="true"
+                                class="ml-auto w-9 min-w-max rounded-full bg-indigo-600 px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-white ring-1 ring-indigo-500 ring-inset"
+                                >12</span
+                            >
+                        </a>
+                    </li>
+                    <li>
+                        <a
+                            href="#"
+                            class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-indigo-200 hover:bg-indigo-700 hover:text-white"
+                        >
+                            <svg
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                data-slot="icon"
+                                aria-hidden="true"
+                                class="size-6 shrink-0 text-indigo-200 group-hover:text-white"
+                            >
+                                <path
+                                    d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                />
+                            </svg>
+                            Calendar
+                            <span
+                                aria-hidden="true"
+                                class="ml-auto w-9 min-w-max rounded-full bg-indigo-600 px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-white ring-1 ring-indigo-500 ring-inset"
+                                >20+</span
+                            >
+                        </a>
+                    </li>
+                    <li>
+                        <a
+                            href="#"
+                            class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-indigo-200 hover:bg-indigo-700 hover:text-white"
+                        >
+                            <svg
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                data-slot="icon"
+                                aria-hidden="true"
+                                class="size-6 shrink-0 text-indigo-200 group-hover:text-white"
+                            >
+                                <path
+                                    d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                />
+                            </svg>
+                            Documents
+                        </a>
+                    </li>
+                    <li>
+                        <a
+                            href="#"
+                            class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-indigo-200 hover:bg-indigo-700 hover:text-white"
+                        >
+                            <svg
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                data-slot="icon"
+                                aria-hidden="true"
+                                class="size-6 shrink-0 text-indigo-200 group-hover:text-white"
+                            >
+                                <path
+                                    d="M10.5 6a7.5 7.5 0 1 0 7.5 7.5h-7.5V6Z"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                />
+                                <path
+                                    d="M13.5 10.5H21A7.5 7.5 0 0 0 13.5 3v7.5Z"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                />
+                            </svg>
+                            Reports
+                        </a>
+                    </li>
+                </ul>
+            </li>
+            <li>
+                <div class="text-xs/6 font-semibold text-indigo-200">
+                    Your teams
+                </div>
+                <ul role="list" class="-mx-2 mt-2 space-y-1">
+                    <li>
+                        <!-- Current: "bg-indigo-700 text-white", Default: "text-indigo-200 hover:text-white hover:bg-indigo-700" -->
+                        <a
+                            href="#"
+                            class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-indigo-200 hover:bg-indigo-700 hover:text-white"
+                        >
+                            <span
+                                class="flex size-6 shrink-0 items-center justify-center rounded-lg border border-indigo-400 bg-indigo-500 text-[0.625rem] font-medium text-white"
+                                >H</span
+                            >
+                            <span class="truncate">Heroicons</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a
+                            href="#"
+                            class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-indigo-200 hover:bg-indigo-700 hover:text-white"
+                        >
+                            <span
+                                class="flex size-6 shrink-0 items-center justify-center rounded-lg border border-indigo-400 bg-indigo-500 text-[0.625rem] font-medium text-white"
+                                >T</span
+                            >
+                            <span class="truncate">Tailwind Labs</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a
+                            href="#"
+                            class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-indigo-200 hover:bg-indigo-700 hover:text-white"
+                        >
+                            <span
+                                class="flex size-6 shrink-0 items-center justify-center rounded-lg border border-indigo-400 bg-indigo-500 text-[0.625rem] font-medium text-white"
+                                >W</span
+                            >
+                            <span class="truncate">Workcation</span>
+                        </a>
+                    </li>
+                </ul>
+            </li>
+            <li class="-mx-6 mt-auto">
+                <a
+                    href="#"
+                    class="flex items-center gap-x-4 px-6 py-3 text-sm/6 font-semibold text-white hover:bg-indigo-700"
+                >
+                    <img
+                        src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                        alt=""
+                        class="size-8 rounded-full bg-indigo-700"
+                    />
+                    <span class="sr-only">Your profile</span>
+                    <span aria-hidden="true">Tom Cook</span>
+                </a>
+            </li>
+        </ul>
+    </nav>
+</div>
diff --git a/application_ui/navigation/sidebar_navigation/dark.html b/application_ui/navigation/sidebar_navigation/dark.html
new file mode 100644
index 0000000..aa9b6a5
--- /dev/null
+++ b/application_ui/navigation/sidebar_navigation/dark.html
@@ -0,0 +1,234 @@
+<div class="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6">
+    <div class="flex h-16 shrink-0 items-center">
+        <img
+            src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500"
+            alt="Your Company"
+            class="h-8 w-auto"
+        />
+    </div>
+    <nav class="flex flex-1 flex-col">
+        <ul role="list" class="flex flex-1 flex-col gap-y-7">
+            <li>
+                <ul role="list" class="-mx-2 space-y-1">
+                    <li>
+                        <!-- Current: "bg-gray-800 text-white", Default: "text-gray-400 hover:text-white hover:bg-gray-800" -->
+                        <a
+                            href="#"
+                            class="group flex gap-x-3 rounded-md bg-gray-800 p-2 text-sm/6 font-semibold text-white"
+                        >
+                            <svg
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                data-slot="icon"
+                                aria-hidden="true"
+                                class="size-6 shrink-0"
+                            >
+                                <path
+                                    d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                />
+                            </svg>
+                            Dashboard
+                            <span
+                                aria-hidden="true"
+                                class="ml-auto w-9 min-w-max rounded-full bg-gray-900 px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-white ring-1 ring-gray-700 ring-inset"
+                                >5</span
+                            >
+                        </a>
+                    </li>
+                    <li>
+                        <a
+                            href="#"
+                            class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-400 hover:bg-gray-800 hover:text-white"
+                        >
+                            <svg
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                data-slot="icon"
+                                aria-hidden="true"
+                                class="size-6 shrink-0"
+                            >
+                                <path
+                                    d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                />
+                            </svg>
+                            Team
+                        </a>
+                    </li>
+                    <li>
+                        <a
+                            href="#"
+                            class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-400 hover:bg-gray-800 hover:text-white"
+                        >
+                            <svg
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                data-slot="icon"
+                                aria-hidden="true"
+                                class="size-6 shrink-0"
+                            >
+                                <path
+                                    d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                />
+                            </svg>
+                            Projects
+                            <span
+                                aria-hidden="true"
+                                class="ml-auto w-9 min-w-max rounded-full bg-gray-900 px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-white ring-1 ring-gray-700 ring-inset"
+                                >12</span
+                            >
+                        </a>
+                    </li>
+                    <li>
+                        <a
+                            href="#"
+                            class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-400 hover:bg-gray-800 hover:text-white"
+                        >
+                            <svg
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                data-slot="icon"
+                                aria-hidden="true"
+                                class="size-6 shrink-0"
+                            >
+                                <path
+                                    d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                />
+                            </svg>
+                            Calendar
+                            <span
+                                aria-hidden="true"
+                                class="ml-auto w-9 min-w-max rounded-full bg-gray-900 px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-white ring-1 ring-gray-700 ring-inset"
+                                >20+</span
+                            >
+                        </a>
+                    </li>
+                    <li>
+                        <a
+                            href="#"
+                            class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-400 hover:bg-gray-800 hover:text-white"
+                        >
+                            <svg
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                data-slot="icon"
+                                aria-hidden="true"
+                                class="size-6 shrink-0"
+                            >
+                                <path
+                                    d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                />
+                            </svg>
+                            Documents
+                        </a>
+                    </li>
+                    <li>
+                        <a
+                            href="#"
+                            class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-400 hover:bg-gray-800 hover:text-white"
+                        >
+                            <svg
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                data-slot="icon"
+                                aria-hidden="true"
+                                class="size-6 shrink-0"
+                            >
+                                <path
+                                    d="M10.5 6a7.5 7.5 0 1 0 7.5 7.5h-7.5V6Z"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                />
+                                <path
+                                    d="M13.5 10.5H21A7.5 7.5 0 0 0 13.5 3v7.5Z"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                />
+                            </svg>
+                            Reports
+                        </a>
+                    </li>
+                </ul>
+            </li>
+            <li>
+                <div class="text-xs/6 font-semibold text-gray-400">
+                    Your teams
+                </div>
+                <ul role="list" class="-mx-2 mt-2 space-y-1">
+                    <li>
+                        <!-- Current: "bg-gray-800 text-white", Default: "text-gray-400 hover:text-white hover:bg-gray-800" -->
+                        <a
+                            href="#"
+                            class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-400 hover:bg-gray-800 hover:text-white"
+                        >
+                            <span
+                                class="flex size-6 shrink-0 items-center justify-center rounded-lg border border-gray-700 bg-gray-800 text-[0.625rem] font-medium text-gray-400 group-hover:text-white"
+                                >H</span
+                            >
+                            <span class="truncate">Heroicons</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a
+                            href="#"
+                            class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-400 hover:bg-gray-800 hover:text-white"
+                        >
+                            <span
+                                class="flex size-6 shrink-0 items-center justify-center rounded-lg border border-gray-700 bg-gray-800 text-[0.625rem] font-medium text-gray-400 group-hover:text-white"
+                                >T</span
+                            >
+                            <span class="truncate">Tailwind Labs</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a
+                            href="#"
+                            class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-400 hover:bg-gray-800 hover:text-white"
+                        >
+                            <span
+                                class="flex size-6 shrink-0 items-center justify-center rounded-lg border border-gray-700 bg-gray-800 text-[0.625rem] font-medium text-gray-400 group-hover:text-white"
+                                >W</span
+                            >
+                            <span class="truncate">Workcation</span>
+                        </a>
+                    </li>
+                </ul>
+            </li>
+            <li class="-mx-6 mt-auto">
+                <a
+                    href="#"
+                    class="flex items-center gap-x-4 px-6 py-3 text-sm/6 font-semibold text-white hover:bg-gray-800"
+                >
+                    <img
+                        src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                        alt=""
+                        class="size-8 rounded-full bg-gray-800"
+                    />
+                    <span class="sr-only">Your profile</span>
+                    <span aria-hidden="true">Tom Cook</span>
+                </a>
+            </li>
+        </ul>
+    </nav>
+</div>
diff --git a/application_ui/navigation/sidebar_navigation/light.html b/application_ui/navigation/sidebar_navigation/light.html
new file mode 100644
index 0000000..8dd234a
--- /dev/null
+++ b/application_ui/navigation/sidebar_navigation/light.html
@@ -0,0 +1,236 @@
+<div
+    class="flex grow flex-col gap-y-5 overflow-y-auto border-r border-gray-200 bg-white px-6"
+>
+    <div class="flex h-16 shrink-0 items-center">
+        <img
+            src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
+            alt="Your Company"
+            class="h-8 w-auto"
+        />
+    </div>
+    <nav class="flex flex-1 flex-col">
+        <ul role="list" class="flex flex-1 flex-col gap-y-7">
+            <li>
+                <ul role="list" class="-mx-2 space-y-1">
+                    <li>
+                        <!-- Current: "bg-gray-50 text-indigo-600", Default: "text-gray-700 hover:text-indigo-600 hover:bg-gray-50" -->
+                        <a
+                            href="#"
+                            class="group flex gap-x-3 rounded-md bg-gray-50 p-2 text-sm/6 font-semibold text-indigo-600"
+                        >
+                            <svg
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                data-slot="icon"
+                                aria-hidden="true"
+                                class="size-6 shrink-0 text-indigo-600"
+                            >
+                                <path
+                                    d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                />
+                            </svg>
+                            Dashboard
+                            <span
+                                aria-hidden="true"
+                                class="ml-auto w-9 min-w-max rounded-full bg-white px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-gray-600 ring-1 ring-gray-200 ring-inset"
+                                >5</span
+                            >
+                        </a>
+                    </li>
+                    <li>
+                        <a
+                            href="#"
+                            class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
+                        >
+                            <svg
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                data-slot="icon"
+                                aria-hidden="true"
+                                class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
+                            >
+                                <path
+                                    d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                />
+                            </svg>
+                            Team
+                        </a>
+                    </li>
+                    <li>
+                        <a
+                            href="#"
+                            class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
+                        >
+                            <svg
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                data-slot="icon"
+                                aria-hidden="true"
+                                class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
+                            >
+                                <path
+                                    d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                />
+                            </svg>
+                            Projects
+                            <span
+                                aria-hidden="true"
+                                class="ml-auto w-9 min-w-max rounded-full bg-white px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-gray-600 ring-1 ring-gray-200 ring-inset"
+                                >12</span
+                            >
+                        </a>
+                    </li>
+                    <li>
+                        <a
+                            href="#"
+                            class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
+                        >
+                            <svg
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                data-slot="icon"
+                                aria-hidden="true"
+                                class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
+                            >
+                                <path
+                                    d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                />
+                            </svg>
+                            Calendar
+                            <span
+                                aria-hidden="true"
+                                class="ml-auto w-9 min-w-max rounded-full bg-white px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-gray-600 ring-1 ring-gray-200 ring-inset"
+                                >20+</span
+                            >
+                        </a>
+                    </li>
+                    <li>
+                        <a
+                            href="#"
+                            class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
+                        >
+                            <svg
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                data-slot="icon"
+                                aria-hidden="true"
+                                class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
+                            >
+                                <path
+                                    d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                />
+                            </svg>
+                            Documents
+                        </a>
+                    </li>
+                    <li>
+                        <a
+                            href="#"
+                            class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
+                        >
+                            <svg
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                data-slot="icon"
+                                aria-hidden="true"
+                                class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
+                            >
+                                <path
+                                    d="M10.5 6a7.5 7.5 0 1 0 7.5 7.5h-7.5V6Z"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                />
+                                <path
+                                    d="M13.5 10.5H21A7.5 7.5 0 0 0 13.5 3v7.5Z"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                />
+                            </svg>
+                            Reports
+                        </a>
+                    </li>
+                </ul>
+            </li>
+            <li>
+                <div class="text-xs/6 font-semibold text-gray-400">
+                    Your teams
+                </div>
+                <ul role="list" class="-mx-2 mt-2 space-y-1">
+                    <li>
+                        <!-- Current: "bg-gray-50 text-indigo-600", Default: "text-gray-700 hover:text-indigo-600 hover:bg-gray-50" -->
+                        <a
+                            href="#"
+                            class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
+                        >
+                            <span
+                                class="flex size-6 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-white text-[0.625rem] font-medium text-gray-400 group-hover:border-indigo-600 group-hover:text-indigo-600"
+                                >H</span
+                            >
+                            <span class="truncate">Heroicons</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a
+                            href="#"
+                            class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
+                        >
+                            <span
+                                class="flex size-6 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-white text-[0.625rem] font-medium text-gray-400 group-hover:border-indigo-600 group-hover:text-indigo-600"
+                                >T</span
+                            >
+                            <span class="truncate">Tailwind Labs</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a
+                            href="#"
+                            class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
+                        >
+                            <span
+                                class="flex size-6 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-white text-[0.625rem] font-medium text-gray-400 group-hover:border-indigo-600 group-hover:text-indigo-600"
+                                >W</span
+                            >
+                            <span class="truncate">Workcation</span>
+                        </a>
+                    </li>
+                </ul>
+            </li>
+            <li class="-mx-6 mt-auto">
+                <a
+                    href="#"
+                    class="flex items-center gap-x-4 px-6 py-3 text-sm/6 font-semibold text-gray-900 hover:bg-gray-50"
+                >
+                    <img
+                        src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                        alt=""
+                        class="size-8 rounded-full bg-gray-50"
+                    />
+                    <span class="sr-only">Your profile</span>
+                    <span aria-hidden="true">Tom Cook</span>
+                </a>
+            </li>
+        </ul>
+    </nav>
+</div>
diff --git a/application_ui/navigation/sidebar_navigation/with_expandable_sections.html b/application_ui/navigation/sidebar_navigation/with_expandable_sections.html
new file mode 100644
index 0000000..a91798c
--- /dev/null
+++ b/application_ui/navigation/sidebar_navigation/with_expandable_sections.html
@@ -0,0 +1,167 @@
+<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
+<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
+<div
+    class="flex grow flex-col gap-y-5 overflow-y-auto border-r border-gray-200 bg-white px-6"
+>
+    <div class="flex h-16 shrink-0 items-center">
+        <img
+            src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
+            alt="Your Company"
+            class="h-8 w-auto"
+        />
+    </div>
+    <nav class="flex flex-1 flex-col">
+        <ul role="list" class="flex flex-1 flex-col gap-y-7">
+            <li>
+                <ul role="list" class="-mx-2 space-y-1">
+                    <li>
+                        <!-- Current: "bg-gray-50", Default: "hover:bg-gray-50" -->
+                        <a
+                            href="#"
+                            class="block rounded-md bg-gray-50 py-2 pr-2 pl-10 text-sm/6 font-semibold text-gray-700"
+                            >Dashboard</a
+                        >
+                    </li>
+                    <li>
+                        <button
+                            type="button"
+                            command="--toggle"
+                            commandfor="sub-menu-1"
+                            class="flex w-full items-center gap-x-3 rounded-md p-2 text-left text-sm/6 font-semibold text-gray-700 hover:bg-gray-50"
+                        >
+                            <svg
+                                viewBox="0 0 20 20"
+                                fill="currentColor"
+                                data-slot="icon"
+                                aria-hidden="true"
+                                class="size-5 shrink-0 not-in-aria-expanded:text-gray-400 in-aria-expanded:rotate-90 in-aria-expanded:text-gray-500"
+                            >
+                                <path
+                                    d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                                    clip-rule="evenodd"
+                                    fill-rule="evenodd"
+                                />
+                            </svg>
+                            Teams
+                        </button>
+                        <el-disclosure id="sub-menu-1" hidden class="contents">
+                            <ul class="mt-1 px-2">
+                                <li>
+                                    <a
+                                        href="#"
+                                        class="block rounded-md py-2 pr-2 pl-9 text-sm/6 text-gray-700 hover:bg-gray-50"
+                                        >Engineering</a
+                                    >
+                                </li>
+                                <li>
+                                    <a
+                                        href="#"
+                                        class="block rounded-md py-2 pr-2 pl-9 text-sm/6 text-gray-700 hover:bg-gray-50"
+                                        >Human Resources</a
+                                    >
+                                </li>
+                                <li>
+                                    <a
+                                        href="#"
+                                        class="block rounded-md py-2 pr-2 pl-9 text-sm/6 text-gray-700 hover:bg-gray-50"
+                                        >Customer Success</a
+                                    >
+                                </li>
+                            </ul>
+                        </el-disclosure>
+                    </li>
+                    <li>
+                        <button
+                            type="button"
+                            command="--toggle"
+                            commandfor="sub-menu-2"
+                            class="flex w-full items-center gap-x-3 rounded-md p-2 text-left text-sm/6 font-semibold text-gray-700 hover:bg-gray-50"
+                        >
+                            <svg
+                                viewBox="0 0 20 20"
+                                fill="currentColor"
+                                data-slot="icon"
+                                aria-hidden="true"
+                                class="size-5 shrink-0 not-in-aria-expanded:text-gray-400 in-aria-expanded:rotate-90 in-aria-expanded:text-gray-500"
+                            >
+                                <path
+                                    d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                                    clip-rule="evenodd"
+                                    fill-rule="evenodd"
+                                />
+                            </svg>
+                            Projects
+                        </button>
+                        <el-disclosure id="sub-menu-2" hidden class="contents">
+                            <ul class="mt-1 px-2">
+                                <li>
+                                    <a
+                                        href="#"
+                                        class="block rounded-md py-2 pr-2 pl-9 text-sm/6 text-gray-700 hover:bg-gray-50"
+                                        >GraphQL API</a
+                                    >
+                                </li>
+                                <li>
+                                    <a
+                                        href="#"
+                                        class="block rounded-md py-2 pr-2 pl-9 text-sm/6 text-gray-700 hover:bg-gray-50"
+                                        >iOS App</a
+                                    >
+                                </li>
+                                <li>
+                                    <a
+                                        href="#"
+                                        class="block rounded-md py-2 pr-2 pl-9 text-sm/6 text-gray-700 hover:bg-gray-50"
+                                        >Android App</a
+                                    >
+                                </li>
+                                <li>
+                                    <a
+                                        href="#"
+                                        class="block rounded-md py-2 pr-2 pl-9 text-sm/6 text-gray-700 hover:bg-gray-50"
+                                        >New Customer Portal</a
+                                    >
+                                </li>
+                            </ul>
+                        </el-disclosure>
+                    </li>
+                    <li>
+                        <a
+                            href="#"
+                            class="block rounded-md py-2 pr-2 pl-10 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50"
+                            >Calendar</a
+                        >
+                    </li>
+                    <li>
+                        <a
+                            href="#"
+                            class="block rounded-md py-2 pr-2 pl-10 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50"
+                            >Documents</a
+                        >
+                    </li>
+                    <li>
+                        <a
+                            href="#"
+                            class="block rounded-md py-2 pr-2 pl-10 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50"
+                            >Reports</a
+                        >
+                    </li>
+                </ul>
+            </li>
+            <li class="-mx-6 mt-auto">
+                <a
+                    href="#"
+                    class="flex items-center gap-x-4 px-6 py-3 text-sm/6 font-semibold text-gray-900 hover:bg-gray-50"
+                >
+                    <img
+                        src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                        alt=""
+                        class="size-8 rounded-full bg-gray-50"
+                    />
+                    <span class="sr-only">Your profile</span>
+                    <span aria-hidden="true">Tom Cook</span>
+                </a>
+            </li>
+        </ul>
+    </nav>
+</div>
diff --git a/application_ui/navigation/sidebar_navigation/with_secondary_navigation.html b/application_ui/navigation/sidebar_navigation/with_secondary_navigation.html
new file mode 100644
index 0000000..788ea41
--- /dev/null
+++ b/application_ui/navigation/sidebar_navigation/with_secondary_navigation.html
@@ -0,0 +1,273 @@
+<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
+<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
+<div
+    class="flex grow flex-col gap-y-5 overflow-y-auto border-r border-gray-200 bg-white px-6"
+>
+    <div class="flex h-16 shrink-0 items-center">
+        <img
+            src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
+            alt="Your Company"
+            class="h-8 w-auto"
+        />
+    </div>
+    <nav class="flex flex-1 flex-col">
+        <ul role="list" class="flex flex-1 flex-col gap-y-7">
+            <li>
+                <ul role="list" class="-mx-2 space-y-1">
+                    <li>
+                        <!-- Current: "bg-gray-50", Default: "hover:bg-gray-50" -->
+                        <a
+                            href="#"
+                            class="group flex gap-x-3 rounded-md bg-gray-50 p-2 text-sm/6 font-semibold text-gray-700"
+                        >
+                            <svg
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                data-slot="icon"
+                                aria-hidden="true"
+                                class="size-6 shrink-0 text-gray-400"
+                            >
+                                <path
+                                    d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                />
+                            </svg>
+                            Dashboard
+                        </a>
+                    </li>
+                    <li>
+                        <button
+                            type="button"
+                            command="--toggle"
+                            commandfor="sub-menu-1"
+                            class="flex w-full items-center gap-x-3 rounded-md p-2 text-left text-sm/6 font-semibold text-gray-700 hover:bg-gray-50"
+                        >
+                            <svg
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                data-slot="icon"
+                                aria-hidden="true"
+                                class="size-6 shrink-0 text-gray-400"
+                            >
+                                <path
+                                    d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                />
+                            </svg>
+                            Teams
+                            <svg
+                                viewBox="0 0 20 20"
+                                fill="currentColor"
+                                data-slot="icon"
+                                aria-hidden="true"
+                                class="ml-auto size-5 shrink-0 not-in-aria-expanded:text-gray-400 in-aria-expanded:rotate-90 in-aria-expanded:text-gray-500"
+                            >
+                                <path
+                                    d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                                    clip-rule="evenodd"
+                                    fill-rule="evenodd"
+                                />
+                            </svg>
+                        </button>
+                        <el-disclosure id="sub-menu-1" hidden class="contents">
+                            <ul class="mt-1 px-2">
+                                <li>
+                                    <!-- 44px -->
+                                    <a
+                                        href="#"
+                                        class="block rounded-md py-2 pr-2 pl-9 text-sm/6 text-gray-700 hover:bg-gray-50"
+                                        >Engineering</a
+                                    >
+                                </li>
+                                <li>
+                                    <!-- 44px -->
+                                    <a
+                                        href="#"
+                                        class="block rounded-md py-2 pr-2 pl-9 text-sm/6 text-gray-700 hover:bg-gray-50"
+                                        >Human Resources</a
+                                    >
+                                </li>
+                                <li>
+                                    <!-- 44px -->
+                                    <a
+                                        href="#"
+                                        class="block rounded-md py-2 pr-2 pl-9 text-sm/6 text-gray-700 hover:bg-gray-50"
+                                        >Customer Success</a
+                                    >
+                                </li>
+                            </ul>
+                        </el-disclosure>
+                    </li>
+                    <li>
+                        <button
+                            type="button"
+                            command="--toggle"
+                            commandfor="sub-menu-2"
+                            class="flex w-full items-center gap-x-3 rounded-md p-2 text-left text-sm/6 font-semibold text-gray-700 hover:bg-gray-50"
+                        >
+                            <svg
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                data-slot="icon"
+                                aria-hidden="true"
+                                class="size-6 shrink-0 text-gray-400"
+                            >
+                                <path
+                                    d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                />
+                            </svg>
+                            Projects
+                            <svg
+                                viewBox="0 0 20 20"
+                                fill="currentColor"
+                                data-slot="icon"
+                                aria-hidden="true"
+                                class="ml-auto size-5 shrink-0 not-in-aria-expanded:text-gray-400 in-aria-expanded:rotate-90 in-aria-expanded:text-gray-500"
+                            >
+                                <path
+                                    d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                                    clip-rule="evenodd"
+                                    fill-rule="evenodd"
+                                />
+                            </svg>
+                        </button>
+                        <el-disclosure id="sub-menu-2" hidden class="contents">
+                            <ul class="mt-1 px-2">
+                                <li>
+                                    <!-- 44px -->
+                                    <a
+                                        href="#"
+                                        class="block rounded-md py-2 pr-2 pl-9 text-sm/6 text-gray-700 hover:bg-gray-50"
+                                        >GraphQL API</a
+                                    >
+                                </li>
+                                <li>
+                                    <!-- 44px -->
+                                    <a
+                                        href="#"
+                                        class="block rounded-md py-2 pr-2 pl-9 text-sm/6 text-gray-700 hover:bg-gray-50"
+                                        >iOS App</a
+                                    >
+                                </li>
+                                <li>
+                                    <!-- 44px -->
+                                    <a
+                                        href="#"
+                                        class="block rounded-md py-2 pr-2 pl-9 text-sm/6 text-gray-700 hover:bg-gray-50"
+                                        >Android App</a
+                                    >
+                                </li>
+                                <li>
+                                    <!-- 44px -->
+                                    <a
+                                        href="#"
+                                        class="block rounded-md py-2 pr-2 pl-9 text-sm/6 text-gray-700 hover:bg-gray-50"
+                                        >New Customer Portal</a
+                                    >
+                                </li>
+                            </ul>
+                        </el-disclosure>
+                    </li>
+                    <li>
+                        <a
+                            href="#"
+                            class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50"
+                        >
+                            <svg
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                data-slot="icon"
+                                aria-hidden="true"
+                                class="size-6 shrink-0 text-gray-400"
+                            >
+                                <path
+                                    d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                />
+                            </svg>
+                            Calendar
+                        </a>
+                    </li>
+                    <li>
+                        <a
+                            href="#"
+                            class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50"
+                        >
+                            <svg
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                data-slot="icon"
+                                aria-hidden="true"
+                                class="size-6 shrink-0 text-gray-400"
+                            >
+                                <path
+                                    d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                />
+                            </svg>
+                            Documents
+                        </a>
+                    </li>
+                    <li>
+                        <a
+                            href="#"
+                            class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50"
+                        >
+                            <svg
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                data-slot="icon"
+                                aria-hidden="true"
+                                class="size-6 shrink-0 text-gray-400"
+                            >
+                                <path
+                                    d="M10.5 6a7.5 7.5 0 1 0 7.5 7.5h-7.5V6Z"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                />
+                                <path
+                                    d="M13.5 10.5H21A7.5 7.5 0 0 0 13.5 3v7.5Z"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                />
+                            </svg>
+                            Reports
+                        </a>
+                    </li>
+                </ul>
+            </li>
+            <li class="-mx-6 mt-auto">
+                <a
+                    href="#"
+                    class="flex items-center gap-x-4 px-6 py-3 text-sm/6 font-semibold text-gray-900 hover:bg-gray-50"
+                >
+                    <img
+                        src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                        alt=""
+                        class="size-8 rounded-full bg-gray-50"
+                    />
+                    <span class="sr-only">Your profile</span>
+                    <span aria-hidden="true">Tom Cook</span>
+                </a>
+            </li>
+        </ul>
+    </nav>
+</div>
diff --git a/application_ui/navigation/tabs/bar_with_underline.html b/application_ui/navigation/tabs/bar_with_underline.html
new file mode 100644
index 0000000..a229bbd
--- /dev/null
+++ b/application_ui/navigation/tabs/bar_with_underline.html
@@ -0,0 +1,76 @@
+<div>
+    <div class="grid grid-cols-1 sm:hidden">
+        <!-- Use an "onChange" listener to redirect the user to the selected tab URL. -->
+        <select
+            aria-label="Select a tab"
+            class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-2 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600"
+        >
+            <option>My Account</option>
+            <option>Company</option>
+            <option selected>Team Members</option>
+            <option>Billing</option>
+        </select>
+        <svg
+            viewBox="0 0 16 16"
+            fill="currentColor"
+            data-slot="icon"
+            aria-hidden="true"
+            class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end fill-gray-500"
+        >
+            <path
+                d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
+                clip-rule="evenodd"
+                fill-rule="evenodd"
+            />
+        </svg>
+    </div>
+    <div class="hidden sm:block">
+        <nav
+            aria-label="Tabs"
+            class="isolate flex divide-x divide-gray-200 rounded-lg shadow-sm"
+        >
+            <!-- Current: "text-gray-900", Default: "text-gray-500 hover:text-gray-700" -->
+            <a
+                href="#"
+                class="group relative min-w-0 flex-1 overflow-hidden rounded-l-lg bg-white px-4 py-4 text-center text-sm font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-700 focus:z-10"
+            >
+                <span>My Account</span>
+                <span
+                    aria-hidden="true"
+                    class="absolute inset-x-0 bottom-0 h-0.5 bg-transparent"
+                ></span>
+            </a>
+            <a
+                href="#"
+                class="group relative min-w-0 flex-1 overflow-hidden bg-white px-4 py-4 text-center text-sm font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-700 focus:z-10"
+            >
+                <span>Company</span>
+                <span
+                    aria-hidden="true"
+                    class="absolute inset-x-0 bottom-0 h-0.5 bg-transparent"
+                ></span>
+            </a>
+            <a
+                href="#"
+                aria-current="page"
+                class="group relative min-w-0 flex-1 overflow-hidden bg-white px-4 py-4 text-center text-sm font-medium text-gray-900 hover:bg-gray-50 focus:z-10"
+            >
+                <span>Team Members</span>
+                <span
+                    aria-hidden="true"
+                    class="absolute inset-x-0 bottom-0 h-0.5 bg-indigo-500"
+                ></span>
+            </a>
+            <a
+                href="#"
+                class="group relative min-w-0 flex-1 overflow-hidden rounded-r-lg bg-white px-4 py-4 text-center text-sm font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-700 focus:z-10"
+            >
+                <span>Billing</span>
+                <span
+                    aria-hidden="true"
+                    class="absolute inset-x-0 bottom-0 h-0.5 bg-transparent"
+                ></span>
+            </a>
+        </nav>
+    </div>
+</div>
diff --git a/application_ui/navigation/tabs/full_width_tabs_with_underline.html b/application_ui/navigation/tabs/full_width_tabs_with_underline.html
new file mode 100644
index 0000000..0c7cedd
--- /dev/null
+++ b/application_ui/navigation/tabs/full_width_tabs_with_underline.html
@@ -0,0 +1,55 @@
+<div>
+    <div class="grid grid-cols-1 sm:hidden">
+        <!-- Use an "onChange" listener to redirect the user to the selected tab URL. -->
+        <select
+            aria-label="Select a tab"
+            class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-2 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600"
+        >
+            <option>My Account</option>
+            <option>Company</option>
+            <option selected>Team Members</option>
+            <option>Billing</option>
+        </select>
+        <svg
+            viewBox="0 0 16 16"
+            fill="currentColor"
+            data-slot="icon"
+            aria-hidden="true"
+            class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end fill-gray-500"
+        >
+            <path
+                d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
+                clip-rule="evenodd"
+                fill-rule="evenodd"
+            />
+        </svg>
+    </div>
+    <div class="hidden sm:block">
+        <div class="border-b border-gray-200">
+            <nav aria-label="Tabs" class="-mb-px flex">
+                <!-- Current: "border-indigo-500 text-indigo-600", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
+                <a
+                    href="#"
+                    class="w-1/4 border-b-2 border-transparent px-1 py-4 text-center text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
+                    >My Account</a
+                >
+                <a
+                    href="#"
+                    class="w-1/4 border-b-2 border-transparent px-1 py-4 text-center text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
+                    >Company</a
+                >
+                <a
+                    href="#"
+                    aria-current="page"
+                    class="w-1/4 border-b-2 border-indigo-500 px-1 py-4 text-center text-sm font-medium text-indigo-600"
+                    >Team Members</a
+                >
+                <a
+                    href="#"
+                    class="w-1/4 border-b-2 border-transparent px-1 py-4 text-center text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
+                    >Billing</a
+                >
+            </nav>
+        </div>
+    </div>
+</div>
diff --git a/application_ui/navigation/tabs/simple_on_dark.html b/application_ui/navigation/tabs/simple_on_dark.html
new file mode 100644
index 0000000..9090680
--- /dev/null
+++ b/application_ui/navigation/tabs/simple_on_dark.html
@@ -0,0 +1,50 @@
+<div class="bg-gray-900 px-4 py-6 sm:px-6 lg:px-8">
+    <div class="mx-auto max-w-7xl">
+        <div class="grid grid-cols-1 sm:hidden">
+            <!-- Use an "onChange" listener to redirect the user to the selected tab URL. -->
+            <select
+                aria-label="Select a tab"
+                class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white/5 py-2 pr-8 pl-3 text-base text-white outline-1 -outline-offset-1 outline-white/10 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-500"
+            >
+                <option>My Account</option>
+                <option>Company</option>
+                <option selected>Team Members</option>
+                <option>Billing</option>
+            </select>
+            <svg
+                viewBox="0 0 16 16"
+                fill="currentColor"
+                data-slot="icon"
+                aria-hidden="true"
+                class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end fill-gray-400"
+            >
+                <path
+                    d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
+                    clip-rule="evenodd"
+                    fill-rule="evenodd"
+                />
+            </svg>
+        </div>
+        <div class="hidden sm:block">
+            <nav class="flex border-b border-white/10 py-4">
+                <ul
+                    role="list"
+                    class="flex min-w-full flex-none gap-x-8 px-2 text-sm/6 font-semibold text-gray-400"
+                >
+                    <li>
+                        <a href="#" class="">My Account</a>
+                    </li>
+                    <li>
+                        <a href="#" class="">Company</a>
+                    </li>
+                    <li>
+                        <a href="#" class="text-indigo-400">Team Members</a>
+                    </li>
+                    <li>
+                        <a href="#" class="">Billing</a>
+                    </li>
+                </ul>
+            </nav>
+        </div>
+    </div>
+</div>
diff --git a/application_ui/navigation/tabs/tabs_in_pills.html b/application_ui/navigation/tabs/tabs_in_pills.html
new file mode 100644
index 0000000..5261d6f
--- /dev/null
+++ b/application_ui/navigation/tabs/tabs_in_pills.html
@@ -0,0 +1,53 @@
+<div>
+    <div class="grid grid-cols-1 sm:hidden">
+        <!-- Use an "onChange" listener to redirect the user to the selected tab URL. -->
+        <select
+            aria-label="Select a tab"
+            class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-2 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600"
+        >
+            <option>My Account</option>
+            <option>Company</option>
+            <option selected>Team Members</option>
+            <option>Billing</option>
+        </select>
+        <svg
+            viewBox="0 0 16 16"
+            fill="currentColor"
+            data-slot="icon"
+            aria-hidden="true"
+            class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end fill-gray-500"
+        >
+            <path
+                d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
+                clip-rule="evenodd"
+                fill-rule="evenodd"
+            />
+        </svg>
+    </div>
+    <div class="hidden sm:block">
+        <nav aria-label="Tabs" class="flex space-x-4">
+            <!-- Current: "bg-gray-100 text-gray-700", Default: "text-gray-500 hover:text-gray-700" -->
+            <a
+                href="#"
+                class="rounded-md px-3 py-2 text-sm font-medium text-gray-500 hover:text-gray-700"
+                >My Account</a
+            >
+            <a
+                href="#"
+                class="rounded-md px-3 py-2 text-sm font-medium text-gray-500 hover:text-gray-700"
+                >Company</a
+            >
+            <a
+                href="#"
+                aria-current="page"
+                class="rounded-md bg-gray-100 px-3 py-2 text-sm font-medium text-gray-700"
+                >Team Members</a
+            >
+            <a
+                href="#"
+                class="rounded-md px-3 py-2 text-sm font-medium text-gray-500 hover:text-gray-700"
+                >Billing</a
+            >
+        </nav>
+    </div>
+</div>
diff --git a/application_ui/navigation/tabs/tabs_in_pills_on_gray.html b/application_ui/navigation/tabs/tabs_in_pills_on_gray.html
new file mode 100644
index 0000000..f6636c9
--- /dev/null
+++ b/application_ui/navigation/tabs/tabs_in_pills_on_gray.html
@@ -0,0 +1,53 @@
+<div>
+    <div class="grid grid-cols-1 sm:hidden">
+        <!-- Use an "onChange" listener to redirect the user to the selected tab URL. -->
+        <select
+            aria-label="Select a tab"
+            class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-2 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600"
+        >
+            <option>My Account</option>
+            <option>Company</option>
+            <option selected>Team Members</option>
+            <option>Billing</option>
+        </select>
+        <svg
+            viewBox="0 0 16 16"
+            fill="currentColor"
+            data-slot="icon"
+            aria-hidden="true"
+            class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end fill-gray-500"
+        >
+            <path
+                d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
+                clip-rule="evenodd"
+                fill-rule="evenodd"
+            />
+        </svg>
+    </div>
+    <div class="hidden sm:block">
+        <nav aria-label="Tabs" class="flex space-x-4">
+            <!-- Current: "bg-gray-200 text-gray-800", Default: "text-gray-600 hover:text-gray-800" -->
+            <a
+                href="#"
+                class="rounded-md px-3 py-2 text-sm font-medium text-gray-600 hover:text-gray-800"
+                >My Account</a
+            >
+            <a
+                href="#"
+                class="rounded-md px-3 py-2 text-sm font-medium text-gray-600 hover:text-gray-800"
+                >Company</a
+            >
+            <a
+                href="#"
+                aria-current="page"
+                class="rounded-md bg-gray-200 px-3 py-2 text-sm font-medium text-gray-800"
+                >Team Members</a
+            >
+            <a
+                href="#"
+                class="rounded-md px-3 py-2 text-sm font-medium text-gray-600 hover:text-gray-800"
+                >Billing</a
+            >
+        </nav>
+    </div>
+</div>
diff --git a/application_ui/navigation/tabs/tabs_in_pills_with_brand_color.html b/application_ui/navigation/tabs/tabs_in_pills_with_brand_color.html
new file mode 100644
index 0000000..81ae57a
--- /dev/null
+++ b/application_ui/navigation/tabs/tabs_in_pills_with_brand_color.html
@@ -0,0 +1,53 @@
+<div>
+    <div class="grid grid-cols-1 sm:hidden">
+        <!-- Use an "onChange" listener to redirect the user to the selected tab URL. -->
+        <select
+            aria-label="Select a tab"
+            class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-2 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600"
+        >
+            <option>My Account</option>
+            <option>Company</option>
+            <option selected>Team Members</option>
+            <option>Billing</option>
+        </select>
+        <svg
+            viewBox="0 0 16 16"
+            fill="currentColor"
+            data-slot="icon"
+            aria-hidden="true"
+            class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end fill-gray-500"
+        >
+            <path
+                d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
+                clip-rule="evenodd"
+                fill-rule="evenodd"
+            />
+        </svg>
+    </div>
+    <div class="hidden sm:block">
+        <nav aria-label="Tabs" class="flex space-x-4">
+            <!-- Current: "bg-indigo-100 text-indigo-700", Default: "text-gray-500 hover:text-gray-700" -->
+            <a
+                href="#"
+                class="rounded-md px-3 py-2 text-sm font-medium text-gray-500 hover:text-gray-700"
+                >My Account</a
+            >
+            <a
+                href="#"
+                class="rounded-md px-3 py-2 text-sm font-medium text-gray-500 hover:text-gray-700"
+                >Company</a
+            >
+            <a
+                href="#"
+                aria-current="page"
+                class="rounded-md bg-indigo-100 px-3 py-2 text-sm font-medium text-indigo-700"
+                >Team Members</a
+            >
+            <a
+                href="#"
+                class="rounded-md px-3 py-2 text-sm font-medium text-gray-500 hover:text-gray-700"
+                >Billing</a
+            >
+        </nav>
+    </div>
+</div>
diff --git a/application_ui/navigation/tabs/tabs_with_underline.html b/application_ui/navigation/tabs/tabs_with_underline.html
new file mode 100644
index 0000000..9bfecbd
--- /dev/null
+++ b/application_ui/navigation/tabs/tabs_with_underline.html
@@ -0,0 +1,55 @@
+<div>
+    <div class="grid grid-cols-1 sm:hidden">
+        <!-- Use an "onChange" listener to redirect the user to the selected tab URL. -->
+        <select
+            aria-label="Select a tab"
+            class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-2 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600"
+        >
+            <option>My Account</option>
+            <option>Company</option>
+            <option selected>Team Members</option>
+            <option>Billing</option>
+        </select>
+        <svg
+            viewBox="0 0 16 16"
+            fill="currentColor"
+            data-slot="icon"
+            aria-hidden="true"
+            class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end fill-gray-500"
+        >
+            <path
+                d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
+                clip-rule="evenodd"
+                fill-rule="evenodd"
+            />
+        </svg>
+    </div>
+    <div class="hidden sm:block">
+        <div class="border-b border-gray-200">
+            <nav aria-label="Tabs" class="-mb-px flex space-x-8">
+                <!-- Current: "border-indigo-500 text-indigo-600", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
+                <a
+                    href="#"
+                    class="border-b-2 border-transparent px-1 py-4 text-sm font-medium whitespace-nowrap text-gray-500 hover:border-gray-300 hover:text-gray-700"
+                    >My Account</a
+                >
+                <a
+                    href="#"
+                    class="border-b-2 border-transparent px-1 py-4 text-sm font-medium whitespace-nowrap text-gray-500 hover:border-gray-300 hover:text-gray-700"
+                    >Company</a
+                >
+                <a
+                    href="#"
+                    aria-current="page"
+                    class="border-b-2 border-indigo-500 px-1 py-4 text-sm font-medium whitespace-nowrap text-indigo-600"
+                    >Team Members</a
+                >
+                <a
+                    href="#"
+                    class="border-b-2 border-transparent px-1 py-4 text-sm font-medium whitespace-nowrap text-gray-500 hover:border-gray-300 hover:text-gray-700"
+                    >Billing</a
+                >
+            </nav>
+        </div>
+    </div>
+</div>
diff --git a/application_ui/navigation/tabs/tabs_with_underline_and_badges.html b/application_ui/navigation/tabs/tabs_with_underline_and_badges.html
new file mode 100644
index 0000000..ab9f63e
--- /dev/null
+++ b/application_ui/navigation/tabs/tabs_with_underline_and_badges.html
@@ -0,0 +1,79 @@
+<div>
+    <div class="grid grid-cols-1 sm:hidden">
+        <!-- Use an "onChange" listener to redirect the user to the selected tab URL. -->
+        <select
+            aria-label="Select a tab"
+            class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-2 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600"
+        >
+            <option>Applied</option>
+            <option>Phone Screening</option>
+            <option selected>Interview</option>
+            <option>Offer</option>
+            <option>Disqualified</option>
+        </select>
+        <svg
+            viewBox="0 0 16 16"
+            fill="currentColor"
+            data-slot="icon"
+            aria-hidden="true"
+            class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end fill-gray-500"
+        >
+            <path
+                d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
+                clip-rule="evenodd"
+                fill-rule="evenodd"
+            />
+        </svg>
+    </div>
+    <div class="hidden sm:block">
+        <div class="border-b border-gray-200">
+            <nav aria-label="Tabs" class="-mb-px flex space-x-8">
+                <!-- Current: "border-indigo-500 text-indigo-600", Default: "border-transparent text-gray-500 hover:border-gray-200 hover:text-gray-700" -->
+                <a
+                    href="#"
+                    class="flex border-b-2 border-transparent px-1 py-4 text-sm font-medium whitespace-nowrap text-gray-500 hover:border-gray-200 hover:text-gray-700"
+                >
+                    Applied
+                    <!-- Current: "bg-indigo-100 text-indigo-600", Default: "bg-gray-100 text-gray-900" -->
+                    <span
+                        class="ml-3 hidden rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-900 md:inline-block"
+                        >52</span
+                    >
+                </a>
+                <a
+                    href="#"
+                    class="flex border-b-2 border-transparent px-1 py-4 text-sm font-medium whitespace-nowrap text-gray-500 hover:border-gray-200 hover:text-gray-700"
+                >
+                    Phone Screening
+                    <span
+                        class="ml-3 hidden rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-900 md:inline-block"
+                        >6</span
+                    >
+                </a>
+                <a
+                    href="#"
+                    aria-current="page"
+                    class="flex border-b-2 border-indigo-500 px-1 py-4 text-sm font-medium whitespace-nowrap text-indigo-600"
+                >
+                    Interview
+                    <span
+                        class="ml-3 hidden rounded-full bg-indigo-100 px-2.5 py-0.5 text-xs font-medium text-indigo-600 md:inline-block"
+                        >4</span
+                    >
+                </a>
+                <a
+                    href="#"
+                    class="flex border-b-2 border-transparent px-1 py-4 text-sm font-medium whitespace-nowrap text-gray-500 hover:border-gray-200 hover:text-gray-700"
+                >
+                    Offer
+                </a>
+                <a
+                    href="#"
+                    class="flex border-b-2 border-transparent px-1 py-4 text-sm font-medium whitespace-nowrap text-gray-500 hover:border-gray-200 hover:text-gray-700"
+                >
+                    Disqualified
+                </a>
+            </nav>
+        </div>
+    </div>
+</div>
diff --git a/application_ui/navigation/tabs/tabs_with_underline_and_icons.html b/application_ui/navigation/tabs/tabs_with_underline_and_icons.html
new file mode 100644
index 0000000..49840c0
--- /dev/null
+++ b/application_ui/navigation/tabs/tabs_with_underline_and_icons.html
@@ -0,0 +1,108 @@
+<div>
+    <div class="grid grid-cols-1 sm:hidden">
+        <!-- Use an "onChange" listener to redirect the user to the selected tab URL. -->
+        <select
+            aria-label="Select a tab"
+            class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-2 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600"
+        >
+            <option>My Account</option>
+            <option>Company</option>
+            <option selected>Team Members</option>
+            <option>Billing</option>
+        </select>
+        <svg
+            viewBox="0 0 16 16"
+            fill="currentColor"
+            data-slot="icon"
+            aria-hidden="true"
+            class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end fill-gray-500"
+        >
+            <path
+                d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
+                clip-rule="evenodd"
+                fill-rule="evenodd"
+            />
+        </svg>
+    </div>
+    <div class="hidden sm:block">
+        <div class="border-b border-gray-200">
+            <nav aria-label="Tabs" class="-mb-px flex space-x-8">
+                <!-- Current: "border-indigo-500 text-indigo-600", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
+                <a
+                    href="#"
+                    class="group inline-flex items-center border-b-2 border-transparent px-1 py-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
+                >
+                    <!-- Current: "text-indigo-500", Default: "text-gray-400 group-hover:text-gray-500" -->
+                    <svg
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="mr-2 -ml-0.5 size-5 text-gray-400 group-hover:text-gray-500"
+                    >
+                        <path
+                            d="M10 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM3.465 14.493a1.23 1.23 0 0 0 .41 1.412A9.957 9.957 0 0 0 10 18c2.31 0 4.438-.784 6.131-2.1.43-.333.604-.903.408-1.41a7.002 7.002 0 0 0-13.074.003Z"
+                        />
+                    </svg>
+                    <span>My Account</span>
+                </a>
+                <a
+                    href="#"
+                    class="group inline-flex items-center border-b-2 border-transparent px-1 py-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
+                >
+                    <svg
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="mr-2 -ml-0.5 size-5 text-gray-400 group-hover:text-gray-500"
+                    >
+                        <path
+                            d="M4 16.5v-13h-.25a.75.75 0 0 1 0-1.5h12.5a.75.75 0 0 1 0 1.5H16v13h.25a.75.75 0 0 1 0 1.5h-3.5a.75.75 0 0 1-.75-.75v-2.5a.75.75 0 0 0-.75-.75h-2.5a.75.75 0 0 0-.75.75v2.5a.75.75 0 0 1-.75.75h-3.5a.75.75 0 0 1 0-1.5H4Zm3-11a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1ZM7.5 9a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1ZM11 5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm.5 3.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Z"
+                            clip-rule="evenodd"
+                            fill-rule="evenodd"
+                        />
+                    </svg>
+                    <span>Company</span>
+                </a>
+                <a
+                    href="#"
+                    aria-current="page"
+                    class="group inline-flex items-center border-b-2 border-indigo-500 px-1 py-4 text-sm font-medium text-indigo-600"
+                >
+                    <svg
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="mr-2 -ml-0.5 size-5 text-indigo-500"
+                    >
+                        <path
+                            d="M7 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM14.5 9a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM1.615 16.428a1.224 1.224 0 0 1-.569-1.175 6.002 6.002 0 0 1 11.908 0c.058.467-.172.92-.57 1.174A9.953 9.953 0 0 1 7 18a9.953 9.953 0 0 1-5.385-1.572ZM14.5 16h-.106c.07-.297.088-.611.048-.933a7.47 7.47 0 0 0-1.588-3.755 4.502 4.502 0 0 1 5.874 2.636.818.818 0 0 1-.36.98A7.465 7.465 0 0 1 14.5 16Z"
+                        />
+                    </svg>
+                    <span>Team Members</span>
+                </a>
+                <a
+                    href="#"
+                    class="group inline-flex items-center border-b-2 border-transparent px-1 py-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
+                >
+                    <svg
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="mr-2 -ml-0.5 size-5 text-gray-400 group-hover:text-gray-500"
+                    >
+                        <path
+                            d="M2.5 4A1.5 1.5 0 0 0 1 5.5V6h18v-.5A1.5 1.5 0 0 0 17.5 4h-15ZM19 8.5H1v6A1.5 1.5 0 0 0 2.5 16h15a1.5 1.5 0 0 0 1.5-1.5v-6ZM3 13.25a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 0 1.5h-1.5a.75.75 0 0 1-.75-.75Zm4.75-.75a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5h-3.5Z"
+                            clip-rule="evenodd"
+                            fill-rule="evenodd"
+                        />
+                    </svg>
+                    <span>Billing</span>
+                </a>
+            </nav>
+        </div>
+    </div>
+</div>
diff --git a/application_ui/navigation/vertical_navigation/on_gray.html b/application_ui/navigation/vertical_navigation/on_gray.html
new file mode 100644
index 0000000..aeed261
--- /dev/null
+++ b/application_ui/navigation/vertical_navigation/on_gray.html
@@ -0,0 +1,221 @@
+<nav aria-label="Sidebar" class="flex flex-1 flex-col">
+    <ul role="list" class="flex flex-1 flex-col gap-y-7">
+        <li>
+            <ul role="list" class="-mx-2 space-y-1">
+                <li>
+                    <!-- Current: "bg-gray-100 text-indigo-600", Default: "text-gray-700 hover:text-indigo-600 hover:bg-gray-100" -->
+                    <a
+                        href="#"
+                        class="group flex gap-x-3 rounded-md bg-gray-100 p-2 text-sm/6 font-semibold text-indigo-600"
+                    >
+                        <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="size-6 shrink-0 text-indigo-600"
+                        >
+                            <path
+                                d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                        Dashboard
+                        <span
+                            aria-hidden="true"
+                            class="ml-auto w-9 min-w-max rounded-full bg-gray-50 px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-gray-600 ring-1 ring-gray-200 ring-inset"
+                            >5</span
+                        >
+                    </a>
+                </li>
+                <li>
+                    <a
+                        href="#"
+                        class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-100 hover:text-indigo-600"
+                    >
+                        <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
+                        >
+                            <path
+                                d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                        Team
+                    </a>
+                </li>
+                <li>
+                    <a
+                        href="#"
+                        class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-100 hover:text-indigo-600"
+                    >
+                        <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
+                        >
+                            <path
+                                d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                        Projects
+                        <span
+                            aria-hidden="true"
+                            class="ml-auto w-9 min-w-max rounded-full bg-gray-50 px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-gray-600 ring-1 ring-gray-200 ring-inset"
+                            >12</span
+                        >
+                    </a>
+                </li>
+                <li>
+                    <a
+                        href="#"
+                        class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-100 hover:text-indigo-600"
+                    >
+                        <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
+                        >
+                            <path
+                                d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                        Calendar
+                        <span
+                            aria-hidden="true"
+                            class="ml-auto w-9 min-w-max rounded-full bg-gray-50 px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-gray-600 ring-1 ring-gray-200 ring-inset"
+                            >20+</span
+                        >
+                    </a>
+                </li>
+                <li>
+                    <a
+                        href="#"
+                        class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-100 hover:text-indigo-600"
+                    >
+                        <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
+                        >
+                            <path
+                                d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                        Documents
+                    </a>
+                </li>
+                <li>
+                    <a
+                        href="#"
+                        class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-100 hover:text-indigo-600"
+                    >
+                        <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
+                        >
+                            <path
+                                d="M10.5 6a7.5 7.5 0 1 0 7.5 7.5h-7.5V6Z"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M13.5 10.5H21A7.5 7.5 0 0 0 13.5 3v7.5Z"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                        Reports
+                    </a>
+                </li>
+            </ul>
+        </li>
+        <li>
+            <div class="text-xs/6 font-semibold text-gray-400">Projects</div>
+            <ul role="list" class="-mx-2 mt-2 space-y-1">
+                <li>
+                    <!-- Current: "bg-gray-50 text-indigo-600", Default: "text-gray-700 hover:text-indigo-600 hover:bg-gray-100" -->
+                    <a
+                        href="#"
+                        class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-100 hover:text-indigo-600"
+                    >
+                        <span
+                            class="flex size-6 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-white text-[0.625rem] font-medium text-gray-400 group-hover:border-indigo-600 group-hover:text-indigo-600"
+                            >W</span
+                        >
+                        <span class="truncate">Website redesign</span>
+                    </a>
+                </li>
+                <li>
+                    <a
+                        href="#"
+                        class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-100 hover:text-indigo-600"
+                    >
+                        <span
+                            class="flex size-6 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-white text-[0.625rem] font-medium text-gray-400 group-hover:border-indigo-600 group-hover:text-indigo-600"
+                            >G</span
+                        >
+                        <span class="truncate">GraphQL API</span>
+                    </a>
+                </li>
+                <li>
+                    <a
+                        href="#"
+                        class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-100 hover:text-indigo-600"
+                    >
+                        <span
+                            class="flex size-6 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-white text-[0.625rem] font-medium text-gray-400 group-hover:border-indigo-600 group-hover:text-indigo-600"
+                            >C</span
+                        >
+                        <span class="truncate">Customer migration guides</span>
+                    </a>
+                </li>
+                <li>
+                    <a
+                        href="#"
+                        class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-100 hover:text-indigo-600"
+                    >
+                        <span
+                            class="flex size-6 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-white text-[0.625rem] font-medium text-gray-400 group-hover:border-indigo-600 group-hover:text-indigo-600"
+                            >P</span
+                        >
+                        <span class="truncate">Profit sharing program</span>
+                    </a>
+                </li>
+            </ul>
+        </li>
+    </ul>
+</nav>
diff --git a/application_ui/navigation/vertical_navigation/simple.html b/application_ui/navigation/vertical_navigation/simple.html
new file mode 100644
index 0000000..522dac7
--- /dev/null
+++ b/application_ui/navigation/vertical_navigation/simple.html
@@ -0,0 +1,47 @@
+<nav aria-label="Sidebar" class="flex flex-1 flex-col">
+    <ul role="list" class="-mx-2 space-y-1">
+        <li>
+            <!-- Current: "bg-gray-50 text-indigo-600", Default: "text-gray-700 hover:text-indigo-600 hover:bg-gray-50" -->
+            <a
+                href="#"
+                class="group flex gap-x-3 rounded-md bg-gray-50 p-2 pl-3 text-sm/6 font-semibold text-indigo-600"
+                >Dashboard</a
+            >
+        </li>
+        <li>
+            <a
+                href="#"
+                class="group flex gap-x-3 rounded-md p-2 pl-3 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
+                >Team</a
+            >
+        </li>
+        <li>
+            <a
+                href="#"
+                class="group flex gap-x-3 rounded-md p-2 pl-3 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
+                >Projects</a
+            >
+        </li>
+        <li>
+            <a
+                href="#"
+                class="group flex gap-x-3 rounded-md p-2 pl-3 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
+                >Calendar</a
+            >
+        </li>
+        <li>
+            <a
+                href="#"
+                class="group flex gap-x-3 rounded-md p-2 pl-3 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
+                >Documents</a
+            >
+        </li>
+        <li>
+            <a
+                href="#"
+                class="group flex gap-x-3 rounded-md p-2 pl-3 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
+                >Reports</a
+            >
+        </li>
+    </ul>
+</nav>
diff --git a/application_ui/navigation/vertical_navigation/with_badges.html b/application_ui/navigation/vertical_navigation/with_badges.html
new file mode 100644
index 0000000..c18c815
--- /dev/null
+++ b/application_ui/navigation/vertical_navigation/with_badges.html
@@ -0,0 +1,68 @@
+<nav aria-label="Sidebar" class="flex flex-1 flex-col">
+    <ul role="list" class="-mx-2 space-y-1">
+        <li>
+            <!-- Current: "bg-gray-50 text-indigo-600", Default: "text-gray-700 hover:text-indigo-600 hover:bg-gray-50" -->
+            <a
+                href="#"
+                class="group flex gap-x-3 rounded-md bg-gray-50 p-2 pl-3 text-sm/6 font-semibold text-indigo-600"
+            >
+                Dashboard
+                <span
+                    aria-hidden="true"
+                    class="ml-auto w-9 min-w-max rounded-full bg-white px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-gray-600 ring-1 ring-gray-200 ring-inset"
+                    >5</span
+                >
+            </a>
+        </li>
+        <li>
+            <a
+                href="#"
+                class="group flex gap-x-3 rounded-md p-2 pl-3 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
+            >
+                Team
+            </a>
+        </li>
+        <li>
+            <a
+                href="#"
+                class="group flex gap-x-3 rounded-md p-2 pl-3 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
+            >
+                Projects
+                <span
+                    aria-hidden="true"
+                    class="ml-auto w-9 min-w-max rounded-full bg-white px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-gray-600 ring-1 ring-gray-200 ring-inset"
+                    >12</span
+                >
+            </a>
+        </li>
+        <li>
+            <a
+                href="#"
+                class="group flex gap-x-3 rounded-md p-2 pl-3 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
+            >
+                Calendar
+                <span
+                    aria-hidden="true"
+                    class="ml-auto w-9 min-w-max rounded-full bg-white px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-gray-600 ring-1 ring-gray-200 ring-inset"
+                    >20+</span
+                >
+            </a>
+        </li>
+        <li>
+            <a
+                href="#"
+                class="group flex gap-x-3 rounded-md p-2 pl-3 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
+            >
+                Documents
+            </a>
+        </li>
+        <li>
+            <a
+                href="#"
+                class="group flex gap-x-3 rounded-md p-2 pl-3 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
+            >
+                Reports
+            </a>
+        </li>
+    </ul>
+</nav>
diff --git a/application_ui/navigation/vertical_navigation/with_icons.html b/application_ui/navigation/vertical_navigation/with_icons.html
new file mode 100644
index 0000000..98bbceb
--- /dev/null
+++ b/application_ui/navigation/vertical_navigation/with_icons.html
@@ -0,0 +1,148 @@
+<nav aria-label="Sidebar" class="flex flex-1 flex-col">
+    <ul role="list" class="-mx-2 space-y-1">
+        <li>
+            <!-- Current: "bg-gray-50 text-indigo-600", Default: "text-gray-700 hover:text-indigo-600 hover:bg-gray-50" -->
+            <a
+                href="#"
+                class="group flex gap-x-3 rounded-md bg-gray-50 p-2 text-sm/6 font-semibold text-indigo-600"
+            >
+                <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    data-slot="icon"
+                    aria-hidden="true"
+                    class="size-6 shrink-0 text-indigo-600"
+                >
+                    <path
+                        d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    />
+                </svg>
+                Dashboard
+            </a>
+        </li>
+        <li>
+            <a
+                href="#"
+                class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
+            >
+                <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    data-slot="icon"
+                    aria-hidden="true"
+                    class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
+                >
+                    <path
+                        d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    />
+                </svg>
+                Team
+            </a>
+        </li>
+        <li>
+            <a
+                href="#"
+                class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
+            >
+                <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    data-slot="icon"
+                    aria-hidden="true"
+                    class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
+                >
+                    <path
+                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    />
+                </svg>
+                Projects
+            </a>
+        </li>
+        <li>
+            <a
+                href="#"
+                class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
+            >
+                <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    data-slot="icon"
+                    aria-hidden="true"
+                    class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
+                >
+                    <path
+                        d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    />
+                </svg>
+                Calendar
+            </a>
+        </li>
+        <li>
+            <a
+                href="#"
+                class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
+            >
+                <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    data-slot="icon"
+                    aria-hidden="true"
+                    class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
+                >
+                    <path
+                        d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    />
+                </svg>
+                Documents
+            </a>
+        </li>
+        <li>
+            <a
+                href="#"
+                class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
+            >
+                <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    data-slot="icon"
+                    aria-hidden="true"
+                    class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
+                >
+                    <path
+                        d="M10.5 6a7.5 7.5 0 1 0 7.5 7.5h-7.5V6Z"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    />
+                    <path
+                        d="M13.5 10.5H21A7.5 7.5 0 0 0 13.5 3v7.5Z"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    />
+                </svg>
+                Reports
+            </a>
+        </li>
+    </ul>
+</nav>
diff --git a/application_ui/navigation/vertical_navigation/with_icons_and_badges.html b/application_ui/navigation/vertical_navigation/with_icons_and_badges.html
new file mode 100644
index 0000000..92d3074
--- /dev/null
+++ b/application_ui/navigation/vertical_navigation/with_icons_and_badges.html
@@ -0,0 +1,163 @@
+<nav aria-label="Sidebar" class="flex flex-1 flex-col">
+    <ul role="list" class="-mx-2 space-y-1">
+        <li>
+            <!-- Current: "bg-gray-50 text-indigo-600", Default: "text-gray-700 hover:text-indigo-600 hover:bg-gray-50" -->
+            <a
+                href="#"
+                class="group flex gap-x-3 rounded-md bg-gray-50 p-2 text-sm/6 font-semibold text-indigo-600"
+            >
+                <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    data-slot="icon"
+                    aria-hidden="true"
+                    class="size-6 shrink-0 text-indigo-600"
+                >
+                    <path
+                        d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    />
+                </svg>
+                Dashboard
+                <span
+                    aria-hidden="true"
+                    class="ml-auto w-9 min-w-max rounded-full bg-white px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-gray-600 ring-1 ring-gray-200 ring-inset"
+                    >5</span
+                >
+            </a>
+        </li>
+        <li>
+            <a
+                href="#"
+                class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
+            >
+                <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    data-slot="icon"
+                    aria-hidden="true"
+                    class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
+                >
+                    <path
+                        d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    />
+                </svg>
+                Team
+            </a>
+        </li>
+        <li>
+            <a
+                href="#"
+                class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
+            >
+                <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    data-slot="icon"
+                    aria-hidden="true"
+                    class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
+                >
+                    <path
+                        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    />
+                </svg>
+                Projects
+                <span
+                    aria-hidden="true"
+                    class="ml-auto w-9 min-w-max rounded-full bg-white px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-gray-600 ring-1 ring-gray-200 ring-inset"
+                    >12</span
+                >
+            </a>
+        </li>
+        <li>
+            <a
+                href="#"
+                class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
+            >
+                <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    data-slot="icon"
+                    aria-hidden="true"
+                    class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
+                >
+                    <path
+                        d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    />
+                </svg>
+                Calendar
+                <span
+                    aria-hidden="true"
+                    class="ml-auto w-9 min-w-max rounded-full bg-white px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-gray-600 ring-1 ring-gray-200 ring-inset"
+                    >20+</span
+                >
+            </a>
+        </li>
+        <li>
+            <a
+                href="#"
+                class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
+            >
+                <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    data-slot="icon"
+                    aria-hidden="true"
+                    class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
+                >
+                    <path
+                        d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    />
+                </svg>
+                Documents
+            </a>
+        </li>
+        <li>
+            <a
+                href="#"
+                class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
+            >
+                <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    data-slot="icon"
+                    aria-hidden="true"
+                    class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
+                >
+                    <path
+                        d="M10.5 6a7.5 7.5 0 1 0 7.5 7.5h-7.5V6Z"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    />
+                    <path
+                        d="M13.5 10.5H21A7.5 7.5 0 0 0 13.5 3v7.5Z"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    />
+                </svg>
+                Reports
+            </a>
+        </li>
+    </ul>
+</nav>
diff --git a/application_ui/navigation/vertical_navigation/with_secondary_navigation.html b/application_ui/navigation/vertical_navigation/with_secondary_navigation.html
new file mode 100644
index 0000000..dbb7ec8
--- /dev/null
+++ b/application_ui/navigation/vertical_navigation/with_secondary_navigation.html
@@ -0,0 +1,221 @@
+<nav aria-label="Sidebar" class="flex flex-1 flex-col">
+    <ul role="list" class="flex flex-1 flex-col gap-y-7">
+        <li>
+            <ul role="list" class="-mx-2 space-y-1">
+                <li>
+                    <!-- Current: "bg-gray-50 text-indigo-600", Default: "text-gray-700 hover:text-indigo-600 hover:bg-gray-50" -->
+                    <a
+                        href="#"
+                        class="group flex gap-x-3 rounded-md bg-gray-50 p-2 text-sm/6 font-semibold text-indigo-600"
+                    >
+                        <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="size-6 shrink-0 text-indigo-600"
+                        >
+                            <path
+                                d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                        Dashboard
+                        <span
+                            aria-hidden="true"
+                            class="ml-auto w-9 min-w-max rounded-full bg-white px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-gray-600 ring-1 ring-gray-200 ring-inset"
+                            >5</span
+                        >
+                    </a>
+                </li>
+                <li>
+                    <a
+                        href="#"
+                        class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
+                    >
+                        <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
+                        >
+                            <path
+                                d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                        Team
+                    </a>
+                </li>
+                <li>
+                    <a
+                        href="#"
+                        class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
+                    >
+                        <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
+                        >
+                            <path
+                                d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                        Projects
+                        <span
+                            aria-hidden="true"
+                            class="ml-auto w-9 min-w-max rounded-full bg-white px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-gray-600 ring-1 ring-gray-200 ring-inset"
+                            >12</span
+                        >
+                    </a>
+                </li>
+                <li>
+                    <a
+                        href="#"
+                        class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
+                    >
+                        <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
+                        >
+                            <path
+                                d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                        Calendar
+                        <span
+                            aria-hidden="true"
+                            class="ml-auto w-9 min-w-max rounded-full bg-white px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-gray-600 ring-1 ring-gray-200 ring-inset"
+                            >20+</span
+                        >
+                    </a>
+                </li>
+                <li>
+                    <a
+                        href="#"
+                        class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
+                    >
+                        <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
+                        >
+                            <path
+                                d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                        Documents
+                    </a>
+                </li>
+                <li>
+                    <a
+                        href="#"
+                        class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
+                    >
+                        <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
+                        >
+                            <path
+                                d="M10.5 6a7.5 7.5 0 1 0 7.5 7.5h-7.5V6Z"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M13.5 10.5H21A7.5 7.5 0 0 0 13.5 3v7.5Z"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                        Reports
+                    </a>
+                </li>
+            </ul>
+        </li>
+        <li>
+            <div class="text-xs/6 font-semibold text-gray-400">Projects</div>
+            <ul role="list" class="-mx-2 mt-2 space-y-1">
+                <li>
+                    <!-- Current: "bg-gray-50 text-indigo-600", Default: "text-gray-700 hover:text-indigo-600 hover:bg-gray-50" -->
+                    <a
+                        href="#"
+                        class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
+                    >
+                        <span
+                            class="flex size-6 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-white text-[0.625rem] font-medium text-gray-400 group-hover:border-indigo-600 group-hover:text-indigo-600"
+                            >W</span
+                        >
+                        <span class="truncate">Website redesign</span>
+                    </a>
+                </li>
+                <li>
+                    <a
+                        href="#"
+                        class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
+                    >
+                        <span
+                            class="flex size-6 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-white text-[0.625rem] font-medium text-gray-400 group-hover:border-indigo-600 group-hover:text-indigo-600"
+                            >G</span
+                        >
+                        <span class="truncate">GraphQL API</span>
+                    </a>
+                </li>
+                <li>
+                    <a
+                        href="#"
+                        class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
+                    >
+                        <span
+                            class="flex size-6 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-white text-[0.625rem] font-medium text-gray-400 group-hover:border-indigo-600 group-hover:text-indigo-600"
+                            >C</span
+                        >
+                        <span class="truncate">Customer migration guides</span>
+                    </a>
+                </li>
+                <li>
+                    <a
+                        href="#"
+                        class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
+                    >
+                        <span
+                            class="flex size-6 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-white text-[0.625rem] font-medium text-gray-400 group-hover:border-indigo-600 group-hover:text-indigo-600"
+                            >P</span
+                        >
+                        <span class="truncate">Profit sharing program</span>
+                    </a>
+                </li>
+            </ul>
+        </li>
+    </ul>
+</nav>