diff --git a/src/Web/AdminModule/ApplicationModule/Control/EnvironmentsForm/EnvironmentsFormControl.php b/src/Web/AdminModule/ApplicationModule/Control/EnvironmentsForm/EnvironmentsFormControl.php
index b76c4e7..2c85140 100644
--- a/src/Web/AdminModule/ApplicationModule/Control/EnvironmentsForm/EnvironmentsFormControl.php
+++ b/src/Web/AdminModule/ApplicationModule/Control/EnvironmentsForm/EnvironmentsFormControl.php
@@ -60,7 +60,7 @@ protected function createComponentForm(): Form
                 ->setDefaultValue('#ffffff')
                 ->setHtmlAttribute('placeholder', 'color.placeholder')
                 ->setOption('type', 'color-picker')
-                ->setOption('placement', 'bottom-right')
+                ->setOption('placement', 'bottom-left')
                 ->setRequired('color.required')
                 ->addRule(Form::Pattern, 'color.rule.pattern', '#([a-fA-F0-9]{3}){1,2}\b');
         }, 0);
diff --git a/src/Web/AdminModule/ApplicationModule/Control/EnvironmentsForm/templates/form.imports.latte b/src/Web/AdminModule/ApplicationModule/Control/EnvironmentsForm/templates/form.imports.latte
index 4324da8..ddb1a3a 100644
--- a/src/Web/AdminModule/ApplicationModule/Control/EnvironmentsForm/templates/form.imports.latte
+++ b/src/Web/AdminModule/ApplicationModule/Control/EnvironmentsForm/templates/form.imports.latte
@@ -1,23 +1,23 @@
 {define #container-name-environments}
-    <div class="px-4 sm:px-6">
-        <div class="border border-gray-200 px-2 sm:px-4 py-2 sm:py-4 rounded mb-4 shadow-sm">
+    <div class="px-4 sm:px-6 sm:items-start sm:border-b sm:border-gray-200 sm:pb-6">
+        <div class="border border-gray-200 px-2 sm:px-4 py-2 sm:py-4 rounded mb-6 shadow-sm">
             <div class="flex flex-nowrap items-start space-x-3">
                 <div class="flex-1">
                     <input disabled value="{_'//layout.default_environment'}" type="text" class="no-live-validation shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none">
                 </div>
             </div>
         </div>
-        <div n:multiplier="environments" class="border border-gray-200 px-2 sm:px-4 py-2 sm:py-4 rounded mb-4 shadow-sm">
+        <div n:multiplier="environments" class="border border-gray-200 px-2 sm:px-4 py-2 sm:py-4 rounded mb-6 shadow-sm">
             <div class="flex flex-nowrap items-start space-x-1 sm:space-x-3">
+                <div class="grow-0 shrink-0	basis-auto">
+                    {include #helpers-override-split, blockNamePrefix => control, control => $formContainer->getComponent('color')}
+                </div>
                 <div class="flex-1">
                     {include #helpers-override-split, blockNamePrefix => control, control => $formContainer->getComponent('code')}
                 </div>
                 <div class="flex-1">
                     {include #helpers-override-split, blockNamePrefix => control, control => $formContainer->getComponent('name')}
                 </div>
-                <div class="grow-0 shrink-0	basis-auto">
-                    {include #helpers-override-split, blockNamePrefix => control, control => $formContainer->getComponent('color')}
-                </div>
 
                 {if $formContainer->getComponent(Contributte\FormMultiplier\Multiplier::SUBMIT_REMOVE_NAME, false)}
                     <button
diff --git a/src/Web/AdminModule/CookieModule/Control/CookieForm/templates/form.imports.latte b/src/Web/AdminModule/CookieModule/Control/CookieForm/templates/form.imports.latte
index 4da6738..3008ef2 100644
--- a/src/Web/AdminModule/CookieModule/Control/CookieForm/templates/form.imports.latte
+++ b/src/Web/AdminModule/CookieModule/Control/CookieForm/templates/form.imports.latte
@@ -39,23 +39,17 @@
             </div>
             <div class="ml-3 text-sm">
                 {if '' === $k}
-                    <label
-                            n:name="$control:$k"
-                            class="inline-flex items-center rounded-md bg-gray-100 px-2 py-1 text-xs font-medium text-black"
-                    >
+                    <label n:name="$control:$k" class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-0.5">
+                        <svg class="h-1.5 w-1.5 fill-white" viewBox="0 0 6 6" aria-hidden="true">
+                            <circle cx="3" cy="3" r="3" />
+                        </svg>
                         {=$control->translate($v)}
                     </label>
-                {elseif null === $environment}
-                    <label n:name="$control:$k" n:class="
-                        $control->getLabelPrototype()->class,
-                        'font-medium text-gray-700'
-                    ">{=$control->translate($v)}</label>
-                {else}
-                    <label
-                            n:name="$control:$k"
-                            class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium"
-                            style="background: {$environment->color->value()|noescape} !important; color: {App\Web\Utils\Color::resolveFontColor($environment->color->value())|noescape} !important;"
-                    >
+                {elseif null !== $environment}
+                    <label n:name="$control:$k" class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-0.5">
+                        <svg class="h-1.5 w-1.5" viewBox="0 0 6 6" aria-hidden="true" style="fill: {$environment->color->value()|noescape}">
+                            <circle cx="3" cy="3" r="3" />
+                        </svg>
                         {=$control->translate($v)}
                     </label>
                 {/if}
diff --git a/src/Web/AdminModule/CookieModule/Control/CookieList/templates/datagrid.latte b/src/Web/AdminModule/CookieModule/Control/CookieList/templates/datagrid.latte
index 420aa20..f563ddc 100644
--- a/src/Web/AdminModule/CookieModule/Control/CookieList/templates/datagrid.latte
+++ b/src/Web/AdminModule/CookieModule/Control/CookieList/templates/datagrid.latte
@@ -102,16 +102,20 @@
 {define col-environments}
     <div class="min-w-[150px]">
         {if true === $item->environments}
-            <span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200 bg-white select-all">
+            <span class="inline-flex items-center gap-x-1.5 rounded-md px-1 py-1 select-all">
+                <svg class="h-1.5 w-1.5 fill-white" viewBox="0 0 6 6" aria-hidden="true">
+                    <circle cx="3" cy="3" r="3" />
+                </svg>
                 {_all_environments}
             </span>
         {else}
             {var $environments = $item->environments}
             {var $maxBadges = min([2, count($environments)])}
 
-            <div class="whitespace-nowrap">
+            <div class="whitespace-nowrap flex items-center">
                 {for $i = 0; $i < $maxBadges; $i++}
                     {include #environment-badge, environment: array_shift($environments), vertical: false}
+                    <span n:if="$i !== ($maxBadges - 1)">,&nbsp;</span>
                 {/for}
 
                 {if 0 < count($environments)}
@@ -128,7 +132,7 @@
                         'x-tooltip.interactive.theme.light-border.placement.right.html.raw' => $tooltip
                     ]}
 
-                    <span n:attr="$attrs">{_and_more_projects, count($environments)}</span>
+                    <span n:attr="$attrs">&nbsp;{_and_more_projects, count($environments)}</span>
                 {/if}
             </div>
         {/if}
@@ -156,16 +160,26 @@
 
 {define #environment-badge, string|null $environment, bool $vertical = false}
     {if null === $environment}
-        <span n:class="$vertical ? 'block text-center my-1.5' : 'inline-flex items-center', 'rounded-md bg-gray-200 px-2 py-1 text-xs font-medium text-black select-all'">{_//layout.default_environment}</span>
+        <span n:class="$vertical ? 'flex my-1.5' : 'inline-flex', 'items-center gap-x-1.5 rounded-md px-1 py-1 select-all'">
+            <svg class="h-1.5 w-1.5 fill-white" viewBox="0 0 6 6" aria-hidden="true">
+                <circle cx="3" cy="3" r="3" />
+            </svg>
+            {_//layout.default_environment}
+        </span>
     {elseif null !== $_globalEnvironments->getByCode($environment)}
         {var $globalEnvironment = $_globalEnvironments->getByCode($environment)}
-        <span
-            n:class="$vertical ? 'block text-center my-1.5' : 'inline-flex items-center', 'rounded-md px-2 py-1 text-xs font-medium select-all'"
-            style="background: {$globalEnvironment->color->value()|noescape} !important; color: {App\Web\Utils\Color::resolveFontColor($globalEnvironment->color->value())|noescape} !important;"
-        >
+        <span n:class="$vertical ? 'flex my-1.5' : 'inline-flex', 'items-center gap-x-1.5 rounded-md px-1 py-1 select-all'">
+            <svg class="h-1.5 w-1.5 fill-white" viewBox="0 0 6 6" aria-hidden="true" style="fill: {$globalEnvironment->color->value()|noescape}">
+                <circle cx="3" cy="3" r="3" />
+            </svg>
             {$globalEnvironment->name}
         </span>
     {else}
-        <span n:class="$vertical ? 'block text-center my-1.5' : 'inline-flex items-center', 'rounded-md bg-gray-200 px-2 py-1 text-xs font-medium text-black select-all'">{$environment}</span>
+        <span n:class="$vertical ? 'flex my-1.5' : 'inline-flex', 'items-center gap-x-1.5 rounded-md px-1 py-1 select-all'">
+            <svg class="h-1.5 w-1.5 fill-white" viewBox="0 0 6 6" aria-hidden="true">
+                <circle cx="3" cy="3" r="3" />
+            </svg>
+            {$environment}
+        </span>
     {/if}
 {/define}
diff --git a/src/Web/AdminModule/Presenter/DashboardPresenter.php b/src/Web/AdminModule/Presenter/DashboardPresenter.php
index d28a1fa..101a90f 100644
--- a/src/Web/AdminModule/Presenter/DashboardPresenter.php
+++ b/src/Web/AdminModule/Presenter/DashboardPresenter.php
@@ -47,13 +47,12 @@ protected function beforeRender(): void
             'name' => $project->name->value(),
             'color' => $project->color->value(),
             'fontColor' => Color::resolveFontColor($project->color->value()),
-            'environments' => array_merge(
+            'environments' => 1 < count($projectEnvironments = array_merge(
                 [
                     [
                         'code' => '//default//',
                         'name' => $this->getTranslator()->translate('//layout.default_environment'),
-                        'color' => '#e5e7eb',
-                        'fontColor' => '#000000',
+                        'color' => '#ffffff',
                     ],
                 ],
                 array_values(
@@ -62,7 +61,6 @@ protected function beforeRender(): void
                             'code' => $environment->code,
                             'name' => $environment->name,
                             'color' => $environment->color->value(),
-                            'fontColor' => Color::resolveFontColor($environment->color->value()),
                         ],
                         EnabledEnvironmentsResolver::resolveProjectEnvironments(
                             globalSettingsEnvironments: $globalEnvironments,
@@ -70,7 +68,7 @@ protected function beforeRender(): void
                         ),
                     ),
                 ),
-            ),
+            )) ? $projectEnvironments : [],
             'links' => [
                 'consents' => $this->getUser()->isAllowed(ProjectConsentResource::class, ProjectConsentResource::READ)
                     ? $this->link(':Admin:Project:Consents:', ['project' => $project->code->value()])
diff --git a/src/Web/AdminModule/Presenter/templates/Dashboard.default.latte b/src/Web/AdminModule/Presenter/templates/Dashboard.default.latte
index 014280f..7c66764 100644
--- a/src/Web/AdminModule/Presenter/templates/Dashboard.default.latte
+++ b/src/Web/AdminModule/Presenter/templates/Dashboard.default.latte
@@ -79,31 +79,49 @@
                             <div x-show="project.environments.length">
                                 <div x-data="dropdown" x-bind="dropdown" class="relative inline-block text-left">
                                     <div>
-                                        <button x-bind="dropdownButton" type="button" class="inline-flex w-full justify-center">
-                                            <span x-show="null === project.currentEnvironment" class="inline-flex items-center w-full rounded-md px-2 py-2 text-xs font-medium bg-white color-black ring-1 ring-inset ring-gray-200">{{_all_environments}}</span>
+                                        <button x-bind="dropdownButton" type="button" class="inline-flex items-center pl-4 pr-6 py-2 border border-transparent rounded-md text-sm font-medium bg-gray-50 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-200">
+                                            <span
+                                                x-show="null === project.currentEnvironment"
+                                                class="flex w-full items-center gap-x-1.5 rounded-md text-xs font-medium text-gray-900"
+                                            >
+                                                <svg class="h-1.5 w-1.5 fill-white" viewBox="0 0 6 6" aria-hidden="true">
+                                                    <circle cx="3" cy="3" r="3" />
+                                                </svg>
+                                                {{_all_environments}}
+                                            </span>
+
                                             <span
                                                 x-show="null !== project.currentEnvironment"
-                                                x-text="project.currentEnvironment ? project.currentEnvironment.name : ''"
-                                                :style="{ background: project.currentEnvironment ? project.currentEnvironment.color : '#fff', color: project.currentEnvironment ? project.currentEnvironment.fontColor : '#000' }"
-                                                class="inline-flex items-center w-full rounded-md px-2 py-2 text-xs font-medium"
-                                            ></span>
+                                                class="flex w-full items-center gap-x-1.5 rounded-md text-xs font-medium text-gray-900"
+                                            >
+                                                <svg :style="{ fill: project.currentEnvironment ? project.currentEnvironment.color : '#ffffff' }" class="h-1.5 w-1.5" viewBox="0 0 6 6" aria-hidden="true">
+                                                    <circle cx="3" cy="3" r="3" />
+                                                </svg>
+                                                <span x-text="project.currentEnvironment ? project.currentEnvironment.name : ''"></span>
+                                            </span>
                                         </button>
                                     </div>
 
-                                    <div x-bind="dropdownPanel" x-cloak class="absolute right-0 z-10 mt-2 w-48 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" tabindex="-1">
-                                        <div>
-                                            <button @click="changeProjectEnvironment(project.code, null) && close()" class="block w-full p-1 hover:opacity-75" role="menuitem" tabindex="-1">
-                                                <span class="inline-flex items-center w-full rounded-md px-3 py-3 text-xs font-medium bg-white color-black ring-1 ring-inset ring-gray-200">{{_all_environments}}</span>
+                                    <div x-bind="dropdownPanel" x-cloak class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white shadow-lg py-1 ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" tabindex="-1">
+                                        <div class="px-1">
+                                            <button @click="changeProjectEnvironment(project.code, null) && close()" type="button" class="flex w-full items-center px-3 py-2 text-sm text-gray-700 rounded hover:bg-gray-100 active:bg-gray-100 focus:bg-gray-100 border-none" role="menuitem" tabindex="-1">
+                                                <span class="flex w-full items-center gap-x-1.5 rounded-md text-xs font-medium text-gray-900">
+                                                    <svg class="h-1.5 w-1.5 fill-white" viewBox="0 0 6 6" aria-hidden="true">
+                                                        <circle cx="3" cy="3" r="3" />
+                                                    </svg>
+                                                    {{_all_environments}}
+                                                </span>
                                             </button>
                                         </div>
                                         <template x-for="environment in project.environments" :key="environment.code" hidden>
-                                            <div>
-                                                <button @click="changeProjectEnvironment(project.code, environment) && close()" class="block w-full p-1 hover:opacity-75" role="menuitem" tabindex="-1">
-                                                    <span
-                                                        x-text="environment.name"
-                                                        :style="{ background: environment.color, color: environment.fontColor }"
-                                                        class="inline-flex items-center w-full rounded-md px-3 py-3 text-xs font-medium"
-                                                    ></span>
+                                            <div class="px-1">
+                                                <button @click="changeProjectEnvironment(project.code, environment) && close()" type="button" class="flex w-full items-center px-3 py-2 text-sm text-gray-700 rounded hover:bg-gray-100 active:bg-gray-100 focus:bg-gray-100 border-none" role="menuitem" tabindex="-1">
+                                                    <span class="flex w-full items-center gap-x-1.5 rounded-md text-xs font-medium text-gray-900">
+                                                        <svg :style="{ fill: environment.color }" class="h-1.5 w-1.5" viewBox="0 0 6 6" aria-hidden="true">
+                                                            <circle cx="3" cy="3" r="3" />
+                                                        </svg>
+                                                        <span x-text="environment.name"></span>
+                                                    </span>
                                                 </button>
                                             </div>
                                         </template>
diff --git a/src/Web/AdminModule/ProjectModule/Control/ConsentHistory/templates/consentHistoryControl.latte b/src/Web/AdminModule/ProjectModule/Control/ConsentHistory/templates/consentHistoryControl.latte
index f8ffce4..eca7efa 100644
--- a/src/Web/AdminModule/ProjectModule/Control/ConsentHistory/templates/consentHistoryControl.latte
+++ b/src/Web/AdminModule/ProjectModule/Control/ConsentHistory/templates/consentHistoryControl.latte
@@ -96,23 +96,29 @@
                                 {/if}
                             </td>
                         </tr>
-                        <tr class="border-t border-gray-200">
+                        <tr n:if="0 < count($environments)" class="border-t border-gray-200">
                             <th colspan="2" scope="colgroup" class="bg-gray-50 px-2 py-2 text-left text-sm font-medium text-gray-900">{_environment}</th>
                         </tr>
-                        <tr class="border-t border-gray-200">
+                        <tr n:if="0 < count($environments)" class="border-t border-gray-200">
                             <td colspan="2" class="whitespace-nowrap px-2 py-2 text-sm text-left">
-                                {if null === $environment}
-                                    <span class="inline-flex items-center rounded-md bg-gray-200 px-2 py-1 text-xs font-medium text-black">{_//layout.default_environment}</span>
-                                {elseif isset($environments[$environment->value()])}
-                                    <label
-                                            class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium"
-                                            style="background: {$environments[$environment->value()]->color->value()|noescape} !important; color: {App\Web\Utils\Color::resolveFontColor($environments[$environment->value()]->color->value())|noescape} !important;"
-                                    >
+                                <span class="inline-flex items-center gap-x-1.5 rounded-md">
+                                    {if null === $environment}
+                                        {*<svg class="h-1.5 w-1.5 fill-white" viewBox="0 0 6 6" aria-hidden="true">
+                                            <circle cx="3" cy="3" r="3" />
+                                        </svg>*}
+                                        {_//layout.default_environment}
+                                    {elseif isset($environments[$environment->value()])}
+                                       <svg class="h-1.5 w-1.5 fill-white" viewBox="0 0 6 6" aria-hidden="true" style="fill: {$environments[$environment->value()]->color->value()|noescape}">
+                                            <circle cx="3" cy="3" r="3" />
+                                        </svg>
                                         {$environments[$environment->value()]->name}
-                                    </label>
-                                {else}
-                                    <span class="inline-flex items-center rounded-md bg-gray-200 px-2 py-1 text-xs font-medium text-black">{$environment->value()}</span>
-                                {/if}
+                                    {else}
+                                        {*<svg class="h-1.5 w-1.5 fill-white" viewBox="0 0 6 6" aria-hidden="true">
+                                            <circle cx="3" cy="3" r="3" />
+                                        </svg>*}
+                                        {$environment->value()}
+                                    {/if}
+                                </span>
                             </td>
                         </tr>
                         <tr n:if="0 < count($attributes->values())" class="border-t border-gray-200">
diff --git a/src/Web/AdminModule/ProjectModule/Control/ConsentList/ConsentListControl.php b/src/Web/AdminModule/ProjectModule/Control/ConsentList/ConsentListControl.php
index 1b620f9..ce95df5 100644
--- a/src/Web/AdminModule/ProjectModule/Control/ConsentList/ConsentListControl.php
+++ b/src/Web/AdminModule/ProjectModule/Control/ConsentList/ConsentListControl.php
@@ -80,17 +80,19 @@ protected function createComponentGrid(): DataGrid
         $grid->addColumnText('settings_short_identifier', 'settings_short_identifier', 'settingsShortIdentifier')
             ->setAlign('center');
 
-        $grid->addColumnText('environment', 'environment', 'environment')
-            ->setAlign('center')
-            ->setFilterSelect(
-                options: FilterHelper::all($translator)
-                + [ConsentsDataGridQueryHandler::FILTER_ENVIRONMENT_DEFAULT_ENV_VALUE => $this->getTranslator()->translate('//layout.default_environment')]
-                + array_map(
-                    static fn (Environment $environment): string => $environment->name,
-                    $environments,
-                ),
-                column: 'environment',
-            );
+        if (0 < count($environments)) {
+            $grid->addColumnText('environment', 'environment', 'environment')
+                ->setAlign('center')
+                ->setFilterSelect(
+                    options: FilterHelper::all($translator)
+                    + [ConsentsDataGridQueryHandler::FILTER_ENVIRONMENT_DEFAULT_ENV_VALUE => $this->getTranslator()->translate('//layout.default_environment')]
+                    + array_map(
+                        static fn (Environment $environment): string => $environment->name,
+                        $environments,
+                    ),
+                    column: 'environment',
+                );
+        }
 
         $grid->addColumnDateTimeTz('created_at', 'created_at', 'createdAt')
             ->setFormat('j.n.Y H:i:s')
diff --git a/src/Web/AdminModule/ProjectModule/Control/ConsentList/templates/datagrid.latte b/src/Web/AdminModule/ProjectModule/Control/ConsentList/templates/datagrid.latte
index 76f9430..22a3508 100644
--- a/src/Web/AdminModule/ProjectModule/Control/ConsentList/templates/datagrid.latte
+++ b/src/Web/AdminModule/ProjectModule/Control/ConsentList/templates/datagrid.latte
@@ -26,16 +26,26 @@
 {/define}
 
 {define col-environment}
-    {if null === $item->environment}
-        <span class="inline-flex items-center rounded-md bg-gray-200 px-2 py-1 text-xs font-medium text-black">{_//layout.default_environment}</span>
-    {elseif isset($environments[$item->environment])}
-        <span
-            class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium"
-            style="background: {$environments[$item->environment]->color->value()|noescape} !important; color: {App\Web\Utils\Color::resolveFontColor($environments[$item->environment]->color->value())|noescape} !important;"
-        >
-            {$environments[$item->environment]->name}
-        </span>
-    {else}
-        <span class="inline-flex items-center rounded-md bg-gray-200 px-2 py-1 text-xs font-medium text-black">{$item->environment}</span>
-    {/if}
+    {include #environment-badge, code: $item->environment}
+{/define}
+
+{define #environment-badge, string|null $code}
+    <span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1">
+        {if null === $code}
+            <svg class="h-1.5 w-1.5 fill-white" viewBox="0 0 6 6" aria-hidden="true">
+                <circle cx="3" cy="3" r="3" />
+            </svg>
+            {_//layout.default_environment}
+        {elseif isset($environments[$code])}
+           <svg class="h-1.5 w-1.5 fill-white" viewBox="0 0 6 6" aria-hidden="true" style="fill: {$environments[$code]->color->value()|noescape}">
+                <circle cx="3" cy="3" r="3" />
+            </svg>
+            {$environments[$code]->name}
+        {else}
+            <svg class="h-1.5 w-1.5 fill-white" viewBox="0 0 6 6" aria-hidden="true">
+                <circle cx="3" cy="3" r="3" />
+            </svg>
+            {$code}
+        {/if}
+    </span>
 {/define}
diff --git a/src/Web/AdminModule/ProjectModule/Control/ProjectForm/templates/form.imports.latte b/src/Web/AdminModule/ProjectModule/Control/ProjectForm/templates/form.imports.latte
index 005f085..607bd02 100644
--- a/src/Web/AdminModule/ProjectModule/Control/ProjectForm/templates/form.imports.latte
+++ b/src/Web/AdminModule/ProjectModule/Control/ProjectForm/templates/form.imports.latte
@@ -13,23 +13,17 @@
             </div>
             <div class="ml-3 text-sm">
                 {if '' === $k}
-                    <label
-                        n:name="$control:$k"
-                        class="inline-flex items-center rounded-md bg-gray-200 px-2 py-1 text-xs font-medium text-black"
-                    >
+                    <label n:name="$control:$k" class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-0.5">
+                        <svg class="h-1.5 w-1.5 fill-white" viewBox="0 0 6 6" aria-hidden="true">
+                            <circle cx="3" cy="3" r="3" />
+                        </svg>
                         {=$control->translate($v)}
                     </label>
-                {elseif null === $environment}
-                    <label n:name="$control:$k" n:class="
-                        $control->getLabelPrototype()->class,
-                        'font-medium text-gray-700'
-                    ">{=$control->translate($v)}</label>
-                {else}
-                    <label
-                        n:name="$control:$k"
-                        class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium"
-                        style="background: {$environment->color->value()|noescape} !important; color: {App\Web\Utils\Color::resolveFontColor($environment->color->value())|noescape} !important;"
-                    >
+                {elseif null !== $environment}
+                    <label n:name="$control:$k" class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-0.5">
+                        <svg class="h-1.5 w-1.5" viewBox="0 0 6 6" aria-hidden="true" style="fill: {$environment->color->value()|noescape}">
+                            <circle cx="3" cy="3" r="3" />
+                        </svg>
                         {=$control->translate($v)}
                     </label>
                 {/if}
diff --git a/src/Web/AdminModule/ProjectModule/Presenter/IntegrationPresenter.php b/src/Web/AdminModule/ProjectModule/Presenter/IntegrationPresenter.php
index 637db94..bb9b9ee 100644
--- a/src/Web/AdminModule/ProjectModule/Presenter/IntegrationPresenter.php
+++ b/src/Web/AdminModule/ProjectModule/Presenter/IntegrationPresenter.php
@@ -12,7 +12,6 @@
 use App\Web\AdminModule\ProjectModule\Control\TemplatesForm\TemplatesFormControl;
 use App\Web\AdminModule\ProjectModule\Control\TemplatesForm\TemplatesFormControlFactoryInterface;
 use App\Web\Ui\Form\FormFactoryInterface;
-use App\Web\Utils\Color;
 use Nette\InvalidStateException;
 use SixtyEightPublishers\FlashMessageBundle\Domain\FlashMessage;
 use SixtyEightPublishers\SmartNetteComponent\Attribute\Allowed;
@@ -39,13 +38,12 @@ protected function beforeRender(): void
         assert($template instanceof IntegrationTemplate);
 
         $template->appHost = $this->getHttpRequest()->getUrl()->getHostUrl();
-        $template->environments = array_merge(
+        $template->environments = 0 < count($environments) ? array_merge(
             [
                 [
                     'code' => '//default//',
                     'name' => $this->getTranslator()->translate('//layout.default_environment'),
-                    'color' => '#e5e7eb',
-                    'fontColor' => '#000000',
+                    'color' => '#ffffff',
                 ],
             ],
             array_values(
@@ -54,12 +52,11 @@ protected function beforeRender(): void
                         'code' => $environment->code,
                         'name' => $environment->name,
                         'color' => $environment->color->value(),
-                        'fontColor' => Color::resolveFontColor($environment->color->value()),
                     ],
                     $environments,
                 ),
             ),
-        );
+        ) : [];
     }
 
     protected function createComponentTemplatesForm(): TemplatesFormControl
diff --git a/src/Web/AdminModule/ProjectModule/Presenter/templates/Integration.default.latte b/src/Web/AdminModule/ProjectModule/Presenter/templates/Integration.default.latte
index 651587e..ec043db 100644
--- a/src/Web/AdminModule/ProjectModule/Presenter/templates/Integration.default.latte
+++ b/src/Web/AdminModule/ProjectModule/Presenter/templates/Integration.default.latte
@@ -15,7 +15,7 @@
         <h3 class="text-lg leading-6 font-medium text-gray-900">{_heading_including}</h3>
     </div>
     <div class="max-w-2xl mx-auto px-4 py-8 sm:px-6">
-        <p class="mb-6">{_text_including}</p>
+        <p class="mb-4">{_text_including}</p>
         <div
             x-data="{
                 self: null,
@@ -25,7 +25,7 @@
                 projectCode: '{$projectView->code->value()}',
                 init() {
                     this.self = this.$el;
-                    this.selectEnvironment(this.environments[0]);
+                    this.selectEnvironment(this.environments[0] || null);
                 },
                 selectEnvironment(environment) {
                     this.currentEnvironment = environment;
@@ -35,7 +35,7 @@
                     script = script
                         .replace('{{ APP_HOST }}', this.appHost)
                         .replace('{{ PROJECT_CODE }}', this.projectCode)
-                        .replace('\'{{ ENVIRONMENT }}\'', '//default//' === environment.code ? 'null' : '\'' + environment.code + '\'');
+                        .replace('\'{{ ENVIRONMENT }}\'', null === environment || '//default//' === environment.code ? 'null' : '\'' + environment.code + '\'');
 
                     textarea.CodeMirror ? textarea.CodeMirror.setValue(script) : textarea.innerHTML = script;
 
@@ -43,29 +43,33 @@
                 }
             }"
         >
-            <div x-data="dropdown" x-bind="dropdown" class="relative inline-block text-left mb-6">
-                <div>
-                    <button x-bind="dropdownButton" type="button" class="inline-flex w-full justify-center">
-                        <span
-                            x-text="currentEnvironment ? currentEnvironment.name : ''"
-                            :style="{ background: currentEnvironment ? currentEnvironment.color : '#fff', color: currentEnvironment ? currentEnvironment.fontColor : '#000' }"
-                            class="inline-flex items-center w-full rounded-md px-2 py-2 text-xs font-medium"
-                        ></span>
-                    </button>
-                </div>
+            <div x-show="environments.length">
+                <div x-data="dropdown" x-bind="dropdown" class="relative inline-block text-left mb-2">
+                    <div>
+                        <button x-bind="dropdownButton" type="button" class="inline-flex items-center pl-4 pr-6 py-2 border border-transparent rounded-md text-sm font-medium bg-gray-50 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-200">
+                            <span class="flex w-full items-center gap-x-1.5 rounded-md text-xs font-medium text-gray-900">
+                                <svg :style="{ fill: currentEnvironment ? currentEnvironment.color : '#ffffff' }" class="h-1.5 w-1.5" viewBox="0 0 6 6" aria-hidden="true">
+                                    <circle cx="3" cy="3" r="3" />
+                                </svg>
+                                <span x-text="currentEnvironment ? currentEnvironment.name : ''"></span>
+                            </span>
+                        </button>
+                    </div>
 
-                <div x-bind="dropdownPanel" x-cloak class="absolute left-0 z-10 mt-2 w-48 origin-top-left divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" tabindex="-1">
-                    <template x-for="environment in environments" :key="environment.code" hidden>
-                        <div>
-                            <button @click="selectEnvironment(environment) && close()" class="block w-full p-1 hover:opacity-75" role="menuitem" tabindex="-1">
-                                <span
-                                        x-text="environment.name"
-                                        :style="{ background: environment.color, color: environment.fontColor }"
-                                        class="inline-flex items-center w-full rounded-md px-3 py-3 text-xs font-medium"
-                                ></span>
-                            </button>
-                        </div>
-                    </template>
+                    <div x-bind="dropdownPanel" x-cloak class="absolute left-0 z-10 mt-2 w-48 origin-top-left rounded-md bg-white shadow-lg py-1 ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" tabindex="-1">
+                        <template x-for="environment in environments" :key="environment.code" hidden>
+                            <div class="px-1">
+                                <button @click="selectEnvironment(environment) && close()" type="button" class="flex w-full items-center px-3 py-2 text-sm text-gray-700 rounded hover:bg-gray-100 active:bg-gray-100 focus:bg-gray-100 border-none" role="menuitem" tabindex="-1">
+                                    <span class="flex w-full items-center gap-x-1.5 rounded-md text-xs font-medium text-gray-900">
+                                        <svg :style="{ fill: environment.color }" class="h-1.5 w-1.5" viewBox="0 0 6 6" aria-hidden="true">
+                                            <circle cx="3" cy="3" r="3" />
+                                        </svg>
+                                        <span x-text="environment.name"></span>
+                                    </span>
+                                </button>
+                            </div>
+                        </template>
+                    </div>
                 </div>
             </div>
             <template n:syntax="off" x-ref="scriptTemplate"><script async id="cmp-cookies-table-script">!function(e,t,n=null,o=null){var a=new XMLHttpRequest,l=[];a.onreadystatechange=()=>{if(4===a.readyState&&0!==a.status){var e=a.responseText;200<=a.status&&300>a.status?document.getElementById("cmp-cookies-table-script").insertAdjacentHTML("beforebegin",e):console.warn(e)}},a.onerror=()=>{console.warn(a.statusText||"Can't load cookies table.")},null===o&&(o=document.documentElement.lang),null!==o&&l.push("locale="+o),null!==n&&l.push("environment="+n),a.open("get",e.replace(new RegExp("/$"),"")+"/api/v1/cookies/"+t+"/template"+(l.length?"?"+l.join("&"):""),!0),a.send()}('{{ APP_HOST }}', '{{ PROJECT_CODE }}', '{{ ENVIRONMENT }}');</script></template>