diff --git a/src/App.svelte b/src/App.svelte
index b131b222..1022c650 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,25 +1,32 @@
 <script>
- 	import Router from 'svelte-spa-router'
-  // Used for SSR. A falsy value is ignored by the Router.
-	import Edit from './routes/Edit.svelte'
-	import View from './routes/View.svelte'
+	import Router from "svelte-spa-router";
+	// Used for SSR. A falsy value is ignored by the Router.
+	import Edit from "./routes/Edit.svelte";
+	import View from "./routes/View.svelte";
 
 	const routes = {
-    // Exact path
-    '/': Edit,
+		// Exact path
+		"/": Edit,
 
-    // Using named parameters, with last being optional
-    '/edit/:data': Edit,
+		// Using named parameters, with last being optional
+		"/edit/:data": Edit,
 
-    // Wildcard parameter
-    '/view/:data': View,
+		// Wildcard parameter
+		"/view/:data": View,
 
-    // Catch-all
-    // This is optional, but if present it must be the last
-    '*': Edit,
-}
+		// Catch-all
+		// This is optional, but if present it must be the last
+		"*": Edit,
+	};
 </script>
 
 <style>
+
 </style>
-<Router {routes}/>
+
+<svelte:head>
+	<link
+		href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+		rel="stylesheet" />
+</svelte:head>
+<Router {routes} />
diff --git a/src/components/Card.svelte b/src/components/Card.svelte
index 98556302..0d1308d3 100644
--- a/src/components/Card.svelte
+++ b/src/components/Card.svelte
@@ -1,31 +1,36 @@
 <script>
-	export let title = '';
-	export let noPadding = false;
-	let contentClass = 'padding';
-	if (noPadding) {
-		contentClass = '';
-	}
+    export let title = "";
+    export let noPadding = false;
+    let contentClass = "padding";
+    if (noPadding) {
+        contentClass = "";
+    }
 </script>
 
 <style>
-	#card {
-		border: 1px solid lightgray;
-		margin-bottom: 16px;
-	}
-	#title {
-		border-bottom: 1px solid lightgray;
-	}
-	#content {
-		padding-top: 16px;
-	}
-	.padding {
-		padding: 16px;
-	}
+    #card {
+        border: 1px solid lightgray;
+        margin-bottom: 16px;
+    }
+    #title {
+        font-family: "Playfair Display", serif;
+        font-weight: 400;
+        border-bottom: 1px solid lightgray;
+        font-size: 1.25rem;
+        background-color: #1e60ab;
+        color: #eaebef;
+    }
+    #content {
+        padding-top: 16px;
+    }
+    .padding {
+        padding: 8px;
+    }
 </style>
 
 <div id="card">
-	<div id="title" class="padding">{title}</div>
-	<div id="content" class="{contentClass}">
-		<slot></slot>
-	</div>
-</div>
\ No newline at end of file
+    <div id="title" class="padding">{title}</div>
+    <div id="content" class={contentClass}>
+        <slot />
+    </div>
+</div>
diff --git a/src/components/Links.svelte b/src/components/Links.svelte
index 6e2d88ff..703aa4a5 100644
--- a/src/components/Links.svelte
+++ b/src/components/Links.svelte
@@ -1,13 +1,12 @@
 <script>
-import { codeErrorStore } from '../code-error-store.js';
-import {link} from 'svelte-spa-router';
-import { Base64 } from 'js-base64'
-import { onMount } from 'svelte';
-import moment from 'moment';
-import { codeStore } from '../code-store.js';
+    import { codeErrorStore } from "../code-error-store.js";
+    import { link } from "svelte-spa-router";
+    import { Base64 } from "js-base64";
+    import { onMount } from "svelte";
+    import moment from "moment";
+    import { codeStore } from "../code-store.js";
 
