From bdb367555d1db003931c0096467ad731566afb51 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Wed, 5 Aug 2026 22:34:56 +0200
Subject: [PATCH] feat(ui): unify brand accents and polish shared controls

Standardize highlighted buttons, selected controls, and loading
indicators on coollabs accent colors; improve light-mode log toolbar
styling; enhance small popups with compact/icon modes; and align
navbars, helpers, and related layouts with matching tests.
---
 config/livewire.php                           |  2 +-
 resources/css/app.css                         | 36 ++++++++---
 resources/css/utilities.css                   | 12 ++++
 .../application/settings-section.blade.php    | 15 +++--
 .../components/applications/links.blade.php   |  8 ++-
 .../components/breadcrumb-switcher.blade.php  |  3 -
 .../components/dashboard/navbar.blade.php     | 28 ++++++++-
 resources/views/components/helper.blade.php   | 16 ++++-
 resources/views/components/loading.blade.php  |  2 +-
 .../views/components/page-loading.blade.php   |  2 +-
 .../views/components/popup-small.blade.php    | 60 +++++++++++++++++--
 .../views/components/project/navbar.blade.php |  2 +-
 .../server/provider-link-modal.blade.php      |  2 +-
 .../server/provider-token-picker.blade.php    |  2 +-
 .../views/components/services/links.blade.php |  9 ++-
 .../shared-variables/editor.blade.php         | 17 +++---
 .../components/table-pagination.blade.php     |  2 +-
 .../views/components/team/navbar.blade.php    |  2 +-
 .../views/components/top-breadcrumb.blade.php |  9 ---
 .../views/components/unsaved-bar.blade.php    |  4 +-
 .../components/upgrade-progress.blade.php     |  2 +-
 resources/views/livewire/dashboard.blade.php  |  4 +-
 .../livewire/deployments-indicator.blade.php  |  2 +-
 .../livewire/destination/index.blade.php      |  2 +-
 .../livewire/destination/new/docker.blade.php |  2 +-
 .../views/livewire/layout-popups.blade.php    |  2 +-
 .../livewire/notifications/email.blade.php    |  2 +-
 .../livewire/project/add-empty.blade.php      |  2 +-
 .../application/backup/create.blade.php       |  2 +-
 .../application/backup/index.blade.php        |  2 +-
 .../application/deployment/show.blade.php     | 16 ++---
 .../project/application/domains.blade.php     |  2 +-
 .../views/livewire/project/index.blade.php    |  6 +-
 .../livewire/project/new/select.blade.php     |  8 +--
 .../livewire/project/resource/index.blade.php |  8 +--
 .../project/service/configuration.blade.php   |  4 +-
 .../project/service/domains.blade.php         |  2 +-
 .../project/service/storage.blade.php         |  2 +-
 .../service/volume-backup/index.blade.php     |  2 +-
 .../shared/configuration-checker.blade.php    | 10 +++-
 .../shared/environment-variable/all.blade.php |  4 +-
 .../shared/scheduled-task/all.blade.php       |  2 +-
 .../livewire/project/shared/tags.blade.php    |  2 +-
 .../views/livewire/project/show.blade.php     |  8 +--
 .../livewire/security/api-tokens.blade.php    |  2 +-
 .../security/cloud-init-script-form.blade.php |  2 +-
 .../security/cloud-init-scripts.blade.php     |  2 +-
 .../cloud-provider-token-form.blade.php       |  2 +-
 .../security/cloud-provider-tokens.blade.php  |  2 +-
 .../security/private-key/create.blade.php     |  2 +-
 .../security/private-key/index.blade.php      |  2 +-
 .../views/livewire/server/create.blade.php    |  2 +-
 .../views/livewire/server/index.blade.php     |  6 +-
 .../server/new/by-digital-ocean.blade.php     |  2 +-
 .../livewire/server/new/by-hetzner.blade.php  |  2 +-
 .../views/livewire/server/new/by-ip.blade.php |  2 +-
 .../livewire/server/new/by-vultr.blade.php    |  2 +-
 .../livewire/source/github/change.blade.php   |  4 +-
 .../livewire/source/gitlab/change.blade.php   |  2 +-
 .../views/livewire/storage/index.blade.php    |  2 +-
 .../views/livewire/switch-team.blade.php      |  6 --
 resources/views/livewire/tags/show.blade.php  | 12 ++--
 .../views/livewire/team/create.blade.php      |  2 +-
 .../views/livewire/team/invite-link.blade.php |  2 +-
 resources/views/livewire/upgrade.blade.php    |  2 +-
 resources/views/source/all.blade.php          |  2 +-
 .../Feature/BreadcrumbSelectionStyleTest.php  | 14 +++++
 .../DashboardServersEmptyStateTest.php        |  1 +
 .../Feature/DeploymentLogToolbarStyleTest.php | 20 +++++++
 .../EnvironmentVariableTableLayoutTest.php    |  7 +++
 tests/Feature/HelperInfoButtonTest.php        |  2 +-
 .../Feature/HighlightedButtonStylingTest.php  | 19 ++++++
 .../Livewire/ConfigurationCheckerTest.php     | 19 ++++++
 tests/Feature/LivewireLoadingColorTest.php    | 22 +++++++
 .../ResourceHeadingUnifiedNavbarTest.php      |  4 +-
 tests/Feature/SentinelUnsavedBarFlashTest.php |  9 +++
 tests/Feature/ServerIndexViewSwitcherTest.php | 22 +++++++
 .../SettingsSectionDescriptionTest.php        |  7 ++-
 .../SharedVariablesTitleOnDesktopTest.php     | 22 +++++--
 tests/Feature/StorageSettingsLayoutTest.php   |  2 +-
 tests/Feature/TagsShowPageTest.php            |  7 +++
 81 files changed, 423 insertions(+), 149 deletions(-)
 create mode 100644 tests/Feature/BreadcrumbSelectionStyleTest.php
 create mode 100644 tests/Feature/DeploymentLogToolbarStyleTest.php
 create mode 100644 tests/Feature/HighlightedButtonStylingTest.php
 create mode 100644 tests/Feature/LivewireLoadingColorTest.php
 create mode 100644 tests/Feature/ServerIndexViewSwitcherTest.php

