Merge pull request #365 from coollabsio/restray-restray_i18n

v2.5.1
2022-04-23 13:15:13 +02:00
parent 68f2f4f978 af97d399b6
commit 94d1af01df
88 changed files with 1622 additions and 566 deletions
--- a/src/routes/__error.svelte
+++ b/src/routes/__error.svelte
@@ -12,15 +12,18 @@
 </script>

 <script>
+	import { t } from '$lib/translations';
+
 	export let status;
 	export let error;
 </script>

 <div class="mx-auto flex h-screen flex-col items-center justify-center px-4">
 	<div class="pb-10 text-7xl font-bold">{status}</div>
-	<div class="text-3xl font-bold">Ooops you are lost! But don't be afraid!</div>
+	<div class="text-3xl font-bold">{$t('error.you_are_lost')}</div>
 	<div class="text-xl">
-		You can find your way back <a href="/" class="font-bold uppercase text-sky-400">here</a>
+		{$t('error.you_can_find_your_way_back')}
+		<a href="/" class="font-bold uppercase text-sky-400">{$t('error.here')}</a>
 	</div>
 	<div class="py-10 text-xs font-bold">
 		<pre
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -1,8 +1,15 @@
 <script context="module" lang="ts">
 	import type { Load } from '@sveltejs/kit';
 	import { publicPaths } from '$lib/settings';