-onMount(async () => {
-});
+    onMount(async () => {});
 
 export const onDownloadPNG = event => {
 	var canvas = document.createElement('canvas');
@@ -33,35 +32,41 @@ export const onDownloadPNG = event => {
 	image.onload = function () {
 		context.drawImage(image, 0, 0, canvas.width, canvas.height);
 
-		var a = document.createElement('a')
-		a.download = `mermaid-diagram-${moment().format('YYYYMMDDHHmmss')}.png`;
-		a.href = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
-		a.click();
-	}
+            var a = document.createElement("a");
+            a.download = `mermaid-diagram-${moment().format(
+                "YYYYMMDDHHmmss"
+            )}.png`;
+            a.href = canvas
+                .toDataURL("image/png")
+                .replace("image/png", "image/octet-stream");
+            a.click();
+        };
 
-	console.warn('SVG', container.innerHTML);
-	image.src = `data:image/svg+xml;base64,${Base64.encode(container.innerHTML)}`;
-	event.stopPropagation();
-	event.preventDefault();
-	event.target.download = `mermaid-diagram-${moment().format(
-	'YYYYMMDDHHmmss'
-)}.png`;
-};
-export const onDownloadSVG = event => {
-	console.log('event', event.target);
-	const container = document.getElementById('container');
-	event.target.href = `data:image/svg+xml;base64,${Base64.encode(
-		container.innerHTML
-	)}`
-	event.target.download = `mermaid-diagram-${moment().format(
-		'YYYYMMDDHHmmss'
-	)}.svg`
-	console.log('event', event);
-};
-export const onCopyMarkdown = event => {
-  event.target.select();
-  document.execCommand('Copy');
-}
+        console.warn("SVG", container.innerHTML);
+        image.src = `data:image/svg+xml;base64,${Base64.encode(
+            container.innerHTML
+        )}`;
+        event.stopPropagation();
+        event.preventDefault();
+        event.target.download = `mermaid-diagram-${moment().format(
+            "YYYYMMDDHHmmss"
+        )}.png`;
+    };
+    export const onDownloadSVG = (event) => {
+        console.log("event", event.target);
+        const container = document.getElementById("container");
+        event.target.href = `data:image/svg+xml;base64,${Base64.encode(
+            container.innerHTML
+        )}`;
+        event.target.download = `mermaid-diagram-${moment().format(
+            "YYYYMMDDHHmmss"
+        )}.svg`;
+        console.log("event", event);
+    };
+    export const onCopyMarkdown = (event) => {
+        event.target.select();
+        document.execCommand("Copy");
+    };
 
 let url = '/mermaid-live-editor/#/view';
 let b64Code;
@@ -72,52 +77,92 @@ let imagemodeselected = "auto";
 let userimagewidth = 1920;
 let userimageheight = 1080;
 
-const unsubscribe = codeStore.subscribe(state => {
-  b64Code = Base64.encodeURI(JSON.stringify(state));
-  url = `/mermaid-live-editor/#/view/${b64Code}`;
-  iUrl = `https://mermaid.ink/img/${b64Code}`;
-  svgUrl = `https://mermaid.ink/svg/${b64Code}`;
-  mdCode = `[![](${iUrl})](${window.location.protocol}//${window.location.host}${window.location.pathname}#/edit/${b64Code})`;
-});
+    const unsubscribe = codeStore.subscribe((state) => {
+        b64Code = Base64.encodeURI(JSON.stringify(state));
+        url = `/mermaid-live-editor/#/view/${b64Code}`;
+        iUrl = `https://mermaid.ink/img/${b64Code}`;
+        svgUrl = `https://mermaid.ink/svg/${b64Code}`;
+        mdCode = `[![](${iUrl})](${window.location.protocol}//${window.location.host}${window.location.pathname}#/edit/${b64Code})`;
+    });
 </script>
 
 <style>