diff --git a/config/livewire.php b/config/livewire.php
index bd3733076..efe1002e5 100644
--- a/config/livewire.php
+++ b/config/livewire.php
@@ -118,7 +118,7 @@ return [
 
     'navigate' => [
         'show_progress_bar' => true,
-        'progress_bar_color' => '#ffff00',
+        'progress_bar_color' => '#6b16ed',
     ],
 
     /*
diff --git a/resources/css/app.css b/resources/css/app.css
index 3f0e28743..a0b80d195 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -268,7 +268,7 @@ button[isError]:not(:disabled) {
 }
 
 button[isHighlighted]:not(:disabled) {
-    @apply text-coollabs-200 bg-coollabs-50 border-coollabs hover:bg-coollabs hover:text-white dark:bg-warning/15 dark:text-warning dark:border-warning/25 dark:hover:bg-warning/20 dark:hover:text-warning;
+    @apply button-highlighted;
 }
 
 h1 {
@@ -2427,11 +2427,16 @@ input[type="search"]::-webkit-search-results-decoration {
    Mobile stacks: search → meta → full-width actions (no side-by-side overlap). */
 .logs-viewer-toolbar {
     flex-shrink: 0;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-    background: rgba(255, 255, 255, 0.035);
+    border-bottom: 1px solid var(--color-neutral-200);
+    background: var(--color-neutral-50);
     padding: 0.5rem 0.75rem;
 }
 
+.dark .logs-viewer-toolbar {
+    border-bottom-color: rgba(255, 255, 255, 0.08);
+    background: rgba(255, 255, 255, 0.035);
+}
+
 .logs-viewer-toolbar-controls {
     display: flex;
     min-width: 0;
@@ -2503,11 +2508,17 @@ input[type="search"]::-webkit-search-results-decoration {
 .logs-viewer-status-badge {
     height: 1.5rem !important;
     flex-shrink: 0;
-    border-color: rgba(255, 255, 255, 0.1) !important;
-    background: rgba(255, 255, 255, 0.05) !important;
+    border-color: var(--color-neutral-200) !important;
+    background: white !important;
     padding-inline: 0.5rem !important;
     font-size: 0.6875rem !important;
     font-weight: 500 !important;
+    color: var(--color-neutral-700) !important;
+}
+
+.dark .logs-viewer-status-badge {
+    border-color: rgba(255, 255, 255, 0.1) !important;
+    background: rgba(255, 255, 255, 0.05) !important;
     color: #d4d4d4 !important;
 }
 
@@ -2615,18 +2626,27 @@ input[type="search"]::-webkit-search-results-decoration {
     align-items: center;
     justify-content: center;
     border-radius: 0.5rem;
-    color: #a3a3a3;
+    color: var(--color-neutral-500);
     transition: color 0.15s, background-color 0.15s;
 }
 
 .logs-viewer-btn:hover {
+    background: var(--color-neutral-100);
+    color: var(--color-neutral-900);
+}
+
+.dark .logs-viewer-btn {
+    color: #a3a3a3;
+}
+
+.dark .logs-viewer-btn:hover {
     background: rgba(255, 255, 255, 0.06);
     color: #f5f5f5;
 }
 
 .logs-viewer-btn-active {
-    background: color-mix(in oklab, var(--color-warning) 14%, transparent);
-    color: var(--color-warning);
+    background: var(--color-coollabs);
+    color: #fff;
 }
 
 .logs-viewer-viewport {
diff --git a/resources/css/utilities.css b/resources/css/utilities.css
index 74ab1c4e0..6f139cd21 100644
--- a/resources/css/utilities.css
+++ b/resources/css/utilities.css
@@ -130,6 +130,18 @@
     @apply inline-flex shrink-0 gap-1.5 justify-center items-center whitespace-nowrap px-2.5 h-9 min-h-9 text-[13px] text-black normal-case rounded-md border outline-0 cursor-pointer font-medium transition-colors bg-white border-neutral-200 hover:bg-neutral-100 dark:bg-white/[0.06] dark:text-fg dark:hover:text-fg dark:hover:bg-white/[0.1] dark:border-white/[0.08] hover:text-black disabled:cursor-not-allowed min-w-fit dark:disabled:text-fg-faint disabled:border-neutral-200 dark:disabled:border-white/[0.06] disabled:hover:bg-transparent disabled:bg-transparent disabled:text-neutral-300 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent;
 }
 
+@utility button-highlighted {
+    @apply border-2 text-coollabs-200 dark:text-white bg-coollabs-50 dark:bg-coollabs/20 border-coollabs dark:border-coollabs-100 hover:bg-coollabs hover:text-white dark:hover:bg-coollabs-100 dark:hover:text-white;
+}
+
+@utility control-selected {
+    @apply bg-coollabs text-white dark:bg-coollabs dark:text-white;
+}
+
+@utility loading-indicator {
+    @apply text-coollabs dark:text-coollabs-100;
+}
+
 /* Compact icon-only control (gear, chevrons, etc.) */
 @utility icon-button {
     @apply inline-flex size-7 shrink-0 items-center justify-center rounded-md border border-transparent text-neutral-400 outline-0 transition-colors hover:bg-neutral-100 hover:text-black focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent disabled:pointer-events-none disabled:opacity-35 dark:text-fg-faint dark:hover:bg-white/[0.07] dark:hover:text-fg;
diff --git a/resources/views/components/application/settings-section.blade.php b/resources/views/components/application/settings-section.blade.php
index ad6e3f78b..27b087bd5 100644
--- a/resources/views/components/application/settings-section.blade.php
+++ b/resources/views/components/application/settings-section.blade.php
@@ -6,13 +6,18 @@
 ])
 
 <section {{ $attributes->merge(['class' => 'application-settings-section']) }}>
-    <header @class(['items-start!' => filled($description ?? $helper)])>
+    <header>
         <div class="min-w-0 py-0.5">
-            <h3>{{ $title }}</h3>
             @if (filled($description ?? $helper))
-                <p class="mt-0.5 text-xs leading-4 text-neutral-500 dark:text-[var(--coollabs-subtle)]">
-                    {!! $description ?? $helper !!}
-                </p>
+                <h3>
+                    <x-helper :helper="$description ?? $helper" :label="'More information about '.$title">
+                        <x-slot:trigger>
+                            <span class="underline underline-offset-4">{{ $title }}</span>
+                        </x-slot:trigger>
+                    </x-helper>
+                </h3>
+            @else
+                <h3>{{ $title }}</h3>
             @endif
         </div>
         @isset($actions)
diff --git a/resources/views/components/applications/links.blade.php b/resources/views/components/applications/links.blade.php
index adddc9e75..647dc1ab9 100644
--- a/resources/views/components/applications/links.blade.php
+++ b/resources/views/components/applications/links.blade.php
@@ -27,8 +27,12 @@
             <x-reicon name="chevron-down" class="size-3 opacity-55" />
         </span>
     </button>
-    <div x-show="open" x-cloak x-transition.origin.top.right
-        class="listbox-panel top-full! right-0! left-auto! mt-1! min-w-60! max-w-96!" role="menu">
+    <div x-show="open" x-cloak x-transition.origin.top.right role="menu"
+        @class([
+            'listbox-panel top-full! mt-1!',
+            'left-0! right-0! w-full! min-w-0! max-w-none!' => $fullWidth,
+            'right-0! left-auto! min-w-60! max-w-96!' => !$fullWidth,
+        ])>
         @if ($hasLinks)
             @if (data_get($application, 'gitBrancLocation'))
                 <a target="_blank" class="{{ $linkItemClasses }}" href="{{ $application->gitBranchLocation }}">
diff --git a/resources/views/components/breadcrumb-switcher.blade.php b/resources/views/components/breadcrumb-switcher.blade.php
index 3e59ccb52..85a95094b 100644
--- a/resources/views/components/breadcrumb-switcher.blade.php
+++ b/resources/views/components/breadcrumb-switcher.blade.php
@@ -25,9 +25,6 @@
             <a href="{{ $item['href'] }}" {{ wireNavigate() }} @click="open = false"
                 class="listbox-option {{ $item['active'] ? 'bg-neutral-100 font-medium text-black dark:bg-white/[0.07] dark:text-fg' : '' }}">
                 <span class="min-w-0 flex-1 truncate">{{ $item['label'] }}</span>
-                @if ($item['active'])
-                    <x-reicon name="check-circle" class="size-3.5 shrink-0 text-warning" />
-                @endif
             </a>
         @endforeach
     </div>
diff --git a/resources/views/components/dashboard/navbar.blade.php b/resources/views/components/dashboard/navbar.blade.php
index c7ce62750..0cb7520f4 100644
--- a/resources/views/components/dashboard/navbar.blade.php
+++ b/resources/views/components/dashboard/navbar.blade.php
@@ -79,6 +79,14 @@
     $hasTitle = filled($title);
     $hasActions = isset($actions);
     $showNav = $showTabs || $hasActions;
+    $stackTabsOnMobile = $section === 'shared-variables';
+    $sharedVariableIcons = [
+        'Overview' => 'dashboard',
+        'Team' => 'teams',
+        'Projects' => 'projects',
+        'Environments' => 'layers',
+        'Servers' => 'servers',
+    ];
 @endphp
 
 @if ($hasTitle)
@@ -123,8 +131,24 @@
         <div
             class="flex w-full flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-3 lg:h-full lg:gap-4">
             @if ($showTabs)
-            <div
-                class="flex min-w-0 w-full items-center gap-0.5 overflow-x-auto rounded-[10px] border border-neutral-200 bg-neutral-100 p-1 sm:flex-1 dark:border-white/[0.07] dark:bg-white/[0.035]">
+            @if ($stackTabsOnMobile)
+                <div
+                    class="grid grid-cols-2 gap-0.5 border-y border-neutral-200 py-3 sm:grid-cols-3 lg:hidden dark:border-white/[0.06]">
+                    @foreach ($items as $item)
+                        <a @class([
+                            'menu-item',
+                            'menu-item-active' => $item['active'],
+                        ]) {{ wireNavigate() }} href="{{ route($item['route'], $parameters) }}">
+                            <x-reicon :name="$sharedVariableIcons[$item['label']]" class="menu-item-icon" />
+                            <span class="menu-item-label">{{ $item['label'] }}</span>
+                        </a>
+                    @endforeach
+                </div>
+            @endif
+            <div @class([
+                'flex min-w-0 w-full items-center gap-0.5 overflow-x-auto rounded-[10px] border border-neutral-200 bg-neutral-100 p-1 sm:flex-1 dark:border-white/[0.07] dark:bg-white/[0.035]',
+                'hidden lg:flex' => $stackTabsOnMobile,
+            ])>
                 @foreach ($items as $item)
                     <a @class([
                         'app-tab shrink-0',
diff --git a/resources/views/components/helper.blade.php b/resources/views/components/helper.blade.php
index 10d8fd28e..79870196a 100644
--- a/resources/views/components/helper.blade.php
+++ b/resources/views/components/helper.blade.php
@@ -1,3 +1,8 @@
+@props([
+    'helper',
+    'label' => 'More information',
+])
+
 <div x-data="{
     open: false,
     pinned: false,
@@ -55,10 +60,15 @@
     {{ $attributes->merge(['class' => 'relative z-10 inline-block align-middle']) }}>
     {{-- button (not div) so label-for associations do not steal the click on mobile --}}
     <button type="button" x-ref="trigger"
-        class="info-helper relative z-10 inline-flex size-3.5 shrink-0 items-center justify-center border-0 bg-transparent p-0 leading-none"
-        aria-label="More information" @mouseenter="show(false)" @mouseleave="hide"
+        @class([
+            'info-helper relative z-10 inline-flex shrink-0 items-center justify-center border-0 bg-transparent p-0 leading-none',
+            'size-3.5' => ! isset($trigger),
+        ])
+        aria-label="{{ $label }}" @mouseenter="show(false)" @mouseleave="hide"
         @click.prevent.stop="open && pinned ? close() : show(true)">
-        @isset($icon)
+        @isset($trigger)
+            {{ $trigger }}
+        @elseif (isset($icon))
             {{ $icon }}
         @else
             <x-reicon name="info-circle"
diff --git a/resources/views/components/loading.blade.php b/resources/views/components/loading.blade.php
index 16166b6e1..8fd405ca5 100644
--- a/resources/views/components/loading.blade.php
+++ b/resources/views/components/loading.blade.php
@@ -2,7 +2,7 @@
 
 <div {{ $attributes->merge(['class' => 'inline-flex items-center justify-center gap-2 text-[13px] text-neutral-500 dark:text-fg-dim']) }}
     role="status" aria-live="polite">
-    <svg @class(['shrink-0 animate-spin', 'size-3' => $compact, 'size-4' => ! $compact]) viewBox="0 0 24 24"
+    <svg @class(['loading-indicator shrink-0 animate-spin', 'size-3' => $compact, 'size-4' => ! $compact]) viewBox="0 0 24 24"
         fill="none" aria-hidden="true">
         <circle class="opacity-20" cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2" />
         <path class="opacity-80" d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" stroke-width="2"
diff --git a/resources/views/components/page-loading.blade.php b/resources/views/components/page-loading.blade.php
index ca2a89e31..33572563d 100644
--- a/resources/views/components/page-loading.blade.php
+++ b/resources/views/components/page-loading.blade.php
@@ -3,7 +3,7 @@
     @if (isset($text))
         <div>{{ $text }}</div>
     @endif
-    <svg class="w-4 h-4 mx-1 ml-3 text-coollabs dark:text-warning animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none"
+    <svg class="loading-indicator w-4 h-4 mx-1 ml-3 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none"
         viewBox="0 0 24 24">
         <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
         <path class="opacity-75" fill="currentColor"
diff --git a/resources/views/components/popup-small.blade.php b/resources/views/components/popup-small.blade.php
index 9b17ddc35..78e6e468e 100644
--- a/resources/views/components/popup-small.blade.php
+++ b/resources/views/components/popup-small.blade.php
@@ -1,14 +1,60 @@
-@props(['title' => 'Default title', 'description' => 'Default description'])
+@props([
+    'title' => 'Default title',
+    'description' => 'Default description',
+    'compactAfter' => null,
+    'compactStorageKey' => null,
+    'compactStoragePrefix' => null,
+])
 
-<div x-data="{ bannerVisible: true }" x-show="bannerVisible" x-cloak
+<template x-teleport="body">
+<div x-data="{
+        bannerVisible: true,
+        compact: false,
+        iconOnly: false,
+        storageKey: @js($compactStorageKey),
+        storagePrefix: @js($compactStoragePrefix),
+        init() {
+            if (this.storagePrefix) {
+                Object.keys(localStorage)
+                    .filter(key => key.startsWith(this.storagePrefix) && key !== this.storageKey)
+                    .forEach(key => localStorage.removeItem(key));
+            }
+
+            const storedState = this.storageKey ? localStorage.getItem(this.storageKey) : null;
+            this.iconOnly = storedState === 'icon';
+            this.compact = this.iconOnly || storedState === 'compact';
+
+            if (!this.compact && {{ $compactAfter ?? 'false' }}) {
+                setTimeout(() => {
+                    if (this.iconOnly) return;
+                    this.compact = true;
+                    if (this.storageKey) localStorage.setItem(this.storageKey, 'compact');
+                }, {{ $compactAfter ?? 0 }});
+            }
+        },
+        minimizeToIcon() {
+            this.iconOnly = true;
+            this.compact = true;
+            if (this.storageKey) localStorage.setItem(this.storageKey, 'icon');
+        },
+        restore() {
+            if (!this.compact && !this.iconOnly) return;
+            this.iconOnly = false;
+            this.compact = false;
+            if (this.storageKey) localStorage.setItem(this.storageKey, 'compact');
+        },
+    }"
+    x-show="bannerVisible" x-cloak
     x-transition:enter="transition ease-out duration-200"
     x-transition:enter-start="translate-y-3 opacity-0"
     x-transition:enter-end="translate-y-0 opacity-100"
     x-transition:leave="transition ease-in duration-150"
     x-transition:leave-start="translate-y-0 opacity-100"
     x-transition:leave-end="translate-y-3 opacity-0"
-    class="fixed bottom-4 right-4 z-999 w-[calc(100%-2rem)] max-w-sm">
+    class="fixed bottom-4 right-4 z-999"
+    :class="compact ? 'w-auto max-w-[calc(100%-2rem)]' : 'w-[calc(100%-2rem)] max-w-sm'">
     <div class="relative flex items-start gap-2.5 rounded-lg p-3 pr-10"
+        :class="compact ? (iconOnly ? 'cursor-pointer p-2! pr-2!' : 'cursor-pointer') : ''" @click="restore()"
         style="background: var(--coollabs-elevated); box-shadow: 0 0 0 1px var(--coollabs-line), var(--shadow-modal);">
         @isset($icon)
             <div
@@ -17,18 +63,20 @@
             </div>
         @endisset
 
-        <div class="min-w-0 flex-1">
+        <div x-show="!iconOnly" class="min-w-0 flex-1">
             <h4 class="text-[13px] font-semibold leading-4 text-neutral-950 dark:text-fg">
                 {{ $title }}
             </h4>
-            <div class="mt-0.5 text-[11px] leading-4 text-neutral-600 dark:text-fg-dim">
+            <div x-show="!compact" x-transition.opacity
+                class="mt-0.5 text-[11px] leading-4 text-neutral-600 dark:text-fg-dim">
                 {{ $description }}
             </div>
         </div>
 
-        <button type="button" @click="bannerVisible = false" aria-label="Dismiss"
+        <button x-show="!iconOnly" type="button" @click.stop="minimizeToIcon()" aria-label="Minimize warning"
             class="absolute right-2 top-2 flex size-6 items-center justify-center rounded-md text-neutral-400 transition-colors hover:bg-black/5 hover:text-neutral-700 dark:text-fg-faint dark:hover:bg-white/[0.06] dark:hover:text-fg">
             <x-reicon name="x" class="size-3.5" />
         </button>
     </div>
 </div>
+</template>
diff --git a/resources/views/components/project/navbar.blade.php b/resources/views/components/project/navbar.blade.php
index 346234bbd..2eddaad5b 100644
--- a/resources/views/components/project/navbar.blade.php
+++ b/resources/views/components/project/navbar.blade.php
@@ -44,7 +44,7 @@
                 @endisset
                 @can('createAnyResource')
                     <a href="{{ route('project.resource.create', $environmentParameters) }}" {{ wireNavigate() }}
-                        class="button bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!">
+                        class="button button-highlighted">
                         <x-reicon name="plus" class="size-3.5" />
                         New resource
                     </a>
diff --git a/resources/views/components/server/provider-link-modal.blade.php b/resources/views/components/server/provider-link-modal.blade.php
index 193a712b0..f180457fa 100644
--- a/resources/views/components/server/provider-link-modal.blade.php
+++ b/resources/views/components/server/provider-link-modal.blade.php
@@ -86,7 +86,7 @@
                     <x-status-badge label="Match found" type="success" />
                 </div>
                 <button type="button"
-                    class="button mt-3 bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!"
+                    class="button mt-3 button-highlighted"
                     wire:click="{{ $linkMethod }}">
                     Link resource
                 </button>
diff --git a/resources/views/components/server/provider-token-picker.blade.php b/resources/views/components/server/provider-token-picker.blade.php
index 3cf124550..aa05a4e7e 100644
--- a/resources/views/components/server/provider-token-picker.blade.php
+++ b/resources/views/components/server/provider-token-picker.blade.php
@@ -14,7 +14,7 @@
                 <x-modal-input title="Add {{ $providerLabel }} Token">
                     <x-slot:content>
                         <button type="button"
-                            class="button bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!">
+                            class="button button-highlighted">
                             <x-reicon name="plus" class="size-3.5" />
                             Add token
                         </button>
diff --git a/resources/views/components/services/links.blade.php b/resources/views/components/services/links.blade.php
index ed34389d8..60e79247b 100644
--- a/resources/views/components/services/links.blade.php
+++ b/resources/views/components/services/links.blade.php
@@ -16,9 +16,12 @@
             <x-reicon name="chevron-down" class="size-3 opacity-55" />
         </span>
     </button>
-    <div x-show="open" x-cloak x-transition.origin.top.right
-        class="listbox-panel top-full! right-0! left-auto! mt-1! min-w-60! max-w-96! max-h-80! overflow-y-auto!"
-        role="menu">
+    <div x-show="open" x-cloak x-transition.origin.top.right role="menu"
+        @class([
+            'listbox-panel top-full! mt-1! max-h-80! overflow-y-auto!',
+            'left-0! right-0! w-full! min-w-0! max-w-none!' => $fullWidth,
+            'right-0! left-auto! min-w-60! max-w-96!' => !$fullWidth,
+        ])>
         @forelse ($links as $link)
             <a class="{{ $linkItemClasses }}" target="_blank" href="{{ $link }}">
                 <span class="min-w-0 truncate">{{ $link }}</span>
diff --git a/resources/views/components/shared-variables/editor.blade.php b/resources/views/components/shared-variables/editor.blade.php
index 93959581f..4ede81707 100644
--- a/resources/views/components/shared-variables/editor.blade.php
+++ b/resources/views/components/shared-variables/editor.blade.php
@@ -30,7 +30,9 @@
     }
 }">
     <x-dashboard.navbar section="shared-variables" title="Shared variables"
-        subtitle="Reusable environment variables across resources" :titleOnDesktop="false">
+        subtitle="Reusable environment variables across resources" :titleOnDesktop="false" />
+
+    <x-application.settings-section :title="$title" flush>
         <x-slot:actions>
             <x-forms.button type="button" wire:click="switch" class="whitespace-nowrap">
                 <x-reicon :name="$view === 'normal' ? 'browser-code' : 'unordered-list'" class="size-3.5" />
@@ -38,9 +40,6 @@
                 <span class="sm:hidden">{{ $view === 'normal' ? 'Developer' : 'Normal' }}</span>
             </x-forms.button>
         </x-slot:actions>
-    </x-dashboard.navbar>
-
-    <x-application.settings-section :title="$title" flush>
         @if ($view === 'normal')
             <div
                 class="flex flex-col gap-3 border-b border-neutral-200 p-3 sm:flex-row sm:items-center sm:justify-between dark:border-white/[0.08]">
@@ -89,7 +88,7 @@
                         <x-modal-input title="New Shared Variable">
                             <x-slot:content>
                                 <button type="button"
-                                    class="button bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!">
+                                    class="button button-highlighted">
                                     <x-reicon name="plus" class="size-3.5" />
                                     Add variable
                                 </button>
@@ -101,9 +100,11 @@
             </div>
 
             @if ($variables->isEmpty())
-                <x-empty title="No shared variables"
-                    description="Add a variable to make it available to resources in this scope."
-                    icon-name="variables" size="sm" />
+                <div class="p-3">
+                    <x-empty title="No shared variables"
+                        description="Add a variable to make it available to resources in this scope."
+                        icon-name="variables" size="sm" />
+                </div>
             @else
                 <div class="data-table flex w-full flex-col">
                     <div class="data-table-header env-table-grid-shared order-[-1]">
diff --git a/resources/views/components/table-pagination.blade.php b/resources/views/components/table-pagination.blade.php
index 56c3cc6df..df00fd7af 100644
--- a/resources/views/components/table-pagination.blade.php
+++ b/resources/views/components/table-pagination.blade.php
@@ -52,7 +52,7 @@
                 <span wire:loading.remove wire:target="{{ $wireTarget }}">{{ $currentPage }}</span>
                 <span wire:loading.inline-flex wire:target="{{ $wireTarget }}" class="inline-flex items-center"
                     aria-live="polite">
-                    <svg class="size-3.5 animate-spin text-coollabs dark:text-warning"
+                    <svg class="loading-indicator size-3.5 animate-spin"
                         xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
                         <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                             stroke-width="4"></circle>
diff --git a/resources/views/components/team/navbar.blade.php b/resources/views/components/team/navbar.blade.php
index b434b1559..332465dcb 100644
--- a/resources/views/components/team/navbar.blade.php
+++ b/resources/views/components/team/navbar.blade.php
@@ -18,7 +18,7 @@
             <x-modal-input title="New Team">
                 <x-slot:content>
                     <button type="button"
-                        class="button bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!">
+                        class="button button-highlighted">
                         <x-reicon name="plus" class="size-3.5" />
                         New team
                     </button>
diff --git a/resources/views/components/top-breadcrumb.blade.php b/resources/views/components/top-breadcrumb.blade.php
index ff029ac11..3c22d2cbf 100644
--- a/resources/views/components/top-breadcrumb.blade.php
+++ b/resources/views/components/top-breadcrumb.blade.php
@@ -106,9 +106,6 @@
                     <a href="{{ $destination['href'] }}" {{ wireNavigate() }} @click="open = false"
                         class="listbox-option {{ $destination['label'] === $dashboardContext ? 'bg-neutral-100 font-medium text-black dark:bg-white/[0.07] dark:text-fg' : '' }}">
                         <span class="min-w-0 flex-1 truncate">{{ $destination['label'] }}</span>
-                        @if ($destination['label'] === $dashboardContext)
-                            <x-reicon name="check-circle" class="size-3.5 shrink-0 text-warning" />
-                        @endif
                     </a>
                 @endforeach
             </div>
@@ -214,9 +211,6 @@
                     <a href="{{ route($projectDestinationRoute, ['project_uuid' => $p->uuid]) }}" {{ wireNavigate() }} @click="open = false"
                         class="listbox-option {{ $p->uuid === $currentProject->uuid ? 'bg-neutral-100 font-medium text-black dark:bg-white/[0.07] dark:text-fg' : '' }}">
                         <span class="min-w-0 flex-1 truncate">{{ $p->name }}</span>
-                        @if ($p->uuid === $currentProject->uuid)
-                            <x-reicon name="check-circle" class="size-3.5 shrink-0 text-warning" />
-                        @endif
                     </a>
                 @endforeach
             </div>
@@ -243,9 +237,6 @@
                     <a href="{{ route('project.resource.index', ['project_uuid' => $currentProject->uuid, 'environment_uuid' => $env->uuid]) }}" {{ wireNavigate() }} @click="open = false"
                         class="listbox-option {{ $env->uuid === $currentEnvironment->uuid ? 'bg-neutral-100 font-medium text-black dark:bg-white/[0.07] dark:text-fg' : '' }}">
                         <span class="min-w-0 flex-1 truncate">{{ $env->name }}</span>
-                        @if ($env->uuid === $currentEnvironment->uuid)
-                            <x-reicon name="check-circle" class="size-3.5 shrink-0 text-warning" />
-                        @endif
                     </a>
                 @endforeach
             </div>
diff --git a/resources/views/components/unsaved-bar.blade.php b/resources/views/components/unsaved-bar.blade.php
index 856d83d9b..993acd996 100644
--- a/resources/views/components/unsaved-bar.blade.php
+++ b/resources/views/components/unsaved-bar.blade.php
@@ -22,7 +22,7 @@
 <div wire:dirty.class="is-dirty"
     wire:loading.class="!opacity-0 !translate-y-6 !pointer-events-none"
     @if ($targets) wire:target="{{ $targets }}" @endif
-    class="pointer-events-none fixed inset-x-3 bottom-[max(1.5rem,env(safe-area-inset-bottom,0px)+0.75rem)] z-[80] flex max-w-full translate-y-6 flex-col items-stretch gap-2 rounded-2xl border border-white/10 bg-surface py-2.5 pr-2.5 pl-4 opacity-0 shadow-modal transition-[opacity,transform] duration-200 ease-out delay-0 [&.is-dirty]:pointer-events-auto [&.is-dirty]:translate-y-0 [&.is-dirty]:opacity-100 [&.is-dirty]:delay-300 sm:inset-x-auto sm:left-1/2 sm:bottom-6 sm:w-max sm:max-w-none sm:-translate-x-1/2 sm:flex-row sm:items-center sm:gap-8 sm:py-2 sm:pl-5 sm:pr-2">
+    class="pointer-events-none fixed inset-x-3 bottom-[max(1.5rem,env(safe-area-inset-bottom,0px)+0.75rem)] z-[1000] flex max-w-full translate-y-6 flex-col items-stretch gap-2 rounded-2xl border border-white/10 bg-surface py-2.5 pr-2.5 pl-4 opacity-0 shadow-modal transition-[opacity,transform] duration-200 ease-out delay-0 [&.is-dirty]:pointer-events-auto [&.is-dirty]:translate-y-0 [&.is-dirty]:opacity-100 [&.is-dirty]:delay-300 sm:inset-x-auto sm:left-1/2 sm:bottom-6 sm:w-max sm:max-w-none sm:-translate-x-1/2 sm:flex-row sm:items-center sm:gap-8 sm:py-2 sm:pl-5 sm:pr-2">
     <span class="text-[13px] font-semibold leading-snug text-fg sm:whitespace-nowrap">{{ $label }}</span>
     <div class="flex shrink-0 items-center justify-end gap-2">
         <button type="button" onclick="window.location.reload()"
@@ -30,7 +30,7 @@
             Reset
         </button>
         <button type="button" wire:click="{{ $action }}" wire:loading.attr="disabled"
-            class="h-8 rounded-lg bg-coollabs/10 px-4 text-[13px] font-semibold text-coollabs ring-1 ring-coollabs/25 transition-[transform,background-color] hover:bg-coollabs/15 active:scale-[0.98] dark:bg-warning/15 dark:text-warning dark:ring-warning/25 dark:hover:bg-warning/20">
+            class="button-highlighted h-8 rounded-lg px-4 text-[13px] font-semibold transition-[transform,background-color] active:scale-[0.98]">
             Save changes
         </button>
     </div>
diff --git a/resources/views/components/upgrade-progress.blade.php b/resources/views/components/upgrade-progress.blade.php
index b99705706..f1a39644c 100644
--- a/resources/views/components/upgrade-progress.blade.php
+++ b/resources/views/components/upgrade-progress.blade.php
@@ -40,7 +40,7 @@
                         <x-reicon name="check-circle" class="size-3" />
                     </template>
                     <template x-if="currentStep === {{ $stepNumber }}">
-                        <svg class="size-3 animate-spin text-coollabs dark:text-warning" xmlns="http://www.w3.org/2000/svg"
+                        <svg class="loading-indicator size-3 animate-spin" xmlns="http://www.w3.org/2000/svg"
                             fill="none" viewBox="0 0 24 24" aria-hidden="true">
                             <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                                 stroke-width="4"></circle>
diff --git a/resources/views/livewire/dashboard.blade.php b/resources/views/livewire/dashboard.blade.php
index 5ce47432d..a49848845 100644
--- a/resources/views/livewire/dashboard.blade.php
+++ b/resources/views/livewire/dashboard.blade.php
@@ -143,7 +143,7 @@
                         @can('create', App\Models\PrivateKey::class)
                             <x-slot:contents>
                                 <a href="{{ route('security.private-key.index') }}" {{ wireNavigate() }}
-                                    class="button bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!">
+                                    class="button button-highlighted">
                                     <x-reicon name="plus" class="size-3.5" />
                                     Add private key
                                 </a>
@@ -157,7 +157,7 @@
                         @can('createAnyResource')
                             <x-slot:contents>
                                 <a href="{{ route('server.create') }}" {{ wireNavigate() }}
-                                    class="button bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!">
+                                    class="button button-highlighted">
                                     <x-reicon name="plus" class="size-3.5" />
                                     New server
                                 </a>
diff --git a/resources/views/livewire/deployments-indicator.blade.php b/resources/views/livewire/deployments-indicator.blade.php
index 5b9d748c6..ece7e4b44 100644
--- a/resources/views/livewire/deployments-indicator.blade.php
+++ b/resources/views/livewire/deployments-indicator.blade.php
@@ -76,7 +76,7 @@
                 class="flex items-center gap-2 rounded-xl border border-neutral-200 bg-white px-3.5 py-2 text-sm font-medium text-neutral-800 transition-colors hover:bg-neutral-50 dark:border-white/[0.08] dark:bg-surface dark:text-fg dark:hover:bg-white/[0.04]"
                 style="box-shadow: 0 0 0 1px var(--coollabs-hairline), var(--shadow-modal);"
                 :aria-expanded="expanded.toString()" aria-label="Active deployments">
-                <svg class="size-3.5 shrink-0 animate-spin text-coollabs dark:text-warning"
+                <svg class="loading-indicator size-3.5 shrink-0 animate-spin"
                     xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
                     <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                         stroke-width="4"></circle>
diff --git a/resources/views/livewire/destination/index.blade.php b/resources/views/livewire/destination/index.blade.php
index fc25e3008..9ad8e5676 100644
--- a/resources/views/livewire/destination/index.blade.php
+++ b/resources/views/livewire/destination/index.blade.php
@@ -16,7 +16,7 @@
                     <x-modal-input title="New Destination">
                         <x-slot:content>
                             <button type="button"
-                                class="button bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!">
+                                class="button button-highlighted">
                                 <x-reicon name="plus" class="size-3.5" />
                                 New destination
                             </button>
diff --git a/resources/views/livewire/destination/new/docker.blade.php b/resources/views/livewire/destination/new/docker.blade.php
index 798d6f24e..7dd141d0a 100644
--- a/resources/views/livewire/destination/new/docker.blade.php
+++ b/resources/views/livewire/destination/new/docker.blade.php
@@ -15,7 +15,7 @@
                 ->all()" />
             <div class="flex justify-end border-t border-neutral-200 pt-4 dark:border-white/[0.07]">
                 <x-forms.button type="submit" wire:target="submit"
-                    class="bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!">
+                    class="button-highlighted">
                     Create destination
                 </x-forms.button>
             </div>
diff --git a/resources/views/livewire/layout-popups.blade.php b/resources/views/livewire/layout-popups.blade.php
index 7b9339a0f..2e5f6a02d 100644
--- a/resources/views/livewire/layout-popups.blade.php
+++ b/resources/views/livewire/layout-popups.blade.php
@@ -172,7 +172,7 @@
 
                         <div class="flex flex-col gap-2 sm:flex-row sm:items-center">
                             <a target="_blank" href="https://github.com/sponsors/coollabsio"
-                                class="button h-9 justify-center bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! sm:flex-1 dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!">
+                                class="button button-highlighted h-9 justify-center sm:flex-1">
                                 GitHub Sponsors
                             </a>
                             <a x-show="!reminders.sponsorship.compact" x-transition.opacity target="_blank"
diff --git a/resources/views/livewire/notifications/email.blade.php b/resources/views/livewire/notifications/email.blade.php
index c9c0b7a15..7bd25d138 100644
--- a/resources/views/livewire/notifications/email.blade.php
+++ b/resources/views/livewire/notifications/email.blade.php
@@ -24,7 +24,7 @@
                                             id="testEmailAddress" label="Recipient" required />
                                         <div class="flex justify-end border-t border-neutral-200 pt-4 dark:border-white/[0.08]">
                                             <button type="submit" @click="modalOpen=false"
-                                                class="button bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!">
+                                                class="button button-highlighted">
                                                 Send email
                                             </button>
                                         </div>
diff --git a/resources/views/livewire/project/add-empty.blade.php b/resources/views/livewire/project/add-empty.blade.php
index 08b3ddb70..06d3e3edf 100644
--- a/resources/views/livewire/project/add-empty.blade.php
+++ b/resources/views/livewire/project/add-empty.blade.php
@@ -11,7 +11,7 @@
 
     <footer class="flex justify-end border-t border-neutral-200 pt-4 dark:border-white/[0.08]">
         <x-forms.button type="submit"
-            defaultClass="button bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!">
+            defaultClass="button button-highlighted">
             Create project
         </x-forms.button>
     </footer>
diff --git a/resources/views/livewire/project/application/backup/create.blade.php b/resources/views/livewire/project/application/backup/create.blade.php
index 9689c5ddf..22d878c82 100644
--- a/resources/views/livewire/project/application/backup/create.blade.php
+++ b/resources/views/livewire/project/application/backup/create.blade.php
@@ -16,7 +16,7 @@
 
         <div class="mt-2 flex justify-end border-t border-neutral-200 pt-4 dark:border-white/[0.08]">
             <x-forms.button type="submit"
-                class="bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!">
+                class="button-highlighted">
                 Create schedule
             </x-forms.button>
         </div>
diff --git a/resources/views/livewire/project/application/backup/index.blade.php b/resources/views/livewire/project/application/backup/index.blade.php
index 15ecf8984..8fd104b28 100644
--- a/resources/views/livewire/project/application/backup/index.blade.php
+++ b/resources/views/livewire/project/application/backup/index.blade.php
@@ -63,7 +63,7 @@
                         <x-modal-input title="New scheduled backup" :wireIgnore="false">
                             <x-slot:content>
                                 <button type="button"
-                                    class="button bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!">
+                                    class="button button-highlighted">
                                     <x-reicon name="plus" class="size-3.5" />
                                     Add
                                 </button>
diff --git a/resources/views/livewire/project/application/deployment/show.blade.php b/resources/views/livewire/project/application/deployment/show.blade.php
index 7e1225bb6..49e6a12ca 100644
--- a/resources/views/livewire/project/application/deployment/show.blade.php
+++ b/resources/views/livewire/project/application/deployment/show.blade.php
@@ -274,8 +274,8 @@
     }" class="flex h-[calc(100dvh-8rem)] min-h-[32rem] w-full flex-col overflow-hidden xl:h-auto xl:min-h-0 xl:flex-1">
             <div id="screen" :class="fullscreen ? 'fullscreen flex flex-col' : 'mt-2 flex flex-1 min-h-0 flex-col overflow-hidden lg:mt-0'">
                 <div @if ($isKeepAliveOn) wire:poll.2000ms="polling" @endif
