From 4acc59204c62085ce749228fa66d1d570196a4d5 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Wed, 7 Sep 2022 15:59:37 +0200
Subject: [PATCH] ui: dashboard updates and a lot more

---
 apps/api/src/routes/api/v1/base/index.ts      |    1 +
 .../src/routes/api/v1/databases/handlers.ts   |   19 +-
 apps/api/src/routes/api/v1/databases/index.ts |    5 +-
 apps/api/src/routes/api/v1/databases/types.ts |   49 +-
 apps/api/src/routes/api/v1/handlers.ts        |   21 +-
 apps/api/src/types.ts                         |   47 -
 apps/ui/src/lib/store.ts                      |    3 +-
 apps/ui/src/routes/_NewResource.svelte        |  150 ++
 apps/ui/src/routes/__layout.svelte            |   21 +-
 .../routes/applications/[id]/__layout.svelte  |    2 +-
 apps/ui/src/routes/applications/_index.svelte |  142 ++
 apps/ui/src/routes/applications/index.svelte  |  140 +-
 .../src/routes/databases/[id]/__layout.svelte |  187 +--
 apps/ui/src/routes/databases/_index.svelte    |  124 ++
 apps/ui/src/routes/databases/index.svelte     |  120 +-
 .../routes/destinations/[id]/__layout.svelte  |    2 +-
 apps/ui/src/routes/destinations/_index.svelte |  187 +++
 apps/ui/src/routes/destinations/index.svelte  |  187 +--
 apps/ui/src/routes/index.svelte               | 1224 +++++++++++++++--
 apps/ui/src/routes/login.svelte               |   13 +-
 apps/ui/src/routes/register.svelte            |    7 +-
 .../src/routes/services/[id]/__layout.svelte  |    2 +-
 apps/ui/src/routes/services/_index.svelte     |  131 ++
 apps/ui/src/routes/services/index.svelte      |  127 +-
 .../src/routes/sources/[id]/__layout.svelte   |    2 +-
 apps/ui/src/routes/sources/_index.svelte      |  159 +++
 apps/ui/src/routes/sources/index.svelte       |  157 +--
 apps/ui/src/tailwind.css                      |    2 +-
 28 files changed, 2197 insertions(+), 1034 deletions(-)
 create mode 100644 apps/ui/src/routes/_NewResource.svelte
 create mode 100644 apps/ui/src/routes/applications/_index.svelte
 create mode 100644 apps/ui/src/routes/databases/_index.svelte
 create mode 100644 apps/ui/src/routes/destinations/_index.svelte
 create mode 100644 apps/ui/src/routes/services/_index.svelte
 create mode 100644 apps/ui/src/routes/sources/_index.svelte

diff --git a/apps/api/src/routes/api/v1/base/index.ts b/apps/api/src/routes/api/v1/base/index.ts
index 76735a032..f1b64baf3 100644
--- a/apps/api/src/routes/api/v1/base/index.ts
+++ b/apps/api/src/routes/api/v1/base/index.ts
@@ -11,6 +11,7 @@ const root: FastifyPluginAsync = async (fastify): Promise<void> => {
                 version,
                 whiteLabeled: process.env.COOLIFY_WHITE_LABELED === 'true',
                 whiteLabeledIcon: process.env.COOLIFY_WHITE_LABELED_ICON,
+                isRegistrationEnabled: settings.isRegistrationEnabled,
             }
         } catch ({ status, message }) {
             return errorHandler({ status, message })
diff --git a/apps/api/src/routes/api/v1/databases/handlers.ts b/apps/api/src/routes/api/v1/databases/handlers.ts
index c76502be7..5e78dbfe9 100644
--- a/apps/api/src/routes/api/v1/databases/handlers.ts
+++ b/apps/api/src/routes/api/v1/databases/handlers.ts
@@ -61,16 +61,18 @@ export async function getDatabaseStatus(request: FastifyRequest<OnlyId>) {
             where: { id, teams: { some: { id: teamId === '0' ? undefined : teamId } } },
             include: { destinationDocker: true, settings: true }
         });