-#markdown {
-  padding: 7px;
-  font-family: monospace;
-  font-size: 14px;
-  width: 300px;
-}
-label[for="markdown"] {
-  cursor: pointer;
-  color: -webkit-link;
-  color: -moz-link;
-  color: blue;
-  text-decoration: underline;
-}
-@media (prefers-color-scheme: dark) {
-	label[for="markdown"] {
- 		color: #d8d8d8;
-	}
- }
+    #links {
+        margin-bottom: 1rem;
+        padding-bottom: 0.5rem;
+        border-bottom: 1px solid lightgray;
+    }
+    #markdown {
+        padding: 7px;
+        font-family: monospace;
+        font-size: 14px;
+        width: 95%;
+        margin: 1rem 0;
+        border: 1px solid lightgray;
+    }
+    label[for="markdown"] {
+        cursor: pointer;
+        margin: 0 auto;
+    }
+    /*
+    @media (prefers-color-scheme: dark) {
+        label[for="markdown"] {
+            color: #d8d8d8;
+        }
+    } */
+    .button-style {
+        background-color: #a2d9e2;
+        color: #33a2c4;
+        border-radius: 0.25rem;
+        padding: 0.5rem;
+        border: 1px solid #a2d9e2;
+        margin: 0.25rem;
+    }
+    .button-style:hover {
+        background-color: #fff;
+        color: #33a2c4;
+        border: 1px solid #33a2c4;
+    }
+    .button-style:focus {
+        outline: none;
+    }
+    .link-style {
+        text-decoration: none;
+        color: #33a2c4;
+    }
+    #copy-section {
+        padding-top: 1rem;
+        text-align: center;
+    }
 </style>
 
-<div id="links" >
-	<a href="{url}" use:link>Link to view</a>
-	<a href="{url}" download='' on:click={onDownloadSVG}>
-		Download SVG
-	</a>
-	<a href={iUrl}>Link to Image</a>
-	<a href={svgUrl}>Link to SVG</a>
-	<a href="{url}" download='' on:click={onDownloadPNG}>
-		Download PNG
-	</a>
-	(markdown is base64 encoded for these urls)
+<div id="links">
+    <button class="button-style">
+        <a class="link-style" href={url} use:link>Link to view</a>
+    </button>
+    <button class="button-style">
+        <a class="link-style" href={url} download="" on:click={onDownloadSVG}>
+            Download SVG
+        </a>
+    </button>
+    <button class="button-style">
+        <a class="link-style" href={iUrl}>Link to Image</a>
+    </button>
+    <button class="button-style">
+        <a class="link-style" href={svgUrl}>Link to SVG</a>
+    </button>
+    <button class="button-style">
+        <a class="link-style" href={url} download="" on:click={onDownloadPNG}>
+            Download PNG
+        </a>
+    </button>
+    (markdown is base64 encoded for these urls)
+</div>
+<div id="copy-section">
+    <label for="markdown" class="button-style">Copy Markdown</label>
+    <br />
+    <input id="markdown" type="text" value={mdCode} on:click={onCopyMarkdown} />
 </div>
-<p>
-  <label for="markdown">Copy Markdown</label>
-  <input id="markdown" type="text" value="{mdCode}" on:click={onCopyMarkdown} />
-</p>
 <p>
   <label>PNG size:</label>
   <input type="radio" value="auto" id="autosize" bind:group={imagemodeselected}>
diff --git a/src/routes/Edit.svelte b/src/routes/Edit.svelte
index 820cbe77..98c11cb3 100644
--- a/src/routes/Edit.svelte
+++ b/src/routes/Edit.svelte
@@ -1,249 +1,320 @@
 <script>
