From 774b8d987b9b290fa151edc2fcdf61653c8c4d2e Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Wed, 7 Jun 2023 21:44:16 +0200
Subject: [PATCH] ui updates

---
 resources/css/app.css                         |   5 +-
 resources/js/components/MagicBar.vue          |  10 +-
 resources/views/auth/login.blade.php          |  31 +--
 resources/views/command-center.blade.php      |  10 +-
 .../components/applications/navbar.blade.php  | 103 ++++----
 .../views/components/forms/checkbox.blade.php |  13 +-
 .../views/components/forms/input.blade.php    |  16 +-
 .../views/components/forms/select.blade.php   |  11 +-
 .../views/components/forms/textarea.blade.php |  13 +-
 resources/views/components/layout.blade.php   |   8 -
 resources/views/components/navbar.blade.php   |  86 +++----
 .../views/components/server/navbar.blade.php  |  13 +-
 .../views/components/team/navbar.blade.php    |  35 ++-
 resources/views/dashboard.blade.php           |  11 +-
 .../new/standalone-docker.blade.php           |  10 +-
 .../project/application/deploy.blade.php      | 221 +++++++++---------
 .../views/livewire/server/new/by-ip.blade.php |  10 +-
 .../livewire/server/proxy/deploy.blade.php    |  58 ++---
 .../views/livewire/settings/form.blade.php    |  10 +-
 resources/views/private-key/new.blade.php     |  10 +-
 resources/views/profile.blade.php             |  11 +-
 .../application/configuration.blade.php       |  38 ++-
 .../project/application/deployment.blade.php  |  50 +++-
 .../project/application/deployments.blade.php |  48 +++-
 resources/views/project/resources.blade.php   |  20 +-
 resources/views/project/show.blade.php        |  12 +-
 resources/views/projects.blade.php            |  11 +-
 resources/views/server/all.blade.php          |  10 +-
 vite.config.js                                |  13 +-
 29 files changed, 505 insertions(+), 392 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index eb881846a..4fd6d165c 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -27,7 +27,7 @@ input[type="text"],
 [type="number"],
 [type="email"],
 [type="password"] {
-    @apply read-only:opacity-40;
+    @apply read-only:bg-coolgray-200/50 read-only:text-opacity-25;
 }
 .label-text,
 label {
@@ -40,9 +40,6 @@ textarea {
 select {
     @apply select select-sm text-sm disabled:bg-coolgray-200 border-none disabled:opacity-50 font-normal placeholder:text-neutral-700 text-white rounded-none;
 }
-.breadcrumbs > ul > li::before {
-    @apply text-warning opacity-100;
-}
 .loading {
     @apply w-4 text-warning;
 }
diff --git a/resources/js/components/MagicBar.vue b/resources/js/components/MagicBar.vue
index 6c4344e4d..3e7abcda6 100644
--- a/resources/js/components/MagicBar.vue
+++ b/resources/js/components/MagicBar.vue
@@ -1,6 +1,6 @@
 <template>
     <Transition name="fade">
-        <div class="z-10">
+        <div>
             <div class="flex items-center p-1 px-2 overflow-hidden transition-all transform rounded cursor-pointer bg-coolgray-200"
                 @click="showCommandPalette = true">
                 <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 icon" viewBox="0 0 24 24" stroke-width="2"
@@ -12,9 +12,9 @@
                 <span class="ml-2 kbd-custom">/</span>
             </div>
             <div class="relative" role="dialog" aria-modal="true" v-if="showCommandPalette" @keyup.esc="resetState">
-                <div class="fixed inset-0 transition-opacity bg-opacity-75 bg-coolgray-100" @click.self="resetState">
+                <div class="fixed inset-0 transition-opacity bg-opacity-90 bg-coolgray-100" @click.self="resetState">
                 </div>
-                <div class="fixed inset-0 w-3/5 p-4 mx-auto overflow-y-auto sm:p-6 md:px-20 min-w-fit"
+                <div class="fixed inset-0 p-4 mx-auto overflow-y-auto md:w-[70rem] sm:p-10 md:px-20"
                     @click.self="resetState">
                     <div class="overflow-hidden transition-all transform bg-coolgray-200 ring-1 ring-black ring-opacity-5">
                         <div class="relative">
@@ -31,8 +31,8 @@
                                 aria-expanded="false" aria-controls="options">
                         </div>
 
-                        <ul class="px-4 pb-2 overflow-y-auto lg:max-h-screen max-h-80 scroll-py-10 scroll-pb-2 scrollbar"
-                            id="options" role="listbox">
+                        <ul class="px-4 pb-2 overflow-y-auto max-h-96 scroll-py-10 scroll-pb-2 scrollbar" id="options"
+                            role="listbox">
                             <li v-if="sequenceState.sequence.length !== 0">
                                 <h2 v-if="sequenceState.sequence[sequenceState.currentActionIndex] && possibleSequences[sequenceState.sequence[sequenceState.currentActionIndex]]"
                                     class="mt-4 mb-2 text-xs font-semibold text-neutral-500">{{
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index dbeb12655..30937c16e 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -1,37 +1,38 @@
 <x-layout-simple>
     <div class="flex items-center justify-center h-screen">
-        <div class="w-1/2 min-w-fit">
+        <div class="w-96 min-w-fit">
             <div class="flex flex-col items-center pb-8">
-                <div class="text-5xl font-bold tracking-tight text-center text-white">Coolify</div>
+                <div class="text-5xl font-extrabold tracking-tight text-center text-white">Coolify</div>
                 <x-version />
             </div>
             <div class="flex items-center gap-2">
                 <h1>{{ __('auth.login') }}</h1>
-                @if ($is_registration_enabled)
-                    <a href="/register"
-                        class="text-xs text-center text-white normal-case bg-transparent border-none rounded no-animation hover:no-underline btn btn-sm bg-coollabs-gradient">
-                        {{ __('auth.register_now') }}
-                    </a>
-                @endif
+
             </div>
             <div>
                 <form action="/login" method="POST" class="flex flex-col gap-2">
                     @csrf
                     @env('local')
-                    <x-forms.input required value="test@example.com" type="email" name="email"
-                        label="{{ __('input.email') }}" autofocus />
+                    <x-forms.input value="test@example.com" type="email" name="email" label="{{ __('input.email') }}"
+                        autofocus />
+
+                    <x-forms.input value="password" type="password" name="password"
+                        label="{{ __('input.password') }}" />
                     <a href="/forgot-password" class="text-xs">
                         {{ __('auth.forgot_password') }}?
                     </a>
-                    <x-forms.input required value="password" type="password" name="password"
-                        label="{{ __('input.password') }}" />
                 @else
-                    <x-forms.input required type="email" name="email" label="{{ __('input.email') }}" autofocus />
-                    <x-forms.input required type="password" name="password" label="{{ __('input.password') }}" />
+                    <x-forms.input type="email" name="email" label="{{ __('input.email') }}" autofocus />
+                    <x-forms.input type="password" name="password" label="{{ __('input.password') }}" />
                     @endenv
 
                     <x-forms.button type="submit">{{ __('auth.login') }}</x-forms.button>
-                    @if (!$is_registration_enabled)
+                    @if ($is_registration_enabled)
+                        <a href="/register"
+                            class="text-xs text-center text-white normal-case bg-transparent border-none rounded no-animation hover:no-underline btn btn-sm bg-coollabs-gradient">
+                            {{ __('auth.register_now') }}
+                        </a>
+                    @else
                         <div class="text-sm text-center">{{ __('auth.registration_disabled') }}</div>
                     @endif
                     @if ($errors->any())
diff --git a/resources/views/command-center.blade.php b/resources/views/command-center.blade.php
index a9815145a..40b9aa659 100644
--- a/resources/views/command-center.blade.php
+++ b/resources/views/command-center.blade.php
@@ -1,12 +1,12 @@
 <x-layout>
     <h1>Command Center</h1>
-    <div class="pb-10 text-sm breadcrumbs">
-        <ul>
-            <li>
+    <nav class="flex pt-2 pb-10 text-sm">
+        <ol class="inline-flex items-center">
+            <li class="inline-flex items-center">
                 Execute commands on your servers without leaving the browser.
             </li>
-        </ul>
-    </div>
+        </ol>
+    </nav>
     @if ($servers->count() > 0)
         <livewire:run-command :servers="$servers" />
     @else
diff --git a/resources/views/components/applications/navbar.blade.php b/resources/views/components/applications/navbar.blade.php
index 82615b657..466919615 100644
--- a/resources/views/components/applications/navbar.blade.php
+++ b/resources/views/components/applications/navbar.blade.php
@@ -16,63 +16,64 @@
         <button>Deployments</button>
     </a>
     <div class="flex-1"></div>
-    <div class="dropdown dropdown-bottom dropdown-hover">
+    <div class="group">
         <label tabindex="0" class="flex items-center gap-2 text-sm cursor-pointer hover:text-white"> Links
             <x-chevron-down />
         </label>
-        <ul tabindex="0"
-            class="text-xs text-white normal-case rounded min-w-max dropdown-content menu bg-coolgray-200">
-            <li>
-                <a target="_blank" class="text-xs text-white rounded-none hover:no-underline hover:bg-coollabs"
-                    href="{{ $application->gitBranchLocation }}">
-                    <x-git-icon git="{{ $application->source->getMorphClass() }}" />
-                    Git Repository
-                </a>
-            </li>
-            @if (data_get($application, 'fqdn'))
+        <div class="absolute hidden group-hover:block ">
+            <ul tabindex="0" class="text-xs text-white normal-case rounded min-w-max menu bg-coolgray-200">
                 <li>
-                    <a class="text-xs text-white rounded-none hover:no-underline hover:bg-coollabs" target="_blank"
-                        href="{{ $application->fqdn }}">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
-                            stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                            <path d="M9 15l6 -6" />
-                            <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
-                            <path
-                                d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
-                        </svg>{{ $application->fqdn }}
+                    <a target="_blank" class="text-xs text-white rounded-none hover:no-underline hover:bg-coollabs"
+                        href="{{ $application->gitBranchLocation }}">
+                        <x-git-icon git="{{ $application->source->getMorphClass() }}" />
+                        Git Repository
                     </a>
                 </li>
-            @endif
-            @if (data_get($application, 'ports_mappings_array'))
-                @foreach ($application->ports_mappings_array as $port)
-                    @if (config('app.env') === 'local')
-                        <li>
-                            <a class="text-xs text-white rounded-none hover:no-underline hover:bg-coollabs"
-                                target="_blank" href="http://localhost:{{ explode(':', $port)[0] }}">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24"
-                                    stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
-                                    stroke-linejoin="round">
-                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                                    <path d="M9 15l6 -6" />
-                                    <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
-                                    <path
-                                        d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
-                                </svg>{{ $port }}
-                            </a>
-                        </li>
-                    @else
-                        <li>
-                            <a class="text-xs hover:no-underline hover:bg-coollabs" target="_blank"
-                                href="http://{{ $application->destination->server->ip }}:{{ explode(':', $port)[0] }}">Port
-                                {{ $port }}
-                            </a>
-                        </li>
-                    @endif
-                @endforeach
-            @endif
-        </ul>
-    </div>
+                @if (data_get($application, 'fqdn'))
+                    <li>
+                        <a class="text-xs text-white rounded-none hover:no-underline hover:bg-coollabs" target="_blank"
+                            href="{{ $application->fqdn }}">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24"
+                                stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
+                                stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                                <path d="M9 15l6 -6" />
+                                <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
+                                <path
+                                    d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
+                            </svg>{{ $application->fqdn }}
+                        </a>
+                    </li>
+                @endif
+                @if (data_get($application, 'ports_mappings_array'))
+                    @foreach ($application->ports_mappings_array as $port)
+                        @if (config('app.env') === 'local')
+                            <li>
+                                <a class="text-xs text-white rounded-none hover:no-underline hover:bg-coollabs"
+                                    target="_blank" href="http://localhost:{{ explode(':', $port)[0] }}">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24"
+                                        stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
+                                        stroke-linejoin="round">
+                                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                                        <path d="M9 15l6 -6" />
+                                        <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
+                                        <path
+                                            d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
+                                    </svg>{{ $port }}
+                                </a>
+                            </li>
+                        @else
+                            <li>
+                                <a class="text-xs hover:no-underline hover:bg-coollabs" target="_blank"
+                                    href="http://{{ $application->destination->server->ip }}:{{ explode(':', $port)[0] }}">Port
+                                    {{ $port }}
+                                </a>
+                            </li>
+                        @endif
+                    @endforeach
+                @endif
+            </ul>
+        </div>
     </div>
     <livewire:project.application.deploy :applicationId="$application->id" />
 </nav>
diff --git a/resources/views/components/forms/checkbox.blade.php b/resources/views/components/forms/checkbox.blade.php
index db81c2283..86e61c726 100644
--- a/resources/views/components/forms/checkbox.blade.php
+++ b/resources/views/components/forms/checkbox.blade.php
@@ -9,24 +9,23 @@
     'disabled' => null,
 ])
 <label {{ $attributes->merge(['class' => 'flex cursor-pointer w-64 label']) }}>
-    <div class="label-text">
+    <div class="flex gap-1 label-text">
         @if ($label)
             {{ $label }}
         @else
             {{ $id }}
         @endif
         @if ($helper)
-            <div class="-mb-1 dropdown dropdown-right dropdown-hover">
-                <label tabindex="0" class="cursor-pointer text-warning">
+            <div class="group">
+                <div class="cursor-pointer text-warning">
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                         class="w-4 h-4 stroke-current">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                             d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                     </svg>
-                </label>
-                <div tabindex="0"
-                    class="border rounded shadow border-coolgray-400 card compact dropdown-content bg-coolgray-200 w-96">
-                    <div class="card-body">
+                </div>
+                <div class="absolute hidden text-xs group-hover:block border-coolgray-400 bg-coolgray-500">
+                    <div class="p-4 card-body">
                         {!! $helper !!}
                     </div>
                 </div>
diff --git a/resources/views/components/forms/input.blade.php b/resources/views/components/forms/input.blade.php
index 7f1ac6bd9..26d79842f 100644
--- a/resources/views/components/forms/input.blade.php
+++ b/resources/views/components/forms/input.blade.php
@@ -2,6 +2,7 @@
     'id' => $attributes->has('id'),
     'type' => $attributes->get('type') ?? 'text',
     'label' => $attributes->has('label'),
+    'readonly' => null,
     'required' => null,
     'disabled' => null,
     'helper' => $attributes->has('helper'),
@@ -10,23 +11,22 @@
 <div {{ $attributes->merge(['class' => 'w-full form-control']) }}>
     @if ($label)
         <label class="label">
-            <span class="label-text">
+            <span class="flex gap-1 label-text">
                 {{ $label }}
                 @if ($required)
                     <span class="text-warning">*</span>
                 @endif
                 @if ($helper)
-                    <div class="-mb-1 dropdown dropdown-right dropdown-hover">
-                        <label tabindex="0" class="cursor-pointer text-warning">
+                    <div class="group">
+                        <div class="cursor-pointer text-warning">
                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                 class="w-4 h-4 stroke-current">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                     d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                             </svg>
-                        </label>
-                        <div tabindex="0"
-                            class="border rounded shadow border-coolgray-400 card compact dropdown-content bg-coolgray-200 w-96">
-                            <div class="card-body">
+                        </div>
+                        <div class="absolute hidden text-xs group-hover:block border-coolgray-400 bg-coolgray-500">
+                            <div class="p-4 card-body">
                                 {!! $helper !!}
                             </div>
                         </div>
@@ -38,7 +38,7 @@ class="border rounded shadow border-coolgray-400 card compact dropdown-content b
     <input type={{ $type }}
         @if ($id) name={{ $id }} wire:model.defer={{ $id }} @endisset
         @if ($disabled !== null) disabled @endif
-        @if ($required !== null) required @endif
+        @if ($required !== null) required @endif @if ($readonly !== null) readonly @endif
         @if (!$noDirty && $id) wire:dirty.class="input-warning" @endif {{ $attributes }} />
     @error($id)
         <label class="label">
diff --git a/resources/views/components/forms/select.blade.php b/resources/views/components/forms/select.blade.php
index e6ba5f7ce..7d22fd8f4 100644
--- a/resources/views/components/forms/select.blade.php
+++ b/resources/views/components/forms/select.blade.php
@@ -17,17 +17,16 @@
                 <span class="text-warning">*</span>
             @endif
             @if ($helper)
-                <div class="-mb-1 dropdown dropdown-right dropdown-hover">
-                    <label tabindex="0" class="cursor-pointer text-warning">
+                <div class="group">
+                    <div class="cursor-pointer text-warning">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                             class="w-4 h-4 stroke-current">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                 d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                         </svg>
-                    </label>
-                    <div tabindex="0"
-                        class="border rounded shadow border-coolgray-400 card compact dropdown-content bg-coolgray-200 w-96">
-                        <div class="card-body">
+                    </div>
+                    <div class="absolute hidden text-xs group-hover:block border-coolgray-400 bg-coolgray-500">
+                        <div class="p-4 card-body">
                             {!! $helper !!}
                         </div>
                     </div>
diff --git a/resources/views/components/forms/textarea.blade.php b/resources/views/components/forms/textarea.blade.php
index 6b00c514e..9a782db0a 100644
--- a/resources/views/components/forms/textarea.blade.php
+++ b/resources/views/components/forms/textarea.blade.php
@@ -20,18 +20,17 @@
                     <span class="text-warning">*</span>
                 @endif
                 @if ($helper)
-                    <div class="dropdown dropdown-right">
-                        <label tabindex="0" class="btn btn-circle btn-ghost btn-xs text-warning">
+                    <div class="group">
+                        <div class="cursor-pointer text-warning">
                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                 class="w-4 h-4 stroke-current">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                     d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                             </svg>
-                        </label>
-                        <div tabindex="0"
-                            class="w-64 border-2 shadow border-coolgray-500 card compact dropdown-content bg-coolgray-200 ">
-                            <div class="card-body">
-                                {{ $helper }}
+                        </div>
+                        <div class="absolute hidden text-xs group-hover:block border-coolgray-400 bg-coolgray-500">
+                            <div class="p-4 card-body">
+                                {!! $helper !!}
                             </div>
                         </div>
                     </div>
diff --git a/resources/views/components/layout.blade.php b/resources/views/components/layout.blade.php
index 5fd8e44dc..f89c49e63 100644
--- a/resources/views/components/layout.blade.php
+++ b/resources/views/components/layout.blade.php
@@ -38,14 +38,6 @@
     <x-version class="fixed left-2 bottom-1" />
     @auth
         <script>
-            window.addEventListener("keydown", function(event) {
-                if (event.target.nodeName === 'BODY') {
-                    if (event.key === '/') {
-                        event.preventDefault();
-                        window.dispatchEvent(new CustomEvent('slash'));
-                    }
-                }
-            })
             Livewire.on('reloadWindow', () => {
                 window.location.reload();
             })
diff --git a/resources/views/components/navbar.blade.php b/resources/views/components/navbar.blade.php
index 2ca036d98..50f291502 100644
--- a/resources/views/components/navbar.blade.php
+++ b/resources/views/components/navbar.blade.php
@@ -71,8 +71,9 @@ class="{{ request()->is('settings') ? 'text-warning icon' : 'icon' }}" viewBox="
         </ul>
     </nav>
     <div class="fixed top-0 right-0 p-2">
-        <div class="dropdown dropdown-left dropdown-hover">
-            <label tabindex="0" class="btn btn-ghost no-animation hover:bg-transparent hover:text-warning">
+        <div class="group">
+            <label tabindex="0"
+                class="absolute top-0 right-0 p-2 m-2 cursor-pointer hover:bg-transparent hover:text-warning">
                 <div class="flex items-center justify-center gap-2 placeholder">
                     <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
                         stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
@@ -83,47 +84,52 @@ class="{{ request()->is('settings') ? 'text-warning icon' : 'icon' }}" viewBox="
                     </svg>
                 </div>
             </label>
-            <ul tabindex="0" class="p-2 mt-3 rounded shadow menu menu-compact dropdown-content bg-coolgray-200 w-52">
-                <li>
-                    <a class="text-white rounded-none hover:no-underline hover:bg-coollabs" href="/profile">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" stroke-width="1.5"
-                            stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                            <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
-                            <path d="M12 10m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
-                            <path d="M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855" />
-                        </svg> Profile
-                    </a>
-                </li>
-                <li>
-                    <a class="text-white rounded-none hover:no-underline hover:bg-coollabs" href="/profile/team">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" stroke-width="1.5"
-                            stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                            <path d="M10 13a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
-                            <path d="M8 21v-1a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v1" />
-                            <path d="M15 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
-                            <path d="M17 10h2a2 2 0 0 1 2 2v1" />
-                            <path d="M5 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
-                            <path d="M3 13v-1a2 2 0 0 1 2 -2h2" />
-                        </svg> Team
-                    </a>
-                </li>
-                <form action="/logout" method="POST">
+            <div class="hidden p-4 px-8 group-hover:block">
+                <ul tabindex="0" class="p-2 mt-3 rounded shadow menu menu-compact dropdown-content bg-coolgray-200 w-52">
                     <li>
-                        @csrf
-                        <button class="text-sm text-white rounded-none hover:bg-coollabs"> <svg
-                                xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" stroke-width="1.5"
-                                stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <a class="text-white rounded-none hover:no-underline hover:bg-coollabs" href="/profile">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24"
+                                stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
+                                stroke-linejoin="round">
                                 <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                                <path d="M13 12v.01" />
-                                <path d="M3 21h18" />
-                                <path d="M5 21v-16a2 2 0 0 1 2 -2h7.5m2.5 10.5v7.5" />
-                                <path d="M14 7h7m-3 -3l3 3l-3 3" />
-                            </svg>Logout</button>
+                                <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
+                                <path d="M12 10m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
+                                <path d="M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855" />
+                            </svg> Profile
+                        </a>
                     </li>
-                </form>
-            </ul>
+                    <li>
+                        <a class="text-white rounded-none hover:no-underline hover:bg-coollabs" href="/profile/team">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24"
+                                stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
+                                stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                                <path d="M10 13a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
+                                <path d="M8 21v-1a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v1" />
+                                <path d="M15 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
+                                <path d="M17 10h2a2 2 0 0 1 2 2v1" />
+                                <path d="M5 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
+                                <path d="M3 13v-1a2 2 0 0 1 2 -2h2" />
+                            </svg> Team
+                        </a>
+                    </li>
+                    <form action="/logout" method="POST">
+                        <li>
+                            @csrf
+                            <button class="text-sm text-white rounded-none hover:bg-coollabs"> <svg
+                                    xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
+                                    stroke-linejoin="round">
+                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                                    <path d="M13 12v.01" />
+                                    <path d="M3 21h18" />
+                                    <path d="M5 21v-16a2 2 0 0 1 2 -2h7.5m2.5 10.5v7.5" />
+                                    <path d="M14 7h7m-3 -3l3 3l-3 3" />
+                                </svg>Logout</button>
+                        </li>
+                    </form>
+                </ul>
+            </div>
         </div>
     </div>
 @endauth
diff --git a/resources/views/components/server/navbar.blade.php b/resources/views/components/server/navbar.blade.php
index d26a9a15e..cbe1a47eb 100644
--- a/resources/views/components/server/navbar.blade.php
+++ b/resources/views/components/server/navbar.blade.php
@@ -1,10 +1,13 @@
 <div class="pb-6">
     <h1>Server</h1>
-    <div class="pb-10 text-sm breadcrumbs">
-        <ul>
-            <li>{{ data_get($server, 'name') }}</li>
-        </ul>
-    </div>
+    <nav class="flex pt-2 pb-10 text-sm">
+        <ol class="inline-flex items-center">
+            <li class="inline-flex items-center">
+                {{ data_get($server, 'name') }}
+            </li>
+
+        </ol>
+    </nav>
     <nav class="flex items-center h-12 gap-4 py-2 border-b-2 border-solid border-coolgray-200">
         <a class="{{ request()->routeIs('server.show') ? 'text-white' : '' }}"
             href="{{ route('server.show', [
diff --git a/resources/views/components/team/navbar.blade.php b/resources/views/components/team/navbar.blade.php
index 7bb1bf35d..d65e58f5d 100644
--- a/resources/views/components/team/navbar.blade.php
+++ b/resources/views/components/team/navbar.blade.php
@@ -1,11 +1,34 @@
 <div class="pb-6">
     <h1>Team</h1>
-    <div class="text-sm breadcrumbs pb-11">
-        <ul>
-            <li>Currently Active Team</li>
-            <li class="font-bold">{{ session('currentTeam.name') }}</li>
-        </ul>
-    </div>
+    <nav class="flex pt-2 pb-10 text-sm">
+        <ol class="inline-flex items-center">
+            <li class="inline-flex items-center">
+                Currently Active Team
+            </li>
+            <li>
+                <div class="flex items-center">
+                    <svg aria-hidden="true" class="w-4 h-4 mx-1 font-bold text-warning" fill="currentColor"
+                        viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd"
+                            d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                            clip-rule="evenodd"></path>
+                    </svg>
+                    {{ session('currentTeam.name') }}
+                </div>
+            </li>
+            <li>
+                <div class="flex items-center">
+                    <svg aria-hidden="true" class="w-4 h-4 mx-1 font-bold text-warning" fill="currentColor"
+                        viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd"
+                            d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                            clip-rule="evenodd"></path>
+                    </svg>
+                    <span>{{ data_get($application, 'name') }}</span>
+                </div>
+            </li>
+        </ol>
+    </nav>
     <nav class="flex items-center gap-4 py-2 border-b-2 border-solid border-coolgray-200">
         <a class="{{ request()->routeIs('team.show') ? 'text-white' : '' }}" href="{{ route('team.show') }}">
             <button>Members</button>
diff --git a/resources/views/dashboard.blade.php b/resources/views/dashboard.blade.php
index 4709207fc..1c9debe17 100644
--- a/resources/views/dashboard.blade.php
+++ b/resources/views/dashboard.blade.php
@@ -1,12 +1,13 @@
 <x-layout>
     <h1>Dashboard</h1>
-    <div class="pb-10 text-sm breadcrumbs">
-        <ul>
-            <li>
+    <nav class="flex pt-2 pb-10 text-sm">
+        <ol class="inline-flex items-center">
+            <li class="inline-flex items-center">
                 Something (more) useful will be here.
             </li>
-        </ul>
-    </div>
+
+        </ol>
+    </nav>
     <div class="w-full rounded shadow stats stats-vertical lg:stats-horizontal">
         <div class="stat">
             <div class="stat-title">Servers</div>
diff --git a/resources/views/livewire/destination/new/standalone-docker.blade.php b/resources/views/livewire/destination/new/standalone-docker.blade.php
index 0a2207c7d..c8f9e6f20 100644
--- a/resources/views/livewire/destination/new/standalone-docker.blade.php
+++ b/resources/views/livewire/destination/new/standalone-docker.blade.php
@@ -1,12 +1,12 @@
 <div>
     <h1>Create a new Destination</h1>
-    <div class="pb-5 text-sm breadcrumbs">
-        <ul>
-            <li>
+    <nav class="flex pt-2 pb-10 text-sm">
+        <ol class="inline-flex items-center">
+            <li class="inline-flex items-center">
                 Destinations are used to separate resources in a server.
             </li>
-        </ul>
-    </div>
+        </ol>
+    </nav>
     <form class="flex flex-col gap-4" wire:submit.prevent='submit'>
         <div class="flex gap-2">
             <x-forms.input id="name" label="Name" required />
diff --git a/resources/views/livewire/project/application/deploy.blade.php b/resources/views/livewire/project/application/deploy.blade.php
index f2bf38aa9..e513ee8eb 100644
--- a/resources/views/livewire/project/application/deploy.blade.php
+++ b/resources/views/livewire/project/application/deploy.blade.php
@@ -1,114 +1,119 @@
 <div class="flex items-center gap-2">
-    <div class="dropdown dropdown-bottom dropdown-hover">
+    <div class="group">
         <label tabindex="0" class="flex items-center gap-2 cursor-pointer hover:text-white"> Actions
             <x-chevron-down />
         </label>
-        @if ($application->status === 'running')
-            <ul tabindex="0"
-                class="text-xs text-white normal-case rounded min-w-max dropdown-content menu bg-coolgray-200">
-                <li>
-                    <div class="rounded-none hover:bg-coollabs" wire:click='deploy'><svg xmlns="http://www.w3.org/2000/svg"
-                            class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
-                            stroke-linecap="round" stroke-linejoin="round">
-                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                            <path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" />
-                            <path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" />
-                            <path d="M12 9l0 3" />
-                            <path d="M12 15l.01 0" />
-                        </svg>Restart</div>
-                </li>
-                <li>
-                    <div class="rounded-none hover:bg-coollabs" wire:click='deploy(true, true)'><svg
-                            xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
-                            stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                            <path d="M9 9v-1a3 3 0 0 1 6 0v1" />
-                            <path d="M8 9h8a6 6 0 0 1 1 3v3a5 5 0 0 1 -10 0v-3a6 6 0 0 1 1 -3" />
-                            <path d="M3 13l4 0" />
-                            <path d="M17 13l4 0" />
-                            <path d="M12 20l0 -6" />
-                            <path d="M4 19l3.35 -2" />
-                            <path d="M20 19l-3.35 -2" />
-                            <path d="M4 7l3.75 2.4" />
-                            <path d="M20 7l-3.75 2.4" />
-                        </svg>Force deploy (with
-                        debug)
-                    </div>
-                </li>
-                <li>
-                    <div class="rounded-none hover:bg-coollabs" wire:click='deploy(true)'><svg
-                            xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
-                            stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                            <path
-                                d="M12.983 8.978c3.955 -.182 7.017 -1.446 7.017 -2.978c0 -1.657 -3.582 -3 -8 -3c-1.661 0 -3.204 .19 -4.483 .515m-2.783 1.228c-.471 .382 -.734 .808 -.734 1.257c0 1.22 1.944 2.271 4.734 2.74" />
-                            <path
-                                d="M4 6v6c0 1.657 3.582 3 8 3c.986 0 1.93 -.067 2.802 -.19m3.187 -.82c1.251 -.53 2.011 -1.228 2.011 -1.99v-6" />
-                            <path d="M4 12v6c0 1.657 3.582 3 8 3c3.217 0 5.991 -.712 7.261 -1.74m.739 -3.26v-4" />
-                            <path d="M3 3l18 18" />
-                        </svg>Force deploy (without
-                        cache)
-                    </div>
-                </li>
-                <li>
-                    <div class="rounded-none hover:bg-red-500" wire:click='stop'><svg xmlns="http://www.w3.org/2000/svg"
-                            class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
-                            stroke-linecap="round" stroke-linejoin="round">
-                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                            <path d="M8 13v-7.5a1.5 1.5 0 0 1 3 0v6.5" />
-                            <path d="M11 5.5v-2a1.5 1.5 0 1 1 3 0v8.5" />
-                            <path d="M14 5.5a1.5 1.5 0 0 1 3 0v6.5" />
-                            <path
-                                d="M17 7.5a1.5 1.5 0 0 1 3 0v8.5a6 6 0 0 1 -6 6h-2h.208a6 6 0 0 1 -5.012 -2.7a69.74 69.74 0 0 1 -.196 -.3c-.312 -.479 -1.407 -2.388 -3.286 -5.728a1.5 1.5 0 0 1 .536 -2.022a1.867 1.867 0 0 1 2.28 .28l1.47 1.47" />
-                        </svg>Stop</div>
-                </li>
-            </ul>
-        @else
-            <ul tabindex="0"
-                class="text-xs text-white normal-case rounded min-w-max dropdown-content menu bg-coolgray-200">
-                <li>
-                    <div class="rounded-none hover:bg-coollabs" wire:click='deploy'><svg
-                            xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
-                            stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                            <path d="M7 4v16l13 -8z" />
-                        </svg>Deploy</div>
-                </li>
-                <li>
-                    <div class="rounded-none hover:bg-coollabs" wire:click='deploy(true, true)'><svg
-                            xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
-                            stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                            <path d="M9 9v-1a3 3 0 0 1 6 0v1" />
-                            <path d="M8 9h8a6 6 0 0 1 1 3v3a5 5 0 0 1 -10 0v-3a6 6 0 0 1 1 -3" />
-                            <path d="M3 13l4 0" />
-                            <path d="M17 13l4 0" />
-                            <path d="M12 20l0 -6" />
-                            <path d="M4 19l3.35 -2" />
-                            <path d="M20 19l-3.35 -2" />
-                            <path d="M4 7l3.75 2.4" />
-                            <path d="M20 7l-3.75 2.4" />
-                        </svg>Force deploy (with
-                        debug)
-                    </div>
-                </li>
-                <li>
-                    <div class="rounded-none hover:bg-coollabs" wire:click='deploy(true)'><svg
-                            xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24"
-                            stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
-                            stroke-linejoin="round">
-                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                            <path
-                                d="M12.983 8.978c3.955 -.182 7.017 -1.446 7.017 -2.978c0 -1.657 -3.582 -3 -8 -3c-1.661 0 -3.204 .19 -4.483 .515m-2.783 1.228c-.471 .382 -.734 .808 -.734 1.257c0 1.22 1.944 2.271 4.734 2.74" />
-                            <path
-                                d="M4 6v6c0 1.657 3.582 3 8 3c.986 0 1.93 -.067 2.802 -.19m3.187 -.82c1.251 -.53 2.011 -1.228 2.011 -1.99v-6" />
-                            <path d="M4 12v6c0 1.657 3.582 3 8 3c3.217 0 5.991 -.712 7.261 -1.74m.739 -3.26v-4" />
-                            <path d="M3 3l18 18" />
-                        </svg>Force deploy (without
-                        cache)
-                    </div>
-                </li>
-            </ul>
-        @endif
+        <div class="absolute hidden group-hover:block ">
+            @if ($application->status === 'running')
+                <ul tabindex="0" class="text-xs text-white normal-case rounded min-w-max menu bg-coolgray-200">
+                    <li>
+                        <div class="rounded-none hover:bg-coollabs" wire:click='deploy'><svg
+                                xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
+                                stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                                <path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" />
+                                <path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" />
+                                <path d="M12 9l0 3" />
+                                <path d="M12 15l.01 0" />
+                            </svg>Restart</div>
+                    </li>
+                    <li>
+                        <div class="rounded-none hover:bg-coollabs" wire:click='deploy(true, true)'><svg
+                                xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24"
+                                stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
+                                stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                                <path d="M9 9v-1a3 3 0 0 1 6 0v1" />
+                                <path d="M8 9h8a6 6 0 0 1 1 3v3a5 5 0 0 1 -10 0v-3a6 6 0 0 1 1 -3" />
+                                <path d="M3 13l4 0" />
+                                <path d="M17 13l4 0" />
+                                <path d="M12 20l0 -6" />
+                                <path d="M4 19l3.35 -2" />
+                                <path d="M20 19l-3.35 -2" />
+                                <path d="M4 7l3.75 2.4" />
+                                <path d="M20 7l-3.75 2.4" />
+                            </svg>Force deploy (with
+                            debug)
+                        </div>
+                    </li>
+                    <li>
+                        <div class="rounded-none hover:bg-coollabs" wire:click='deploy(true)'><svg
+                                xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24"
+                                stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
+                                stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                                <path
+                                    d="M12.983 8.978c3.955 -.182 7.017 -1.446 7.017 -2.978c0 -1.657 -3.582 -3 -8 -3c-1.661 0 -3.204 .19 -4.483 .515m-2.783 1.228c-.471 .382 -.734 .808 -.734 1.257c0 1.22 1.944 2.271 4.734 2.74" />
+                                <path
+                                    d="M4 6v6c0 1.657 3.582 3 8 3c.986 0 1.93 -.067 2.802 -.19m3.187 -.82c1.251 -.53 2.011 -1.228 2.011 -1.99v-6" />
+                                <path d="M4 12v6c0 1.657 3.582 3 8 3c3.217 0 5.991 -.712 7.261 -1.74m.739 -3.26v-4" />
+                                <path d="M3 3l18 18" />
+                            </svg>Force deploy (without
+                            cache)
+                        </div>
+                    </li>
+                    <li>
+                        <div class="rounded-none hover:bg-red-500" wire:click='stop'><svg
+                                xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24"
+                                stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
+                                stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                                <path d="M8 13v-7.5a1.5 1.5 0 0 1 3 0v6.5" />
+                                <path d="M11 5.5v-2a1.5 1.5 0 1 1 3 0v8.5" />
+                                <path d="M14 5.5a1.5 1.5 0 0 1 3 0v6.5" />
+                                <path
+                                    d="M17 7.5a1.5 1.5 0 0 1 3 0v8.5a6 6 0 0 1 -6 6h-2h.208a6 6 0 0 1 -5.012 -2.7a69.74 69.74 0 0 1 -.196 -.3c-.312 -.479 -1.407 -2.388 -3.286 -5.728a1.5 1.5 0 0 1 .536 -2.022a1.867 1.867 0 0 1 2.28 .28l1.47 1.47" />
+                            </svg>Stop</div>
+                    </li>
+                </ul>
+            @else
+                <ul tabindex="0" class="text-xs text-white normal-case rounded min-w-max menu bg-coolgray-200">
+                    <li>
+                        <div class="rounded-none hover:bg-coollabs" wire:click='deploy'><svg
+                                xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24"
+                                stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
+                                stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                                <path d="M7 4v16l13 -8z" />
+                            </svg>Deploy</div>
+                    </li>
+                    <li>
+                        <div class="rounded-none hover:bg-coollabs" wire:click='deploy(true, true)'><svg
+                                xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24"
+                                stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
+                                stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                                <path d="M9 9v-1a3 3 0 0 1 6 0v1" />
+                                <path d="M8 9h8a6 6 0 0 1 1 3v3a5 5 0 0 1 -10 0v-3a6 6 0 0 1 1 -3" />
+                                <path d="M3 13l4 0" />
+                                <path d="M17 13l4 0" />
+                                <path d="M12 20l0 -6" />
+                                <path d="M4 19l3.35 -2" />
+                                <path d="M20 19l-3.35 -2" />
+                                <path d="M4 7l3.75 2.4" />
+                                <path d="M20 7l-3.75 2.4" />
+                            </svg>Force deploy (with
+                            debug)
+                        </div>
+                    </li>
+                    <li>
+                        <div class="rounded-none hover:bg-coollabs" wire:click='deploy(true)'><svg
+                                xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24"
+                                stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
+                                stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                                <path
+                                    d="M12.983 8.978c3.955 -.182 7.017 -1.446 7.017 -2.978c0 -1.657 -3.582 -3 -8 -3c-1.661 0 -3.204 .19 -4.483 .515m-2.783 1.228c-.471 .382 -.734 .808 -.734 1.257c0 1.22 1.944 2.271 4.734 2.74" />
+                                <path
+                                    d="M4 6v6c0 1.657 3.582 3 8 3c.986 0 1.93 -.067 2.802 -.19m3.187 -.82c1.251 -.53 2.011 -1.228 2.011 -1.99v-6" />
+                                <path d="M4 12v6c0 1.657 3.582 3 8 3c3.217 0 5.991 -.712 7.261 -1.74m.739 -3.26v-4" />
+                                <path d="M3 3l18 18" />
+                            </svg>Force deploy (without
+                            cache)
+                        </div>
+                    </li>
+                </ul>
+            @endif
+        </div>
     </div>
 </div>
diff --git a/resources/views/livewire/server/new/by-ip.blade.php b/resources/views/livewire/server/new/by-ip.blade.php
index c9b6457ab..d6982c3f7 100644
--- a/resources/views/livewire/server/new/by-ip.blade.php
+++ b/resources/views/livewire/server/new/by-ip.blade.php
@@ -1,12 +1,12 @@
 <div>
     <h1>Create a new Server</h1>
-    <div class="pb-5 text-sm breadcrumbs">
-        <ul>
-            <li>
+    <nav class="flex pt-2 pb-10 text-sm">
+        <ol class="inline-flex items-center">
+            <li class="inline-flex items-center">
                 Servers are the main blocks of your infrastructure.
             </li>
-        </ul>
-    </div>
+        </ol>
+    </nav>
     <form class="flex flex-col gap-2" wire:submit.prevent='submit'>
         <div class="flex gap-2">
             <x-forms.input id="name" label="Name" required />
diff --git a/resources/views/livewire/server/proxy/deploy.blade.php b/resources/views/livewire/server/proxy/deploy.blade.php
index 4fc390e03..5f2575e78 100644
--- a/resources/views/livewire/server/proxy/deploy.blade.php
+++ b/resources/views/livewire/server/proxy/deploy.blade.php
@@ -1,37 +1,39 @@
 <div>
     @if ($server->settings->is_validated)
         @if ($server->extra_attributes->proxy_status === 'running')
-            <div class="dropdown dropdown-bottom">
+            <div class="group">
                 <label tabindex="0" class="flex items-center gap-2 cursor-pointer hover:text-white"> Actions
                     <x-chevron-down />
                 </label>
-                <ul tabindex="0"
-                    class="mt-1 text-xs text-white normal-case rounded min-w-max dropdown-content menu bg-coolgray-200">
-                    <li>
-                        <div class="rounded-none hover:bg-coollabs" wire:click='deploy'><svg
-                                xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
-                                stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                                <path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" />
-                                <path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" />
-                                <path d="M12 9l0 3" />
-                                <path d="M12 15l.01 0" />
-                            </svg>Restart</div>
-                    </li>
-                    <li>
-                        <div class="rounded-none hover:bg-red-500" wire:click='stop'><svg
-                                xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24"
-                                stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
-                                stroke-linejoin="round">
-                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                                <path d="M8 13v-7.5a1.5 1.5 0 0 1 3 0v6.5" />
-                                <path d="M11 5.5v-2a1.5 1.5 0 1 1 3 0v8.5" />
-                                <path d="M14 5.5a1.5 1.5 0 0 1 3 0v6.5" />
-                                <path
-                                    d="M17 7.5a1.5 1.5 0 0 1 3 0v8.5a6 6 0 0 1 -6 6h-2h.208a6 6 0 0 1 -5.012 -2.7a69.74 69.74 0 0 1 -.196 -.3c-.312 -.479 -1.407 -2.388 -3.286 -5.728a1.5 1.5 0 0 1 .536 -2.022a1.867 1.867 0 0 1 2.28 .28l1.47 1.47" />
-                            </svg>Stop</div>
-                    </li>
-                </ul>
+                <div class="absolute hidden group-hover:block ">
+                    <ul tabindex="0" class="mt-1 text-xs text-white normal-case rounded min-w-max menu bg-coolgray-200">
+                        <li>
+                            <div class="rounded-none hover:bg-coollabs" wire:click='deploy'><svg
+                                    xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
+                                    stroke-linejoin="round">
+                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                                    <path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" />
+                                    <path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" />
+                                    <path d="M12 9l0 3" />
+                                    <path d="M12 15l.01 0" />
+                                </svg>Restart</div>
+                        </li>
+                        <li>
+                            <div class="rounded-none hover:bg-red-500" wire:click='stop'><svg
+                                    xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
+                                    stroke-linejoin="round">
+                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                                    <path d="M8 13v-7.5a1.5 1.5 0 0 1 3 0v6.5" />
+                                    <path d="M11 5.5v-2a1.5 1.5 0 1 1 3 0v8.5" />
+                                    <path d="M14 5.5a1.5 1.5 0 0 1 3 0v6.5" />
+                                    <path
+                                        d="M17 7.5a1.5 1.5 0 0 1 3 0v8.5a6 6 0 0 1 -6 6h-2h.208a6 6 0 0 1 -5.012 -2.7a69.74 69.74 0 0 1 -.196 -.3c-.312 -.479 -1.407 -2.388 -3.286 -5.728a1.5 1.5 0 0 1 .536 -2.022a1.867 1.867 0 0 1 2.28 .28l1.47 1.47" />
+                                </svg>Stop</div>
+                        </li>
+                    </ul>
+                </div>
             </div>
         @else
             <x-forms.button wire:click='deploy'> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="44"
diff --git a/resources/views/livewire/settings/form.blade.php b/resources/views/livewire/settings/form.blade.php
index 47e904126..e3443b888 100644
--- a/resources/views/livewire/settings/form.blade.php
+++ b/resources/views/livewire/settings/form.blade.php
@@ -1,13 +1,13 @@
 <div>
     <form wire:submit.prevent='submit' class="flex flex-col">
         <h1>Settings</h1>
-        <div class="pb-10 text-sm breadcrumbs">
-            <ul>
-                <li>
+        <nav class="flex pt-2 pb-10 text-sm">
+            <ol class="inline-flex items-center">
+                <li class="inline-flex items-center">
                     Instance wide settings for Coolify.
                 </li>
-            </ul>
-        </div>
+            </ol>
+        </nav>
         <div class="flex items-center gap-2">
             <h3>General</h3>
             <x-forms.button type="submit">
diff --git a/resources/views/private-key/new.blade.php b/resources/views/private-key/new.blade.php
index 16657c3a5..9f69dd44b 100644
--- a/resources/views/private-key/new.blade.php
+++ b/resources/views/private-key/new.blade.php
@@ -1,11 +1,11 @@
 <x-layout>
     <h1>Create a new Private Key</h1>
-    <div class="pb-5 text-sm breadcrumbs">
-        <ul>
-            <li>
+    <nav class="flex pt-2 pb-10 text-sm">
+        <ol class="inline-flex items-center">
+            <li class="inline-flex items-center">
                 Private Keys are used for connection to servers.
             </li>
-        </ul>
-    </div>
+        </ol>
+    </nav>
     <livewire:private-key.create />
 </x-layout>
diff --git a/resources/views/profile.blade.php b/resources/views/profile.blade.php
index 2023668ba..0c9e2382b 100644
--- a/resources/views/profile.blade.php
+++ b/resources/views/profile.blade.php
@@ -1,12 +1,13 @@
 <x-layout>
     <h1>Profile</h1>
-    <div class="pb-10 text-sm breadcrumbs">
-        <ul>
-            <li>
+    <nav class="flex pt-2 pb-10 text-sm">
+        <ol class="inline-flex items-center">
+            <li class="inline-flex items-center">
                 Your user profile settings.
             </li>
-        </ul>
-    </div>
+
+        </ol>
+    </nav>
     <livewire:profile.form :request="$request" />
     <h3 class="py-4">Two-factor Authentication</h3>
     @if (session('status') == 'two-factor-authentication-enabled')
diff --git a/resources/views/project/application/configuration.blade.php b/resources/views/project/application/configuration.blade.php
index 617f24f9c..2956ae145 100644
--- a/resources/views/project/application/configuration.blade.php
+++ b/resources/views/project/application/configuration.blade.php
@@ -1,19 +1,37 @@
 <x-layout>
     <h1>Configuration</h1>
-    <div class="pb-10 text-sm breadcrumbs">
-        <ul>
-            <li><a href="{{ route('project.show', ['project_uuid' => request()->route('project_uuid')]) }}">
+    <nav class="flex pt-2 pb-10 text-sm">
+        <ol class="inline-flex items-center">
+            <li class="inline-flex items-center">
+                <a href="{{ route('project.show', ['project_uuid' => request()->route('project_uuid')]) }}">
                     {{ $application->environment->project->name }}</a>
             </li>
-            <li><a
-                    href="{{ route('project.resources', ['environment_name' => request()->route('environment_name'), 'project_uuid' => request()->route('project_uuid')]) }}">{{ request()->route('environment_name') }}</a>
-            </li>
-            <li>{{ data_get($application, 'name') }}</li>
             <li>
-                <livewire:project.application.status :application="$application" />
+                <div class="flex items-center">
+                    <svg aria-hidden="true" class="w-4 h-4 mx-1 font-bold text-warning" fill="currentColor"
+                        viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd"
+                            d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                            clip-rule="evenodd"></path>
+                    </svg>
+                    <a
+                        href="{{ route('project.resources', ['environment_name' => request()->route('environment_name'), 'project_uuid' => request()->route('project_uuid')]) }}">{{ request()->route('environment_name') }}</a>
+                </div>
             </li>
-        </ul>
-    </div>
+            <li>
+                <div class="flex items-center">
+                    <svg aria-hidden="true" class="w-4 h-4 mx-1 font-bold text-warning" fill="currentColor"
+                        viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd"
+                            d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                            clip-rule="evenodd"></path>
+                    </svg>
+                    <span>{{ data_get($application, 'name') }}</span>
+                </div>
+            </li>
+        </ol>
+    </nav>
+
     <x-applications.navbar :application="$application" />
     <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex h-full pt-6">
         <div class="flex flex-col gap-4 min-w-fit">
diff --git a/resources/views/project/application/deployment.blade.php b/resources/views/project/application/deployment.blade.php
index 4def633e7..56fd86d5a 100644
--- a/resources/views/project/application/deployment.blade.php
+++ b/resources/views/project/application/deployment.blade.php
@@ -1,19 +1,49 @@
 <x-layout>
     <h1 class="py-0">Deployment</h1>
-    <div class="pb-10 text-sm breadcrumbs">
-        <ul>
-            <li><a
+    <nav class="flex pt-2 pb-10 text-sm">
+        <ol class="inline-flex items-center">
+            <li class="inline-flex items-center">
+                <a
                     href="{{ route('project.show', ['project_uuid' => request()->route('project_uuid')]) }}">{{ $application->environment->project->name }}</a>
             </li>
-            <li><a
-                    href="{{ route('project.resources', ['environment_name' => request()->route('environment_name'), 'project_uuid' => request()->route('project_uuid')]) }}">{{ request()->route('environment_name') }}</a>
-            </li>
-            <li>{{ data_get($application, 'name') }}</li>
             <li>
-                <livewire:project.application.status :application="$application" />
+                <div class="flex items-center">
+                    <svg aria-hidden="true" class="w-4 h-4 mx-1 font-bold text-warning" fill="currentColor"
+                        viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd"
+                            d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                            clip-rule="evenodd"></path>
+                    </svg>
+                    <a
+                        href="{{ route('project.resources', ['environment_name' => request()->route('environment_name'), 'project_uuid' => request()->route('project_uuid')]) }}">{{ request()->route('environment_name') }}</a>
+                </div>
             </li>
-        </ul>
-    </div>
+            <li>
+                <div class="flex items-center">
+                    <svg aria-hidden="true" class="w-4 h-4 mx-1 font-bold text-warning" fill="currentColor"
+                        viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd"
+                            d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                            clip-rule="evenodd"></path>
+                    </svg>
+                    <span>{{ data_get($application, 'name') }}</span>
+                </div>
+            </li>
+            <li>
+                <div class="flex items-center">
+                    <svg aria-hidden="true" class="w-4 h-4 mx-1 font-bold text-warning" fill="currentColor"
+                        viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd"
+                            d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                            clip-rule="evenodd"></path>
+                    </svg>
+                    <span>
+                        <livewire:project.application.status :application="$application" />
+                    </span>
+                </div>
+            </li>
+        </ol>
+    </nav>
     <x-applications.navbar :application="$application" />
     <livewire:project.application.deployment-logs :activity="$activity" :application="$application" :deployment_uuid="$deployment_uuid" />
 </x-layout>
diff --git a/resources/views/project/application/deployments.blade.php b/resources/views/project/application/deployments.blade.php
index c63d31877..a3c21bf23 100644
--- a/resources/views/project/application/deployments.blade.php
+++ b/resources/views/project/application/deployments.blade.php
@@ -1,19 +1,47 @@
 <x-layout>
     <h1>Deployments</h1>
-    <div class="pb-10 text-sm breadcrumbs">
-        <ul>
-            <li><a
+    <nav class="flex pt-2 pb-10 text-sm">
+        <ol class="inline-flex items-center">
+            <li class="inline-flex items-center">
+                <a
                     href="{{ route('project.show', ['project_uuid' => request()->route('project_uuid')]) }}">{{ $application->environment->project->name }}</a>
             </li>
-            <li><a
-                    href="{{ route('project.resources', ['environment_name' => request()->route('environment_name'), 'project_uuid' => request()->route('project_uuid')]) }}">{{ request()->route('environment_name') }}</a>
-            </li>
-            <li>{{ data_get($application, 'name') }}</li>
             <li>
-                <livewire:project.application.status :application="$application" />
+                <div class="flex items-center">
+                    <svg aria-hidden="true" class="w-4 h-4 mx-1 font-bold text-warning" fill="currentColor"
+                        viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd"
+                            d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                            clip-rule="evenodd"></path>
+                    </svg>
+                    <a
+                        href="{{ route('project.resources', ['environment_name' => request()->route('environment_name'), 'project_uuid' => request()->route('project_uuid')]) }}">{{ request()->route('environment_name') }}</a>
+                </div>
             </li>
-        </ul>
-    </div>
+            <li>
+                <div class="flex items-center">
+                    <svg aria-hidden="true" class="w-4 h-4 mx-1 font-bold text-warning" fill="currentColor"
+                        viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd"
+                            d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                            clip-rule="evenodd"></path>
+                    </svg>
+                    <span>{{ data_get($application, 'name') }}</span>
+                </div>
+            </li>
+            <li>
+                <div class="flex items-center">
+                    <svg aria-hidden="true" class="w-4 h-4 mx-1 font-bold text-warning" fill="currentColor"
+                        viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd"
+                            d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                            clip-rule="evenodd"></path>
+                    </svg>
+                    <livewire:project.application.status :application="$application" />
+                </div>
+            </li>
+        </ol>
+    </nav>
     <x-applications.navbar :application="$application" />
     <livewire:project.application.deployments :application_id="$application->id" />
 </x-layout>
diff --git a/resources/views/project/resources.blade.php b/resources/views/project/resources.blade.php
index c3201d9d5..c467ffe57 100644
--- a/resources/views/project/resources.blade.php
+++ b/resources/views/project/resources.blade.php
@@ -4,18 +4,26 @@
             <h1>Resources</h1>
             <livewire:project.delete-environment :environment_id="$environment->id" :resource_count="$environment->applications->count()" />
         </div>
-        <div class="pb-10 text-sm breadcrumbs">
-            <ul>
-                <li>
+        <nav class="flex pt-2 pb-10 text-sm">
+            <ol class="inline-flex items-center">
+                <li class="inline-flex items-center">
                     <a href="{{ route('project.show', ['project_uuid' => request()->route('project_uuid')]) }}">
                         {{ $project->name }}
                     </a>
                 </li>
                 <li>
-                    {{ request()->route('environment_name') }}
+                    <div class="flex items-center">
+                        <svg aria-hidden="true" class="w-4 h-4 mx-1 font-bold text-warning" fill="currentColor"
+                            viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                            <path fill-rule="evenodd"
+                                d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                                clip-rule="evenodd"></path>
+                        </svg>
+                        {{ request()->route('environment_name') }}
+                    </div>
                 </li>
-            </ul>
-        </div>
+            </ol>
+        </nav>
     </div>
     @if ($environment->applications->count() === 0)
         <p>No resources found.</p>
diff --git a/resources/views/project/show.blade.php b/resources/views/project/show.blade.php
index 979b59a28..418aaabdb 100644
--- a/resources/views/project/show.blade.php
+++ b/resources/views/project/show.blade.php
@@ -3,11 +3,13 @@
         <h1>Environments</h1>
         <livewire:project.delete-project :project_id="$project->id" :resource_count="$project->applications->count()" />
     </div>
-    <div class="pb-10 text-sm breadcrumbs">
-        <ul>
-            <li>{{ $project->name }} </li>
-        </ul>
-    </div>
+    <nav class="flex pt-2 pb-10 text-sm">
+        <ol class="inline-flex items-center">
+            <li class="inline-flex items-center">
+                {{ $project->name }}
+            </li>
+        </ol>
+    </nav>
     <div class="grid grid-cols-2 gap-2">
         @forelse ($project->environments as $environment)
             <a class="box" href="{{ route('project.resources', [$project->uuid, $environment->name]) }}">
diff --git a/resources/views/projects.blade.php b/resources/views/projects.blade.php
index 1fc8796d7..c99fc5723 100644
--- a/resources/views/projects.blade.php
+++ b/resources/views/projects.blade.php
@@ -1,12 +1,13 @@
 <x-layout>
     <h1>Projects</h1>
-    <div class="pb-10 text-sm breadcrumbs">
-        <ul>
-            <li>
+    <nav class="flex pt-2 pb-10 text-sm">
+        <ol class="inline-flex items-center">
+            <li class="inline-flex items-center">
                 All Projects
             </li>
-        </ul>
-    </div>
+
+        </ol>
+    </nav>
     <div class="grid grid-cols-2 gap-2">
         @forelse ($projects as $project)
             <a href="{{ route('project.show', ['project_uuid' => data_get($project, 'uuid')]) }}"
diff --git a/resources/views/server/all.blade.php b/resources/views/server/all.blade.php
index 8249bff58..7f157a856 100644
--- a/resources/views/server/all.blade.php
+++ b/resources/views/server/all.blade.php
@@ -1,12 +1,12 @@
 <x-layout>
     <h1>Servers</h1>
-    <div class="pb-10 text-sm breadcrumbs">
-        <ul>
-            <li>
+    <nav class="flex pt-2 pb-10 text-sm">
+        <ol class="inline-flex items-center">
+            <li class="inline-flex items-center">
                 All Servers
             </li>
-        </ul>
-    </div>
+        </ol>
+    </nav>
     <div class="grid grid-cols-2 gap-2">
         @forelse ($servers as $server)
             <a class="text-center hover:no-underline box group"
diff --git a/vite.config.js b/vite.config.js
index f506ed458..6fbf344f3 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,6 +1,6 @@
-import { defineConfig } from 'vite';
-import laravel from 'laravel-vite-plugin';
-import vue from '@vitejs/plugin-vue';
+import { defineConfig } from "vite";
+import laravel from "laravel-vite-plugin";
+import vue from "@vitejs/plugin-vue";
 
 export default defineConfig({
     server: {
@@ -23,10 +23,7 @@ export default defineConfig({
     },
     plugins: [
         laravel({
-            input: [
-                'resources/css/app.css',
-                'resources/js/app.js',
-            ],
+            input: ["resources/css/app.css", "resources/js/app.js"],
             refresh: true,
         }),
         vue({
@@ -40,7 +37,7 @@ export default defineConfig({
     ],
     resolve: {
         alias: {
-            vue: 'vue/dist/vue.esm-bundler.js',
+            vue: "vue/dist/vue.esm-bundler.js",
         },
     },
 });