diff --git a/src/assets/og_bg_default.jpg b/src/assets/og_bg_default.jpg
new file mode 100644
index 00000000..452885d1
Binary files /dev/null and b/src/assets/og_bg_default.jpg differ
diff --git a/src/assets/tutorial.png b/src/assets/tutorial.png
new file mode 100644
index 00000000..008b1b13
Binary files /dev/null and b/src/assets/tutorial.png differ
diff --git a/src/components/ContentWrap.jsx b/src/components/ContentWrap.jsx
index 863e5a07..5d1a894f 100644
--- a/src/components/ContentWrap.jsx
+++ b/src/components/ContentWrap.jsx
@@ -1,21 +1,21 @@
 import React, { Component } from 'preact';
-import { saveAs } from 'file-saver'
+import { saveAs } from 'file-saver';
 import UserCodeMirror from './UserCodeMirror.jsx';
 import Toolbox from './Toolbox.jsx';
 import Tabs from './Tabs.jsx';
 import { computeCss, computeHtml, computeJs } from '../computes';
 import { CssModes, HtmlModes, JsModes, modes } from '../codeModes';
-import { getCompleteHtml, loadJS, log, blobToBase64 } from '../utils';
+import { getCompleteHtml, loadJS, log } from '../utils';
 
 import { Button } from './common';
 import { SplitPane } from './SplitPane.jsx';
 import { trackEvent } from '../analytics';
 import CodeMirror from '../CodeMirror';
-import 'codemirror/mode/javascript/javascript.js'
+import 'codemirror/mode/javascript/javascript.js';
 import { Console } from './Console';
 import { deferred } from '../deferred';
 import CssSettingsModal from './CssSettingsModal';
-import codeService from '../services/code_service'
+import codeService from '../services/code_service';
 import { alertsService } from '../notifications';
 import { Popover } from './PopOver.jsx';
 import { SharePanel } from './SharePanel.jsx';
