diff --git a/assets/less/colors/color1.less b/assets/less/colors/color1.less
index d859d2842..967b0cf82 100755
--- a/assets/less/colors/color1.less
+++ b/assets/less/colors/color1.less
@@ -2,8 +2,8 @@
 
 @color-type: 1;
 @light:  #b01e2d;
-@dark:   #510816;
 @textOverBg: white;
 @medium: #6e161b;
+@dark:   #510816;
 
 @import '../main.desktop.v3.less';
diff --git a/assets/less/colors/color2.less b/assets/less/colors/color2.less
index 6b23fb68e..16eb1768c 100755
--- a/assets/less/colors/color2.less
+++ b/assets/less/colors/color2.less
@@ -2,8 +2,8 @@
 
 @color-type: 2;
 @light: #233dc0;
-@dark: #0c1944;
 @textOverBg: white;
-@medium: #1d257e;
+@medium: #263083;
+@dark: #172c70;
 
 @import '../main.desktop.v3.less';
diff --git a/assets/less/colors/color4.less b/assets/less/colors/color4.less
index 068d4fb7b..32aa3ed9c 100755
--- a/assets/less/colors/color4.less
+++ b/assets/less/colors/color4.less
@@ -2,8 +2,8 @@
 
 @color-type: 4;
 @light:  #a935c7;
-@dark:   #310948;
 @textOverBg: white;
-@medium: #5a1072;
+@medium: #6f1d8c;
+@dark: #480f6e;
 
 @import '../main.desktop.v3.less';
diff --git a/assets/less/component/common.less b/assets/less/component/common.less
index e8fa9141f..c4625399b 100755
--- a/assets/less/component/common.less
+++ b/assets/less/component/common.less
@@ -118,6 +118,10 @@ input {
 		padding: 10px;
 		line-height: 150%;
 		background: black;
+		font-size: 14px;
+		strong {
+			color: @light;
+		}
 	}
 
 	.alone-button {
@@ -885,7 +889,7 @@ input {
 		text-align: center;
 		font-size: 12px;
 		border-radius: 100%;
-		top: 38px; left: 58px;
+		top: 30px; left: 50px;
 		border: solid 1px white;
 		z-index: 22;
 		background: @medium;
@@ -917,7 +921,6 @@ input {
 
 	.button {
 		display: block;
-		margin: 10px; padding: 5px 10px;
 		width: 240px; line-height: 20px;
 		text-align: right;
 		color: white;
@@ -935,7 +938,7 @@ input {
 		}
 
 		&.disable {
-			background: #202020;
+			background: rgba(@medium, .4);
 			cursor: default;
 		}
 
diff --git a/assets/less/component/queue.less b/assets/less/component/queue.less
index 50d8e1f13..cb4a0c760 100755
--- a/assets/less/component/queue.less
+++ b/assets/less/component/queue.less
@@ -6,7 +6,7 @@
 		position: relative;
 		background: black;
 		border: solid 1px #0A0A0A;
-		border-top: solid 1px #202020;
+		border-top-color: #202020;
 		min-height: 60px;
 		display: block;
 
@@ -65,19 +65,14 @@
 			float: left;
 			width: 40px; height: 40px;
 			margin: 5px; padding: 5px;
-			background: black;
+			background: #151515;
 			border-radius: 100%;
-			border: solid 1px #202020;
+			border: solid 1px @light;
 		}
 
 		strong {
 			display: block;
 			margin: 6px 0 2px 0;
-
-			.level {
-				font-size: 11px;
-				color: #CCC;
-			}
 		}
 
 		.big {
@@ -86,7 +81,6 @@
 
 		em {
 			display: block;
-			font-style: normal;
 			color: #AEAEAE;
 		}
 
@@ -94,7 +88,9 @@
 			position: relative;
 			display: block;
 			clear: both;
-			margin: 5px; height: 3px;
+			border-radius: 14px;
+			margin: 5px;
+			height: 10px;
 			background: #4F4F4F;
 		}
 
@@ -103,7 +99,13 @@
 			display: block;
 			height: 100%;
 			background: @light;
+			border-radius: 14px;
+		}
+
+		.level {
+			font-size: 12px;
+			color: @light;
 		}
 	}
 
-}
\ No newline at end of file
+}
diff --git a/assets/less/component/transaction.less b/assets/less/component/transaction.less
index 9e94a4565..2c4090018 100755
--- a/assets/less/component/transaction.less
+++ b/assets/less/component/transaction.less
@@ -225,11 +225,6 @@
 	}
 }
 
