diff --git a/README.md b/README.md
index 2f67c0f4..2981ce47 100644
--- a/README.md
+++ b/README.md
@@ -2,9 +2,9 @@
 
 Open source, extendable data visualiser for Apache TinkerPop's Gremlin supported graph databases.
 
-This project is at Alpha Release currently, and expected 
+**This project is at Alpha Release currently, and expected 
 to go into Beta in few weeks depending on the feed back
-from the Community. You can access live version of the demo hosted on [heroku](https://graph-explorer.herokuapp.com/) 
+from the Community.** You can access live version of the demo hosted on [heroku](https://graph-explorer.herokuapp.com/) 
 
 **Note:** You still need gremlin server running on your local or remote.
 
@@ -21,10 +21,7 @@ Get the UI graph-explorer server live in minutes.
 
 #### Use Image from Docker Hub
 
-```shell script
-# for stable release
-docker run -p 8888:8888 -d --name graph-explorer invanalabs/graph-explorer:alpha
-
+```shell script.
 # for latest release
 docker run -p 8888:8888 -d --name graph-explorer invanalabs/graph-explorer
 
@@ -38,7 +35,14 @@ docker build . -t invana-graph-explorer
 docker run -p 8888:8888 -d invana-graph-explorer
 ```
 
-![screenshot](./screenshot.png)
+## Screenshots
+![1](./docs/screenshots/1.png)
+![2](./docs/screenshots/2.png)
+![3](./docs/screenshots/3.png)
+![4](./docs/screenshots/4.png)
+![5](./docs/screenshots/5.png)
+![6](./docs/screenshots/6.png)
+![7](docs/screenshots/7.png)
 
 
 ## License
diff --git a/docs/screenshots/1.png b/docs/screenshots/1.png
new file mode 100644
index 00000000..90a66fdd
Binary files /dev/null and b/docs/screenshots/1.png differ
diff --git a/docs/screenshots/2.png b/docs/screenshots/2.png
new file mode 100644
index 00000000..a05dfe9a
Binary files /dev/null and b/docs/screenshots/2.png differ
diff --git a/docs/screenshots/3.png b/docs/screenshots/3.png
new file mode 100644
index 00000000..01940371
Binary files /dev/null and b/docs/screenshots/3.png differ
diff --git a/docs/screenshots/4.png b/docs/screenshots/4.png
new file mode 100644
index 00000000..4dcfccb3
Binary files /dev/null and b/docs/screenshots/4.png differ
diff --git a/docs/screenshots/5.png b/docs/screenshots/5.png
new file mode 100644
index 00000000..420754c4
Binary files /dev/null and b/docs/screenshots/5.png differ
diff --git a/docs/screenshots/6.png b/docs/screenshots/6.png
new file mode 100644
index 00000000..fb76e3c9
Binary files /dev/null and b/docs/screenshots/6.png differ
diff --git a/docs/screenshots/7.png b/docs/screenshots/7.png
new file mode 100644
index 00000000..20302cf7
Binary files /dev/null and b/docs/screenshots/7.png differ
diff --git a/screenshot.png b/screenshot.png
deleted file mode 100644
index a72c0c10..00000000
Binary files a/screenshot.png and /dev/null differ
diff --git a/src/config.js b/src/config.js
index 9ae68eba..83ec2912 100644
--- a/src/config.js
+++ b/src/config.js
@@ -39,3 +39,4 @@ export const linkCurvature = .85;
 
 export const managementVertexLabel = "InvanaManagement";
 export const historyLocalStorageKey = "GRAPH_EXPLORER_HISTORY";
+export const DEMO_URL = "https://www.youtube.com/watch?v=7jdgUOZUtlQ";
diff --git a/src/core/components/about.js b/src/core/components/about.js
index 16165d75..de33496a 100644
--- a/src/core/components/about.js
+++ b/src/core/components/about.js
@@ -13,8 +13,8 @@ export default class AboutComponent extends React.Component {
                       size={this.props.size} onClose={this.props.onClose}>
 
 
-                <h3 style={{"margin-bottom": "0", "fontWeight": "20px"}}>Graph Explorer <small>({VERSION})</small></h3>
-                <p style={{"margin-top": "0"}}>
+                <h3 style={{"marginBottom": "0", "fontWeight": "20px"}}>Graph Explorer <small>({VERSION})</small></h3>
+                <p style={{"marginTop": "0"}}>
                     {ABOUT_TEXT} <br/>
                 </p>
                 <p>
diff --git a/src/core/components/learn-queries.js b/src/core/components/learn-queries.js
index c6fe946a..702233a2 100644
--- a/src/core/components/learn-queries.js
+++ b/src/core/components/learn-queries.js
@@ -2,16 +2,17 @@ export const q1CreateData = "// Adding data of type `Person`\n\n" +
     "person = g.addV('Person')\n" +
     ".property('name', 'Ravi Raja')\n" +
     ".iterate();\n\n" +
-    "// Adding data of type `Project`\n\n" +
-    "project = g.addV('Project')\n" +
+    "// Adding data of type `GitHubProject`\n\n" +
+    "project = g.addV('GitHubProject')\n" +
     ".property('name', 'Graph Explorer')\n" +
-    ".iterate();";
-
-export const q2allData = "// Display the two nodes \n" +
-    "g.V().limit(2).toList()";
+    ".iterate();\n" +
+    "\n" +
+    "// show the results back\n" +
+    "nodes = g.V().limit(2).toList();";
 
 
-export const q3 = "// this will update existing property and adds a new property.\n\n" +
+export const q3 = "// this will update existing property `name` and adds a new properties" +
+    "`full_name` and `profile_pic`.\n\n" +
     "g\n" +
     ".V()\n" +
     ".hasLabel('Person')\n" +
@@ -19,10 +20,12 @@ export const q3 = "// this will update existing property and adds a new property
     ".property('name', 'rrmerugu')\n" +
     ".property('full_name', 'Ravi Raja Merugu')\n" +
     ".property('profile_pic', 'https://avatars1.githubusercontent.com/u/4606947')\n" +
-    ".iterate()\n"
+    ".iterate()\n;" +
+    "\n" +
+    "nodes = g.V().limit(2).toList();\n"
 
 
-export const q4 = "// this will add a relation ship between Person and Project data.\n\n" +
+export const q4 = "// this will add a relation ship between Person and GitHubProject data.\n\n" +
     "g\n" +
     ".V()\n" +
     ".hasLabel('Person')\n" +
@@ -30,7 +33,7 @@ export const q4 = "// this will add a relation ship between Person and Project d
     ".as('person')\n" +
     "\n" +
     ".V()\n" +
-    ".hasLabel('Project')\n" +
+    ".hasLabel('GitHubProject')\n" +
     ".has('name','Graph Explorer')\n" +
     "\n" +
     ".addE('authored')\n" +
diff --git a/src/core/components/learn.js b/src/core/components/learn.js
index 798fd9a0..a39539ed 100644
--- a/src/core/components/learn.js
+++ b/src/core/components/learn.js
@@ -3,7 +3,7 @@ import FlyOutUI from "../ui/flyout";
 import {faExternalLinkSquareAlt} from "@fortawesome/free-solid-svg-icons";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import "./learn.scss";
-import {q1CreateData, q2allData, q3, q4, q5} from "./learn-queries";
+import {q1CreateData, q3, q4, q5} from "./learn-queries";
 
 export default class LearnFlyOut extends React.Component {
 
@@ -21,32 +21,22 @@ export default class LearnFlyOut extends React.Component {
                 <ul className={"vertical list"}>
                     <li>
                         <a onClick={() => this.props.addQueryToConsole(q1CreateData)}>
-                            1. Add a `Person` and `Organisation` nodes</a>
-                    </li>
-                    <li>
-                        <a onClick={() => this.props.addQueryToConsole(q2allData)}>
-                            2. View the nodes</a>
+                            1. Add a `Person` and `GitHubProject` nodes</a>
                     </li>
                     <li>
                         <a onClick={() => this.props.addQueryToConsole(q3)}>
-                            3. Update `Person` properties</a>
+                            2. Update properties of the Node</a>
                     </li>
                     <li>
                         <a onClick={() => this.props.addQueryToConsole(q4)}>
-                            4. Add a relations between both the nodes.</a>
-                    </li>
-                    <li>
-                        <a onClick={() => this.props.addQueryToConsole(q5)}>
-                            5. View all the connections between the nodes.
-                        </a>
-                    </li>
-                    <li>
-                        <a onClick={() => this.props.onClose()}>
-                            6. Close this and explore data
-                        </a>
+                            3. Add a relation between both the nodes.</a>
                     </li>
 
+
                 </ul>
+                <p>Awesome! <u><a onClick={() => this.props.onClose()}> Close this tour </a></u> and start exploring
+                    your graph data.
+                </p>
                 <h3 style={{"marginTop": "30px"}}>More Resources</h3>
                 <ul className={"vertical list fs-14"}>
                     <li>
diff --git a/src/core/components/vertex-options.js b/src/core/components/vertex-options.js
index 69e04daf..d1220740 100644
--- a/src/core/components/vertex-options.js
+++ b/src/core/components/vertex-options.js
@@ -100,8 +100,8 @@ export default class VertexOptions extends GremlinHeadlessComponent {
                            placeholder={"borderColor"} spellCheck="false"
                            defaultValue={thisNodeOptions.borderColor || selectedNode.meta.shapeOptions.strokeColor}/>
 
-                    <label className={""}>Background Image (from web)</label>
-                    <input type="text" name={"bgImageUrl"} placeholder={"bgImage (optional)"}
+                    {/*<label className={""}>Background Image (from web)</label>*/}
+                    <input type="hidden" name={"bgImageUrl"} placeholder={"bgImage (optional)"}
                            spellCheck="false"
                            defaultValue={thisNodeOptions.bgImageUrl || selectedNode.meta.bgImageUrl}/>
 
diff --git a/src/core/ui/canvas/graph/selected-data.scss b/src/core/ui/canvas/graph/selected-data.scss
index 41e83edc..c6d4244e 100644
--- a/src/core/ui/canvas/graph/selected-data.scss
+++ b/src/core/ui/canvas/graph/selected-data.scss
@@ -1,7 +1,6 @@
 @import "../../../../config";
 
 .SelectedDataHeading {
-  font-size: 12px;
   background: #585858;
   color: $defaultTextColor;
   padding: 3px 0;
diff --git a/src/core/ui/flyout/flyout.scss b/src/core/ui/flyout/flyout.scss
index 13a8b1ab..90d7c40b 100644
--- a/src/core/ui/flyout/flyout.scss
+++ b/src/core/ui/flyout/flyout.scss
@@ -5,7 +5,7 @@
   z-index: 10000;
   display: none;
   /*color: #555555;*/
-  font-size: 12px;
+  //font-size: 12px;
   line-height: 1.2rem;
   word-wrap: break-word;
   //font-family: Courier;
@@ -28,7 +28,7 @@
       padding: 1px 5px;
       border-radius: 2px;
       margin-right: 0;
-      font-size: 12px;
+      //font-size: 12px;
       box-shadow: none;
     }
 
diff --git a/src/index.scss b/src/index.scss
index a901b7b7..8a19403d 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -8,7 +8,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   background-color: $canvasBgColor;
-  font-size: 14px;
+  font-size: 12px;
   color: $defaultTextColor;
 }
 
diff --git a/src/views/connect.js b/src/views/connect.js
index 1c190acc..7ed64a4f 100644
--- a/src/views/connect.js
+++ b/src/views/connect.js
@@ -1,7 +1,7 @@
 import React from "react";
 import Modal from "../core/ui/modal";
 import {setDataToLocalStorage} from "../core/utils";
-import {gremlinServerUrlKey , VERSION, ABOUT_TEXT} from "../config";
+import {gremlinServerUrlKey, VERSION, ABOUT_TEXT, DEMO_URL} from "../config";
 import "./connect.scss";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faPlayCircle} from "@fortawesome/free-solid-svg-icons";
@@ -21,6 +21,10 @@ export default class SetupGremlinServerConnection extends React.Component {
         window.location.href = "/";
     }
 
+    openDemo() {
+        window.open(DEMO_URL);
+
+    }
 
     render() {
 
@@ -42,7 +46,8 @@ export default class SetupGremlinServerConnection extends React.Component {
                             <br/>
                             <button type={"submit"} className={"primary-btn button"}>Connect</button>
 
-                            <button type={"button"} className={" button secondary-btn ml-10"}>
+                            <button onClick={() => this.openDemo()} type={"button"}
+                                    className={" button secondary-btn ml-10"}>
                                 <FontAwesomeIcon icon={faPlayCircle}/> watch demo
                             </button>
                         </form>