-
+	import { locale, loadTranslations } from '$lib/translations';
 	export const load: Load = async ({ fetch, url, session }) => {
+		const { pathname } = url;
+
+		const defaultLocale = 'en';
+		const sessionLocale = session.lang;
+		const initLocale = sessionLocale || locale.get() || defaultLocale;
+		await loadTranslations(initLocale, pathname);
+
 		if (!session.userId && !publicPaths.includes(url.pathname)) {
 			return {
 				status: 302,
@@ -39,7 +46,6 @@
 	import { asyncSleep } from '$lib/components/common';
 	import { del, get, post } from '$lib/api';
 	import { browser, dev } from '$app/env';
-
 	let isUpdateAvailable = false;

 	let updateStatus = {
@@ -456,7 +462,6 @@
 						<path d="M21 21v-2a4 4 0 0 0 -3 -3.85" />
 					</svg>
 				</a>
-
 				{#if $session.teamId === '0'}
 					<a
 						sveltekit:prefetch
--- a/src/routes/applications/[id]/__layout.svelte
+++ b/src/routes/applications/[id]/__layout.svelte
@@ -81,6 +81,7 @@
 	import { toast } from '@zerodevx/svelte-toast';
 	import { disabledButton } from '$lib/store';
 	import { onDestroy, onMount } from 'svelte';
+	import { t } from '$lib/translations';

 	if (githubToken) $gitTokens.githubToken = githubToken;
 	if (gitlabToken) $gitTokens.gitlabToken = gitlabToken;
@@ -99,7 +100,7 @@
 	async function handleDeploySubmit() {
 		try {
 			const { buildId } = await post(`/applications/${id}/deploy.json`, { ...application });
-			toast.push('Deployment queued.');
+			toast.push($t('application.deployment_queued'));
 			if ($page.url.pathname.startsWith(`/applications/${id}/logs/build`)) {
 				return window.location.assign(`/applications/${id}/logs/build?buildId=${buildId}`);
 			} else {
@@ -113,7 +114,7 @@
 	}

 	async function deleteApplication(name) {
-		const sure = confirm(`Are you sure you would like to delete '${name}'?`);
+		const sure = confirm($t('application.confirm_to_delete', { name }));
 		if (sure) {
 			loading = true;
 			try {
@@ -186,8 +187,8 @@
 				disabled={$disabledButton}
 				class="icons bg-transparent tooltip-bottom text-sm flex items-center space-x-2 text-red-500"
 				data-tooltip={$session.isAdmin
-					? 'Stop application'
-					: 'You do not have permission to stop the application.'}
+					? $t('application.stop_application')
+					: $t('application.permission_denied_stop_application')}
 			>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
@@ -400,10 +401,10 @@
 			class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/logs`}
 		>
 			<button
-				title="Application Logs"
+				title={$t('application.build_logs')}
 				disabled={$disabledButton}
 				class="icons bg-transparent tooltip-bottom text-sm"
-				data-tooltip="Application Logs"
+				data-tooltip={$t('application.build_logs')}
 			>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
@@ -463,14 +464,14 @@

 		<button
 			on:click={() => deleteApplication(application.name)}
-			title="Delete application"
+			title={$t('application.delete_application')}
 			type="submit"
 			disabled={!$session.isAdmin}
 			class:hover:text-red-500={$session.isAdmin}
 			class="icons bg-transparent  tooltip-bottom text-sm"
 			data-tooltip={$session.isAdmin
-				? 'Delete application'
-				: 'You do not have permission to delete this application'}
+				? $t('application.delete_application')
+				: $t('application.permission_denied_delete_application')}
 		>
 			<DeleteIcon />
 		</button>
--- a/src/routes/applications/[id]/check.json.ts
+++ b/src/routes/applications/[id]/check.json.ts
@@ -4,6 +4,7 @@ import * as db from '$lib/database';
 import { ErrorHandler } from '$lib/database';
 import type { RequestHandler } from '@sveltejs/kit';
 import { promises as dns } from 'dns';
+import { t } from '$lib/translations';

 export const post: RequestHandler = async (event) => {
 	const { status, body } = await getUserDetails(event);
@@ -18,7 +19,9 @@ export const post: RequestHandler = async (event) => {
 		const found = await db.isDomainConfigured({ id, fqdn });
 		if (found) {
 			throw {
-				message: `Domain ${getDomain(fqdn).replace('www.', '')} is already used.`
+				message: t.get('application.domain_already_in_use', {
+					domain: getDomain(fqdn).replace('www.', '')
+				})
 			};
 		}
 		if (!dev && !forceSave) {
@@ -36,7 +39,7 @@ export const post: RequestHandler = async (event) => {
 			if (localIp?.length > 0) {
 				if (ip?.length === 0 || !ip.includes(localIp[0])) {
 					throw {
-						message: `DNS not set or propogated for ${domain}.<br><br>Please check your DNS settings.`
+						message: t.get('application.dns_not_set_error', { domain: domain })
 					};
 				}
 			}
--- a/src/routes/applications/[id]/configuration/_BuildPack.svelte
+++ b/src/routes/applications/[id]/configuration/_BuildPack.svelte
@@ -5,6 +5,7 @@
 	import { post } from '$lib/api';
 	import { findBuildPack } from '$lib/components/templates';
 	import { errorNotification } from '$lib/form';
+	import { t } from '$lib/translations';

 	const { id } = $page.params;
 	const from = $page.url.searchParams.get('from');
@@ -43,7 +44,9 @@
 			buildPack.name && buildPack.color}"
 		><span>{buildPack.fancyName}</span>
 		{#if !scanning && foundConfig?.name === buildPack.name}
-			<span class="absolute bottom-0 pb-2 text-xs">Choose this one...</span>
+			<span class="absolute bottom-0 pb-2 text-xs"
+				>{$t('application.configuration.buildpack.choose_this_one')}</span
+			>
 		{/if}
 	</button>
 </form>
--- a/src/routes/applications/[id]/configuration/_GithubRepositories.svelte
+++ b/src/routes/applications/[id]/configuration/_GithubRepositories.svelte
@@ -7,6 +7,7 @@
 	import { errorNotification } from '$lib/form';
 	import { onMount } from 'svelte';
 	import { gitTokens } from '$lib/store';
+	import { t } from '$lib/translations';

 	const { id } = $page.params;
 	const from = $page.url.searchParams.get('from');
@@ -95,9 +96,7 @@
 				`/applications/${id}/configuration/repository.json?repository=${selected.repository}&branch=${selected.branch}`
 			);
 			if (data.used) {
-				const sure = confirm(
-					`This branch is already used by another application. Webhooks won't work in this case for both applications. Are you sure you want to use it?`
-				);
+				const sure = confirm($t('application.configuration.branch_already_in_use'));
 				if (sure) {
 					selected.autodeploy = false;
 					showSave = true;
@@ -171,8 +170,10 @@

 {#if repositories.length === 0 && loading.repositories === false}
 	<div class="flex-col text-center">
-		<div class="pb-4">No repositories configured for your Git Application.</div>
-		<a href={`/sources/${application.gitSource.id}`}><button>Configure it now</button></a>
+		<div class="pb-4">{$t('application.configuration.no_repositories_configured')}</div>
+		<a href={`/sources/${application.gitSource.id}`}
+			><button>{$t('application.configuration.configure_it_now')}</button></a
+		>
 	</div>
 {:else}
 	<form on:submit|preventDefault={handleSubmit} class="flex flex-col justify-center text-center">
@@ -181,8 +182,8 @@
 				<div class="custom-select-wrapper">
 					<Select
 						placeholder={loading.repositories
-							? 'Loading repositories...'
-							: 'Please select a repository'}
+							? $t('application.configuration.loading_repositories')
+							: $t('application.configuration.select_a_repository')}
 						id="repository"
 						showIndicator={true}
 						isWaiting={loading.repositories}
@@ -196,10 +197,10 @@
 				<div class="custom-select-wrapper">
 					<Select
 						placeholder={loading.branches
-							? 'Loading branches...'
+							? $t('application.configuration.loading_branches')
 							: !selected.repository
-							? 'Please select a repository first'
-							: 'Please select a branch'}
+							? $t('application.configuration.select_a_repository_first')
+							: $t('application.configuration.select_a_branch')}
 						isWaiting={loading.branches}
 						showIndicator={selected.repository}
 						id="branches"
@@ -217,7 +218,7 @@
 				type="submit"
 				disabled={!showSave}
 				class:bg-orange-600={showSave}
-				class:hover:bg-orange-500={showSave}>Save</button
+				class:hover:bg-orange-500={showSave}>{$t('forms.save')}</button
 			>
 		</div>
 	</form>
--- a/src/routes/applications/[id]/configuration/_GitlabRepositories.svelte
+++ b/src/routes/applications/[id]/configuration/_GitlabRepositories.svelte
@@ -9,6 +9,7 @@
 	import { goto } from '$app/navigation';
 	import { del, get, post, put } from '$lib/api';
 	import { gitTokens } from '$lib/store';
+	import { t } from '$lib/translations';

 	const { id } = $page.params;
 	const from = $page.url.searchParams.get('from');
@@ -139,9 +140,7 @@
 				`/applications/${id}/configuration/repository.json?repository=${selected.project.path_with_namespace}&branch=${selected.branch.name}`
 			);
 			if (data.used) {
-				const sure = confirm(
-					`This branch is already used by another application. Webhooks won't work in this case for both applications. Are you sure you want to use it?`
-				);
+				const sure = confirm($t('application.configuration.branch_already_in_use'));
 				if (sure) {
 					autodeploy = false;
 					showSave = true;
@@ -270,11 +269,11 @@
 	<div class="flex flex-col space-y-2 px-4 xl:flex-row xl:space-y-0 xl:space-x-2 ">
 		{#if loading.base}
 			<select name="group" disabled class="w-96">
-				<option selected value="">Loading groups...</option>
+				<option selected value="">{$t('application.configuration.loading_groups')}</option>
 			</select>
 		{:else}
 			<select name="group" class="w-96" bind:value={selected.group} on:change={loadProjects}>
-				<option value="" disabled selected>Please select a group</option>
+				<option value="" disabled selected>{$t('application.configuration.select_a_group')}</option>
 				{#each groups as group}
 					<option value={group}>{group.full_name}</option>
 				{/each}
@@ -282,7 +281,7 @@
 		{/if}
 		{#if loading.projects}
 			<select name="project" disabled class="w-96">
-				<option selected value="">Loading projects...</option>
+				<option selected value="">{$t('application.configuration.loading_projects')}</option>
 			</select>
 		{:else if !loading.projects && projects.length > 0}
 			<select
@@ -292,20 +291,24 @@
 				on:change={loadBranches}
 				disabled={!selected.group}
 			>
-				<option value="" disabled selected>Please select a project</option>
+				<option value="" disabled selected
+					>{$t('application.configuration.select_a_project')}</option
+				>
 				{#each projects as project}
 					<option value={project}>{project.name}</option>
 				{/each}
 			</select>
 		{:else}
 			<select name="project" disabled class="w-96">
-				<option disabled selected value="">No projects found</option>
+				<option disabled selected value=""
+					>{$t('application.configuration.no_projects_found')}</option
+				>
 			</select>
 		{/if}

 		{#if loading.branches}
 			<select name="branch" disabled class="w-96">
-				<option selected value="">Loading branches...</option>
+				<option selected value="">{$t('application.configuration.loading_branches')}</option>
 			</select>
 		{:else if !loading.branches && branches.length > 0}
 			<select
@@ -315,14 +318,17 @@
 				on:change={isBranchAlreadyUsed}
 				disabled={!selected.project}
 			>
-				<option value="" disabled selected>Please select a branch</option>
+				<option value="" disabled selected>{$t('application.configuration.select_a_branch')}</option
+				>
 				{#each branches as branch}
 					<option value={branch}>{branch.name}</option>
 				{/each}
 			</select>
 		{:else}
 			<select name="project" disabled class="w-96">
-				<option disabled selected value="">No branches found</option>
+				<option disabled selected value=""
+					>{$t('application.configuration.no_branches_found')}</option
+				>
 			</select>
 		{/if}
 	</div>
@@ -334,7 +340,7 @@
 			disabled={!showSave || loading.save}
 			class:bg-orange-600={showSave && !loading.save}
 			class:hover:bg-orange-500={showSave && !loading.save}
-			>{loading.save ? 'Saving...' : 'Save'}</button
+			>{loading.save ? $t('forms.saving') : $t('forms.save')}</button
 		>
 	</div>
 </form>
--- a/src/routes/applications/[id]/configuration/buildpack.svelte
+++ b/src/routes/applications/[id]/configuration/buildpack.svelte
@@ -36,6 +36,7 @@
 	import { errorNotification } from '$lib/form';
 	import { gitTokens } from '$lib/store';
 	import { browser } from '$app/env';
+	import { t } from '$lib/translations';

 	const { id } = $page.params;

@@ -204,18 +205,21 @@
 </script>

 <div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">Configure Build Pack</div>
+	<div class="mr-4 text-2xl tracking-tight">
+		{$t('application.configuration.configure_build_pack')}
+	</div>
 </div>

 {#if scanning}
 	<div class="flex justify-center space-x-1 p-6 font-bold">
-		<div class="text-xl tracking-tight">Scanning repository to suggest a build pack for you...</div>
+		<div class="text-xl tracking-tight">
+			{$t('application.configuration.scanning_repository_suggest_build_pack')}
+		</div>
 	</div>
 {:else}
 	{#if packageManager === 'yarn' || packageManager === 'pnpm'}
 		<div class="flex justify-center p-6">
-			Found lock file for <span class="font-bold text-orange-500 pl-1">{packageManager}</span>.
-			Using it for predefined commands commands.
+			{@html $t('application.configuration.found_lock_file', { packageManager })}
 		</div>
 	{/if}
 	<div class="max-w-7xl mx-auto flex flex-wrap justify-center">
--- a/src/routes/applications/[id]/configuration/destination.svelte
+++ b/src/routes/applications/[id]/configuration/destination.svelte
@@ -33,6 +33,7 @@
 	import { errorNotification } from '$lib/form';
 	import { goto } from '$app/navigation';
 	import { post } from '$lib/api';
+	import { t } from '$lib/translations';

 	const { id } = $page.params;
 	const from = $page.url.searchParams.get('from');
@@ -60,12 +61,14 @@
 </script>

 <div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">Configure Destination</div>
+	<div class="mr-4 text-2xl tracking-tight">
+		{$t('application.configuration.configure_destination')}
+	</div>
 </div>
 <div class="flex flex-col justify-center">
 	{#if !destinations || ownDestinations.length === 0}
 		<div class="flex-col">
-			<div class="pb-2">No configurable Destination found</div>
+			<div class="pb-2">{$t('application.configuration.no_configurable_destination')}</div>
 			<div class="flex justify-center">
 				<a href="/new/destination" sveltekit:prefetch class="add-icon bg-sky-600 hover:bg-sky-500">
 					<svg
--- a/src/routes/applications/[id]/configuration/repository.svelte
+++ b/src/routes/applications/[id]/configuration/repository.svelte
@@ -18,6 +18,8 @@
 </script>

 <script lang="ts">
+	import { t } from '$lib/translations';
+
 	export let application;
 	export let appId;

@@ -26,7 +28,9 @@
 </script>

 <div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">Select a Repository / Project</div>
+	<div class="mr-4 text-2xl tracking-tight">
+		{$t('application.configuration.select_a_repository_project')}
+	</div>
 </div>
 <div class="flex flex-wrap justify-center">
 	{#if application.gitSource.type === 'github'}
--- a/src/routes/applications/[id]/configuration/source.svelte
+++ b/src/routes/applications/[id]/configuration/source.svelte
@@ -33,6 +33,7 @@
 	import { errorNotification } from '$lib/form';
 	import { goto } from '$app/navigation';
 	import { post } from '$lib/api';
+	import { t } from '$lib/translations';

 	const { id } = $page.params;
 	const from = $page.url.searchParams.get('from');
@@ -72,12 +73,14 @@
 </script>

 <div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">Select a Git Source</div>
+	<div class="mr-4 text-2xl tracking-tight">
+		{$t('application.configuration.select_a_git_source')}
+	</div>
 </div>
 <div class="flex flex-col justify-center">
 	{#if !filteredSources || ownSources.length === 0}
 		<div class="flex-col">
-			<div class="pb-2 text-center">No configurable Git Source found</div>
+			<div class="pb-2 text-center">{$t('application.configuration.no_configurable_git')}</div>
 			<div class="flex justify-center">
 				<button on:click={newSource} class="add-icon bg-orange-600 hover:bg-orange-500">
 					<svg
@@ -139,7 +142,7 @@
 							<div class="font-bold text-xl text-center truncate">{source.name}</div>
 							{#if source.gitlabApp && !source.gitlabAppId}
 								<div class="font-bold text-center truncate text-red-500 group-hover:text-white">
-									Configuration missing
+									{$t('application.configuration.configuration_missing')}
 								</div>
 							{/if}
 						</button>
--- a/src/routes/applications/[id]/index.svelte
+++ b/src/routes/applications/[id]/index.svelte
@@ -49,6 +49,7 @@
 	import cuid from 'cuid';
 	import { browser } from '$app/env';
 	import { disabledButton } from '$lib/store';
+	import { t } from '$lib/translations';
 	const { id } = $page.params;

 	let domainEl: HTMLInputElement;
@@ -101,7 +102,7 @@
 				branch: application.branch,
 				projectId: application.projectId
 			});
-			return toast.push('Settings saved.');
+			return toast.push($t('application.settings_saved'));
 		} catch ({ error }) {
 			if (name === 'debug') {
 				debug = !debug;
@@ -126,7 +127,7 @@
 			$disabledButton = false;
 			return toast.push('Configurations saved.');
 		} catch ({ error }) {
-			if (error?.startsWith('DNS not set')) {
+			if (error?.startsWith($t('application.dns_not_set_partial_error'))) {
 				forceSave = true;
 			}
 			return errorNotification(error);
@@ -216,7 +217,7 @@
 	<!-- svelte-ignore missing-declaration -->
 	<form on:submit|preventDefault={handleSubmit} class="py-4">
 		<div class="flex space-x-1 pb-5 font-bold">
-			<div class="title">General</div>
+			<div class="title">{$t('general')}</div>
 			{#if $session.isAdmin}
 				<button
 					type="submit"
@@ -225,13 +226,17 @@
 					class:hover:bg-green-500={!loading}
 					class:hover:bg-orange-400={forceSave}
 					disabled={loading}
-					>{loading ? 'Saving...' : forceSave ? 'Are you sure to continue?' : 'Save'}</button
+					>{loading
+						? $t('forms.saving')
+						: forceSave
+						? $t('forms.confirm_continue')
+						: $t('forms.save')}</button
 				>
 			{/if}
 		</div>
 		<div class="grid grid-flow-row gap-2 px-10">
 			<div class="mt-2 grid grid-cols-2 items-center">
-				<label for="name" class="text-base font-bold text-stone-100">Name</label>
+				<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
 				<input
 					readonly={!$session.isAdmin}
 					name="name"
@@ -241,7 +246,9 @@
 				/>
 			</div>
 			<div class="grid grid-cols-2 items-center">
-				<label for="gitSource" class="text-base font-bold text-stone-100">Git Source</label>
+				<label for="gitSource" class="text-base font-bold text-stone-100"
+					>{$t('application.git_source')}</label
+				>
 				<a
 					href={$session.isAdmin
 						? `/applications/${id}/configuration/source?from=/applications/${id}`
@@ -256,7 +263,9 @@
 				>
 			</div>
 			<div class="grid grid-cols-2 items-center">
-				<label for="repository" class="text-base font-bold text-stone-100">Git Repository</label>
+				<label for="repository" class="text-base font-bold text-stone-100"
+					>{$t('application.git_repository')}</label
+				>
 				<a
 					href={$session.isAdmin
 						? `/applications/${id}/configuration/repository?from=/applications/${id}&to=/applications/${id}/configuration/buildpack`
@@ -271,7 +280,9 @@
 				>
 			</div>
 			<div class="grid grid-cols-2 items-center">
-				<label for="buildPack" class="text-base font-bold text-stone-100">Build Pack</label>
+				<label for="buildPack" class="text-base font-bold text-stone-100"
+					>{$t('application.build_pack')}</label
+				>
 				<a
 					href={$session.isAdmin
 						? `/applications/${id}/configuration/buildpack?from=/applications/${id}`
@@ -287,7 +298,9 @@
 				>
 			</div>
 			<div class="grid grid-cols-2 items-center pb-8">
-				<label for="destination" class="text-base font-bold text-stone-100">Destination</label>
+				<label for="destination" class="text-base font-bold text-stone-100"
+					>{$t('application.destination')}</label
+				>
 				<div class="no-underline">
 					<input
 						value={application.destinationDocker.name}
@@ -299,20 +312,20 @@
 			</div>
 		</div>
 		<div class="flex space-x-1 py-5 font-bold">
-			<div class="title">Application</div>
+			<div class="title">{$t('application.application')}</div>
 		</div>
 		<div class="grid grid-flow-row gap-2 px-10">
 			<div class="grid grid-cols-2">
 				<div class="flex-col">
-					<label for="fqdn" class="pt-2 text-base font-bold text-stone-100">URL (FQDN)</label>
+					<label for="fqdn" class="pt-2 text-base font-bold text-stone-100"
+						>{$t('application.url_fqdn')}</label
+					>
 					{#if browser && window.location.hostname === 'demo.coolify.io'}
 						<Explainer
 							text="<span class='text-white font-bold'>You can use the predefined random url name or enter your own domain name.</span>"
 						/>
 					{/if}
-					<Explainer
-						text="If you specify <span class='text-green-500 font-bold'>https</span>, the application will be accessible only over https. SSL certificate will be generated for you.<br>If you specify <span class='text-green-500 font-bold'>www</span>, the application will be redirected (302) from non-www and vice versa.<br><br>To modify the url, you must first stop the application.<br><br><span class='text-white font-bold'>You must set your DNS to point to the server IP in advance.</span>"
-					/>
+					<Explainer text={$t('application.https_explainer')} />
 				</div>
 				<input
 					readonly={!$session.isAdmin || isRunning}
@@ -328,12 +341,12 @@
 			</div>
 			<div class="grid grid-cols-2 items-center pb-8">
 				<Setting
-					dataTooltip="Must be stopped to modify."
+					dataTooltip={$t('forms.must_be_stopped_to_modify')}
 					disabled={isRunning}
 					isCenter={false}
 					bind:setting={dualCerts}
-					title="Generate SSL for www and non-www?"
-					description="It will generate certificates for both www and non-www. <br>You need to have <span class='font-bold text-green-500'>both DNS entries</span> set in advance.<br><br>Useful if you expect to have visitors on both."
+					title={$t('application.ssl_www_and_non_www')}
+					description={$t('application.ssl_explainer')}
 					on:click={() => !isRunning && changeSettings('dualCerts')}
 				/>
 			</div>
@@ -372,13 +385,13 @@
 			{/if}
 			{#if !staticDeployments.includes(application.buildPack)}
 				<div class="grid grid-cols-2 items-center">
-					<label for="port" class="text-base font-bold text-stone-100">Port</label>
+					<label for="port" class="text-base font-bold text-stone-100">{$t('forms.port')}</label>
 					<input
 						readonly={!$session.isAdmin}
 						name="port"
 						id="port"
 						bind:value={application.port}
-						placeholder={application.buildPack === 'python' ? '8000' : '3000'}
+						placeholder="{$t('forms.default')}: 'python' ? '8000' : '3000'"
 					/>
 				</div>
 			{/if}
@@ -386,34 +399,38 @@
 			{#if !notNodeDeployments.includes(application.buildPack)}
 				<div class="grid grid-cols-2 items-center">
 					<label for="installCommand" class="text-base font-bold text-stone-100"
-						>Install Command</label
+						>{$t('application.install_command')}</label
 					>
 					<input
 						readonly={!$session.isAdmin}
 						name="installCommand"
 						id="installCommand"
 						bind:value={application.installCommand}
-						placeholder="default: yarn install"
+						placeholder="{$t('forms.default')}: yarn install"
 					/>
 				</div>
 				<div class="grid grid-cols-2 items-center">
-					<label for="buildCommand" class="text-base font-bold text-stone-100">Build Command</label>
+					<label for="buildCommand" class="text-base font-bold text-stone-100"
+						>{$t('application.build_command')}</label
+					>
 					<input
 						readonly={!$session.isAdmin}
 						name="buildCommand"
 						id="buildCommand"
 						bind:value={application.buildCommand}
-						placeholder="default: yarn build"
+						placeholder="{$t('forms.default')}: yarn build"
 					/>
 				</div>
 				<div class="grid grid-cols-2 items-center">
-					<label for="startCommand" class="text-base font-bold text-stone-100">Start Command</label>
+					<label for="startCommand" class="text-base font-bold text-stone-100"
+						>{$t('application.start_command')}</label
+					>
 					<input
 						readonly={!$session.isAdmin}
 						name="startCommand"
 						id="startCommand"
 						bind:value={application.startCommand}
-						placeholder="default: yarn start"
+						placeholder="{$t('forms.default')}: yarn start"
 					/>
 				</div>
 			{/if}
@@ -462,29 +479,25 @@
 			<div class="grid grid-cols-2 items-center">
 				<div class="flex-col">
 					<label for="baseDirectory" class="pt-2 text-base font-bold text-stone-100"
-						>Base Directory</label
+						>{$t('forms.base_directory')}</label
 					>
-					<Explainer
-						text="Directory to use as the base for all commands.<br>Could be useful with <span class='text-green-500 font-bold'>monorepos</span>."
-					/>
+					<Explainer text={$t('application.directory_to_use_explainer')} />
 				</div>
 				<input
 					readonly={!$session.isAdmin}
 					name="baseDirectory"
 					id="baseDirectory"
 					bind:value={application.baseDirectory}
-					placeholder="default: /"
+					placeholder="{$t('forms.default')}: /"
 				/>
 			</div>
 			{#if !notNodeDeployments.includes(application.buildPack)}
 				<div class="grid grid-cols-2 items-center">
 					<div class="flex-col">
 						<label for="publishDirectory" class="pt-2 text-base font-bold text-stone-100"
-							>Publish Directory</label
+							>{$t('forms.publish_directory')}</label
 						>
-						<Explainer
-							text="Directory containing all the assets for deployment. <br> For example: <span class='text-green-500 font-bold'>dist</span>,<span class='text-green-500 font-bold'>_site</span> or <span class='text-green-500 font-bold'>public</span>."
-						/>
+						<Explainer text={$t('application.publish_directory_explainer')} />
 					</div>

 					<input
@@ -492,14 +505,14 @@
 						name="publishDirectory"
 						id="publishDirectory"
 						bind:value={application.publishDirectory}
-						placeholder=" default: /"
+						placeholder=" {$t('forms.default')}: /"
 					/>
 				</div>
 			{/if}
 		</div>
 	</form>
 	<div class="flex space-x-1 pb-5 font-bold">
-		<div class="title">Features</div>
+		<div class="title">{$t('application.features')}</div>
 	</div>
 	<div class="px-10 pb-10">
 		<div class="grid grid-cols-2 items-center">
@@ -507,8 +520,8 @@
 				isCenter={false}
 				bind:setting={autodeploy}
 				on:click={() => changeSettings('autodeploy')}
-				title="Enable Automatic Deployment"
-				description="Enable automatic deployment through webhooks."
+				title={$t('application.enable_automatic_deployment')}
+				description={$t('application.enable_auto_deploy_webhooks')}
 			/>
 		</div>
 		<div class="grid grid-cols-2 items-center">
@@ -516,8 +529,8 @@
 				isCenter={false}
 				bind:setting={previews}
 				on:click={() => changeSettings('previews')}
-				title="Enable MR/PR Previews"
-				description="Enable preview deployments from pull or merge requests."
+				title={$t('application.enable_mr_pr_previews')}
+				description={$t('application.enable_preview_deploy_mr_pr_requests')}
 			/>
 		</div>
 		<div class="grid grid-cols-2 items-center">
@@ -525,8 +538,8 @@
 				isCenter={false}
 				bind:setting={debug}
 				on:click={() => changeSettings('debug')}
-				title="Debug Logs"
-				description="Enable debug logs during build phase.<br><span class='text-red-500 font-bold'>Sensitive information</span> could be visible and saved in logs."
+				title={$t('application.debug_logs')}
+				description={$t('application.enable_debug_log_during_build')}
 			/>
 		</div>
 	</div>
--- a/src/routes/applications/[id]/logs/build/_BuildLog.svelte
+++ b/src/routes/applications/[id]/logs/build/_BuildLog.svelte
@@ -10,6 +10,7 @@
 	import LoadingLogs from '../_Loading.svelte';
 	import { get } from '$lib/api';
 	import { errorNotification } from '$lib/form';
+	import { t } from '$lib/translations';

 	let logs = [];
 	let loading = true;
@@ -84,7 +85,7 @@
 			<LoadingLogs />
 		{/if}
 		{#if currentStatus === 'queued'}
-			<div class="text-center font-bold text-xl">Queued and waiting for execution.</div>
+			<div class="text-center font-bold text-xl">{$t('application.build.queued_waiting_exec')}</div>
 		{:else}
 			<div class="flex justify-end sticky top-0 p-2">
 				<button
--- a/src/routes/applications/[id]/logs/build/index.svelte
+++ b/src/routes/applications/[id]/logs/build/index.svelte
@@ -26,6 +26,7 @@
 	import BuildLog from './_BuildLog.svelte';
 	import { get } from '$lib/api';
 	import { errorNotification } from '$lib/form';
+	import { t } from '$lib/translations';

 	export let builds;
 	export let application;
@@ -86,7 +87,9 @@

 <div class="flex items-center space-x-2 p-5 px-6 font-bold">
 	<div class="-mb-5 flex-col">
-		<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">Build Logs</div>
+		<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
+			{$t('application.build_logs')}
+		</div>
 		<span class="text-xs">{application.name} </span>
 	</div>

@@ -183,12 +186,14 @@

 					<div class="w-48 text-center text-xs">
 						{#if build.status === 'running'}
-							<div class="font-bold">Running</div>
+							<div class="font-bold">{$t('application.build.running')}</div>
 						{:else if build.status === 'queued'}
-							<div class="font-bold">Queued</div>
+							<div class="font-bold">{$t('application.build.queued')}</div>
 						{:else}
 							<div>{build.since}</div>
-							<div>Finished in <span class="font-bold">{build.took}s</span></div>
+							<div>
+								{$t('application.build.finished_in')} <span class="font-bold">{build.took}s</span>
+							</div>
 						{/if}
 					</div>
 				</div>
@@ -197,7 +202,8 @@
 		{#if !noMoreBuilds}
 			{#if buildCount > 5}
 				<div class="flex space-x-2">
-					<button disabled={noMoreBuilds} class="w-full" on:click={loadMoreBuilds}>Load More</button
+					<button disabled={noMoreBuilds} class="w-full" on:click={loadMoreBuilds}
+						>{$t('application.build.load_more')}</button
 					>
 				</div>
 			{/if}
@@ -212,5 +218,5 @@
 	</div>
 </div>
 {#if buildCount === 0}
-	<div class="text-center text-xl font-bold">No logs found</div>
+	<div class="text-center text-xl font-bold">{$t('application.build.no_logs')}</div>
 {/if}
--- a/src/routes/applications/[id]/logs/index.json.ts
+++ b/src/routes/applications/[id]/logs/index.json.ts
@@ -10,6 +10,10 @@ export const get: RequestHandler = async (event) => {
 	if (status === 401) return { status, body };

 	const { id } = event.params;
+	let since = event.url.searchParams.get('since') || 0;
+	if (since !== 0) {
+		since = dayjs(since).unix();
+	}
 	try {
 		const { destinationDockerId, destinationDocker } = await db.prisma.application.findUnique({
 			where: { id },
@@ -20,16 +24,22 @@ export const get: RequestHandler = async (event) => {
 			try {
 				const container = await docker.engine.getContainer(id);
 				if (container) {
+					const logs = (
+						await container.logs({
+							stdout: true,
+							stderr: true,
+							timestamps: true,
+							since,
+							tail: 5000
+						})
+					)
+						.toString()
+						.split('\n')
+						.map((l) => l.slice(8))
+						.filter((a) => a);
 					return {
 						body: {
-							logs: (
-								await container.logs({ stdout: true, stderr: true, timestamps: true, tail: 5000 })
-							)
-								.toString()
-								.split('\n')
-								.map((l) => l.slice(8))
-								.filter((a) => a)
-								.reverse()
+							logs
 						}
 					};
 				}
--- a/src/routes/applications/[id]/logs/index.svelte
+++ b/src/routes/applications/[id]/logs/index.svelte
@@ -26,17 +26,15 @@
 	import LoadingLogs from './_Loading.svelte';
 	import { get } from '$lib/api';
 	import { errorNotification } from '$lib/form';
+	import { t } from '$lib/translations';

 	let loadLogsInterval = null;
-	let allLogs = {
-		logs: []
-	};
 	let logs = [];
-	let currentPage = 1;
-	let endOfLogs = false;
-	let startOfLogs = true;
+	let lastLog = null;
 	let followingInterval;
+	let followingLogs;
 	let logsEl;
+	let position = 0;

 	const { id } = $page.params;
 	onMount(async () => {
@@ -52,52 +50,50 @@
 	async function loadAllLogs() {
 		try {
 			const data: any = await get(`/applications/${id}/logs.json`);
-			allLogs = data.logs;
-			logs = data.logs.slice(0, 100);
-			if (logs.length < 100) {
-				endOfLogs = true;
+			if (data?.logs) {
+				lastLog = data.logs[data.logs.length - 1];
+				logs = data.logs;
 			}
-			return;
-		} catch ({ error }) {
+		} catch (error) {
+			console.log(error);
 			return errorNotification(error);
 		}
 	}
 	async function loadLogs() {
 		try {
-			const newLogs = await get(`/applications/${id}/logs.json`);
-			logs = newLogs.logs.slice(0, 100);
-			return;
-		} catch ({ error }) {
+			const newLogs: any = await get(
+				`/applications/${id}/logs.json?since=${lastLog?.split(' ')[0] || 0}`
+			);
+
+			if (newLogs?.logs && newLogs.logs[newLogs.logs.length - 1] !== logs[logs.length - 1]) {
+				logs = logs.concat(newLogs.logs);
+				lastLog = newLogs.logs[newLogs.logs.length - 1];
+			}
+		} catch (error) {
 			return errorNotification(error);
 		}
 	}
-	async function loadOlderLogs() {
-		clearInterval(loadLogsInterval);
-		loadLogsInterval = null;
-		logsEl.scrollTop = 0;
-		if (logs.length < 100) {
-			endOfLogs = true;
-			return;
-		}
-		startOfLogs = false;
-		endOfLogs = false;
-		currentPage += 1;
-		logs = allLogs.slice(currentPage * 100 - 100, currentPage * 100);
-	}
-	async function loadNewerLogs() {
-		currentPage -= 1;
-		logsEl.scrollTop = 0;
-		if (currentPage !== 1) {
-			clearInterval(loadLogsInterval);
-			endOfLogs = false;
-			loadLogsInterval = null;
-			logs = allLogs.slice(currentPage * 100 - 100, currentPage * 100);
+	function detect() {
+		if (position < logsEl.scrollTop) {
+			position = logsEl.scrollTop;
 		} else {
-			startOfLogs = true;
-			loadLogs();
-			loadLogsInterval = setInterval(() => {
-				loadLogs();
+			if (followingLogs) {
+				clearInterval(followingInterval);
+				followingLogs = false;
+			}
+			position = logsEl.scrollTop;
+		}
+	}
+
+	function followBuild() {
+		followingLogs = !followingLogs;
+		if (followingLogs) {
+			followingInterval = setInterval(() => {
+				logsEl.scrollTop = logsEl.scrollHeight;
+				window.scrollTo(0, document.body.scrollHeight);
 			}, 1000);
+		} else {
+			clearInterval(followingInterval);
 		}
 	}
 </script>
@@ -176,7 +172,7 @@
 </div>
 <div class="flex flex-row justify-center space-x-2 px-10 pt-6">
 	{#if logs.length === 0}
-		<div class="text-xl font-bold tracking-tighter">Waiting for the logs...</div>
+		<div class="text-xl font-bold tracking-tighter">{$t('application.build.waiting_logs')}</div>
 	{:else}
 		<div class="relative w-full">
 			<div class="text-right " />
@@ -185,12 +181,10 @@
 			{/if}
 			<div class="flex justify-end sticky top-0 p-2 mx-1">
 				<button
-					on:click={loadOlderLogs}
-					class:text-coolgray-100={endOfLogs}
-					class:hover:bg-coolgray-400={!endOfLogs}
-					class="bg-transparent tooltip-bottom"
-					data-tooltip="Older logs"
-					disabled={endOfLogs}
+					on:click={followBuild}
+					class="bg-transparent"
+					data-tooltip="Follow logs"
+					class:text-green-500={followingLogs}
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
@@ -203,39 +197,17 @@
 						stroke-linejoin="round"
 					>
 						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-						<path
-							d="M20 15h-8v3.586a1 1 0 0 1 -1.707 .707l-6.586 -6.586a1 1 0 0 1 0 -1.414l6.586 -6.586a1 1 0 0 1 1.707 .707v3.586h8a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1z"
-						/>
-					</svg>
-				</button>
-				<button
-					on:click={loadNewerLogs}
-					class:text-coolgray-100={startOfLogs}
-					class:hover:bg-coolgray-400={!startOfLogs}
-					class="bg-transparent tooltip-bottom"
-					data-tooltip="Newer logs"
-					disabled={startOfLogs}
-				>
-					<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="M4 9h8v-3.586a1 1 0 0 1 1.707 -.707l6.586 6.586a1 1 0 0 1 0 1.414l-6.586 6.586a1 1 0 0 1 -1.707 -.707v-3.586h-8a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1z"
-						/>
+						<circle cx="12" cy="12" r="9" />
+						<line x1="8" y1="12" x2="12" y2="16" />
+						<line x1="12" y1="8" x2="12" y2="16" />
+						<line x1="16" y1="12" x2="12" y2="16" />
 					</svg>
 				</button>
 			</div>
 			<div
 				class="font-mono w-full leading-6 text-left text-md tracking-tighter rounded bg-coolgray-200 py-5 px-6 whitespace-pre-wrap break-words overflow-auto max-h-[80vh] -mt-12 overflow-y-scroll scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200"
 				bind:this={logsEl}
+				on:scroll={detect}
 			>
 				<div class="px-2 pr-14">
 					{#each logs as log}
--- a/src/routes/applications/[id]/previews/index.svelte
+++ b/src/routes/applications/[id]/previews/index.svelte
@@ -30,6 +30,7 @@
 	import Explainer from '$lib/components/Explainer.svelte';
 	import { errorNotification } from '$lib/form';
 	import { toast } from '@zerodevx/svelte-toast';
+	import { t } from '$lib/translations';

 	const { id } = $page.params;
 	async function refreshSecrets() {
@@ -134,10 +135,12 @@
 		<table class="mx-auto border-separate text-left">
 			<thead>
 				<tr class="h-12">
-					<th scope="col">Name</th>
-					<th scope="col">Value</th>
-					<th scope="col" class="w-64 text-center">Need during buildtime?</th>
-					<th scope="col" class="w-96 text-center">Action</th>
+					<th scope="col">{$t('forms.name')}</th>
+					<th scope="col">{$t('forms.value')}</th>
+					<th scope="col" class="w-64 text-center"
+						>{$t('application.preview.need_during_buildtime')}</th
+					>
+					<th scope="col" class="w-96 text-center">{$t('forms.action')}</th>
 				</tr>
 			</thead>
 			<tbody>
@@ -171,13 +174,15 @@
 				</a>
 				<div class="flex items-center justify-center">
 					<button class="bg-coollabs hover:bg-coollabs-100" on:click={() => redeploy(container)}
-						>Redeploy</button
+						>{$t('application.preview.redeploy')}</button
 					>
 				</div>
 			{/each}
 		{:else}
 			<div class="flex-col">
-				<div class="text-center font-bold text-xl">No previews available</div>
+				<div class="text-center font-bold text-xl">
+					{$t('application.preview.no_previews_available')}
+				</div>
 			</div>
 		{/if}
 	</div>
--- a/src/routes/applications/[id]/secrets/_BatchSecrets.svelte
+++ b/src/routes/applications/[id]/secrets/_BatchSecrets.svelte
@@ -6,6 +6,7 @@
 	import { saveSecret } from './utils';
 	import pLimit from 'p-limit';
 	import { createEventDispatcher } from 'svelte';
+	import { t } from '$lib/translations';
 	const dispatch = createEventDispatcher();

 	let batchSecrets = '';
@@ -38,11 +39,11 @@
 	}
 </script>

-<h2 class="title my-6 font-bold">Paste .env file</h2>
+<h2 class="title my-6 font-bold">{$t('application.secret__batch_dot_env')}</h2>
 <form on:submit|preventDefault={getValues} class="mb-12 w-full">
 	<textarea bind:value={batchSecrets} class="mb-2 min-h-[200px] w-full" />
 	<button
 		class="bg-green-600 hover:bg-green-500 disabled:text-white disabled:opacity-40"
-		type="submit">Batch add secrets</button
+		type="submit">{$t('application.batch_secrets')}</button
 	>
 </form>
--- a/src/routes/applications/[id]/secrets/_Secret.svelte
+++ b/src/routes/applications/[id]/secrets/_Secret.svelte
@@ -12,6 +12,7 @@
 	import { del } from '$lib/api';
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
 	import { errorNotification } from '$lib/form';
+	import { t } from '$lib/translations';
 	import { toast } from '@zerodevx/svelte-toast';
 	import { createEventDispatcher } from 'svelte';
 	import { saveSecret } from './utils';
@@ -104,7 +105,7 @@
 		class:cursor-not-allowed={isPRMRSecret}
 		class:cursor-pointer={!isPRMRSecret}
 	>
-		<span class="sr-only">Use isBuildSecret</span>
+		<span class="sr-only">{$t('application.secrets.use_isbuildsecret')}</span>
 		<span
 			class="pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow transition duration-200 ease-in-out"
 			class:translate-x-5={isBuildSecret}
@@ -145,17 +146,19 @@
 	{#if isNewSecret}
 		<div class="flex items-center justify-center">
 			<button class="bg-green-600 hover:bg-green-500" on:click={() => createSecret(true)}
-				>Add</button
+				>{$t('forms.add')}</button
 			>
 		</div>
 	{:else}
 		<div class="flex flex-row justify-center space-x-2">
 			<div class="flex items-center justify-center">
-				<button class="" on:click={() => createSecret(false)}>Set</button>
+				<button class="" on:click={() => createSecret(false)}>{$t('forms.set')}</button>
 			</div>
 			{#if !isPRMRSecret}
 				<div class="flex justify-center items-end">
-					<button class="bg-red-600 hover:bg-red-500" on:click={removeSecret}>Remove</button>
+					<button class="bg-red-600 hover:bg-red-500" on:click={removeSecret}
+						>{$t('forms.remove')}</button
+					>
 				</div>
 			{/if}
 		</div>
--- a/src/routes/applications/[id]/secrets/index.svelte
+++ b/src/routes/applications/[id]/secrets/index.svelte
@@ -25,6 +25,7 @@
 	import pLimit from 'p-limit';
 	import Secret from './_Secret.svelte';
 	import { page } from '$app/stores';
+	import { t } from '$lib/translations';
 	import { get } from '$lib/api';
 	import { saveSecret } from './utils';
 	import { toast } from '@zerodevx/svelte-toast';
@@ -65,7 +66,9 @@

 <div class="flex items-center space-x-2 p-5 px-6 font-bold">
 	<div class="-mb-5 flex-col">
-		<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">Secrets</div>
+		<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
+			{$t('application.secret')}
+		</div>
 		<span class="text-xs">{application.name} </span>
 	</div>

@@ -137,10 +140,12 @@
 	<table class="mx-auto border-separate text-left">
 		<thead>
 			<tr class="h-12">
-				<th scope="col">Name</th>
-				<th scope="col">Value</th>
-				<th scope="col" class="w-64 text-center">Need during buildtime?</th>
-				<th scope="col" class="w-96 text-center">Action</th>
+				<th scope="col">{$t('forms.name')}</th>
+				<th scope="col">{$t('forms.value')}</th>
+				<th scope="col" class="w-64 text-center"
+					>{$t('application.preview.need_during_buildtime')}</th
+				>
+				<th scope="col" class="w-96 text-center">{$t('forms.action')}</th>
 			</tr>
 		</thead>
 		<tbody>
--- a/src/routes/applications/[id]/secrets/utils.ts
+++ b/src/routes/applications/[id]/secrets/utils.ts
@@ -1,6 +1,7 @@
 import { toast } from '@zerodevx/svelte-toast';
 import { errorNotification } from '$lib/form';
 import { post } from '$lib/api';
+import { t } from '$lib/translations';

 type Props = {
 	isNew: boolean;
@@ -21,8 +22,8 @@ export async function saveSecret({
 	isNewSecret,
 	applicationId
 }: Props): Promise<void> {
-	if (!name) return errorNotification('Name is required.');
-	if (!value) return errorNotification('Value is required.');
+	if (!name) return errorNotification(`${t.get('forms.name')} ${t.get('forms.is_required')}`);
+	if (!value) return errorNotification(`${t.get('forms.value')} ${t.get('forms.is_required')}`);
 	try {
 		await post(`/applications/${applicationId}/secrets.json`, {
 			name,
--- a/src/routes/applications/[id]/settings.json.ts
+++ b/src/routes/applications/[id]/settings.json.ts
@@ -1,6 +1,7 @@
 import { getUserDetails } from '$lib/common';
 import * as db from '$lib/database';
 import { ErrorHandler } from '$lib/database';
+import { t } from '$lib/translations';
 import type { RequestHandler } from '@sveltejs/kit';

 export const post: RequestHandler = async (event) => {
@@ -14,8 +15,7 @@ export const post: RequestHandler = async (event) => {
 		const isDouble = await db.checkDoubleBranch(branch, projectId);
 		if (isDouble && autodeploy) {
 			throw {
-				message:
-					'Cannot activate automatic deployments until only one application is defined for this repository / branch.'
+				message: t.get('application.cant_activate_auto_deploy_without_repo')
 			};
 		}
 		await db.setApplicationSettings({ id, debug, previews, dualCerts, autodeploy });
--- a/src/routes/applications/[id]/storage/_Storage.svelte
+++ b/src/routes/applications/[id]/storage/_Storage.svelte
@@ -10,12 +10,13 @@

 	import { errorNotification } from '$lib/form';
 	import { toast } from '@zerodevx/svelte-toast';
+	import { t } from '$lib/translations';
 	const { id } = $page.params;

 	const dispatch = createEventDispatcher();
 	async function saveStorage(newStorage = false) {
 		try {
-			if (!storage.path) return errorNotification('Path is required.');
+			if (!storage.path) return errorNotification($t('application.storage.path_is_required'));
 			storage.path = storage.path.startsWith('/') ? storage.path : `/${storage.path}`;
 			storage.path = storage.path.endsWith('/') ? storage.path.slice(0, -1) : storage.path;
 			storage.path.replace(/\/\//g, '/');
@@ -29,8 +30,8 @@
 				storage.path = null;
 				storage.id = null;
 			}
-			if (newStorage) toast.push('Storage saved.');
-			else toast.push('Storage updated.');
+			if (newStorage) toast.push($t('application.storage.storage_saved'));
+			else toast.push($t('application.storage.storage_updated'));
 		} catch ({ error }) {
 			return errorNotification(error);
 		}
@@ -39,7 +40,7 @@
 		try {
 			await del(`/applications/${id}/storage.json`, { path: storage.path });
 			dispatch('refresh');
-			toast.push('Storage deleted.');
+			toast.push($t('application.storage.storage_deleted'));
 		} catch ({ error }) {
 			return errorNotification(error);
 		}
@@ -57,16 +58,19 @@
 <td>
 	{#if isNew}
 		<div class="flex items-center justify-center">
-			<button class="bg-green-600 hover:bg-green-500" on:click={() => saveStorage(true)}>Add</button
+			<button class="bg-green-600 hover:bg-green-500" on:click={() => saveStorage(true)}
+				>{$t('forms.add')}</button
 			>
 		</div>
 	{:else}
 		<div class="flex flex-row justify-center space-x-2">
 			<div class="flex items-center justify-center">
-				<button class="" on:click={() => saveStorage(false)}>Set</button>
+				<button class="" on:click={() => saveStorage(false)}>{$t('forms.set')}</button>
 			</div>
 			<div class="flex justify-center items-end">
-				<button class="bg-red-600 hover:bg-red-500" on:click={removeStorage}>Remove</button>
+				<button class="bg-red-600 hover:bg-red-500" on:click={removeStorage}
+					>{$t('forms.remove')}</button
+				>
 			</div>
 		</div>
 	{/if}
--- a/src/routes/applications/[id]/storage/index.svelte
+++ b/src/routes/applications/[id]/storage/index.svelte
@@ -28,6 +28,7 @@
 	import Storage from './_Storage.svelte';
 	import { get } from '$lib/api';
 	import Explainer from '$lib/components/Explainer.svelte';
+	import { t } from '$lib/translations';

 	const { id } = $page.params;
 	async function refreshStorage() {
@@ -111,15 +112,12 @@

 <div class="mx-auto max-w-6xl rounded-xl px-6 pt-4">
 	<div class="flex justify-center py-4 text-center">
-		<Explainer
-			customClass="w-full"
-			text={'You can specify any folder that you want to be persistent across deployments. <br>This is useful for storing data such as a database (SQLite) or a cache.'}
-		/>
+		<Explainer customClass="w-full" text={$t('application.storage.persistent_storage_explainer')} />
 	</div>
 	<table class="mx-auto border-separate text-left">
 		<thead>
 			<tr class="h-12">
-				<th scope="col">Path</th>
+				<th scope="col">{$t('forms.path')}</th>
 			</tr>
 		</thead>
 		<tbody>
--- a/src/routes/applications/index.svelte
+++ b/src/routes/applications/index.svelte
@@ -3,6 +3,8 @@
 	import { session } from '$app/stores';
 	import { post } from '$lib/api';
 	import { goto } from '$app/navigation';
+	import { t } from '$lib/translations';
+	import { getDomain } from '$lib/components/common';

 	import Rust from '$lib/components/svg/applications/Rust.svelte';
 	import Nodejs from '$lib/components/svg/applications/Nodejs.svelte';
@@ -20,7 +22,6 @@
 	import Astro from '$lib/components/svg/applications/Astro.svelte';
 	import Eleventy from '$lib/components/svg/applications/Eleventy.svelte';
 	import Deno from '$lib/components/svg/applications/Deno.svelte';
-	import { getDomain } from '$lib/components/common';

 	async function newApplication() {
 		const { id } = await post('/applications/new', {});
@@ -39,7 +40,7 @@
 </script>

 <div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl ">Applications</div>
+	<div class="mr-4 text-2xl ">{$t('index.applications')}</div>
 	{#if $session.isAdmin}
 		<div on:click={newApplication} class="add-icon cursor-pointer bg-green-600 hover:bg-green-500">
 			<svg
@@ -61,7 +62,7 @@
 <div class="flex flex-col flex-wrap justify-center">
 	{#if !applications || ownApplications.length === 0}
 		<div class="flex-col">
-			<div class="text-center text-xl font-bold">No applications found</div>
+			<div class="text-center text-xl font-bold">{$t('application.no_applications_found')}</div>
 		</div>
 	{/if}
 	{#if ownApplications.length > 0 || otherApplications.length > 0}
--- a/src/routes/dashboard.json.ts
+++ b/src/routes/dashboard.json.ts
@@ -57,7 +57,8 @@ export const post: RequestHandler = async (event) => {
 		headers: {
 			'set-cookie': [
 				`${cookie}=${value}; HttpOnly; Path=/; Max-Age=15778800;`,
-				'gitlabToken=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT'
+				'gitlabToken=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT',
+				'githubToken=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT'
 			],
 			Location: from
 		}
--- a/src/routes/databases/[id]/_Databases/_CouchDb.svelte
+++ b/src/routes/databases/[id]/_Databases/_CouchDb.svelte
@@ -1,6 +1,7 @@
 <script>
 	export let database;
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
+	import { t } from '$lib/translations';
 </script>

 <div class="flex space-x-1 py-5 font-bold">
@@ -8,34 +9,38 @@
 </div>
 <div class="space-y-2 px-10">
 	<div class="grid grid-cols-2 items-center">
-		<label for="defaultDatabase" class="text-base font-bold text-stone-100">Default Database</label>
+		<label for="defaultDatabase" class="text-base font-bold text-stone-100"
+			>{$t('database.default_database')}</label
+		>
 		<CopyPasswordField
 			required
 			readonly={database.defaultDatabase}
 			disabled={database.defaultDatabase}
-			placeholder="eg: mydb"
+			placeholder="{$t('forms.eg')}: mydb"
 			id="defaultDatabase"
 			name="defaultDatabase"
 			bind:value={database.defaultDatabase}
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="dbUser" class="text-base font-bold text-stone-100">User</label>
+		<label for="dbUser" class="text-base font-bold text-stone-100">{$t('forms.user')}</label>
 		<CopyPasswordField
 			readonly
 			disabled
-			placeholder="Generated automatically after start"
+			placeholder={$t('forms.generated_automatically_after_start')}
 			id="dbUser"
 			name="dbUser"
 			value={database.dbUser}
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="dbUserPassword" class="text-base font-bold text-stone-100">Password</label>
+		<label for="dbUserPassword" class="text-base font-bold text-stone-100"
+			>{$t('forms.password')}</label
+		>
 		<CopyPasswordField
 			readonly
 			disabled
-			placeholder="Generated automatically after start"
+			placeholder={$t('forms.generated_automatically_after_start')}
 			isPasswordField
 			id="dbUserPassword"
 			name="dbUserPassword"
@@ -43,22 +48,24 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="rootUser" class="text-base font-bold text-stone-100">Root User</label>
+		<label for="rootUser" class="text-base font-bold text-stone-100">{$t('forms.root_user')}</label>
 		<CopyPasswordField
 			readonly
 			disabled
-			placeholder="Generated automatically after start"
+			placeholder={$t('forms.generated_automatically_after_start')}
 			id="rootUser"
 			name="rootUser"
 			value={database.rootUser}
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="rootUserPassword" class="text-base font-bold text-stone-100">Root's Password</label>
+		<label for="rootUserPassword" class="text-base font-bold text-stone-100"
+			>{$t('forms.roots_password')}</label
+		>
 		<CopyPasswordField
 			readonly
 			disabled
-			placeholder="Generated automatically after start"
+			placeholder={$t('forms.generated_automatically_after_start')}
 			isPasswordField
 			id="rootUserPassword"
 			name="rootUserPassword"
--- a/src/routes/databases/[id]/_Databases/_Databases.svelte
+++ b/src/routes/databases/[id]/_Databases/_Databases.svelte
@@ -18,6 +18,7 @@
 	import { post } from '$lib/api';
 	import { getDomain } from '$lib/components/common';
 	import { toast } from '@zerodevx/svelte-toast';
+	import { t } from '$lib/translations';

 	const { id } = $page.params;

@@ -59,7 +60,7 @@
 							: window.location.hostname
 						: database.id
 			  }:${isPublic ? database.publicPort : privatePort}/${databaseDefault}`
-			: 'Loading...');
+			: $t('forms.loading'));
 	}

 	async function changeSettings(name) {
@@ -110,20 +111,20 @@
 <div class="mx-auto max-w-4xl px-6">
 	<form on:submit|preventDefault={handleSubmit} class="py-4">
 		<div class="flex space-x-1 pb-5 font-bold">
-			<div class="title">General</div>
+			<div class="title">{$t('general')}</div>
 			{#if $session.isAdmin}
 				<button
 					type="submit"
 					class:bg-purple-600={!loading}
 					class:hover:bg-purple-500={!loading}
-					disabled={loading}>{loading ? 'Saving...' : 'Save'}</button
+					disabled={loading}>{loading ? $t('forms.saving') : $t('forms.save')}</button
 				>
 			{/if}
 		</div>

 		<div class="grid grid-flow-row gap-2 px-10">
 			<div class="grid grid-cols-2 items-center">
-				<label for="name" class="text-base font-bold text-stone-100">Name</label>
+				<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
 				<input
 					readonly={!$session.isAdmin}
 					name="name"
@@ -133,7 +134,9 @@
 				/>
 			</div>
 			<div class="grid grid-cols-2 items-center">
-				<label for="destination" class="text-base font-bold text-stone-100">Destination</label>
+				<label for="destination" class="text-base font-bold text-stone-100"
+					>{$t('application.destination')}</label
+				>
 				{#if database.destinationDockerId}
 					<div class="no-underline">
 						<input
@@ -148,16 +151,17 @@
 			</div>

 			<div class="grid grid-cols-2 items-center">
-				<label for="version" class="text-base font-bold text-stone-100">Version</label>
+				<label for="version" class="text-base font-bold text-stone-100">{$t('forms.version')}</label
+				>
 				<input value={database.version} readonly disabled class="bg-transparent " />
 			</div>
 		</div>

 		<div class="grid grid-flow-row gap-2 px-10 pt-2">
 			<div class="grid grid-cols-2 items-center">
-				<label for="host" class="text-base font-bold text-stone-100">Host</label>
+				<label for="host" class="text-base font-bold text-stone-100">{$t('forms.host')}</label>
 				<CopyPasswordField
-					placeholder="Generated automatically after start"
+					placeholder={$t('forms.generated_automatically_after_start')}
 					isPasswordField={false}
 					readonly
 					disabled
@@ -167,9 +171,10 @@
 				/>
 			</div>
 			<div class="grid grid-cols-2 items-center">
-				<label for="publicPort" class="text-base font-bold text-stone-100">Port</label>
+				<label for="publicPort" class="text-base font-bold text-stone-100">{$t('forms.port')}</label
+				>
 				<CopyPasswordField
-					placeholder="Generated automatically after set to public"
+					placeholder={$t('database.generated_automatically_after_set_to_public')}
 					id="publicPort"
 					readonly
 					disabled
@@ -191,10 +196,12 @@
 				<CouchDb {database} />
 			{/if}
 			<div class="grid grid-cols-2 items-center px-10 pb-8">
-				<label for="url" class="text-base font-bold text-stone-100">Connection String</label>
+				<label for="url" class="text-base font-bold text-stone-100"
+					>{$t('database.connection_string')}</label
+				>
 				<CopyPasswordField
 					textarea={true}
-					placeholder="Generated automatically after start"
+					placeholder={$t('forms.generated_automatically_after_start')}
 					isPasswordField={false}
 					id="url"
 					name="url"
@@ -206,7 +213,7 @@
 		</div>
 	</form>
 	<div class="flex space-x-1 pb-5 font-bold">
-		<div class="title">Features</div>
+		<div class="title">{$t('application.features')}</div>
 	</div>
 	<div class="px-10 pb-10">
 		<div class="grid grid-cols-2 items-center">
@@ -214,8 +221,8 @@
 				loading={publicLoading}
 				bind:setting={isPublic}
 				on:click={() => changeSettings('isPublic')}
-				title="Set it public"
-				description="Your database will be reachable over the internet. <br>Take security seriously in this case!"
+				title={$t('database.set_public')}
+				description={$t('database.warning_database_public')}
 				disabled={!isRunning}
 			/>
 		</div>
@@ -224,8 +231,8 @@
 				<Setting
 					bind:setting={appendOnly}
 					on:click={() => changeSettings('appendOnly')}
-					title="Change append only mode"
-					description="Useful if you would like to restore redis data from a backup.<br><span class='font-bold text-white'>Database restart is required.</span>"
+					title={$t('database.change_append_only_mode')}
+					description={$t('database.warning_append_only')}
 				/>
 			</div>
 		{/if}
--- a/src/routes/databases/[id]/_Databases/_MongoDB.svelte
+++ b/src/routes/databases/[id]/_Databases/_MongoDB.svelte
@@ -3,6 +3,7 @@
 	export let isRunning;
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
 	import Explainer from '$lib/components/Explainer.svelte';
+	import { t } from '$lib/translations';
 </script>

 <div class="flex space-x-1 py-5 font-bold">
@@ -10,9 +11,9 @@
 </div>
 <div class="space-y-2 px-10">
 	<div class="grid grid-cols-2 items-center">
-		<label for="rootUser" class="text-base font-bold text-stone-100">Root User</label>
+		<label for="rootUser" class="text-base font-bold text-stone-100">{$t('forms.root_user')}</label>
 		<CopyPasswordField
-			placeholder="Generated automatically after start"
+			placeholder={$t('forms.generated_automatically_after_start')}
 			id="rootUser"
 			readonly
 			disabled
@@ -21,11 +22,13 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="rootUserPassword" class="text-base font-bold text-stone-100">Root's Password</label>
+		<label for="rootUserPassword" class="text-base font-bold text-stone-100"
+			>{$t('forms.roots_password')}</label
+		>
 		<CopyPasswordField
 			disabled={!isRunning}
 			readonly={!isRunning}
-			placeholder="Generated automatically after start"
+			placeholder={$t('forms.generated_automatically_after_start')}
 			isPasswordField={true}
 			id="rootUserPassword"
 			name="rootUserPassword"
--- a/src/routes/databases/[id]/_Databases/_MySQL.svelte
+++ b/src/routes/databases/[id]/_Databases/_MySQL.svelte
@@ -3,6 +3,7 @@
 	export let isRunning;
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
 	import Explainer from '$lib/components/Explainer.svelte';
+	import { t } from '$lib/translations';
 </script>

 <div class="flex space-x-1 py-5 font-bold">
@@ -10,34 +11,38 @@
 </div>
 <div class="space-y-2 px-10">
 	<div class="grid grid-cols-2 items-center">
-		<label for="defaultDatabase" class="text-base font-bold text-stone-100">Default Database</label>
+		<label for="defaultDatabase" class="text-base font-bold text-stone-100"
+			>{$t('database.default_database')}</label
+		>
 		<CopyPasswordField
 			required
 			readonly={database.defaultDatabase}
 			disabled={database.defaultDatabase}
-			placeholder="eg: mydb"
+			placeholder="{$t('forms.eg')}: mydb"
 			id="defaultDatabase"
 			name="defaultDatabase"
 			bind:value={database.defaultDatabase}
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="dbUser" class="text-base font-bold text-stone-100">User</label>
+		<label for="dbUser" class="text-base font-bold text-stone-100">{$t('forms.user')}</label>
 		<CopyPasswordField
 			readonly
 			disabled
-			placeholder="Generated automatically after start"
+			placeholder={$t('forms.generated_automatically_after_start')}
 			id="dbUser"
 			name="dbUser"
 			value={database.dbUser}
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="dbUserPassword" class="text-base font-bold text-stone-100">Password</label>
+		<label for="dbUserPassword" class="text-base font-bold text-stone-100"
+			>{$t('forms.password')}</label
+		>
 		<CopyPasswordField
 			disabled={!isRunning}
 			readonly={!isRunning}
-			placeholder="Generated automatically after start"
+			placeholder={$t('forms.generated_automatically_after_start')}
 			isPasswordField
 			id="dbUserPassword"
 			name="dbUserPassword"
@@ -46,22 +51,24 @@
 		<Explainer text="Could be changed while the database is running." />
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="rootUser" class="text-base font-bold text-stone-100">Root User</label>
+		<label for="rootUser" class="text-base font-bold text-stone-100">{$t('forms.root_user')}</label>
 		<CopyPasswordField
 			readonly
 			disabled
-			placeholder="Generated automatically after start"
+			placeholder={$t('forms.generated_automatically_after_start')}
 			id="rootUser"
 			name="rootUser"
 			value={database.rootUser}
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="rootUserPassword" class="text-base font-bold text-stone-100">Root's Password</label>
+		<label for="rootUserPassword" class="text-base font-bold text-stone-100"
+			>{$t('forms.roots_password')}</label
+		>
 		<CopyPasswordField
 			disabled={!isRunning}
 			readonly={!isRunning}
-			placeholder="Generated automatically after start"
+			placeholder={$t('forms.generated_automatically_after_start')}
 			isPasswordField
 			id="rootUserPassword"
 			name="rootUserPassword"
--- a/src/routes/databases/[id]/_Databases/_PostgreSQL.svelte
+++ b/src/routes/databases/[id]/_Databases/_PostgreSQL.svelte
@@ -3,6 +3,7 @@
 	export let isRunning;
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
 	import Explainer from '$lib/components/Explainer.svelte';
+	import { t } from '$lib/translations';
 </script>

 <div class="flex space-x-1 py-5 font-bold">
@@ -10,12 +11,14 @@
 </div>
 <div class="space-y-2 px-10">
 	<div class="grid grid-cols-2 items-center">
-		<label for="defaultDatabase" class="text-base font-bold text-stone-100">Default Database</label>
+		<label for="defaultDatabase" class="text-base font-bold text-stone-100"
+			>{$t('database.default_database')}</label
+		>
 		<CopyPasswordField
 			required
 			readonly={database.defaultDatabase}
 			disabled={database.defaultDatabase}
-			placeholder="eg: mydb"
+			placeholder="{$t('forms.eg')}: mydb"
 			id="defaultDatabase"
 			name="defaultDatabase"
 			bind:value={database.defaultDatabase}
@@ -37,22 +40,24 @@
 		<Explainer text="Could be changed while the database is running." />
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="dbUser" class="text-base font-bold text-stone-100">User</label>
+		<label for="dbUser" class="text-base font-bold text-stone-100">{$t('forms.user')}</label>
 		<CopyPasswordField
 			readonly
 			disabled
-			placeholder="Generated automatically after start"
+			placeholder={$t('forms.generated_automatically_after_start')}
 			id="dbUser"
 			name="dbUser"
 			value={database.dbUser}
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="dbUserPassword" class="text-base font-bold text-stone-100">Password</label>
+		<label for="dbUserPassword" class="text-base font-bold text-stone-100"
+			>{$t('forms.password')}</label
+		>
 		<CopyPasswordField
 			disabled={!isRunning}
 			readonly={!isRunning}
-			placeholder="Generated automatically after start"
+			placeholder={$t('forms.generated_automatically_after_start')}
 			isPasswordField
 			id="dbUserPassword"
 			name="dbUserPassword"
--- a/src/routes/databases/[id]/_Databases/_Redis.svelte
+++ b/src/routes/databases/[id]/_Databases/_Redis.svelte
@@ -3,6 +3,7 @@
 	export let isRunning;
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
 	import Explainer from '$lib/components/Explainer.svelte';
+	import { t } from '$lib/translations';
 </script>

 <div class="flex space-x-1 py-5 font-bold">
@@ -10,11 +11,13 @@
 </div>
 <div class="space-y-2 px-10">
 	<div class="grid grid-cols-2 items-center">
-		<label for="dbUserPassword" class="text-base font-bold text-stone-100">Password</label>
+		<label for="dbUserPassword" class="text-base font-bold text-stone-100"
+			>{$t('forms.password')}</label
+		>
 		<CopyPasswordField
 			disabled={!isRunning}
 			readonly={!isRunning}
-			placeholder="Generated automatically after start"
+			placeholder={$t('forms.generated_automatically_after_start')}
 			isPasswordField
 			id="dbUserPassword"
 			name="dbUserPassword"
--- a/src/routes/databases/[id]/__layout.svelte
+++ b/src/routes/databases/[id]/__layout.svelte
@@ -63,6 +63,7 @@
 	import Loading from '$lib/components/Loading.svelte';
 	import { del, post } from '$lib/api';
 	import { goto } from '$app/navigation';
+	import { t } from '$lib/translations';

 	export let database;
 	export let isRunning;
@@ -83,7 +84,7 @@
 		}
 	}
 	async function stopDatabase() {
-		const sure = confirm(`Are you sure you would like to stop '${database.name}'?`);
+		const sure = confirm($t('database.confirm_stop', { name: database.name }));
 		if (sure) {
 			loading = true;
 			try {
@@ -113,13 +114,13 @@
 			{#if isRunning}
 				<button
 					on:click={stopDatabase}
-					title="Stop database"
+					title={$t('database.stop_database')}
 					type="submit"
 					disabled={!$session.isAdmin}
 					class="icons bg-transparent tooltip-bottom text-sm flex items-center space-x-2 text-red-500"
 					data-tooltip={$session.isAdmin
-						? 'Stop database'
-						: 'You do not have permission to stop the database.'}
+						? $t('database.stop_database')
+						: $t('database.permission_denied_stop_database')}
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
@@ -139,13 +140,13 @@
 			{:else}
 				<button
 					on:click={startDatabase}
-					title="Start database"
+					title={$t('database.start_database')}
 					type="submit"
 					disabled={!$session.isAdmin}
 					class="icons bg-transparent tooltip-bottom text-sm flex items-center space-x-2 text-green-500"
 					data-tooltip={$session.isAdmin
-						? 'Start database'
-						: 'You do not have permission to start the database.'}
+						? $t('database.start_database')
+						: $t('database.permission_denied_start_database')}
 					><svg
 						xmlns="http://www.w3.org/2000/svg"
 						class="w-6 h-6"
@@ -164,14 +165,14 @@
 		{/if}
 		<button
 			on:click={deleteDatabase}
-			title="Delete Database"
+			title={$t('database.delete_database')}
 			type="submit"
 			disabled={!$session.isAdmin}
 			class:hover:text-red-500={$session.isAdmin}
 			class="icons bg-transparent tooltip-bottom text-sm"
 			data-tooltip={$session.isAdmin
-				? 'Delete Database'
-				: 'You do not have permission to delete a Database'}><DeleteIcon /></button
+				? $t('database.delete_database')
+				: $t('database.permission_denied_delete_database')}><DeleteIcon /></button
 		>
 	{/if}
 </nav>
--- a/src/routes/databases/[id]/configuration/destination.svelte
+++ b/src/routes/databases/[id]/configuration/destination.svelte
@@ -34,6 +34,7 @@
 	import { errorNotification } from '$lib/form';
 	import { goto } from '$app/navigation';
 	import { post } from '$lib/api';
+	import { t } from '$lib/translations';

 	const { id } = $page.params;
 	const from = $page.url.searchParams.get('from');
@@ -52,12 +53,14 @@
 </script>

 <div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">Configure Destination</div>
+	<div class="mr-4 text-2xl tracking-tight">
+		{$t('application.configuration.configure_destination')}
+	</div>
 </div>
 <div class="flex justify-center">
 	{#if !destinations || destinations.length === 0}
 		<div class="flex-col">
-			<div class="pb-2">No configurable Destination found</div>
+			<div class="pb-2">{$t('application.configuration.no_configurable_destination')}</div>
 			<div class="flex justify-center">
 				<a href="/new/destination" sveltekit:prefetch class="add-icon bg-sky-600 hover:bg-sky-500">
 					<svg
--- a/src/routes/databases/[id]/configuration/type.svelte
+++ b/src/routes/databases/[id]/configuration/type.svelte
@@ -42,6 +42,7 @@
 	import Redis from '$lib/components/svg/databases/Redis.svelte';
 	import { goto } from '$app/navigation';
 	import { post } from '$lib/api';
+	import { t } from '$lib/translations';
 	async function handleSubmit(type) {
 		try {
 			await post(`/databases/${id}/configuration/type.json`, { type });
@@ -53,7 +54,7 @@
 </script>

 <div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">Select a Database type</div>
+	<div class="mr-4 text-2xl tracking-tight">{$t('database.select_database_type')}</div>
 </div>

 <div class="flex flex-wrap justify-center">
--- a/src/routes/databases/[id]/configuration/version.svelte
+++ b/src/routes/databases/[id]/configuration/version.svelte
@@ -31,6 +31,7 @@
 	import { enhance, errorNotification } from '$lib/form';
 	import { goto } from '$app/navigation';
 	import { post } from '$lib/api';
+	import { t } from '$lib/translations';

 	const { id } = $page.params;
 	const from = $page.url.searchParams.get('from');
@@ -47,7 +48,7 @@
 </script>

 <div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">Select a Database version</div>
+	<div class="mr-4 text-2xl tracking-tight">{$t('database.select_database_version')}</div>
 </div>

 <div class="flex flex-wrap justify-center">
--- a/src/routes/databases/index.svelte
+++ b/src/routes/databases/index.svelte
@@ -9,6 +9,7 @@
 	import { post } from '$lib/api';
 	import { goto } from '$app/navigation';
 	import { session } from '$app/stores';
+	import { t } from '$lib/translations';

 	async function newDatabase() {
 		const { id } = await post('/databases/new', {});
@@ -27,7 +28,7 @@
 </script>

 <div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">Databases</div>
+	<div class="mr-4 text-2xl tracking-tight">{$t('index.databases')}</div>
 	<div on:click={newDatabase} class="add-icon cursor-pointer bg-purple-600 hover:bg-purple-500">
 		<svg
 			class="w-6"
@@ -48,7 +49,7 @@
 <div class="flex flex-col flex-wrap justify-center">
 	{#if !databases || ownDatabases.length === 0}
 		<div class="flex-col">
-			<div class="text-center text-xl font-bold">No databases found</div>
+			<div class="text-center text-xl font-bold">{$t('database.no_databases_found')}</div>
 		</div>
 	{/if}
 	{#if ownDatabases.length > 0 || otherDatabases.length > 0}
@@ -78,7 +79,7 @@
 							{/if}
 							{#if !database.type}
 								<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
-									Configuration missing
+									{$t('application.configuration.configuration_missing')}
 								</div>
 							{/if}
 						</div>
--- a/src/routes/destinations/[id]/_FoundApp.svelte
+++ b/src/routes/destinations/[id]/_FoundApp.svelte
@@ -2,6 +2,7 @@
 	export let app;
 	import { onMount } from 'svelte';
 	import { page } from '$app/stores';
+	import { t } from '$lib/translations';
 	const { id } = $page.params;
 	let loading = true;
 	async function checkApp() {
@@ -58,20 +59,20 @@
 <div class="box-selection hover:border-transparent hover:bg-coolgray-200">
 	<div class="truncate pb-2 text-center text-xl font-bold">{app.domain}</div>
 	{#if loading}
-		<div class="w-full text-center font-bold">Loading...</div>
+		<div class="w-full text-center font-bold">{$t('forms.loading')}</div>
 	{:else if app.foundByDomain}
 		<div class="w-full bg-coolgray-200 text-xs">
-			<span class="text-red-500">Domain</span> already used for
+			{@html $t('forms.already_used_for', { type: 'Domains' })}
 			<span class="text-red-500">{app.foundName}</span>
 		</div>
 	{:else if app.foundByRepository}
 		<div class="w-full bg-coolgray-200 text-xs">
-			<span class="text-red-500">Repository</span> already used for
+			{@html $t('forms.already_used_for', { type: 'Repository' })}
 			<span class="text-red-500">{app.foundName}</span>
 		</div>
 	{:else}
 		<button class="bg-green-600 hover:bg-green-500 w-full" on:click={addToCoolify}
-			>Add to Coolify</button
+			>{$t('destination.add_to_coolify')}</button
 		>
 	{/if}
 </div>
--- a/src/routes/destinations/[id]/_LocalDocker.svelte
+++ b/src/routes/destinations/[id]/_LocalDocker.svelte
@@ -10,6 +10,7 @@
 	import { post } from '$lib/api';
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
 	import { onMount } from 'svelte';
+	import { t } from '$lib/translations';
 	const { id } = $page.params;
 	let cannotDisable = settings.fqdn && destination.engine === '/var/run/docker.sock';
 	let loading = false;
@@ -85,7 +86,7 @@
 	async function stopProxy() {
 		try {
 			await post(`/destinations/${id}/stop.json`, { engine: destination.engine });
-			return toast.push('Coolify Proxy stopped!');
+			return toast.push($t('destination.coolify_proxy_stopped'));
 		} catch ({ error }) {
 			return errorNotification(error);
 		}
@@ -93,19 +94,17 @@
 	async function startProxy() {
 		try {
 			await post(`/destinations/${id}/start.json`, { engine: destination.engine });
-			return toast.push('Coolify Proxy started!');
+			return toast.push($t('destination.coolify_proxy_started'));
 		} catch ({ error }) {
 			return errorNotification(error);
 		}
 	}
 	async function forceRestartProxy() {
-		const sure = confirm(
-			'Are you sure you want to restart the proxy? Everything will be reconfigured in ~10 secs.'
-		);
+		const sure = confirm($t('destination.confirm_restart_proxy'));
 		if (sure) {
 			try {
 				restarting = true;
-				toast.push('Coolify Proxy restarting...');
+				toast.push($t('destination.coolify_proxy_restarting'));
 				await post(`/destinations/${id}/restart.json`, {
 					engine: destination.engine,
 					fqdn: settings.fqdn
@@ -123,7 +122,7 @@

 <form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
 	<div class="flex space-x-1 pb-5">
-		<div class="title font-bold">Configuration</div>
+		<div class="title font-bold">{$t('forms.configuration')}</div>
 		{#if $session.isAdmin}
 			<button
 				type="submit"
@@ -131,13 +130,15 @@
 				class:bg-sky-600={!loading}
 				class:hover:bg-sky-500={!loading}
 				disabled={loading}
-				>{loading ? 'Saving...' : 'Save'}
+				>{loading ? $t('forms.saving') : $t('forms.save')}
 			</button>
 			<button
 				class={restarting ? '' : 'bg-red-600 hover:bg-red-500'}
 				disabled={restarting}
 				on:click|preventDefault={forceRestartProxy}
-				>{restarting ? 'Restarting... please wait...' : 'Force restart proxy'}</button
+				>{restarting
+					? $t('destination.restarting_please_wait')
+					: $t('destination.force_restart_proxy')}</button
 			>
 		{/if}
 		<!-- <button type="button" class="bg-coollabs hover:bg-coollabs-100" on:click={scanApps}
@@ -145,10 +146,10 @@
 			> -->
 	</div>
 	<div class="grid grid-cols-2 items-center px-10 ">
-		<label for="name" class="text-base font-bold text-stone-100">Name</label>
+		<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
 		<input
 			name="name"
-			placeholder="name"
+			placeholder={$t('forms.name')}
 			disabled={!$session.isAdmin}
 			readonly={!$session.isAdmin}
 			bind:value={destination.name}
@@ -156,13 +157,13 @@
 	</div>

 	<div class="grid grid-cols-2 items-center px-10">
-		<label for="engine" class="text-base font-bold text-stone-100">Engine</label>
+		<label for="engine" class="text-base font-bold text-stone-100">{$t('forms.engine')}</label>
 		<CopyPasswordField
 			id="engine"
 			readonly
 			disabled
 			name="engine"
-			placeholder="eg: /var/run/docker.sock"
+			placeholder="{$t('forms.eg')}: /var/run/docker.sock"
 			value={destination.engine}
 		/>
 	</div>
@@ -171,13 +172,13 @@
 			<input name="remoteEngine" type="checkbox" bind:checked={payload.remoteEngine} />
 		</div> -->
 	<div class="grid grid-cols-2 items-center px-10">
-		<label for="network" class="text-base font-bold text-stone-100">Network</label>
+		<label for="network" class="text-base font-bold text-stone-100">{$t('forms.network')}</label>
 		<CopyPasswordField
 			id="network"
 			readonly
 			disabled
 			name="network"
-			placeholder="default: coolify"
+			placeholder="{$t('forms.default')}: coolify"
 			value={destination.network}
 		/>
 	</div>
@@ -188,7 +189,7 @@
 				disabled={cannotDisable}
 				bind:setting={destination.isCoolifyProxyUsed}
 				on:click={changeProxySetting}
-				title="Use Coolify Proxy?"
+				title={$t('destination.use_coolify_proxy')}
 				description={`This will install a proxy on the destination to allow you to access your applications and services without any manual configuration. Databases will have their own proxy. <br><br>${
 					cannotDisable
 						? '<span class="font-bold text-white">You cannot disable this proxy as FQDN is configured for Coolify.</span>'
--- a/src/routes/destinations/[id]/_RemoteDocker.svelte
+++ b/src/routes/destinations/[id]/_RemoteDocker.svelte
@@ -11,6 +11,7 @@
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
 	import { onMount } from 'svelte';
 	import { generateRemoteEngine } from '$lib/components/common';
+	import { t } from '$lib/translations';
 	const { id } = $page.params;
 	let cannotDisable = settings.fqdn && destination.engine === '/var/run/docker.sock';
 	// let scannedApps = [];
@@ -90,7 +91,7 @@
 		try {
 			const engine = generateRemoteEngine(destination);
 			await post(`/destinations/${id}/stop.json`, { engine });
-			return toast.push('Coolify Proxy stopped!');
+			return toast.push($t('destination.coolify_proxy_stopped'));
 		} catch ({ error }) {
 			return errorNotification(error);
 		}
@@ -99,19 +100,17 @@
 		try {
 			const engine = generateRemoteEngine(destination);
 			await post(`/destinations/${id}/start.json`, { engine });
-			return toast.push('Coolify Proxy started!');
+			return toast.push($t('destination.coolify_proxy_started'));
 		} catch ({ error }) {
 			return errorNotification(error);
 		}
 	}
 	async function forceRestartProxy() {
-		const sure = confirm(
-			'Are you sure you want to restart the proxy? Everything will be reconfigured in ~10 secs.'
-		);
+		const sure = confirm($t('destination.confirm_restart_proxy'));
 		if (sure) {
 			try {
 				restarting = true;
-				toast.push('Coolify Proxy restarting...');
+				toast.push($t('destination.coolify_proxy_restarting'));
 				await post(`/destinations/${id}/restart.json`, {
 					engine: destination.engine,
 					fqdn: settings.fqdn
@@ -127,7 +126,7 @@

 <form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
 	<div class="flex space-x-1 pb-5">
-		<div class="title font-bold">Configuration</div>
+		<div class="title font-bold">{$t('forms.configuration')}</div>
 		{#if $session.isAdmin}
 			<button
 				type="submit"
@@ -135,13 +134,15 @@
 				class:bg-sky-600={!loading}
 				class:hover:bg-sky-500={!loading}
 				disabled={loading}
-				>{loading ? 'Saving...' : 'Save'}
+				>{loading ? $t('forms.saving') : $t('forms.save')}
 			</button>
 			<button
 				class={restarting ? '' : 'bg-red-600 hover:bg-red-500'}
 				disabled={restarting}
 				on:click|preventDefault={forceRestartProxy}
-				>{restarting ? 'Restarting... please wait...' : 'Force restart proxy'}</button
+				>{restarting
+					? $t('destination.restarting_please_wait')
+					: $t('destination.force_restart_proxy')}</button
 			>
 		{/if}
 		<!-- <button type="button" class="bg-coollabs hover:bg-coollabs-100" on:click={scanApps}
@@ -149,10 +150,10 @@
 			> -->
 	</div>
 	<div class="grid grid-cols-2 items-center px-10 ">
-		<label for="name" class="text-base font-bold text-stone-100">Name</label>
+		<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
 		<input
 			name="name"
-			placeholder="name"
+			placeholder={$t('forms.name')}
 			disabled={!$session.isAdmin}
 			readonly={!$session.isAdmin}
 			bind:value={destination.name}
@@ -160,13 +161,13 @@
 	</div>

 	<div class="grid grid-cols-2 items-center px-10">
-		<label for="engine" class="text-base font-bold text-stone-100">Engine</label>
+		<label for="engine" class="text-base font-bold text-stone-100">{$t('forms.engine')}</label>
 		<CopyPasswordField
 			id="engine"
 			readonly
 			disabled
 			name="engine"
-			placeholder="eg: /var/run/docker.sock"
+			placeholder="{$t('forms.eg')}: /var/run/docker.sock"
 			value={destination.engine}
 		/>
 	</div>
@@ -175,13 +176,13 @@
 			<input name="remoteEngine" type="checkbox" bind:checked={payload.remoteEngine} />
 		</div> -->
 	<div class="grid grid-cols-2 items-center px-10">
-		<label for="network" class="text-base font-bold text-stone-100">Network</label>
+		<label for="network" class="text-base font-bold text-stone-100">{$t('forms.network')}</label>
 		<CopyPasswordField
 			id="network"
 			readonly
 			disabled
 			name="network"
-			placeholder="default: coolify"
+			placeholder="{$t('forms.default')}: coolify"
 			value={destination.network}
 		/>
 	</div>
@@ -190,7 +191,7 @@
 			disabled={cannotDisable}
 			bind:setting={destination.isCoolifyProxyUsed}
 			on:click={changeProxySetting}
-			title="Use Coolify Proxy?"
+			title={$t('destination.use_coolify_proxy')}
 			description={`This will install a proxy on the destination to allow you to access your applications and services without any manual configuration. Databases will have their own proxy. <br><br>${
 				cannotDisable
 					? '<span class="font-bold text-white">You cannot disable this proxy as FQDN is configured for Coolify.</span>'
--- a/src/routes/destinations/[id]/__layout.svelte
+++ b/src/routes/destinations/[id]/__layout.svelte
@@ -37,10 +37,11 @@
 	import DeleteIcon from '$lib/components/DeleteIcon.svelte';
 	import { del } from '$lib/api';
 	import { goto } from '$app/navigation';
+	import { t } from '$lib/translations';

 	export let destination;
 	async function deleteDestination(destination) {
-		const sure = confirm(`Are you sure you would like to delete '${destination.name}'?`);
+		const sure = confirm($t('application.confirm_to_delete', { name: destination.name }));
 		if (sure) {
 			try {
 				await del(`/destinations/${destination.id}.json`, { id: destination.id });
@@ -55,14 +56,14 @@
 <nav class="nav-side">
 	<button
 		on:click={() => deleteDestination(destination)}
-		title="Delete Destination"
+		title={$t('destination.delete_destination')}
 		type="submit"
 		disabled={!$session.isAdmin}
 		class:hover:text-red-500={$session.isAdmin}
 		class="icons tooltip-bottom bg-transparent text-sm"
 		data-tooltip={$session.isAdmin
-			? 'Delete Destination'
-			: 'You do not have permission to delete this destination'}><DeleteIcon /></button
+			? $t('destination.delete_destination')
+			: $t('destination.permission_denied_delete_destination')}><DeleteIcon /></button
 	>
 </nav>
 <slot />
--- a/src/routes/destinations/[id]/index.svelte
+++ b/src/routes/destinations/[id]/index.svelte
@@ -36,10 +36,11 @@
 	import type Prisma from '@prisma/client';
 	import LocalDocker from './_LocalDocker.svelte';
 	import RemoteDocker from './_RemoteDocker.svelte';
+	import { t } from '$lib/translations';
 </script>

 <div class="flex space-x-1 p-6 text-2xl font-bold">
-	<div class="tracking-tight">Destination</div>
+	<div class="tracking-tight">{$t('application.destination')}</div>
 	<span class="arrow-right-applications px-1">></span>
 	<span class="pr-2">{destination.name}</span>
 </div>
--- a/src/routes/destinations/index.svelte
+++ b/src/routes/destinations/index.svelte
@@ -23,6 +23,8 @@
 	import type Prisma from '@prisma/client';

 	import { session } from '$app/stores';
+	import { t } from '$lib/translations';
+
 	export let destinations: Prisma.DestinationDocker[];
 	const ownDestinations = destinations.filter((destination) => {
 		if (destination.teams[0].id === $session.teamId) {
@@ -37,7 +39,7 @@
 </script>

 <div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">Destinations</div>
+	<div class="mr-4 text-2xl tracking-tight">{$t('index.destinations')}</div>
 	{#if $session.isAdmin}
 		<a href="/new/destination" class="add-icon bg-sky-600 hover:bg-sky-500">
 			<svg
@@ -59,7 +61,7 @@
 <div class="flex justify-center">
 	{#if !destinations || ownDestinations.length === 0}
 		<div class="flex-col">
-			<div class="text-center text-xl font-bold">No destination found</div>
+			<div class="text-center text-xl font-bold">{$t('destination.no_destination_found')}</div>
 		</div>
 	{/if}
 	{#if ownDestinations.length > 0 || otherDestinations.length > 0}
--- a/src/routes/iam/index.svelte
+++ b/src/routes/iam/index.svelte
@@ -85,6 +85,21 @@

 <div class="flex space-x-1 p-6 font-bold">
 	<div class="mr-4 text-2xl tracking-tight">Identity and Access Management</div>
+	<a href="/new/team" class="add-icon cursor-pointer bg-fuchsia-600 hover:bg-fuchsia-500">
+		<svg
+			class="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>
 </div>

 {#if invitations.length > 0}
@@ -134,14 +149,14 @@
 						<td class="flex space-x-2">
 							<form on:submit|preventDefault={() => resetPassword(account.id)}>
 								<button
-									class="mx-auto my-4 w-32 bg-coollabs hover:bg-coollabs-100 disabled:bg-coolgray-200"
+									class="mx-auto my-4 w-32 bg-fuchsia-600 hover:bg-fuchsia-500 disabled:bg-coolgray-200"
 									>Reset Password</button
 								>
 							</form>
 							<form on:submit|preventDefault={() => deleteUser(account.id)}>
 								<button
 									disabled={account.id === $session.userId}
-									class="mx-auto my-4 w-32 bg-coollabs hover:bg-coollabs-100 disabled:bg-coolgray-200"
+									class="mx-auto my-4 w-32 bg-red-600 hover:bg-red-500 disabled:bg-coolgray-200"
 									type="submit">Delete User</button
 								>
 							</form>
@@ -162,7 +177,7 @@
 					<a href="/iam/team/{team.id}" class="w-96 p-2 no-underline">
 						<div
 							class="box-selection relative"
-							class:hover:bg-cyan-600={team.id !== '0'}
+							class:hover:bg-fuchsia-600={team.id !== '0'}
 							class:hover:bg-red-500={team.id === '0'}
 						>
 							<div class="truncate text-center text-xl font-bold">
@@ -186,7 +201,7 @@
 						<a href="/iam/team/{team.id}" class="w-96 p-2 no-underline">
 							<div
 								class="box-selection relative"
-								class:hover:bg-cyan-600={team.id !== '0'}
+								class:hover:bg-fuchsia-600={team.id !== '0'}
 								class:hover:bg-red-500={team.id === '0'}
 							>
 								<div class="truncate text-center text-xl font-bold">
--- a/src/routes/iam/team/[id]/index.svelte
+++ b/src/routes/iam/team/[id]/index.svelte
@@ -27,6 +27,7 @@
 	import Explainer from '$lib/components/Explainer.svelte';
 	import { errorNotification } from '$lib/form';
 	import { post } from '$lib/api';
+	import { t } from '$lib/translations';
 	const { id } = $page.params;
 	let invitation = {
 		teamName: team.name,
@@ -94,25 +95,22 @@
 </script>

 <div class="flex space-x-1 p-6 px-6 text-2xl font-bold">
-	<div class="tracking-tight">Team</div>
-	<span class="arrow-right-applications px-1 text-cyan-500">></span>
+	<div class="tracking-tight">{$t('index.team')}</div>
+	<span class="arrow-right-applications px-1 text-fuchsia-500">></span>
 	<span class="pr-2">{team.name}</span>
 </div>
 <div class="mx-auto max-w-4xl px-6">
 	<form on:submit|preventDefault={handleSubmit} class=" py-4">
 		<div class="flex space-x-1 pb-5">
-			<div class="title font-bold">Settings</div>
-			<button class="bg-cyan-600 hover:bg-cyan-500" type="submit">Save</button>
+			<div class="title font-bold">{$t('index.settings')}</div>
+			<button class="bg-fuchsia-600 hover:bg-fuchsia-500" type="submit">{$t('forms.save')}</button>
 		</div>
 		<div class="grid grid-flow-row gap-2 px-10">
 			<div class="mt-2 grid grid-cols-2">
 				<div class="flex-col">
-					<label for="name" class="text-base font-bold text-stone-100">Name</label>
+					<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
 					{#if team.id === '0'}
-						<Explainer
-							customClass="w-full"
-							text="This is the <span class='text-red-500 font-bold'>root</span> team. That means members of this group can manage instance wide settings and have all the priviliges in Coolify (imagine like root user on Linux)."
-						/>
+						<Explainer customClass="w-full" text={$t('team.root_team_explainer')} />
 					{/if}
 				</div>
 				<input id="name" name="name" placeholder="name" bind:value={team.name} />
@@ -121,22 +119,23 @@
 	</form>

 	<div class="flex space-x-1 py-5 pt-10 font-bold">
-		<div class="title">Members</div>
+		<div class="title">{$t('team.members')}</div>
 	</div>
 	<div class="px-4 sm:px-6">
 		<table class="w-full border-separate text-left">
 			<thead>
 				<tr class="h-8 border-b border-coolgray-400">
-					<th scope="col">Email</th>
-					<th scope="col">Permission</th>
-					<th scope="col" class="text-center">Actions</th>
+					<th scope="col">{$t('forms.email')}</th>
+					<th scope="col">{$t('team.permission')}</th>
+					<th scope="col" class="text-center">{$t('forms.action')}</th>
 				</tr>
 			</thead>
 			{#each permissions as permission}
 				<tr class="text-xs">
 					<td class="py-4"
 						>{permission.user.email}
-						<span class="font-bold">{permission.user.id === $session.userId ? '(You)' : ''}</span
+						<span class="font-bold"
+							>{permission.user.id === $session.userId ? $t('team.you') : ''}</span
 						></td
 					>
 					<td class="py-4">{permission.permission}</td>
@@ -144,17 +143,21 @@
 						<td class="flex flex-col items-center justify-center space-y-2 py-4 text-center">
 							<button
 								class="w-52 bg-red-600 hover:bg-red-500"
-								on:click={() => removeFromTeam(permission.user.id)}>Remove</button
+								on:click={() => removeFromTeam(permission.user.id)}>{$t('forms.remove')}</button
 							>
 							<button
 								class="w-52"
 								on:click={() =>
 									changePermission(permission.user.id, permission.id, permission.permission)}
-								>Promote to {permission.permission === 'admin' ? 'read' : 'admin'}</button
+								>{$t('team.promote_to', {
+									grade: permission.permission === 'admin' ? 'read' : 'admin'
+								})}</button
 							>
 						</td>
 					{:else}
-						<td class="text-center py-4 flex-col space-y-2"> No actions available </td>
+						<td class="text-center py-4 flex-col space-y-2">
+							{$t('forms.no_actions_available')}
+						</td>
 					{/if}
 				</tr>
 			{/each}
@@ -167,11 +170,12 @@
 						<td class="flex-col space-y-2 py-4 text-center">
 							<button
 								class="w-52 bg-red-600 hover:bg-red-500"
-								on:click={() => revokeInvitation(invitation.id)}>Revoke invitation</button
+								on:click={() => revokeInvitation(invitation.id)}
+								>{$t('team.revoke_invitation')}</button
 							>
 						</td>
 					{:else}
-						<td class="text-center py-4 flex-col space-y-2">Pending invitation</td>
+						<td class="text-center py-4 flex-col space-y-2">{$t('team.pending_invitation')}</td>
 					{/if}
 				</tr>
 			{/each}
@@ -181,18 +185,18 @@
 		<form on:submit|preventDefault={sendInvitation} class="py-5 pt-10">
 			<div class="flex space-x-1">
 				<div class="flex space-x-1">
-					<div class="title font-bold">Invite new member</div>
-					<button class="bg-cyan-600 hover:bg-cyan-500" type="submit">Send invitation</button>
+					<div class="title font-bold">{$t('team.invite_new_member')}</div>
+					<button class="bg-fuchsia-600 hover:bg-fuchsia-500" type="submit"
+						>{$t('team.send_invitation')}</button
+					>
 				</div>
 			</div>
-			<Explainer
-				text="You can only invite registered users at the moment - will be extended soon."
-			/>
+			<Explainer text={$t('team.invite_only_register_explainer')} />
 			<div class="flex-col space-y-2 px-4 pt-5 sm:px-6">
 				<div class="flex space-x-0">
 					<input
 						bind:value={invitation.email}
-						placeholder="Email address"
+						placeholder={$t('forms.email')}
 						class="mr-2 w-full"
 						required
 					/>
@@ -202,14 +206,14 @@
 						class="rounded-none rounded-l border border-dashed border-transparent"
 						type="button"
 						class:border-coolgray-300={invitation.permission !== 'read'}
-						class:bg-pink-500={invitation.permission === 'read'}>Read</button
+						class:bg-fuchsia-500={invitation.permission === 'read'}>{$t('team.read')}</button
 					>
 					<button
 						on:click={() => (invitation.permission = 'admin')}
 						class="rounded-none rounded-r border border-dashed border-transparent"
 						type="button"
 						class:border-coolgray-300={invitation.permission !== 'admin'}
-						class:bg-red-500={invitation.permission === 'admin'}>Admin</button
+						class:bg-red-500={invitation.permission === 'admin'}>{$t('team.admin')}</button
 					>
 				</div>
 			</div>
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -20,6 +20,8 @@
 </script>

 <script lang="ts">
+	import { t } from '$lib/translations';
+
 	export let applicationsCount: number;
 	export let sourcesCount: number;
 	export let destinationsCount: number;
@@ -29,7 +31,7 @@
 </script>

 <div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">Dashboard</div>
+	<div class="mr-4 text-2xl tracking-tight">{$t('index.dashboard')}</div>
 </div>

 <div class="mt-10 pb-12 tracking-tight sm:pb-16">
@@ -44,7 +46,7 @@
 						class="flex cursor-pointer flex-col rounded p-6 text-center text-green-500 no-underline transition duration-150 hover:bg-green-500 hover:text-white"
 					>
 						<dt class="order-2 mt-2 text-sm font-bold uppercase leading-6 text-white">
-							Applications
+							{$t('index.applications')}
 						</dt>
 						<dd class="order-1 text-5xl font-extrabold ">
 							{applicationsCount}
@@ -56,7 +58,7 @@
 						class="flex cursor-pointer flex-col rounded p-6 text-center text-sky-500 no-underline transition duration-150 hover:bg-sky-500 hover:text-white"
 					>
 						<dt class="order-2 mt-2 text-sm font-bold uppercase leading-6 text-white">
-							Destinations
+							{$t('index.destinations')}
 						</dt>
 						<dd class="order-1 text-5xl font-extrabold ">
 							{destinationsCount}
@@ -68,7 +70,7 @@
 						class="flex cursor-pointer flex-col rounded p-6 text-center text-orange-500 no-underline transition duration-150 hover:bg-orange-500 hover:text-white"
 					>
 						<dt class="order-2 mt-2 text-sm font-bold uppercase leading-6 text-white">
-							Git Sources
+							{$t('index.git_sources')}
 						</dt>
 						<dd class="order-1 text-5xl font-extrabold ">
 							{sourcesCount}
@@ -79,7 +81,9 @@
 						sveltekit:prefetch
 						class="flex cursor-pointer flex-col rounded p-6 text-center text-purple-500 no-underline transition duration-150 hover:bg-purple-500 hover:text-white"
 					>
-						<dt class="order-2 mt-2 text-sm font-bold uppercase leading-6 text-white">Databases</dt>
+						<dt class="order-2 mt-2 text-sm font-bold uppercase leading-6 text-white">
+							{$t('index.databases')}
+						</dt>
 						<dd class="order-1 text-5xl font-extrabold ">{databasesCount}</dd>
 					</a>
 					<a
@@ -87,7 +91,9 @@
 						sveltekit:prefetch
 						class="flex cursor-pointer flex-col rounded p-6 text-center text-pink-500 no-underline transition duration-150 hover:bg-pink-500 hover:text-white"
 					>
-						<dt class="order-2 mt-2 text-sm font-bold uppercase leading-6 text-white">Services</dt>
+						<dt class="order-2 mt-2 text-sm font-bold uppercase leading-6 text-white">
+							{$t('index.services')}
+						</dt>
 						<dd class="order-1 text-5xl font-extrabold ">{servicesCount}</dd>
 					</a>

@@ -96,7 +102,9 @@
 						sveltekit:prefetch
 						class="flex cursor-pointer flex-col rounded p-6 text-center text-cyan-500 no-underline transition duration-150 hover:bg-cyan-500 hover:text-white"
 					>
-						<dt class="order-2 mt-2 text-sm font-bold uppercase leading-6 text-white">Teams</dt>
+						<dt class="order-2 mt-2 text-sm font-bold uppercase leading-6 text-white">
+							{$t('index.teams')}
+						</dt>
 						<dd class="order-1 text-5xl font-extrabold ">
 							{teamsCount}
 						</dd>
--- a/src/routes/login/index.svelte
+++ b/src/routes/login/index.svelte
@@ -4,6 +4,7 @@
 	import { session } from '$app/stores';
 	import { post } from '$lib/api';
 	import { errorNotification } from '$lib/form';
+	import { t } from '$lib/translations';
 	import { onMount } from 'svelte';
 	let loading = false;
 	let emailEl;
@@ -37,9 +38,13 @@
 	}
 </script>

+<svelt:head>
+	<title>{$t('login.login')}</title>
+</svelt:head>
+
 <div class="flex h-screen flex-col items-center justify-center">
 	{#if $session.userId}
-		<div class="flex justify-center px-4 text-xl font-bold">Already logged in...</div>
+		<div class="flex justify-center px-4 text-xl font-bold">{$t('login.already_logged_in')}</div>
 	{:else}
 		<div class="flex justify-center px-4">
 			<form on:submit|preventDefault={handleSubmit} class="flex flex-col py-4 space-y-2">
@@ -55,7 +60,7 @@
 				<input
 					type="email"
 					name="email"
-					placeholder="Email"
+					placeholder={$t('forms.email')}
 					autocomplete="off"
 					required
 					bind:this={emailEl}
@@ -64,7 +69,7 @@
 				<input
 					type="password"
 					name="password"
-					placeholder="Password"
+					placeholder={$t('forms.password')}
 					bind:value={password}
 					required
 				/>
@@ -76,12 +81,14 @@
 						class="hover:opacity-90 text-white"
 						class:bg-transparent={loading}
 						class:text-stone-600={loading}
-						class:bg-coollabs={!loading}>{loading ? 'Authenticating...' : 'Login'}</button
+						class:bg-coollabs={!loading}
+						>{loading ? $t('login.authenticating') : $t('login.login')}</button
 					>

 					<button
 						on:click|preventDefault={() => goto('/register')}
-						class="bg-transparent hover:bg-coolgray-300	text-white ">Register</button
+						class="bg-transparent hover:bg-coolgray-300	text-white "
+						>{$t('register.register')}</button
 					>
 				</div>
 			</form>
--- a/src/routes/new/destination/_LocalDocker.svelte
+++ b/src/routes/new/destination/_LocalDocker.svelte
@@ -7,6 +7,7 @@
 	import { post } from '$lib/api';
 	import Setting from '$lib/components/Setting.svelte';
 	import { errorNotification } from '$lib/form';
+	import { t } from '$lib/translations';

 	let loading = false;

@@ -28,7 +29,7 @@
 <div class="flex justify-center px-6 pb-8">
 	<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
 		<div class="flex items-center space-x-2 pb-5">
-			<div class="title font-bold">Configuration</div>
+			<div class="title font-bold">{$t('forms.configuration')}</div>
 			<button
 				type="submit"
 				class:bg-sky-600={!loading}
@@ -36,36 +37,41 @@
 				disabled={loading}
 				>{loading
 					? payload.isCoolifyProxyUsed
-						? 'Saving and configuring proxy...'
-						: 'Saving...'
-					: 'Save'}</button
+						? $t('destination.new.saving_and_configuring_proxy')
+						: $t('forms.saving')
+					: $t('forms.save')}</button
 			>
 		</div>
 		<div class="mt-2 grid grid-cols-2 items-center px-10">
-			<label for="name" class="text-base font-bold text-stone-100">Name</label>
-			<input required name="name" placeholder="name" bind:value={payload.name} />
+			<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
+			<input required name="name" placeholder={$t('forms.name')} bind:value={payload.name} />
 		</div>

 		<div class="grid grid-cols-2 items-center px-10">
-			<label for="engine" class="text-base font-bold text-stone-100">Engine</label>
+			<label for="engine" class="text-base font-bold text-stone-100">{$t('forms.engine')}</label>
 			<input
 				required
 				name="engine"
-				placeholder="eg: /var/run/docker.sock"
+				placeholder="{$t('forms.eg')}: /var/run/docker.sock"
 				bind:value={payload.engine}
 			/>
 		</div>
 		<div class="grid grid-cols-2 items-center px-10">
-			<label for="network" class="text-base font-bold text-stone-100">Network</label>
-			<input required name="network" placeholder="default: coolify" bind:value={payload.network} />
+			<label for="network" class="text-base font-bold text-stone-100">{$t('forms.network')}</label>
+			<input
+				required
+				name="network"
+				placeholder="{$t('forms.default')}: coolify"
+				bind:value={payload.network}
+			/>
 		</div>
 		{#if $session.teamId === '0'}
 			<div class="grid grid-cols-2 items-center">
 				<Setting
 					bind:setting={payload.isCoolifyProxyUsed}
 					on:click={() => (payload.isCoolifyProxyUsed = !payload.isCoolifyProxyUsed)}
-					title="Use Coolify Proxy?"
-					description="This will install a proxy on the destination to allow you to access your applications and services without any manual configuration (recommended for Docker).<br><br>Databases will have their own proxy."
+					title={$t('destination.use_coolify_proxy')}
+					description={$t('destination.new.install_proxy')}
 				/>
 			</div>
 		{/if}
--- a/src/routes/new/destination/_RemoteDocker.svelte
+++ b/src/routes/new/destination/_RemoteDocker.svelte
@@ -7,6 +7,7 @@
 	import Explainer from '$lib/components/Explainer.svelte';
 	import Setting from '$lib/components/Setting.svelte';
 	import { errorNotification } from '$lib/form';
+	import { t } from '$lib/translations';

 	let loading = false;

@@ -25,7 +26,7 @@
 <div class="flex justify-center px-6 pb-8">
 	<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
 		<div class="flex items-center space-x-2 pb-5">
-			<div class="title font-bold">Configuration</div>
+			<div class="title font-bold">{$t('forms.configuration')}</div>
 			<button
 				type="submit"
 				class:bg-sky-600={!loading}
@@ -33,57 +34,66 @@
 				disabled={loading}
 				>{loading
 					? payload.isCoolifyProxyUsed
-						? 'Saving and configuring proxy...'
-						: 'Saving...'
-					: 'Save'}</button
+						? $t('destination.new.saving_and_configuring_proxy')
+						: $t('forms.saving')
+					: $t('forms.save')}</button
 			>
 		</div>
 		<div class="mt-2 grid grid-cols-2 items-center px-10">
-			<label for="name" class="text-base font-bold text-stone-100">Name</label>
-			<input required name="name" placeholder="name" bind:value={payload.name} />
+			<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
+			<input required name="name" placeholder={$t('forms.name')} bind:value={payload.name} />
 		</div>

 		<div class="grid grid-cols-2 items-center px-10">
-			<label for="ipAddress" class="text-base font-bold text-stone-100">IP Address</label>
+			<label for="ipAddress" class="text-base font-bold text-stone-100"
+				>{$t('forms.ip_address')}</label
+			>
 			<input
 				required
 				name="ipAddress"
-				placeholder="eg: 192.168..."
+				placeholder="{$t('forms.eg')}: 192.168..."
 				bind:value={payload.ipAddress}
 			/>
 		</div>

 		<div class="grid grid-cols-2 items-center px-10">
-			<label for="user" class="text-base font-bold text-stone-100">User</label>
-			<input required name="user" placeholder="eg: root" bind:value={payload.user} />
+			<label for="user" class="text-base font-bold text-stone-100">{$t('forms.user')}</label>
+			<input required name="user" placeholder="{$t('forms.eg')}: root" bind:value={payload.user} />
 		</div>

 		<div class="grid grid-cols-2 items-center px-10">
-			<label for="port" class="text-base font-bold text-stone-100">Port</label>
-			<input required name="port" placeholder="eg: 22" bind:value={payload.port} />
+			<label for="port" class="text-base font-bold text-stone-100">{$t('forms.port')}</label>
+			<input required name="port" placeholder="{$t('forms.eg')}: 22" bind:value={payload.port} />
 		</div>
 		<div class="grid grid-cols-2 items-center px-10">
-			<label for="sshPrivateKey" class="text-base font-bold text-stone-100">SSH Private Key</label>
+			<label for="sshPrivateKey" class="text-base font-bold text-stone-100"
+				>{$t('forms.ssh_private_key')}</label
+			>
 			<textarea
 				rows="10"
 				class="resize-none"
 				required
 				name="sshPrivateKey"
-				placeholder="eg: -----BEGIN...."
+				placeholder="{$t('forms.eg')}: -----BEGIN...."
 				bind:value={payload.sshPrivateKey}
 			/>
 		</div>

 		<div class="grid grid-cols-2 items-center px-10">
-			<label for="network" class="text-base font-bold text-stone-100">Network</label>
-			<input required name="network" placeholder="default: coolify" bind:value={payload.network} />
+			<label for="network" class="text-base font-bold text-stone-100">{$t('forms.network')}</label>
+			<input
+				required
+				name="network"
+				placeholder="{$t('forms.default')}: coolify"
+				bind:value={payload.network}
+			/>
 		</div>
 		<div class="grid grid-cols-2 items-center">
 			<Setting
 				bind:setting={payload.isCoolifyProxyUsed}
 				on:click={() => (payload.isCoolifyProxyUsed = !payload.isCoolifyProxyUsed)}
-				title="Use Coolify Proxy?"
-				description="This will install a proxy on the destination to allow you to access your applications and services without any manual configuration (recommended for Docker).<br><br>Databases will have their own proxy."
+				title={$t('destination.use_coolify_proxy')}
+				description={$t('destination.new.install_proxy')}
 			/>
 		</div>
 	</form>
--- a/src/routes/new/destination/check.json.ts
+++ b/src/routes/new/destination/check.json.ts
@@ -1,5 +1,6 @@
 import { getUserDetails } from '$lib/common';
 import { isDockerNetworkExists, ErrorHandler } from '$lib/database';
+import { t } from '$lib/translations';
 import type { RequestHandler } from '@sveltejs/kit';

 export const post: RequestHandler = async (event) => {
@@ -9,9 +10,10 @@ export const post: RequestHandler = async (event) => {
 	const { network } = await event.request.json();
 	try {
 		const found = await isDockerNetworkExists({ network });
+
 		if (found) {
 			throw {
-				error: `Network ${network} already configured for another team!`
+				error: t.get('destination.new_error_network_already_exists', { network: network })
 			};
 		}
 		return {
--- a/src/routes/new/destination/index.svelte
+++ b/src/routes/new/destination/index.svelte
@@ -2,6 +2,7 @@
 	import LocalDocker from './_LocalDocker.svelte';
 	import cuid from 'cuid';
 	import RemoteDocker from './_RemoteDocker.svelte';
+	import { t } from '$lib/translations';
 	let payload = {};
 	let selected = 'localDocker';

@@ -10,7 +11,7 @@
 		switch (type) {
 			case 'localDocker':
 				payload = {
-					name: 'Local Docker',
+					name: t.get('sources.local_docker'),
 					engine: '/var/run/docker.sock',
 					remoteEngine: false,
 					network: cuid(),
@@ -19,7 +20,7 @@
 				break;
 			case 'remoteDocker':
 				payload = {
-					name: 'Remote Docker',
+					name: $t('sources.remote_docker'),
 					remoteEngine: true,
 					ipAddress: null,
 					user: 'root',
@@ -36,12 +37,14 @@
 </script>

 <div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">Add New Destination</div>
+	<div class="mr-4 text-2xl tracking-tight">{$t('destination.new.add_new_destination')}</div>
 </div>
 <div class="flex-col space-y-2 pb-10 text-center">
-	<div class="text-xl font-bold text-white">Predefined destinations</div>
+	<div class="text-xl font-bold text-white">{$t('destination.new.predefined_destinations')}</div>
 	<div class="flex justify-center space-x-2">
-		<button class="w-32" on:click={() => setPredefined('localDocker')}>Local Docker</button>
+		<button class="w-32" on:click={() => setPredefined('localDocker')}
+			>{$t('sources.local_docker')}</button
+		>
 		<!-- <button class="w-32" on:click={() => setPredefined('remoteDocker')}>Remote Docker</button> -->
 		<button class="w-32" on:click={() => setPredefined('kubernetes')}>Kubernetes</button>
 	</div>
@@ -51,5 +54,5 @@
 {:else if selected === 'remoteDocker'}
 	<RemoteDocker {payload} />
 {:else}
-	<div class="text-center font-bold text-4xl py-10">Not implemented yet</div>
+	<div class="text-center font-bold text-4xl py-10">{$t('index.not_implemented_yet')}</div>
 {/if}
--- a/src/routes/new/team/index.svelte
+++ b/src/routes/new/team/index.svelte
@@ -34,7 +34,7 @@
 		if (name) {
 			try {
 				const { id } = await post('/new/team.json', { name });
-				return await goto(`/teams/${id}`);
+				return await goto(`/iam/team/${id}`);
 			} catch ({ error }) {
 				return errorNotification(error);
 			}
@@ -50,7 +50,7 @@
 	<form on:submit|preventDefault={handleSubmit}>
 		<div class="flex flex-col items-center space-y-4">
 			<input name="name" placeholder="Team name" required bind:this={autofocus} bind:value={name} />
-			<button type="submit" class="bg-green-600 hover:bg-green-500">Save</button>
+			<button type="submit" class="bg-fuchsia-600 hover:bg-fuchsia-500">Save</button>
 		</div>
 	</form>
 </div>
--- a/src/routes/register/index.svelte
+++ b/src/routes/register/index.svelte
@@ -6,6 +6,7 @@
 	import { session } from '$app/stores';
 	import { post } from '$lib/api';
 	import { errorNotification } from '$lib/form';
+	import { t } from '$lib/translations';
 	import { onMount } from 'svelte';

 	let loading = false;
@@ -23,7 +24,7 @@
 		if (loading) return;

 		if (password !== passwordCheck) {
-			return errorNotification('Passwords do not match.');
+			return errorNotification($t('forms.passwords_not_match'));
 		}
 		loading = true;
 		try {
@@ -60,7 +61,7 @@
 </div>
 <div class="flex h-screen flex-col items-center justify-center">
 	{#if $session.userId}
-		<div class="flex justify-center px-4 text-xl font-bold">Already logged in...</div>
+		<div class="flex justify-center px-4 text-xl font-bold">{$t('login.already_logged_in')}</div>
 	{:else}
 		<div class="flex justify-center px-4">
 			<form on:submit|preventDefault={handleSubmit} class="flex flex-col py-4 space-y-2">
@@ -76,7 +77,7 @@
 				<input
 					type="email"
 					name="email"
-					placeholder="Email"
+					placeholder={$t('forms.email')}
 					autocomplete="off"
 					required
 					bind:this={emailEl}
@@ -85,14 +86,14 @@
 				<input
 					type="password"
 					name="password"
-					placeholder="Password"
+					placeholder={$t('forms.password')}
 					bind:value={password}
 					required
 				/>
 				<input
 					type="password"
 					name="passwordCheck"
-					placeholder="Password again"
+					placeholder={$t('forms.password_again')}
 					bind:value={passwordCheck}
 					required
 				/>
@@ -104,17 +105,15 @@
 						disabled={loading}
 						class:bg-transparent={loading}
 						class:text-stone-600={loading}
-						class:bg-coollabs={!loading}>{loading ? 'Registering...' : 'Register'}</button
+						class:bg-coollabs={!loading}
+						>{loading ? $t('register.registering') : $t('register.register')}</button
 					>
 				</div>
 			</form>
 		</div>
 		{#if userCount === 0}
 			<div class="pt-5">
-				You are registering the first user. It will be the administrator of your Coolify instance.
-				<br />
-				It will take a while, because Coolify will configure itself, the proxy and other docker related
-				stuff.
+				{$t('register.first_user')}
 			</div>
 		{/if}
 	{/if}
--- a/src/routes/services/[id]/_Services/_Ghost.svelte
+++ b/src/routes/services/[id]/_Services/_Ghost.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
+	import { t } from '$lib/translations';
 	export let readOnly;
 	export let service;
 </script>
@@ -8,19 +9,19 @@
 	<div class="title">Ghost</div>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="email">Default Email Address</label>
+	<label for="email">{$t('forms.default_email_address')}</label>
 	<input
 		name="email"
 		id="email"
 		disabled
 		readonly
-		placeholder="Email address"
+		placeholder={$t('forms.email')}
 		value={service.ghost.defaultEmail}
 		required
 	/>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="defaultPassword">Default Password</label>
+	<label for="defaultPassword">{$t('forms.default_password')}</label>
 	<CopyPasswordField
 		id="defaultPassword"
 		isPasswordField
@@ -34,7 +35,7 @@
 	<div class="title">MariaDB</div>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="mariadbUser">Username</label>
+	<label for="mariadbUser">{$t('forms.username')}</label>
 	<CopyPasswordField
 		name="mariadbUser"
 		id="mariadbUser"
@@ -44,7 +45,7 @@
 	/>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="mariadbPassword">Password</label>
+	<label for="mariadbPassword">{$t('forms.password')}</label>
 	<CopyPasswordField
 		id="mariadbPassword"
 		isPasswordField
@@ -55,7 +56,7 @@
 	/>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="mariadbDatabase">Database</label>
+	<label for="mariadbDatabase">{$t('index.database')}</label>
 	<input
 		name="mariadbDatabase"
 		id="mariadbDatabase"
@@ -63,11 +64,11 @@
 		readonly={readOnly}
 		disabled={readOnly}
 		bind:value={service.ghost.mariadbDatabase}
-		placeholder="eg: ghost_db"
+		placeholder="{$t('forms.eg')}: ghost_db"
 	/>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="mariadbRootUser">Root DB User</label>
+	<label for="mariadbRootUser">{$t('forms.root_db_user')}</label>
 	<CopyPasswordField
 		id="mariadbRootUser"
 		isPasswordField
@@ -78,7 +79,7 @@
 	/>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="mariadbRootUserPassword">Root DB Password</label>
+	<label for="mariadbRootUserPassword">{$t('forms.root_db_password')}</label>
 	<CopyPasswordField
 		id="mariadbRootUserPassword"
 		isPasswordField
--- a/src/routes/services/[id]/_Services/_MeiliSearch.svelte
+++ b/src/routes/services/[id]/_Services/_MeiliSearch.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
+	import { t } from '$lib/translations';
 	export let service;
 </script>

@@ -7,7 +8,7 @@
 	<div class="title">MeiliSearch</div>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="masterKey">Admin API key</label>
+	<label for="masterKey">{$t('forms.admin_api_key')}</label>
 	<CopyPasswordField
 		id="masterKey"
 		isPasswordField
--- a/src/routes/services/[id]/_Services/_MinIO.svelte
+++ b/src/routes/services/[id]/_Services/_MinIO.svelte
@@ -1,25 +1,26 @@
 <script lang="ts">
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
+	import { t } from '$lib/translations';

 	export let service;
 </script>

 <div class="flex space-x-1 py-5 font-bold">
-	<div class="title">MinIO Server</div>
+	<div class="title">MinIO</div>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="rootUser">Root User</label>
+	<label for="rootUser">{$t('forms.root_user')}</label>
 	<input
 		name="rootUser"
 		id="rootUser"
-		placeholder="User to login"
+		placeholder={$t('forms.username')}
 		value={service.minio.rootUser}
 		disabled
 		readonly
 	/>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="rootUserPassword">Root's Password</label>
+	<label for="rootUserPassword">{$t('forms.roots_password')}</label>
 	<CopyPasswordField
 		id="rootUserPassword"
 		isPasswordField
@@ -30,13 +31,13 @@
 	/>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="publicPort">API Port</label>
+	<label for="publicPort">{$t('forms.api_port')}</label>
 	<input
 		name="publicPort"
 		id="publicPort"
 		value={service.minio.publicPort}
 		disabled
 		readonly
-		placeholder="Generated automatically after start"
+		placeholder={$t('forms.generated_automatically_after_start')}
 	/>
 </div>
--- a/src/routes/services/[id]/_Services/_PlausibleAnalytics.svelte
+++ b/src/routes/services/[id]/_Services/_PlausibleAnalytics.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
+	import { t } from '$lib/translations';
 	export let service;
 	export let readOnly;
 </script>
@@ -8,31 +9,31 @@
 	<div class="title">Plausible Analytics</div>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="email">Email Address</label>
+	<label for="email">{$t('forms.email')}</label>
 	<input
 		name="email"
 		id="email"
 		disabled={readOnly}
 		readonly={readOnly}
-		placeholder="Email address"
+		placeholder={$t('forms.email')}
 		bind:value={service.plausibleAnalytics.email}
 		required
 	/>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="username">Username</label>
+	<label for="username">{$t('forms.username')}</label>
 	<CopyPasswordField
 		name="username"
 		id="username"
 		disabled={readOnly}
 		readonly={readOnly}
-		placeholder="User to login"
+		placeholder={$t('forms.username')}
 		bind:value={service.plausibleAnalytics.username}
 		required
 	/>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="password">Password</label>
+	<label for="password">{$t('forms.password')}</label>
 	<CopyPasswordField
 		id="password"
 		isPasswordField
@@ -46,7 +47,7 @@
 	<div class="title">PostgreSQL</div>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="postgresqlUser">Username</label>
+	<label for="postgresqlUser">{$t('forms.username')}</label>
 	<CopyPasswordField
 		name="postgresqlUser"
 		id="postgresqlUser"
@@ -56,7 +57,7 @@
 	/>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="postgresqlPassword">Password</label>
+	<label for="postgresqlPassword">{$t('forms.password')}</label>
 	<CopyPasswordField
 		id="postgresqlPassword"
 		isPasswordField
@@ -67,7 +68,7 @@
 	/>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="postgresqlDatabase">Database</label>
+	<label for="postgresqlDatabase">{$t('index.database')}</label>
 	<CopyPasswordField
 		name="postgresqlDatabase"
 		id="postgresqlDatabase"
@@ -80,7 +81,7 @@
 	<label for="postgresqlPublicPort">Public Port</label>
 	<div class="col-span-2 ">
 		<CopyPasswordField
-			placeholder="Generated automatically after start"
+			placeholder="{ $t('forms.generated_automatically_after_start') }"
 			readonly
 			disabled
 			id="postgresqlPublicPort"
--- a/src/routes/services/[id]/_Services/_Services.svelte
+++ b/src/routes/services/[id]/_Services/_Services.svelte
@@ -10,6 +10,7 @@
 	import Explainer from '$lib/components/Explainer.svelte';
 	import Setting from '$lib/components/Setting.svelte';
 	import { errorNotification } from '$lib/form';
+	import { t } from '$lib/translations';
 	import { toast } from '@zerodevx/svelte-toast';
 	import Ghost from './_Ghost.svelte';
 	import MeiliSearch from './_MeiliSearch.svelte';
@@ -40,7 +41,7 @@
 		loadingVerification = true;
 		try {
 			await post(`/services/${id}/${service.type}/activate.json`, { id: service.id });
-			toast.push('All email verified. You can login now.');
+			toast.push(t.get('services.all_email_verified'));
 		} catch ({ error }) {
 			return errorNotification(error);
 		} finally {
@@ -53,7 +54,7 @@
 				dualCerts = !dualCerts;
 			}
 			await post(`/services/${id}/settings.json`, { dualCerts });
-			return toast.push('Settings saved.');
+			return toast.push(t.get('application.settings_saved'));
 		} catch ({ error }) {
 			return errorNotification(error);
 		}
@@ -63,25 +64,27 @@
 <div class="mx-auto max-w-4xl px-6 pb-12">
 	<form on:submit|preventDefault={handleSubmit} class="py-4">
 		<div class="flex space-x-1 pb-5 font-bold">
-			<div class="title">General</div>
+			<div class="title">{$t('general')}</div>
 			{#if $session.isAdmin}
 				<button
 					type="submit"
 					class:bg-pink-600={!loading}
 					class:hover:bg-pink-500={!loading}
-					disabled={loading}>{loading ? 'Saving...' : 'Save'}</button
+					disabled={loading}>{loading ? $t('forms.saving') : $t('forms.save')}</button
 				>
 			{/if}
 			{#if service.type === 'plausibleanalytics' && isRunning}
 				<button on:click|preventDefault={setEmailsToVerified} disabled={loadingVerification}
-					>{loadingVerification ? 'Verifying' : 'Verify emails without SMTP'}</button
+					>{loadingVerification
+						? $t('forms.verifying')
+						: $t('forms.verify_emails_without_smtp')}</button
 				>
 			{/if}
 		</div>

 		<div class="grid grid-flow-row gap-2">
 			<div class="mt-2 grid grid-cols-2 items-center px-10">
-				<label for="name" class="text-base font-bold text-stone-100">Name</label>
+				<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
 				<div>
 					<input
 						readonly={!$session.isAdmin}
@@ -109,7 +112,9 @@
 				>
 			</div>
 			<div class="grid grid-cols-2 items-center px-10">
-				<label for="destination" class="text-base font-bold text-stone-100">Destination</label>
+				<label for="destination" class="text-base font-bold text-stone-100"
+					>{$t('application.destination')}</label
+				>
 				<div>
 					{#if service.destinationDockerId}
 						<div class="no-underline">
@@ -125,10 +130,10 @@
 			</div>
 			<div class="grid grid-cols-2 px-10">
 				<div class="flex-col ">
-					<label for="fqdn" class="pt-2 text-base font-bold text-stone-100">URL (FQDN)</label>
-					<Explainer
-						text="If you specify <span class='text-pink-600 font-bold'>https</span>, the application will be accessible only over https. SSL certificate will be generated for you.<br>If you specify <span class='text-pink-600 font-bold'>www</span>, the application will be redirected (302) from non-www and vice versa.<br><br>To modify the url, you must first stop the application."
-					/>
+					<label for="fqdn" class="pt-2 text-base font-bold text-stone-100"
+						>{$t('application.url_fqdn')}</label
+					>
+					<Explainer text={$t('application.https_explainer')} />
 				</div>

 				<CopyPasswordField
@@ -145,10 +150,10 @@
 			<div class="grid grid-cols-2 items-center px-10">
 				<Setting
 					disabled={isRunning}
-					dataTooltip="Must be stopped to modify."
+					dataTooltip={$t('forms.must_be_stopped_to_modify')}
 					bind:setting={dualCerts}
-					title="Generate SSL for www and non-www?"
-					description="It will generate certificates for both www and non-www. <br>You need to have <span class='font-bold text-pink-600'>both DNS entries</span> set in advance.<br><br>Service needs to be restarted."
+					title={$t('application.ssl_www_and_non_www')}
+					description={$t('services.generate_www_non_www_ssl')}
 					on:click={() => !isRunning && changeSettings('dualCerts')}
 				/>
 			</div>
--- a/src/routes/services/[id]/_Services/_VSCodeServer.svelte
+++ b/src/routes/services/[id]/_Services/_VSCodeServer.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
+	import { t } from '$lib/translations';

 	export let service;
 </script>
@@ -8,7 +9,7 @@
 	<div class="title">VSCode Server</div>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="password">Password</label>
+	<label for="password">{$t('forms.password')}</label>
 	<CopyPasswordField
 		id="password"
 		isPasswordField
--- a/src/routes/services/[id]/_Services/_Wordpress.svelte
+++ b/src/routes/services/[id]/_Services/_Wordpress.svelte
@@ -6,6 +6,7 @@
 	import { errorNotification } from '$lib/form';
 	import { browser } from '$app/env';
 	import { getDomain } from '$lib/components/common';
+	import { t } from '$lib/translations';

 	export let service;
 	export let isRunning;
@@ -60,7 +61,7 @@
 </div>

 <div class="grid grid-cols-2 items-center px-10">
-	<label for="extraConfig">Extra Config</label>
+	<label for="extraConfig">{$t('forms.extra_config')}</label>
 	<textarea
 		bind:value={service.wordpress.extraConfig}
 		disabled={isRunning}
@@ -70,7 +71,7 @@
 		name="extraConfig"
 		id="extraConfig"
 		placeholder={!isRunning
-			? `eg:
+			? `${$t('forms.eg')}:

 define('WP_ALLOW_MULTISITE', true);
 define('MULTISITE', true);
@@ -106,7 +107,7 @@ define('SUBDOMAIN_INSTALL', false);`
 	<div class="title">MySQL</div>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="mysqlDatabase">Database</label>
+	<label for="mysqlDatabase">{$t('index.database')}</label>
 	<input
 		name="mysqlDatabase"
 		id="mysqlDatabase"
@@ -114,22 +115,22 @@ define('SUBDOMAIN_INSTALL', false);`
 		readonly={readOnly}
 		disabled={readOnly}
 		bind:value={service.wordpress.mysqlDatabase}
-		placeholder="eg: wordpress_db"
+		placeholder="{$t('forms.eg')}: wordpress_db"
 	/>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="mysqlRootUser">Root User</label>
+	<label for="mysqlRootUser">{$t('forms.root_user')}</label>
 	<input
 		name="mysqlRootUser"
 		id="mysqlRootUser"
-		placeholder="MySQL Root User"
+		placeholder="MySQL {$t('forms.root_user')}"
 		value={service.wordpress.mysqlRootUser}
 		disabled
 		readonly
 	/>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="mysqlRootUserPassword">Root's Password</label>
+	<label for="mysqlRootUserPassword">{$t('forms.roots_password')}</label>
 	<CopyPasswordField
 		id="mysqlRootUserPassword"
 		isPasswordField
@@ -140,11 +141,11 @@ define('SUBDOMAIN_INSTALL', false);`
 	/>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="mysqlUser">User</label>
+	<label for="mysqlUser">{$t('forms.user')}</label>
 	<input name="mysqlUser" id="mysqlUser" value={service.wordpress.mysqlUser} disabled readonly />
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="mysqlPassword">Password</label>
+	<label for="mysqlPassword">{$t('forms.password')}</label>
 	<CopyPasswordField
 		id="mysqlPassword"
 		isPasswordField
--- a/src/routes/services/[id]/__layout.svelte
+++ b/src/routes/services/[id]/__layout.svelte
@@ -65,6 +65,7 @@
 	import Loading from '$lib/components/Loading.svelte';
 	import { del, post } from '$lib/api';
 	import { goto } from '$app/navigation';
+	import { t } from '$lib/translations';
 	const { id } = $page.params;

 	export let service;
@@ -73,7 +74,7 @@
 	let loading = false;

 	async function deleteService() {
-		const sure = confirm(`Are you sure you would like to delete '${service.name}'?`);
+		const sure = confirm($t('application.confirm_to_delete', { name: service.name }));
 		if (sure) {
 			loading = true;
 			try {
@@ -88,7 +89,7 @@
 		}
 	}
 	async function stopService() {
-		const sure = confirm(`Are you sure you would like to stop '${service.name}'?`);
+		const sure = confirm($t('database.confirm_stop', { name: service.name }));
 		if (sure) {
 			loading = true;
 			try {
@@ -122,13 +123,13 @@
 			{#if isRunning}
 				<button
 					on:click={stopService}
-					title="Stop Service"
+					title={$t('service.stop_service')}
 					type="submit"
 					disabled={!$session.isAdmin}
 					class="icons bg-transparent tooltip-bottom text-sm flex items-center space-x-2 text-red-500"
 					data-tooltip={$session.isAdmin
-						? 'Stop Service'
-						: 'You do not have permission to stop the service.'}
+						? $t('service.stop_service')
+						: $t('service.permission_denied_stop_service')}
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
@@ -148,13 +149,13 @@
 			{:else}
 				<button
 					on:click={startService}
-					title="Start Service"
+					title={$t('service.start_service')}
 					type="submit"
 					disabled={!$session.isAdmin}
 					class="icons bg-transparent tooltip-bottom text-sm flex items-center space-x-2 text-green-500"
 					data-tooltip={$session.isAdmin
-						? 'Start Service'
-						: 'You do not have permission to start the service.'}
+						? $t('service.start_service')
+						: $t('service.permission_denied_start_service')}
 					><svg
 						xmlns="http://www.w3.org/2000/svg"
 						class="w-6 h-6"
@@ -181,9 +182,9 @@
 				class:bg-coolgray-500={$page.url.pathname === `/services/${id}`}
 			>
 				<button
-					title="Configurations"
+					title={$t('application.configurations')}
 					class="icons bg-transparent tooltip-bottom text-sm disabled:text-red-500"
-					data-tooltip="Configurations"
+					data-tooltip={$t('application.configurations')}
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
@@ -216,9 +217,9 @@
 				class:bg-coolgray-500={$page.url.pathname === `/services/${id}/secrets`}
 			>
 				<button
-					title="Secrets"
+					title={$t('application.secret')}
 					class="icons bg-transparent tooltip-bottom text-sm disabled:text-red-500"
-					data-tooltip="Secrets"
+					data-tooltip={$t('application.secret')}
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
@@ -272,14 +273,14 @@
 		{/if}
 		<button
 			on:click={deleteService}
-			title="Delete Service"
+			title={$t('service.delete_service')}
 			type="submit"
 			disabled={!$session.isAdmin}
 			class:hover:text-red-500={$session.isAdmin}
 			class="icons bg-transparent tooltip-bottom text-sm"
 			data-tooltip={$session.isAdmin
-				? 'Delete Service'
-				: 'You do not have permission to delete a service.'}><DeleteIcon /></button
+				? $t('service.delete_service')
+				: $t('service.permission_denied_delete_service')}><DeleteIcon /></button
 		>
 	{/if}
 </nav>
--- a/src/routes/services/[id]/configuration/destination.svelte
+++ b/src/routes/services/[id]/configuration/destination.svelte
@@ -34,6 +34,7 @@
 	import { enhance, errorNotification } from '$lib/form';
 	import { goto } from '$app/navigation';
 	import { post } from '$lib/api';
+	import { t } from '$lib/translations';

 	const { id } = $page.params;
 	const from = $page.url.searchParams.get('from');
@@ -50,12 +51,14 @@
 </script>

 <div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">Configure Destination</div>
+	<div class="mr-4 text-2xl tracking-tight">
+		{$t('application.configuration.configure_destination')}
+	</div>
 </div>
 <div class="flex justify-center">
 	{#if !destinations || destinations.length === 0}
 		<div class="flex-col">
-			<div class="pb-2">No configurable Destination found</div>
+			<div class="pb-2">{$t('application.configuration.no_configurable_destination')}</div>
 			<div class="flex justify-center">
 				<a href="/new/destination" sveltekit:prefetch class="add-icon bg-sky-600 hover:bg-sky-500">
 					<svg
--- a/src/routes/services/[id]/configuration/type.svelte
+++ b/src/routes/services/[id]/configuration/type.svelte
@@ -41,6 +41,7 @@
 	import N8n from '$lib/components/svg/services/N8n.svelte';
 	import UptimeKuma from '$lib/components/svg/services/UptimeKuma.svelte';
 	import Ghost from '$lib/components/svg/services/Ghost.svelte';
+	import { t } from '$lib/translations';
 	import MeiliSearch from '$lib/components/svg/services/MeiliSearch.svelte';

 	const { id } = $page.params;
@@ -59,7 +60,7 @@
 </script>

 <div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">Select a Service</div>
+	<div class="mr-4 text-2xl tracking-tight">{$t('forms.select_a_service')}</div>
 </div>

 <div class="flex flex-wrap justify-center">
--- a/src/routes/services/[id]/configuration/version.svelte
+++ b/src/routes/services/[id]/configuration/version.svelte
@@ -32,6 +32,7 @@
 	import { goto } from '$app/navigation';
 	import { post } from '$lib/api';
 	import { supportedServiceTypesAndVersions } from '$lib/components/common';
+	import { t } from '$lib/translations';

 	const { id } = $page.params;
 	const from = $page.url.searchParams.get('from');
@@ -52,7 +53,7 @@
 </script>

 <div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">Select a Service version</div>
+	<div class="mr-4 text-2xl tracking-tight">{$t('forms.select_a_service_version')}</div>
 </div>
 {#if from}
 	<div class="pb-10 text-center">
--- a/src/routes/services/[id]/secrets/index.svelte
+++ b/src/routes/services/[id]/secrets/index.svelte
@@ -26,6 +26,7 @@
 	import { getDomain } from '$lib/components/common';
 	import { page } from '$app/stores';
 	import { get } from '$lib/api';
+	import { t } from '$lib/translations';
 	import ServiceLinks from '$lib/components/ServiceLinks.svelte';

 	const { id } = $page.params;
@@ -42,7 +43,9 @@
 	class:p-6={!service.fqdn}
 >
 	<div class="-mb-5 flex-col">
-		<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">Secrets</div>
+		<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
+			{$t('application.secret')}
+		</div>
 		<span class="text-xs">{service.name}</span>
 	</div>
 	{#if service.fqdn}
@@ -74,9 +77,9 @@
 	<table class="mx-auto border-separate text-left">
 		<thead>
 			<tr class="h-12">
-				<th scope="col">Name</th>
-				<th scope="col">Value</th>
-				<th scope="col" class="w-96 text-center">Action</th>
+				<th scope="col">{$t('forms.name')}</th>
+				<th scope="col">{$t('forms.value')}</th>
+				<th scope="col" class="w-96 text-center">{$t('forms.action')}</th>
 			</tr>
 		</thead>
 		<tbody>
--- a/src/routes/services/index.svelte
+++ b/src/routes/services/index.svelte
@@ -11,6 +11,7 @@
 	import N8n from '$lib/components/svg/services/N8n.svelte';
 	import UptimeKuma from '$lib/components/svg/services/UptimeKuma.svelte';
 	import Ghost from '$lib/components/svg/services/Ghost.svelte';
+	import { t } from '$lib/translations';
 	import MeiliSearch from '$lib/components/svg/services/MeiliSearch.svelte';
 	import { session } from '$app/stores';
 	import { getDomain } from '$lib/components/common';
@@ -33,7 +34,7 @@
 </script>

 <div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">Services</div>
+	<div class="mr-4 text-2xl tracking-tight">{$t('index.services')}</div>
 	<div on:click={newService} class="add-icon cursor-pointer bg-pink-600 hover:bg-pink-500">
 		<svg
 			class="w-6"
@@ -54,7 +55,7 @@
 <div class="flex flex-col flex-wrap justify-center">
 	{#if !services || ownServices.length === 0}
 		<div class="flex-col">
-			<div class="text-center text-xl font-bold">No services found</div>
+			<div class="text-center text-xl font-bold">{$t('service.no_service')}</div>
 		</div>
 	{/if}
 	{#if ownServices.length > 0 || otherServices.length > 0}
@@ -97,7 +98,7 @@
 							{/if}
 							{#if !service.type || !service.fqdn}
 								<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
-									Configuration missing
+									{$t('application.configuration.configuration_missing')}
 								</div>
 							{/if}
 						</div>
--- a/src/routes/settings/_Language.svelte
+++ b/src/routes/settings/_Language.svelte
@@ -0,0 +1,22 @@
+<script>
+	import { t } from '$lib/translations';
+	import Cookies from 'js-cookie';
+	import langs from '$lib/lang.json';
+	function setLocale(locale) {
+		Cookies.set('lang', locale);
+		return window.location.reload();
+	}
+</script>
+
+<div class="grid grid-cols-2 items-start pb-4">
+	<div class="flex-col">
+		<div class="text-base font-bold text-stone-100">
+			{$t('setting.change_language')}
+		</div>
+	</div>
+	<div class="items-center justify-start space-x-2 text-left">
+		{#each Object.entries(langs) as [lang, name]}
+			<button on:click={() => setLocale(lang)}>Change to {name}</button>
+		{/each}
+	</div>
+</div>
--- a/src/routes/settings/check.json.ts
+++ b/src/routes/settings/check.json.ts
@@ -1,6 +1,7 @@
 import { asyncExecShell, getEngine, getUserDetails } from '$lib/common';
 import * as db from '$lib/database';
 import { ErrorHandler } from '$lib/database';
+import { t } from '$lib/translations';
 import type { RequestHandler } from '@sveltejs/kit';

 export const post: RequestHandler = async (event) => {
@@ -16,7 +17,8 @@ export const post: RequestHandler = async (event) => {
 		return {
 			status: found ? 500 : 200,
 			body: {
-				error: found && `Domain ${fqdn.replace('www.', '')} is already used.`
+				error:
+					found && t.get('application.domain_already_in_use', { domain: fqdn.replace('www.', '') })
 			}
 		};
 	} catch (error) {
--- a/src/routes/settings/index.json.ts
+++ b/src/routes/settings/index.json.ts
@@ -1,13 +1,14 @@
 import { getUserDetails } from '$lib/common';
 import * as db from '$lib/database';
 import { listSettings, ErrorHandler } from '$lib/database';
+import { t } from '$lib/translations';
 import type { RequestHandler } from '@sveltejs/kit';
 import { promises as dns } from 'dns';

 export const get: RequestHandler = async (event) => {
 	const { teamId, status, body } = await getUserDetails(event);
 	if (status === 401) return { status, body };
-	if (teamId !== '0') return { status: 401, body: { message: 'You are not an admin.' } };
+	if (teamId !== '0') return { status: 200, body: { settings: {} } };
 	try {
 		const settings = await listSettings();
 		return {
@@ -27,7 +28,7 @@ export const del: RequestHandler = async (event) => {
 		return {
 			status: 401,
 			body: {
-				message: 'You do not have permission to do this. \nAsk an admin to modify your permissions.'
+				message: t.get('setting.permission_denied')
 			}
 		};
 	if (status === 401) return { status, body };
@@ -44,7 +45,7 @@ export const del: RequestHandler = async (event) => {
 		return {
 			status: 200,
 			body: {
-				message: 'Domain removed',
+				message: t.get('setting.domain_removed'),
 				redirect: ip ? `http://${ip[0]}:3000/settings` : undefined
 			}
 		};
@@ -58,7 +59,7 @@ export const post: RequestHandler = async (event) => {
 		return {
 			status: 401,
 			body: {
-				message: 'You do not have permission to do this. \nAsk an admin to modify your permissions.'
+				message: t.get('setting.permission_denied')
 			}
 		};
 	if (status === 401) return { status, body };
--- a/src/routes/settings/index.svelte
+++ b/src/routes/settings/index.svelte
@@ -28,6 +28,8 @@
 	import { session } from '$app/stores';

 	export let settings;
+	import Cookies from 'js-cookie';
+	import langs from '$lib/lang.json';
 	import Setting from '$lib/components/Setting.svelte';
 	import Explainer from '$lib/components/Explainer.svelte';
 	import { errorNotification } from '$lib/form';
@@ -36,6 +38,9 @@
 	import { browser } from '$app/env';
 	import { getDomain } from '$lib/components/common';
 	import { toast } from '@zerodevx/svelte-toast';
+	import { t } from '$lib/translations';
+
+	import Language from './_Language.svelte';

 	let isRegistrationEnabled = settings.isRegistrationEnabled;
 	let dualCerts = settings.dualCerts;
@@ -72,7 +77,7 @@
 				dualCerts = !dualCerts;
 			}
 			await post(`/settings.json`, { isRegistrationEnabled, dualCerts });
-			return toast.push('Settings saved.');
+			return toast.push(t.get('application.settings_saved'));
 		} catch ({ error }) {
 			return errorNotification(error);
 		}
@@ -99,19 +104,19 @@
 </script>

 <div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">Settings</div>
+	<div class="mr-4 text-2xl tracking-tight">{$t('index.settings')}</div>
 </div>
 {#if $session.teamId === '0'}
 	<div class="mx-auto max-w-4xl px-6">
 		<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
 			<div class="flex space-x-1 pb-6">
-				<div class="title font-bold">Global Settings</div>
+				<div class="title font-bold">{$t('index.global_settings')}</div>
 				<button
 					type="submit"
 					disabled={loading.save}
 					class:bg-yellow-500={!loading.save}
 					class:hover:bg-yellow-400={!loading.save}
-					class="mx-2 ">{loading.save ? 'Saving...' : 'Save'}</button
+					class="mx-2 ">{loading.save ? $t('forms.saving') : $t('forms.save')}</button
 				>
 				{#if isFqdnSet}
 					<button
@@ -119,17 +124,18 @@
 						disabled={loading.remove}
 						class:bg-red-600={!loading.remove}
 						class:hover:bg-red-500={!loading.remove}
-						>{loading.remove ? 'Removing...' : 'Remove domain'}</button
+						>{loading.remove ? $t('forms.removing') : $t('forms.remove_domain')}</button
 					>
 				{/if}
 			</div>
 			<div class="grid grid-flow-row gap-2 px-10">
+				<!-- <Language /> -->
 				<div class="grid grid-cols-2 items-start">
 					<div class="flex-col">
-						<div class="pt-2 text-base font-bold text-stone-100">URL (FQDN)</div>
-						<Explainer
-							text="If you specify <span class='text-yellow-500 font-bold'>https</span>, Coolify will be accessible only over https. SSL certificate will be generated for you.<br>If you specify <span class='text-yellow-500 font-bold'>www</span>, Coolify will be redirected (302) from non-www and vice versa."
-						/>
+						<div class="pt-2 text-base font-bold text-stone-100">
+							{$t('application.url_fqdn')}
+						</div>
+						<Explainer text={$t('setting.ssl_explainer')} />
 					</div>
 					<div class="justify-start text-left">
 						<input
@@ -139,16 +145,16 @@
 							name="fqdn"
 							id="fqdn"
 							pattern="^https?://([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{'{'}2,{'}'}$"
-							placeholder="eg: https://coolify.io"
+							placeholder="{$t('forms.eg')}: https://coolify.io"
 						/>
 					</div>
 				</div>
 				<div class="grid grid-cols-2 items-start py-6">
 					<div class="flex-col">
-						<div class="pt-2 text-base font-bold text-stone-100">Public Port Range</div>
-						<Explainer
-							text="Ports used to expose databases/services/internal services.<br> Add them to your firewall (if applicable).<br><br>You can specify a range of ports, eg: <span class='text-yellow-500 font-bold'>9000-9100</span>"
-						/>
+						<div class="pt-2 text-base font-bold text-stone-100">
+							{$t('forms.public_port_range')}
+						</div>
+						<Explainer text={$t('forms.public_port_range_explainer')} />
 					</div>
 					<div class="mx-auto flex-row items-center justify-center space-y-2">
 						<input
@@ -170,40 +176,40 @@
 				</div>
 				<div class="grid grid-cols-2 items-center">
 					<Setting
-						dataTooltip="Must remove the domain before you can change this setting."
+						dataTooltip={$t('setting.must_remove_domain_before_changing')}
 						disabled={isFqdnSet}
 						bind:setting={dualCerts}
-						title="Generate SSL for www and non-www?"
-						description="It will generate certificates for both www and non-www. <br>You need to have <span class='font-bold text-yellow-500'>both DNS entries</span> set in advance.<br><br>Useful if you expect to have visitors on both."
+						title={$t('application.ssl_www_and_non_www')}
+						description={$t('services.generate_www_non_www_ssl')}
 						on:click={() => !isFqdnSet && changeSettings('dualCerts')}
 					/>
 				</div>
 				<div class="grid grid-cols-2 items-center">
 					<Setting
 						bind:setting={isRegistrationEnabled}
-						title="Registration allowed?"
-						description="Allow further registrations to the application. <br>It's turned off after the first registration. "
+						title={$t('setting.registration_allowed')}
+						description={$t('setting.registration_allowed_explainer')}
 						on:click={() => changeSettings('isRegistrationEnabled')}
 					/>
 				</div>
 			</div>
 		</form>
 		<div class="flex space-x-1 pt-6 font-bold">
-			<div class="title">Coolify Proxy Settings</div>
+			<div class="title">{$t('setting.coolify_proxy_settings')}</div>
 		</div>
 		<Explainer
-			text={`Credentials for <a class="text-white font-bold" href=${
-				fqdn
+			text={$t('setting.credential_stat_explainer', {
+				link: fqdn
 					? `http://${settings.proxyUser}:${settings.proxyPassword}@` + getDomain(fqdn) + ':8404'
 					: browser &&
 					  `http://${settings.proxyUser}:${settings.proxyPassword}@` +
 							window.location.hostname +
 							':8404'
-			} target="_blank">stats</a> page.`}
+			})}
 		/>
 		<div class="space-y-2 px-10 py-5">
 			<div class="grid grid-cols-2 items-center">
-				<label for="proxyUser">User</label>
+				<label for="proxyUser">{$t('forms.user')}</label>
 				<CopyPasswordField
 					readonly
 					disabled
@@ -213,7 +219,7 @@
 				/>
 			</div>
 			<div class="grid grid-cols-2 items-center">
-				<label for="proxyPassword">Password</label>
+				<label for="proxyPassword">{$t('forms.password')}</label>
 				<CopyPasswordField
 					readonly
 					disabled
@@ -225,4 +231,8 @@
 			</div>
 		</div>
 	</div>
+{:else}
+	<div class="mx-auto max-w-4xl px-6">
+		<!-- <Language /> -->
+	</div>
 {/if}
--- a/src/routes/sources/[id]/_Github.svelte
+++ b/src/routes/sources/[id]/_Github.svelte
@@ -5,6 +5,7 @@
 	import Explainer from '$lib/components/Explainer.svelte';
 	import { errorNotification } from '$lib/form';
 	import { toast } from '@zerodevx/svelte-toast';
+	import { t } from '$lib/translations';
 	const { id } = $page.params;

 	let loading = false;
@@ -125,7 +126,7 @@
 	{:else if source.githubApp?.installationId}
 		<form on:submit|preventDefault={handleSubmit} class="py-4">
 			<div class="flex space-x-1 pb-5 font-bold">
-				<div class="title">General</div>
+				<div class="title">{$t('general')}</div>
 				{#if $session.isAdmin}
 					<button
 						type="submit"
@@ -134,14 +135,14 @@
 						disabled={loading}>{loading ? 'Saving...' : 'Save'}</button
 					>
 					<button on:click|preventDefault={() => installRepositories(source)}
-						>Change GitHub App Settings</button
+						>{$t('source.change_app_settings', { name: 'GitHub' })}</button
 					>
 				{/if}
 			</div>
 			<div class="grid grid-flow-row gap-2 px-10">
 				<div class="grid grid-flow-row gap-2">
 					<div class="mt-2 grid grid-cols-2 items-center">
-						<label for="name" class="text-base font-bold text-stone-100">Name</label>
+						<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
 						<input name="name" id="name" required bind:value={source.name} />
 					</div>
 				</div>
--- a/src/routes/sources/[id]/_Gitlab.svelte
+++ b/src/routes/sources/[id]/_Gitlab.svelte
@@ -10,6 +10,7 @@
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
 	import { toast } from '@zerodevx/svelte-toast';

+	import { t } from '$lib/translations';
 	const { id } = $page.params;
 	let url = browser ? (settings.fqdn ? settings.fqdn : window.location.origin) : '';

@@ -130,10 +131,12 @@
 					type="submit"
 					class:bg-orange-600={!loading}
 					class:hover:bg-orange-500={!loading}
-					disabled={loading}>{loading ? 'Saving...' : 'Save'}</button
+					disabled={loading}>{loading ? $t('forms.saving') : $t('forms.save')}</button
 				>
 				{#if source.gitlabAppId}
-					<button on:click|preventDefault={changeSettings}>Change GitLab App Settings</button>
+					<button on:click|preventDefault={changeSettings}
+						>{$t('source.change_app_settings', { name: 'GitLab' })}</button
+					>
 				{/if}
 			{/if}
 		</div>
@@ -144,10 +147,10 @@
 						>GitLab Application Type</label
 					>
 					<select name="type" id="type" class="w-96" bind:value={applicationType}>
-						<option value="user">User owned application</option>
-						<option value="group">Group owned application</option>
+						<option value="user">{$t('source.gitlab.user_owned')}</option>
+						<option value="group">{$t('source.gitlab.group_owned')}</option>
 						{#if source.htmlUrl !== 'https://gitlab.com'}
-							<option value="instance">Instance-wide application (self-hosted)</option>
+							<option value="instance">{$t('source.gitlab.self_hosted')}</option>
 						{/if}
 					</select>
 				</div>
@@ -167,13 +170,15 @@

 			<div class="grid grid-flow-row gap-2">
 				<div class="mt-2 grid grid-cols-2 items-center">
-					<label for="name" class="text-base font-bold text-stone-100">Name</label>
+					<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
 					<input name="name" id="name" required bind:value={source.name} />
 				</div>
 			</div>
 			{#if source.gitlabApp.groupName}
 				<div class="grid grid-cols-2 items-center">
-					<label for="groupName" class="text-base font-bold text-stone-100">Group Name</label>
+					<label for="groupName" class="text-base font-bold text-stone-100"
+						>{$t('source.group_name')}</label
+					>
 					<input
 						name="groupName"
 						id="groupName"
@@ -194,11 +199,11 @@
 			</div>
 			<div class="grid grid-cols-2 items-start">
 				<div class="flex-col">
-					<label for="oauthId" class="pt-2 text-base font-bold text-stone-100">OAuth ID</label>
+					<label for="oauthId" class="pt-2 text-base font-bold text-stone-100"
+						>{$t('source.oauth_id')}</label
+					>
 					{#if !source.gitlabAppId}
-						<Explainer
-							text="The OAuth ID is the unique identifier of the GitLab application. <br>You can find it <span class='font-bold text-orange-600' >in the URL</span> of your GitLab OAuth Application."
-						/>
+						<Explainer text={$t('source.oauth_id_explainer')} />
 					{/if}
 				</div>
 				<input
@@ -215,7 +220,9 @@
 			</div>

 			<div class="grid grid-cols-2 items-center">
-				<label for="appId" class="text-base font-bold text-stone-100">Application ID</label>
+				<label for="appId" class="text-base font-bold text-stone-100"
+					>{$t('source.application_id')}</label
+				>
 				<input
 					name="appId"
 					id="appId"
@@ -226,7 +233,9 @@
 				/>
 			</div>
 			<div class="grid grid-cols-2 items-center">
-				<label for="appSecret" class="text-base font-bold text-stone-100">Secret</label>
+				<label for="appSecret" class="text-base font-bold text-stone-100"
+					>{$t('index.secret')}</label
+				>
 				<CopyPasswordField
 					disabled={source.gitlabAppId}
 					readonly={source.gitlabAppId}
--- a/src/routes/sources/[id]/__layout.svelte
+++ b/src/routes/sources/[id]/__layout.svelte
@@ -34,10 +34,11 @@
 	import { page, session } from '$app/stores';
 	import { errorNotification } from '$lib/form';
 	import DeleteIcon from '$lib/components/DeleteIcon.svelte';
+	import { t } from '$lib/translations';
 	const { id } = $page.params;

 	async function deleteSource(name) {
-		const sure = confirm(`Are you sure you would like to delete '${name}'?`);
+		const sure = confirm($t('application.confirm_to_delete', { name: name }));
 		if (sure) {
 			const response = await fetch(`/sources/${id}.json`, {
 				method: 'delete'
@@ -55,14 +56,14 @@
 <nav class="nav-side">
 	<button
 		on:click={() => deleteSource(source.name)}
-		title="Delete Git Source"
+		title={$t('source.delete_git_source')}
 		type="submit"
 		disabled={!$session.isAdmin}
 		class:hover:text-red-500={$session.isAdmin}
 		class="icons tooltip-bottom bg-transparent text-sm"
 		data-tooltip={$session.isAdmin
-			? 'Delete Git Source'
-			: 'You do not have permission to delete a Git Source'}><DeleteIcon /></button
+			? $t('source.delete_git_source')
+			: $t('source.permission_denied')}><DeleteIcon /></button
 	>
 </nav>
 <slot />
--- a/src/routes/sources/[id]/check.json.ts
+++ b/src/routes/sources/[id]/check.json.ts
@@ -1,6 +1,7 @@
 import { getUserDetails } from '$lib/common';
 import * as db from '$lib/database';
 import { ErrorHandler } from '$lib/database';
+import { t } from '$lib/translations';
 import type { RequestHandler } from '@sveltejs/kit';

 export const post: RequestHandler = async (event) => {
@@ -11,7 +12,7 @@ export const post: RequestHandler = async (event) => {
 		const found = await db.prisma.gitlabApp.findFirst({ where: { oauthId: Number(oauthId) } });
 		if (found) {
 			throw {
-				message: `GitLab App is already configured.`
+				message: t.get('source.gitlab.already_configured')
 			};
 		}
 		return { status: 200 };
--- a/src/routes/sources/[id]/index.svelte
+++ b/src/routes/sources/[id]/index.svelte
@@ -30,6 +30,8 @@
 <script lang="ts">
 	export let source: Prisma.GitSource;
 	export let settings;
+	import { t } from '$lib/translations';
+
 	import type Prisma from '@prisma/client';
 	import Github from './_Github.svelte';
 	import Gitlab from './_Gitlab.svelte';
@@ -67,7 +69,7 @@
 </script>

 <div class="flex space-x-1 p-6 px-6 text-2xl font-bold">
-	<div class="tracking-tight">Git Source</div>
+	<div class="tracking-tight">{$t('application.git_source')}</div>
 	<span class="arrow-right-applications px-1 text-orange-500">></span>
 	<span class="pr-2">{source.name}</span>
 </div>
--- a/src/routes/sources/[id]/newGithubApp.svelte
+++ b/src/routes/sources/[id]/newGithubApp.svelte
@@ -31,6 +31,7 @@
 <script>
 	import { dev } from '$app/env';
 	import { getDomain, dashify } from '$lib/components/common';
+	import { t } from '$lib/translations';

 	export let source;
 	export let settings;
@@ -84,5 +85,5 @@
 </script>

 <div class="flex h-screen items-center justify-center text-3xl font-bold">
-	Redirecting to Github...
+	{$t('source.github.redirecting')}
 </div>
--- a/src/routes/sources/index.svelte
+++ b/src/routes/sources/index.svelte
@@ -39,10 +39,11 @@
 		const { id } = await post('/sources/new', {});
 		return await goto(`/sources/${id}`, { replaceState: true });
 	}
+	import { t } from '$lib/translations';
 </script>

 <div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">Git Sources</div>
+	<div class="mr-4 text-2xl tracking-tight">{$t('index.git_sources')}</div>
 	{#if $session.isAdmin}
 		<button on:click={newSource} class="add-icon bg-orange-600 hover:bg-orange-500">
 			<svg
@@ -64,7 +65,7 @@
 <div class="flex flex-col flex-wrap justify-center">
 	{#if !sources || ownSources.length === 0}
 		<div class="flex-col">
-			<div class="text-center text-xl font-bold">No git sources found</div>
+			<div class="text-center text-xl font-bold">{$t('source.no_git_sources_found')}</div>
 		</div>
 	{/if}
 	{#if ownSources.length > 0 || otherSources.length > 0}
@@ -85,7 +86,7 @@

 							{#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">
-									Configuration missing
+									{$t('application.configuration.configuration_missing')}
 								</div>
 							{:else}
 								<div class="truncate text-center">{getDomain(source.htmlUrl) || ''}</div>
@@ -112,7 +113,7 @@
 								{/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">
-										Configuration missing
+										{$t('application.configuration.configuration_missing')}
 									</div>
 								{:else}
 									<div class="truncate text-center">{source.htmlUrl}</div>