@@ -31,7 +31,9 @@ export default class ContentWrap extends Component {
 		this.state = {
 			lineOfCode: 0,
 			isConsoleOpen: false,
-			isCssSettingsModalOpen: false
+			isCssSettingsModalOpen: false,
+			imageBase64: null,
+			isSharePanelVisible: false,
 		};
 		this.updateTimer = null;
 		this.updateDelay = 500;
@@ -68,7 +70,10 @@ export default class ContentWrap extends Component {
 	}
 
 	componentWillUnmount() {
-		window.removeEventListener('message', this.handleMessageCodeUpdate.bind(this));
+		window.removeEventListener(
+			'message',
+			this.handleMessageCodeUpdate.bind(this)
+		);
 	}
 
 	handleMessageCodeUpdate(e) {
@@ -105,9 +110,10 @@ export default class ContentWrap extends Component {
 			change.origin !== 'setValue'
 		);
 
-		const targetWindow = this.detachedWindow || document.getElementById('demo-frame').contentWindow;
+		const targetWindow =
+			this.detachedWindow ||
+			document.getElementById('demo-frame').contentWindow;
 		targetWindow.postMessage({ code: this.cmCodes.js }, '*');
-
 	}
 	onCursorMove(editor) {
 		const cursor = editor.getCursor();
@@ -115,10 +121,12 @@ export default class ContentWrap extends Component {
 		let pos = cursor.ch;
 
 		for (let i = 0; i < line; i++) {
-			pos += editor.getLine(i).length + 1
+			pos += editor.getLine(i).length + 1;
 		}
 
-		const targetWindow = this.detachedWindow || document.getElementById('demo-frame').contentWindow;
+		const targetWindow =
+			this.detachedWindow ||
+			document.getElementById('demo-frame').contentWindow;
 		targetWindow.postMessage({ cursor: pos }, '*');
 	}
 	onCodeChange(editor, change) {
@@ -139,7 +147,7 @@ export default class ContentWrap extends Component {
 				if (trackEvent.previewCount === 4) {
 					trackEvent('fn', 'usingPreview');
 				}
-				if ((trackEvent.previewCount % 4) === 0) {
+				if (trackEvent.previewCount % 4 === 0) {
 					trackEvent('fn', 'userEdit', '', trackEvent.previewCount);
 				}
 			}
@@ -165,8 +173,8 @@ export default class ContentWrap extends Component {
 		}
 		const that = this;
 		that.frame.onload = function () {
-			that.frame.contentWindow.postMessage({ code: that.cmCodes.js }, '*')
-		}
+			that.frame.contentWindow.postMessage({ code: that.cmCodes.js }, '*');
+		};
 
 		if (this.detachedWindow) {
 			this.detachedWindow.postMessage({ contents }, '*');
@@ -214,7 +222,7 @@ export default class ContentWrap extends Component {
 
 		var currentCode = {
 			css: this.cmCodes.css,
-			js: this.cmCodes.js
+			js: this.cmCodes.js,
 		};
 		log('🔎 setPreviewContent', isForced);
 		const targetFrame = this.detachedWindow
@@ -224,15 +232,12 @@ export default class ContentWrap extends Component {
 		const cssMode = this.props.currentItem.cssMode;
 		// If just CSS was changed (and everything shudn't be empty),
 		// change the styles inside the iframe.
-		if (
-			!isForced &&
-			currentCode.js === this.codeInPreview.js
-		) {
+		if (!isForced && currentCode.js === this.codeInPreview.js) {
 			computeCss(
 				cssMode === CssModes.ACSS ? currentCode.html : currentCode.css,
 				cssMode,
 				this.props.currentItem.cssSettings
-			).then(result => {
+			).then((result) => {
 				if (cssMode === CssModes.ACSS) {
 					this.cm.css.setValue(result.code || '');
 				}
@@ -258,7 +263,7 @@ export default class ContentWrap extends Component {
 				true,
 				this.props.prefs.infiniteLoopTimeout
 			);
-			Promise.all([htmlPromise, cssPromise, jsPromise]).then(result => {
+			Promise.all([htmlPromise, cssPromise, jsPromise]).then((result) => {
 				if (cssMode === CssModes.ACSS) {
 					this.cm.css.setValue(result[1].code || '');
 				}
@@ -268,7 +273,7 @@ export default class ContentWrap extends Component {
 					result[1].code || '',
 					result[2].code || ''
 				);
-				result.forEach(resultItem => {
+				result.forEach((resultItem) => {
 					if (resultItem.errors) {
 						this.showErrors(resultItem.errors.lang, resultItem.errors.data);
 					}
@@ -298,38 +303,38 @@ export default class ContentWrap extends Component {
 		Promise.all([
 			this.updateHtmlMode(this.props.currentItem.htmlMode),
 			this.updateCssMode(this.props.currentItem.cssMode),
-			this.updateJsMode(this.props.currentItem.jsMode)
+			this.updateJsMode(this.props.currentItem.jsMode),
 		]).then(() => this.setPreviewContent(true));
 	}
 	applyCodemirrorSettings(prefs) {
 		if (!this.cm) {
 			return;
 		}
-		cssCodeEl.querySelector(
-			'.CodeMirror'
-		).style.fontSize = jsCodeEl.querySelector(
-			'.CodeMirror'
-		).style.fontSize = `${parseInt(prefs.fontSize, 10)}px`;
+		cssCodeEl.querySelector('.CodeMirror').style.fontSize =
+			jsCodeEl.querySelector('.CodeMirror').style.fontSize = `${parseInt(
+				prefs.fontSize,
+				10
+			)}px`;
 		window.consoleEl.querySelector('.CodeMirror').style.fontSize = `${parseInt(
 			prefs.fontSize,
 			10
 		)}px`;
 
 		// Replace correct css file in LINK tags's href
-		window.editorThemeLinkTag.href = `lib/codemirror/theme/${prefs.editorTheme
-			}.css`;
-		window.fontStyleTag.textContent = window.fontStyleTemplate.textContent.replace(
-			/fontname/g,
-			(prefs.editorFont === 'other'
-				? prefs.editorCustomFont
-				: prefs.editorFont) || 'FiraCode'
-		);
+		window.editorThemeLinkTag.href = `lib/codemirror/theme/${prefs.editorTheme}.css`;
+		window.fontStyleTag.textContent =
+			window.fontStyleTemplate.textContent.replace(
+				/fontname/g,
+				(prefs.editorFont === 'other'
+					? prefs.editorCustomFont
+					: prefs.editorFont) || 'FiraCode'
+			);
 		// window.customEditorFontInput.classList[
 		// 	prefs.editorFont === 'other' ? 'remove' : 'add'
 		// ]('hide');
 		this.consoleCm.setOption('theme', prefs.editorTheme);
 
-		['js', 'css'].forEach(type => {
+		['js', 'css'].forEach((type) => {
 			this.cm[type].setOption('indentWithTabs', prefs.indentWith !== 'spaces');
 			this.cm[type].setOption(
 				'blastCode',
@@ -384,7 +389,7 @@ export default class ContentWrap extends Component {
 			var arr = [
 				`${minCodeWrapSize}px`,
 				`${minCodeWrapSize}px`,
-				`${minCodeWrapSize}px`
+				`${minCodeWrapSize}px`,
 			];
 			arr[id] = `calc(100% - ${minCodeWrapSize * 2}px)`;
 
@@ -415,9 +420,12 @@ export default class ContentWrap extends Component {
 	}
 
 	async getPngBlob() {
-		const mountingPoint = this.frame.contentWindow.document.getElementById('diagram');
+		const mountingPoint =
+			this.frame.contentWindow.document.getElementById('diagram');
 		// eslint-disable-next-line
-		return await mountingPoint.getElementsByClassName('frame')[0].parentElement.__vue__.toBlob();
+		return await mountingPoint
+			.getElementsByClassName('frame')[0]
+			.parentElement.__vue__.toBlob();
 	}
 
 	async copyImageClickHandler(e) {
@@ -426,40 +434,43 @@ export default class ContentWrap extends Component {
 			trackEvent('ui', 'copyImageFailed1');
 			return;
 		}
-		navigator.clipboard.write([
-			new ClipboardItem({
-				"image/png": new Promise(async resolve => {
-					const png = await this.getPngBlob();
-					resolve(png);
-				})
-			})
-		]).then(
-			() => alertsService.add("PNG file was copied"),
-			err => {
-				this.showCopyErrorNotice();
-				console.log(err);
-				trackEvent('ui', 'copyImageFailed2');
-			}
-		);
+		navigator.clipboard
+			.write([
+				new ClipboardItem({
+					'image/png': new Promise(async (resolve) => {
+						const png = await this.getPngBlob();
+						resolve(png);
+					}),
+				}),
+			])
+			.then(
+				() => alertsService.add('PNG file was copied'),
+				(err) => {
+					this.showCopyErrorNotice();
+					console.log(err);
+					trackEvent('ui', 'copyImageFailed2');
+				}
+			);
 		trackEvent('ui', 'copyImage');
 	}
 
-
 	showCopyErrorNotice() {
-		alertsService.add("Copy failed, please try on another browser or upgrade your browser!");
+		alertsService.add(
+			'Copy failed, please try on another browser or upgrade your browser!'
+		);
 	}
 
-	async shareClickHandler(e) {
-		const imageBlob = await this.getPngBlob();
-		this.props.currentItem.imageBase64 = await blobToBase64(imageBlob);
-		
-		trackEvent('ui', 'shareSurvey');
+	async shareClickHandler() {
+		const image = await this.getPngBlob();
+		await this.props.onUpdateImage(image);
+		this.setState({ isSharePanelVisible: true });
+		trackEvent('ui', 'shareLink');
 	}
 
 	async resetSplitting() {
 		await this.setState({
 			codeSplitSizes: this.getCodeSplitSizes(),
-			mainSplitSizes: this.getMainSplitSizesToApply()
+			mainSplitSizes: this.getMainSplitSizesToApply(),
 		});
 	}
 	updateSplits() {
@@ -592,9 +603,10 @@ export default class ContentWrap extends Component {
 	codeModeChangeHandler(e) {
 		var mode = e.target.value;
 		var type = e.target.dataset.type;
-		var currentMode = this.props.currentItem[
-			type === 'html' ? 'htmlMode' : type === 'css' ? 'cssMode' : 'jsMode'
-		];
+		var currentMode =
+			this.props.currentItem[
+				type === 'html' ? 'htmlMode' : type === 'css' ? 'cssMode' : 'jsMode'
+			];
 		if (currentMode !== mode) {
 			if (type === 'html') {
 				this.updateHtmlMode(mode).then(() => this.setPreviewContent(true));
@@ -625,13 +637,13 @@ export default class ContentWrap extends Component {
 		const that = this;
 		this.detachedWindow.onload = function () {
 			that.setPreviewContent(true);
-			const frm = that.detachedWindow.document.querySelector('iframe')
+			const frm = that.detachedWindow.document.querySelector('iframe');
 			frm.onload = function () {
 				that.detachedWindow.postMessage({ code: that.cmCodes.js }, '*');
-			}
-		}
+			};
+		};
 
-		var intervalID = window.setInterval(checkWindow => {
+		var intervalID = window.setInterval((checkWindow) => {
 			if (this.detachedWindow && this.detachedWindow.closed) {
 				clearInterval(intervalID);
 				document.body.classList.remove('is-detached-mode');
@@ -651,7 +663,7 @@ export default class ContentWrap extends Component {
 
 	onMessageFromConsole() {
 		/* eslint-disable no-param-reassign */
-		[...arguments].forEach(arg => {
+		[...arguments].forEach((arg) => {
 			if (
 				arg &&
 				arg.indexOf &&
@@ -665,16 +677,16 @@ export default class ContentWrap extends Component {
 			try {
 				this.consoleCm.replaceRange(
 					arg +
-					' ' +
-					((arg + '').match(/\[object \w+]/) ? JSON.stringify(arg) : '') +
-					'\n',
+						' ' +
+						((arg + '').match(/\[object \w+]/) ? JSON.stringify(arg) : '') +
+						'\n',
 					{
-						line: Infinity
+						line: Infinity,
 					}
 				);
 			} catch (e) {
 				this.consoleCm.replaceRange('🌀\n', {
-					line: Infinity
+					line: Infinity,
 				});
 			}
 			this.consoleCm.scrollTo(0, Infinity);
@@ -744,7 +756,7 @@ export default class ContentWrap extends Component {
 	}
 
 	resetTabs() {
-		this.tabsRef.onInit()
+		this.tabsRef.onInit();
 	}
 
 	onTabChanges(tab) {
@@ -775,7 +787,8 @@ export default class ContentWrap extends Component {
 				onDragEnd={this.mainSplitDragEndHandler.bind(this)}
 			>
 				<div id="js-code-side">
-					<Tabs ref={tabs => (this.tabsRef = tabs)}
+					<Tabs
+						ref={(tabs) => (this.tabsRef = tabs)}
 						onChange={this.onTabChanges.bind(this)}
 						style="height: 100%;display:flex;flex-direction: column;"
 					>
@@ -818,22 +831,25 @@ export default class ContentWrap extends Component {
 							</div> */}
 								<Toolbox clickSvg={this.toolboxUpdateToApp.bind(this)} />
 								<UserCodeMirror
-									ref={dslEditor => (this.dslEditor = dslEditor)}
+									ref={(dslEditor) => (this.dslEditor = dslEditor)}
 									options={{
 										mode: 'htmlmixed',
 										profile: 'xhtml',
-										gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
+										gutters: [
+											'CodeMirror-linenumbers',
+											'CodeMirror-foldgutter',
+										],
 										noAutocomplete: true,
 										matchTags: { bothTags: true },
 										prettier: true,
 										prettierParser: 'html',
-										emmet: true
+										emmet: true,
 									}}
 									prefs={this.props.prefs}
 									autoComplete={this.props.prefs.autoComplete}
 									onChange={this.onJsCodeChange.bind(this)}
 									onCursorMove={this.onCursorMove.bind(this)}
-									onCreation={el => (this.cm.js = el)}
+									onCreation={(el) => (this.cm.js = el)}
 									onFocus={this.editorFocusHandler.bind(this)}
 								/>
 								{/* Inlet(scope.cm.js); */}
@@ -847,7 +863,6 @@ export default class ContentWrap extends Component {
 								className="code-wrap"
 								onTransitionEnd={this.updateCodeWrapCollapseStates.bind(this)}
 							>
-
 								<div
 									className="js-code-wrap__header  code-wrap__header"
 									title="Double click to toggle code pane"
@@ -893,27 +908,26 @@ export default class ContentWrap extends Component {
 									</div>
 								</div>
 								<UserCodeMirror
-									ref={cssEditor => (this.cssEditor = cssEditor)}
+									ref={(cssEditor) => (this.cssEditor = cssEditor)}
 									options={{
 										mode: 'css',
 										gutters: [
 											'error-gutter',
 											'CodeMirror-linenumbers',
-											'CodeMirror-foldgutter'
+											'CodeMirror-foldgutter',
 										],
 										emmet: true,
 										prettier: true,
-										prettierParser: 'css'
+										prettierParser: 'css',
 									}}
 									prefs={this.props.prefs}
 									onChange={this.onCssCodeChange.bind(this)}
-									onCreation={el => (this.cm.css = el)}
+									onCreation={(el) => (this.cm.css = el)}
 									onFocus={this.editorFocusHandler.bind(this)}
 								/>
 							</div>
 						</div>
 						<div label="Cheat sheet">
-
 							<div
 								data-code-wrap-id="0"
 								id="htmlCodeEl"
@@ -944,7 +958,11 @@ export default class ContentWrap extends Component {
 										</tr>
 										<tr>
 											<td>Participant</td>
-											<td>ParticipantA<br />ParticipantB</td>
+											<td>
+												ParticipantA
+												<br />
+												ParticipantB
+											</td>
 										</tr>
 										<tr>
 											<td>Message</td>
@@ -956,7 +974,13 @@ export default class ContentWrap extends Component {
 										</tr>
 										<tr>
 											<td>Nested message</td>
-											<td>A.messageA() {'{'}<br />&nbsp;&nbsp;B.messageB()<br />{'}'}</td>
+											<td>
+												A.messageA() {'{'}
+												<br />
+												&nbsp;&nbsp;B.messageB()
+												<br />
+												{'}'}
+											</td>
 										</tr>
 										<tr>
 											<td class="tg-0pky">Self-message</td>
@@ -964,11 +988,31 @@ export default class ContentWrap extends Component {
 										</tr>
 										<tr>
 											<td>Alt</td>
-											<td>if (condition1) {'{'}<br />&nbsp;&nbsp;A.methodA()<br />{'}'} else if (condition2) {'{'}<br />&nbsp;&nbsp;B.methodB()<br />{'}'} else {'{'}<br />&nbsp;&nbsp;C.methodC()<br />{'}'}</td>
+											<td>
+												if (condition1) {'{'}
+												<br />
+												&nbsp;&nbsp;A.methodA()
+												<br />
+												{'}'} else if (condition2) {'{'}
+												<br />
+												&nbsp;&nbsp;B.methodB()
+												<br />
+												{'}'} else {'{'}
+												<br />
+												&nbsp;&nbsp;C.methodC()
+												<br />
+												{'}'}
+											</td>
 										</tr>
 										<tr>
 											<td>Loop</td>
-											<td>while (condition) {'{'}<br />&nbsp;&nbsp;A.methodA()<br />{'}'}</td>
+											<td>
+												while (condition) {'{'}
+												<br />
+												&nbsp;&nbsp;A.methodA()
+												<br />
+												{'}'}
+											</td>
 										</tr>
 									</table>
 								</div>
@@ -994,37 +1038,70 @@ export default class ContentWrap extends Component {
 				{/**/}
 				{/**/}
 				{/*</Tabs>*/}
-				<div class="demo-side" id="js-demo-side" style="overflow-y: auto; -webkit-overflow-scrolling: touch;">
-					{window.zenumlDesktop ? (null) : (
-						<div className='promotion'>
+				<div
+					class="demo-side"
+					id="js-demo-side"
+					style="overflow-y: auto; -webkit-overflow-scrolling: touch;"
+				>
+					{window.zenumlDesktop ? null : (
+						<div className="promotion">
 							<div className="actions">
-								<Popover
-									trigger={
-										<Button
-											className="button icon-button hint--rounded hint--bottom-left"
-											/* Highlight this button for more traction */
-											style="background-color: #ffa900; color: #fff;"
-											aria-label="Share Your Work"
-											onClick={this.shareClickHandler.bind(this)}>
-											<span className="material-symbols-outlined">share</span>
-											<span>Share</span>
-										</Button>
-									}
-									content={
-										<SharePanel id={0} dsl={''} image={''} currentItem={this.props.currentItem} />
-									}
-								/>
+								{!window.user ? (
+									<Button
+										className="button icon-button hint--rounded hint--bottom-left"
+										/* Highlight this button for more traction */
+										style="background-color: #ffa900; color: #fff;"
+										aria-label="Share Your Work"
+										onClick={this.props.onLogin.bind(this)}
+									>
+										<span className="material-symbols-outlined">share</span>
+										<span>Share</span>
+									</Button>
+								) : (
+									<Popover
+										closeOnBlur={true}
+										hasArrow={true}
+										placement={'bottom'}
+										isVisible={this.state.isSharePanelVisible}
+										onVisibilityChange={(isVisible) =>
+											this.setState({ isSharePanelVisible: isVisible })
+										}
+										trigger={
+											<Button
+												className="button icon-button hint--rounded hint--bottom-left"
+												/* Highlight this button for more traction */
+												style="background-color: #ffa900; color: #fff;"
+												aria-label="Share Your Work"
+												onClick={this.shareClickHandler.bind(this)}
+											>
+												<span className="material-symbols-outlined">share</span>
+												<span>Share</span>
+											</Button>
+										}
+										content={
+											<SharePanel
+												author={
+													window.user ? window.user.displayName : 'author'
+												}
+												currentItem={this.props.currentItem}
+												imageBase64={this.state.imageBase64}
+											/>
+										}
+									/>
+								)}
 								<Button
 									className="btn--dark button icon-button hint--rounded hint--bottom-left"
 									aria-label="Export as PNG"
-									onClick={this.exportPngClickHandler.bind(this)}>
+									onClick={this.exportPngClickHandler.bind(this)}
+								>
 									<span class="material-symbols-outlined">file_download</span>
 									<span>PNG</span>
 								</Button>
 								<Button
 									className="btn--dark button icon-button hint--rounded hint--bottom-left"
 									aria-label="Copy PNG to Clipboard"
-									onClick={this.copyImageClickHandler.bind(this)}>
+									onClick={this.copyImageClickHandler.bind(this)}
+								>
 									<span class="material-symbols-outlined">file_copy</span>
 									<span>Copy PNG</span>
 								</Button>
@@ -1033,7 +1110,7 @@ export default class ContentWrap extends Component {
 					)}
 
 					<iframe
-						ref={el => (this.frame = el)}
+						ref={(el) => (this.frame = el)}
 						frameborder="0"
 						id="demo-frame"
 						allowfullscreen
@@ -1046,7 +1123,7 @@ export default class ContentWrap extends Component {
 						onClearConsoleBtnClick={this.clearConsoleBtnClickHandler.bind(this)}
 						toggleConsole={this.toggleConsole.bind(this)}
 						onEvalInputKeyup={this.evalConsoleExpr.bind(this)}
-						onReady={el => (this.consoleCm = el)}
+						onReady={(el) => (this.consoleCm = el)}
 					/>
 					<CssSettingsModal
 						show={this.state.isCssSettingsModalOpen}
diff --git a/src/components/PopOver.jsx b/src/components/PopOver.jsx
index 7b07e411..6cf2a43e 100644
--- a/src/components/PopOver.jsx
+++ b/src/components/PopOver.jsx
@@ -1,7 +1,6 @@
 import { Component, createRef } from 'preact';
 import PropTypes from 'prop-types';
 
-
 export class Popover extends Component {
 	constructor(props) {
 		super(props);
@@ -12,40 +11,61 @@ export class Popover extends Component {
 	}
 
 	componentDidMount() {
-		document.addEventListener('click', this.handleDocumentClick, true);
+		document.addEventListener(
+			'click',
+			this.handleDocumentClick.bind(this),
+			true
+		);
 	}
 
 	componentWillUnmount() {
-		document.removeEventListener('click', this.handleDocumentClick);
+		document.removeEventListener('click', this.handleDocumentClick.bind(this));
 	}
 
 	togglePopover = () => {
-		this.setState((prevState) => ({
-			isVisible: !prevState.isVisible,
-		}));
+		if (this.props.isVisible !== undefined) {
+			this.props.onVisibilityChange &&
+				this.props.onVisibilityChange(!this.props.isVisible);
+		} else {
+			this.setState((prevState) => ({
+				isVisible: !prevState.isVisible,
+			}));
+		}
 	};
 
 	handleDocumentClick = (event) => {
-		if (this.popoverRef.current && !this.popoverRef.current.contains(event.target)) {
+		if (
+			this.popoverRef.current &&
+			!this.popoverRef.current.contains(event.target)
+		) {
+			this.props.onVisibilityChange && this.props.onVisibilityChange(false);
 			this.setState({ isVisible: false });
 		}
 	};
 
-
 	render() {
-		const { trigger, content } = this.props;
-		const { isVisible } = this.state;
+		const { trigger, content, closeOnBlur, placement, hasArrow, hasShadow } =
+			this.props;
+		const isVisible =
+			this.props.isVisible !== undefined
+				? this.props.isVisible
+				: this.state.isVisible;
 
 		return (
-			<div className="popover" >
+			<div className={`popover`}>
 				<div className="popover-trigger" onClick={this.togglePopover}>
 					{trigger}
 				</div>
 				{isVisible && (
 					<>
-						<div className="popover-backdrop" />
-						<div className="popover-content" ref={this.popoverRef}>
-							<div className="popover-arrow"></div>
+						{closeOnBlur && <div className="popover-backdrop" />}
+						<div
+							className={`popover-content ${placement}  ${
+								hasShadow ? 'shadow' : ''
+							}`}
+							ref={this.popoverRef}
+						>
+							{hasArrow && <div className={`popover-arrow`}></div>}
 							{content}
 						</div>
 					</>
@@ -55,8 +75,13 @@ export class Popover extends Component {
 	}
 }
 
-
 Popover.propTypes = {
 	trigger: PropTypes.node.isRequired,
 	content: PropTypes.node.isRequired,
-}
+	isVisible: PropTypes.bool,
+	onVisibilityChange: PropTypes.func,
+	closeOnBlur: PropTypes.bool,
+	hasArrow: PropTypes.bool,
+	hasShadow: PropTypes.bool,
+	placement: PropTypes.oneOf(['top', 'bottom']),
+};
diff --git a/src/components/PreviewCard.jsx b/src/components/PreviewCard.jsx
index 4a2e9480..297382c4 100644
--- a/src/components/PreviewCard.jsx
+++ b/src/components/PreviewCard.jsx
@@ -1,19 +1,29 @@
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
 
-export function PreviewCard({ title, description, image }) {
+export function PreviewCard({ title, author, description, imageBase64 }) {
 	return (
 		<div className="preview-card">
 			<div className="preview-card__content">
 				<div className="preview-card__title">
 					<img src="https://zenuml.cn/favicon.ico" />
-					<span>{title}</span>
+					<span className="text-ellipsis">{title}</span>
+				</div>
+				<div className="preview-card__subtitle">
+					<span class="material-symbols-outlined">account_circle</span>
+					<span className="text-ellipsis">Created by {author}</span>
 				</div>
 				<div className="preview-card__description">
-					<span>{description}</span>
+					<p>{description}</p>
+				</div>
+				<div className="preview-card__footer">
+					<img src="https://zenuml.cn/favicon.ico" />
+					<span>ZenUML</span>
 				</div>
 			</div>
 			<div className="preview-card__image">
-				<img src={image} />
+				<div className="overlay">
+					<img src={imageBase64} />
+				</div>
 			</div>
 		</div>
 	);
@@ -21,6 +31,7 @@ export function PreviewCard({ title, description, image }) {
 
 PreviewCard.propTypes = {
 	title: PropTypes.string.isRequired,
+	author: PropTypes.string.isRequired,
 	description: PropTypes.string.isRequired,
-	image: PropTypes.string.isRequired,
+	imageBase64: PropTypes.string,
 };
diff --git a/src/components/SharePanel.jsx b/src/components/SharePanel.jsx
index 993aa663..23e1a593 100644
--- a/src/components/SharePanel.jsx
+++ b/src/components/SharePanel.jsx
@@ -1,8 +1,9 @@
-
 import { Component } from 'preact';
 import PropTypes from 'prop-types';
 import { PreviewCard } from './PreviewCard';
 import { syncDiagram, getShareLink } from '../services/syncService';
+import { Popover } from './PopOver';
+import { Button } from './common';
 
 export class SharePanel extends Component {
 	constructor(props) {
@@ -10,11 +11,25 @@ export class SharePanel extends Component {
 		this.state = {
 			isLoading: true,
 			link: '',
-		}
+			isTooltipVisible: false,
+		};
 	}
 
 	async componentDidMount() {
-		const result = await syncDiagram(this.props.currentItem);
+		await this.syncDiagram(this.props.currentItem);
+	}
+
+	async componentDidUpdate(prevProps) {
+		if (prevProps.currentItem !== this.props.currentItem) {
+			await this.syncDiagram(this.props.currentItem);
+		}
+	}
+
+	async syncDiagram(currentItem) {
+		const result = await syncDiagram(currentItem);
+		if (!result) {
+			return;
+		}
 		this.setState({
 			isLoading: false,
 			link: getShareLink(result),
@@ -24,43 +39,71 @@ export class SharePanel extends Component {
 	handleCopyLink = () => {
 		const { link } = this.state;
 		navigator.clipboard.writeText(link);
-	}
+		this.setState({
+			isTooltipVisible: true,
+		});
+		setTimeout(() => {
+			this.setState({ isTooltipVisible: false });
+		}, 3000);
+	};
 
 	render() {
+		const { author, currentItem } = this.props;
 		const { link, isLoading } = this.state;
 
-
 		return (
 			<div className="share-panel">
-				<h3 style={{ marginTop: '4px' }}>Share the Diagram on Confluence<sup>*</sup></h3>
+				<h3 style={{ marginTop: '4px' }}>
+					Share the Diagram on Confluence<sup>*</sup>
+				</h3>
 				<>
 					<div>
 						<p>Paste the link on Confluence and select "Display as a Card"</p>
-						<img width={200} height={100} style="background: #acacac" />
+						<img style="width: 100%;" src="../assets/tutorial.png" />
 					</div>
 					<br />
 					<div>
 						<h4 style="margin-bottom: 8px;">Preview</h4>
-						<div className="preview" >
+						<div className="preview">
 							<PreviewCard
-								title="ZenUML Sequence"
-								description="ZenUML Sequence"
-								image="https://zenuml.cn/storage/diagrams/3/79.png"
+								title={currentItem.title}
+								author={author}
+								description="Click and check the latest diagram. Install our Confluence plugin for an enhanced expperience when viewing in Confluence."
+								imageBase64={currentItem.imageBase64}
+							/>
+							<Popover
+								isVisible={this.state.isTooltipVisible}
+								placement={'top'}
+								hasShadow={true}
+								trigger={
+									<Button
+										aria-label="Copy link"
+										className="button icon-button copy-button"
+										title={link}
+										onClick={this.handleCopyLink}
+										disabled={isLoading}
+									>
+										{isLoading ? (
+											<div className="loader" />
+										) : (
+											<span className="material-symbols-outlined">link</span>
+										)}
+										<span>Copy link</span>
+									</Button>
+								}
+								content={
+									<div className="tooltip">
+										<span class="material-symbols-outlined">check_circle</span>
+										<span>Link copied to clipboard</span>
+									</div>
+								}
 							/>
-							<button
-								aria-label="Copy link"
-								className="button icon-button copy-button" title={link}
-								onClick={this.handleCopyLink}
-							>
-								{isLoading ? <div className="loader" /> :
-									<span className="material-symbols-outlined">
-										link
-									</span>}
-								<span>Copy link</span>
-							</button>
 						</div>
 					</div>
-					<span className="footnote">* Anyone with the link can view the diagram. The view is optimised for Confluence.</span>
+					<span className="footnote">
+						* Anyone with the link can view the diagram. The view is optimised
+						for Confluence.
+					</span>
 				</>
 			</div>
 		);
@@ -68,9 +111,6 @@ export class SharePanel extends Component {
 }
 
 SharePanel.propTypes = {
-	id: PropTypes.string,
-	dsl: PropTypes.string,
-	email: PropTypes.string,
-	image: PropTypes.string,
+	author: PropTypes.string,
 	currentItem: PropTypes.object,
 };
diff --git a/src/components/Tooltip.jsx b/src/components/Tooltip.jsx
new file mode 100644
index 00000000..5ea9ee23
--- /dev/null
+++ b/src/components/Tooltip.jsx
@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+
+class Tooltip extends Component {
+	state = {
+		isTooltipVisible: false,
+	};
+
+	handleMouseOver = () => {
+		this.setState({ isTooltipVisible: true });
+	};
+
+	handleMouseOut = () => {
+		this.setState({ isTooltipVisible: false });
+	};
+
+	render() {
+		return (
+			<div>
+				{this.props.children}
+				{this.state.isTooltipVisible && (
+					<div className="tooltip">{this.props.children}</div>
+				)}
+			</div>
+		);
+	}
+}
diff --git a/src/components/app.jsx b/src/components/app.jsx
index 5f09fd43..488d3431 100644
--- a/src/components/app.jsx
+++ b/src/components/app.jsx
@@ -19,7 +19,7 @@ import {
 	downloadFile,
 	getCompleteHtml,
 	getFilenameFromUrl,
-	blobToBase64
+	blobToBase64,
 } from '../utils';
 import { itemService } from '../itemService';
 import '../db';
@@ -54,7 +54,7 @@ if (module.hot) {
 
 const LocalStorageKeys = {
 	LOGIN_AND_SAVE_MESSAGE_SEEN: 'loginAndsaveMessageSeen',
-	ASKED_TO_IMPORT_CREATIONS: 'askedToImportCreations'
+	ASKED_TO_IMPORT_CREATIONS: 'askedToImportCreations',
 };
 const UNSAVED_WARNING_COUNT = 15;
 const version = '3.6.1';
@@ -77,7 +77,7 @@ export default class App extends Component {
 			isAskToImportModalOpen: false,
 			isOnboardModalOpen: false,
 			isJs13KModalOpen: false,
-			isCreateNewModalOpen: false
+			isCreateNewModalOpen: false,
 		};
 		this.state = {
 			isSavedItemPaneOpen: false,
@@ -85,8 +85,8 @@ export default class App extends Component {
 			prefs: {},
 			currentItem: {
 				title: '',
-				externalLibs: { js: '', css: '' }
-			}
+				externalLibs: { js: '', css: '' },
+			},
 		};
 		this.defaultSettings = {
 			preserveLastCode: true,
@@ -112,46 +112,47 @@ export default class App extends Component {
 			infiniteLoopTimeout: 1000,
 			layoutMode: 2,
 			isJs13kModeOn: false,
-			autoCloseTags: true
+			autoCloseTags: true,
 		};
 		this.prefs = {};
-		if (window.zenumlDesktop) { // hack savedItems, so we can load them on the desktop, without this object, the log in saveBtnClickHandler will not work.
+		if (window.zenumlDesktop) {
+			// hack savedItems, so we can load them on the desktop, without this object, the log in saveBtnClickHandler will not work.
 			this.state.savedItems = {};
 			// hack rename function
 			window.zd_nameChangedHandler = this.titleInputBlurHandler.bind(this);
 			window.zd_openBtnHandler = this.openBtnClickHandler.bind(this);
-			window.zd_newBtnHandler = this.newBtnClickHandler.bind(this)
-			window.zd_saveBtnHandler = this.saveBtnClickHandler.bind(this)
-			window.zd_loginBtnHandler = this.loginBtnClickHandler.bind(this)
-			window.zd_proBtHandler = this.proBtnClickHandler.bind(this)
-			window.zd_profileBtHandler = this.profileBtnClickHandler.bind(this)
+			window.zd_newBtnHandler = this.newBtnClickHandler.bind(this);
+			window.zd_saveBtnHandler = this.saveBtnClickHandler.bind(this);
+			window.zd_loginBtnHandler = this.loginBtnClickHandler.bind(this);
+			window.zd_proBtHandler = this.proBtnClickHandler.bind(this);
+			window.zd_profileBtHandler = this.profileBtnClickHandler.bind(this);
 			// window.zd_libraryBtHander = this.openAddLibrary.bind(this)
 		}
-		firebase.auth().onAuthStateChanged(async user => {
-			await this.setState({isLoginModalOpen: false});
+		firebase.auth().onAuthStateChanged(async (user) => {
+			await this.setState({ isLoginModalOpen: false });
 			if (user) {
 				log('You are -> ', user);
 				alertsService.add('You are now logged in!');
-				await this.setState({user});
+				await this.setState({ user });
 				window.user = user;
 				if (!window.localStorage[LocalStorageKeys.ASKED_TO_IMPORT_CREATIONS]) {
-					this.fetchItems(false, true).then(async items => {
+					this.fetchItems(false, true).then(async (items) => {
 						if (!items.length) {
 							return;
 						}
 						this.oldSavedItems = items;
 						this.oldSavedCreationsCount = items.length;
 						await this.setState({
-							isAskToImportModalOpen: true
+							isAskToImportModalOpen: true,
 						});
 						trackEvent('ui', 'askToImportModalSeen');
 					});
 				}
-				window.db.getUser(user.uid).then(async customUser => {
+				window.db.getUser(user.uid).then(async (customUser) => {
 					if (customUser) {
-						const prefs = {...this.state.prefs};
+						const prefs = { ...this.state.prefs };
 						Object.assign(prefs, user.settings);
-						await this.setState({prefs: prefs});
+						await this.setState({ prefs: prefs });
 						await this.updateSetting();
 					}
 
@@ -164,7 +165,7 @@ export default class App extends Component {
 				this.loadUserSubscription();
 			} else {
 				// User is signed out.
-				await this.setState({user: undefined});
+				await this.setState({ user: undefined });
 				delete window.user;
 
 				if (this.onUserItemsResolved) {
@@ -186,9 +187,9 @@ export default class App extends Component {
 		db.local.get(
 			{
 				layoutMode: 1,
-				code: ''
+				code: '',
 			},
-			result => {
+			(result) => {
 				this.toggleLayout(result.layoutMode);
 				this.state.prefs.layoutMode = result.layoutMode;
 				if (result.code) {
@@ -197,8 +198,8 @@ export default class App extends Component {
 			}
 		);
 		// Get synced `preserveLastCode` setting to get back last code (or not).
-		db.getSettings(this.defaultSettings).then(async result => {
-			const getQueryParameter = key => {
+		db.getSettings(this.defaultSettings).then(async (result) => {
+			const getQueryParameter = (key) => {
 				let search = window.location.search;
 				if (search.length < 1) return;
 
@@ -219,9 +220,9 @@ export default class App extends Component {
 			}
 			if (itemId) {
 				itemService.getItem(itemId).then(
-					item => {
+					(item) => {
 						if (item) {
-							const resolveCurrentItem = items => {
+							const resolveCurrentItem = (items) => {
 								if ((items && items[item.id]) || window.zenumlDesktop) {
 									this.setCurrentItem(item).then(() => this.refreshEditor());
 								} else {
@@ -240,10 +241,9 @@ export default class App extends Component {
 							} else {
 								window.location.href = '/';
 							}
-
 						}
 					},
-					error => {
+					(error) => {
 						//Insufficient permission
 						if (window.zenumlDesktop) {
 							this.createNewItem();
@@ -253,12 +253,12 @@ export default class App extends Component {
 					}
 				);
 			} else if (result.preserveLastCode && lastCode && lastCode.js) {
-				await this.setState({unsavedEditCount: 0});
+				await this.setState({ unsavedEditCount: 0 });
 
 				// For web app environment we don't fetch item from localStorage,
 				// because the item isn't stored in the localStorage.
 				if (lastCode.id && window.IS_EXTENSION) {
-					db.local.get(lastCode.id, itemResult => {
+					db.local.get(lastCode.id, (itemResult) => {
 						if (itemResult[lastCode.id]) {
 							log('Load item ', lastCode.id);
 							this.setCurrentItem(itemResult[lastCode.id]).then(() =>
@@ -274,16 +274,16 @@ export default class App extends Component {
 				this.createNewItem();
 			}
 			Object.assign(this.state.prefs, result);
-			await this.setState({prefs: this.state.prefs});
+			await this.setState({ prefs: this.state.prefs });
 			await this.updateSetting();
 		});
 
 		// Check for new version notifications
-		db.getUserLastSeenVersion().then(async lastSeenVersion => {
+		db.getUserLastSeenVersion().then(async (lastSeenVersion) => {
 			// Check if new user
 			if (!lastSeenVersion) {
 				await this.setState({
-					isOnboardModalOpen: true
+					isOnboardModalOpen: true,
 				});
 				if (document.cookie.indexOf('onboarded') === -1) {
 					trackEvent('ui', 'onboardModalSeen', version);
@@ -305,7 +305,7 @@ export default class App extends Component {
 			}
 
 			if (!lastSeenVersion || semverCompare(lastSeenVersion, version) === -1) {
-				await this.setState({hasUnseenChangelog: true});
+				await this.setState({ hasUnseenChangelog: true });
 				this.hasSeenNotifications = false;
 			}
 		});
@@ -362,7 +362,7 @@ export default class App extends Component {
 				d.getMinutes(),
 			html: '',
 			css: '/* Prefix your CSS rules with `#diagram` */',
-			js:	`// An example for a RESTful endpoint<br>
+			js: `// An example for a RESTful endpoint<br>
 // Go to the "Cheat sheet" tab or https://docs.zenuml.com
 // to find all syntax<br>
 // \`POST /v1/book/{id}/borrow\`
@@ -381,7 +381,7 @@ BookLibService.Borrow(id) {
   return receipt
 }`,
 			externalLibs: { js: '', css: '' },
-			layoutMode: this.state.currentLayoutMode
+			layoutMode: this.state.currentLayoutMode,
 		}).then(() => this.refreshEditor());
 		alertsService.add('New item created');
 	}
@@ -410,7 +410,7 @@ BookLibService.Borrow(id) {
 		// Remove from cached list
 		delete this.state.savedItems[item.id];
 		await this.setState({
-			savedItems: {...this.state.savedItems}
+			savedItems: { ...this.state.savedItems },
 		});
 
 		trackEvent('fn', 'itemRemoved');
@@ -423,17 +423,17 @@ BookLibService.Borrow(id) {
 		item.cssMode = item.cssMode || this.state.prefs.cssMode || CssModes.CSS;
 		item.jsMode = item.jsMode || this.state.prefs.jsMode || JsModes.JS;
 
-		await this.setState({currentItem: item}, d.resolve);
+		await this.setState({ currentItem: item }, d.resolve);
 
 		// Reset auto-saving flag
 		if (window.zenumlDesktop) {
-			this.saveItem();// in desktop mode, always enable auto-saving
+			this.saveItem(); // in desktop mode, always enable auto-saving
 		} else {
 			this.isAutoSavingEnabled = false;
 		}
 
 		// Reset unsaved count, in UI also.
-		await this.setState({unsavedEditCount: 0});
+		await this.setState({ unsavedEditCount: 0 });
 		currentBrowserTab.setTitle(item.title);
 
 		return d.promise;
@@ -442,16 +442,16 @@ BookLibService.Borrow(id) {
 		trackEvent(
 			'ui',
 			'saveBtnClick',
-			!this.state.user ? 'not-logged-in' : (this.state.currentItem.id ? 'saved' : 'new')
+			!this.state.user
+				? 'not-logged-in'
+				: this.state.currentItem.id
+				? 'saved'
+				: 'new'
 		);
 		if (this.state.user || window.zenumlDesktop) {
 			this.saveItem();
 			const numOfItems = Object.keys(this.state.savedItems).length;
-			trackEvent(
-				'fn',
-				'save',
-				'no_of_files_' + numOfItems
-			)
+			trackEvent('fn', 'save', 'no_of_files_' + numOfItems);
 		} else {
 			this.loginBtnClickHandler();
 		}
@@ -460,7 +460,7 @@ BookLibService.Borrow(id) {
 	async populateItemsInSavedPane(items) {
 		// TODO: sort desc. by updation date
 		await this.setState({
-			savedItems: {...this.state.savedItems}
+			savedItems: { ...this.state.savedItems },
 		});
 
 		await this.toggleSavedItemsPane();
@@ -470,7 +470,7 @@ BookLibService.Borrow(id) {
 	async toggleSavedItemsPane(shouldOpen) {
 		await this.setState({
 			isSavedItemPaneOpen:
-				shouldOpen === undefined ? !this.state.isSavedItemPaneOpen : shouldOpen
+				shouldOpen === undefined ? !this.state.isSavedItemPaneOpen : shouldOpen,
 		});
 
 		if (this.state.isSavedItemPaneOpen) {
@@ -499,14 +499,14 @@ BookLibService.Borrow(id) {
 			items = await itemService.getAllItems();
 			log('got items');
 			if (shouldSaveGlobally) {
-				items.forEach(item => {
+				items.forEach((item) => {
 					this.state.savedItems[item.id] = item;
 				});
 			}
 			d.resolve(items);
 			return d.promise;
 		}
-		db.local.get('items', result => {
+		db.local.get('items', (result) => {
 			var itemIds = Object.getOwnPropertyNames(result.items || {});
 			if (!itemIds.length) {
 				d.resolve([]);
@@ -515,7 +515,7 @@ BookLibService.Borrow(id) {
 			trackEvent('fn', 'fetchItems', itemIds.length);
 			for (let i = 0; i < itemIds.length; i++) {
 				/* eslint-disable no-loop-func */
-				db.local.get(itemIds[i], itemResult => {
+				db.local.get(itemIds[i], (itemResult) => {
 					if (shouldSaveGlobally) {
 						this.state.savedItems[itemIds[i]] = itemResult[itemIds[i]];
 					}
@@ -534,21 +534,21 @@ BookLibService.Borrow(id) {
 
 	async openSavedItemsPane() {
 		await this.setState({
-			isFetchingItems: true
+			isFetchingItems: true,
 		});
-		this.fetchItems(true).then(async items => {
+		this.fetchItems(true).then(async (items) => {
 			await this.setState({
-				isFetchingItems: false
+				isFetchingItems: false,
 			});
 			await this.populateItemsInSavedPane(items);
 		});
 	}
 	async openAddLibrary() {
-		await this.setState({isAddLibraryModalOpen: true});
+		await this.setState({ isAddLibraryModalOpen: true });
 	}
 	async closeSavedItemsPane() {
 		await this.setState({
-			isSavedItemPaneOpen: false
+			isSavedItemPaneOpen: false,
 		});
 		document.body.classList.remove('overlay-visible');
 
@@ -565,7 +565,7 @@ BookLibService.Borrow(id) {
 		});
 
 		// Editor keyboard shortucuts
-		window.addEventListener('keydown', async event => {
+		window.addEventListener('keydown', async (event) => {
 			// TODO: refactor common listener code
 			// Ctrl/⌘ + S
 			if ((event.ctrlKey || event.metaKey) && event.keyCode === 83) {
@@ -595,7 +595,8 @@ BookLibService.Borrow(id) {
 				// Ctrl/⌘ + Shift + ?
 				event.preventDefault();
 				await this.setState({
-					isKeyboardShortcutsModalOpen: !this.state.isKeyboardShortcutsModalOpen
+					isKeyboardShortcutsModalOpen:
+						!this.state.isKeyboardShortcutsModalOpen,
 				});
 				trackEvent('ui', 'showKeyboardShortcutsShortcut');
 			} else if (event.keyCode === 27) {
@@ -604,7 +605,7 @@ BookLibService.Borrow(id) {
 		});
 
 		// Basic Focus trapping
-		window.addEventListener('focusin', e => {
+		window.addEventListener('focusin', (e) => {
 			if (document.body.classList.contains('overlay-visible')) {
 				const modal = $('.is-modal-visible');
 				if (!modal) {
@@ -618,7 +619,7 @@ BookLibService.Borrow(id) {
 		});
 
 		trackGaSetField('page', '/');
-		trackPageView()
+		trackPageView();
 	}
 
 	async closeAllOverlays() {
@@ -627,18 +628,18 @@ BookLibService.Borrow(id) {
 		}
 
 		await this.setState({
-			...this.modalDefaultStates
+			...this.modalDefaultStates,
 		});
 	}
 	async onExternalLibChange(newValues) {
 		log('onExternalLibChange');
 		this.state.currentItem.externalLibs = {
 			js: newValues.js,
-			css: newValues.css
+			css: newValues.css,
 		};
 		await this.updateExternalLibCount();
 		await this.setState({
-			currentItem: {...this.state.currentItem}
+			currentItem: { ...this.state.currentItem },
 		});
 		this.contentWrap.setPreviewContent(true);
 		alertsService.add('Libraries updated.');
@@ -657,7 +658,7 @@ BookLibService.Borrow(id) {
 		// 	.split('\n')
 		// 	.filter(lib => !!lib).length;
 		await this.setState({
-			externalLibCount: noOfExternalLibs
+			externalLibCount: noOfExternalLibs,
 		});
 	}
 	async toggleLayout(mode) {
@@ -668,18 +669,18 @@ BookLibService.Borrow(id) {
 			this.contentWrap.resetSplitting();
 			// mainSplitInstance.setSizes(getMainSplitSizesToApply());
 			// codeSplitInstance.setSizes(currentItem.sizes || [33.33, 33.33, 33.33]);
-			await this.setState({currentLayoutMode: mode});
+			await this.setState({ currentLayoutMode: mode });
 			return;
 		}
 		// Remove all layout classes
-		[1, 2, 3, 4, 5].forEach(layoutNumber => {
+		[1, 2, 3, 4, 5].forEach((layoutNumber) => {
 			window[`layoutBtn${layoutNumber}`].classList.remove('selected');
 			document.body.classList.remove(`layout-${layoutNumber}`);
 		});
 		$('#layoutBtn' + mode).classList.add('selected');
 		document.body.classList.add('layout-' + mode);
 
-		await this.setState({currentLayoutMode: mode}, () => {
+		await this.setState({ currentLayoutMode: mode }, () => {
 			this.contentWrap.resetSplitting();
 			this.contentWrap.setPreviewContent(true);
 		});
@@ -701,7 +702,7 @@ BookLibService.Borrow(id) {
 			sizes = [
 				htmlCodeEl.style[dimensionProperty],
 				cssCodeEl.style[dimensionProperty],
-				jsCodeEl.style[dimensionProperty]
+				jsCodeEl.style[dimensionProperty],
 			];
 		} catch (e) {
 			sizes = [0, 30, 70];
@@ -721,7 +722,7 @@ BookLibService.Borrow(id) {
 		try {
 			sizes = [
 				+$('#js-code-side').style[dimensionProperty].match(/([\d.]+)%/)[1],
-				+$('#js-demo-side').style[dimensionProperty].match(/([\d.]+)%/)[1]
+				+$('#js-demo-side').style[dimensionProperty].match(/([\d.]+)%/)[1],
 			];
 		} catch (e) {
 			sizes = [50, 50];
@@ -735,7 +736,7 @@ BookLibService.Borrow(id) {
 	saveSetting(setting, value) {
 		const d = deferred();
 		const obj = {
-			[setting]: value
+			[setting]: value,
 		};
 		db.local.set(obj, d.resolve);
 		return d.promise;
@@ -743,7 +744,7 @@ BookLibService.Borrow(id) {
 
 	async saveCode(key) {
 		const imageBlob = await this.contentWrap.getPngBlob();
-		
+
 		this.state.currentItem.imageBase64 = await blobToBase64(imageBlob);
 		this.state.currentItem.updatedOn = Date.now();
 		this.state.currentItem.layoutMode = this.state.currentLayoutMode;
@@ -761,15 +762,15 @@ BookLibService.Borrow(id) {
 			} else {
 				alertsService.add('Item saved.');
 			}
-			await this.setState({unsavedEditCount: 0});
+			await this.setState({ unsavedEditCount: 0 });
 		}
 
-		console.log('on saving, ', this.state.currentItem)
+		console.log('on saving, ', this.state.currentItem);
 
 		try {
 			const result = await syncDiagram(this.state.currentItem);
 			this.state.currentItem.shareLink = getShareLink(result);
-		} catch(e) {
+		} catch (e) {
 			console.error(e);
 		}
 
@@ -792,7 +793,7 @@ BookLibService.Borrow(id) {
 			if (!answer) {
 				trackEvent('ui', LocalStorageKeys.LOGIN_AND_SAVE_MESSAGE_SEEN, 'login');
 				await this.closeAllOverlays();
-				await this.setState({isLoginModalOpen: true});
+				await this.setState({ isLoginModalOpen: true });
 				return;
 			}
 			trackEvent('ui', LocalStorageKeys.LOGIN_AND_SAVE_MESSAGE_SEEN, 'local');
@@ -801,11 +802,11 @@ BookLibService.Borrow(id) {
 		this.state.currentItem.id =
 			this.state.currentItem.id || 'item-' + generateRandomId();
 		await this.setState({
-			isSaving: true
+			isSaving: true,
 		});
 		this.saveCode().then(async () => {
 			await this.setState({
-				isSaving: false
+				isSaving: false,
 			});
 			// TODO: May be setState with currentItem
 
@@ -824,14 +825,16 @@ BookLibService.Borrow(id) {
 		}
 	}
 	async onCodeModeChange(ofWhat, mode) {
-		const item = {...this.state.currentItem};
+		const item = { ...this.state.currentItem };
 		item[`${ofWhat}Mode`] = mode;
-		await this.setState({currentItem: item});
+		await this.setState({ currentItem: item });
 	}
 	async onCodeChange(type, code, isUserChange) {
 		this.state.currentItem[type] = code;
 		if (isUserChange) {
-			await this.setState({unsavedEditCount: this.state.unsavedEditCount + 1});
+			await this.setState({
+				unsavedEditCount: this.state.unsavedEditCount + 1,
+			});
 
 			if (
 				this.state.unsavedEditCount % UNSAVED_WARNING_COUNT === 0 &&
@@ -858,16 +861,18 @@ BookLibService.Borrow(id) {
 	}
 	onCodeSettingsChange(type, settings) {
 		this.state.currentItem[`${type}Settings`] = {
-			acssConfig: settings
+			acssConfig: settings,
 		};
 	}
 
 	titleInputBlurHandler(e) {
 		this.state.currentItem.title = e.target.value;
-		this.setState({currentItem: {
-			...this.state.currentItem,
-			title: e.target.value,
-		}});
+		this.setState({
+			currentItem: {
+				...this.state.currentItem,
+				title: e.target.value,
+			},
+		});
 		currentBrowserTab.setTitle(this.state.currentItem.title);
 		if (this.state.currentItem.id) {
 			this.saveItem();
@@ -885,10 +890,10 @@ BookLibService.Borrow(id) {
 			var obj = {};
 			var el = e.target;
 			log(settingName, el.type === 'checkbox' ? el.checked : el.value);
-			const prefs = {...this.state.prefs};
+			const prefs = { ...this.state.prefs };
 			prefs[settingName] = el.type === 'checkbox' ? el.checked : el.value;
 			obj[settingName] = prefs[settingName];
-			await this.setState({prefs});
+			await this.setState({ prefs });
 
 			// We always save locally so that it gets fetched
 			// faster on future loads.
@@ -896,17 +901,17 @@ BookLibService.Borrow(id) {
 				alertsService.add('Setting saved');
 			});
 			if (window.user) {
-				window.db.getDb().then(remoteDb => {
+				window.db.getDb().then((remoteDb) => {
 					remoteDb
 						.collection('users')
 						.doc(window.user.uid)
 						.update({
-							[`settings.${settingName}`]: this.state.prefs[settingName]
+							[`settings.${settingName}`]: this.state.prefs[settingName],
 						})
-						.then(arg => {
+						.then((arg) => {
 							log(`Setting "${settingName}" for user`, arg);
 						})
-						.catch(error => log(error));
+						.catch((error) => log(error));
 				});
 			}
 			trackEvent('ui', 'updatePref-' + settingName, prefs[settingName]);
@@ -941,15 +946,26 @@ BookLibService.Borrow(id) {
 	}
 
 	async loginBtnClickHandler() {
-		await this.setState({isLoginModalOpen: true});
+		await this.setState({ isLoginModalOpen: true });
 	}
 
 	async proBtnClickHandler() {
 		trackEvent('ui', 'proBtnClick');
-		await this.setState({isProFeatureListModalOpen: true});
+		await this.setState({ isProFeatureListModalOpen: true });
 	}
 	async profileBtnClickHandler() {
-		await this.setState({isProfileModalOpen: true});
+		await this.setState({ isProfileModalOpen: true });
+	}
+
+	async onUpdateImage(image) {
+		const imageBase64 = await blobToBase64(image);
+		this.setState({
+			currentItem: {
+				...this.state.currentItem,
+				imageBase64,
+			},
+		});
+		trackEvent('ui', 'shareLink');
 	}
 
 	async logout() {
@@ -963,7 +979,7 @@ BookLibService.Borrow(id) {
 		}
 		trackEvent('fn', 'loggedOut');
 		auth.logout();
-		await this.setState({isProfileModalOpen: false});
+		await this.setState({ isProfileModalOpen: false });
 		alertsService.add('Log out successful');
 	}
 
@@ -990,12 +1006,12 @@ BookLibService.Borrow(id) {
 			);
 			if (shouldDiscard) {
 				await this.setState({
-					isCreateNewModalOpen: true
+					isCreateNewModalOpen: true,
 				});
 			}
 		} else {
 			await this.setState({
-				isCreateNewModalOpen: true
+				isCreateNewModalOpen: true,
 			});
 		}
 	}
@@ -1009,11 +1025,11 @@ BookLibService.Borrow(id) {
 		this.contentWrap.detachPreview();
 	}
 	async notificationsBtnClickHandler() {
-		await this.setState({isNotificationsModalOpen: true});
+		await this.setState({ isNotificationsModalOpen: true });
 
 		if (this.state.isNotificationsModalOpen && !this.hasSeenNotifications) {
 			this.hasSeenNotifications = true;
-			await this.setState({hasUnseenChangelog: false});
+			await this.setState({ hasUnseenChangelog: false });
 			await window.db.setUserLastSeenVersion(version);
 		}
 		trackEvent('ui', 'notificationButtonClick', version);
@@ -1041,7 +1057,7 @@ BookLibService.Borrow(id) {
 			css_external: this.state.currentItem.externalLibs.css
 				.split('\n')
 				.join(';'),
-			js_external: this.state.currentItem.externalLibs.js.split('\n').join(';')
+			js_external: this.state.currentItem.externalLibs.js.split('\n').join(';'),
 
 			/* eslint-enable camelcase */
 		};
@@ -1064,7 +1080,7 @@ BookLibService.Borrow(id) {
 	}
 	exportItems() {
 		handleDownloadsPermission().then(() => {
-			this.fetchItems().then(items => {
+			this.fetchItems().then((items) => {
 				var d = new Date();
 				var fileName = [
 					'web-maker-export',
@@ -1073,11 +1089,11 @@ BookLibService.Borrow(id) {
 					d.getDate(),
 					d.getHours(),
 					d.getMinutes(),
-					d.getSeconds()
+					d.getSeconds(),
 				].join('-');
 				fileName += '.json';
 				var blob = new Blob([JSON.stringify(items, false, 2)], {
-					type: 'application/json;charset=UTF-8'
+					type: 'application/json;charset=UTF-8',
 				});
 
 				downloadFile(fileName, blob);
@@ -1092,7 +1108,7 @@ BookLibService.Borrow(id) {
 		trackEvent('ui', 'exportBtnClicked');
 	}
 	screenshotBtnClickHandler(e) {
-		this.contentWrap.getDemoFrame(frame => {
+		this.contentWrap.getDemoFrame((frame) => {
 			takeScreenshot(frame.getBoundingClientRect());
 		});
 		e.preventDefault();
@@ -1111,7 +1127,7 @@ BookLibService.Borrow(id) {
 	 * Called from inside ask-to-import-modal
 	 */
 	async dontAskToImportAnymore(e) {
-		await this.setState({isAskToImportModalOpen: false});
+		await this.setState({ isAskToImportModalOpen: false });
 		window.localStorage[LocalStorageKeys.ASKED_TO_IMPORT_CREATIONS] = true;
 		if (e) {
 			trackEvent('ui', 'dontAskToImportBtnClick');
@@ -1123,7 +1139,7 @@ BookLibService.Borrow(id) {
 		var toMergeItems = {};
 		const d = deferred();
 		const { savedItems } = this.state;
-		items.forEach(item => {
+		items.forEach((item) => {
 			// We can access `savedItems` here because this gets set when user
 			// opens the saved creations panel. And import option is available
 			// inside the saved items panel.
@@ -1146,7 +1162,7 @@ BookLibService.Borrow(id) {
 			);
 			if (shouldReplace) {
 				log('shouldreplace', shouldReplace);
-				items.forEach(item => {
+				items.forEach((item) => {
 					toMergeItems[item.id] = item;
 				});
 				mergedItemCount = items.length;
@@ -1203,7 +1219,7 @@ BookLibService.Borrow(id) {
 			whitespace = /(\r?\n|\r|\s+)/g;
 
 		const ByteSize = {
-			count: function(text, options) {
+			count: function (text, options) {
 				// Set option defaults
 				options = options || {};
 				options.lineBreaks = options.lineBreaks || 1;
@@ -1227,7 +1243,7 @@ BookLibService.Borrow(id) {
 				}
 			},
 
-			format: function(count, plainText) {
+			format: function (count, plainText) {
 				var level = 0;
 
 				while (count > 1024) {
@@ -1246,7 +1262,7 @@ BookLibService.Borrow(id) {
 					level +
 					'B'
 				);
-			}
+			},
 		};
 
 		return ByteSize.count(text);
@@ -1255,14 +1271,14 @@ BookLibService.Borrow(id) {
 		const item = this.state.currentItem;
 		var libs = (item.externalLibs && item.externalLibs.js) || '';
 		libs += ('\n' + item.externalLibs && item.externalLibs.css) || '';
-		libs = libs.split('\n').filter(lib => lib);
-		return libs.map(lib =>
+		libs = libs.split('\n').filter((lib) => lib);
+		return libs.map((lib) =>
 			fetch(lib)
-				.then(res => res.text())
-				.then(data => {
+				.then((res) => res.text())
+				.then((data) => {
 					return {
 						code: data,
-						fileName: getFilenameFromUrl(lib)
+						fileName: getFilenameFromUrl(lib),
 					};
 				})
 		);
@@ -1276,8 +1292,8 @@ BookLibService.Borrow(id) {
 			htmlPromise,
 			cssPromise,
 			jsPromise,
-			...this.getExternalLibCode()
-		]).then(result => {
+			...this.getExternalLibCode(),
+		]).then((result) => {
 			var html = result[0].code || '',
 				css = result[1].code || '',
 				js = result[2].code || '';
@@ -1307,16 +1323,16 @@ BookLibService.Borrow(id) {
 					type: 'base64',
 					compression: 'DEFLATE',
 					compressionOptions: {
-						level: 9
-					}
+						level: 9,
+					},
 				});
 			}
 
-			promise.then(async data => {
+			promise.then(async (data) => {
 				const zipContent = data;
 				const size = this.calculateTextSize(atob(data));
 				await this.setState({
-					codeSize: size
+					codeSize: size,
 				});
 				this.currentItemZipBase64Data = data;
 			});
@@ -1325,7 +1341,7 @@ BookLibService.Borrow(id) {
 
 	async js13KHelpBtnClickHandler() {
 		await this.setState({
-			isJs13KModalOpen: true
+			isJs13KModalOpen: true,
 		});
 	}
 	js13KDownloadBtnClickHandler() {
@@ -1338,17 +1354,17 @@ BookLibService.Borrow(id) {
 	}
 	async blankTemplateSelectHandler() {
 		this.createNewItem();
-		await this.setState({isCreateNewModalOpen: false, activeTab: 'ZenUML'});
+		await this.setState({ isCreateNewModalOpen: false, activeTab: 'ZenUML' });
 		this.contentWrap.resetTabs();
 	}
 
 	async templateSelectHandler(template) {
 		fetch(`templates/template-${template.id}.json`)
-			.then(res => res.json())
-			.then(json => {
+			.then((res) => res.json())
+			.then((json) => {
 				this.forkItem(json);
 			});
-		await this.setState({isCreateNewModalOpen: false, activeTab: 'ZenUML'});
+		await this.setState({ isCreateNewModalOpen: false, activeTab: 'ZenUML' });
 		this.contentWrap.resetTabs();
 	}
 
@@ -1356,7 +1372,7 @@ BookLibService.Borrow(id) {
 		return (
 			<div>
 				<div class="main-container">
-					{window.zenumlDesktop ? (null) : (
+					{window.zenumlDesktop ? null : (
 						<MainHeader
 							externalLibCount={this.state.externalLibCount}
 							openBtnHandler={this.openBtnClickHandler.bind(this)}
@@ -1378,10 +1394,12 @@ BookLibService.Borrow(id) {
 					<ContentWrap
 						currentLayoutMode={this.state.currentLayoutMode}
 						currentItem={this.state.currentItem}
+						onLogin={this.loginBtnClickHandler.bind(this)}
 						onCodeChange={this.onCodeChange.bind(this)}
+						onUpdateImage={this.onUpdateImage.bind(this)}
 						onCodeSettingsChange={this.onCodeSettingsChange.bind(this)}
 						onCodeModeChange={this.onCodeModeChange.bind(this)}
-						onRef={comp => (this.contentWrap = comp)}
+						onRef={(comp) => (this.contentWrap = comp)}
 						prefs={this.state.prefs}
 						onEditorFocus={this.editorFocusHandler.bind(this)}
 						onSplitUpdate={this.splitUpdateHandler.bind(this)}
@@ -1389,9 +1407,11 @@ BookLibService.Borrow(id) {
 					<Footer
 						prefs={this.state.prefs}
 						layoutBtnClickHandler={this.layoutBtnClickHandler.bind(this)}
-						helpBtnClickHandler={async () => await this.setState({isHelpModalOpen: true})}
+						helpBtnClickHandler={async () =>
+							await this.setState({ isHelpModalOpen: true })
+						}
 						settingsBtnClickHandler={async () =>
-							await this.setState({isSettingsModalOpen: true})
+							await this.setState({ isSettingsModalOpen: true })
 						}
 						notificationsBtnClickHandler={this.notificationsBtnClickHandler.bind(
 							this
@@ -1405,7 +1425,7 @@ BookLibService.Borrow(id) {
 						codepenBtnClickHandler={this.codepenBtnClickHandler.bind(this)}
 						saveHtmlBtnClickHandler={this.saveHtmlBtnClickHandler.bind(this)}
 						keyboardShortcutsBtnClickHandler={async () =>
-							await this.setState({isKeyboardShortcutsModalOpen: true})
+							await this.setState({ isKeyboardShortcutsModalOpen: true })
 						}
 						screenshotBtnClickHandler={this.screenshotBtnClickHandler.bind(
 							this
@@ -1448,7 +1468,9 @@ BookLibService.Borrow(id) {
 
 				<Modal
 					show={this.state.isAddLibraryModalOpen}
-					closeHandler={async () => await this.setState({isAddLibraryModalOpen: false})}
+					closeHandler={async () =>
+						await this.setState({ isAddLibraryModalOpen: false })
+					}
 				>
 					<AddLibrary
 						js={
@@ -1467,7 +1489,7 @@ BookLibService.Borrow(id) {
 				<Modal
 					show={this.state.isNotificationsModalOpen}
 					closeHandler={async () =>
-						await this.setState({isNotificationsModalOpen: false})
+						await this.setState({ isNotificationsModalOpen: false })
 					}
 				>
 					<Notifications
@@ -1477,7 +1499,9 @@ BookLibService.Borrow(id) {
 				<Modal
 					extraClasses="modal--settings"
 					show={this.state.isSettingsModalOpen}
-					closeHandler={async () => await this.setState({isSettingsModalOpen: false})}
+					closeHandler={async () =>
+						await this.setState({ isSettingsModalOpen: false })
+					}
 				>
 					<Settings
 						prefs={this.state.prefs}
@@ -1487,13 +1511,17 @@ BookLibService.Borrow(id) {
 				<Modal
 					extraClasses="login-modal"
 					show={this.state.isLoginModalOpen}
-					closeHandler={async () => await this.setState({isLoginModalOpen: false})}
+					closeHandler={async () =>
+						await this.setState({ isLoginModalOpen: false })
+					}
 				>
 					<Login />
 				</Modal>
 				<Modal
 					show={this.state.isProfileModalOpen}
-					closeHandler={async () => await this.setState({isProfileModalOpen: false})}
+					closeHandler={async () =>
+						await this.setState({ isProfileModalOpen: false })
+					}
 				>
 					<Profile
 						user={this.state.user}
@@ -1502,13 +1530,17 @@ BookLibService.Borrow(id) {
 				</Modal>
 				<HelpModal
 					show={this.state.isHelpModalOpen}
-					closeHandler={async () => await this.setState({isHelpModalOpen: false})}
+					closeHandler={async () =>
+						await this.setState({ isHelpModalOpen: false })
+					}
 					onSupportBtnClick={this.openSupportDeveloperModal.bind(this)}
 					version={version}
 				/>
 				<ProFeatureListModal
 					show={this.state.isProFeatureListModalOpen}
-					closeHandler={async () => await this.setState({isProFeatureListModalOpen: false})}
+					closeHandler={async () =>
+						await this.setState({ isProFeatureListModalOpen: false })
+					}
 					onSupportBtnClick={this.openSupportDeveloperModal.bind(this)}
 					version={version}
 					onSubscriptionChange={this.loadUserSubscription.bind(this)}
@@ -1517,18 +1549,20 @@ BookLibService.Borrow(id) {
 				<SupportDeveloperModal
 					show={this.state.isSupportDeveloperModalOpen}
 					closeHandler={async () =>
-						await this.setState({isSupportDeveloperModalOpen: false})
+						await this.setState({ isSupportDeveloperModalOpen: false })
 					}
 				/>
 				<KeyboardShortcutsModal
 					show={this.state.isKeyboardShortcutsModalOpen}
 					closeHandler={async () =>
-						await this.setState({isKeyboardShortcutsModalOpen: false})
+						await this.setState({ isKeyboardShortcutsModalOpen: false })
 					}
 				/>
 				<AskToImportModal
 					show={this.state.isAskToImportModalOpen}
-					closeHandler={async () => await this.setState({isAskToImportModalOpen: false})}
+					closeHandler={async () =>
+						await this.setState({ isAskToImportModalOpen: false })
+					}
 					oldSavedCreationsCount={this.oldSavedCreationsCount}
 					importBtnClickHandler={this.importCreationsAndSettingsIntoApp.bind(
 						this
@@ -1538,12 +1572,16 @@ BookLibService.Borrow(id) {
 
 				<Js13KModal
 					show={this.state.isJs13KModalOpen}
-					closeHandler={async () => await this.setState({isJs13KModalOpen: false})}
+					closeHandler={async () =>
+						await this.setState({ isJs13KModalOpen: false })
+					}
 				/>
 
 				<CreateNewModal
 					show={this.state.isCreateNewModalOpen}
-					closeHandler={async () => await this.setState({isCreateNewModalOpen: false})}
+					closeHandler={async () =>
+						await this.setState({ isCreateNewModalOpen: false })
+					}
 					onBlankTemplateSelect={this.blankTemplateSelectHandler.bind(this)}
 					onTemplateSelect={this.templateSelectHandler.bind(this)}
 				/>
diff --git a/src/services/syncService.js b/src/services/syncService.js
index 6b888693..08a0aa6f 100644
--- a/src/services/syncService.js
+++ b/src/services/syncService.js
@@ -1,15 +1,35 @@
 import firebase from 'firebase/app';
 
 async function syncDiagram(currentItem) {
+  const { id, title, js, imageBase64 } = currentItem;
+  if (!js || !title || !imageBase64) {
+    return null;
+  }
+
   const token = await firebase.auth().currentUser.getIdToken(true);
 
-  const data = { token, id: currentItem.id, name: currentItem.title, content: currentItem.js, description: 'Shared diagram from https://app.zenuml.com', imageBase64: currentItem.imageBase64 };
+  const data = {
+    token,
+    id,
+    imageBase64,
+    name: title,
+    content: js,
+    description: 'Shared diagram from https://app.zenuml.com',
+  };
   console.log('calling /sync-diagram with data:', data)
-
-  const result = await (await fetch('/sync-diagram', { method: 'POST', body: JSON.stringify(data), headers: { 'Content-Type': 'application/json' } })).json()
-  console.log('save to php app result: ', result)
-
-  return result;
+  try {
+    const response = await fetch('/sync-diagram', {
+      method: 'POST',
+      body: JSON.stringify(data),
+      headers: { 'Content-Type': 'application/json' },
+    });
+    const result = await response.json();
+    console.log('save to php app result: ', result)
+    return result;
+  } catch (error) {
+    console.warn('Error when calling /sync-diagram', error);
+    return null;
+  }
 }
 
 function getShareLink(syncResult) {
diff --git a/src/style.css b/src/style.css
index 7f567b84..963a77bc 100644
--- a/src/style.css
+++ b/src/style.css
@@ -753,11 +753,13 @@ body > #demo-frame {
 	margin-right: 0px;
 	background: url(icon-16.png) 0px 0px no-repeat;
 	-webkit-filter: grayscale(0);
+	filter: grayscale(0);
 	opacity: 1;
 }
 
 .logo.small.gray {
 	-webkit-filter: grayscale(0.9);
+	filter: grayscale(0.9);
 }
 
 .footer:hover .logo {
@@ -1978,16 +1980,52 @@ ol.editor-nav li {
 .popover-content {
 	position: absolute;
 	background: #fff;
-	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 	border: 1px solid #ccc;
 	border-radius: 4px;
-	padding: 20px;
 	z-index: 3;
+}
+
+.popover-content.shadow {
+	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
+}
+
+.popover-arrow {
+	position: absolute;
+	width: 0;
+	height: 0;
+}
+
+.popover-content.top {
+	top: auto;
+	bottom: calc(100% + 8px);
+	left: 50%;
+	transform: translateX(-50%);
+}
+
+.popover-content.bottom {
 	top: calc(100% + 8px);
 	left: 50%;
 	transform: translateX(-50%);
 }
 
+.popover-content.top .popover-arrow {
+	border-left: 4px solid transparent;
+	border-right: 4px solid transparent;
+	border-top: 8px solid #fff;
+	bottom: -8px;
+	left: 50%;
+	transform: translateX(-50%);
+}
+
+.popover-content.bottom .popover-arrow {
+	border-left: 4px solid transparent;
+	border-right: 4px solid transparent;
+	border-bottom: 8px solid #fff;
+	top: -8px;
+	left: 50%;
+	transform: translateX(-50%);
+}
+
 .popover-backdrop {
 	content: "";
 	position: fixed;
@@ -2000,22 +2038,11 @@ ol.editor-nav li {
 	z-index: 2;
 }
 
-.popover-arrow {
-	position: absolute;
-	width: 0;
-	height: 0;
-	border-left: 4px solid transparent;
-	border-right: 4px solid transparent;
-	border-bottom: 8px solid #fff;
-	top: -8px;
-	left: 50%;
-	transform: translateX(-50%);
-}
-
 .share-panel {
 	position: relative;
 	color: #000;
 	width: 400px;
+	padding: 20px;
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
@@ -2049,6 +2076,11 @@ ol.editor-nav li {
 	color: #414bb2;
 }
 
+.share-panel .copy-button[disabled] {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
 .share-panel .copy-button:focus {
 	outline-color: #414bb2;
 }
@@ -2057,6 +2089,20 @@ ol.editor-nav li {
 	transform: rotate(315deg);
 }
 
+.share-panel .tooltip {
+	display: flex;
+	align-items: center;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	white-space: nowrap;
+	padding: 8px;
+	gap: 12px;
+}
+
+.share-panel .tooltip .material-symbols-outlined {
+	color: #41b276;
+}
+
 .share-panel .footnote {
 	margin-top: 8px;
 	color: #acacac;
@@ -2067,19 +2113,29 @@ ol.editor-nav li {
 	position: relative;
 	display: flex;
 	width: 100%;
-	padding: 12px;
-	border: 1px solid #414bb2;
-	border-radius: 4px;
+	border-radius: 8px;
 	justify-content: space-between;
 	box-sizing: border-box;
 	border: 1px solid #dfe1e6;
 	margin-bottom: 8px;
+	gap: 0;
+	overflow: hidden;
+}
+
+.preview-card .text-ellipsis {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 }
 
 .preview-card__content {
 	display: flex;
 	flex-direction: column;
-	gap: 20px;
+	flex: auto;
+	max-width: 60%;
+	padding: 12px 5px 12px 12px;
+	gap: 10px;
+	flex: 1;
 }
 
 .preview-card__title {
@@ -2092,26 +2148,55 @@ ol.editor-nav li {
 }
 
 .preview-card__title img {
-	width: 16px;
-	height: 16px;
+	width: 24px;
+	height: 24px;
+}
+
+.preview-card__subtitle,
+.preview-card__footer {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	color: #9aa2b0;
+	font-size: 12px;
 }
 
 .preview-card__description {
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
 	font-size: 12px;
+	overflow: hidden;
+	-webkit-line-clamp: 2;
+	line-clamp: 2;
+}
+
+.preview-card__footer img {
+	width: 16px;
+	height: 16px;
 }
 
 .preview-card__image {
+	position: relative;
+	width: 40%;
+	overflow: hidden;
+	background-image: url(./assets/og_bg_default.jpg);
+	background-size: cover;
+	flex: 0 0 40%;
+}
+
+.preview-card__image .overlay {
 	position: absolute;
-	width: 30%;
-	top: 0;
-	bottom: 0;
-	right: 0;
+	width: 80%;
+	height: 80%;
 	overflow: hidden;
+	bottom: 0;
+	left: 0;
+	transform: translateX(10%);
 }
 
 .preview-card__image img {
-	object-fit: cover;
+	object-fit: contain;
 	object-position: left top;
-	width: 200%;
-	height: 200%;
+	width: 300%;
+	height: 300%;
 }