diff --git a/package.json b/package.json
index 6167627..032eea2 100644
--- a/package.json
+++ b/package.json
@@ -4,13 +4,16 @@
 	"private": true,
 	"dependencies": {
 		"clipboard-polyfill": "^2.8.1",
+		"js-cookie": "^2.2.0",
 		"react": "^16.8.6",
 		"react-dom": "^16.8.6",
+		"react-hot-keys": "^1.3.1",
 		"react-redux": "^7.0.3",
 		"react-scripts": "3.0.1",
 		"rebass": "^3.1.1",
 		"redux": "^4.0.1",
-		"styled-components": "^4.2.0"
+		"styled-components": "^4.2.0",
+		"styled-icons": "^8.1.0"
 	},
 	"scripts": {
 		"start": "react-scripts start",
diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
new file mode 100644
index 0000000..419ad6d
Binary files /dev/null and b/public/android-chrome-192x192.png differ
diff --git a/public/android-chrome-384x384.png b/public/android-chrome-384x384.png
new file mode 100644
index 0000000..c7f100c
Binary files /dev/null and b/public/android-chrome-384x384.png differ
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
new file mode 100644
index 0000000..77bbacb
Binary files /dev/null and b/public/apple-touch-icon.png differ
diff --git a/public/browserconfig.xml b/public/browserconfig.xml
new file mode 100644
index 0000000..a47e5a5
--- /dev/null
+++ b/public/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#2d89ef</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/public/circle.svg b/public/circle.svg
deleted file mode 100644
index e453ead..0000000
--- a/public/circle.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="enable-background:new 0 0 100 100;" xml:space="preserve" width="80" height="80"><rect id="backgroundrect" width="100%" height="100%" x="0" y="0" fill="none" stroke="none" class="" style=""/><style type="text/css">
-	.st0{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
-</style><g class="currentLayer" style=""><title>Layer 1</title><path d="M40,-2.2888183615066282e-7 c-22.056,0 -40,17.944 -40,40 s17.944,40 40,40 s40,-17.944 40,-40 S62.056,-2.2888183615066282e-7 40,-2.2888183615066282e-7 zM40,77.99999977111817 c-20.953,0 -38,-17.047 -38,-38 s17.047,-38 38,-38 s38,17.047 38,38 S60.953,77.99999977111817 40,77.99999977111817 z" id="svg_1" class=""/></g></svg>
\ No newline at end of file
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
new file mode 100644
index 0000000..5f2735f
Binary files /dev/null and b/public/favicon-16x16.png differ
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
new file mode 100644
index 0000000..aa66efc
Binary files /dev/null and b/public/favicon-32x32.png differ
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..6e3be15
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/flow-icon.svg b/public/flow-icon.svg
new file mode 100644
index 0000000..00f78d7
--- /dev/null
+++ b/public/flow-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" enable-background="new 0 0 64 64" xml:space="preserve" width="51" height="51"><rect id="backgroundrect" width="100%" height="100%" x="0" y="0" fill="none" stroke="none" class="" style=""/><g class="currentLayer" style=""><title>Layer 1</title><g id="svg_1" class=""><path fill-rule="evenodd" clip-rule="evenodd" d="M27.840000930786132,0.11115764617919943 c-6.407,-0.459 -9.223,0.535 -13.2,2.4 c-0.6790000000000002,0.19800000000000004 -0.6220000000000001,-0.3380000000000001 -1.2,-0.24000000000000002 c-1.094,2.242 -2.8120000000000003,1.31 -3.6,3.36 c-0.9570000000000001,0.132 -0.7230000000000001,0.132 -1.6800000000000002,0 c-0.7320000000000001,0.9600000000000001 -0.33100000000000007,1.577 -1.2,2.4 c-0.010000000000000002,-0.33100000000000007 0.11300000000000002,-0.527 0.24000000000000002,-0.7200000000000001 c-0.7680000000000001,0.7520000000000001 -1.843,1.197 -1.6800000000000002,2.88 c-0.7530000000000001,-0.267 -0.6340000000000001,-0.11200000000000002 -1.2,0.24000000000000002 c-1.8130000000000002,3.517 -4.142,7.301 -3.36,11.04 c-0.453,-0.18000000000000002 -0.16700000000000004,-0.7160000000000001 -0.7200000000000001,-0.24000000000000002 c-0.263,0.914 0.6350000000000001,1.499 -0.24000000000000002,1.6800000000000002 c0,1.2 0,2.4 0,3.6 c0.8830000000000001,9.818 6.36,16.522 13.2,21.12 c2.739,0.49100000000000005 4.925,2.894 7.44,2.16 c8.877,2.545 17.303,-0.7010000000000001 22.56,-6 c4.057,-4.09 7.28,-9.944 7.92,-16.56 C52.46900093078613,13.286157646179198 41.86400093078613,1.1161576461791993 27.840000930786132,0.11115764617919943 zM48.720000930786135,28.4311576461792 c-1.485,11.816 -13.703,22.573 -27.12,19.2 c-2.01,-0.505 -3.232,-1.771 -5.76,-2.16 c-0.134,-0.48900000000000005 -0.7220000000000001,-0.47100000000000003 -0.24000000000000002,-0.9600000000000001 c-1.572,0.3460000000000001 -2.174,-1.6380000000000001 -4.08,-1.6800000000000002 c0.19500000000000003,-0.8300000000000001 -0.44800000000000006,-1.013 0,-1.44 c-0.32400000000000007,-0.796 -1.5590000000000002,-0.6810000000000002 -2.16,-1.199 c0.10500000000000001,-0.35600000000000004 0.30700000000000005,0.09500000000000003 0.7200000000000001,0 c-0.9,-0.46 -1.102,-1.6190000000000002 -2.4,-1.681 c0.134,-0.48900000000000005 0.7220000000000001,-0.47100000000000003 0.24000000000000002,-0.9600000000000001 c-2.283,-2.3120000000000003 -2.114,-6.076 -4.5600000000000005,-8.64 c0.20900000000000002,-0.6980000000000002 0.35900000000000004,-0.27 0.9600000000000001,-0.24000000000000002 c-1.187,-3.84 0.267,-9.374 0.9600000000000001,-12.48 c1.4260000000000002,-1.214 2.195,-3.084 2.88,-5.04 c1.9100000000000001,-1.209 3.295,-2.944 4.8,-4.5600000000000005 c3.4290000000000003,-1.192 6.288,-3.462 10.08,-3.84 c8.124,-0.811 16.239,3.019 21.12,8.16 C47.327000930786134,15.9911576461792 49.59000093078613,21.5071576461792 48.720000930786135,28.4311576461792 z" id="svg_2"/></g></g></svg>
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 04a8459..fee2c8e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -17,7 +17,33 @@
 		</script>
 
 		<meta charset="utf-8" />
-		<link rel="shortcut icon" href="%PUBLIC_URL%/circle.svg" />
+
+		<link
+			rel="apple-touch-icon"
+			sizes="180x180"
+			href="%PUBLIC_URL%/apple-touch-icon.png"
+		/>
+		<link
+			rel="icon"
+			type="image/png"
+			sizes="32x32"
+			href="%PUBLIC_URL%/favicon-32x32.png"
+		/>
+		<link
+			rel="icon"
+			type="image/png"
+			sizes="16x16"
+			href="%PUBLIC_URL%/favicon-16x16.png"
+		/>
+		<link rel="manifest" href="%PUBLIC_URL%/site.webmanifest" />
+		<link
+			rel="mask-icon"
+			href="%PUBLIC_URL%/safari-pinned-tab.svg"
+			color="#5bbad5"
+		/>
+		<meta name="msapplication-TileColor" content="#2d89ef" />
+		<meta name="theme-color" content="#ffffff" />
+
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<meta name="theme-color" content="#000000" />
 		<!--
diff --git a/public/mstile-150x150.png b/public/mstile-150x150.png
new file mode 100644
index 0000000..6bafd6c
Binary files /dev/null and b/public/mstile-150x150.png differ
diff --git a/public/noun_Circle_1068976.png b/public/noun_Circle_1068976.png
new file mode 100644
index 0000000..4823b21
Binary files /dev/null and b/public/noun_Circle_1068976.png differ
diff --git a/public/safari-pinned-tab.svg b/public/safari-pinned-tab.svg
new file mode 100644
index 0000000..31b8c48
--- /dev/null
+++ b/public/safari-pinned-tab.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="483.000000pt" height="483.000000pt" viewBox="0 0 483.000000 483.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,483.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M2207 4794 c-1 -1 -36 -5 -77 -8 -224 -20 -435 -79 -670 -188 -93
+-43 -115 -49 -137 -32 -33 24 -56 16 -88 -32 -30 -44 -70 -74 -175 -129 -65
+-34 -92 -58 -118 -105 l-19 -35 -77 -1 c-89 -1 -91 -2 -125 -106 -13 -37 -31
+-78 -42 -90 l-20 -23 6 29 6 28 -39 -33 c-73 -63 -117 -136 -111 -181 5 -37
+-1 -44 -34 -40 -25 3 -41 -2 -60 -20 -34 -30 -222 -403 -269 -533 -60 -167
+-72 -226 -72 -373 -1 -99 -4 -129 -12 -117 -6 8 -16 15 -22 15 -17 0 -33 -37
+-28 -62 3 -13 8 -38 12 -56 5 -27 3 -36 -13 -47 -18 -12 -19 -26 -17 -202 1
+-103 7 -224 13 -268 7 -44 15 -96 18 -115 8 -58 60 -259 88 -345 146 -438 406
+-813 795 -1149 83 -72 129 -107 286 -222 17 -12 50 -27 75 -34 69 -18 126 -40
+232 -92 215 -106 289 -126 388 -108 28 5 62 2 111 -11 308 -81 660 -84 988 -8
+447 103 877 366 1172 718 40 47 75 88 78 91 17 16 117 159 170 245 140 221
+251 481 314 731 22 87 29 124 50 248 21 119 27 425 12 561 -78 718 -473 1348
+-1089 1735 -99 62 -354 190 -378 190 -8 0 -19 4 -24 9 -12 11 -170 62 -280 90
+-122 31 -275 55 -420 67 -71 6 -393 12 -398 8z m388 -257 c17 -3 55 -9 85 -12
+30 -4 96 -16 145 -27 50 -10 101 -21 115 -24 72 -14 341 -113 457 -169 367
+-176 687 -426 806 -628 196 -337 324 -672 363 -952 16 -118 19 -169 19 -320 0
+-201 -11 -304 -48 -470 -42 -184 -144 -432 -252 -610 -187 -309 -458 -579
+-770 -767 -173 -105 -433 -208 -607 -243 -61 -12 -75 -14 -113 -20 -112 -17
+-194 -22 -335 -19 -85 1 -166 5 -180 8 -14 2 -56 9 -95 15 -128 19 -223 49
+-367 117 -155 72 -222 98 -285 108 -43 8 -89 55 -79 82 4 10 -3 14 -27 14 -36
+0 -84 25 -174 92 -36 26 -84 52 -112 59 -53 13 -57 21 -65 119 -2 19 -4 40 -5
+46 -1 12 -40 31 -134 65 -39 14 -55 25 -49 31 6 6 17 6 31 -1 12 -7 21 -10 21
+-8 0 7 -116 124 -140 140 -13 9 -35 17 -47 17 -28 0 -29 17 -3 45 l21 22 -50
+59 c-56 65 -113 175 -161 309 -17 50 -38 104 -45 120 -7 17 -16 41 -20 55 -20
+66 -108 221 -157 276 -11 13 -16 28 -12 38 6 15 14 17 47 12 35 -6 39 -5 32
+11 -24 61 -34 179 -31 348 3 99 7 198 10 220 17 114 39 232 61 336 14 63 27
+124 29 135 16 79 31 114 65 149 79 84 154 217 204 363 16 48 31 71 57 91 110
+81 183 151 332 312 80 88 93 97 170 129 46 18 162 71 258 118 295 142 413 184
+589 206 92 12 383 14 446 3z"/>
+</g>
+</svg>
diff --git a/public/site.webmanifest b/public/site.webmanifest
new file mode 100644
index 0000000..a1553eb
--- /dev/null
+++ b/public/site.webmanifest
@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-384x384.png",
+            "sizes": "384x384",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}
diff --git a/src/App.js b/src/App.js
index 8e4b84b..a38112a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,6 +4,8 @@ import { Provider } from "react-redux";
 
 import Menu from "./components/Menu";
 import TextEditor from "./components/TextEditor";
+import Onboarding from "./components/Onboarding";
+
 import reducer from "./store/reducer";
 
 import "./App.css";
@@ -15,6 +17,7 @@ function App() {
 		<Provider store={store}>
 			<Menu />
 			<TextEditor />
+			<Onboarding />
 		</Provider>
 	);
 }