-import { onMount } from 'svelte';
-import { updateCodeStore } from '../code-store.js';
-import Editor from '../components/Editor.svelte';
-import Config from '../components/Config.svelte';
-import View from '../components/View.svelte';
-import Card from '../components/Card.svelte';
-import Tag from '../components/Tag.svelte';
-import Links from '../components/Links.svelte';
-import { fromUrl } from '../code-store.js';
-// import pkg from '@mermaid-js/mermaid/package.json'
-import pkg from '@mermaid/package.json'
-
-export let mermaidVersion = pkg.version
-
-onMount(async () => {
-	ga('send', 'pageview');
-	ga('send', 'event', 'version', mermaidVersion, mermaidVersion);
-	fromUrl(params.data);
-});
-
-	// export let code = '';
-	// export let classes = '';
-
-	// export let error = {};
-	// export let token = '';
-	// export let expected = '';
-	export let params = {};
-
-	function loadFlowChart(){
-		loadSampleDiagram('FlowChart');
-	}
-	function loadSequenceDiagram(){
-		loadSampleDiagram('SequenceDiagram');
-	}
-	function loadClassDiagram(){
-		loadSampleDiagram('ClassDiagram');
-	}
-	function loadStateDiagram(){
-		loadSampleDiagram('StateDiagram');
-	}
-	function loadGanttChart(){
-		loadSampleDiagram('GanttChart');
-	}
-	function loadPieChart(){
-		loadSampleDiagram('PieChart');
-	}
-	function loadERDiagram(){
-		loadSampleDiagram('ERDiagram');
-	}
-
-    function loadSampleDiagram(diagramType){
-		let code =''
-		switch(diagramType){
-			case 'FlowChart' :
-			code = `graph TD
-	A[Christmas] -->|Get money| B(Go shopping)
-	B --> C{Let me think}
-	C -->|One| D[Laptop]
-	C -->|Two| E[iPhone]
-	C -->|Three| F[fa:fa-car Car]
-					`;
-			break;
-
-			case 'SequenceDiagram' :
-			code = `sequenceDiagram
-	Alice->>+John: Hello John, how are you?
-	Alice->>+John: John, can you hear me?
-	John-->>-Alice: Hi Alice, I can hear you!
-	John-->>-Alice: I feel great!
-					`;
-			break;
-
-			case 'ClassDiagram' :
-			code = `classDiagram
-	Animal <|-- Duck
-	Animal <|-- Fish
-	Animal <|-- Zebra
-	Animal : +int age
-	Animal : +String gender
-	Animal: +isMammal()
-	Animal: +mate()
-	class Duck{
-		+String beakColor
-		+swim()
-		+quack()
-	}
-	class Fish{
-		-int sizeInFeet
-		-canEat()
-	}
-	class Zebra{
-		+bool is_wild
-		+run()
-	}
-					`;
-			break;
-
-			case 'StateDiagram' :
-			code = `stateDiagram
-	[*] --> Still
-	Still --> [*]
-
-	Still --> Moving
-	Moving --> Still
-	Moving --> Crash
-	Crash --> [*]
-					`;
-			break;
-
-			case 'GanttChart' :
-			code = `gantt
-	title A Gantt Diagram
-	dateFormat  YYYY-MM-DD
-	section Section
-	A task           :a1, 2014-01-01, 30d
-	Another task     :after a1  , 20d
-	section Another
-	Task in sec      :2014-01-12  , 12d
-	another task      : 24d
-					`;
-			break;
-
-		case 'PieChart' :
-			code = `pie title Pets adopted by volunteers
-	"Dogs" : 386
-	"Cats" : 85
-	"Rats" : 15
-					`;
-			break;
-		case 'ERDiagram' :
-			code = `erDiagram
-        CUSTOMER }|..|{ DELIVERY-ADDRESS : has
-        CUSTOMER ||--o{ ORDER : places
-        CUSTOMER ||--o{ INVOICE : "liable for"
-        DELIVERY-ADDRESS ||--o{ ORDER : receives
-        INVOICE ||--|{ ORDER : covers
-        ORDER ||--|{ ORDER-ITEM : includes
-        PRODUCT-CATEGORY ||--|{ PRODUCT : contains
-        PRODUCT ||--o{ ORDER-ITEM : "ordered in"
-					`;
-			break;
-		}
-
-		let newState = { code, mermaid: { theme: 'default' }, updateEditor:true };
-		updateCodeStore(newState);
-
-	}
-
+    import { onMount } from "svelte";
+    import { updateCodeStore } from "../code-store.js";
+    import Editor from "../components/Editor.svelte";
+    import Config from "../components/Config.svelte";
+    import View from "../components/View.svelte";
+    import Card from "../components/Card.svelte";
+    import Tag from "../components/Tag.svelte";
+    import Links from "../components/Links.svelte";
+    import { fromUrl } from "../code-store.js";
+    // import pkg from '@mermaid-js/mermaid/package.json'
+    import pkg from "@mermaid/package.json";
+    export let mermaidVersion = pkg.version;
+    onMount(async () => {
+        ga("send", "pageview");
+        ga("send", "event", "version", mermaidVersion, mermaidVersion);
+        fromUrl(params.data);
+    });
+    // export let code = '';
+    // export let classes = '';
+    // export let error = {};
+    // export let token = '';
+    // export let expected = '';
+    export let params = {};
+    function loadFlowChart() {
+        loadSampleDiagram("FlowChart");
+    }
+    function loadSequenceDiagram() {
+        loadSampleDiagram("SequenceDiagram");
+    }
+    function loadClassDiagram() {
+        loadSampleDiagram("ClassDiagram");
+    }
+    function loadStateDiagram() {
+        loadSampleDiagram("StateDiagram");
+    }
+    function loadGanttChart() {
+        loadSampleDiagram("GanttChart");
+    }
+    function loadPieChart() {
+        loadSampleDiagram("PieChart");
+    }
+    function loadERDiagram() {
+        loadSampleDiagram("ERDiagram");
+    }
+    function loadSampleDiagram(diagramType) {
+        let code = "";
+        switch (diagramType) {
+            case "FlowChart":
+                code = `graph TD
+    A[Christmas] -->|Get money| B(Go shopping)
+    B --> C{Let me think}
+    C -->|One| D[Laptop]
+    C -->|Two| E[iPhone]
+    C -->|Three| F[fa:fa-car Car]
+            `;
+                break;
+            case "SequenceDiagram":
+                code = `sequenceDiagram
+    Alice->>+John: Hello John, how are you?
+    Alice->>+John: John, can you hear me?
+    John-->>-Alice: Hi Alice, I can hear you!
+    John-->>-Alice: I feel great!
+            `;
+                break;
+            case "ClassDiagram":
+                code = `classDiagram
+    Animal <|-- Duck
+    Animal <|-- Fish
+    Animal <|-- Zebra
+    Animal : +int age
+    Animal : +String gender
+    Animal: +isMammal()
+    Animal: +mate()
+    class Duck{
+      +String beakColor
+      +swim()
+      +quack()
+    }
+    class Fish{
+      -int sizeInFeet
+      -canEat()
+    }
+    class Zebra{
+      +bool is_wild
+      +run()
+    }
+            `;
+                break;
+            case "StateDiagram":
+                code = `stateDiagram
+    [*] --> Still
+    Still --> [*]
+    Still --> Moving
+    Moving --> Still
+    Moving --> Crash
+    Crash --> [*]
+            `;
+                break;
+            case "GanttChart":
+                code = `gantt
+    title A Gantt Diagram
+    dateFormat  YYYY-MM-DD
+    section Section
+    A task           :a1, 2014-01-01, 30d
+    Another task     :after a1  , 20d
+    section Another
+    Task in sec      :2014-01-12  , 12d
+    another task      : 24d
+            `;
+                break;
+            case "PieChart":
+                code = `pie title Pets adopted by volunteers
+    "Dogs" : 386
+    "Cats" : 85
+    "Rats" : 15
+            `;
+                break;
+            case "ERDiagram":
+                code = `erDiagram
+          CUSTOMER }|..|{ DELIVERY-ADDRESS : has
+          CUSTOMER ||--o{ ORDER : places
+          CUSTOMER ||--o{ INVOICE : "liable for"
+          DELIVERY-ADDRESS ||--o{ ORDER : receives
+          INVOICE ||--|{ ORDER : covers
+          ORDER ||--|{ ORDER-ITEM : includes
+          PRODUCT-CATEGORY ||--|{ PRODUCT : contains
+          PRODUCT ||--o{ ORDER-ITEM : "ordered in"
+            `;
+                break;
+        }
+        let newState = {
+            code,
+            mermaid: { theme: "default" },
+            updateEditor: true,
+        };
+        updateCodeStore(newState);
+    }
 </script>
 
 <style>
