diff --git a/src/app.html b/src/app.html
index 60316b6b..d82c8598 100644
--- a/src/app.html
+++ b/src/app.html
@@ -2,8 +2,22 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="/favicon.ico" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>Online FlowChart &amp; Diagrams Editor - Mermaid Live Editor</title>
+		<meta
+			name="og:image"
+			content="https://github.com/mermaid-js/mermaid/raw/develop/img/header.png"
+		/>
+		<link rel="canonical" href="https://mermaid-js.github.io/mermaid-live-editor/" />
+		<meta
+			name="description"
+			content="Simplify documentation and avoid heavy tools. Open source Visio Alternative. Commonly used for explaining your code! Mermaid is a simple markdown-like script language for generating charts from text via javascript."
+		/>
+		<link rel="icon" type="image/png" href="favicon.png" />
+		<link
+			rel="stylesheet"
+			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
+		/>
 		<script
 			src="https://cdn.jsdelivr.net/npm/mermaid@8.10.1/dist/mermaid.min.js"
 			integrity="sha256-aQCGsx3/OLAXwNyOUrAedielIQAjIrMFkcWdXMlIkGc="
diff --git a/src/lib/Util/state.ts b/src/lib/Util/state.ts
index eca4196b..66abed57 100644
--- a/src/lib/Util/state.ts
+++ b/src/lib/Util/state.ts
@@ -27,7 +27,6 @@ export const loadState = (data: string): void => {
 	let state: State;
 	try {
 		const stateStr = fromBase64(data);
-		console.log('state from url', stateStr);
 		state = JSON.parse(stateStr);
 	} catch (e) {
 		console.error('Init error', e);
diff --git a/src/lib/components/actions.svelte b/src/lib/components/actions.svelte
index 64ea41f0..4a86aa32 100644
--- a/src/lib/components/actions.svelte
+++ b/src/lib/components/actions.svelte
@@ -40,7 +40,6 @@
 		const image = new Image();
 		image.onload = exporter(canvas, context, image);
 
-		console.log('SVG', getBase64SVG());
 		image.src = `data:image/svg+xml;base64,${getBase64SVG()}`;
 		event.stopPropagation();
 		event.preventDefault();
diff --git a/src/lib/components/card/card.svelte b/src/lib/components/card/card.svelte
index d731ff28..e3c8bcd1 100644
--- a/src/lib/components/card/card.svelte
+++ b/src/lib/components/card/card.svelte
@@ -5,11 +5,7 @@
 	export let isOpen: boolean = true;
 	export let tabs: Tab[] = [];
 	export let title: string;
-	$: {
-		console.log('a', isOpen);
-		isOpen = isCloseable ? isOpen : true;
-		console.log(isOpen);
-	}
+	$: isOpen = isCloseable ? isOpen : true;
 </script>
 
 <div class={`bg-white rounded overflow-hidden shadow m-2 flex-grow flex flex-col `}>
diff --git a/src/lib/components/editor/editor.svelte b/src/lib/components/editor/editor.svelte
index 90749c07..663d2070 100644
--- a/src/lib/components/editor/editor.svelte
+++ b/src/lib/components/editor/editor.svelte
@@ -28,7 +28,6 @@
 	$: editor?.setValue(text);
 	$: {
 		Monaco?.editor.setModelMarkers(editor.getModel(), 'test', errorMarkers);
-		console.log(errorMarkers);
 	}
 
 	const dispatch = createEventDispatcher<EditorEvents>();
diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte
index 575f0649..60354529 100644
--- a/src/lib/components/navbar.svelte
+++ b/src/lib/components/navbar.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { version } from 'mermaid/package.json';
 	interface Link {
 		title: string;
 		href: string;
@@ -29,7 +30,7 @@
 
 <header class="p-2 bg-indigo-400 text-white font-bold flex flex-wrap items-center">
 	<div class="flex-1 flex justify-between items-center">
-		<a href="/"> Mermaid Live Editor </a>
+		<a href="/">Mermaid<span class="text-xs font-thin">(v{version})</span> Live Editor</a>
 	</div>
 
 	<label for="menu-toggle" class="pointer-cursor lg:hidden block"
diff --git a/src/routes/edit.svelte b/src/routes/edit.svelte
index 0b3baee5..1a5bf9f0 100644
--- a/src/routes/edit.svelte
+++ b/src/routes/edit.svelte
@@ -12,9 +12,11 @@
 	import { onMount } from 'svelte';
 	import type monaco from 'monaco-editor';
 	import type { Mermaid } from 'mermaid';
+	import { version } from 'mermaid/package.json';
 	import { goto } from '$app/navigation';
 
 	const mermaid: Mermaid = (window.mermaid as unknown) as Mermaid;
+
 	let selectedMode = 'code';
 	const languageMap = {
 		code: 'mermaid',
@@ -97,6 +99,7 @@
 <svelte:head>
 	<title>Edit</title>
 </svelte:head>
+
 <div class="h-full flex flex-col overflow-hidden bg-gray-100">
 	<Navbar />
 	<div class="flex-1 flex overflow-hidden">
@@ -135,6 +138,7 @@
 					<View />
 				</div>
 			</Card>
+			<div class="self-end mx-2 -mt-2">Powered by Mermaid v{version}</div>
 		</div>
 	</div>
 </div>
diff --git a/static/favicon.ico b/static/favicon.ico
deleted file mode 100644
index d75d248e..00000000
Binary files a/static/favicon.ico and /dev/null differ
diff --git a/static/favicon.png b/static/favicon.png
new file mode 100644
index 00000000..5a015fd6
Binary files /dev/null and b/static/favicon.png differ
diff --git a/static/svelte-welcome.png b/static/svelte-welcome.png
deleted file mode 100644
index fe7d2d6b..00000000
Binary files a/static/svelte-welcome.png and /dev/null differ
diff --git a/static/svelte-welcome.webp b/static/svelte-welcome.webp
deleted file mode 100644
index 6ec1a28d..00000000
Binary files a/static/svelte-welcome.webp and /dev/null differ