diff --git a/src/components/AutosizeInput.js b/src/components/AutosizeInput.js
index ffd9541..937d6ab 100644
--- a/src/components/AutosizeInput.js
+++ b/src/components/AutosizeInput.js
@@ -216,7 +216,7 @@ class AutosizeInput extends Component {
 		return (
 			<span className={this.props.className} style={wrapperStyle}>
 				{this.renderStyles()}
-				<input {...inputProps} ref={this.inputRef} />
+				<input {...inputProps} ref={this.inputRef} id="currentInput" />
 				<span ref={this.sizerRef} style={sizerStyle}>
 					{sizerValue}
 				</span>
diff --git a/src/components/CopyToClipboard.js b/src/components/CopyToClipboard.js
index 367b4f2..ef6edfc 100644
--- a/src/components/CopyToClipboard.js
+++ b/src/components/CopyToClipboard.js
@@ -1,8 +1,10 @@
 import React, { Component } from "react";
 import { connect } from "react-redux";
-import clipboard from "clipboard-polyfill";
 import styled from "styled-components";
-import { Box, Flex } from "rebass";
+import { Button } from "rebass";
+import Hotkeys from "react-hot-keys";
+
+import Clipboard from "../includes/Clipboard";
 
 const Image = styled.img`
 	height: 2rem;
@@ -13,12 +15,6 @@ const Image = styled.img`
 	}
 `;
 
-const Span = styled(Box)`
-	&:hover {
-		cursor: pointer;
-	}
-`;
-
 function mapStateToProps(state) {
 	return {
 		text: state.text,
@@ -28,33 +24,34 @@ function mapStateToProps(state) {
 
 class CopyToClipboard extends Component {
 	handleClick = () => {
-		clipboard.writeText(this.props.text + this.props.latestText).then(res => {
-			alert(
-				"Your text is copied to clipboard. \nPaste it to your favorite editor."
-			);
-		});
+		Clipboard(
+			this.props.text + this.props.latestText,
+			"Your text is copied to clipboard. \nPaste it to your favorite editor."
+		);
 	};
 
 	render() {
 		return (
-			<Flex>
-				{this.props.image ? (
-					<Box>
+			<Hotkeys
+				keyName="ctrl+c"
+				onKeyUp={this.handleClick}
+				filter={event => {
+					return true;
+				}}
+			>
+				<Button onClick={this.handleClick} bg="white" color="black" border="2">
+					{this.props.image ? (
 						<Image
 							src={this.props.image}
 							alt={this.props.alt}
 							onClick={this.handleClick}
 						/>
-					</Box>
-				) : (
-					""
-				)}
-				{this.props.message ? (
-					<Span onClick={this.handleClick}>{this.props.message}</Span>
-				) : (
-					""
-				)}
-			</Flex>
+					) : (
+						""
+					)}
+					{this.props.message ? this.props.message : ""}
+				</Button>
+			</Hotkeys>
 		);
 	}
 }
diff --git a/src/components/Menu.js b/src/components/Menu.js
index 94ec842..4c79a06 100644
--- a/src/components/Menu.js
+++ b/src/components/Menu.js
@@ -1,42 +1,23 @@
 import React, { Component } from "react";
 import styled from "styled-components";
-import CopyToClipboard from "./CopyToClipboard";
-import NewFile from "./NewFile";
 
 const MenuWrapper = styled.div`
 	display: flex;
 	flex-direction: row;
-	justify-content: flex-end;
+	justify-content: space-between;
 	width: 100%;
 `;
 
-// const MenuWrapper = styled.div`
-// 	position: absolute;
-// 	left: 10px;
-// 	float: right;
-// 	width: 150px;
-// 	height: 100%;
-// 	z-index: 1;
-// 	background: white;
-// 	filter: opacity(0%);
-// 	&:hover {
-// 		filter: opacity(100%);
-// 	}
-// `;
-
-const MenuItems = styled.div`
+const Logo = styled.div`
+	align-self: flex-start;
 	margin: 25px;
 	padding: 10px;
-	height: 90px;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-around;
-
-	background: #eee;
 	font-size: 1.5rem;
-	filter: opacity(30%);
+	width: 32px;
+	height: 32px;
+	filter: opacity(20%);
 	&:hover {
-		filter: opacity(60%);
+		filter: opacity(100%);
 	}
 `;
 
@@ -44,16 +25,14 @@ export default class Menu extends Component {
 	render() {
 		return (
 			<MenuWrapper>
-				<MenuItems>
-					{/* <HeadingOne title="Distraction-free writing app">Flow</HeadingOne> */}
-					<NewFile image="new.svg" alt="New text" message="New" />
-
-					<CopyToClipboard
-						image="copy.svg"
-						alt="Copy text to clipboard"
-						message="Copy"
+				<Logo>
+					<img
+						width="32"
+						src="/flow-icon.svg"
+						alt="Flow Writer App"
+						title="Flow Writer App | CTRL+C to copy text | CRTL+N to start new text"
 					/>
-				</MenuItems>
+				</Logo>
 			</MenuWrapper>
 		);
 	}
diff --git a/src/components/NewFile.js b/src/components/NewFile.js
index fb19cea..8e5d24e 100644
--- a/src/components/NewFile.js
+++ b/src/components/NewFile.js
@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import styled from "styled-components";
-import { Box, Flex } from "rebass";
+import { Button } from "rebass";
+import Hotkeys from "react-hot-keys";
 
 const Image = styled.img`
 	margin: 0px 10px 0px 10px;
@@ -10,33 +11,28 @@ const Image = styled.img`
 	}
 `;
 
-const Span = styled(Box)`
-	&:hover {
-		cursor: pointer;
-	}
-`;
-
 class NewFile extends Component {
 	handleClick = () => {
 		window.open("/", "_blank");
 	};
 	render() {
 		return (
-			<Flex justifyContent="left" flexDirection="row" alignItems="center">
-				<Box>
-					<Image
-						src={this.props.image}
-						alt={this.props.alt}
-						onClick={this.andleClick}
-					/>
-				</Box>
-
-				{this.props.message ? (
-					<Span onClick={this.handleClick}>{this.props.message}</Span>
-				) : (
-					""
-				)}
-			</Flex>
+			<Hotkeys
+				keyName="ctrl+n"
+				onKeyUp={this.handleClick}
+				filter={event => {
+					return true;
+				}}
+			>
+				<Button onClick={this.handleClick} bg="white" color="black" border="2">
+					{this.props.image ? (
+						<Image src={this.props.image} alt={this.props.alt} />
+					) : (
+						""
+					)}
+					{this.props.message ? this.props.message : ""}
+				</Button>
+			</Hotkeys>
 		);
 	}
 }
diff --git a/src/components/Onboarding.js b/src/components/Onboarding.js
new file mode 100644
index 0000000..da3b1b8
--- /dev/null
+++ b/src/components/Onboarding.js
@@ -0,0 +1,159 @@
+import React, { Component } from "react";
+import { Card, Button } from "rebass";
+import styled from "styled-components";
+import { connect } from "react-redux";
+import { Twitter, Github } from "styled-icons/boxicons-logos";
+import { GrinWink, Keyboard } from "styled-icons/fa-regular";
+import * as Cookies from "js-cookie";
+
+import CopyToClipboard from "./CopyToClipboard";
+import NewFile from "./NewFile";
+
+function mapStateToProps(state) {
+	return {
+		text: state.text,
+		latestText: state.latestText,
+		title: state.title
+	};
+}
+
+const Message = styled(Card)`
+	position: absolute;
+	left: 50%;
+	top: 0;
+	transform: translate(-50%, 0);
+	width: 71%;
+
+	max-width: 1000px;
+	visibility: ${props => (props.visibility ? props.visibility : "visible")};
+	opacity: ${props => (props.visibility === "visible" ? 1 : 0)};
+	transition: opacity 500ms linear, visibility 0s linear 500ms;
+
+	@media (max-width: 450px) {
+		width: 95%;
+		transform: translate(-50%, 0);
+		margin-top: 3px;
+		margin-bottom: 3px;
+	}
+`;
+
+const TwitterIcon = styled(Twitter)`
+	&:hover {
+		color: #38a1f3;
+	}
+`;
+
+const GithubIcon = styled(Github)`
+	&:hover {
+		color: black;
+	}
+`;
+
+class Onboarding extends Component {
+	constructor(props) {
+		super(props);
+		this.startButtonRef = React.createRef();
+	}
+
+	state = {
+		showOnboarding: "true"
+	};
+	CheckCookie = () => {
+		this.setState({ showOnboarding: Cookies.get("showOnboarding") });
+	};
+
+	// Currently Onboarding should be shown every time the App opens
+	// SetCookie = () => {
+	// 	Cookies.set("showOnboarding", "false");
+	// };
+
+	componentWillMount() {
+		this.CheckCookie();
+		// Currently Onboarding should be shown every time the App opens
+		//this.SetCookie(); // Just set cookie to "true" when component mounts. This cookie lifitime - current browser session.
+	}
+
+	render() {
+		return (
+			<Message
+				visibility={
+					this.props.text.length > 0 ||
+					this.props.latestText.length > 0 ||
+					this.state.showOnboarding === "false"
+						? "hidden"
+						: "visible"
+				}
+				fontSize={3}
+				fontWeight="bold"
+				width="70px"
+				p={5}
+				my={6}
+				bg="white"
+				borderRadius={8}
+				boxShadow="0 2px 16px rgba(0, 0, 0, 0.25)"
+			>
+				<p style={{ textAlign: "center" }}>
+					<NewFile image="new.svg" alt="New text" message="New text (ctrl+n)" />{" "}
+					<CopyToClipboard
+						image="copy.svg"
+						alt="Copy text to clipboard"
+						message="Copy text (ctrl+c)"
+					/>
+				</p>
+				<br />
+
+				<p>Welcome to Flow Writer App!</p>
+				<h1
+					style={{
+						fontSize: "20px",
+						marginBottom: "1rem",
+						fontWeight: "normal"
+					}}
+				>
+					Flow &mdash; distraction-free writer, that helps to stay focused while
+					writing texts.
+				</h1>
+				<p>
+					Start writing. Move forward. Don't edit (and you can't{" "}
+					<GrinWink size="22" color="grey" />
+					).
+				</p>
+				<p>
+					Once finished writing, press CTRL+C to copy text to clipboard. Then
+					paste and edit in your favorite editor.
+				</p>
+				<br />
+
+				<p style={{ textAlign: "center" }}>
+					<Button
+						ref={this.startButtonRef}
+						onClick={() => {
+							this.setState({ showOnboarding: "false" });
+							document
+								.getElementById("currentInput")
+								.focus({ preventScroll: false });
+						}}
+						bg="deepskyblue"
+					>
+						Ok, start writing...{" "}
+						<Keyboard size="30" style={{ verticalAlign: "-.45em" }} />
+					</Button>
+				</p>
+
+				<p style={{ textAlign: "right" }}>
+					<a href="https://twitter.com/paveli" target="blank">
+						<TwitterIcon size="30" color="grey" />
+					</a>{" "}
+					<a href="https://github.com/paveli/Flow-Writer-App" target="blank">
+						<GithubIcon size="30" color="grey" />
+					</a>
+				</p>
+			</Message>
+		);
+	}
+}
+
+export default connect(
+	mapStateToProps,
+	null
+)(Onboarding);
diff --git a/src/components/TextEditor.js b/src/components/TextEditor.js
index 9950979..5207289 100644
--- a/src/components/TextEditor.js
+++ b/src/components/TextEditor.js
@@ -4,6 +4,8 @@ import { connect } from "react-redux";
 import styled from "styled-components";
 import AutosizeInput from "./AutosizeInput";
 