-                    class="logs-viewer flex min-h-0 w-full flex-col overflow-hidden bg-[#0d0d0d] text-neutral-100"
-                    :class="fullscreen ? 'h-full' : 'flex-1 rounded-xl border border-neutral-800 shadow-sm'">
+                    class="logs-viewer flex min-h-0 w-full flex-col overflow-hidden bg-white text-neutral-800 dark:bg-[#0d0d0d] dark:text-neutral-100"
+                    :class="fullscreen ? 'h-full' : 'flex-1 rounded-xl border border-neutral-200 shadow-sm dark:border-neutral-800'">
                     <div class="logs-viewer-toolbar">
                         @php
                             $deploymentStatus = data_get($application_deployment_queue, 'status');
@@ -292,12 +292,12 @@
                         <div class="logs-viewer-toolbar-controls">
                             <div class="logs-viewer-search relative">
                                 <x-reicon name="search"
-                                    class="pointer-events-none absolute top-1/2 left-2.5 z-10 size-3.5 -translate-y-1/2 text-neutral-500" />
+                                    class="pointer-events-none absolute top-1/2 left-2.5 z-10 size-3.5 -translate-y-1/2 text-neutral-400 dark:text-neutral-500" />
                                 <input type="search" x-model.debounce.300ms="searchQuery" placeholder="Find in logs"
                                     aria-label="Find in logs"
