diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 09b030328..ca6857c70 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -176,7 +176,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') ||
@@ -204,7 +204,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') ||
@@ -234,7 +234,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') ||
@@ -269,7 +269,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') ||
@@ -296,7 +296,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') ||
@@ -348,7 +348,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"
@@ -363,7 +363,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"
@@ -408,7 +408,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"
@@ -435,7 +435,7 @@
 				<a
 					sveltekit:prefetch
 					href="/iam"
-					class="icons tooltip-right bg-coolgray-200 hover:text-fuchsia-500"
+					class="icons tooltip-fuchsia-500 tooltip-right bg-coolgray-200 hover:text-fuchsia-500"
 					class:text-fuchsia-500={$page.url.pathname.startsWith('/iam')}
 					class:bg-coolgray-500={$page.url.pathname.startsWith('/iam')}
 					data-tooltip="IAM"
@@ -461,7 +461,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"
@@ -486,7 +486,7 @@
 				{/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..3980afc2c 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;
+}
+
+/* Fuchsia 500 */
+.tooltip-fuchsia-500:after {
+	@apply bg-fuchsia-500;
+}
+
+/* Yellow 500 */
+.tooltip-yellow-500:after {
+	@apply bg-yellow-500;
+}
+
+/* Red-500 */
+.tooltip-red-500:after {
+	@apply bg-red-500;
 }
 
 /* Directions */