+import Clipboard from "../includes/Clipboard";
+
 import { updateText, updateLatestText, updateTitle } from "../store/actions";
 
 function mapDisptchToProps(dispatch) {
@@ -27,7 +29,7 @@ const Editor = styled(AutosizeInput)`
     margin: 0px;
     padding: 0px;
     outline: none;
-    font-size: 2rem;
+    font-size: 2.1rem;
 	caret-color: deepskyblue;
 
 
@@ -44,7 +46,7 @@ const Editor = styled(AutosizeInput)`
 const Paragraph = styled.p`
 	display: block;
 	width: 100%;
-	min-height: 2rem;
+	min-height: 2.1rem;
 
 	&:last-of-type {
 		width: auto;
@@ -68,9 +70,13 @@ const PreviewWrapper = styled.div`
 	width: 70%;
 	max-width: 1000px;
 	height: 50%;
-	font-size: 2rem;
+	font-size: 2.1rem;
 	color: lightgrey;
 	overflow: hidden;
+
+	@media (max-width: 450px) {
+		width: 95%;
+	}
 `;
 
 const Wrapper = styled.div`
@@ -85,16 +91,25 @@ class TextEditor extends Component {
 	}
 
 	state = {
-		// text: "",
-		// latestText: "",
 		textParagraphCount: 0
 	};
 
 	componentDidUpdate() {
-		console.log("componentDidUpdate");
 		if (this.props.title) {
 			document.title = this.props.title;
 		}
+
+		if (window.onbeforeunload === null && this.props.text.length > 0) {
+			window.onbeforeunload = function(e) {
+				e = e || window.event;
+				// For IE and Firefox prior to version 4
+				if (e) {
+					e.returnValue = "Don't forget to save (CTRL+C) your text.";
+				}
+				// For Safari
+				return "Don't forget to save (CTRL+C) your text.";
+			};
+		}
 	}
 
 	updateEditor = event => {
@@ -125,7 +140,7 @@ class TextEditor extends Component {
 			}
 
 			if (keyPressed === 13) {
-				latestText += "\n ";
+				latestText += "\n";
 				paragpraphIncerement++;
 			}
 
@@ -148,14 +163,37 @@ class TextEditor extends Component {
 				onClick={() => {
 					this.editorRef.current.focus({ preventScroll: false });
 				}}
+				onTouchEnd={() => {
+					this.editorRef.current.focus({ preventScroll: false });
+				}}
 			>
 				<PreviewWrapper>
 					{this.props.text.split("\n").map((value, index) => {
 						if (this.state.textParagraphCount !== index) {
-							return <Paragraph key={index}>{value}</Paragraph>;
+							return (
+								<Paragraph
+									key={index}
+									onTouchEnd={() => {
+										Clipboard(
+											this.props.text + this.props.latestText,
+											"Your text is copied to clipboard. \nPaste it to your favorite editor."
+										);
+									}}
+								>
+									{value}
+								</Paragraph>
+							);
 						} else {
 							return (
-								<Paragraph key={index}>
+								<Paragraph
+									key={index}
+									onTouchEnd={() => {
+										Clipboard(
+											this.props.text + this.props.latestText,
+											"Your text is copied to clipboard. \nPaste it to your favorite editor."
+										);
+									}}
+								>
 									{value}
 									<Editor
 										ref={this.editorRef}
diff --git a/src/includes/Clipboard.js b/src/includes/Clipboard.js
new file mode 100644
index 0000000..b0b5dc5
--- /dev/null
+++ b/src/includes/Clipboard.js
@@ -0,0 +1,11 @@
+import * as clipboard from "clipboard-polyfill";
+
+const Clipboard = (text, alertText) => {
+	clipboard.writeText(text).then(res => {
+		if (alertText) {
+			alert(alertText);
+		}
+	});
+};
+
+export default Clipboard;
diff --git a/yarn.lock b/yarn.lock
index cd5b2f1..6fe9cc2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4534,6 +4534,11 @@ hosted-git-info@^2.1.4:
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.7.1.tgz#97f236977bd6e125408930ff6de3eec6281ec047"
   integrity sha512-7T/BxH19zbcCTa8XkMlbK5lTo1WtgkFi3GvdWEyNuc4Vex7/9Dqbnpsf4JMydcfj9HCg4zUWFTL3Za6lapg5/w==
 
+hotkeys-js@^3.6.2:
+  version "3.6.11"
+  resolved "https://registry.yarnpkg.com/hotkeys-js/-/hotkeys-js-3.6.11.tgz#fbedbda3005f3f4a2f36c20c4e1b4f1ede999f94"
+  integrity sha512-CQiE9t0OFTL1sEH4UAPpCwWYCVOBIBePeRjNeNMndsLdZyXal5jR0rDv8Y+GLMcztN2Gudvuy+V0v3oUFWV5QQ==
+
 hpack.js@^2.1.6:
   version "2.1.6"
   resolved "https://registry.yarnpkg.com/hpack.js/-/hpack.js-2.1.6.tgz#87774c0949e513f42e84575b3c45681fade2a0b2"
@@ -5684,6 +5689,11 @@ joi@^14.3.1:
     isemail "3.x.x"
     topo "3.x.x"
 
+js-cookie@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.0.tgz#1b2c279a6eece380a12168b92485265b35b1effb"
+  integrity sha1-Gywnmm7s44ChIWi5JIUmWzWx7/s=
+
 js-levenshtein@^1.1.3:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.6.tgz#c6cee58eb3550372df8deb85fad5ce66ce01d59d"
@@ -7844,7 +7854,7 @@ prompts@^2.0.1:
     kleur "^3.0.2"
     sisteransi "^1.0.0"
 
-prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.4, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -8060,12 +8070,12 @@ react-error-overlay@^5.1.6:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-5.1.6.tgz#0cd73407c5d141f9638ae1e0c63e7b2bf7e9929d"
   integrity sha512-X1Y+0jR47ImDVr54Ab6V9eGk0Hnu7fVWGeHQSOXHf/C2pF9c6uy3gef8QUeuUiWlNb0i08InPSE5a/KJzNzw1Q==
 
-react-input-autosize@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.2.1.tgz#ec428fa15b1592994fb5f9aa15bb1eb6baf420f8"
-  integrity sha512-3+K4CD13iE4lQQ2WlF8PuV5htfmTRLH6MDnfndHM6LuBRszuXnuyIfE7nhSKt8AzRBZ50bu0sAhkNMeS5pxQQA==
+react-hot-keys@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/react-hot-keys/-/react-hot-keys-1.3.1.tgz#14a5ee29b38264790adfc84bde73e1d21fa5ae31"
+  integrity sha512-Ino7daWt2lhUBo7Wr3ATr8dVrc1yyp9uPgR87lHrgV9poYDjh0y7BA3ClvkokcIyFoKIEcs3RQMHxuIAcjuQNg==
   dependencies:
-    prop-types "^15.5.8"
+    hotkeys-js "^3.6.2"
 
 react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6:
   version "16.8.6"
@@ -9174,6 +9184,14 @@ styled-components@^4.2.0:
     stylis-rule-sheet "^0.0.10"
     supports-color "^5.5.0"
 
+styled-icons@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/styled-icons/-/styled-icons-8.1.0.tgz#d3b2c2c563a24d4f186190c9f89baff02c394b79"
+  integrity sha512-/DgEIJRcIiyG6hCX8yl+xXucEc4wWhwY3BuT4H+8ZymuGYsvNjGIIOZ7+hXZI3owJK736LNHV9hTg1fG7CDkJg==
+  dependencies:
+    "@emotion/is-prop-valid" "^0.7.3"
+    tslib "^1.9.3"
+
 styled-system@^4.0.8:
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/styled-system/-/styled-system-4.2.4.tgz#8909f91396c30b92295b4eddec5f7b89f8c8d767"
@@ -9448,6 +9466,11 @@ tslib@^1.8.1, tslib@^1.9.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
   integrity sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==
 
+tslib@^1.9.3:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
+  integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==
+
 tsutils@^3.7.0:
   version "3.10.0"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.10.0.tgz#6f1c95c94606e098592b0dff06590cf9659227d6"