-                                    class="h-8! w-full rounded-lg! border-white/[0.08]! bg-white/[0.05]! py-0! pr-8! pl-8! text-[12px]! text-white! shadow-none! placeholder:text-neutral-500 focus:border-accent! focus:ring-0!" />
+                                    class="h-8! w-full rounded-lg! border-neutral-200! bg-white! py-0! pr-8! pl-8! text-[12px]! text-neutral-800! shadow-none! placeholder:text-neutral-400 focus:border-accent! focus:ring-0! dark:border-white/[0.08]! dark:bg-white/[0.05]! dark:text-white! dark:placeholder:text-neutral-500" />
                                 <button x-cloak x-show="searchQuery" x-on:click="searchQuery = ''" type="button"
-                                    class="absolute top-1/2 right-2 z-10 flex size-5 -translate-y-1/2 items-center justify-center rounded text-neutral-500 transition-colors hover:bg-white/[0.07] hover:text-white"
+                                    class="absolute top-1/2 right-2 z-10 flex size-5 -translate-y-1/2 items-center justify-center rounded text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-neutral-800 dark:text-neutral-500 dark:hover:bg-white/[0.07] dark:hover:text-white"
                                     aria-label="Clear search">
                                     <x-reicon name="x" class="size-3" />
                                 </button>
@@ -333,10 +333,10 @@
                                         x-transition:leave="transition ease-in duration-75"
                                         x-transition:leave-start="transform opacity-100 scale-100"
                                         x-transition:leave-end="transform opacity-0 scale-95"
-                                        class="absolute right-0 z-50 mt-2 w-max origin-top-right rounded-lg border border-white/[0.1] bg-[#181818] p-1 shadow-modal focus:outline-none">
+                                        class="absolute right-0 z-50 mt-2 w-max origin-top-right rounded-lg border border-neutral-200 bg-white p-1 shadow-modal focus:outline-none dark:border-white/[0.1] dark:bg-[#181818]">
                                         <div>
                                             <button x-on:click="downloadLogs(); downloadMenuOpen = false"
-                                                class="listbox-option text-neutral-200! hover:bg-white/[0.07]!">
+                                                class="listbox-option text-neutral-700! hover:bg-neutral-100! dark:text-neutral-200! dark:hover:bg-white/[0.07]!">
                                                 Download displayed logs
                                             </button>
                                             @can('update', $application)
@@ -360,7 +360,7 @@
                                             "
                                                 :disabled="downloadingAllLogs"
                                                 :class="{ 'opacity-50 cursor-not-allowed': downloadingAllLogs }"
-                                                class="listbox-option text-neutral-200! hover:bg-white/[0.07]!">
+                                                class="listbox-option text-neutral-700! hover:bg-neutral-100! dark:text-neutral-200! dark:hover:bg-white/[0.07]!">
                                                 <span x-show="!downloadingAllLogs">Download all logs</span>
                                                 <span x-show="downloadingAllLogs" class="flex items-center gap-2">
                                                     <svg class="w-4 h-4 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
diff --git a/resources/views/livewire/project/application/domains.blade.php b/resources/views/livewire/project/application/domains.blade.php
index 3205e149e..9d178ec62 100644
--- a/resources/views/livewire/project/application/domains.blade.php
+++ b/resources/views/livewire/project/application/domains.blade.php
@@ -128,7 +128,7 @@
                             canGate="update" :canResource="$application">
                             <x-slot:content>
                                 <button type="button"
-                                    class="button bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!">
+                                    class="button button-highlighted">
                                     <x-reicon name="plus" class="size-3.5" />
                                     Add
                                 </button>
diff --git a/resources/views/livewire/project/index.blade.php b/resources/views/livewire/project/index.blade.php
index 04648d7e1..ca56a296d 100644
--- a/resources/views/livewire/project/index.blade.php
+++ b/resources/views/livewire/project/index.blade.php
@@ -11,7 +11,7 @@
                     <x-modal-input title="New Project">
                         <x-slot:content>
                             <button type="button"
-                                class="button bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!">
+                                class="button button-highlighted">
                                 <x-reicon name="plus" class="size-3.5" />
                                 New project
                             </button>
@@ -82,7 +82,7 @@
                             class="flex size-6.5 items-center justify-center rounded-md transition-colors"
                             :class="viewMode === 'table'
                                 ?
-                                'bg-coollabs/10 text-coollabs dark:bg-warning/15 dark:text-warning' :
+                                'control-selected' :
                                 'text-neutral-400 hover:bg-neutral-100 hover:text-black dark:text-fg-faint dark:hover:bg-white/[0.06] dark:hover:text-fg'"
                             aria-label="Table view" title="Table view">
                             <x-reicon name="unordered-list" class="size-3.5" />
@@ -91,7 +91,7 @@
                             class="flex size-6.5 items-center justify-center rounded-md transition-colors"
                             :class="viewMode === 'grid'
                                 ?
-                                'bg-coollabs/10 text-coollabs dark:bg-warning/15 dark:text-warning' :
+                                'control-selected' :
                                 'text-neutral-400 hover:bg-neutral-100 hover:text-black dark:text-fg-faint dark:hover:bg-white/[0.06] dark:hover:text-fg'"
                             aria-label="Grid view" title="Grid view">
                             <x-reicon name="grid" class="size-3.5" />
diff --git a/resources/views/livewire/project/new/select.blade.php b/resources/views/livewire/project/new/select.blade.php
index 40f6de1c3..af611fca9 100644
--- a/resources/views/livewire/project/new/select.blade.php
+++ b/resources/views/livewire/project/new/select.blade.php
@@ -131,7 +131,7 @@
                                         Docs
                                     </a>
                                     <button type="button"