-	#editor-root {
-		display: flex;
-		height: 100%;
-	}
-
-	#col1 {
-		width: 35%;
-	}
-	#col2 {
-		width: 65%;
-		padding-left: 32px;
-	}
-	#app-title {
-		border-bottom:  1px solid lightgrey;
-		padding-bottom: 32px;
-		margin-bottom: 32px;
-		font-size: 28px;
-		font-weight: 400;
-		margin-top: 0;
-	}
-
-	#power {
-		width: 100%;
-    display: flex;
-    justify-content: flex-end;
-		align-items: center;
-	}
-
-	#sampleLoader {
-		padding-bottom: 10px;
-		padding-left:10px;
-
-	}
-	.botton-container{
-		margin-top:5px;
-	}
-
+    #body {
+        font-family: "Roboto", sans-serif;
+        background-color: #fcfbfc;
+    }
+    #editor-root {
+        display: flex;
+        height: 100%;
+    }
+    #col1 {
+        width: 35%;
+    }
+    #col2 {
+        width: 65%;
+        padding-left: 32px;
+    }
+    #link-root {
+        display: flex;
+        height: fit-content;
+    }
+    #link-col1 {
+        width: 50%;
+    }
+    #link-col2 {
+        width: 50%;
+        padding-left: 32px;
+    }
+    #app-title {
+        font-family: "Playfair Display", serif;
+        font-size: 32px;
+        font-weight: 700;
+        margin: 0;
+        color: #1e60ab;
+        opacity: 0.8;
+    }
+    #title-container {
+        width: fit-content;
+        margin: 0 auto 16px;
+        padding-bottom: 16px;
+    }
+    #power {
+        width: 100%;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        height: 4rem;
+    }
+    #sampleLoader {
+        padding-bottom: 10px;
+        padding-left: 10px;
+        border-bottom: 1px solid lightgray;
+    }
+    .button-container {
+        margin-top: 5px;
+    }
+    .button-style {
+        background-color: #a2d9e2;
+        color: #33a2c4;
+        border-radius: 0.25rem;
+        padding: 0.5rem;
+        border: 1px solid #a2d9e2;
+        margin: 0.25rem;
+    }
+    .button-style:hover {
+        background-color: #fff;
+        color: #33a2c4;
+        border: 1px solid #33a2c4;
+    }
+    .button-style:focus {
+        outline: none;
+    }
+    .link-style {
+        text-decoration: none;
+        color: #33a2c4;
+    }
 </style>