-.component .build-item.disable .button span {
-	color: #696969;
-}
-
-
 .component.transaction .new-transaction {
 	width: 279px;
 	position: absolute;
@@ -276,4 +271,4 @@
 			&.max-price { right: 5px;}
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/assets/less/global.desktop.less b/assets/less/global.desktop.less
index a510461f2..9337f12db 100755
--- a/assets/less/global.desktop.less
+++ b/assets/less/global.desktop.less
@@ -1,8 +1,8 @@
 html { height: 100%; }
 body { 
 	margin: 0; padding: 0;
-	font-family: 'Roboto', 'Trebuchet MS', 'Arial', sans-serif;
-	font-size: 13px;
+	font-family: 'Titillium Web', sans-serif;
+	font-size: 16px;
 }
 
 .bull {
@@ -11,11 +11,10 @@ body {
 	z-index: 1200;
 	padding: 4px 8px;
 	max-width: 280px;
-	color: white;
-	background: #202020;
+	color: @dark;
+	background: @light;
 	border-radius: 3px;
-	border: solid 1px #4F4F4F;
-	box-shadow: inset 0 0 3px black;
+	box-shadow: inset 0 0 3px @medium;
 
 	&:before {
 		content: '';
@@ -27,11 +26,11 @@ body {
 
 	&.top:before {
 		bottom: -14px;
-		border-color: #4F4F4F transparent transparent transparent;
+		border-color: @light transparent transparent transparent;
 	}
 	&.bottom:before {
 		top: -14px;
-		border-color: transparent transparent #4F4F4F transparent;
+		border-color: transparent transparent @light transparent;
 	}
 	&.left:before {
 		right: 12px;
diff --git a/src/views/components/bases/ob/dock2.php b/src/views/components/bases/ob/dock2.php
index 8a8f2fc9f..9aa0e9c3d 100755
--- a/src/views/components/bases/ob/dock2.php
+++ b/src/views/components/bases/ob/dock2.php
@@ -159,8 +159,8 @@
 						$remainingTime = Utils::interval(Utils::now(), $queue->dEnd, 's');
 
 						echo $realSizeQueue > 1
-							? '<div class="item">'
-							: '<div class="item active progress" data-progress-output="lite" data-progress-current-time="' . $remainingTime . '" data-progress-total-time="' . $totalTimeShips . '">';
+							? '<div class="item py-2">'
+							: '<div class="item py-2 active progress" data-progress-output="lite" data-progress-current-time="' . $remainingTime . '" data-progress-total-time="' . $totalTimeShips . '">';
 						echo '<a href="' . Format::actionBuilder('dequeueship', $sessionToken, ['baseid' => $ob_dock2->getId(), 'dock' => '2', 'queue' => $queue->id]) . '"' . 
 							'class="button hb lt" title="annuler la commande (attention, vous ne récupérerez que ' . $shipResourceRefund * 100 . '% du montant investi)">×</a>';
 						echo  '<img class="picto" src="' . $mediaPath . 'ship/picto/' . ShipResource::getInfo($queue->shipNumber, 'imageLink') . '.png" alt="" />';
@@ -178,9 +178,11 @@
 						}
 						echo '</div>';
 					} else {
-						echo '<div class="item empty">';
-							echo '<span class="picto"></span>';
-							echo '<strong>Emplacement libre</strong>';
+						echo '<div class="item empty py-2">';
+							echo '<div class="flex items-center">';
+								echo '<span class="picto"></span>';
+								echo '<strong>Emplacement libre</strong>';
+							echo '</div>';
 							echo '<span class="progress-container"></span>';
 						echo '</div>';
 					}
diff --git a/tailwind.config.js b/tailwind.config.js
index ec12a2a01..a0ccf0962 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,4 +10,7 @@ module.exports = {
 	plugins: [
 		require('@tailwindcss/forms'),
 	],
+	safelist: [
+		'py-2',
+	],
 }
diff --git a/templates/blocks/athena/building_panel.html.twig b/templates/blocks/athena/building_panel.html.twig
index 4dc3345ee..40feb7167 100644
--- a/templates/blocks/athena/building_panel.html.twig
+++ b/templates/blocks/athena/building_panel.html.twig
@@ -39,24 +39,34 @@
 						{% set level = i + 1 %}
 						{% set level_data = data[i] %}
 						<tr {% if current_level > level %}class="small-grey"{% elseif current_level == level %}class="active"{% endif %}>
-						<td>{{ level_data.note|raw }}</td>
+						<td><span class="inline-flex items-center gap-2">{{ level_data.note|raw }}</span></td>
 						<td>
-							{{ level_data.resourcePrice }}
-							<img src="{{ asset('build/media/resources/resource.png') }}" alt="ressources" class="icon-color" />
+							<span class="inline-flex items-center gap-2">
+								{{ level_data.resourcePrice }}
+								<img src="{{ asset('build/media/resources/resource.png') }}" alt="ressources" class="icon-color" />
+							</span>
 						</td>
 						<td>
-							{{ level_data.time }}
-							<img src="{{ asset('build/media/resources/time.png') }}" alt="relève" class="icon-color" />
+							<span class="inline-flex items-center gap-2">
+								{{ level_data.time }}
+								<img src="{{ asset('build/media/resources/time.png') }}" alt="relève" class="icon-color" />
+							</span>
 						</td>
 						{% for stat_data in level_data.stats %}
 							<td>
-								{{ stat_data.stat }}
-								{% if stat_data.image is defined %}
-									<img src="{{ asset('build/media/resources/' ~ stat_data.image ~ '.png') }}" alt="{{ stat_data.alt }}" class="icon-color" />
-								{% endif %}
+								<span class="inline-flex items-center gap-2">
+									{{ stat_data.stat }}
+									{% if stat_data.image is defined %}
+										<img src="{{ asset('build/media/resources/' ~ stat_data.image ~ '.png') }}" alt="{{ stat_data.alt }}" class="icon-color" />
+									{% endif %}
+								</span>
 							</td>
 						{% endfor %}
-						<td>{{ data[i].points }}</td>
+						<td>
+							<span class="inline-flex items-center gap-2">
+								{{ data[i].points }}
+							</span>
+						</td>
 					</tr>
 				{% endfor %}
 			</table>
diff --git a/templates/components/base/building_queues.html.twig b/templates/components/base/building_queues.html.twig
index c2524d1ab..73bef443d 100644
--- a/templates/components/base/building_queues.html.twig
+++ b/templates/components/base/building_queues.html.twig
@@ -16,9 +16,11 @@
 
 	{% if building_queues_count < available_queues %}
 		{% for i in range(building_queues_count, available_queues - 1) %}
-			<div class="item empty">
-				<span class="picto"></span>
-				<strong>Emplacement libre</strong>
+			<div class="item empty py-2">
+				<div class="flex items-center">
+					<span class="picto"></span>
+					<strong>Emplacement libre</strong>
+				</div>
 				<span class="progress-container"></span>
 			</div>
 		{% endfor %}
diff --git a/templates/components/base/fast_view.html.twig b/templates/components/base/fast_view.html.twig
index ee9870045..d8c5b0234 100644
--- a/templates/components/base/fast_view.html.twig
+++ b/templates/components/base/fast_view.html.twig
@@ -40,36 +40,20 @@
 
 			<h4>Générateur</h4>
 
-			{% set nextTime = 0 %}
-			{% set nextTotalTime = 0 %}
-			{% set realSizeQueue = 0 %}
+			{% set next_total_time = 0 %}
+			{% set building_queues_count = building_queues|length %}
 
-			<div class="queue">
+			<div class="queue mt-4">
 				{% for building_queue in building_queues %}
-					{% set realSizeQueue = realSizeQueue + 1 %}
-					{% set nextTime = building_queue|queue_duration  %}
-					{% set nextTotalTime = nextTotalTime + building_queue|building_queue_time %}
+					{% set next_total_time = next_total_time + get_building_info(building_queue.buildingNumber, 'level', building_queue.targetLevel, 'time') %}
 
-					<div class="item {% if realSizeQueue > 1 %}active{% endif %} progress" data-progress-output="lite" data-progress-no-reload="true" data-progress-current-time="{{ nextTime }}" data-progress-total-time="{{ nextTotalTime }}">
-						<a class="button hb lt" title="annuler la construction (attention, vous ne récupérerez que {{ building_resource_refund * 100 }}% du montant investi)">×</a>
-						<img class="picto" src="{{ asset('build/media/orbitalbase/' ~  building_queue|queue_picture ~ '.png') }}" alt="" />
-						<strong>
-							{{ building_queue|queue_name }}
-							 <span class="level">niv. {{ building_queue.targetLevel }}</span>
-						</strong>
-						<em>
-							<span class="progress-text">{{ nextTime|lite_seconds }}</span>
-						</em>
-						{% if realSizeQueue > 1 %}
-							<span class="progress-container"></span>
-						{% else %}
-							<span class="progress-container">
-								<span style="width: {{ (nextTotalTime - nextTime)|percent(nextTotalTime) }}%;" class="progress-bar"></span>
-							</span>
-						{% endif %}
-					</div>
+					{{ include('molecules/base/building_queue.html.twig', {
+						building_queues_count,
+						building_queue,
+						next_total_time,
+					}) }}
 				{% endfor %}
-				{% if orbital_base|base_max_building_queues > building_queues|length %}
+				{% if orbital_base|base_max_building_queues > building_queues_count %}
 					<a href="{{ path('switchbase', { 'baseId': orbital_base.id, 'page': 'generator'}) }}" class="item link">
 						Construire un bâtiment
 					</a>
@@ -88,9 +72,9 @@
 						{% set remainingTime = ship_queue|queue_duration %}
 
 						{% if realSizeQueue > 1 %}
-							<div class="item">
+							<div class="item py-2">
 						{% else %}
-							<div class="item active progress" data-progress-output="lite" data-progress-no-reload="true" data-progress-current-time="{{ remainingTime }}" data-progress-total-time="{{ totalTimeShips }}">
+							<div class="item py-2 active progress" data-progress-output="lite" data-progress-no-reload="true" data-progress-current-time="{{ remainingTime }}" data-progress-total-time="{{ totalTimeShips }}">
 						{% endif %}
 
 						<img class="picto" src="{{ asset('build/media/ship/picto/' ~ ship_queue|ship_queue_picture ~ '.png') }}" alt="" />
@@ -131,9 +115,9 @@
 						{% set remainingTime = ship_queue|queue_duration %}
 
 						{% if realSizeQueue > 1 %}
-							<div class="item">
+							<div class="item py-2">
 						{% else %}
-							<div class="item active progress" data-progress-output="lite" data-progress-no-reload="true" data-progress-current-time="{{ remainingTime }}" data-progress-total-time="{{ totalTimeShips }}">
+							<div class="item py-2 active progress" data-progress-output="lite" data-progress-no-reload="true" data-progress-current-time="{{ remainingTime }}" data-progress-total-time="{{ totalTimeShips }}">
 						{% endif %}
 
 						<img class="picto" src="{{ asset('build/media/ship/picto/' ~ ship_queue|ship_queue_picture ~ '.png') }}" alt="" />
@@ -175,7 +159,7 @@
 						{% set totalTimeTechno = totalTimeTechno + technology_queue|technology_queue_time %}
 						{% set remainingTotalTime = technology_queue|queue_duration %}
 
-						<div class="item active progress" data-progress-output="lite" data-progress-no-reload="true" data-progress-current-time="{{ remainingTotalTime }}" data-progress-total-time="{{ totalTimeTechno }}">
+						<div class="item py-2 active progress" data-progress-output="lite" data-progress-no-reload="true" data-progress-current-time="{{ remainingTotalTime }}" data-progress-total-time="{{ totalTimeTechno }}">
 							<img class="picto" src="{{ asset('build/media/technology/picto/' ~ technology_queue|queue_picture ~ '.png') }}" alt="" />
 							<strong>
 								{{ get_technology_info(technology_queue.technology, 'name') }}
diff --git a/templates/components/common/navbar.html.twig b/templates/components/common/navbar.html.twig
index 1e007a92f..c9a0b408a 100644
--- a/templates/components/common/navbar.html.twig
+++ b/templates/components/common/navbar.html.twig
@@ -358,7 +358,7 @@
 											{% set queue_time = queue|building_queue_time %}
 											{% set queue_duration = queue|queue_duration %}
 											<div class="queue">
-												<div class="item active progress"
+												<div class="item py-2 active progress"
 													 data-progress-no-reload="true"
 													 data-progress-output="lite"
 													 data-progress-current-time="{{ queue_duration }}"
@@ -405,7 +405,7 @@
 										{% if technology_queues_count > 0 %}
 											{% set queue = current_technology_queues[0] %}
 											<div class="queue">
-												<div class="item active progress"
+												<div class="item py-2 active progress"
 													 data-progress-no-reload="true"
 													 data-progress-output="lite"
 													 data-progress-current-time="{{ queue|queue_duration }}"
@@ -451,7 +451,7 @@
 										{% if current_dock1_ship_queues|length > 0 %}
 											{% set queue = current_dock1_ship_queues[0] %}
 											<div class="queue">
-												<div class="item active progress"
+												<div class="item py-2 active progress"
 													 data-progress-no-reload="true"
 													 data-progress-output="lite"
 													 data-progress-current-time="{{ queue|queue_duration }}"
@@ -495,7 +495,7 @@
 										{% if current_dock2_ship_queues|length > 0 %}
 											{% set queue = current_dock2_ship_queues[0] %}
 											<div class="queue">
-												<div class="item active progress"
+												<div class="item py-2 active progress"
 													 data-progress-no-reload="true"
 													 data-progress-output="lite"
 													 data-progress-current-time="{{ queue|queue_duration }}"
@@ -544,7 +544,7 @@
 									{% if incoming_commanders_count > 0 %}
 										<div class="queue">
 											{% for commander in incoming_commanders %}
-												<div class="item active progress"
+												<div class="item py-2 active progress"
 													 data-progress-no-reload="true"
 													 data-progress-output="lite"
 													 data-progress-current-time="{{ commander|travel_remaining_time }}"
@@ -588,7 +588,7 @@
 									{% if outgoing_commanders_count > 0 %}
 										<div class="queue">
 											{% for commander in outgoing_commanders %}
-												<div class="item active progress"
+												<div class="item py-2 active progress"
 													 data-progress-no-reload="true"
 													 data-progress-output="lite"
 													 data-progress-current-time="{{ commander|travel_remaining_time }}"
diff --git a/templates/layouts/base.html.twig b/templates/layouts/base.html.twig
index 93fc2b6c3..1494d2278 100644
--- a/templates/layouts/base.html.twig
+++ b/templates/layouts/base.html.twig
@@ -18,6 +18,9 @@
 
 		<link rel="icon" type="image/png" href="{{ asset('build/media/favicon/color' ~ faction_id ~ '.png') }}" />
 		<link rel="stylesheet" media="screen" type="text/css" href="{{ asset('build/css/main.faction' ~ (faction_id != 0 ? faction_id : 1) ~ '.css') }}" />
+		<link rel="preconnect" href="https://fonts.googleapis.com">
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+		<link href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700&display=swap" rel="stylesheet">
 	</head>
 	<body class="color{{ faction_id }} no-scrolling {% if app.request.get('_route') == 'create_character' %}inscription{% endif %}" data-init-sftr="2">
 		{% block body %}{% endblock body %}
diff --git a/templates/molecules/base/building_card.html.twig b/templates/molecules/base/building_card.html.twig
index 5c90c2277..7e147d2ff 100644
--- a/templates/molecules/base/building_card.html.twig
+++ b/templates/molecules/base/building_card.html.twig
@@ -21,17 +21,25 @@
 	{% endset %}
 
 	{% if 0 < building_data.building_requirements|length %}
-		<span class="button disable hb lt" title="{{ building_data.building_requirements|map(v => v.message)|join(', ') }}">
-			<span class="text">
-				construction impossible<br/>
-				{{ price }} | {{ time }}
-			</span>
-		</span>
+		<div class="button disable hb lt p-2 my-5" title="{{ building_data.building_requirements|map(v => v.message)|join(', ') }}">
+			<div class="text">
+				<div class="faction-text-color mb-2">construction impossible</div>
+				<div class="inline-flex items-center gap-2">
+					<span class="inline-flex items-center gap-2">{{ price }}</span>
+					<span>|</span>
+					<span class="inline-flex items-center gap-2">{{ time }}</span>
+				</div>
+			</div>
+		</div>
 	{% else %}
-		<a class="button" href="{{ path('build', { 'identifier': building_number }) }}">
+		<a class="button p-2 my-5" href="{{ path('build', { 'identifier': building_number }) }}">
 			<span class="text">
-				augmenter vers le niveau {{ building_data.next_level }}<br/>
-				{{ price }} | {{ time }}
+				<div class="mb-2">augmenter vers le niveau {{ building_data.next_level }}</div>
+				<div class="inline-flex items-center gap-2">
+					<span class="inline-flex items-center gap-2">{{ price }}</span>
+					<span>|</span>
+					<span class="inline-flex items-center gap-2">{{ time }}</span>
+				</div>
 			</span>
 		</a>
 	{% endif %}
diff --git a/templates/molecules/base/building_queue.html.twig b/templates/molecules/base/building_queue.html.twig
index 63b3ac539..59757d632 100644
--- a/templates/molecules/base/building_queue.html.twig
+++ b/templates/molecules/base/building_queue.html.twig
@@ -1,26 +1,30 @@
 {% set next_time = building_queue|queue_duration %}
 
-<div class="item {% if building_queues_count > 1 %}active{% endif %} progress"
+<div class="item py-0.5 mt-3 {% if building_queues_count > 1 %}active-{% endif %}queue progress relative"
 	 data-progress-output="lite"
 	 data-progress-current-time="{{ next_time }}"
 	 data-progress-total-time="{{ next_total_time }}">
 	<a href="{{ path('cancel_building_queue', { 'identifier': building_queue.buildingNumber }) }}"
-	   class="button hb lt"
-	   title="annuler la construction (attention, vous ne récupérerez que {{ building_resource_refund * 100 }}% du montant investi)">×</a>
-	<img class="picto" src="{{ asset('build/media/orbitalbase/' ~ get_building_info(building_queue.buildingNumber, 'imageLink') ~ '.png') }}" alt="" />
-	<strong>
+	   class="button hb lt absolute bg-stone-800 h-6 w-6 rounded-full border-black text-center align-middle hover:text-stone-300 hover:bg-stone-600"
+	   style="top: -10px; right: -10px;"
+	   title="annuler la construction (attention, vous ne récupérerez que {{ building_resource_refund * 100 }}% du montant investi)">
+		×
+	</a>
+	<img class="picto absolute"
+		 style="left:-10px;top:-15px;"
+		 src="{{ asset('build/media/orbitalbase/' ~ get_building_info(building_queue.buildingNumber, 'imageLink') ~ '.png') }}"
+		 alt="{{ get_building_info(building_queue.buildingNumber, 'frenchName') }}" />
+	<em class="pl-9 text-sm">
 		{{ get_building_info(building_queue.buildingNumber, 'frenchName') }}
 		 <span class="level">niv. {{ building_queue.targetLevel }}</span>
-	</strong>
-	{% if building_queues_count > 1 %}
-		<em><span class="progress-text">{{ next_time|lite_seconds }}</span></em>
-		<span class="progress-container"></span>
-	{% else %}
-		<em><span class="progress-text">'{{ next_time|lite_seconds }}</span></em>
-
-		<span class="progress-container">
-			<span style="width: {{ (next_total_time - next_time)|percent(next_total_time) }}%;" class="progress-bar">
-			</span>
+	</em>
+	<div class="mt-2 flex align-middle">
+		<span class="progress-text text-sm pl-0.5">{{ next_time|lite_seconds }}</span>
+		<span class="progress-container flex-grow">
+			{% if building_queues_count == 1 %}
+				<span style="width: {{ (next_total_time - next_time)|percent(next_total_time) }}%;" class="progress-bar">
+				</span>
+			{% endif %}
 		</span>
-	{% endif %}
+	</div>
 </div>