-                                        class="button ml-auto bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!"
+                                        class="button ml-auto button-highlighted"
                                         :disabled="selecting" @click="setType(application.id)">
                                         Deploy
                                     </button>
@@ -166,7 +166,7 @@
                                         Docs
                                     </a>
                                     <button type="button"
-                                        class="button ml-auto bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!"
+                                        class="button ml-auto button-highlighted"
                                         :disabled="selecting" @click="setType(application.id)">
                                         Deploy
                                     </button>
@@ -219,7 +219,7 @@
                                         Website
                                     </a>
                                     <button type="button"
-                                        class="button ml-auto bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!"
+                                        class="button ml-auto button-highlighted"
                                         :disabled="selecting" @click="setType(database.id)">
                                         Deploy
                                     </button>
@@ -295,7 +295,7 @@
                                             Website
                                         </a>
                                         <button type="button"
-                                            class="button ml-auto bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!"
+                                            class="button ml-auto button-highlighted"
                                             :disabled="selecting"
                                             @click="setType('one-click-service-' + service.id)">
                                             Deploy
diff --git a/resources/views/livewire/project/resource/index.blade.php b/resources/views/livewire/project/resource/index.blade.php
index 5d8fff429..6250fceff 100644
--- a/resources/views/livewire/project/resource/index.blade.php
+++ b/resources/views/livewire/project/resource/index.blade.php
@@ -25,7 +25,7 @@
                 @can('createAnyResource')
                     <a href="{{ route('project.resource.create', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid]) }}"
                         {{ wireNavigate() }}
-                        class="button whitespace-nowrap bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!">
+                        class="button whitespace-nowrap button-highlighted">
                         <x-reicon name="plus" class="size-3.5" />
                         New resource
                     </a>
@@ -69,7 +69,7 @@
                 <div class="flex items-center gap-2">
                     <div class="relative" x-on:click.outside="filterOpen = false">
                         <button type="button" class="button max-w-64"
-                            :class="activeFilterCount > 0 && 'bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 dark:bg-warning/15! dark:text-warning! dark:ring-warning/25'"
+                            :class="activeFilterCount > 0 && 'button-highlighted'"
                             x-on:click="filterOpen = !filterOpen" :title="activeFilterCount > 0 ? filterButtonText : 'Filter'">
                             <svg class="size-3.5 opacity-65" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                 <path d="M4 6h16M7 12h10M10 18h4" stroke="currentColor" stroke-width="1.7"
@@ -148,7 +148,7 @@
                             class="flex size-6.5 items-center justify-center rounded-md transition-colors"
                             :class="viewMode === 'table'
                                 ?
-                                'bg-coollabs/10 text-coollabs dark:bg-warning/15 dark:text-warning' :
+                                'control-selected' :
                                 'text-neutral-400 hover:bg-neutral-100 hover:text-black dark:text-fg-faint dark:hover:bg-white/[0.06] dark:hover:text-fg'"
                             aria-label="Table view" title="Table view">
                             <x-reicon name="unordered-list" class="size-3.5" />
@@ -157,7 +157,7 @@
                             class="flex size-6.5 items-center justify-center rounded-md transition-colors"
                             :class="viewMode === 'grid'
                                 ?
-                                'bg-coollabs/10 text-coollabs dark:bg-warning/15 dark:text-warning' :
+                                'control-selected' :
                                 'text-neutral-400 hover:bg-neutral-100 hover:text-black dark:text-fg-faint dark:hover:bg-white/[0.06] dark:hover:text-fg'"
                             aria-label="Grid view" title="Grid view">
                             <x-reicon name="grid" class="size-3.5" />
diff --git a/resources/views/livewire/project/service/configuration.blade.php b/resources/views/livewire/project/service/configuration.blade.php
index 6b4fd5afd..4e19a7d02 100644
--- a/resources/views/livewire/project/service/configuration.blade.php
+++ b/resources/views/livewire/project/service/configuration.blade.php
@@ -114,7 +114,7 @@
                                     <button type="button" x-on:click="setViewMode('table')"
                                         class="flex size-6.5 items-center justify-center rounded-md transition-colors"
                                         :class="viewMode === 'table'
-                                            ? 'bg-coollabs/10 text-coollabs dark:bg-warning/15 dark:text-warning'
+                                            ? 'control-selected'
                                             : 'text-neutral-400 hover:bg-neutral-100 hover:text-black dark:text-fg-faint dark:hover:bg-white/[0.06] dark:hover:text-fg'"
                                         aria-label="Table view" title="Table view">
                                         <x-reicon name="unordered-list" class="size-3.5" />
@@ -122,7 +122,7 @@
                                     <button type="button" x-on:click="setViewMode('grid')"
                                         class="flex size-6.5 items-center justify-center rounded-md transition-colors"
                                         :class="viewMode === 'grid'
-                                            ? 'bg-coollabs/10 text-coollabs dark:bg-warning/15 dark:text-warning'
+                                            ? 'control-selected'
                                             : 'text-neutral-400 hover:bg-neutral-100 hover:text-black dark:text-fg-faint dark:hover:bg-white/[0.06] dark:hover:text-fg'"
                                         aria-label="Grid view" title="Grid view">
                                         <x-reicon name="grid" class="size-3.5" />
diff --git a/resources/views/livewire/project/service/domains.blade.php b/resources/views/livewire/project/service/domains.blade.php
index ea31cd429..d1eeac870 100644
--- a/resources/views/livewire/project/service/domains.blade.php
+++ b/resources/views/livewire/project/service/domains.blade.php
@@ -103,7 +103,7 @@
                         canGate="update" :canResource="$service">
                         <x-slot:content>
                             <button type="button"
-                                class="button bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!">
+                                class="button button-highlighted">
                                 <x-reicon name="plus" class="size-3.5" />
                                 Add
                             </button>
diff --git a/resources/views/livewire/project/service/storage.blade.php b/resources/views/livewire/project/service/storage.blade.php
index a7486fa34..81c19bd3f 100644
--- a/resources/views/livewire/project/service/storage.blade.php
+++ b/resources/views/livewire/project/service/storage.blade.php
@@ -40,7 +40,7 @@
                         ">
                             <div class="relative" @click.outside="dropdownOpen = false">
                                 <x-forms.button
-                                    class="bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!"
+                                    class="button-highlighted"
                                     @click="dropdownOpen = !dropdownOpen" aria-haspopup="menu"
                                     x-bind:aria-expanded="dropdownOpen">
                                     <x-reicon name="plus" class="size-3.5" />
diff --git a/resources/views/livewire/project/service/volume-backup/index.blade.php b/resources/views/livewire/project/service/volume-backup/index.blade.php
index 88ab45573..57a1a3e42 100644
--- a/resources/views/livewire/project/service/volume-backup/index.blade.php
+++ b/resources/views/livewire/project/service/volume-backup/index.blade.php
@@ -59,7 +59,7 @@
                     <x-modal-input title="New scheduled backup" :wireIgnore="false">
                         <x-slot:content>
                             <button type="button"
-                                class="button bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!">
+                                class="button button-highlighted">
                                 <x-reicon name="plus" class="size-3.5" />
                                 Add
                             </button>
diff --git a/resources/views/livewire/project/shared/configuration-checker.blade.php b/resources/views/livewire/project/shared/configuration-checker.blade.php
index 578711ca8..c8c69aa57 100644
--- a/resources/views/livewire/project/shared/configuration-checker.blade.php
+++ b/resources/views/livewire/project/shared/configuration-checker.blade.php
@@ -1,7 +1,15 @@
 <div>
     @if ($isConfigurationChanged && !is_null($resource->config_hash) && !$resource->isExited())
+        @php
+            $compactStoragePrefix = "configuration-warning:{$resource->uuid}:";
+            $currentConfigurationHash = $resource instanceof \App\Models\Application
+                ? $resource->deploymentConfigurationHash()
+                : md5((string) $resource->config_hash);
+            $compactStorageKey = $compactStoragePrefix.$currentConfigurationHash;
+        @endphp
         <div x-data="{ configurationDiffModalOpen: false, expandedRows: {} }">
-            <x-popup-small>
+            <x-popup-small :compact-after="5000" :compact-storage-key="$compactStorageKey"
+                :compact-storage-prefix="$compactStoragePrefix">
                 <x-slot:title>
                     The latest configuration has not been applied
                 </x-slot:title>
diff --git a/resources/views/livewire/project/shared/environment-variable/all.blade.php b/resources/views/livewire/project/shared/environment-variable/all.blade.php
index e47c42a69..dbe8dc674 100644
--- a/resources/views/livewire/project/shared/environment-variable/all.blade.php
+++ b/resources/views/livewire/project/shared/environment-variable/all.blade.php
@@ -96,7 +96,7 @@
                         @if ($activeFilterCount > 0) title="{{ $activeFilterText }}" @endif
                         @class([
                             'button max-w-80 min-w-0',
-                            'bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 dark:bg-warning/15! dark:text-warning! dark:ring-warning/25' => $activeFilterCount > 0,
+                            'button-highlighted' => $activeFilterCount > 0,
                         ])>
                         <x-reicon name="filter" class="size-3.5 shrink-0" />
                         <span class="truncate">{{ $activeFilterCount > 0 ? $activeFilterText : 'Filter' }}</span>
@@ -205,7 +205,7 @@
                     <x-modal-input title="New Environment Variable" :closeOutside="false">
                         <x-slot:content>
                             <button type="button"
-                                class="button bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!">
+                                class="button button-highlighted">
                                 <x-reicon name="plus" class="size-3.5" />
                                 Add
                             </button>
diff --git a/resources/views/livewire/project/shared/scheduled-task/all.blade.php b/resources/views/livewire/project/shared/scheduled-task/all.blade.php
index 58d3d7f91..89741ff9a 100644
--- a/resources/views/livewire/project/shared/scheduled-task/all.blade.php
+++ b/resources/views/livewire/project/shared/scheduled-task/all.blade.php
@@ -6,7 +6,7 @@
                 <x-modal-input title="New scheduled task" :closeOutside="false">
                     <x-slot:content>
                         <button type="button"
-                            class="button bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!">
+                            class="button button-highlighted">
                             <x-reicon name="plus" class="size-3.5" />
                             Add task
                         </button>
diff --git a/resources/views/livewire/project/shared/tags.blade.php b/resources/views/livewire/project/shared/tags.blade.php
index 24c23cebe..bc5b26668 100644
--- a/resources/views/livewire/project/shared/tags.blade.php
+++ b/resources/views/livewire/project/shared/tags.blade.php
@@ -8,7 +8,7 @@
                     helper="Existing tags are assigned automatically. New names create team tags."
                     placeholder="production api customer-a" />
                 <x-forms.button type="submit"
-                    class="bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!">
+                    class="button-highlighted">
                     <x-reicon name="plus" class="size-3.5" />
                     Add tags
                 </x-forms.button>
diff --git a/resources/views/livewire/project/show.blade.php b/resources/views/livewire/project/show.blade.php
index 99b9091f5..eda1c3be6 100644
--- a/resources/views/livewire/project/show.blade.php
+++ b/resources/views/livewire/project/show.blade.php
@@ -29,7 +29,7 @@
                     <x-modal-input title="New Environment">
                         <x-slot:content>
                             <button type="button"
-                                class="button bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!">
+                                class="button button-highlighted">
                                 <x-reicon name="plus" class="size-3.5" />
                                 New environment
                             </button>
@@ -41,7 +41,7 @@
                             <footer
                                 class="flex justify-end border-t border-neutral-200 pt-4 dark:border-white/[0.08]">
                                 <x-forms.button type="submit"
-                                    defaultClass="button bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!">
+                                    defaultClass="button button-highlighted">
                                     Create environment
                                 </x-forms.button>
                             </footer>
@@ -104,7 +104,7 @@
                             class="flex size-6.5 items-center justify-center rounded-md transition-colors"
                             :class="viewMode === 'table'
                                 ?
-                                'bg-coollabs/10 text-coollabs dark:bg-warning/15 dark:text-warning' :
+                                'control-selected' :
                                 'text-neutral-400 hover:bg-neutral-100 hover:text-black dark:text-fg-faint dark:hover:bg-white/[0.06] dark:hover:text-fg'"
                             aria-label="Table view" title="Table view">
                             <x-reicon name="unordered-list" class="size-3.5" />
@@ -113,7 +113,7 @@
                             class="flex size-6.5 items-center justify-center rounded-md transition-colors"
                             :class="viewMode === 'grid'
                                 ?
