diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index ce9cd7c0f..17b7723a3 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -171,7 +171,7 @@
 				<a
 					sveltekit:prefetch
 					href="/applications"
-					class="icons tooltip-right bg-coolgray-200 hover:text-green-500"
+					class="icons tooltip-green-500 tooltip-right bg-coolgray-200 hover:text-green-500"
 					class:text-green-500={$page.url.pathname.startsWith('/applications') ||
 						$page.url.pathname.startsWith('/new/application')}
 					class:bg-coolgray-500={$page.url.pathname.startsWith('/applications') ||
@@ -199,7 +199,7 @@
 				<a
 					sveltekit:prefetch
 					href="/sources"
-					class="icons tooltip-right bg-coolgray-200 hover:text-orange-500"
+					class="icons tooltip-orange-500 tooltip-right bg-coolgray-200 hover:text-orange-500"
 					class:text-orange-500={$page.url.pathname.startsWith('/sources') ||
 						$page.url.pathname.startsWith('/new/source')}
 					class:bg-coolgray-500={$page.url.pathname.startsWith('/sources') ||
@@ -229,7 +229,7 @@
 				<a
 					sveltekit:prefetch
 					href="/destinations"
-					class="icons tooltip-right bg-coolgray-200 hover:text-sky-500"
+					class="icons tooltip-sky-500 tooltip-right bg-coolgray-200 hover:text-sky-500"
 					class:text-sky-500={$page.url.pathname.startsWith('/destinations') ||
 						$page.url.pathname.startsWith('/new/destination')}
 					class:bg-coolgray-500={$page.url.pathname.startsWith('/destinations') ||
@@ -264,7 +264,7 @@
 				<a
 					sveltekit:prefetch
 					href="/databases"
-					class="icons tooltip-right bg-coolgray-200 hover:text-purple-500"
+					class="icons tooltip-purple-500 tooltip-right bg-coolgray-200 hover:text-purple-500"
 					class:text-purple-500={$page.url.pathname.startsWith('/databases') ||
 						$page.url.pathname.startsWith('/new/database')}
 					class:bg-coolgray-500={$page.url.pathname.startsWith('/databases') ||
@@ -291,7 +291,7 @@
 				<a
 					sveltekit:prefetch
 					href="/services"
-					class="icons tooltip-right bg-coolgray-200 hover:text-pink-500"
+					class="icons tooltip-pink-500 tooltip-right bg-coolgray-200 hover:text-pink-500"
 					class:text-pink-500={$page.url.pathname.startsWith('/services') ||
 						$page.url.pathname.startsWith('/new/service')}
 					class:bg-coolgray-500={$page.url.pathname.startsWith('/services') ||
@@ -344,7 +344,7 @@
 							{:else if updateStatus.success === null}
 								<svg
 									xmlns="http://www.w3.org/2000/svg"
-									class="w-8 h-9"
+									class="h-9 w-8"
 									viewBox="0 0 24 24"
 									stroke-width="1.5"
 									stroke="currentColor"
@@ -359,7 +359,7 @@
 									<line x1="16" y1="12" x2="12" y2="8" />
 								</svg>
 							{:else if updateStatus.success}
-								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="w-8 h-9"
+								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="h-9 w-8"
 									><path
 										fill="#DD2E44"
 										d="M11.626 7.488c-.112.112-.197.247-.268.395l-.008-.008L.134 33.141l.011.011c-.208.403.14 1.223.853 1.937.713.713 1.533 1.061 1.936.853l.01.01L28.21 24.735l-.008-.009c.147-.07.282-.155.395-.269 1.562-1.562-.971-6.627-5.656-11.313-4.687-4.686-9.752-7.218-11.315-5.656z"
@@ -404,7 +404,7 @@
 									/></svg
 								>
 							{:else}
-								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="w-8 h-9"
+								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="h-9 w-8"
 									><path
 										fill="#FFCC4D"
 										d="M36 18c0 9.941-8.059 18-18 18S0 27.941 0 18 8.059 0 18 0s18 8.059 18 18"
@@ -431,7 +431,7 @@
 				<a
 					sveltekit:prefetch
 					href="/teams"
-					class="icons tooltip-right bg-coolgray-200 hover:text-cyan-500"
+					class="icons tooltip-cyan-500 tooltip-right bg-coolgray-200 hover:text-cyan-500"
 					class:text-cyan-500={$page.url.pathname.startsWith('/teams')}
 					class:bg-coolgray-500={$page.url.pathname.startsWith('/teams')}
 					data-tooltip="Teams"
@@ -457,7 +457,7 @@
 					<a
 						sveltekit:prefetch
 						href="/settings"
-						class="icons tooltip-right bg-coolgray-200 hover:text-yellow-500"
+						class="icons tooltip-yellow-500 tooltip-right bg-coolgray-200 hover:text-yellow-500"
 						class:text-yellow-500={$page.url.pathname.startsWith('/settings')}
 						class:bg-coolgray-500={$page.url.pathname.startsWith('/settings')}
 						data-tooltip="Settings"
@@ -481,7 +481,7 @@
 					</a>
 				{/if}
 				<div
-					class="icons tooltip-right bg-coolgray-200 hover:text-red-500"
+					class="icons tooltip-red-500 tooltip-right bg-coolgray-200 hover:text-red-500"
 					data-tooltip="Logout"
 					on:click={logout}
 				>
diff --git a/src/tailwind.css b/src/tailwind.css
index 20f67dd73..efdc9a13a 100644
--- a/src/tailwind.css
+++ b/src/tailwind.css
@@ -209,7 +209,55 @@ a {
 	padding: 8px;
 	color: #fff;
 	content: attr(data-tooltip);
-	@apply min-w-[100px] rounded bg-coollabs text-center font-normal;
+	@apply min-w-[100px] rounded text-center font-normal;
+}
+
+/* Base colours for tooltips */
+
+/* coollabs - default */
+.tooltip:after,
+[data-tooltip]:after {
+	@apply bg-coollabs;
+}
+
+/* Green 500 */
+.tooltip-green-500:after {
+	@apply bg-green-500;
+}
+
+/* Orange 500 */
+.tooltip-orange-500:after {
+	@apply bg-orange-500;
+}
+
+/* Sky 500 */
+.tooltip-sky-500:after {
+	@apply bg-sky-500;
+}
+
+/* Purple 500 */
+.tooltip-purple-500:after {
+	@apply bg-purple-500;
+}
+
+/* Pink 500 */
+.tooltip-pink-500:after {
+	@apply bg-pink-500;
+}
+
+/* Cyan 500 */
+.tooltip-cyan-500:after {
+	@apply bg-cyan-500;
+}
+
+/* Yellow 500 */
+.tooltip-yellow-500:after {
+	@apply bg-yellow-500;
+}
+
+/* Red-500 */
+.tooltip-red-500:after {
+	@apply bg-red-500;
 }
 
 /* Directions */