-<div>
-	<h1 id="app-title">Mermaid Live Editor</h1>
-	<div id="editor-root">
-		<div id="col1">
-			<Card title="Code" noPadding="true">
-			<div id="sampleLoader">Load sample diagram :<br/>
-				<div class="botton-container">
-				<button on:click={loadFlowChart}>Flow Chart</button>
-				<button on:click={loadSequenceDiagram}>Sequence Diagram</button>
-				<button on:click={loadClassDiagram}>Class Diagram</button>
-				<button on:click={loadStateDiagram}>State Diagram</button>
-				<button on:click={loadGanttChart}>Gantt Chart</button>
-				<button on:click={loadPieChart}>Pie Chart </button>
-				<button on:click={loadERDiagram}>ER Diagram </button>
-			</div>
-			</div>
-				<Editor data={params.data}/>
-			</Card>
-			<Card title="Mermaid Configuration" ><Config /></Card>
-			<Card title='Links'>
-				<ul className='marketing-links'>
-					<li>
-						<a href='https://mermaid-js.github.io/mermaid' target='_blank'>
-							Mermaid Documentation
-						</a>
-					</li>
-					<li>
-						<a href='https://github.com/mermaid-js/mermaid' target='_blank'>
-							Mermaid on GitHub
-						</a>
-					</li>
-					<li>
-						<a
-							href='https://github.com/mermaid-js/mermaid-live-editor'
-							target='_blank'
-						>
-							Live Editor on GitHub
-						</a>
-					</li>
-					<li>
-						<a
-							href='https://github.com/mermaid-js/mermaid-cli'
-							target='_blank'
-						>
-							Mermaid CLI
-						</a>
-					</li>
-				</ul>
-			</Card>
-		</div>
-		<div id="col2">
-			<Card title="Preview"><View /></Card>
-			<Card title="Actions"><Links /></Card>
-			<div id="power">
-				Powered by mermaid <Tag color='green'>{mermaidVersion}</Tag>
-			</div>
-		</div>
-	</div>
+
+<div id="body">
+    <div id="title-container">
+        <h1 id="app-title">Mermaid Live Editor</h1>
+    </div>
+    <div id="editor-root">
+        <div id="col1">
+            <Card title="Code" noPadding="true">
+                <div id="sampleLoader">
+                    <span id="sampleLoaderTitle">Sample Diagram Options</span>
+                    <br />
+                    <div class="button-container">
+                        <button class="button-style" on:click={loadFlowChart}>
+                            Flow Chart
+                        </button>
+                        <button
+                            class="button-style"
+                            on:click={loadSequenceDiagram}>
+                            Sequence Diagram
+                        </button>
+                        <button
+                            class="button-style"
+                            on:click={loadClassDiagram}>
+                            Class Diagram
+                        </button>
+                        <button
+                            class="button-style"
+                            on:click={loadStateDiagram}>
+                            State Diagram
+                        </button>
+                        <button class="button-style" on:click={loadGanttChart}>
+                            Gantt Chart
+                        </button>
+                        <button class="button-style" on:click={loadPieChart}>
+                            Pie Chart
+                        </button>
+                        <button class="button-style" on:click={loadERDiagram}>
+                            ER Diagram
+                        </button>
+                    </div>
+                </div>
+                <Editor data={params.data} />
+            </Card>
+            <Card title="Mermaid Configuration">
+                <Config />
+            </Card>
+
+        </div>
+        <div id="col2">
+            <Card title="Preview">
+                <View />
+            </Card>
+            <div id="link-root">
+                <div id="link-col1">
+                    <Card title="Actions">
+                        <Links />
+                    </Card>
+                </div>
+                <div id="link-col2">
+                    <Card title="Links">
+                        <div class="button-container">
+                            <button class="button-style">
+                                <a
+                                    href="https://mermaid-js.github.io/mermaid"
+                                    target="_blank"
+                                    class="link-style">
+                                    Mermaid Documentation
+                                </a>
+                            </button>
+                            <button class="button-style">
+                                <a
+                                    href="https://github.com/mermaid-js/mermaid"
+                                    target="_blank"
+                                    class="link-style">
+                                    Mermaid on GitHub
+                                </a>
+                            </button>
+                            <button class="button-style">
+                                <a
+                                    href="https://github.com/mermaid-js/mermaid-live-editor"
+                                    target="_blank"
+                                    class="link-style">
+                                    Live Editor on GitHub
+                                </a>
+                            </button>
+                            <button class="button-style">
+                                <a
+                                    href="https://github.com/mermaid-js/mermaid-cli"
+                                    target="_blank"
+                                    class="link-style">
+                                    Mermaid CLI
+                                </a>
+                            </button>
+                        </div>
+                    </Card>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="power">
+        Powered by mermaid
+        <Tag color="green">{mermaidVersion}</Tag>
+    </div>
 </div>