-                                'bg-coollabs/10 text-coollabs dark:bg-warning/15 dark:text-warning' :
+                                'control-selected' :
                                 'text-neutral-400 hover:bg-neutral-100 hover:text-black dark:text-fg-faint dark:hover:bg-white/[0.06] dark:hover:text-fg'"
                             aria-label="Grid view" title="Grid view">
                             <x-reicon name="grid" class="size-3.5" />
diff --git a/resources/views/livewire/security/api-tokens.blade.php b/resources/views/livewire/security/api-tokens.blade.php
index ca08fe3fc..7deaa0ae7 100644
--- a/resources/views/livewire/security/api-tokens.blade.php
+++ b/resources/views/livewire/security/api-tokens.blade.php
@@ -35,7 +35,7 @@
                     <x-application.settings-section title="New API token">
                         <x-slot:actions>
                             <button type="submit"
-                                class="button bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!">
+                                class="button button-highlighted">
                                 <x-reicon name="plus" class="size-3.5" />
                                 Create token
                             </button>
diff --git a/resources/views/livewire/security/cloud-init-script-form.blade.php b/resources/views/livewire/security/cloud-init-script-form.blade.php
index 4f53ad7a2..e912fd14b 100644
--- a/resources/views/livewire/security/cloud-init-script-form.blade.php
+++ b/resources/views/livewire/security/cloud-init-script-form.blade.php
@@ -4,7 +4,7 @@
         helper="Cloud-config YAML or another script accepted by your provider." required />
     <div class="flex justify-end border-t border-neutral-200 pt-4 dark:border-white/[0.08]">
         <button type="submit"
-            class="button bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!">
+            class="button button-highlighted">
             {{ $scriptId ? 'Update script' : 'Create script' }}
         </button>
     </div>
diff --git a/resources/views/livewire/security/cloud-init-scripts.blade.php b/resources/views/livewire/security/cloud-init-scripts.blade.php
index da4f38a1f..66690ace5 100644
--- a/resources/views/livewire/security/cloud-init-scripts.blade.php
+++ b/resources/views/livewire/security/cloud-init-scripts.blade.php
@@ -11,7 +11,7 @@
                 <x-modal-input title="New Cloud-Init Script">
                     <x-slot:content>
                         <button type="button"
-                            class="button bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!">
+                            class="button button-highlighted">
                             <x-reicon name="plus" class="size-3.5" />
                             New script
                         </button>
diff --git a/resources/views/livewire/security/cloud-provider-token-form.blade.php b/resources/views/livewire/security/cloud-provider-token-form.blade.php
index ab9cd7b0b..ad594ba6b 100644
--- a/resources/views/livewire/security/cloud-provider-token-form.blade.php
+++ b/resources/views/livewire/security/cloud-provider-token-form.blade.php
@@ -45,7 +45,7 @@
 
         <div class="flex justify-end border-t border-neutral-200 pt-4 dark:border-white/[0.08]">
             <x-forms.button type="submit"
-                class="bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!"
+                class="button-highlighted"
                 wire:target="addToken">
                 Validate and add
             </x-forms.button>
diff --git a/resources/views/livewire/security/cloud-provider-tokens.blade.php b/resources/views/livewire/security/cloud-provider-tokens.blade.php
index 42b401dc0..de17bbec4 100644
--- a/resources/views/livewire/security/cloud-provider-tokens.blade.php
+++ b/resources/views/livewire/security/cloud-provider-tokens.blade.php
@@ -6,7 +6,7 @@
                 <x-modal-input title="New Cloud Token">
                     <x-slot:content>
                         <button type="button"
-                            class="button bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!">
+                            class="button button-highlighted">
                             <x-reicon name="plus" class="size-3.5" />
                             New token
                         </button>
diff --git a/resources/views/livewire/security/private-key/create.blade.php b/resources/views/livewire/security/private-key/create.blade.php
index a301a6ccf..992cc4e97 100644
--- a/resources/views/livewire/security/private-key/create.blade.php
+++ b/resources/views/livewire/security/private-key/create.blade.php
@@ -14,7 +14,7 @@
         </div>
         <div class="flex justify-end border-t border-neutral-200 pt-4 dark:border-white/[0.08]">
             <button type="submit"
-                class="button bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!">
+                class="button button-highlighted">
                 Continue
             </button>
         </div>
diff --git a/resources/views/livewire/security/private-key/index.blade.php b/resources/views/livewire/security/private-key/index.blade.php
index c35277bcf..32f6ad655 100644
--- a/resources/views/livewire/security/private-key/index.blade.php
+++ b/resources/views/livewire/security/private-key/index.blade.php
@@ -24,7 +24,7 @@
                 <div x-data="{ dropdownOpen: false }" class="relative"
                     @click.outside="dropdownOpen = false" @keydown.escape.window="dropdownOpen = false">
                     <button type="button" @click="dropdownOpen = !dropdownOpen"
-                        class="button whitespace-nowrap bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!"
+                        class="button whitespace-nowrap button-highlighted"
                         aria-haspopup="menu" :aria-expanded="dropdownOpen">
                         <x-reicon name="plus" class="size-3.5" />
                         <span class="max-sm:hidden">New private key</span>
diff --git a/resources/views/livewire/server/create.blade.php b/resources/views/livewire/server/create.blade.php
index b6bbff197..52c039128 100644
--- a/resources/views/livewire/server/create.blade.php
+++ b/resources/views/livewire/server/create.blade.php
@@ -19,7 +19,7 @@
                 <x-modal-input title="New {{ $tokenProviderName }} token">
                     <x-slot:content>
                         <button type="button"
-                            class="button bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!">
+                            class="button button-highlighted">
                             <x-reicon name="plus" class="size-3.5" />
                             New token
                         </button>
diff --git a/resources/views/livewire/server/index.blade.php b/resources/views/livewire/server/index.blade.php
index 31f7fa470..d1dda5920 100644
--- a/resources/views/livewire/server/index.blade.php
+++ b/resources/views/livewire/server/index.blade.php
@@ -7,7 +7,7 @@
         <h1 class="min-w-0 text-[24px]! leading-7! font-semibold! tracking-tight!">Servers</h1>
         @can('createAnyResource')
             <a href="{{ route('server.create') }}" {{ wireNavigate() }}
-                class="button w-fit shrink-0 whitespace-nowrap bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!">
+                class="button w-fit shrink-0 whitespace-nowrap button-highlighted">
                 <x-reicon name="plus" class="size-3.5" />
                 New server
             </a>
@@ -78,7 +78,7 @@
                         <button type="button" x-on:click="setViewMode('table')"
                             class="flex size-6.5 items-center justify-center rounded-md transition-colors"
                             :class="viewMode === 'table'
-                                ? 'bg-coollabs/10 text-coollabs dark:bg-warning/15 dark:text-warning'
+                                ? 'control-selected'
                                 : 'text-neutral-400 hover:bg-neutral-100 hover:text-black dark:text-fg-faint dark:hover:bg-white/[0.06] dark:hover:text-fg'"
                             aria-label="Table view">
                             <x-reicon name="unordered-list" class="size-3.5" />
@@ -86,7 +86,7 @@
                         <button type="button" x-on:click="setViewMode('grid')"
                             class="flex size-6.5 items-center justify-center rounded-md transition-colors"
                             :class="viewMode === 'grid'
-                                ? 'bg-coollabs/10 text-coollabs dark:bg-warning/15 dark:text-warning'
+                                ? 'control-selected'
                                 : 'text-neutral-400 hover:bg-neutral-100 hover:text-black dark:text-fg-faint dark:hover:bg-white/[0.06] dark:hover:text-fg'"
                             aria-label="Grid view">
                             <x-reicon name="grid" class="size-3.5" />
diff --git a/resources/views/livewire/server/new/by-digital-ocean.blade.php b/resources/views/livewire/server/new/by-digital-ocean.blade.php
index f5dc4c89d..087ca4516 100644
--- a/resources/views/livewire/server/new/by-digital-ocean.blade.php
+++ b/resources/views/livewire/server/new/by-digital-ocean.blade.php
@@ -65,7 +65,7 @@
                         description="Choose the region, size, image, and Coolify SSH key.">
                         <x-slot:actions>
                             <button type="submit"
-                                class="button bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!"
+                                class="button button-highlighted"
                                 @disabled(!$private_key_id)>
                                 Buy and create
                                 @if ($this->selectedDropletPrice)
diff --git a/resources/views/livewire/server/new/by-hetzner.blade.php b/resources/views/livewire/server/new/by-hetzner.blade.php
index d91bbf776..033f6d7ca 100644
--- a/resources/views/livewire/server/new/by-hetzner.blade.php
+++ b/resources/views/livewire/server/new/by-hetzner.blade.php
@@ -72,7 +72,7 @@
                         description="Choose the location, hardware, operating system, and Coolify SSH key.">
                         <x-slot:actions>
                             <button type="submit"
-                                class="button bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!"
+                                class="button button-highlighted"
                                 @disabled(!$private_key_id)>
                                 Buy and create
                                 @if ($this->selectedServerPrice)
diff --git a/resources/views/livewire/server/new/by-ip.blade.php b/resources/views/livewire/server/new/by-ip.blade.php
index 9e7710408..d7fe02178 100644
--- a/resources/views/livewire/server/new/by-ip.blade.php
+++ b/resources/views/livewire/server/new/by-ip.blade.php
@@ -14,7 +14,7 @@
                 description="Add an existing Linux server using its SSH connection details.">
                 <x-slot:actions>
                     <button type="submit"
-                        class="button bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!">
+                        class="button button-highlighted">
                         Continue
                         <x-reicon name="arrow-right" class="size-3.5" />
                     </button>
diff --git a/resources/views/livewire/server/new/by-vultr.blade.php b/resources/views/livewire/server/new/by-vultr.blade.php
index be1040624..e38cec3ed 100644
--- a/resources/views/livewire/server/new/by-vultr.blade.php
+++ b/resources/views/livewire/server/new/by-vultr.blade.php
@@ -64,7 +64,7 @@
                         description="Choose the region, plan, operating system, and Coolify SSH key.">
                         <x-slot:actions>
                             <button type="submit"
-                                class="button bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!"
+                                class="button button-highlighted"
                                 @disabled(!$private_key_id)>
                                 Buy and create
                                 @if ($this->selectedServerPrice)
diff --git a/resources/views/livewire/source/github/change.blade.php b/resources/views/livewire/source/github/change.blade.php
index 3b1ce4aff..abde53022 100644
--- a/resources/views/livewire/source/github/change.blade.php
+++ b/resources/views/livewire/source/github/change.blade.php
@@ -78,7 +78,7 @@
                                                 source to an application.
                                             </p>
                                         </div>
-                                        <a class="button shrink-0 bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!"
+                                        <a class="button shrink-0 button-highlighted"
                                             href="{{ getInstallationPath($github_app) }}">
                                             Install repositories
                                             <x-external-link />
@@ -313,7 +313,7 @@
                                 helper="Write access lets Coolify post deployment status and links on pull requests." />
 
                             <button type="button"
-                                class="button mt-auto w-full justify-center bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!"
+                                class="button mt-auto w-full justify-center button-highlighted"
                                 x-on:click.prevent="createGithubApp(webhookEndpoint, useCustomWebhookEndpoint, customWebhookEndpoint, {{ Illuminate\Support\Js::from($preview_deployment_permissions) }}, {{ Illuminate\Support\Js::from($administration) }})">
                                 Register with GitHub
                             </button>
diff --git a/resources/views/livewire/source/gitlab/change.blade.php b/resources/views/livewire/source/gitlab/change.blade.php
index 748096eb9..0e01675ea 100644
--- a/resources/views/livewire/source/gitlab/change.blade.php
+++ b/resources/views/livewire/source/gitlab/change.blade.php
@@ -307,7 +307,7 @@
                 <x-application.settings-section title="Step 3 · Authorize with GitLab"
                     description="Authorize Coolify with your GitLab instance. The redirect URI must match the Callback URL configured in GitLab.">
                     <a href="{{ $this->getOAuthUrl() }}" wire:key="oauth-url-{{ md5((string) $redirectUri) }}"
-                        class="button bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!">
+                        class="button button-highlighted">
                         Connect to GitLab
                         <x-external-link />
                     </a>
diff --git a/resources/views/livewire/storage/index.blade.php b/resources/views/livewire/storage/index.blade.php
index 3e5314d6a..0d2c48855 100644
--- a/resources/views/livewire/storage/index.blade.php
+++ b/resources/views/livewire/storage/index.blade.php
@@ -15,7 +15,7 @@
                 <x-modal-input title="New S3 Storage" :closeOutside="false">
                     <x-slot:content>
                         <button type="button"
-                            class="button bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!">
+                            class="button button-highlighted">
                             <x-reicon name="plus" class="size-3.5" />
                             New storage
                         </button>