-        const { destinationDockerId, destinationDocker } = database;
-        if (destinationDockerId) {
-            try {
-                const { stdout } = await executeDockerCmd({ dockerId: destinationDocker.id, command: `docker inspect --format '{{json .State}}' ${id}` })
+        if (database) {
+            const { destinationDockerId, destinationDocker } = database;
+            if (destinationDockerId) {
+                try {
+                    const { stdout } = await executeDockerCmd({ dockerId: destinationDocker.id, command: `docker inspect --format '{{json .State}}' ${id}` })
 
-                if (JSON.parse(stdout).Running) {
-                    isRunning = true;
+                    if (JSON.parse(stdout).Running) {
+                        isRunning = true;
+                    }
+                } catch (error) {
+                    //
                 }
-            } catch (error) {
-                //
             }
         }
         return {
@@ -363,6 +365,7 @@ export async function deleteDatabase(request: FastifyRequest<DeleteDatabase>) {
             }
         }
         await prisma.databaseSettings.deleteMany({ where: { databaseId: id } });
+        await prisma.databaseSecret.deleteMany({ where: { databaseId: id } });
         await prisma.database.delete({ where: { id } });
         return {}
     } catch ({ status, message }) {
diff --git a/apps/api/src/routes/api/v1/databases/index.ts b/apps/api/src/routes/api/v1/databases/index.ts
index 5dcc20c68..8f269c8b5 100644
--- a/apps/api/src/routes/api/v1/databases/index.ts
+++ b/apps/api/src/routes/api/v1/databases/index.ts
@@ -1,8 +1,9 @@
 import { FastifyPluginAsync } from 'fastify';
 import { deleteDatabase, deleteDatabaseSecret, getDatabase, getDatabaseLogs, getDatabaseSecrets, getDatabaseStatus, getDatabaseTypes, getDatabaseUsage, getVersions, listDatabases, newDatabase, saveDatabase, saveDatabaseDestination, saveDatabaseSecret, saveDatabaseSettings, saveDatabaseType, saveVersion, startDatabase, stopDatabase } from './handlers';
 
-import type { DeleteDatabase, DeleteDatabaseSecret, GetDatabaseLogs, OnlyId, SaveDatabase, SaveDatabaseDestination, SaveDatabaseSecret, SaveDatabaseSettings, SaveVersion } from '../../../../types';
-import type { SaveDatabaseType } from './types';
+import type { OnlyId } from '../../../../types';
+
+import type { DeleteDatabase, SaveDatabaseType, DeleteDatabaseSecret, GetDatabaseLogs, SaveDatabase, SaveDatabaseDestination, SaveDatabaseSecret, SaveDatabaseSettings, SaveVersion } from './types';
 
 const root: FastifyPluginAsync = async (fastify): Promise<void> => {
     fastify.addHook('onRequest', async (request) => {
diff --git a/apps/api/src/routes/api/v1/databases/types.ts b/apps/api/src/routes/api/v1/databases/types.ts
index a56a45c23..ba9b0b8e9 100644
--- a/apps/api/src/routes/api/v1/databases/types.ts
+++ b/apps/api/src/routes/api/v1/databases/types.ts
@@ -5,4 +5,51 @@ export interface SaveDatabaseType extends OnlyId {
 }
 export interface DeleteDatabase extends OnlyId {
     Body: { force: string }
-}
\ No newline at end of file
+}
+export interface SaveVersion extends OnlyId {
+    Body: {
+        version: string
+    }
+}
+export interface SaveDatabaseDestination extends OnlyId {
+    Body: {
+        destinationId: string
+    }
+}
+export interface GetDatabaseLogs extends OnlyId {
+    Querystring: {
+        since: number
+    }
+}
+export interface SaveDatabase extends OnlyId {
+    Body: {
+        name: string,
+        defaultDatabase: string,
+        dbUser: string,
+        dbUserPassword: string,
+        rootUser: string,
+        rootUserPassword: string,
+        version: string,
+        isRunning: boolean
+    }
+}
+export interface SaveDatabaseSettings extends OnlyId {
+    Body: {
+        isPublic: boolean,
+        appendOnly: boolean
+    }
+}
+
+export interface SaveDatabaseSecret extends OnlyId {
+    Body: {
+        name: string,
+        value: string,
+        isNew: string,
+    }
+}
+export interface DeleteDatabaseSecret extends OnlyId {
+    Body: {
+        name: string,
+    }
+}
+
diff --git a/apps/api/src/routes/api/v1/handlers.ts b/apps/api/src/routes/api/v1/handlers.ts
index 702ad31a8..09dfbea48 100644
--- a/apps/api/src/routes/api/v1/handlers.ts
+++ b/apps/api/src/routes/api/v1/handlers.ts
@@ -52,9 +52,7 @@ export async function update(request: FastifyRequest<Update>) {
 	const { latestVersion } = request.body;
 	try {
 		if (!isDev) {
-			const { isAutoUpdateEnabled } = (await prisma.setting.findFirst()) || {
-				isAutoUpdateEnabled: false
-			};
+			const { isAutoUpdateEnabled } = await prisma.setting.findFirst();
 			await asyncExecShell(`docker pull coollabsio/coolify:${latestVersion}`);
 			await asyncExecShell(`env | grep COOLIFY > .env`);
 			await asyncExecShell(
@@ -113,20 +111,31 @@ export async function showDashboard(request: FastifyRequest) {
 		const teamId = request.user.teamId;
 		const applications = await prisma.application.findMany({
 			where: { teams: { some: { id: teamId === '0' ? undefined : teamId } } },
-			include: { settings: true }
+			include: { settings: true, destinationDocker: true, teams: true }
 		});
 		const databases = await prisma.database.findMany({
 			where: { teams: { some: { id: teamId === '0' ? undefined : teamId } } },
-			include: { settings: true }
+			include: { settings: true, destinationDocker: true, teams: true }
 		});
 		const services = await prisma.service.findMany({
-			where: { teams: { some: { id: teamId === '0' ? undefined : teamId } } }
+			where: { teams: { some: { id: teamId === '0' ? undefined : teamId } } },
+			include: { destinationDocker: true, teams: true }
+		});
+		const gitSources = await prisma.gitSource.findMany({
+			where: { teams: { some: { id: teamId === '0' ? undefined : teamId } } },
+			include: { teams: true }
+		});
+		const destinations = await prisma.destinationDocker.findMany({
+			where: { teams: { some: { id: teamId === '0' ? undefined : teamId } } },
+			include: { teams: true }
 		});
 		const settings = await listSettings();
 		return {
 			applications,
 			databases,
 			services,
+			gitSources,
+			destinations,
 			settings,
 		};
 	} catch ({ status, message }) {
diff --git a/apps/api/src/types.ts b/apps/api/src/types.ts
index 3767ab4dd..acb44c8e0 100644
--- a/apps/api/src/types.ts
+++ b/apps/api/src/types.ts
@@ -1,51 +1,4 @@
 export interface OnlyId {
     Params: { id: string },
 }
-export interface SaveVersion extends OnlyId {
-    Body: {
-        version: string
-    }
-}
-export interface SaveDatabaseDestination extends OnlyId {
-    Body: {
-        destinationId: string
-    }
-}
-export interface GetDatabaseLogs extends OnlyId {
-    Querystring: {
-        since: number
-    }
-}
-export interface SaveDatabase extends OnlyId {
-    Body: {
-        name: string,
-        defaultDatabase: string,
-        dbUser: string,
-        dbUserPassword: string,
-        rootUser: string,
-        rootUserPassword: string,
-        version: string,
-        isRunning: boolean
-    }
-}
-export interface SaveDatabaseSettings extends OnlyId {
-    Body: {
-        isPublic: boolean,
-        appendOnly: boolean
-    }
-}
-
-export interface SaveDatabaseSecret extends OnlyId {
-    Body: {
-        name: string,
-        value: string,
-        isNew: string,
-    }
-}
-export interface DeleteDatabaseSecret extends OnlyId {
-    Body: {
-        name: string,
-    }
-}
-
 
diff --git a/apps/ui/src/lib/store.ts b/apps/ui/src/lib/store.ts
index 4114026d5..5355d22c8 100644
--- a/apps/ui/src/lib/store.ts
+++ b/apps/ui/src/lib/store.ts
@@ -3,7 +3,7 @@ import cuid from 'cuid';
 import { writable, readable, type Writable } from 'svelte/store';
 
 interface AppSession {
-    registrationEnabled: boolean;
+    isRegistrationEnabled: boolean;
     ipv4: string | null,
     ipv6: string | null,
     version: string | null,
@@ -28,6 +28,7 @@ interface AddToast {
 }
 export const loginEmail: Writable<string | undefined> = writable()
 export const appSession: Writable<AppSession> = writable({
+    isRegistrationEnabled: false,
     ipv4: null,
     ipv6: null,
     version: null,
diff --git a/apps/ui/src/routes/_NewResource.svelte b/apps/ui/src/routes/_NewResource.svelte
new file mode 100644
index 000000000..ccc15e8d9
--- /dev/null
+++ b/apps/ui/src/routes/_NewResource.svelte
@@ -0,0 +1,150 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { post } from '$lib/api';
+
+	async function newApplication() {
+		const { id } = await post('/applications/new', {});
+		return await goto(`/applications/${id}`, { replaceState: true });
+	}
+	async function newService() {
+		const { id } = await post('/services/new', {});
+		return await goto(`/services/${id}`, { replaceState: true });
+	}
+	async function newDatabase() {
+		const { id } = await post('/databases/new', {});
+		return await goto(`/databases/${id}`, { replaceState: true });
+	}
+</script>
+
+<div class="dropdown dropdown-hover">
+	<slot>
+		<label for="new" tabindex="0" class="btn btn-square btn-sm bg-coollabs">
+			<svg
+				class="h-6 w-6"
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+				/></svg
+			></label
+		>
+	</slot>
+
+	<ul
+		id="new"
+		tabindex="0"
+		class="dropdown-content menu p-2 shadow bg-coolgray-300 rounded-box w-52"
+	>
+		<li>
+			<button on:click={newApplication} class="no-underline hover:bg-applications">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-8 w-8"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentcolor"
+					fill="none"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+					<rect x="4" y="4" width="6" height="6" rx="1" />
+					<rect x="4" y="14" width="6" height="6" rx="1" />
+					<rect x="14" y="14" width="6" height="6" rx="1" />
+					<line x1="14" y1="7" x2="20" y2="7" />
+					<line x1="17" y1="4" x2="17" y2="10" />
+				</svg>Application</button
+			>
+		</li>
+		<li>
+			<button on:click={newService} class="no-underline hover:bg-services">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-8 w-8"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+					fill="none"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+					<path d="M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-12" />
+				</svg>Service</button
+			>
+		</li>
+		<li>
+			<button on:click={newDatabase} class="no-underline hover:bg-databases">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-8 w-8"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+					fill="none"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+					<ellipse cx="12" cy="6" rx="8" ry="3" />
+					<path d="M4 6v6a8 3 0 0 0 16 0v-6" />
+					<path d="M4 12v6a8 3 0 0 0 16 0v-6" />
+				</svg>Database</button
+			>
+		</li>
+		<li>
+			<a href="/sources/new" class="no-underline hover:bg-sources">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-8 w-8"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+					fill="none"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+					<circle cx="6" cy="6" r="2" />
+					<circle cx="18" cy="18" r="2" />
+					<path d="M11 6h5a2 2 0 0 1 2 2v8" />
+					<polyline points="14 9 11 6 14 3" />
+					<path d="M13 18h-5a2 2 0 0 1 -2 -2v-8" />
+					<polyline points="10 15 13 18 10 21" />
+				</svg>Git Source</a
+			>
+		</li>
+		<li>
+			<a href="/destinations/new" class="no-underline hover:bg-destinations">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-8 w-8"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+					fill="none"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+					<path
+						d="M22 12.54c-1.804 -.345 -2.701 -1.08 -3.523 -2.94c-.487 .696 -1.102 1.568 -.92 2.4c.028 .238 -.32 1.002 -.557 1h-14c0 5.208 3.164 7 6.196 7c4.124 .022 7.828 -1.376 9.854 -5c1.146 -.101 2.296 -1.505 2.95 -2.46z"
+					/>
+					<path d="M5 10h3v3h-3z" />
+					<path d="M8 10h3v3h-3z" />
+					<path d="M11 10h3v3h-3z" />
+					<path d="M8 7h3v3h-3z" />
+					<path d="M11 7h3v3h-3z" />
+					<path d="M11 4h3v3h-3z" />
+					<path d="M4.571 18c1.5 0 2.047 -.074 2.958 -.78" />
+					<line x1="10" y1="16" x2="10" y2="16.01" />
+				</svg>Destination</a
+			>
+		</li>
+	</ul>
+</div>
diff --git a/apps/ui/src/routes/__layout.svelte b/apps/ui/src/routes/__layout.svelte
index 901aedea5..38fb61673 100644
--- a/apps/ui/src/routes/__layout.svelte
+++ b/apps/ui/src/routes/__layout.svelte
@@ -66,7 +66,7 @@
 <script lang="ts">
 	export let baseSettings: any;
 	export let supportedServiceTypesAndVersions: any;
-	$appSession.registrationEnabled = baseSettings.registrationEnabled;
+	$appSession.isRegistrationEnabled = baseSettings.isRegistrationEnabled;
 	$appSession.ipv4 = baseSettings.ipv4;
 	$appSession.ipv6 = baseSettings.ipv6;
 	$appSession.version = baseSettings.version;
@@ -137,9 +137,10 @@
 					id="dashboard"
 					sveltekit:prefetch
 					href="/"
-					class="icons bg-coolgray-200 hover:text-white"
+					class="icons  hover:text-white"
 					class:text-white={$page.url.pathname === '/'}
 					class:bg-coolgray-500={$page.url.pathname === '/'}
+					class:bg-coolgray-200={!($page.url.pathname === '/')}
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
@@ -158,7 +159,7 @@
 						<path d="M16 15c-2.21 1.333 -5.792 1.333 -8 0" />
 					</svg>
 				</a>
-
+<!-- 
 				<div class="border-t border-stone-700" />
 				<a
 					id="applications"
@@ -307,7 +308,7 @@
 						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
 						<path d="M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-12" />
 					</svg>
-				</a>
+				</a> -->
 			</div>
 			<div class="flex-1" />
 
@@ -319,7 +320,8 @@
 					href="/iam"
 					class="icons bg-coolgray-200"
 					class:text-iam={$page.url.pathname.startsWith('/iam')}
-					class:bg-coolgray-500={$page.url.pathname.startsWith('/iam')}
+					class:bg-coolgray-500={$page.url.pathname === '/iam'}
+					class:bg-coolgray-200={!($page.url.pathname === '/iam')}
 					><svg
 						xmlns="http://www.w3.org/2000/svg"
 						viewBox="0 0 24 24"
@@ -343,7 +345,8 @@
 					href={$appSession.teamId === '0' ? '/settings/global' : '/settings/ssh-keys'}
 					class="icons bg-coolgray-200"
 					class:text-settings={$page.url.pathname.startsWith('/settings')}
-					class:bg-coolgray-500={$page.url.pathname.startsWith('/settings')}
+					class:bg-coolgray-500={$page.url.pathname === '/settings'}
+					class:bg-coolgray-200={!($page.url.pathname === '/settings')}
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
@@ -363,11 +366,7 @@
 					</svg>
 				</a>
 
-				<div
-					id="logout"
-					class="icons bg-coolgray-200 hover:text-error"
-					on:click={logout}
-				>
+				<div id="logout" class="icons bg-coolgray-200 hover:text-error" on:click={logout}>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						class="ml-1 h-8 w-8"
diff --git a/apps/ui/src/routes/applications/[id]/__layout.svelte b/apps/ui/src/routes/applications/[id]/__layout.svelte
index 0384dab28..f2854f092 100644
--- a/apps/ui/src/routes/applications/[id]/__layout.svelte
+++ b/apps/ui/src/routes/applications/[id]/__layout.svelte
@@ -107,7 +107,7 @@
 			$status.application.initialLoading = true;
 			try {
 				await del(`/applications/${id}`, { id, force });
-				return await goto(`/applications`);
+				return await goto(`/`, { replaceState: true });
 			} catch (error) {
 				if (error.message.startsWith(`Command failed: SSH_AUTH_SOCK=/tmp/coolify-ssh-agent.pid`)) {
 					forceDelete = true;
diff --git a/apps/ui/src/routes/applications/_index.svelte b/apps/ui/src/routes/applications/_index.svelte
new file mode 100644
index 000000000..60644e16d
--- /dev/null
+++ b/apps/ui/src/routes/applications/_index.svelte
@@ -0,0 +1,142 @@
+<script context="module" lang="ts">
+	import type { Load } from '@sveltejs/kit';
+	export const load: Load = async () => {
+		try {
+			const response = await get(`/applications`);
+			return {
+				props: {
+					...response
+				}
+			};
+		} catch (error: any) {
+			return {
+				status: 500,
+				error: new Error(error)
+			};
+		}
+	};
+</script>
+
+<script lang="ts">
+	export let applications: Array<any> = [];
+	let ownApplications: Array<any> = [];
+	let otherApplications: Array<any> = [];
+	import { get, post } from '$lib/api';
+	import { goto } from '$app/navigation';
+	import { t } from '$lib/translations';
+	import { getDomain } from '$lib/common';
+	import { appSession } from '$lib/store';
+	import ApplicationsIcons from '$lib/components/svg/applications/ApplicationIcons.svelte';
+
+	ownApplications = applications.filter((application) => {
+		if (application.teams[0].id === $appSession.teamId) {
+			return application;
+		}
+	});
+	otherApplications = applications.filter((application) => {
+		if (application.teams[0].id !== $appSession.teamId) {
+			return application;
+		}
+	});
+	async function newApplication() {
+		const { id } = await post('/applications/new', {});
+		return await goto(`/applications/${id}`, { replaceState: true });
+	}
+</script>
+
+<div class="flex space-x-1 p-6 font-bold">
+	<div class="mr-4 text-2xl">{$t('index.applications')}</div>
+	{#if $appSession.isAdmin}
+		<button on:click={newApplication} class="btn btn-square btn-sm bg-applications">
+			<svg
+				class="h-6 w-6"
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+				/></svg
+			>
+		</button>
+	{/if}
+</div>
+<div class="flex-col justify-center mt-10 pb-12 sm:pb-16">
+	{#if !applications || ownApplications.length === 0}
+		<div class="flex-col">
+			<div class="text-center text-xl font-bold">{$t('application.no_applications_found')}</div>
+		</div>
+	{/if}
+	{#if ownApplications.length > 0 || otherApplications.length > 0}
+		<div class="flex flex-col">
+			<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
+				{#each ownApplications as application}
+					<a href="/applications/{application.id}" class="p-2 no-underline">
+						<div class="box-selection group relative hover:bg-green-600">
+							{#if application.buildPack}
+								<ApplicationsIcons {application} />
+							{/if}
+
+							<div class="truncate text-center text-xl font-bold">{application.name}</div>
+							{#if $appSession.teamId === '0' && otherApplications.length > 0}
+								<div class="truncate text-center">Team {application.teams[0].name}</div>
+							{/if}
+							{#if application.fqdn}
+								<div class="truncate text-center">{getDomain(application.fqdn) || ''}</div>
+							{/if}
+							{#if application.settings.isBot}
+								<div class="truncate text-center">BOT</div>
+							{/if}
+							{#if application.destinationDocker?.name}
+								<div class="truncate text-center">{application.destinationDocker.name}</div>
+							{/if}
+							{#if !application.gitSourceId || !application.repository || !application.branch}
+								<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
+									Git Source Missing
+								</div>
+							{:else if !application.destinationDockerId}
+								<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
+									Destination Missing
+								</div>
+							{:else if !application.fqdn && !application.settings.isBot}
+								<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
+									URL Missing
+								</div>
+							{/if}
+						</div>
+					</a>
+				{/each}
+			</div>
+			{#if otherApplications.length > 0 && $appSession.teamId === '0'}
+				<div class="px-6 pb-5 pt-10 text-2xl font-bold text-center">Other Applications</div>
+				<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
+					{#each otherApplications as application}
+						<a href="/applications/{application.id}" class="p-2 no-underline">
+							<div class="box-selection group relative hover:bg-green-600">
+								{#if application.buildPack}
+									<ApplicationsIcons {application} />
+								{/if}
+
+								<div class="truncate text-center text-xl font-bold">{application.name}</div>
+								{#if $appSession.teamId === '0'}
+									<div class="truncate text-center">Team {application.teams[0].name}</div>
+								{/if}
+								{#if application.fqdn}
+									<div class="truncate text-center">{getDomain(application.fqdn) || ''}</div>
+								{/if}
+								{#if !application.gitSourceId || !application.destinationDockerId || !application.fqdn}
+									<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
+										Configuration missing
+									</div>
+								{/if}
+							</div>
+						</a>
+					{/each}
+				</div>
+			{/if}
+		</div>
+	{/if}
+</div>
diff --git a/apps/ui/src/routes/applications/index.svelte b/apps/ui/src/routes/applications/index.svelte
index 60644e16d..8136f76e8 100644
--- a/apps/ui/src/routes/applications/index.svelte
+++ b/apps/ui/src/routes/applications/index.svelte
@@ -1,142 +1,4 @@
-<script context="module" lang="ts">
-	import type { Load } from '@sveltejs/kit';
-	export const load: Load = async () => {
-		try {
-			const response = await get(`/applications`);
-			return {
-				props: {
-					...response
-				}
-			};
-		} catch (error: any) {
-			return {
-				status: 500,
-				error: new Error(error)
-			};
-		}
-	};
-</script>
-
 <script lang="ts">
-	export let applications: Array<any> = [];
-	let ownApplications: Array<any> = [];
-	let otherApplications: Array<any> = [];
-	import { get, post } from '$lib/api';
 	import { goto } from '$app/navigation';
-	import { t } from '$lib/translations';
-	import { getDomain } from '$lib/common';
-	import { appSession } from '$lib/store';
-	import ApplicationsIcons from '$lib/components/svg/applications/ApplicationIcons.svelte';
-
-	ownApplications = applications.filter((application) => {
-		if (application.teams[0].id === $appSession.teamId) {
-			return application;
-		}
-	});
-	otherApplications = applications.filter((application) => {
-		if (application.teams[0].id !== $appSession.teamId) {
-			return application;
-		}
-	});
-	async function newApplication() {
-		const { id } = await post('/applications/new', {});
-		return await goto(`/applications/${id}`, { replaceState: true });
-	}
+	goto('/');
 </script>
-
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl">{$t('index.applications')}</div>
-	{#if $appSession.isAdmin}
-		<button on:click={newApplication} class="btn btn-square btn-sm bg-applications">
-			<svg
-				class="h-6 w-6"
-				xmlns="http://www.w3.org/2000/svg"
-				fill="none"
-				viewBox="0 0 24 24"
-				stroke="currentColor"
-				><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M12 6v6m0 0v6m0-6h6m-6 0H6"
-				/></svg
-			>
-		</button>
-	{/if}
-</div>
-<div class="flex-col justify-center mt-10 pb-12 sm:pb-16">
-	{#if !applications || ownApplications.length === 0}
-		<div class="flex-col">
-			<div class="text-center text-xl font-bold">{$t('application.no_applications_found')}</div>
-		</div>
-	{/if}
-	{#if ownApplications.length > 0 || otherApplications.length > 0}
-		<div class="flex flex-col">
-			<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
-				{#each ownApplications as application}
-					<a href="/applications/{application.id}" class="p-2 no-underline">
-						<div class="box-selection group relative hover:bg-green-600">
-							{#if application.buildPack}
-								<ApplicationsIcons {application} />
-							{/if}
-
-							<div class="truncate text-center text-xl font-bold">{application.name}</div>
-							{#if $appSession.teamId === '0' && otherApplications.length > 0}
-								<div class="truncate text-center">Team {application.teams[0].name}</div>
-							{/if}
-							{#if application.fqdn}
-								<div class="truncate text-center">{getDomain(application.fqdn) || ''}</div>
-							{/if}
-							{#if application.settings.isBot}
-								<div class="truncate text-center">BOT</div>
-							{/if}
-							{#if application.destinationDocker?.name}
-								<div class="truncate text-center">{application.destinationDocker.name}</div>
-							{/if}
-							{#if !application.gitSourceId || !application.repository || !application.branch}
-								<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
-									Git Source Missing
-								</div>
-							{:else if !application.destinationDockerId}
-								<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
-									Destination Missing
-								</div>
-							{:else if !application.fqdn && !application.settings.isBot}
-								<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
-									URL Missing
-								</div>
-							{/if}
-						</div>
-					</a>
-				{/each}
-			</div>
-			{#if otherApplications.length > 0 && $appSession.teamId === '0'}
-				<div class="px-6 pb-5 pt-10 text-2xl font-bold text-center">Other Applications</div>
-				<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
-					{#each otherApplications as application}
-						<a href="/applications/{application.id}" class="p-2 no-underline">
-							<div class="box-selection group relative hover:bg-green-600">
-								{#if application.buildPack}
-									<ApplicationsIcons {application} />
-								{/if}
-
-								<div class="truncate text-center text-xl font-bold">{application.name}</div>
-								{#if $appSession.teamId === '0'}
-									<div class="truncate text-center">Team {application.teams[0].name}</div>
-								{/if}
-								{#if application.fqdn}
-									<div class="truncate text-center">{getDomain(application.fqdn) || ''}</div>
-								{/if}
-								{#if !application.gitSourceId || !application.destinationDockerId || !application.fqdn}
-									<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
-										Configuration missing
-									</div>
-								{/if}
-							</div>
-						</a>
-					{/each}
-				</div>
-			{/if}
-		</div>
-	{/if}
-</div>
diff --git a/apps/ui/src/routes/databases/[id]/__layout.svelte b/apps/ui/src/routes/databases/[id]/__layout.svelte
index 9b690a7ba..94e1e6114 100644
--- a/apps/ui/src/routes/databases/[id]/__layout.svelte
+++ b/apps/ui/src/routes/databases/[id]/__layout.svelte
@@ -75,7 +75,7 @@
 			$status.database.initialLoading = true;
 			try {
 				await del(`/databases/${database.id}`, { id: database.id, force });
-				return await goto('/databases');
+				return await goto('/', { replaceState: true });
 			} catch (error) {
 				return errorNotification(error);
 			} finally {
@@ -246,99 +246,100 @@
 				</button>
 				<Tooltip triggeredBy="#start">{'Start'}</Tooltip>
 			{/if}
+			<div class="border border-stone-700 h-8" />
+			<a
+				id="configuration"
+				href="/databases/{id}"
+				sveltekit:prefetch
+				class="hover:text-yellow-500 rounded"
+				class:text-yellow-500={$page.url.pathname === `/databases/${id}`}
+				class:bg-coolgray-500={$page.url.pathname === `/databases/${id}`}
+			>
+				<button class="icons bg-transparent m text-sm disabled:text-red-500">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-6 w-6"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						fill="none"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
+						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+						<rect x="4" y="8" width="4" height="4" />
+						<line x1="6" y1="4" x2="6" y2="8" />
+						<line x1="6" y1="12" x2="6" y2="20" />
+						<rect x="10" y="14" width="4" height="4" />
+						<line x1="12" y1="4" x2="12" y2="14" />
+						<line x1="12" y1="18" x2="12" y2="20" />
+						<rect x="16" y="5" width="4" height="4" />
+						<line x1="18" y1="4" x2="18" y2="5" />
+						<line x1="18" y1="9" x2="18" y2="20" />
+					</svg></button
+				></a
+			>
+			<Tooltip triggeredBy="#configuration">{'Configuration'}</Tooltip>
+			<a
+				href="/databases/{id}/secrets"
+				sveltekit:prefetch
+				class="hover:text-pink-500 rounded"
+				class:text-pink-500={$page.url.pathname === `/databases/${id}/secrets`}
+				class:bg-coolgray-500={$page.url.pathname === `/databases/${id}/secrets`}
+			>
+				<button id="secrets" disabled={$isDeploymentEnabled} class="icons bg-transparent text-sm ">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="w-6 h-6"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						fill="none"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
+						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+						<path
+							d="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3"
+						/>
+						<circle cx="12" cy="11" r="1" />
+						<line x1="12" y1="12" x2="12" y2="14.5" />
+					</svg></button
+				></a
+			>
+			<Tooltip triggeredBy="#secrets">Secrets</Tooltip>
+			<div class="border border-stone-700 h-8" />
+			<a
+				id="databaselogs"
+				href={$status.database.isRunning ? `/databases/${id}/logs` : null}
+				sveltekit:prefetch
+				class="hover:text-pink-500 rounded"
+				class:text-pink-500={$page.url.pathname === `/databases/${id}/logs`}
+				class:bg-coolgray-500={$page.url.pathname === `/databases/${id}/logs`}
+			>
+				<button disabled={!$status.database.isRunning} class="icons bg-transparent text-sm">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-6 w-6"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						fill="none"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
+						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+						<path d="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
+						<path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
+						<line x1="3" y1="6" x2="3" y2="19" />
+						<line x1="12" y1="6" x2="12" y2="19" />
+						<line x1="21" y1="6" x2="21" y2="19" />
+					</svg></button
+				></a
+			>
+			<Tooltip triggeredBy="#databaselogs">{'Logs'}</Tooltip>
 		{/if}
-		<div class="border border-stone-700 h-8" />
-		<a
-			id="configuration"
-			href="/databases/{id}"
-			sveltekit:prefetch
-			class="hover:text-yellow-500 rounded"
-			class:text-yellow-500={$page.url.pathname === `/databases/${id}`}
-			class:bg-coolgray-500={$page.url.pathname === `/databases/${id}`}
-		>
-			<button class="icons bg-transparent m text-sm disabled:text-red-500">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-6 w-6"
-					viewBox="0 0 24 24"
-					stroke-width="1.5"
-					stroke="currentColor"
-					fill="none"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-				>
-					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-					<rect x="4" y="8" width="4" height="4" />
-					<line x1="6" y1="4" x2="6" y2="8" />
-					<line x1="6" y1="12" x2="6" y2="20" />
-					<rect x="10" y="14" width="4" height="4" />
-					<line x1="12" y1="4" x2="12" y2="14" />
-					<line x1="12" y1="18" x2="12" y2="20" />
-					<rect x="16" y="5" width="4" height="4" />
-					<line x1="18" y1="4" x2="18" y2="5" />
-					<line x1="18" y1="9" x2="18" y2="20" />
-				</svg></button
-			></a
-		>
-		<Tooltip triggeredBy="#configuration">{'Configuration'}</Tooltip>
-		<a
-			href="/databases/{id}/secrets"
-			sveltekit:prefetch
-			class="hover:text-pink-500 rounded"
-			class:text-pink-500={$page.url.pathname === `/databases/${id}/secrets`}
-			class:bg-coolgray-500={$page.url.pathname === `/databases/${id}/secrets`}
-		>
-			<button id="secrets" disabled={$isDeploymentEnabled} class="icons bg-transparent text-sm ">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="w-6 h-6"
-					viewBox="0 0 24 24"
-					stroke-width="1.5"
-					stroke="currentColor"
-					fill="none"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-				>
-					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-					<path
-						d="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3"
-					/>
-					<circle cx="12" cy="11" r="1" />
-					<line x1="12" y1="12" x2="12" y2="14.5" />
-				</svg></button
-			></a
-		>
-		<Tooltip triggeredBy="#secrets">Secrets</Tooltip>
-		<div class="border border-stone-700 h-8" />
-		<a
-			id="databaselogs"
-			href={$status.database.isRunning ? `/databases/${id}/logs` : null}
-			sveltekit:prefetch
-			class="hover:text-pink-500 rounded"
-			class:text-pink-500={$page.url.pathname === `/databases/${id}/logs`}
-			class:bg-coolgray-500={$page.url.pathname === `/databases/${id}/logs`}
-		>
-			<button disabled={!$status.database.isRunning} class="icons bg-transparent text-sm">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-6 w-6"
-					viewBox="0 0 24 24"
-					stroke-width="1.5"
-					stroke="currentColor"
-					fill="none"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-				>
-					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-					<path d="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
-					<path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
-					<line x1="3" y1="6" x2="3" y2="19" />
-					<line x1="12" y1="6" x2="12" y2="19" />
-					<line x1="21" y1="6" x2="21" y2="19" />
-				</svg></button
-			></a
-		>
-		<Tooltip triggeredBy="#databaselogs">{'Logs'}</Tooltip>
+
 		{#if forceDelete}
 			<button
 				on:click={() => deleteDatabase(true)}
diff --git a/apps/ui/src/routes/databases/_index.svelte b/apps/ui/src/routes/databases/_index.svelte
new file mode 100644
index 000000000..e59f59384
--- /dev/null
+++ b/apps/ui/src/routes/databases/_index.svelte
@@ -0,0 +1,124 @@
+<script context="module" lang="ts">
+	import type { Load } from '@sveltejs/kit';
+	export const load: Load = async () => {
+		try {
+			const response = await get(`/databases`);
+			return {
+				props: {
+					...response
+				}
+			};
+		} catch (error: any) {
+			return {
+				status: 500,
+				error: new Error(error)
+			};
+		}
+	};
+</script>
+
+<script lang="ts">
+	export let databases: any = [];
+	import { get, post } from '$lib/api';
+	import { t } from '$lib/translations';
+	import { appSession } from '$lib/store';
+	import { goto } from '$app/navigation';
+	import DatabaseIcons from '$lib/components/svg/databases/DatabaseIcons.svelte';
+
+	async function newDatabase() {
+		const { id } = await post('/databases/new', {});
+		return await goto(`/databases/${id}`, { replaceState: true });
+	}
+
+	const ownDatabases = databases.filter((database: any) => {
+		if (database.teams[0].id === $appSession.teamId) {
+			return database;
+		}
+	});
+	const otherDatabases = databases.filter((database: any) => {
+		if (database.teams[0].id !== $appSession.teamId) {
+			return database;
+		}
+	});
+</script>
+
+<div class="flex space-x-1 p-6 font-bold">
+	<div class="mr-4 text-2xl tracking-tight">{$t('index.databases')}</div>
+	{#if $appSession.isAdmin}
+		<button on:click={newDatabase} class="btn btn-square btn-sm bg-databases">
+			<svg
+				class="h-6 w-6"
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+				/></svg
+			>
+		</button>
+	{/if}
+</div>
+
+<div class="flex-col justify-center mt-10 pb-12 sm:pb-16">
+	{#if !databases || ownDatabases.length === 0}
+		<div class="flex-col">
+			<div class="text-center text-xl font-bold">{$t('database.no_databases_found')}</div>
+		</div>
+	{/if}
+	{#if ownDatabases.length > 0 || otherDatabases.length > 0}
+		<div class="flex flex-col">
+			<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
+				{#each ownDatabases as database}
+					<a href="/databases/{database.id}" class="p-2 no-underline">
+						<div class="box-selection group relative hover:bg-purple-600">
+							<DatabaseIcons type={database.type} isAbsolute={true} />
+							<div class="truncate text-center text-xl font-bold">
+								{database.name}
+							</div>
+							{#if $appSession.teamId === '0' && otherDatabases.length > 0}
+								<div class="truncate text-center">{database.teams[0].name}</div>
+							{/if}
+							{#if database.destinationDocker?.name}
+								<div class="truncate text-center">{database.destinationDocker.name}</div>
+							{/if}
+							{#if !database.type}
+								<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
+									{$t('application.configuration.configuration_missing')}
+								</div>
+							{/if}
+						</div>
+					</a>
+				{/each}
+			</div>
+			{#if otherDatabases.length > 0 && $appSession.teamId === '0'}
+				<div class="px-6 pb-5 pt-10 text-2xl font-bold text-center">Other Databases</div>
+				<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
+					{#each otherDatabases as database}
+						<a href="/databases/{database.id}" class="p-2 no-underline">
+							<div class="box-selection group relative hover:bg-purple-600">
+								<DatabaseIcons type={database.type} isAbsolute={true} />
+								<div class="truncate text-center text-xl font-bold">
+									{database.name}
+								</div>
+								{#if $appSession.teamId === '0'}
+									<div class="truncate text-center">{database.teams[0].name}</div>
+								{/if}
+								{#if !database.type}
+									<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
+										Configuration missing
+									</div>
+								{:else}
+									<div class="text-center truncate">{database.type}</div>
+								{/if}
+							</div>
+						</a>
+					{/each}
+				</div>
+			{/if}
+		</div>
+	{/if}
+</div>
diff --git a/apps/ui/src/routes/databases/index.svelte b/apps/ui/src/routes/databases/index.svelte
index cdb45d0c4..8136f76e8 100644
--- a/apps/ui/src/routes/databases/index.svelte
+++ b/apps/ui/src/routes/databases/index.svelte
@@ -1,122 +1,4 @@
-<script context="module" lang="ts">
-	import type { Load } from '@sveltejs/kit';
-	export const load: Load = async () => {
-		try {
-			const response = await get(`/databases`);
-			return {
-				props: {
-					...response
-				}
-			};
-		} catch (error: any) {
-			return {
-				status: 500,
-				error: new Error(error)
-			};
-		}
-	};
-</script>
-
 <script lang="ts">
-	export let databases: any = [];
-	import { get, post } from '$lib/api';
-	import { t } from '$lib/translations';
-	import { appSession } from '$lib/store';
 	import { goto } from '$app/navigation';
-	import DatabaseIcons from '$lib/components/svg/databases/DatabaseIcons.svelte';
-
-	async function newDatabase() {
-		const { id } = await post('/databases/new', {});
-		return await goto(`/databases/${id}`, { replaceState: true });
-	}
-
-	const ownDatabases = databases.filter((database: any) => {
-		if (database.teams[0].id === $appSession.teamId) {
-			return database;
-		}
-	});
-	const otherDatabases = databases.filter((database: any) => {
-		if (database.teams[0].id !== $appSession.teamId) {
-			return database;
-		}
-	});
+	goto('/');
 </script>
-
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">{$t('index.databases')}</div>
-	<button on:click={newDatabase} class="btn btn-square btn-sm bg-databases">
-		<svg
-			class="h-6 w-6"
-			xmlns="http://www.w3.org/2000/svg"
-			fill="none"
-			viewBox="0 0 24 24"
-			stroke="currentColor"
-			><path
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				stroke-width="2"
-				d="M12 6v6m0 0v6m0-6h6m-6 0H6"
-			/></svg
-		>
-	</button>
-</div>
-
-<div class="flex-col justify-center mt-10 pb-12 sm:pb-16">
-	{#if !databases || ownDatabases.length === 0}
-		<div class="flex-col">
-			<div class="text-center text-xl font-bold">{$t('database.no_databases_found')}</div>
-		</div>
-	{/if}
-	{#if ownDatabases.length > 0 || otherDatabases.length > 0}
-		<div class="flex flex-col">
-			<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
-				{#each ownDatabases as database}
-					<a href="/databases/{database.id}" class="p-2 no-underline">
-						<div class="box-selection group relative hover:bg-purple-600">
-              <DatabaseIcons type={database.type} isAbsolute={true} />
-							<div class="truncate text-center text-xl font-bold">
-								{database.name}
-							</div>
-							{#if $appSession.teamId === '0' && otherDatabases.length > 0}
-								<div class="truncate text-center">{database.teams[0].name}</div>
-							{/if}
-							{#if database.destinationDocker?.name}
-								<div class="truncate text-center">{database.destinationDocker.name}</div>
-							{/if}
-							{#if !database.type}
-								<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
-									{$t('application.configuration.configuration_missing')}
-								</div>
-							{/if}
-						</div>
-					</a>
-				{/each}
-			</div>
-			{#if otherDatabases.length > 0 && $appSession.teamId === '0'}
-				<div class="px-6 pb-5 pt-10 text-2xl font-bold text-center">Other Databases</div>
-				<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
-					{#each otherDatabases as database}
-						<a href="/databases/{database.id}" class="p-2 no-underline">
-							<div class="box-selection group relative hover:bg-purple-600">
-                <DatabaseIcons type={database.type} isAbsolute={true} />
-								<div class="truncate text-center text-xl font-bold">
-									{database.name}
-								</div>
-								{#if $appSession.teamId === '0'}
-									<div class="truncate text-center">{database.teams[0].name}</div>
-								{/if}
-								{#if !database.type}
-									<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
-										Configuration missing
-									</div>
-								{:else}
-									<div class="text-center truncate">{database.type}</div>
-								{/if}
-							</div>
-						</a>
-					{/each}
-				</div>
-			{/if}
-		</div>
-	{/if}
-</div>
diff --git a/apps/ui/src/routes/destinations/[id]/__layout.svelte b/apps/ui/src/routes/destinations/[id]/__layout.svelte
index 4be92c02f..1b82265e2 100644
--- a/apps/ui/src/routes/destinations/[id]/__layout.svelte
+++ b/apps/ui/src/routes/destinations/[id]/__layout.svelte
@@ -69,7 +69,7 @@
 		if (sure) {
 			try {
 				await del(`/destinations/${destination.id}`, { id: destination.id });
-				return await goto('/destinations');
+				return await goto('/', { replaceState: true });
 			} catch (error) {
 				return errorNotification(error);
 			}
diff --git a/apps/ui/src/routes/destinations/_index.svelte b/apps/ui/src/routes/destinations/_index.svelte
new file mode 100644
index 000000000..27656cdb7
--- /dev/null
+++ b/apps/ui/src/routes/destinations/_index.svelte
@@ -0,0 +1,187 @@
+<script context="module" lang="ts">
+	import type { Load } from '@sveltejs/kit';
+	export const load: Load = async () => {
+		try {
+			const response = await get(`/destinations`);
+			return {
+				props: {
+					...response
+				}
+			};
+		} catch (error: any) {
+			return {
+				status: 500,
+				error: new Error(error)
+			};
+		}
+	};
+</script>
+
+<script lang="ts">
+	export let destinations: any[];
+
+	import { t } from '$lib/translations';
+	import { appSession } from '$lib/store';
+	import { get, post } from '$lib/api';
+
+	const ownDestinations = destinations.filter((destination) => {
+		if (destination.teams[0].id === $appSession.teamId) {
+			return destination;
+		}
+	});
+	const otherDestinations = destinations.filter((destination) => {
+		if (destination.teams[0].id !== $appSession.teamId) {
+			return destination;
+		}
+	});
+</script>
+
+<div class="flex space-x-1 p-6 font-bold">
+	<div class="mr-4 text-2xl tracking-tight">{$t('index.destinations')}</div>
+	{#if $appSession.isAdmin}
+		<a href="/destinations/new" class="btn btn-square btn-sm bg-destinations">
+			<svg
+				class="h-6 w-6"
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+				/></svg
+			>
+		</a>
+	{/if}
+</div>
+<div class="flex-col justify-center mt-10 pb-12 sm:pb-16">
+	{#if !destinations || ownDestinations.length === 0}
+		<div class="flex-col">
+			<div class="text-center text-xl font-bold">{$t('destination.no_destination_found')}</div>
+		</div>
+	{/if}
+	{#if ownDestinations.length > 0 || otherDestinations.length > 0}
+		<div class="flex flex-col">
+			<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
+				{#each ownDestinations as destination}
+					<a href="/destinations/{destination.id}" class="p-2 no-underline relative">
+						<div class="box-selection hover:bg-sky-600 ">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="absolute top-0 left-0 -m-4 h-12 w-12 text-sky-500"
+								viewBox="0 0 24 24"
+								stroke-width="1.5"
+								stroke="currentColor"
+								fill="none"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							>
+								<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+								<path
+									d="M22 12.54c-1.804 -.345 -2.701 -1.08 -3.523 -2.94c-.487 .696 -1.102 1.568 -.92 2.4c.028 .238 -.32 1.002 -.557 1h-14c0 5.208 3.164 7 6.196 7c4.124 .022 7.828 -1.376 9.854 -5c1.146 -.101 2.296 -1.505 2.95 -2.46z"
+								/>
+								<path d="M5 10h3v3h-3z" />
+								<path d="M8 10h3v3h-3z" />
+								<path d="M11 10h3v3h-3z" />
+								<path d="M8 7h3v3h-3z" />
+								<path d="M11 7h3v3h-3z" />
+								<path d="M11 4h3v3h-3z" />
+								<path d="M4.571 18c1.5 0 2.047 -.074 2.958 -.78" />
+								<line x1="10" y1="16" x2="10" y2="16.01" />
+							</svg>
+							{#if destination.remoteEngine}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="absolute top-0 left-9 -m-4 h-6 w-6 text-sky-500 rotate-45"
+									viewBox="0 0 24 24"
+									stroke-width="3"
+									stroke="currentColor"
+									fill="none"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								>
+									<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+									<line x1="12" y1="18" x2="12.01" y2="18" />
+									<path d="M9.172 15.172a4 4 0 0 1 5.656 0" />
+									<path d="M6.343 12.343a8 8 0 0 1 11.314 0" />
+									<path d="M3.515 9.515c4.686 -4.687 12.284 -4.687 17 0" />
+								</svg>
+							{/if}
+							<div class="truncate text-center text-xl font-bold">{destination.name}</div>
+							{#if $appSession.teamId === '0' && otherDestinations.length > 0}
+								<div class="truncate text-center">{destination.teams[0].name}</div>
+							{/if}
+							<div class="truncate text-center">{destination.network}</div>
+							{#if $appSession.teamId === '0' && destination.remoteVerified === false && destination.remoteEngine}
+								<div class="truncate text-center text-sm text-red-500">Not verified yet</div>
+							{/if}
+							{#if destination.remoteEngine && !destination.sshKeyId}
+								<div class="truncate text-center text-sm text-red-500">SSH Key missing!</div>
+							{/if}
+						</div>
+					</a>
+				{/each}
+			</div>
+
+			{#if otherDestinations.length > 0 && $appSession.teamId === '0'}
+				<div class="px-6 pb-5 pt-10 text-2xl font-bold text-center">Other Destinations</div>
+				<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
+					{#each otherDestinations as destination}
+						<a href="/destinations/{destination.id}" class="p-2 no-underline relative">
+							<div class="box-selection hover:bg-sky-600">
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="absolute top-0 left-0 -m-4 h-12 w-12 text-sky-500"
+									viewBox="0 0 24 24"
+									stroke-width="1.5"
+									stroke="currentColor"
+									fill="none"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								>
+									<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+									<path
+										d="M22 12.54c-1.804 -.345 -2.701 -1.08 -3.523 -2.94c-.487 .696 -1.102 1.568 -.92 2.4c.028 .238 -.32 1.002 -.557 1h-14c0 5.208 3.164 7 6.196 7c4.124 .022 7.828 -1.376 9.854 -5c1.146 -.101 2.296 -1.505 2.95 -2.46z"
+									/>
+									<path d="M5 10h3v3h-3z" />
+									<path d="M8 10h3v3h-3z" />
+									<path d="M11 10h3v3h-3z" />
+									<path d="M8 7h3v3h-3z" />
+									<path d="M11 7h3v3h-3z" />
+									<path d="M11 4h3v3h-3z" />
+									<path d="M4.571 18c1.5 0 2.047 -.074 2.958 -.78" />
+									<line x1="10" y1="16" x2="10" y2="16.01" />
+								</svg>
+								{#if destination.remoteEngine}
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										class="absolute top-0 left-9 -m-4 h-6 w-6 text-sky-500 rotate-45"
+										viewBox="0 0 24 24"
+										stroke-width="3"
+										stroke="currentColor"
+										fill="none"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+									>
+										<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+										<line x1="12" y1="18" x2="12.01" y2="18" />
+										<path d="M9.172 15.172a4 4 0 0 1 5.656 0" />
+										<path d="M6.343 12.343a8 8 0 0 1 11.314 0" />
+										<path d="M3.515 9.515c4.686 -4.687 12.284 -4.687 17 0" />
+									</svg>
+								{/if}
+								<div class="truncate text-center text-xl font-bold">{destination.name}</div>
+								{#if $appSession.teamId === '0'}
+									<div class="truncate text-center">{destination.teams[0].name}</div>
+								{/if}
+								<div class="truncate text-center">{destination.network}</div>
+							</div>
+						</a>
+					{/each}
+				</div>
+			{/if}
+		</div>
+	{/if}
+</div>
diff --git a/apps/ui/src/routes/destinations/index.svelte b/apps/ui/src/routes/destinations/index.svelte
index 27656cdb7..8136f76e8 100644
--- a/apps/ui/src/routes/destinations/index.svelte
+++ b/apps/ui/src/routes/destinations/index.svelte
@@ -1,187 +1,4 @@
-<script context="module" lang="ts">
-	import type { Load } from '@sveltejs/kit';
-	export const load: Load = async () => {
-		try {
-			const response = await get(`/destinations`);
-			return {
-				props: {
-					...response
-				}
-			};
-		} catch (error: any) {
-			return {
-				status: 500,
-				error: new Error(error)
-			};
-		}
-	};
-</script>
-
 <script lang="ts">
-	export let destinations: any[];
-
-	import { t } from '$lib/translations';
-	import { appSession } from '$lib/store';
-	import { get, post } from '$lib/api';
-
-	const ownDestinations = destinations.filter((destination) => {
-		if (destination.teams[0].id === $appSession.teamId) {
-			return destination;
-		}
-	});
-	const otherDestinations = destinations.filter((destination) => {
-		if (destination.teams[0].id !== $appSession.teamId) {
-			return destination;
-		}
-	});
+	import { goto } from '$app/navigation';
+	goto('/');
 </script>
-
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">{$t('index.destinations')}</div>
-	{#if $appSession.isAdmin}
-		<a href="/destinations/new" class="btn btn-square btn-sm bg-destinations">
-			<svg
-				class="h-6 w-6"
-				xmlns="http://www.w3.org/2000/svg"
-				fill="none"
-				viewBox="0 0 24 24"
-				stroke="currentColor"
-				><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M12 6v6m0 0v6m0-6h6m-6 0H6"
-				/></svg
-			>
-		</a>
-	{/if}
-</div>
-<div class="flex-col justify-center mt-10 pb-12 sm:pb-16">
-	{#if !destinations || ownDestinations.length === 0}
-		<div class="flex-col">
-			<div class="text-center text-xl font-bold">{$t('destination.no_destination_found')}</div>
-		</div>
-	{/if}
-	{#if ownDestinations.length > 0 || otherDestinations.length > 0}
-		<div class="flex flex-col">
-			<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
-				{#each ownDestinations as destination}
-					<a href="/destinations/{destination.id}" class="p-2 no-underline relative">
-						<div class="box-selection hover:bg-sky-600 ">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="absolute top-0 left-0 -m-4 h-12 w-12 text-sky-500"
-								viewBox="0 0 24 24"
-								stroke-width="1.5"
-								stroke="currentColor"
-								fill="none"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-							>
-								<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-								<path
-									d="M22 12.54c-1.804 -.345 -2.701 -1.08 -3.523 -2.94c-.487 .696 -1.102 1.568 -.92 2.4c.028 .238 -.32 1.002 -.557 1h-14c0 5.208 3.164 7 6.196 7c4.124 .022 7.828 -1.376 9.854 -5c1.146 -.101 2.296 -1.505 2.95 -2.46z"
-								/>
-								<path d="M5 10h3v3h-3z" />
-								<path d="M8 10h3v3h-3z" />
-								<path d="M11 10h3v3h-3z" />
-								<path d="M8 7h3v3h-3z" />
-								<path d="M11 7h3v3h-3z" />
-								<path d="M11 4h3v3h-3z" />
-								<path d="M4.571 18c1.5 0 2.047 -.074 2.958 -.78" />
-								<line x1="10" y1="16" x2="10" y2="16.01" />
-							</svg>
-							{#if destination.remoteEngine}
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									class="absolute top-0 left-9 -m-4 h-6 w-6 text-sky-500 rotate-45"
-									viewBox="0 0 24 24"
-									stroke-width="3"
-									stroke="currentColor"
-									fill="none"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-								>
-									<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-									<line x1="12" y1="18" x2="12.01" y2="18" />
-									<path d="M9.172 15.172a4 4 0 0 1 5.656 0" />
-									<path d="M6.343 12.343a8 8 0 0 1 11.314 0" />
-									<path d="M3.515 9.515c4.686 -4.687 12.284 -4.687 17 0" />
-								</svg>
-							{/if}
-							<div class="truncate text-center text-xl font-bold">{destination.name}</div>
-							{#if $appSession.teamId === '0' && otherDestinations.length > 0}
-								<div class="truncate text-center">{destination.teams[0].name}</div>
-							{/if}
-							<div class="truncate text-center">{destination.network}</div>
-							{#if $appSession.teamId === '0' && destination.remoteVerified === false && destination.remoteEngine}
-								<div class="truncate text-center text-sm text-red-500">Not verified yet</div>
-							{/if}
-							{#if destination.remoteEngine && !destination.sshKeyId}
-								<div class="truncate text-center text-sm text-red-500">SSH Key missing!</div>
-							{/if}
-						</div>
-					</a>
-				{/each}
-			</div>
-
-			{#if otherDestinations.length > 0 && $appSession.teamId === '0'}
-				<div class="px-6 pb-5 pt-10 text-2xl font-bold text-center">Other Destinations</div>
-				<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
-					{#each otherDestinations as destination}
-						<a href="/destinations/{destination.id}" class="p-2 no-underline relative">
-							<div class="box-selection hover:bg-sky-600">
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									class="absolute top-0 left-0 -m-4 h-12 w-12 text-sky-500"
-									viewBox="0 0 24 24"
-									stroke-width="1.5"
-									stroke="currentColor"
-									fill="none"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-								>
-									<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-									<path
-										d="M22 12.54c-1.804 -.345 -2.701 -1.08 -3.523 -2.94c-.487 .696 -1.102 1.568 -.92 2.4c.028 .238 -.32 1.002 -.557 1h-14c0 5.208 3.164 7 6.196 7c4.124 .022 7.828 -1.376 9.854 -5c1.146 -.101 2.296 -1.505 2.95 -2.46z"
-									/>
-									<path d="M5 10h3v3h-3z" />
-									<path d="M8 10h3v3h-3z" />
-									<path d="M11 10h3v3h-3z" />
-									<path d="M8 7h3v3h-3z" />
-									<path d="M11 7h3v3h-3z" />
-									<path d="M11 4h3v3h-3z" />
-									<path d="M4.571 18c1.5 0 2.047 -.074 2.958 -.78" />
-									<line x1="10" y1="16" x2="10" y2="16.01" />
-								</svg>
-								{#if destination.remoteEngine}
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										class="absolute top-0 left-9 -m-4 h-6 w-6 text-sky-500 rotate-45"
-										viewBox="0 0 24 24"
-										stroke-width="3"
-										stroke="currentColor"
-										fill="none"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-									>
-										<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-										<line x1="12" y1="18" x2="12.01" y2="18" />
-										<path d="M9.172 15.172a4 4 0 0 1 5.656 0" />
-										<path d="M6.343 12.343a8 8 0 0 1 11.314 0" />
-										<path d="M3.515 9.515c4.686 -4.687 12.284 -4.687 17 0" />
-									</svg>
-								{/if}
-								<div class="truncate text-center text-xl font-bold">{destination.name}</div>
-								{#if $appSession.teamId === '0'}
-									<div class="truncate text-center">{destination.teams[0].name}</div>
-								{/if}
-								<div class="truncate text-center">{destination.network}</div>
-							</div>
-						</a>
-					{/each}
-				</div>
-			{/if}
-		</div>
-	{/if}
-</div>
diff --git a/apps/ui/src/routes/index.svelte b/apps/ui/src/routes/index.svelte
index f01ffd33e..d9c646a83 100644
--- a/apps/ui/src/routes/index.svelte
+++ b/apps/ui/src/routes/index.svelte
@@ -24,31 +24,62 @@
 	export let databases: any;
 	export let services: any;
 	export let settings: any;
+	export let gitSources: any;
+	export let destinations: any;
 
+	let filtered = {
+		applications: applications.filter(
+			(application: any) => application.teams[0].id === $appSession.teamId
+		),
+		otherApplications: applications.filter(
+			(application: any) => application.teams[0].id !== $appSession.teamId
+		),
+		databases: databases.filter((database: any) => database.teams[0].id === $appSession.teamId),
+		otherDatabases: databases.filter(
+			(database: any) => database.teams[0].id !== $appSession.teamId
+		),
+		services: services.filter((service: any) => service.teams[0].id === $appSession.teamId),
+		otherServices: services.filter((service: any) => service.teams[0].id !== $appSession.teamId),
+		settings,
+		gitSources: gitSources.filter((gitSource: any) => gitSource.teams[0].id === $appSession.teamId),
+		otherGitSources: gitSources.filter(
+			(gitSource: any) => gitSource.teams[0].id !== $appSession.teamId
+		),
+		destinations: destinations.filter(
+			(destination: any) => destination.teams[0].id === $appSession.teamId
+		),
+		otherDestinations: destinations.filter(
+			(destination: any) => destination.teams[0].id !== $appSession.teamId
+		)
+	};
 	import { get, post } from '$lib/api';
 	import Usage from '$lib/components/Usage.svelte';
 	import { t } from '$lib/translations';
-	import { errorNotification, asyncSleep } from '$lib/common';
-	import { addToast, appSession } from '$lib/store';
+	import { asyncSleep } from '$lib/common';
+	import { appSession } from '$lib/store';
 
 	import ApplicationsIcons from '$lib/components/svg/applications/ApplicationIcons.svelte';
 	import DatabaseIcons from '$lib/components/svg/databases/DatabaseIcons.svelte';
 	import ServiceIcons from '$lib/components/svg/services/ServiceIcons.svelte';
 	import { dev } from '$app/env';
+	import NewResource from './_NewResource.svelte';
 
 	let numberOfGetStatus = 0;
+	let search = '';
+	let status: any = {};
 
 	function getRndInteger(min: number, max: number) {
 		return Math.floor(Math.random() * (max - min + 1)) + min;
 	}
 
 	async function getStatus(resources: any) {
+		const { id, buildPack, dualCerts } = resources;
+		if (status[id]) return status[id];
 		while (numberOfGetStatus > 1) {
 			await asyncSleep(getRndInteger(100, 200));
 		}
 		try {
 			numberOfGetStatus++;
-			const { id, buildPack, dualCerts } = resources;
 			let isRunning = false;
 			if (buildPack) {
 				const response = await get(`/applications/${id}/status`);
@@ -61,57 +92,511 @@
 				isRunning = response.isRunning;
 			}
 			if (isRunning) {
+				status[id] = 'Running';
 				return 'Running';
 			} else {
+				status[id] = 'Stopped';
 				return 'Stopped';
 			}
 		} catch (error) {
+			status[id] = 'Error';
 			return 'Error';
 		} finally {
 			numberOfGetStatus--;
 		}
 	}
+
+	function doSearch(bang?: string) {
+		if (bang || bang === '') search = bang;
+		if (search) {
+			if (search.startsWith('!')) {
+				if (search === '!running') {
+					filtered.applications = applications.filter((application: any) => {
+						if (
+							status[application.id] === 'Running' &&
+							application.teams[0].id === $appSession.teamId
+						)
+							return application;
+					});
+					filtered.otherApplications = applications.filter((application: any) => {
+						if (
+							status[application.id] === 'Running' &&
+							application.teams[0].id !== $appSession.teamId
+						)
+							return application;
+					});
+					filtered.databases = databases.filter((database: any) => {
+						if (status[database.id] === 'Running' && database.teams[0].id === $appSession.teamId)
+							return database;
+					});
+					filtered.otherDatabases = databases.filter((database: any) => {
+						if (status[database.id] === 'Running' && database.teams[0].id !== $appSession.teamId)
+							return database;
+					});
+					filtered.services = services.filter((service: any) => {
+						if (status[service.id] === 'Running' && service.teams[0].id === $appSession.teamId)
+							return service;
+					});
+					filtered.otherServices = services.filter((service: any) => {
+						if (status[service.id] === 'Running' && service.teams[0].id !== $appSession.teamId)
+							return service;
+					});
+					filtered.gitSources = [];
+					filtered.otherGitSources = [];
+					filtered.destinations = [];
+					filtered.otherDestinations = [];
+				} else if (search === '!stopped') {
+					filtered.applications = applications.filter((application: any) => {
+						if (
+							status[application.id] === 'Stopped' &&
+							application.teams[0].id === $appSession.teamId
+						)
+							return application;
+					});
+					filtered.otherApplications = applications.filter((application: any) => {
+						if (
+							status[application.id] === 'Stopped' &&
+							application.teams[0].id !== $appSession.teamId
+						)
+							return application;
+					});
+					filtered.databases = databases.filter((database: any) => {
+						if (status[database.id] === 'Stopped' && database.teams[0].id === $appSession.teamId)
+							return database;
+					});
+					filtered.otherDatabases = databases.filter((database: any) => {
+						if (status[database.id] === 'Stopped' && database.teams[0].id !== $appSession.teamId)
+							return database;
+					});
+					filtered.services = services.filter((service: any) => {
+						if (status[service.id] === 'Stopped' && service.teams[0].id === $appSession.teamId)
+							return service;
+					});
+					filtered.otherServices = services.filter((service: any) => {
+						if (status[service.id] === 'Stopped' && service.teams[0].id !== $appSession.teamId)
+							return service;
+					});
+					filtered.gitSources = [];
+					filtered.otherGitSources = [];
+					filtered.destinations = [];
+					filtered.otherDestinations = [];
+				} else if (search === '!error') {
+					filtered.applications = applications.filter((application: any) => {
+						if (
+							status[application.id] === 'Error' &&
+							application.teams[0].id === $appSession.teamId
+						)
+							return application;
+					});
+					filtered.otherApplications = applications.filter((application: any) => {
+						if (
+							status[application.id] === 'Error' &&
+							application.teams[0].id !== $appSession.teamId
+						)
+							return application;
+					});
+					filtered.databases = databases.filter((database: any) => {
+						if (status[database.id] === 'Error' && database.teams[0].id === $appSession.teamId)
+							return database;
+					});
+					filtered.otherDatabases = databases.filter((database: any) => {
+						if (status[database.id] === 'Error' && database.teams[0].id !== $appSession.teamId)
+							return database;
+					});
+					filtered.services = services.filter((service: any) => {
+						if (status[service.id] === 'Error' && service.teams[0].id === $appSession.teamId)
+							return service;
+					});
+					filtered.otherServices = services.filter((service: any) => {
+						if (status[service.id] === 'Error' && service.teams[0].id !== $appSession.teamId)
+							return service;
+					});
+					filtered.gitSources = [];
+					filtered.otherGitSources = [];
+					filtered.destinations = [];
+					filtered.otherDestinations = [];
+				} else if (search === '!app') {
+					filtered.applications = applications.filter(
+						(application: any) => application.teams[0].id === $appSession.teamId
+					);
+					filtered.databases = [];
+					filtered.otherDatabases = [];
+					filtered.services = [];
+					filtered.otherServices = [];
+					filtered.gitSources = [];
+					filtered.otherGitSources = [];
+					filtered.destinations = [];
+					filtered.otherDestinations = [];
+				} else if (search === '!db') {
+					filtered.applications = [];
+					filtered.otherApplications = [];
+					filtered.databases = databases.filter(
+						(database: any) => database.teams[0].id === $appSession.teamId
+					);
+					filtered.services = [];
+					filtered.otherServices = [];
+					filtered.gitSources = [];
+					filtered.otherGitSources = [];
+					filtered.destinations = [];
+					filtered.otherDestinations = [];
+				} else if (search === '!service') {
+					filtered.applications = [];
+					filtered.otherApplications = [];
+					filtered.databases = [];
+					filtered.otherDatabases = [];
+					filtered.services = services.filter(
+						(service: any) => service.teams[0].id === $appSession.teamId
+					);
+					filtered.gitSources = [];
+					filtered.otherGitSources = [];
+					filtered.destinations = [];
+					filtered.otherDestinations = [];
+				} else if (search === '!git') {
+					filtered.applications = [];
+					filtered.otherApplications = [];
+					filtered.databases = [];
+					filtered.otherDatabases = [];
+					filtered.services = [];
+					filtered.otherServices = [];
+					filtered.gitSources = gitSources.filter(
+						(source: any) => source.teams[0].id === $appSession.teamId
+					);
+					filtered.destinations = [];
+					filtered.otherDestinations = [];
+				} else if (search === '!destination') {
+					filtered.applications = [];
+					filtered.otherApplications = [];
+					filtered.databases = [];
+					filtered.otherDatabases = [];
+					filtered.services = [];
+					filtered.otherServices = [];
+					filtered.gitSources = [];
+					filtered.otherGitSources = [];
+					filtered.destinations = destinations.filter(
+						(destination: any) => destination.teams[0].id === $appSession.teamId
+					);
+				} else if (search === '!bot') {
+					filtered.applications = applications.filter((application: any) => {
+						return application.settings.isBot;
+					});
+					filtered.otherApplications = applications.filter((application: any) => {
+						return application.settings.isBot && application.teams[0].id !== $appSession.teamId;
+					});
+					filtered.databases = [];
+					filtered.otherDatabases = [];
+					filtered.services = [];
+					filtered.otherServices = [];
+					filtered.gitSources = [];
+					filtered.otherGitSources = [];
+				} else if (search === '!notmine') {
+					filtered.applications = [];
+					filtered.databases = [];
+					filtered.services = [];
+					filtered.gitSources = [];
+					filtered.destinations = [];
+				}
+			} else {
+				filtered.applications = applications.filter((application: any) => {
+					return (
+						(application.name && application.name.toLowerCase().includes(search.toLowerCase())) ||
+						(application.fqdn && application.fqdn.toLowerCase().includes(search.toLowerCase())) ||
+						(application.repository &&
+							application.repository.toLowerCase().includes(search.toLowerCase())) ||
+						(application.buildpack &&
+							application.buildpack.toLowerCase().includes(search.toLowerCase())) ||
+						(application.branch &&
+							application.branch.toLowerCase().includes(search.toLowerCase())) ||
+						(application.destinationDockerId &&
+							application.destinationDocker.name.toLowerCase().includes(search.toLowerCase())) ||
+						('bot'.includes(search) && application.settings.isBot)
+					);
+				});
+				filtered.databases = databases.filter((database: any) => {
+					return (
+						(database.name && database.name.toLowerCase().includes(search.toLowerCase())) ||
+						(database.type && database.type.toLowerCase().includes(search.toLowerCase())) ||
+						(database.version && database.version.toLowerCase().includes(search.toLowerCase())) ||
+						(database.destinationDockerId &&
+							database.destinationDocker.name.toLowerCase().includes(search.toLowerCase()))
+					);
+				});
+				filtered.services = services.filter((service: any) => {
+					return (
+						(service.name && service.name.toLowerCase().includes(search.toLowerCase())) ||
+						(service.type && service.type.toLowerCase().includes(search.toLowerCase())) ||
+						(service.version && service.version.toLowerCase().includes(search.toLowerCase())) ||
+						(service.destinationDockerId &&
+							service.destinationDocker.name.toLowerCase().includes(search.toLowerCase()))
+					);
+				});
+				filtered.gitSources = gitSources.filter((source: any) => {
+					return (
+						(source.name && source.name.toLowerCase().includes(search.toLowerCase())) ||
+						(source.type && source.type.toLowerCase().includes(search.toLowerCase())) ||
+						(source.htmlUrl && source.htmlUrl.toLowerCase().includes(search.toLowerCase())) ||
+						(source.apiUrl && source.apiUrl.toLowerCase().includes(search.toLowerCase()))
+					);
+				});
+				filtered.destinations = destinations.filter((destination: any) => {
+					return (
+						(destination.name && destination.name.toLowerCase().includes(search.toLowerCase())) ||
+						(destination.type && destination.type.toLowerCase().includes(search.toLowerCase()))
+					);
+				});
+			}
+		} else {
+			filtered.applications = applications;
+			filtered.databases = databases;
+			filtered.services = services;
+			filtered.gitSources = gitSources;
+			filtered.destinations = destinations;
+		}
+	}
 </script>
 
 <div class="flex space-x-1 p-6 font-bold">
 	<div class="mr-4 text-2xl tracking-tight">{$t('index.dashboard')}</div>
+	{#if $appSession.isAdmin && (applications.length !== 0 || destinations.length !== 0 || databases.length !== 0 || services.length !== 0 || gitSources.length !== 0 || destinations.length !== 0)}
+		<NewResource />
+	{/if}
 </div>
 <div class="container lg:mx-auto lg:p-0 px-8 p-5">
-	{#if $appSession.teamId === '0'}
+	<!-- {#if $appSession.teamId === '0'}
 		<Usage />
+	{/if} -->
+	{#if applications.length !== 0 || destinations.length !== 0 || databases.length !== 0 || services.length !== 0 || gitSources.length !== 0 || destinations.length !== 0}
+		<div class="form-control">
+			<div class="input-group flex w-full">
+				<div class="btn btn-square cursor-default no-animation">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-6 w-6"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						><path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+						/></svg
+					>
+				</div>
+
+				<input
+					id="search"
+					type="text"
+					placeholder="Search: You can search for names, domains, types, database types, version, servers etc..."
+					class=" w-full input input-bordered input-primary"
+					bind:value={search}
+					on:input={() => doSearch()}
+				/>
+			</div>
+			<label for="search" class="label w-full">
+				<span
+					class="label-text text-xs flex flex-wrap space-x-2 space-y-2 lg:space-y-0 items-center"
+				>
+					<button
+						class:bg-coollabs={search === '!app'}
+						class="badge badge-lg text-white text-xs"
+						on:click={() => doSearch('!app')}>Applications</button
+					>
+					<button
+						class:bg-coollabs={search === '!bot'}
+						class="badge badge-lg text-white text-xs"
+						on:click={() => doSearch('!bot')}>Bots</button
+					>
+					<button
+						class:bg-coollabs={search === '!service'}
+						class="badge badge-lg bg-coollabs text-white text-xs"
+						on:click={() => doSearch('!service')}>Services</button
+					>
+					<button
+						class:bg-coollabs={search === '!db'}
+						class="badge badge-lg bg-coollabs text-white text-xs"
+						on:click={() => doSearch('!db')}>Databases</button
+					>
+					<button
+						class:bg-coollabs={search === '!git'}
+						class="badge badge-lg bg-coollabs text-white text-xs"
+						on:click={() => doSearch('!git')}>Git Sources</button
+					>
+					<button
+						class:bg-coollabs={search === '!destination'}
+						class="badge badge-lg bg-coollabs text-white text-xs"
+						on:click={() => doSearch('!destination')}>Destinations</button
+					>
+					<button
+						class:bg-coollabs={search === '!running'}
+						class="badge badge-lg bg-coollabs text-white text-xs"
+						on:click={() => doSearch('!running')}>Running</button
+					>
+					<button
+						class:bg-coollabs={search === '!stopped'}
+						class="badge badge-lg bg-coollabs text-white text-xs"
+						on:click={() => doSearch('!stopped')}>Stopped</button
+					>
+					<button
+						class:bg-coollabs={search === '!error'}
+						class="badge badge-lg bg-coollabs text-white text-xs"
+						on:click={() => doSearch('!error')}>Error</button
+					>
+					<button
+						class="badge badge-lg bg-coollabs text-white text-xs"
+						on:click={() => doSearch('')}>Clear</button
+					>
+				</span>
+			</label>
+		</div>
 	{/if}
-	<h1 class="title lg:text-3xl mt-10">Applications</h1>
-	<div class="divider" />
-	<div class="grid grid-col gap-8 auto-cols-max grid-cols-1 lg:grid-cols-3 p-4">
-		{#if applications.length > 0}
-			{#each applications as application}
+	{#if (filtered.applications.length > 0 && applications.length > 0) || filtered.otherApplications.length > 0}
+		<div class="flex items-center mt-14">
+			<h1 class="title lg:text-3xl">Applications</h1>
+		</div>
+	{/if}
+	{#if filtered.applications.length > 0 && applications.length > 0}
+		<div class="divider" />
+
+		<div
+			class="grid grid-col gap-8 auto-cols-max grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 p-4"
+		>
+			{#if filtered.applications.length > 0}
+				{#each filtered.applications as application}
+					<a class="no-underline mb-5" href={`/applications/${application.id}`}>
+						<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-green-600 indicator">
+							{#await getStatus(application)}
+								<span class="indicator-item badge bg-yellow-500 badge-sm" />
+							{:then status}
+								{#if status === 'Running'}
+									<span class="indicator-item badge bg-success badge-sm" />
+								{:else}
+									<span class="indicator-item badge bg-error badge-sm" />
+								{/if}
+							{/await}
+							<div class="w-full flex flex-row">
+								<ApplicationsIcons {application} isAbsolute={true} />
+								<div class="w-full flex flex-col">
+									<h1 class="font-bold text-lg lg:text-xl truncate">
+										{application.name}
+										{#if application.settings.isBot}
+											<span class="text-xs badge bg-coolblack border-none text-applications"
+												>BOT</span
+											>
+										{/if}
+									</h1>
+									<div class="h-10 text-xs">
+										{#if application?.fqdn}
+											<h2>{application?.fqdn.replace('https://', '').replace('http://', '')}</h2>
+										{:else if !application.settings.isBot && !application?.fqdn}
+											<h2 class="text-red-500">Not configured</h2>
+										{/if}
+										{#if application.destinationDocker?.name}
+											<div class="truncate">{application.destinationDocker.name}</div>
+										{/if}
+									</div>
+
+									<div class="flex justify-end items-end space-x-2 h-10">
+										{#if application.fqdn}
+											<a href={application.fqdn} target="_blank" class="icons hover:bg-green-500">
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													class="h-6 w-6"
+													viewBox="0 0 24 24"
+													stroke-width="1.5"
+													stroke="currentColor"
+													fill="none"
+													stroke-linecap="round"
+													stroke-linejoin="round"
+												>
+													<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+													<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
+													<line x1="10" y1="14" x2="20" y2="4" />
+													<polyline points="15 4 20 4 20 9" />
+												</svg>
+											</a>
+										{/if}
+
+										{#if application.settings.isBot && application.exposePort}
+											<a
+												href={`http://${dev ? 'localhost' : settings.ipv4}:${
+													application.exposePort
+												}`}
+												target="_blank"
+												class="icons hover:bg-green-500"
+											>
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													class="h-6 w-6"
+													viewBox="0 0 24 24"
+													stroke-width="1.5"
+													stroke="currentColor"
+													fill="none"
+													stroke-linecap="round"
+													stroke-linejoin="round"
+												>
+													<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+													<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
+													<line x1="10" y1="14" x2="20" y2="4" />
+													<polyline points="15 4 20 4 20 9" />
+												</svg>
+											</a>
+										{/if}
+									</div>
+								</div>
+							</div>
+						</div>
+					</a>
+				{/each}
+			{:else}
+				<h1 class="">Nothing here.</h1>
+			{/if}
+		</div>
+	{/if}
+	{#if filtered.otherApplications.length > 0}
+		{#if filtered.applications.length > 0}
+			<div class="divider w-32 mx-auto" />
+		{/if}
+		<div class="flex items-center mt-10">
+			<h1 class="text-lg font-bold">Other Teams</h1>
+		</div>
+	{/if}
+	<div
+		class="grid grid-col gap-8 auto-cols-max grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 p-4"
+	>
+		{#if filtered.otherApplications.length > 0}
+			{#each filtered.otherApplications as application}
 				<a class="no-underline mb-5" href={`/applications/${application.id}`}>
 					<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-green-600 indicator">
 						{#await getStatus(application)}
-							<span class="indicator-item badge bg-yellow-500 badge-xs" />
+							<span class="indicator-item badge bg-yellow-500 badge-sm" />
 						{:then status}
 							{#if status === 'Running'}
-								<span class="indicator-item badge bg-success badge-xs" />
+								<span class="indicator-item badge bg-success badge-sm" />
 							{:else}
-								<span class="indicator-item badge bg-error badge-xs" />
+								<span class="indicator-item badge bg-error badge-sm" />
 							{/if}
 						{/await}
 						<div class="w-full flex flex-row">
 							<ApplicationsIcons {application} isAbsolute={true} />
 							<div class="w-full flex flex-col">
-								<h1 class="font-bold text-lg lg:text-sm truncate">
+								<h1 class="font-bold text-lg lg:text-xl truncate">
 									{application.name}
 									{#if application.settings.isBot}
-										<span class="text-xs">BOT</span>
+										<span class="text-xs badge bg-coolblack border-none text-applications">BOT</span
+										>
 									{/if}
 								</h1>
-								<div class="h-10">
+								<div class="h-10 text-xs">
 									{#if application?.fqdn}
 										<h2>{application?.fqdn.replace('https://', '').replace('http://', '')}</h2>
 									{:else if !application.settings.isBot && !application?.fqdn}
 										<h2 class="text-red-500">Not configured</h2>
 									{/if}
+									{#if application.destinationDocker?.name}
+										<div class="truncate">{application.destinationDocker.name}</div>
+									{/if}
 								</div>
+
 								<div class="flex justify-end items-end space-x-2 h-10">
 									{#if application.fqdn}
 										<a href={application.fqdn} target="_blank" class="icons hover:bg-green-500">
@@ -132,6 +617,7 @@
 											</svg>
 										</a>
 									{/if}
+
 									{#if application.settings.isBot && application.exposePort}
 										<a
 											href={`http://${dev ? 'localhost' : settings.ipv4}:${application.exposePort}`}
@@ -161,127 +647,609 @@
 					</div>
 				</a>
 			{/each}
-		{:else}
-			<h1 class="">Nothing is configured yet.</h1>
 		{/if}
 	</div>
-	<h1 class="title lg:text-3xl mt-10">Services</h1>
-	<div class="divider" />
-	<div class="grid grid-col gap-8 auto-cols-max grid-cols-1 lg:grid-cols-3 p-4">
-		{#if services.length > 0}
-			{#each services as service}
-				<a class="no-underline mb-5" href={`/services/${service.id}`}>
-					<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-pink-600 indicator">
-						{#await getStatus(service)}
-							<span class="indicator-item badge bg-yellow-500 badge-xs" />
-						{:then status}
-							{#if status === 'Running'}
-								<span class="indicator-item badge bg-success badge-xs" />
-							{:else}
-								<span class="indicator-item badge bg-error badge-xs" />
-							{/if}
-						{/await}
-						<div class="w-full flex flex-row">
-							<ServiceIcons type={service.type} isAbsolute={true} />
-							<div class="w-full flex flex-col">
-								<h1 class="font-bold text-lg lg:text-sm truncate">{service.name}</h1>
-								<div class="h-10">
-									{#if service?.fqdn}
-										<h2>{service?.fqdn.replace('https://', '').replace('http://', '')}</h2>
-									{:else}
-										<h2 class="text-red-500">Not configured</h2>
-									{/if}
-								</div>
-								<div class="flex justify-end items-end space-x-2 h-10">
-									{#if service.fqdn}
-										<a href={service.fqdn} target="_blank" class="icons hover:bg-pink-500">
-											<svg
-												xmlns="http://www.w3.org/2000/svg"
-												class="h-6 w-6"
-												viewBox="0 0 24 24"
-												stroke-width="1.5"
-												stroke="currentColor"
-												fill="none"
-												stroke-linecap="round"
-												stroke-linejoin="round"
-											>
-												<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-												<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
-												<line x1="10" y1="14" x2="20" y2="4" />
-												<polyline points="15 4 20 4 20 9" />
-											</svg>
-										</a>
-									{/if}
-								</div>
-							</div>
-						</div>
-					</div>
-				</a>
-			{/each}
-		{:else}
-			<h1 class="">Nothing is configured yet.</h1>
-		{/if}
-	</div>
-
-	<h1 class="title lg:text-3xl mt-10">Databases</h1>
-	<div class="divider" />
-	<div class="grid grid-col gap-8 auto-cols-max grid-cols-1 lg:grid-cols-3 p-4 mb-32">
-		{#if databases.length > 0}
-			{#each databases as database}
-				<a class="no-underline mb-5" href={`/databases/${database.id}`}>
-					<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-purple-500 indicator">
-						{#await getStatus(database)}
-							<span class="indicator-item badge bg-yellow-500 badge-xs" />
-						{:then status}
-							{#if status === 'Running'}
-								<span class="indicator-item badge bg-success badge-xs" />
-							{:else}
-								<span class="indicator-item badge bg-error badge-xs" />
-							{/if}
-						{/await}
-						<div class="w-full flex flex-row">
-							<DatabaseIcons type={database.type} isAbsolute={true} />
-							<div class="w-full flex flex-col">
-								<div class="h-10">
-									<h1 class="font-bold text-lg lg:text-sm truncate">{database.name}</h1>
-									<div class="h-10">
-										{#if database?.version}
-											<h2 class="text-xs">{database?.version}</h2>
+	{#if (filtered.services.length > 0 && services.length > 0) || filtered.services.length > 0}
+		<div class="flex items-center mt-10">
+			<h1 class="title lg:text-3xl">Services</h1>
+		</div>
+	{/if}
+	{#if filtered.services.length > 0 && services.length > 0}
+		<div class="divider" />
+		<div
+			class="grid grid-col gap-8 auto-cols-max grid-cols-1 md:grid-cols-2 lg:md:grid-cols-3 xl:grid-cols-4 p-4"
+		>
+			{#if filtered.services.length > 0}
+				{#each filtered.services as service}
+					<a class="no-underline mb-5" href={`/services/${service.id}`}>
+						<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-pink-600 indicator">
+							{#await getStatus(service)}
+								<span class="indicator-item badge bg-yellow-500 badge-sm" />
+							{:then status}
+								{#if status === 'Running'}
+									<span class="indicator-item badge bg-success badge-sm" />
+								{:else}
+									<span class="indicator-item badge bg-error badge-sm" />
+								{/if}
+							{/await}
+							<div class="w-full flex flex-row">
+								<ServiceIcons type={service.type} isAbsolute={true} />
+								<div class="w-full flex flex-col">
+									<h1 class="font-bold text-lg lg:text-xl truncate">{service.name}</h1>
+									<div class="h-10 text-xs">
+										{#if service?.fqdn}
+											<h2>{service?.fqdn.replace('https://', '').replace('http://', '')}</h2>
 										{:else}
-											<h2 class="text-red-500">Not configured</h2>
+											<h2 class="text-red-500">URL not configured</h2>
+										{/if}
+										{#if service.destinationDocker?.name}
+											<div class="truncate">{service.destinationDocker.name}</div>
+										{/if}
+									</div>
+									<div class="flex justify-end items-end space-x-2 h-10">
+										{#if service.fqdn}
+											<a href={service.fqdn} target="_blank" class="icons hover:bg-pink-500">
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													class="h-6 w-6"
+													viewBox="0 0 24 24"
+													stroke-width="1.5"
+													stroke="currentColor"
+													fill="none"
+													stroke-linecap="round"
+													stroke-linejoin="round"
+												>
+													<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+													<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
+													<line x1="10" y1="14" x2="20" y2="4" />
+													<polyline points="15 4 20 4 20 9" />
+												</svg>
+											</a>
 										{/if}
 									</div>
 								</div>
-								<div class="flex justify-end items-end space-x-2 h-10">
-									{#if database.settings.isPublic}
-										<div title="Public">
-											<svg
-												xmlns="http://www.w3.org/2000/svg"
-												class="h-6 w-6 "
-												viewBox="0 0 24 24"
-												stroke-width="1.5"
-												stroke="currentColor"
-												fill="none"
-												stroke-linecap="round"
-												stroke-linejoin="round"
-											>
-												<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-												<circle cx="12" cy="12" r="9" />
-												<line x1="3.6" y1="9" x2="20.4" y2="9" />
-												<line x1="3.6" y1="15" x2="20.4" y2="15" />
-												<path d="M11.5 3a17 17 0 0 0 0 18" />
-												<path d="M12.5 3a17 17 0 0 1 0 18" />
-											</svg>
-										</div>
-									{/if}
+							</div>
+						</div>
+					</a>
+				{/each}
+			{:else}
+				<h1 class="">Nothing here.</h1>
+			{/if}
+		</div>
+		{#if filtered.otherServices.length > 0}
+			{#if filtered.services.length > 0}
+				<div class="divider w-32 mx-auto" />
+			{/if}
+			<div class="flex items-center mt-10">
+				<h1 class="text-lg font-bold">Other Teams</h1>
+			</div>
+		{/if}
+		{#if filtered.otherServices.length > 0}
+			<div
+				class="grid grid-col gap-8 auto-cols-max grid-cols-1 md:grid-cols-2 lg:md:grid-cols-3 xl:grid-cols-4 p-4"
+			>
+				{#each filtered.otherServices as service}
+					<a class="no-underline mb-5" href={`/services/${service.id}`}>
+						<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-pink-600 indicator">
+							{#await getStatus(service)}
+								<span class="indicator-item badge bg-yellow-500 badge-sm" />
+							{:then status}
+								{#if status === 'Running'}
+									<span class="indicator-item badge bg-success badge-sm" />
+								{:else}
+									<span class="indicator-item badge bg-error badge-sm" />
+								{/if}
+							{/await}
+							<div class="w-full flex flex-row">
+								<ServiceIcons type={service.type} isAbsolute={true} />
+								<div class="w-full flex flex-col">
+									<h1 class="font-bold text-lg lg:text-xl truncate">{service.name}</h1>
+									<div class="h-10 text-xs">
+										{#if service?.fqdn}
+											<h2>{service?.fqdn.replace('https://', '').replace('http://', '')}</h2>
+										{:else}
+											<h2 class="text-red-500">URL not configured</h2>
+										{/if}
+										{#if service.destinationDocker?.name}
+											<div class="truncate">{service.destinationDocker.name}</div>
+										{/if}
+									</div>
+									<div class="flex justify-end items-end space-x-2 h-10">
+										{#if service.fqdn}
+											<a href={service.fqdn} target="_blank" class="icons hover:bg-pink-500">
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													class="h-6 w-6"
+													viewBox="0 0 24 24"
+													stroke-width="1.5"
+													stroke="currentColor"
+													fill="none"
+													stroke-linecap="round"
+													stroke-linejoin="round"
+												>
+													<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+													<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
+													<line x1="10" y1="14" x2="20" y2="4" />
+													<polyline points="15 4 20 4 20 9" />
+												</svg>
+											</a>
+										{/if}
+									</div>
 								</div>
 							</div>
 						</div>
-					</div>
-				</a>
-			{/each}
-		{:else}
-			<h1 class="">Nothing is configured yet.</h1>
+					</a>
+				{/each}
+			</div>
 		{/if}
-	</div>
+	{/if}
+	{#if (filtered.databases.length > 0 && databases.length > 0) || filtered.databases.length > 0}
+		<div class="flex items-center mt-10">
+			<h1 class="title lg:text-3xl">Databases</h1>
+		</div>
+	{/if}
+	{#if filtered.databases.length > 0 && databases.length > 0}
+		<div class="divider" />
+		<div
+			class="grid grid-col gap-8 auto-cols-max grid-cols-1 md:grid-cols-2 lg:md:grid-cols-3 xl:grid-cols-4 p-4"
+		>
+			{#if filtered.databases.length > 0}
+				{#each filtered.databases as database}
+					<a class="no-underline mb-5" href={`/databases/${database.id}`}>
+						<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-databases indicator">
+							{#await getStatus(database)}
+								<span class="indicator-item badge bg-yellow-500 badge-sm" />
+							{:then status}
+								{#if status === 'Running'}
+									<span class="indicator-item badge bg-success badge-sm" />
+								{:else}
+									<span class="indicator-item badge bg-error badge-sm" />
+								{/if}
+							{/await}
+							<div class="w-full flex flex-row">
+								<DatabaseIcons type={database.type} isAbsolute={true} />
+								<div class="w-full flex flex-col">
+									<div class="h-10">
+										<h1 class="font-bold text-lg lg:text-xl truncate">{database.name}</h1>
+										<div class="h-10 text-xs">
+											{#if database?.version}
+												<h2 class="">{database?.version}</h2>
+											{:else}
+												<h2 class="text-red-500">Not version not configured</h2>
+											{/if}
+											{#if database.destinationDocker?.name}
+												<div class="truncate">{database.destinationDocker.name}</div>
+											{/if}
+										</div>
+									</div>
+									<div class="flex justify-end items-end space-x-2 h-10">
+										{#if database.settings.isPublic}
+											<div title="Public">
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													class="h-6 w-6 "
+													viewBox="0 0 24 24"
+													stroke-width="1.5"
+													stroke="currentColor"
+													fill="none"
+													stroke-linecap="round"
+													stroke-linejoin="round"
+												>
+													<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+													<circle cx="12" cy="12" r="9" />
+													<line x1="3.6" y1="9" x2="20.4" y2="9" />
+													<line x1="3.6" y1="15" x2="20.4" y2="15" />
+													<path d="M11.5 3a17 17 0 0 0 0 18" />
+													<path d="M12.5 3a17 17 0 0 1 0 18" />
+												</svg>
+											</div>
+										{/if}
+									</div>
+								</div>
+							</div>
+						</div>
+					</a>
+				{/each}
+			{:else}
+				<h1 class="">Nothing here.</h1>
+			{/if}
+		</div>
+		{#if filtered.otherDatabases.length > 0}
+			{#if databases.length > 0}
+				<div class="divider w-32 mx-auto" />
+			{/if}
+			<div class="flex items-center mt-10">
+				<h1 class="text-lg font-bold">Other Teams</h1>
+			</div>
+		{/if}
+		{#if filtered.otherDatabases.length > 0}
+			<div
+				class="grid grid-col gap-8 auto-cols-max grid-cols-1 md:grid-cols-2 lg:md:grid-cols-3 xl:grid-cols-4 p-4"
+			>
+				{#each filtered.otherDatabases as database}
+					<a class="no-underline mb-5" href={`/databases/${database.id}`}>
+						<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-databases indicator">
+							{#await getStatus(database)}
+								<span class="indicator-item badge bg-yellow-500 badge-sm" />
+							{:then status}
+								{#if status === 'Running'}
+									<span class="indicator-item badge bg-success badge-sm" />
+								{:else}
+									<span class="indicator-item badge bg-error badge-sm" />
+								{/if}
+							{/await}
+							<div class="w-full flex flex-row">
+								<DatabaseIcons type={database.type} isAbsolute={true} />
+								<div class="w-full flex flex-col">
+									<div class="h-10">
+										<h1 class="font-bold text-lg lg:text-xl truncate">{database.name}</h1>
+										<div class="h-10 text-xs">
+											{#if database?.version}
+												<h2 class="">{database?.version}</h2>
+											{:else}
+												<h2 class="text-red-500">Not version not configured</h2>
+											{/if}
+											{#if database.destinationDocker?.name}
+												<div class="truncate">{database.destinationDocker.name}</div>
+											{/if}
+										</div>
+									</div>
+									<div class="flex justify-end items-end space-x-2 h-10">
+										{#if database.settings.isPublic}
+											<div title="Public">
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													class="h-6 w-6 "
+													viewBox="0 0 24 24"
+													stroke-width="1.5"
+													stroke="currentColor"
+													fill="none"
+													stroke-linecap="round"
+													stroke-linejoin="round"
+												>
+													<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+													<circle cx="12" cy="12" r="9" />
+													<line x1="3.6" y1="9" x2="20.4" y2="9" />
+													<line x1="3.6" y1="15" x2="20.4" y2="15" />
+													<path d="M11.5 3a17 17 0 0 0 0 18" />
+													<path d="M12.5 3a17 17 0 0 1 0 18" />
+												</svg>
+											</div>
+										{/if}
+									</div>
+								</div>
+							</div>
+						</div>
+					</a>
+				{/each}
+			</div>
+		{/if}
+	{/if}
+	{#if (filtered.gitSources.length > 0 && gitSources.length > 0) || filtered.gitSources.length > 0}
+		<div class="flex items-center mt-10">
+			<h1 class="title lg:text-3xl">Git Sources</h1>
+		</div>
+	{/if}
+	{#if filtered.gitSources.length > 0 && gitSources.length > 0}
+		<div class="divider" />
+		<div
+			class="grid grid-col gap-8 auto-cols-max grid-cols-1 md:grid-cols-2 lg:md:grid-cols-3 xl:grid-cols-4 p-4"
+		>
+			{#if filtered.gitSources.length > 0}
+				{#each filtered.gitSources as source}
+					<a class="no-underline mb-5" href={`/sources/${source.id}`}>
+						<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-sources indicator">
+							<div class="w-full flex flex-row">
+								<div class="absolute top-0 left-0 -m-5 h-10 w-10">
+									{#if source?.type === 'gitlab'}
+										<svg viewBox="0 0 128 128">
+											<path
+												fill="#FC6D26"
+												d="M126.615 72.31l-7.034-21.647L105.64 7.76c-.716-2.206-3.84-2.206-4.556 0l-13.94 42.903H40.856L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664 1.385 72.31a4.792 4.792 0 001.74 5.358L64 121.894l60.874-44.227a4.793 4.793 0 001.74-5.357"
+											/><path fill="#E24329" d="M64 121.894l23.144-71.23H40.856L64 121.893z" /><path
+												fill="#FC6D26"
+												d="M64 121.894l-23.144-71.23H8.42L64 121.893z"
+											/><path
+												fill="#FCA326"
+												d="M8.42 50.663L1.384 72.31a4.79 4.79 0 001.74 5.357L64 121.894 8.42 50.664z"
+											/><path
+												fill="#E24329"
+												d="M8.42 50.663h32.436L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664z"
+											/><path fill="#FC6D26" d="M64 121.894l23.144-71.23h32.437L64 121.893z" /><path
+												fill="#FCA326"
+												d="M119.58 50.663l7.035 21.647a4.79 4.79 0 01-1.74 5.357L64 121.894l55.58-71.23z"
+											/><path
+												fill="#E24329"
+												d="M119.58 50.663H87.145l13.94-42.902c.717-2.206 3.84-2.206 4.557 0l13.94 42.903z"
+											/>
+										</svg>
+									{:else if source?.type === 'github'}
+										<svg viewBox="0 0 128 128">
+											<g fill="#ffffff"
+												><path
+													fill-rule="evenodd"
+													clip-rule="evenodd"
+													d="M64 5.103c-33.347 0-60.388 27.035-60.388 60.388 0 26.682 17.303 49.317 41.297 57.303 3.017.56 4.125-1.31 4.125-2.905 0-1.44-.056-6.197-.082-11.243-16.8 3.653-20.345-7.125-20.345-7.125-2.747-6.98-6.705-8.836-6.705-8.836-5.48-3.748.413-3.67.413-3.67 6.063.425 9.257 6.223 9.257 6.223 5.386 9.23 14.127 6.562 17.573 5.02.542-3.903 2.107-6.568 3.834-8.076-13.413-1.525-27.514-6.704-27.514-29.843 0-6.593 2.36-11.98 6.223-16.21-.628-1.52-2.695-7.662.584-15.98 0 0 5.07-1.623 16.61 6.19C53.7 35 58.867 34.327 64 34.304c5.13.023 10.3.694 15.127 2.033 11.526-7.813 16.59-6.19 16.59-6.19 3.287 8.317 1.22 14.46.593 15.98 3.872 4.23 6.215 9.617 6.215 16.21 0 23.194-14.127 28.3-27.574 29.796 2.167 1.874 4.097 5.55 4.097 11.183 0 8.08-.07 14.583-.07 16.572 0 1.607 1.088 3.49 4.148 2.897 23.98-7.994 41.263-30.622 41.263-57.294C124.388 32.14 97.35 5.104 64 5.104z"
+												/><path
+													d="M26.484 91.806c-.133.3-.605.39-1.035.185-.44-.196-.685-.605-.543-.906.13-.31.603-.395 1.04-.188.44.197.69.61.537.91zm2.446 2.729c-.287.267-.85.143-1.232-.28-.396-.42-.47-.983-.177-1.254.298-.266.844-.14 1.24.28.394.426.472.984.17 1.255zM31.312 98.012c-.37.258-.976.017-1.35-.52-.37-.538-.37-1.183.01-1.44.373-.258.97-.025 1.35.507.368.545.368 1.19-.01 1.452zm3.261 3.361c-.33.365-1.036.267-1.552-.23-.527-.487-.674-1.18-.343-1.544.336-.366 1.045-.264 1.564.23.527.486.686 1.18.333 1.543zm4.5 1.951c-.147.473-.825.688-1.51.486-.683-.207-1.13-.76-.99-1.238.14-.477.823-.7 1.512-.485.683.206 1.13.756.988 1.237zm4.943.361c.017.498-.563.91-1.28.92-.723.017-1.308-.387-1.315-.877 0-.503.568-.91 1.29-.924.717-.013 1.306.387 1.306.88zm4.598-.782c.086.485-.413.984-1.126 1.117-.7.13-1.35-.172-1.44-.653-.086-.498.422-.997 1.122-1.126.714-.123 1.354.17 1.444.663zm0 0"
+												/></g
+											>
+										</svg>
+									{/if}
+								</div>
+								<div class="w-full flex flex-col">
+									<div class="h-10">
+										<h1 class="font-bold text-lg lg:text-xl truncate">{source.name}</h1>
+									</div>
+									<div class="flex justify-end items-end space-x-2 h-10" />
+								</div>
+							</div>
+						</div>
+					</a>
+				{/each}
+			{:else}
+				<h1 class="">Nothing here.</h1>
+			{/if}
+		</div>
+		{#if filtered.otherGitSources.length > 0}
+			{#if gitSources.length > 0}
+				<div class="divider w-32 mx-auto" />
+			{/if}
+			<div class="flex items-center mt-10">
+				<h1 class="text-lg font-bold">Other Teams</h1>
+			</div>
+		{/if}
+		{#if filtered.otherGitSources.length > 0}
+			<div
+				class="grid grid-col gap-8 auto-cols-max grid-cols-1 md:grid-cols-2 lg:md:grid-cols-3 xl:grid-cols-4 p-4"
+			>
+				{#each filtered.otherGitSources as source}
+					<a class="no-underline mb-5" href={`/sources/${source.id}`}>
+						<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-sources indicator">
+							<div class="w-full flex flex-row">
+								<div class="absolute top-0 left-0 -m-5 h-10 w-10">
+									{#if source?.type === 'gitlab'}
+										<svg viewBox="0 0 128 128">
+											<path
+												fill="#FC6D26"
+												d="M126.615 72.31l-7.034-21.647L105.64 7.76c-.716-2.206-3.84-2.206-4.556 0l-13.94 42.903H40.856L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664 1.385 72.31a4.792 4.792 0 001.74 5.358L64 121.894l60.874-44.227a4.793 4.793 0 001.74-5.357"
+											/><path fill="#E24329" d="M64 121.894l23.144-71.23H40.856L64 121.893z" /><path
+												fill="#FC6D26"
+												d="M64 121.894l-23.144-71.23H8.42L64 121.893z"
+											/><path
+												fill="#FCA326"
+												d="M8.42 50.663L1.384 72.31a4.79 4.79 0 001.74 5.357L64 121.894 8.42 50.664z"
+											/><path
+												fill="#E24329"
+												d="M8.42 50.663h32.436L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664z"
+											/><path fill="#FC6D26" d="M64 121.894l23.144-71.23h32.437L64 121.893z" /><path
+												fill="#FCA326"
+												d="M119.58 50.663l7.035 21.647a4.79 4.79 0 01-1.74 5.357L64 121.894l55.58-71.23z"
+											/><path
+												fill="#E24329"
+												d="M119.58 50.663H87.145l13.94-42.902c.717-2.206 3.84-2.206 4.557 0l13.94 42.903z"
+											/>
+										</svg>
+									{:else if source?.type === 'github'}
+										<svg viewBox="0 0 128 128">
+											<g fill="#ffffff"
+												><path
+													fill-rule="evenodd"
+													clip-rule="evenodd"
+													d="M64 5.103c-33.347 0-60.388 27.035-60.388 60.388 0 26.682 17.303 49.317 41.297 57.303 3.017.56 4.125-1.31 4.125-2.905 0-1.44-.056-6.197-.082-11.243-16.8 3.653-20.345-7.125-20.345-7.125-2.747-6.98-6.705-8.836-6.705-8.836-5.48-3.748.413-3.67.413-3.67 6.063.425 9.257 6.223 9.257 6.223 5.386 9.23 14.127 6.562 17.573 5.02.542-3.903 2.107-6.568 3.834-8.076-13.413-1.525-27.514-6.704-27.514-29.843 0-6.593 2.36-11.98 6.223-16.21-.628-1.52-2.695-7.662.584-15.98 0 0 5.07-1.623 16.61 6.19C53.7 35 58.867 34.327 64 34.304c5.13.023 10.3.694 15.127 2.033 11.526-7.813 16.59-6.19 16.59-6.19 3.287 8.317 1.22 14.46.593 15.98 3.872 4.23 6.215 9.617 6.215 16.21 0 23.194-14.127 28.3-27.574 29.796 2.167 1.874 4.097 5.55 4.097 11.183 0 8.08-.07 14.583-.07 16.572 0 1.607 1.088 3.49 4.148 2.897 23.98-7.994 41.263-30.622 41.263-57.294C124.388 32.14 97.35 5.104 64 5.104z"
+												/><path
+													d="M26.484 91.806c-.133.3-.605.39-1.035.185-.44-.196-.685-.605-.543-.906.13-.31.603-.395 1.04-.188.44.197.69.61.537.91zm2.446 2.729c-.287.267-.85.143-1.232-.28-.396-.42-.47-.983-.177-1.254.298-.266.844-.14 1.24.28.394.426.472.984.17 1.255zM31.312 98.012c-.37.258-.976.017-1.35-.52-.37-.538-.37-1.183.01-1.44.373-.258.97-.025 1.35.507.368.545.368 1.19-.01 1.452zm3.261 3.361c-.33.365-1.036.267-1.552-.23-.527-.487-.674-1.18-.343-1.544.336-.366 1.045-.264 1.564.23.527.486.686 1.18.333 1.543zm4.5 1.951c-.147.473-.825.688-1.51.486-.683-.207-1.13-.76-.99-1.238.14-.477.823-.7 1.512-.485.683.206 1.13.756.988 1.237zm4.943.361c.017.498-.563.91-1.28.92-.723.017-1.308-.387-1.315-.877 0-.503.568-.91 1.29-.924.717-.013 1.306.387 1.306.88zm4.598-.782c.086.485-.413.984-1.126 1.117-.7.13-1.35-.172-1.44-.653-.086-.498.422-.997 1.122-1.126.714-.123 1.354.17 1.444.663zm0 0"
+												/></g
+											>
+										</svg>
+									{/if}
+								</div>
+								<div class="w-full flex flex-col">
+									<div class="h-10">
+										<h1 class="font-bold text-lg lg:text-xl truncate">{source.name}</h1>
+									</div>
+									<div class="flex justify-end items-end space-x-2 h-10" />
+								</div>
+							</div>
+						</div>
+					</a>
+				{/each}
+			</div>
+		{/if}
+	{/if}
+	{#if (filtered.destinations.length > 0 && destinations.length > 0) || filtered.destinations.length > 0}
+		<div class="flex items-center mt-10">
+			<h1 class="title lg:text-3xl">Destinations</h1>
+		</div>
+	{/if}
+	{#if filtered.destinations.length > 0 && destinations.length > 0}
+		<div class="divider" />
+		<div
+			class="grid grid-col gap-8 auto-cols-max grid-cols-1 md:grid-cols-2 lg:md:grid-cols-3 xl:grid-cols-4 p-4 "
+		>
+			{#if filtered.destinations.length > 0}
+				{#each filtered.destinations as destination}
+					<a class="no-underline mb-5" href={`/destinations/${destination.id}`}>
+						<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-destinations indicator">
+							<div class="w-full flex flex-row">
+								<div class="absolute top-0 left-0 -m-5 h-10 w-10">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										class="absolute top-0 left-0 -m-2 h-12 w-12 text-sky-500"
+										viewBox="0 0 24 24"
+										stroke-width="1.5"
+										stroke="currentColor"
+										fill="none"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+									>
+										<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+										<path
+											d="M22 12.54c-1.804 -.345 -2.701 -1.08 -3.523 -2.94c-.487 .696 -1.102 1.568 -.92 2.4c.028 .238 -.32 1.002 -.557 1h-14c0 5.208 3.164 7 6.196 7c4.124 .022 7.828 -1.376 9.854 -5c1.146 -.101 2.296 -1.505 2.95 -2.46z"
+										/>
+										<path d="M5 10h3v3h-3z" />
+										<path d="M8 10h3v3h-3z" />
+										<path d="M11 10h3v3h-3z" />
+										<path d="M8 7h3v3h-3z" />
+										<path d="M11 7h3v3h-3z" />
+										<path d="M11 4h3v3h-3z" />
+										<path d="M4.571 18c1.5 0 2.047 -.074 2.958 -.78" />
+										<line x1="10" y1="16" x2="10" y2="16.01" />
+									</svg>
+									{#if destination.remoteEngine}
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											class="absolute top-0 left-9 -m-2 h-6 w-6 text-sky-500 rotate-45"
+											viewBox="0 0 24 24"
+											stroke-width="3"
+											stroke="currentColor"
+											fill="none"
+											stroke-linecap="round"
+											stroke-linejoin="round"
+										>
+											<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+											<line x1="12" y1="18" x2="12.01" y2="18" />
+											<path d="M9.172 15.172a4 4 0 0 1 5.656 0" />
+											<path d="M6.343 12.343a8 8 0 0 1 11.314 0" />
+											<path d="M3.515 9.515c4.686 -4.687 12.284 -4.687 17 0" />
+										</svg>
+									{/if}
+								</div>
+								<div class="w-full flex flex-col">
+									<h1 class="font-bold text-lg lg:text-xl truncate">{destination.name}</h1>
+									<div class="h-10 text-xs">
+										{#if $appSession.teamId === '0' && destination.remoteVerified === false && destination.remoteEngine}
+											<h2 class="text-red-500">Not verified yet</h2>
+										{/if}
+										{#if destination.remoteEngine && !destination.sshKeyId}
+											<h2 class="text-red-500">SSH key missing</h2>
+										{/if}
+									</div>
+								</div>
+							</div>
+						</div>
+					</a>
+				{/each}
+			{:else}
+				<h1 class="">Nothing here.</h1>
+			{/if}
+		</div>
+		{#if filtered.otherDestinations.length > 0}
+			{#if destinations.length > 0}
+				<div class="divider w-32 mx-auto" />
+			{/if}
+			<div class="flex items-center mt-10">
+				<h1 class="text-lg font-bold">Other Teams</h1>
+			</div>
+		{/if}
+		{#if filtered.otherDestinations.length > 0}
+			<div
+				class="grid grid-col gap-8 auto-cols-max grid-cols-1 md:grid-cols-2 lg:md:grid-cols-3 xl:grid-cols-4 p-4"
+			>
+				{#each filtered.otherDestinations as destination}
+					<a class="no-underline mb-5" href={`/destinations/${destination.id}`}>
+						<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-destinations indicator">
+							<div class="w-full flex flex-row">
+								<div class="absolute top-0 left-0 -m-5 h-10 w-10">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										class="absolute top-0 left-0 -m-2 h-12 w-12 text-sky-500"
+										viewBox="0 0 24 24"
+										stroke-width="1.5"
+										stroke="currentColor"
+										fill="none"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+									>
+										<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+										<path
+											d="M22 12.54c-1.804 -.345 -2.701 -1.08 -3.523 -2.94c-.487 .696 -1.102 1.568 -.92 2.4c.028 .238 -.32 1.002 -.557 1h-14c0 5.208 3.164 7 6.196 7c4.124 .022 7.828 -1.376 9.854 -5c1.146 -.101 2.296 -1.505 2.95 -2.46z"
+										/>
+										<path d="M5 10h3v3h-3z" />
+										<path d="M8 10h3v3h-3z" />
+										<path d="M11 10h3v3h-3z" />
+										<path d="M8 7h3v3h-3z" />
+										<path d="M11 7h3v3h-3z" />
+										<path d="M11 4h3v3h-3z" />
+										<path d="M4.571 18c1.5 0 2.047 -.074 2.958 -.78" />
+										<line x1="10" y1="16" x2="10" y2="16.01" />
+									</svg>
+									{#if destination.remoteEngine}
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											class="absolute top-0 left-9 -m-2 h-6 w-6 text-sky-500 rotate-45"
+											viewBox="0 0 24 24"
+											stroke-width="3"
+											stroke="currentColor"
+											fill="none"
+											stroke-linecap="round"
+											stroke-linejoin="round"
+										>
+											<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+											<line x1="12" y1="18" x2="12.01" y2="18" />
+											<path d="M9.172 15.172a4 4 0 0 1 5.656 0" />
+											<path d="M6.343 12.343a8 8 0 0 1 11.314 0" />
+											<path d="M3.515 9.515c4.686 -4.687 12.284 -4.687 17 0" />
+										</svg>
+									{/if}
+								</div>
+								<div class="w-full flex flex-col">
+									<h1 class="font-bold text-lg lg:text-xl truncate">{destination.name}</h1>
+									<div class="h-10 text-xs">
+										{#if $appSession.teamId === '0' && destination.remoteVerified === false && destination.remoteEngine}
+											<h2 class="text-red-500">Not verified yet</h2>
+										{/if}
+										{#if destination.remoteEngine && !destination.sshKeyId}
+											<h2 class="text-red-500">SSH key missing</h2>
+										{/if}
+									</div>
+								</div>
+							</div>
+						</div>
+					</a>
+				{/each}
+			</div>
+		{/if}
+	{/if}
+
+	{#if filtered.applications.length === 0 && filtered.destinations.length === 0 && filtered.databases.length === 0 && filtered.services.length === 0 && filtered.gitSources.length === 0 && filtered.destinations.length === 0 && search}
+		<div class="flex flex-col items-center justify-center h-full pt-20">
+			<h1 class="text-2xl font-bold pb-4">
+				Nothing found with <span class="text-error font-bold">{search}</span>.
+			</h1>
+		</div>
+	{/if}
+	{#if applications.length === 0 && destinations.length === 0 && databases.length === 0 && services.length === 0 && gitSources.length === 0 && destinations.length === 0}
+		<div class="hero">
+			<div class="hero-content text-center">
+				<div class="">
+					<h1 class="text-5xl font-bold">
+						Hey <svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="w-20 h-20 inline-flex"
+							viewBox="0 0 36 36"
+							><path
+								fill="#EF9645"
+								d="M4.861 9.147c.94-.657 2.357-.531 3.201.166l-.968-1.407c-.779-1.111-.5-2.313.612-3.093 1.112-.777 4.263 1.312 4.263 1.312-.786-1.122-.639-2.544.483-3.331 1.122-.784 2.67-.513 3.456.611l10.42 14.72L25 31l-11.083-4.042L4.25 12.625c-.793-1.129-.519-2.686.611-3.478z"
+							/><path
+								fill="#FFDC5D"
+								d="M2.695 17.336s-1.132-1.65.519-2.781c1.649-1.131 2.78.518 2.78.518l5.251 7.658c.181-.302.379-.6.6-.894L4.557 11.21s-1.131-1.649.519-2.78c1.649-1.131 2.78.518 2.78.518l6.855 9.997c.255-.208.516-.417.785-.622L7.549 6.732s-1.131-1.649.519-2.78c1.649-1.131 2.78.518 2.78.518l7.947 11.589c.292-.179.581-.334.871-.498L12.238 4.729s-1.131-1.649.518-2.78c1.649-1.131 2.78.518 2.78.518l7.854 11.454 1.194 1.742c-4.948 3.394-5.419 9.779-2.592 13.902.565.825 1.39.26 1.39.26-3.393-4.949-2.357-10.51 2.592-13.903L24.515 8.62s-.545-1.924 1.378-2.47c1.924-.545 2.47 1.379 2.47 1.379l1.685 5.004c.668 1.984 1.379 3.961 2.32 5.831 2.657 5.28 1.07 11.842-3.94 15.279-5.465 3.747-12.936 2.354-16.684-3.11L2.695 17.336z"
+							/><g fill="#5DADEC"
+								><path
+									d="M12 32.042C8 32.042 3.958 28 3.958 24c0-.553-.405-1-.958-1s-1.042.447-1.042 1C1.958 30 6 34.042 12 34.042c.553 0 1-.489 1-1.042s-.447-.958-1-.958z"
+								/><path
+									d="M7 34c-3 0-5-2-5-5 0-.553-.447-1-1-1s-1 .447-1 1c0 4 3 7 7 7 .553 0 1-.447 1-1s-.447-1-1-1zM24 2c-.552 0-1 .448-1 1s.448 1 1 1c4 0 8 3.589 8 8 0 .552.448 1 1 1s1-.448 1-1c0-5.514-4-10-10-10z"
+								/><path
+									d="M29 .042c-.552 0-1 .406-1 .958s.448 1.042 1 1.042c3 0 4.958 2.225 4.958 4.958 0 .552.489 1 1.042 1s.958-.448.958-1C35.958 3.163 33 .042 29 .042z"
+								/></g
+							></svg
+						>
+					</h1>
+					<p class="py-6 text-xl">It looks like you did not configure anything yet.</p>
+					<NewResource><button class="btn btn-primary">Let's Get Started</button></NewResource>
+				</div>
+			</div>
+		</div>
+	{/if}
 </div>
+<div class="mb-20" />
diff --git a/apps/ui/src/routes/login.svelte b/apps/ui/src/routes/login.svelte
index 9b68b6d11..0fe0e6193 100644
--- a/apps/ui/src/routes/login.svelte
+++ b/apps/ui/src/routes/login.svelte
@@ -110,10 +110,15 @@
 						class:bg-coollabs={!loading}
 						>{loading ? $t('login.authenticating') : $t('login.login')}</button
 					>
-
-					<button on:click|preventDefault={gotoRegister} class="btn btn-ghost"
-						>{$t('register.register')}</button
-					>
+					{#if $appSession.isRegistrationEnabled}
+						<button on:click|preventDefault={gotoRegister} class="btn btn-ghost"
+							>{$t('register.register')}</button
+						>
+					{:else}
+						<div class="text-stone-600 text-xs">
+							Registration is disabled. Please ask an admin to activate it.
+						</div>
+					{/if}
 				</div>
 			</form>
 			{#if browser && window.location.host === 'demo.coolify.io'}
diff --git a/apps/ui/src/routes/register.svelte b/apps/ui/src/routes/register.svelte
index 2c920311a..a6ad5c8bf 100644
--- a/apps/ui/src/routes/register.svelte
+++ b/apps/ui/src/routes/register.svelte
@@ -1,6 +1,6 @@
 <script context="module" lang="ts">
 	import type { Load } from '@sveltejs/kit';
-	export const load: Load = async ({ fetch, params, stuff }) => {
+	export const load: Load = async ({ stuff }) => {
 		return {
 			props: { ...stuff }
 		};
@@ -9,7 +9,6 @@
 
 <script lang="ts">
 	export let userCount: number;
-
 	import { goto } from '$app/navigation';
 	import { post } from '$lib/api';
 	import { errorNotification } from '$lib/common';
@@ -17,7 +16,9 @@
 	import { t } from '$lib/translations';
 	import { onMount } from 'svelte';
 	import Cookies from 'js-cookie';
-
+	if (!$appSession.isRegistrationEnabled) {
+		window.location.assign('/');
+	}
 	let loading = false;
 	let emailEl: HTMLInputElement;
 	let passwordEl: HTMLInputElement;
diff --git a/apps/ui/src/routes/services/[id]/__layout.svelte b/apps/ui/src/routes/services/[id]/__layout.svelte
index c7a293cfd..d6b004b20 100644
--- a/apps/ui/src/routes/services/[id]/__layout.svelte
+++ b/apps/ui/src/routes/services/[id]/__layout.svelte
@@ -85,7 +85,7 @@
 				if (service.type && $status.service.isRunning)
 					await post(`/services/${service.id}/${service.type}/stop`, {});
 				await del(`/services/${service.id}`, { id: service.id });
-				return await goto(`/services`);
+				return await goto(`/`, { replaceState: true });
 			} catch (error) {
 				return errorNotification(error);
 			} finally {
diff --git a/apps/ui/src/routes/services/_index.svelte b/apps/ui/src/routes/services/_index.svelte
new file mode 100644
index 000000000..fd297e1cb
--- /dev/null
+++ b/apps/ui/src/routes/services/_index.svelte
@@ -0,0 +1,131 @@
+<script context="module" lang="ts">
+	import type { Load } from '@sveltejs/kit';
+	export const load: Load = async () => {
+		try {
+			const response = await get(`/services`);
+			return {
+				props: {
+					...response
+				}
+			};
+		} catch (error: any) {
+			return {
+				status: 500,
+				error: new Error(error)
+			};
+		}
+	};
+</script>
+
+<script lang="ts">
+	export let services: any = [];
+	import { post, get } from '$lib/api';
+	import { goto } from '$app/navigation';
+	import { t } from '$lib/translations';
+	import { appSession } from '$lib/store';
+
+	import { getDomain } from '$lib/common';
+	import ServiceIcons from '$lib/components/svg/services/ServiceIcons.svelte';
+
+	async function newService() {
+		const { id } = await post('/services/new', {});
+		return await goto(`/services/${id}`, { replaceState: true });
+	}
+	const ownServices = services.filter((service: any) => {
+		if (service.teams[0].id === $appSession.teamId) {
+			return service;
+		}
+	});
+	const otherServices = services.filter((service: any) => {
+		if (service.teams[0].id !== $appSession.teamId) {
+			return service;
+		}
+	});
+</script>
+
+<div class="flex space-x-1 p-6 font-bold">
+	<div class="mr-4 text-2xl tracking-tight">{$t('index.services')}</div>
+	{#if $appSession.isAdmin}
+		<button on:click={newService} class="btn btn-square btn-sm bg-services">
+			<svg
+				class="h-6 w-6"
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+				/></svg
+			>
+		</button>
+	{/if}
+</div>
+
+<div class="flex-col justify-center mt-10 pb-12 sm:pb-16">
+	{#if !services || ownServices.length === 0}
+		<div class="flex-col">
+			<div class="text-center text-xl font-bold">{$t('service.no_service')}</div>
+		</div>
+	{/if}
+	{#if ownServices.length > 0 || otherServices.length > 0}
+		<div class="flex flex-col">
+			<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
+				{#each ownServices as service}
+					<a href="/services/{service.id}" class=" p-2 no-underline">
+						<div class="box-selection group relative hover:bg-pink-600">
+							<ServiceIcons type={service.type} />
+							<div class="truncate text-center text-xl font-bold">
+								{service.name}
+							</div>
+							{#if $appSession.teamId === '0' && otherServices.length > 0}
+								<div class="truncate text-center">{service.teams[0].name}</div>
+							{/if}
+							{#if service.fqdn}
+								<div class="truncate text-center">{getDomain(service.fqdn) || ''}</div>
+							{/if}
+							{#if service.destinationDocker?.name}
+								<div class="truncate text-center">{service.destinationDocker.name}</div>
+							{/if}
+							{#if !service.type || !service.fqdn}
+								<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
+									{$t('application.configuration.configuration_missing')}
+								</div>
+							{/if}
+						</div>
+					</a>
+				{/each}
+			</div>
+			{#if otherServices.length > 0 && $appSession.teamId === '0'}
+				<div class="px-6 pb-5 pt-10 text-2xl font-bold text-center">Other Services</div>
+				<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
+					{#each otherServices as service}
+						<a href="/services/{service.id}" class="p-2 no-underline">
+							<div class="box-selection group relative hover:bg-pink-600">
+								<ServiceIcons type={service.type} />
+								<div class="truncate text-center text-xl font-bold">
+									{service.name}
+								</div>
+								{#if $appSession.teamId === '0'}
+									<div class="truncate text-center">{service.teams[0].name}</div>
+								{/if}
+								{#if service.fqdn}
+									<div class="truncate text-center">{getDomain(service.fqdn) || ''}</div>
+								{/if}
+								{#if !service.type || !service.fqdn}
+									<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
+										Configuration missing
+									</div>
+								{:else}
+									<div class="text-center truncate">{service.type}</div>
+								{/if}
+							</div>
+						</a>
+					{/each}
+				</div>
+			{/if}
+		</div>
+	{/if}
+</div>
diff --git a/apps/ui/src/routes/services/index.svelte b/apps/ui/src/routes/services/index.svelte
index fe3bed644..8136f76e8 100644
--- a/apps/ui/src/routes/services/index.svelte
+++ b/apps/ui/src/routes/services/index.svelte
@@ -1,129 +1,4 @@
-<script context="module" lang="ts">
-	import type { Load } from '@sveltejs/kit';
-	export const load: Load = async () => {
-		try {
-			const response = await get(`/services`);
-			return {
-				props: {
-					...response
-				}
-			};
-		} catch (error: any) {
-			return {
-				status: 500,
-				error: new Error(error)
-			};
-		}
-	};
-</script>
-
 <script lang="ts">
-	export let services: any = [];
-	import { post, get } from '$lib/api';
 	import { goto } from '$app/navigation';
-	import { t } from '$lib/translations';
-	import { appSession } from '$lib/store';
-
-	import { getDomain } from '$lib/common';
-	import ServiceIcons from '$lib/components/svg/services/ServiceIcons.svelte';
-
-	async function newService() {
-		const { id } = await post('/services/new', {});
-		return await goto(`/services/${id}`, { replaceState: true });
-	}
-	const ownServices = services.filter((service: any) => {
-		if (service.teams[0].id === $appSession.teamId) {
-			return service;
-		}
-	});
-	const otherServices = services.filter((service: any) => {
-		if (service.teams[0].id !== $appSession.teamId) {
-			return service;
-		}
-	});
+	goto('/');
 </script>
-
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">{$t('index.services')}</div>
-	<button on:click={newService} class="btn btn-square btn-sm bg-services">
-		<svg
-			class="h-6 w-6"
-			xmlns="http://www.w3.org/2000/svg"
-			fill="none"
-			viewBox="0 0 24 24"
-			stroke="currentColor"
-			><path
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				stroke-width="2"
-				d="M12 6v6m0 0v6m0-6h6m-6 0H6"
-			/></svg
-		>
-	</button>
-</div>
-
-<div class="flex-col justify-center mt-10 pb-12 sm:pb-16">
-	{#if !services || ownServices.length === 0}
-		<div class="flex-col">
-			<div class="text-center text-xl font-bold">{$t('service.no_service')}</div>
-		</div>
-	{/if}
-	{#if ownServices.length > 0 || otherServices.length > 0}
-		<div class="flex flex-col">
-			<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
-				{#each ownServices as service}
-					<a href="/services/{service.id}" class=" p-2 no-underline">
-						<div class="box-selection group relative hover:bg-pink-600">
-							<ServiceIcons type={service.type} />
-							<div class="truncate text-center text-xl font-bold">
-								{service.name}
-							</div>
-							{#if $appSession.teamId === '0' && otherServices.length > 0}
-								<div class="truncate text-center">{service.teams[0].name}</div>
-							{/if}
-							{#if service.fqdn}
-								<div class="truncate text-center">{getDomain(service.fqdn) || ''}</div>
-							{/if}
-							{#if service.destinationDocker?.name}
-								<div class="truncate text-center">{service.destinationDocker.name}</div>
-							{/if}
-							{#if !service.type || !service.fqdn}
-								<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
-									{$t('application.configuration.configuration_missing')}
-								</div>
-							{/if}
-						</div>
-					</a>
-				{/each}
-			</div>
-			{#if otherServices.length > 0 && $appSession.teamId === '0'}
-				<div class="px-6 pb-5 pt-10 text-2xl font-bold text-center">Other Services</div>
-				<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
-					{#each otherServices as service}
-						<a href="/services/{service.id}" class="p-2 no-underline">
-							<div class="box-selection group relative hover:bg-pink-600">
-								<ServiceIcons type={service.type} />
-								<div class="truncate text-center text-xl font-bold">
-									{service.name}
-								</div>
-								{#if $appSession.teamId === '0'}
-									<div class="truncate text-center">{service.teams[0].name}</div>
-								{/if}
-								{#if service.fqdn}
-									<div class="truncate text-center">{getDomain(service.fqdn) || ''}</div>
-								{/if}
-								{#if !service.type || !service.fqdn}
-									<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
-										Configuration missing
-									</div>
-								{:else}
-									<div class="text-center truncate">{service.type}</div>
-								{/if}
-							</div>
-						</a>
-					{/each}
-				</div>
-			{/if}
-		</div>
-	{/if}
-</div>
diff --git a/apps/ui/src/routes/sources/[id]/__layout.svelte b/apps/ui/src/routes/sources/[id]/__layout.svelte
index cafe8ae92..0cd0c27b4 100644
--- a/apps/ui/src/routes/sources/[id]/__layout.svelte
+++ b/apps/ui/src/routes/sources/[id]/__layout.svelte
@@ -45,7 +45,7 @@
 		if (sure) {
 			try {
 				await del(`/sources/${id}`, {});
-				await goto('/sources', { replaceState: true });
+				await goto('/', { replaceState: true });
 			} catch (error) {
 				errorNotification(error);
 			}
diff --git a/apps/ui/src/routes/sources/_index.svelte b/apps/ui/src/routes/sources/_index.svelte
new file mode 100644
index 000000000..a5a5f98ff
--- /dev/null
+++ b/apps/ui/src/routes/sources/_index.svelte
@@ -0,0 +1,159 @@
+<script context="module" lang="ts">
+	import type { Load } from '@sveltejs/kit';
+	export const load: Load = async () => {
+		try {
+			const response = await get(`/sources`);
+			return {
+				props: {
+					...response
+				}
+			};
+		} catch (error: any) {
+			return {
+				status: 500,
+				error: new Error(error)
+			};
+		}
+	};
+</script>
+
+<script lang="ts">
+	export let sources: any = [];
+	import { get, post } from '$lib/api';
+	import { goto } from '$app/navigation';
+	import { getDomain } from '$lib/common';
+	import { t } from '$lib/translations';
+	import { appSession } from '$lib/store';
+	const ownSources = sources.filter((source: { teams: { id: any }[] }) => {
+		if (source.teams[0].id === $appSession.teamId) {
+			return source;
+		}
+	});
+	const otherSources = sources.filter((source: any) => {
+		if (source.teams[0].id !== $appSession.teamId) {
+			return source;
+		}
+	});
+</script>
+
+<div class="flex space-x-1 p-6 font-bold">
+	<div class="mr-4 text-2xl tracking-tight">{$t('index.git_sources')}</div>
+	{#if $appSession.isAdmin}
+		<a href="/sources/new" class="btn btn-square btn-sm bg-sources">
+			<svg
+				class="h-6 w-6"
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+				/></svg
+			>
+		</a>
+	{/if}
+</div>
+<div class="flex-col justify-center mt-10 pb-12 sm:pb-16">
+	{#if !sources || ownSources.length === 0}
+		<div class="flex-col">
+			<div class="text-center text-xl font-bold">{$t('source.no_git_sources_found')}</div>
+		</div>
+	{/if}
+	{#if ownSources.length > 0 || otherSources.length > 0}
+		<div class="flex flex-col">
+			<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
+				{#each ownSources as source}
+					<a href="/sources/{source.id}" class="p-2 no-underline">
+						<div
+							class="box-selection group relative hover:bg-orange-600"
+							class:border-red-500={source.gitlabApp && !source.gitlabAppId}
+							class:border-0={source.gitlabApp && !source.gitlabAppId}
+							class:border-l-4={source.gitlabApp && !source.gitlabAppId}
+						>
+							<div class="absolute top-0 left-0 -m-5 h-10 w-10">
+								{#if source?.type === 'gitlab'}
+									<svg viewBox="0 0 128 128">
+										<path
+											fill="#FC6D26"
+											d="M126.615 72.31l-7.034-21.647L105.64 7.76c-.716-2.206-3.84-2.206-4.556 0l-13.94 42.903H40.856L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664 1.385 72.31a4.792 4.792 0 001.74 5.358L64 121.894l60.874-44.227a4.793 4.793 0 001.74-5.357"
+										/><path fill="#E24329" d="M64 121.894l23.144-71.23H40.856L64 121.893z" /><path
+											fill="#FC6D26"
+											d="M64 121.894l-23.144-71.23H8.42L64 121.893z"
+										/><path
+											fill="#FCA326"
+											d="M8.42 50.663L1.384 72.31a4.79 4.79 0 001.74 5.357L64 121.894 8.42 50.664z"
+										/><path
+											fill="#E24329"
+											d="M8.42 50.663h32.436L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664z"
+										/><path fill="#FC6D26" d="M64 121.894l23.144-71.23h32.437L64 121.893z" /><path
+											fill="#FCA326"
+											d="M119.58 50.663l7.035 21.647a4.79 4.79 0 01-1.74 5.357L64 121.894l55.58-71.23z"
+										/><path
+											fill="#E24329"
+											d="M119.58 50.663H87.145l13.94-42.902c.717-2.206 3.84-2.206 4.557 0l13.94 42.903z"
+										/>
+									</svg>
+								{:else if source?.type === 'github'}
+									<svg viewBox="0 0 128 128">
+										<g fill="#ffffff"
+											><path
+												fill-rule="evenodd"
+												clip-rule="evenodd"
+												d="M64 5.103c-33.347 0-60.388 27.035-60.388 60.388 0 26.682 17.303 49.317 41.297 57.303 3.017.56 4.125-1.31 4.125-2.905 0-1.44-.056-6.197-.082-11.243-16.8 3.653-20.345-7.125-20.345-7.125-2.747-6.98-6.705-8.836-6.705-8.836-5.48-3.748.413-3.67.413-3.67 6.063.425 9.257 6.223 9.257 6.223 5.386 9.23 14.127 6.562 17.573 5.02.542-3.903 2.107-6.568 3.834-8.076-13.413-1.525-27.514-6.704-27.514-29.843 0-6.593 2.36-11.98 6.223-16.21-.628-1.52-2.695-7.662.584-15.98 0 0 5.07-1.623 16.61 6.19C53.7 35 58.867 34.327 64 34.304c5.13.023 10.3.694 15.127 2.033 11.526-7.813 16.59-6.19 16.59-6.19 3.287 8.317 1.22 14.46.593 15.98 3.872 4.23 6.215 9.617 6.215 16.21 0 23.194-14.127 28.3-27.574 29.796 2.167 1.874 4.097 5.55 4.097 11.183 0 8.08-.07 14.583-.07 16.572 0 1.607 1.088 3.49 4.148 2.897 23.98-7.994 41.263-30.622 41.263-57.294C124.388 32.14 97.35 5.104 64 5.104z"
+											/><path
+												d="M26.484 91.806c-.133.3-.605.39-1.035.185-.44-.196-.685-.605-.543-.906.13-.31.603-.395 1.04-.188.44.197.69.61.537.91zm2.446 2.729c-.287.267-.85.143-1.232-.28-.396-.42-.47-.983-.177-1.254.298-.266.844-.14 1.24.28.394.426.472.984.17 1.255zM31.312 98.012c-.37.258-.976.017-1.35-.52-.37-.538-.37-1.183.01-1.44.373-.258.97-.025 1.35.507.368.545.368 1.19-.01 1.452zm3.261 3.361c-.33.365-1.036.267-1.552-.23-.527-.487-.674-1.18-.343-1.544.336-.366 1.045-.264 1.564.23.527.486.686 1.18.333 1.543zm4.5 1.951c-.147.473-.825.688-1.51.486-.683-.207-1.13-.76-.99-1.238.14-.477.823-.7 1.512-.485.683.206 1.13.756.988 1.237zm4.943.361c.017.498-.563.91-1.28.92-.723.017-1.308-.387-1.315-.877 0-.503.568-.91 1.29-.924.717-.013 1.306.387 1.306.88zm4.598-.782c.086.485-.413.984-1.126 1.117-.7.13-1.35-.172-1.44-.653-.086-.498.422-.997 1.122-1.126.714-.123 1.354.17 1.444.663zm0 0"
+											/></g
+										>
+									</svg>
+								{/if}
+							</div>
+							<div class="truncate text-center text-xl font-bold">{source.name}</div>
+							{#if $appSession.teamId === '0' && otherSources.length > 0}
+								<div class="truncate text-center">{source.teams[0].name}</div>
+							{/if}
+
+							{#if (source.type === 'gitlab' && !source.gitlabAppId) || (source.type === 'github' && source.githubApp?.installationId === null)}
+								<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
+									{$t('application.configuration.configuration_missing')}
+								</div>
+							{:else}
+								<div class="truncate text-center">{getDomain(source.htmlUrl) || ''}</div>
+							{/if}
+						</div>
+					</a>
+				{/each}
+			</div>
+
+			{#if otherSources.length > 0 && $appSession.teamId === '0'}
+				<div class="px-6 pb-5 pt-10 text-2xl font-bold text-center">Other Sources</div>
+				<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
+					{#each otherSources as source}
+						<a href="/sources/{source.id}" class="p-2 no-underline">
+							<div
+								class="box-selection group hover:bg-orange-600"
+								class:border-red-500={source.gitlabApp && !source.gitlabAppId}
+								class:border-0={source.gitlabApp && !source.gitlabAppId}
+								class:border-l-4={source.gitlabApp && !source.gitlabAppId}
+							>
+								<div class="truncate text-center text-xl font-bold">{source.name}</div>
+								{#if $appSession.teamId === '0'}
+									<div class="truncate text-center">{source.teams[0].name}</div>
+								{/if}
+								{#if (source.type === 'gitlab' && !source.gitlabAppId) || (source.type === 'github' && source.githubApp?.installationId === null)}
+									<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
+										{$t('application.configuration.configuration_missing')}
+									</div>
+								{:else}
+									<div class="truncate text-center">{source.htmlUrl}</div>
+								{/if}
+							</div>
+						</a>
+					{/each}
+				</div>
+			{/if}
+		</div>
+	{/if}
+</div>
diff --git a/apps/ui/src/routes/sources/index.svelte b/apps/ui/src/routes/sources/index.svelte
index a5a5f98ff..8136f76e8 100644
--- a/apps/ui/src/routes/sources/index.svelte
+++ b/apps/ui/src/routes/sources/index.svelte
@@ -1,159 +1,4 @@
-<script context="module" lang="ts">
-	import type { Load } from '@sveltejs/kit';
-	export const load: Load = async () => {
-		try {
-			const response = await get(`/sources`);
-			return {
-				props: {
-					...response
-				}
-			};
-		} catch (error: any) {
-			return {
-				status: 500,
-				error: new Error(error)
-			};
-		}
-	};
-</script>
-
 <script lang="ts">
-	export let sources: any = [];
-	import { get, post } from '$lib/api';
 	import { goto } from '$app/navigation';
-	import { getDomain } from '$lib/common';
-	import { t } from '$lib/translations';
-	import { appSession } from '$lib/store';
-	const ownSources = sources.filter((source: { teams: { id: any }[] }) => {
-		if (source.teams[0].id === $appSession.teamId) {
-			return source;
-		}
-	});
-	const otherSources = sources.filter((source: any) => {
-		if (source.teams[0].id !== $appSession.teamId) {
-			return source;
-		}
-	});
+	goto('/');
 </script>
-
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">{$t('index.git_sources')}</div>
-	{#if $appSession.isAdmin}
-		<a href="/sources/new" class="btn btn-square btn-sm bg-sources">
-			<svg
-				class="h-6 w-6"
-				xmlns="http://www.w3.org/2000/svg"
-				fill="none"
-				viewBox="0 0 24 24"
-				stroke="currentColor"
-				><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M12 6v6m0 0v6m0-6h6m-6 0H6"
-				/></svg
-			>
-		</a>
-	{/if}
-</div>
-<div class="flex-col justify-center mt-10 pb-12 sm:pb-16">
-	{#if !sources || ownSources.length === 0}
-		<div class="flex-col">
-			<div class="text-center text-xl font-bold">{$t('source.no_git_sources_found')}</div>
-		</div>
-	{/if}
-	{#if ownSources.length > 0 || otherSources.length > 0}
-		<div class="flex flex-col">
-			<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
-				{#each ownSources as source}
-					<a href="/sources/{source.id}" class="p-2 no-underline">
-						<div
-							class="box-selection group relative hover:bg-orange-600"
-							class:border-red-500={source.gitlabApp && !source.gitlabAppId}
-							class:border-0={source.gitlabApp && !source.gitlabAppId}
-							class:border-l-4={source.gitlabApp && !source.gitlabAppId}
-						>
-							<div class="absolute top-0 left-0 -m-5 h-10 w-10">
-								{#if source?.type === 'gitlab'}
-									<svg viewBox="0 0 128 128">
-										<path
-											fill="#FC6D26"
-											d="M126.615 72.31l-7.034-21.647L105.64 7.76c-.716-2.206-3.84-2.206-4.556 0l-13.94 42.903H40.856L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664 1.385 72.31a4.792 4.792 0 001.74 5.358L64 121.894l60.874-44.227a4.793 4.793 0 001.74-5.357"
-										/><path fill="#E24329" d="M64 121.894l23.144-71.23H40.856L64 121.893z" /><path
-											fill="#FC6D26"
-											d="M64 121.894l-23.144-71.23H8.42L64 121.893z"
-										/><path
-											fill="#FCA326"
-											d="M8.42 50.663L1.384 72.31a4.79 4.79 0 001.74 5.357L64 121.894 8.42 50.664z"
-										/><path
-											fill="#E24329"
-											d="M8.42 50.663h32.436L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664z"
-										/><path fill="#FC6D26" d="M64 121.894l23.144-71.23h32.437L64 121.893z" /><path
-											fill="#FCA326"
-											d="M119.58 50.663l7.035 21.647a4.79 4.79 0 01-1.74 5.357L64 121.894l55.58-71.23z"
-										/><path
-											fill="#E24329"
-											d="M119.58 50.663H87.145l13.94-42.902c.717-2.206 3.84-2.206 4.557 0l13.94 42.903z"
-										/>
-									</svg>
-								{:else if source?.type === 'github'}
-									<svg viewBox="0 0 128 128">
-										<g fill="#ffffff"
-											><path
-												fill-rule="evenodd"
-												clip-rule="evenodd"
-												d="M64 5.103c-33.347 0-60.388 27.035-60.388 60.388 0 26.682 17.303 49.317 41.297 57.303 3.017.56 4.125-1.31 4.125-2.905 0-1.44-.056-6.197-.082-11.243-16.8 3.653-20.345-7.125-20.345-7.125-2.747-6.98-6.705-8.836-6.705-8.836-5.48-3.748.413-3.67.413-3.67 6.063.425 9.257 6.223 9.257 6.223 5.386 9.23 14.127 6.562 17.573 5.02.542-3.903 2.107-6.568 3.834-8.076-13.413-1.525-27.514-6.704-27.514-29.843 0-6.593 2.36-11.98 6.223-16.21-.628-1.52-2.695-7.662.584-15.98 0 0 5.07-1.623 16.61 6.19C53.7 35 58.867 34.327 64 34.304c5.13.023 10.3.694 15.127 2.033 11.526-7.813 16.59-6.19 16.59-6.19 3.287 8.317 1.22 14.46.593 15.98 3.872 4.23 6.215 9.617 6.215 16.21 0 23.194-14.127 28.3-27.574 29.796 2.167 1.874 4.097 5.55 4.097 11.183 0 8.08-.07 14.583-.07 16.572 0 1.607 1.088 3.49 4.148 2.897 23.98-7.994 41.263-30.622 41.263-57.294C124.388 32.14 97.35 5.104 64 5.104z"
-											/><path
-												d="M26.484 91.806c-.133.3-.605.39-1.035.185-.44-.196-.685-.605-.543-.906.13-.31.603-.395 1.04-.188.44.197.69.61.537.91zm2.446 2.729c-.287.267-.85.143-1.232-.28-.396-.42-.47-.983-.177-1.254.298-.266.844-.14 1.24.28.394.426.472.984.17 1.255zM31.312 98.012c-.37.258-.976.017-1.35-.52-.37-.538-.37-1.183.01-1.44.373-.258.97-.025 1.35.507.368.545.368 1.19-.01 1.452zm3.261 3.361c-.33.365-1.036.267-1.552-.23-.527-.487-.674-1.18-.343-1.544.336-.366 1.045-.264 1.564.23.527.486.686 1.18.333 1.543zm4.5 1.951c-.147.473-.825.688-1.51.486-.683-.207-1.13-.76-.99-1.238.14-.477.823-.7 1.512-.485.683.206 1.13.756.988 1.237zm4.943.361c.017.498-.563.91-1.28.92-.723.017-1.308-.387-1.315-.877 0-.503.568-.91 1.29-.924.717-.013 1.306.387 1.306.88zm4.598-.782c.086.485-.413.984-1.126 1.117-.7.13-1.35-.172-1.44-.653-.086-.498.422-.997 1.122-1.126.714-.123 1.354.17 1.444.663zm0 0"
-											/></g
-										>
-									</svg>
-								{/if}
-							</div>
-							<div class="truncate text-center text-xl font-bold">{source.name}</div>
-							{#if $appSession.teamId === '0' && otherSources.length > 0}
-								<div class="truncate text-center">{source.teams[0].name}</div>
-							{/if}
-
-							{#if (source.type === 'gitlab' && !source.gitlabAppId) || (source.type === 'github' && source.githubApp?.installationId === null)}
-								<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
-									{$t('application.configuration.configuration_missing')}
-								</div>
-							{:else}
-								<div class="truncate text-center">{getDomain(source.htmlUrl) || ''}</div>
-							{/if}
-						</div>
-					</a>
-				{/each}
-			</div>
-
-			{#if otherSources.length > 0 && $appSession.teamId === '0'}
-				<div class="px-6 pb-5 pt-10 text-2xl font-bold text-center">Other Sources</div>
-				<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
-					{#each otherSources as source}
-						<a href="/sources/{source.id}" class="p-2 no-underline">
-							<div
-								class="box-selection group hover:bg-orange-600"
-								class:border-red-500={source.gitlabApp && !source.gitlabAppId}
-								class:border-0={source.gitlabApp && !source.gitlabAppId}
-								class:border-l-4={source.gitlabApp && !source.gitlabAppId}
-							>
-								<div class="truncate text-center text-xl font-bold">{source.name}</div>
-								{#if $appSession.teamId === '0'}
-									<div class="truncate text-center">{source.teams[0].name}</div>
-								{/if}
-								{#if (source.type === 'gitlab' && !source.gitlabAppId) || (source.type === 'github' && source.githubApp?.installationId === null)}
-									<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
-										{$t('application.configuration.configuration_missing')}
-									</div>
-								{:else}
-									<div class="truncate text-center">{source.htmlUrl}</div>
-								{/if}
-							</div>
-						</a>
-					{/each}
-				</div>
-			{/if}
-		</div>
-	{/if}
-</div>
diff --git a/apps/ui/src/tailwind.css b/apps/ui/src/tailwind.css
index f4233cf8d..71323105a 100644
--- a/apps/ui/src/tailwind.css
+++ b/apps/ui/src/tailwind.css
@@ -24,7 +24,7 @@ body {
 	@apply min-h-screen overflow-x-hidden bg-coolblack text-sm text-white scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200;
 }
 
-input {
+input, .input {
 	@apply h-12 w-96 rounded border border-transparent bg-transparent bg-coolgray-200 p-2 text-xs tracking-tight text-white placeholder-stone-600 outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 disabled:border disabled:border-dashed disabled:border-coolgray-300 disabled:bg-transparent md:text-sm;
 }
 textarea {