diff --git a/resources/views/livewire/switch-team.blade.php b/resources/views/livewire/switch-team.blade.php
index 5a0ad7caa..f61c54a3e 100644
--- a/resources/views/livewire/switch-team.blade.php
+++ b/resources/views/livewire/switch-team.blade.php
@@ -25,9 +25,6 @@
                 <button type="button" wire:click="switch_to({{ $team->id }})" @click="open = false"
                     class="listbox-option {{ $team->id === $currentTeam->id ? 'bg-neutral-100 font-medium dark:bg-white/[0.06]' : '' }}">
                     <span class="min-w-0 flex-1 truncate">{{ $team->name }}</span>
-                    @if ($team->id === $currentTeam->id)
-                        <x-reicon name="check-circle" class="size-3.5 shrink-0 text-warning" />
-                    @endif
                 </button>
             @endforeach
             <div class="mt-1 border-t border-neutral-200 pt-1 dark:border-white/[0.08]">
@@ -72,9 +69,6 @@
                 <button type="button" wire:click="switch_to({{ $team->id }})" @click="teamOpen = false"
                     class="listbox-option {{ $team->id === $currentTeam->id ? 'bg-neutral-100 font-medium dark:bg-white/[0.06]' : '' }}">
                     <span class="min-w-0 flex-1 truncate">{{ $team->name }}</span>
-                    @if ($team->id === $currentTeam->id)
-                        <x-reicon name="check-circle" class="size-3.5 shrink-0 text-warning" />
-                    @endif
                 </button>
             @endforeach
             <div class="mt-1 border-t border-neutral-200 pt-1 dark:border-white/[0.08]">
diff --git a/resources/views/livewire/tags/show.blade.php b/resources/views/livewire/tags/show.blade.php
index 931dcc7bb..357b81600 100644
--- a/resources/views/livewire/tags/show.blade.php
+++ b/resources/views/livewire/tags/show.blade.php
@@ -75,7 +75,7 @@
                             class="flex size-6.5 items-center justify-center rounded-md transition-colors"
                             :class="viewMode === 'table'
                                 ?
-                                'bg-coollabs/10 text-coollabs dark:bg-warning/15 dark:text-warning' :
+                                'control-selected' :
                                 'text-neutral-400 hover:bg-neutral-100 hover:text-black dark:text-fg-faint dark:hover:bg-white/[0.06] dark:hover:text-fg'"
                             aria-label="Table view" title="Table view">
                             <x-reicon name="unordered-list" class="size-3.5" />
@@ -84,7 +84,7 @@
                             class="flex size-6.5 items-center justify-center rounded-md transition-colors"
                             :class="viewMode === 'grid'
                                 ?
-                                'bg-coollabs/10 text-coollabs dark:bg-warning/15 dark:text-warning' :
+                                'control-selected' :
                                 'text-neutral-400 hover:bg-neutral-100 hover:text-black dark:text-fg-faint dark:hover:bg-white/[0.06] dark:hover:text-fg'"
                             aria-label="Grid view" title="Grid view">
                             <x-reicon name="grid" class="size-3.5" />
@@ -408,9 +408,11 @@
 
                 <div wire:poll="getDeployments" class="overflow-x-auto">
                     @if (count($deploymentsPerTagPerServer ?? []) === 0)
-                        <x-empty title="No active deployments"
-                            description="Deployments will appear here while they are queued or running."
-                            icon-name="play-circle" size="sm" />
+                        <div class="p-3">
+                            <x-empty title="No active deployments"
+                                description="Deployments will appear here while they are queued or running."
+                                icon-name="play-circle" size="sm" />
+                        </div>
                     @else
                         <div
                             class="grid min-w-[620px] grid-cols-[minmax(0,1fr)_minmax(10rem,.55fr)_7rem] border-b border-neutral-200 bg-neutral-50 px-4 py-2.5 text-[11px] font-medium text-neutral-500 dark:border-white/[0.08] dark:bg-white/[0.025] dark:text-fg-faint">
diff --git a/resources/views/livewire/team/create.blade.php b/resources/views/livewire/team/create.blade.php
index d67d6126b..83f18ce5c 100644
--- a/resources/views/livewire/team/create.blade.php
+++ b/resources/views/livewire/team/create.blade.php
@@ -3,7 +3,7 @@
     <x-forms.input id="description" label="Description" />
     <div class="flex justify-end">
         <x-forms.button type="submit"
-            defaultClass="button bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!">
+            defaultClass="button button-highlighted">
             Create team
         </x-forms.button>
     </div>
diff --git a/resources/views/livewire/team/invite-link.blade.php b/resources/views/livewire/team/invite-link.blade.php
index f1c80cdfc..fb8426cbd 100644
--- a/resources/views/livewire/team/invite-link.blade.php
+++ b/resources/views/livewire/team/invite-link.blade.php
@@ -11,7 +11,7 @@
                         </x-forms.button>
                     @endif
                     <x-forms.button type="submit" wire:target="viaLink"
-                        defaultClass="button bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!">
+                        defaultClass="button button-highlighted">
                         <x-reicon name="plus" class="size-3.5" />
                         Generate link
                     </x-forms.button>
diff --git a/resources/views/livewire/upgrade.blade.php b/resources/views/livewire/upgrade.blade.php
index bfdee84ff..cdcdc6134 100644
--- a/resources/views/livewire/upgrade.blade.php
+++ b/resources/views/livewire/upgrade.blade.php
@@ -71,7 +71,7 @@
                                     <div
                                         class="flex items-center gap-2.5 rounded-lg border border-neutral-200 bg-neutral-50 px-3 py-2.5 dark:border-white/[0.08] dark:bg-white/[0.03]">
                                         <template x-if="!upgradeComplete && !upgradeError">
-                                            <svg class="size-4 shrink-0 animate-spin text-coollabs dark:text-warning"
+                                            <svg class="loading-indicator size-4 shrink-0 animate-spin"
                                                 xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                                 aria-hidden="true">
                                                 <circle class="opacity-25" cx="12" cy="12" r="10"
diff --git a/resources/views/source/all.blade.php b/resources/views/source/all.blade.php
index 42a695f6b..1e7754b2d 100644
--- a/resources/views/source/all.blade.php
+++ b/resources/views/source/all.blade.php
@@ -15,7 +15,7 @@
                 <div x-data="{ dropdownOpen: false }" class="relative w-fit shrink-0"
                     @click.outside="dropdownOpen = false" @keydown.escape.window="dropdownOpen = false">
                     <button type="button" @click="dropdownOpen = !dropdownOpen"
-                        class="button bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!"
+                        class="button button-highlighted"
                         aria-haspopup="menu" :aria-expanded="dropdownOpen">
                         <x-reicon name="plus" class="size-3.5" />
                         New source
diff --git a/tests/Feature/BreadcrumbSelectionStyleTest.php b/tests/Feature/BreadcrumbSelectionStyleTest.php
new file mode 100644
index 000000000..e582240fa
--- /dev/null
+++ b/tests/Feature/BreadcrumbSelectionStyleTest.php
@@ -0,0 +1,14 @@
+<?php
+
+test('breadcrumb switchers indicate the current item with background only', function () {
+    $views = collect([
+        resource_path('views/components/top-breadcrumb.blade.php'),
+        resource_path('views/components/breadcrumb-switcher.blade.php'),
+        resource_path('views/livewire/switch-team.blade.php'),
+    ])->map(fn (string $path): string => file_get_contents($path));
+
+    expect($views->implode("\n"))
+        ->not->toContain('name="check-circle"')
+        ->and($views->every(fn (string $view): bool => str_contains($view, 'bg-neutral-100')))
+        ->toBeTrue();
+});
diff --git a/tests/Feature/DashboardServersEmptyStateTest.php b/tests/Feature/DashboardServersEmptyStateTest.php
index dfd4fef72..4fbe0209c 100644
--- a/tests/Feature/DashboardServersEmptyStateTest.php
+++ b/tests/Feature/DashboardServersEmptyStateTest.php
@@ -30,6 +30,7 @@ it('shows an add private key button when no private keys exist', function () {
         ->assertSee('A private key is required')
         ->assertSee('Add an SSH private key before connecting your first server.')
         ->assertSee('Add private key')
+        ->assertSeeHtml('button button-highlighted')
         ->assertSee(route('security.private-key.index'), false);
 });
 
diff --git a/tests/Feature/DeploymentLogToolbarStyleTest.php b/tests/Feature/DeploymentLogToolbarStyleTest.php
new file mode 100644
index 000000000..84cb1f47b
--- /dev/null
+++ b/tests/Feature/DeploymentLogToolbarStyleTest.php
@@ -0,0 +1,20 @@
+<?php
+
+test('active deployment log controls use a coollabs background and white icon', function () {
+    $styles = file_get_contents(resource_path('css/app.css'));
+
+    expect($styles)
+        ->toMatch('/\.logs-viewer-btn-active\s*\{[^}]*background:\s*var\(--color-coollabs\);[^}]*color:\s*#fff;/s')
+        ->not->toMatch('/\.logs-viewer-btn-active\s*\{[^}]*var\(--color-warning\)/s');
+});
+
+test('deployment logs use light surfaces in light mode and dark surfaces in dark mode', function () {
+    $view = file_get_contents(resource_path('views/livewire/project/application/deployment/show.blade.php'));
+
+    expect($view)
+        ->toContain('bg-white text-neutral-800')
+        ->toContain('dark:bg-[#0d0d0d] dark:text-neutral-100')
+        ->toContain('border-neutral-200 shadow-sm dark:border-neutral-800')
+        ->toContain('border-neutral-200! bg-white!')
+        ->toContain('dark:border-white/[0.08]! dark:bg-white/[0.05]!');
+});
diff --git a/tests/Feature/EnvironmentVariableTableLayoutTest.php b/tests/Feature/EnvironmentVariableTableLayoutTest.php
index 0e634fdd5..d8111022c 100644
--- a/tests/Feature/EnvironmentVariableTableLayoutTest.php
+++ b/tests/Feature/EnvironmentVariableTableLayoutTest.php
@@ -90,6 +90,13 @@ test('shared environment variables table still omits Managed column', function (
     expect($show)->toContain('! $isSharedVariable');
 });
 
+test('shared environment variables empty state has spacing around the card', function () {
+    $editor = file_get_contents(resource_path('views/components/shared-variables/editor.blade.php'));
+
+    expect($editor)
+        ->toMatch('/<div class="p-3">\s*<x-empty title="No shared variables"/');
+});
+
 test('managed environment variables are ordered first', function () {
     $component = file_get_contents(app_path('Livewire/Project/Shared/EnvironmentVariable/All.php'));
 
diff --git a/tests/Feature/HelperInfoButtonTest.php b/tests/Feature/HelperInfoButtonTest.php
index 9b42ce5ba..a51d52586 100644
--- a/tests/Feature/HelperInfoButtonTest.php
+++ b/tests/Feature/HelperInfoButtonTest.php
@@ -9,7 +9,7 @@ test('helper trigger is a button that stops label activation', function () {
     expect($contents)
         ->toContain('type="button"')
         ->toContain('@click.prevent.stop')
-        ->toContain('aria-label="More information"')
+        ->toContain('aria-label="{{ $label }}"')
         ->toContain('info-helper-popup')
         ->toContain('name="info-circle"')
         ->toContain('class="size-3.5 text-neutral-400')
diff --git a/tests/Feature/HighlightedButtonStylingTest.php b/tests/Feature/HighlightedButtonStylingTest.php
new file mode 100644
index 000000000..31b471534
--- /dev/null
+++ b/tests/Feature/HighlightedButtonStylingTest.php
@@ -0,0 +1,19 @@
+<?php
+
+test('highlighted buttons use the shared coollabs style in every color scheme', function () {
+    $utilities = file_get_contents(resource_path('css/utilities.css'));
+    $appStyles = file_get_contents(resource_path('css/app.css'));
+    $views = collect(new RecursiveIteratorIterator(new RecursiveDirectoryIterator(resource_path('views'))))
+        ->filter(fn (SplFileInfo $file): bool => $file->isFile() && $file->getExtension() === 'php')
+        ->map(fn (SplFileInfo $file): string => file_get_contents($file->getPathname()))
+        ->implode("\n");
+
+    expect($utilities)
+        ->toContain('@utility button-highlighted')
+        ->toContain('@apply border-2 text-coollabs-200 dark:text-white bg-coollabs-50 dark:bg-coollabs/20 border-coollabs dark:border-coollabs-100 hover:bg-coollabs hover:text-white dark:hover:bg-coollabs-100 dark:hover:text-white;')
+        ->and($appStyles)
+        ->toContain('button[isHighlighted]:not(:disabled)')
+        ->toContain('@apply button-highlighted;')
+        ->and($views)
+        ->not->toContain('dark:bg-warning/15! dark:text-warning! dark:ring-warning/25');
+});
diff --git a/tests/Feature/Livewire/ConfigurationCheckerTest.php b/tests/Feature/Livewire/ConfigurationCheckerTest.php
index b9ef79d4e..00b00ab06 100644
--- a/tests/Feature/Livewire/ConfigurationCheckerTest.php
+++ b/tests/Feature/Livewire/ConfigurationCheckerTest.php
@@ -73,10 +73,29 @@ it('renders the changed configuration labels without a second backend request',
     $view = file_get_contents(resource_path('views/livewire/project/shared/configuration-checker.blade.php'));
 
     expect($view)
+        ->toContain(':compact-after="5000"')
+        ->toContain(':compact-storage-key="$compactStorageKey"')
         ->toContain('x-on:click="configurationDiffModalOpen = true"')
         ->not->toContain('$wire.refreshConfigurationChanges()');
 });
 
+it('supports timed compact popup notifications', function () {
+    $view = file_get_contents(resource_path('views/components/popup-small.blade.php'));
+
+    expect($view)
+        ->toContain('compactAfter')
+        ->toContain('compactStorageKey')
+        ->toContain("localStorage.setItem(this.storageKey, 'compact')")
+        ->toContain("localStorage.setItem(this.storageKey, 'icon')")
+        ->toContain('localStorage.removeItem(key)')
+        ->toContain('<template x-teleport="body">')
+        ->toContain('compact = true')
+        ->toContain('@click="restore()"')
+        ->toContain('@click.stop="minimizeToIcon()"')
+        ->toContain('x-show="!iconOnly"')
+        ->toContain('x-show="!compact"');
+});
+
 it('refreshes configuration changes when the event is received', function () {
     $application = configurationCheckerApplication($this->environment);
     markConfigurationCheckerApplicationDeployed($application);
diff --git a/tests/Feature/LivewireLoadingColorTest.php b/tests/Feature/LivewireLoadingColorTest.php
new file mode 100644
index 000000000..bbe42c888
--- /dev/null
+++ b/tests/Feature/LivewireLoadingColorTest.php
@@ -0,0 +1,22 @@
+<?php
+
+test('livewire loading indicators use the shared coollabs purple', function () {
+    $utilities = file_get_contents(resource_path('css/utilities.css'));
+    $loading = file_get_contents(resource_path('views/components/loading.blade.php'));
+    $pageLoading = file_get_contents(resource_path('views/components/page-loading.blade.php'));
+    $views = collect(new RecursiveIteratorIterator(new RecursiveDirectoryIterator(resource_path('views'))))
+        ->filter(fn (SplFileInfo $file): bool => $file->isFile() && $file->getExtension() === 'php')
+        ->map(fn (SplFileInfo $file): string => file_get_contents($file->getPathname()))
+        ->implode("\n");
+
+    expect($utilities)
+        ->toContain('@utility loading-indicator')
+        ->toContain('@apply text-coollabs dark:text-coollabs-100;')
+        ->and($loading)->toContain('loading-indicator')
+        ->and($pageLoading)->toContain('loading-indicator')
+        ->and($views)->not->toMatch('/animate-spin[^"\n]*dark:text-warning|dark:text-warning[^"\n]*animate-spin/');
+});
+
+test('livewire navigation progress bar uses coollabs purple', function () {
+    expect(config('livewire.navigate.progress_bar_color'))->toBe('#6b16ed');
+});
diff --git a/tests/Feature/ResourceHeadingUnifiedNavbarTest.php b/tests/Feature/ResourceHeadingUnifiedNavbarTest.php
index 9ce5649a4..c067407b4 100644
--- a/tests/Feature/ResourceHeadingUnifiedNavbarTest.php
+++ b/tests/Feature/ResourceHeadingUnifiedNavbarTest.php
@@ -94,7 +94,7 @@ it('keeps application links next to advanced actions on the right', function ()
     expect($advancedPosition)->not->toBeFalse()
         ->and($linksPosition)->not->toBeFalse()
         ->and($linksPosition)->toBeGreaterThan($advancedPosition)
-        ->and($links)->toContain('listbox-panel top-full! right-0! left-auto!')
+        ->and($links)->toContain("'right-0! left-auto! min-w-60! max-w-96!' => !\$fullWidth")
         ->and($links)->toContain('listbox-option justify-start! gap-2.5!')
         ->and($links)->not->toContain('md:left-0 md:right-auto');
 
@@ -344,6 +344,7 @@ it('shows application and service Links on mobile headings', function () {
     $applicationLinks = file_get_contents(resource_path('views/components/applications/links.blade.php'));
     expect($applicationLinks)
         ->toContain("'button w-full justify-between' => \$fullWidth")
+        ->toContain("'left-0! right-0! w-full! min-w-0! max-w-none!' => \$fullWidth")
         ->toContain('<x-reicon name="chevron-down"');
 
     expect($mobileServiceSection)
@@ -355,6 +356,7 @@ it('shows application and service Links on mobile headings', function () {
     $serviceLinks = file_get_contents(resource_path('views/components/services/links.blade.php'));
     expect($serviceLinks)
         ->toContain("'button w-full justify-between' => \$fullWidth")
+        ->toContain("'left-0! right-0! w-full! min-w-0! max-w-none!' => \$fullWidth")
         ->toContain('<x-reicon name="chevron-down"')
         ->toContain('No links available');
 
diff --git a/tests/Feature/SentinelUnsavedBarFlashTest.php b/tests/Feature/SentinelUnsavedBarFlashTest.php
index 97e5bdc91..431766e6a 100644
--- a/tests/Feature/SentinelUnsavedBarFlashTest.php
+++ b/tests/Feature/SentinelUnsavedBarFlashTest.php
@@ -36,6 +36,15 @@ test('unsaved bar delays show and hides while loading to avoid instant-save flas
         ->toContain('delay-0');
 });
 
+test('unsaved bar stays above floating notifications so save actions remain accessible', function () {
+    $unsavedBar = file_get_contents(resource_path('views/components/unsaved-bar.blade.php'));
+    $popup = file_get_contents(resource_path('views/components/popup-small.blade.php'));
+
+    expect($unsavedBar)
+        ->toContain('z-[1000]')
+        ->and($popup)->toContain('z-999');
+});
+
 test('settings general unsaved bar excludes auto-saving instance timezone', function () {
     $path = resource_path('views/livewire/settings/index.blade.php');
     $contents = file_get_contents($path);
diff --git a/tests/Feature/ServerIndexViewSwitcherTest.php b/tests/Feature/ServerIndexViewSwitcherTest.php
new file mode 100644
index 000000000..4bba742c7
--- /dev/null
+++ b/tests/Feature/ServerIndexViewSwitcherTest.php
@@ -0,0 +1,22 @@
+<?php
+
+test('view switchers use the shared coollabs selected state on every page', function () {
+    $views = collect([
+        resource_path('views/livewire/server/index.blade.php'),
+        resource_path('views/livewire/project/index.blade.php'),
+        resource_path('views/livewire/project/show.blade.php'),
+        resource_path('views/livewire/project/resource/index.blade.php'),
+        resource_path('views/livewire/project/service/configuration.blade.php'),
+        resource_path('views/livewire/tags/show.blade.php'),
+    ])->map(fn (string $path): string => file_get_contents($path));
+    $utilities = file_get_contents(resource_path('css/utilities.css'));
+
+    expect($views->every(fn (string $view): bool => str_contains($view, "viewMode === 'table'")
+        && str_contains($view, "viewMode === 'grid'")
+        && str_contains($view, 'control-selected')))
+        ->toBeTrue()
+        ->and($views->implode("\n"))->not->toContain('dark:bg-warning/15 dark:text-warning')
+        ->and($utilities)
+        ->toContain('@utility control-selected')
+        ->toContain('@apply bg-coollabs text-white dark:bg-coollabs dark:text-white;');
+});
diff --git a/tests/Feature/SettingsSectionDescriptionTest.php b/tests/Feature/SettingsSectionDescriptionTest.php
index c3b7321b9..25ce7df5f 100644
--- a/tests/Feature/SettingsSectionDescriptionTest.php
+++ b/tests/Feature/SettingsSectionDescriptionTest.php
@@ -2,7 +2,7 @@
 
 use Illuminate\Support\Facades\Blade;
 
-it('renders section helper copy as a visible description instead of an info icon', function () {
+it('renders section helper copy as a tooltip on the underlined title', function () {
     $html = Blade::render(<<<'BLADE'
         <x-application.settings-section title="Primary server" helper="The server and network used by this resource.">
             Content
@@ -12,5 +12,8 @@ it('renders section helper copy as a visible description instead of an info icon
     expect($html)
         ->toContain('Primary server')
         ->toContain('The server and network used by this resource.')
-        ->not->toContain('aria-label="More information"');
+        ->toContain('aria-label="More information about Primary server"')
+        ->toContain('class="underline underline-offset-4"')
+        ->toContain('underline-offset-4')
+        ->not->toMatch('/<p[^>]*>\s*The server and network used by this resource\.\s*<\/p>/');
 });
diff --git a/tests/Feature/SharedVariablesTitleOnDesktopTest.php b/tests/Feature/SharedVariablesTitleOnDesktopTest.php
index 4500c4b1d..e0fa4aa9e 100644
--- a/tests/Feature/SharedVariablesTitleOnDesktopTest.php
+++ b/tests/Feature/SharedVariablesTitleOnDesktopTest.php
@@ -19,19 +19,29 @@ test('shared variables pages hide the family title on desktop', function () {
     }
 });
 
-test('shared variables editor places the view toggle next to the tabs', function () {
+test('shared variables editor places the view toggle in the variables section title', function () {
     $editor = file_get_contents(resource_path('views/components/shared-variables/editor.blade.php'));
 
     expect($editor)
+        ->toContain('<x-application.settings-section :title="$title" flush>')
         ->toContain('<x-slot:actions>')
         ->toContain('wire:click="switch"')
         ->toContain('Developer view')
-        ->toContain('Normal view');
+        ->toContain('Normal view')
+        ->toMatch('/settings-section[\s\S]{0,300}<x-slot:actions>[\s\S]{0,300}wire:click="switch"/')
+        ->not->toContain('actionsInTitle');
+});
 
-    // No longer nested as a section header action above the variable list.
-    expect($editor)->not->toMatch(
-        '/settings-section[\s\S]{0,200}<x-slot:actions>[\s\S]{0,200}wire:click="switch"/'
-    );
+test('shared variables navigation uses the standard mobile settings menu', function () {
+    $navbar = file_get_contents(resource_path('views/components/dashboard/navbar.blade.php'));
+
+    expect($navbar)
+        ->toContain("\$stackTabsOnMobile = \$section === 'shared-variables'")
+        ->toContain('grid grid-cols-2 gap-0.5 border-y')
+        ->toContain("'menu-item'")
+        ->toContain("'menu-item-active' => \$item['active']")
+        ->toContain("\$sharedVariableIcons[\$item['label']]")
+        ->toContain('hidden lg:flex');
 });
 
 test('shared variables table omits resource-only flag columns', function () {
diff --git a/tests/Feature/StorageSettingsLayoutTest.php b/tests/Feature/StorageSettingsLayoutTest.php
index 51f25aed0..50c3c723e 100644
--- a/tests/Feature/StorageSettingsLayoutTest.php
+++ b/tests/Feature/StorageSettingsLayoutTest.php
@@ -52,7 +52,7 @@ it('places the storage name and connection status in breadcrumbs and delete in t
         ->toContain('@storage-status-changed.window');
     expect(file_get_contents(resource_path('views/components/breadcrumb-switcher.blade.php')))
         ->toContain('{{ $title }}')
-        ->toContain('name="check-circle"');
+        ->not->toContain('name="check-circle"');
     expect(file_get_contents(resource_path('views/livewire/storage/index.blade.php')))
         ->toContain('label="Connected"')
         ->not->toContain('label="Ready"');
diff --git a/tests/Feature/TagsShowPageTest.php b/tests/Feature/TagsShowPageTest.php
index 82259f5d2..a159320f0 100644
--- a/tests/Feature/TagsShowPageTest.php
+++ b/tests/Feature/TagsShowPageTest.php
@@ -114,6 +114,13 @@ it('shows empty resource and deployment states for an unused tag', function () {
         ->assertSee('Queued or running');
 });
 
+it('adds spacing around the active deployments empty state', function () {
+    $view = file_get_contents(resource_path('views/livewire/tags/show.blade.php'));
+
+    expect($view)
+        ->toMatch('/<div class="p-3">\s*<x-empty title="No active deployments"/');
+});
+
 it('redirects to the overview when the requested tag does not exist', function () {
     Tag::create(['name' => 'hello', 'team_id' => $this->team->id]);