diff --git a/README.md b/README.md
index c5e3312..43bc0cd 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,26 @@
-# tweetscape
+<p align="center" style="text-align:center;">
+  <a href="https://github.com/pierrechls/tweetscape"><img src="https://img.shields.io/badge/version-1.1.0-green.svg?style=flat-square"></a>
+  <a href="https://img.shields.io/badge/build-passing-green.svg?style=flat-square"><img src="https://img.shields.io/badge/build-passing-green.svg?style=flat-square"></a>
+  <a href="http://vuejs.org/"><img src="https://img.shields.io/badge/front--end%20framework-vue.js-lightgrey.svg?style=flat-square"></a>
+  <a href="https://aframe.io/"><img src="https://img.shields.io/badge/vr%20framework-a--frame-lightgrey.svg?style=flat-square"></a>
+  <a href="http://standardjs.com/"><img src="https://img.shields.io/badge/code_style-standard-lightgrey.svg?style=flat-square"></a>
+</p>
 
-## How to use it
+<h1 align="center" style="text-align:center; border: 0;">T W E E T S C A P E</h1>
+
+<h6 align="center" style="text-align:center;">A WebVR experience displaying tweets along a 3D timeline</h6>
+
+<p align="center" style="text-align:center;">
+  <img src="http://cdn.rawgit.com/pierrechls/tweetscape/master/static/preview.gif" style="width:100%;">
+</p>
+
+## 🚀 How to use it
+
+### Clone the repo
+
+```bash
+$ git clone git@github.com:pierrechls/tweetscape.git
+```
 
 ### Connect your Twitter API
 
@@ -21,7 +41,6 @@ $ npm install
 $ npm run dev
 ```
 
-
 ### Serve the API port
 
 ```bash
@@ -42,12 +61,17 @@ $ npm run lint
 
 ### Deploy your build
 
-Before, you have to build for production.
-
 ```bash
 $ npm run deploy
 ```
 
-## Prior installation
+Set API production URL from the `default.json` file into `settings` folder.
+
+## 🛠 Prior installation
 
 You have to download [Node.js](https://nodejs.org/en/download/)
+
+
+## 🎉 Credits
+
+Project developed by [Pierre Charles](https://github.com/pierrechls/), [Jules Tantot](https://github.com/lujlujluj) and [Victor Viale](https://github.com/Koroeskohr), 3 students of [IMAC](http://www.ingenieur-imac.fr/) Engineering school.
diff --git a/client/assets/icons/cardboard.svg b/client/assets/icons/cardboard.svg
new file mode 100644
index 0000000..f38518d
--- /dev/null
+++ b/client/assets/icons/cardboard.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M261.72,96.728c40.656-0.008,81.32-0.042,121.978,0.008
+	c26.019,0.031,39.141,11.144,44.319,36.739c0.478,2.386,3.147,5.191,5.495,6.203c23.502,10.166,34.669,28.208,34.615,53.431
+	c-0.062,26.135-0.616,52.27-0.608,78.397c0.016,28.02-0.246,56.063,0.831,84.053c1.509,39.109-27.119,62.104-60.058,60.604
+	c-34.6-1.577-69.331-0.546-103.992-0.169c-7.118,0.076-10.651-2.094-13.129-8.812c-6.703-18.14-6.995-18.023-26.227-18.009
+	c-10.405,0.016-20.813,0.254-31.203-0.123c-5.483-0.2-8.412,1.463-10.555,6.818c-8.027,20.04-8.238,19.947-29.64,19.955
+	c-31.518,0.008-63.036,0.054-94.558,0.047c-34.404-0.016-56.764-22.218-56.825-56.695c-0.1-54.709-0.054-109.425-0.035-164.134
+	c0.015-32.98,15.926-51.938,48.433-58.411c2.12-0.419,4.806-3.552,5.279-5.826c4.502-21.687,18.812-33.95,41.068-34.027
+	C178.513,96.627,220.116,96.735,261.72,96.728z M255.193,150.244c-51.661,0-103.327-0.023-154.988,0.008
+	c-28.947,0.015-44.154,15.222-44.185,44.293c-0.058,52.527-0.031,105.05-0.007,157.582c0,5.033-0.085,10.097,0.354,15.106
+	c1.64,18.771,17.396,34.423,36.174,34.67c35.905,0.461,71.824,0.3,107.729-0.047c2.736-0.022,6.768-2.924,7.93-5.51
+	c5.533-12.313,10.324-24.973,15.307-37.532c5.671-14.299,16.019-22.402,31.472-22.926c14.076-0.477,25.626,7.988,31.661,22.618
+	c4.917,11.905,9.842,23.826,14.152,35.962c2.139,6.025,5.341,7.903,11.729,7.834c32.444-0.354,64.897-0.177,97.343-0.161
+	c29.028,0.016,44.389-15.106,44.42-44.043c0.062-54.801,0.062-109.595-0.008-164.392c-0.03-27.786-15.53-43.4-43.143-43.439
+	C359.155,150.19,307.17,150.244,255.193,150.244z M413.325,136.23c0.9-15.765-9.997-25.8-27.89-25.812
+	c-82.498-0.046-165.004-0.023-247.51-0.016c-2.201,0-4.425-0.042-6.603,0.219c-12.671,1.524-22.11,12.964-20.852,25.608
+	C211.409,136.23,312.381,136.23,413.325,136.23z M277.634,375.167c-4.833-18.347-11.866-26.097-22.787-25.796
+	c-11.436,0.308-18.443,8.45-21.891,25.796C247.694,375.167,262.343,375.167,277.634,375.167z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M155.418,336.019c-28.732,0.801-60.134-21.633-59.957-59.888
+	c0.165-35.886,28.024-59.819,60.138-59.812c33.784,0.008,59.646,27.266,60.126,59.919
+	C216.207,308.906,188.41,336.019,155.418,336.019z M109.583,276.523c-0.196,25.357,19.755,45.697,45.055,45.928
+	c25.527,0.23,46.101-19.624,47.032-44.228c1.201-31.652-24.907-47.937-45.778-48.375
+	C134.363,229.402,108.905,246.402,109.583,276.523z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M414.133,276.823c-0.199,33.977-25.818,59.28-59.918,59.173
+	c-32.584-0.101-60.119-26.92-59.25-59.35c0.993-37.355,28.49-60.466,60.427-60.312C388.707,216.504,414.334,242.823,414.133,276.823
+	z M354.992,322.467c25.08,0,46.481-20.84,46.412-45.174c-0.076-26.266-20.917-48.06-46.259-47.298
+	c-27.696,0.831-45.158,19.139-46.744,43.82C306.662,300.842,328.434,322.467,354.992,322.467z"/>
+</svg>
diff --git a/client/assets/icons/move-mouse.svg b/client/assets/icons/move-mouse.svg
new file mode 100644
index 0000000..6ce1e27
--- /dev/null
+++ b/client/assets/icons/move-mouse.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
+<g>
+	<path fill="#FFFFFF" d="M213.504,264.877c0-3.613,0-5.836,0-8.061c0-29.421-0.023-58.842,0.009-88.263
+		c0.022-18.208,11.643-30.798,28.227-30.69c16.254,0.106,27.767,12.635,27.831,30.426c0.063,17.269,0.014,34.534,0.014,52.575
+		c18.255-8.534,32.775-5.084,43.268,12.86c9.229-5.795,19.009-8.506,29.619-3.769c10.643,4.75,15.621,13.488,16.863,22.677
+		c8.242-0.497,16.314-2.323,23.908-1.131c11.47,1.8,20.448,11.969,20.555,23.545c0.264,28.452,1.592,57.142-1.39,85.322
+		c-5.263,49.746-55.509,86.316-105.271,79.783c-33.777-4.437-59.397-21.526-77.645-49.486
+		c-21.667-33.197-42.522-66.934-63.287-100.71c-4.458-7.249-8.002-15.396-10.251-23.599c-4.693-17.111,9.088-30.669,26.497-26.796
+		c13.194,2.935,23.564,10.901,33.706,19.228C208.239,260.5,210.31,262.229,213.504,264.877z M224.721,291.546
+		c-10.872-9.879-20.271-19.374-30.701-27.558c-6.844-5.369-14.787-9.914-22.945-12.894c-10.236-3.743-17.632,3.833-13.916,14.075
+		c3.23,8.898,7.687,17.506,12.68,25.577c17.673,28.571,35.667,56.95,53.859,85.197c5.412,8.407,11.207,16.753,17.969,24.075
+		c23.31,25.241,52.414,34.827,85.723,26.834c33.502-8.037,56.972-29.94,62.46-63.664c4.707-28.918,2.528-59.029,2.456-88.608
+		c-0.019-8.112-8.946-13.76-17.115-13.317s-14.9,6.849-15.792,15.132c-0.243,2.24-0.228,4.51-0.329,6.769c-3.907,0-7.247,0-10.997,0
+		c0-9.324,0.159-18.174-0.042-27.014c-0.235-10.251-7.648-17.564-17.194-17.335c-9.264,0.223-16.126,7.473-16.365,17.448
+		c-0.125,5.278-0.021,10.562-0.021,15.862c-4.142,0-7.326,0-11.243,0c0-9.337,0.182-18.387-0.048-27.425
+		c-0.246-9.896-7.448-17.069-16.72-17.1c-9.287-0.032-16.476,7.167-16.824,16.983c-0.142,3.966-0.03,7.94-0.03,11.91
+		c-0.001,8.989-0.001,17.977-0.001,26.765c-4.309,0-7.486,0-11.218,0c0-2.907,0-5.429,0-7.952c0-34.327,0-68.656,0-102.986
+		c0-1.868,0.041-3.736-0.017-5.603c-0.336-10.356-7.395-17.69-16.941-17.625c-9.559,0.067-16.626,7.426-16.651,17.842
+		c-0.084,38.768-0.035,77.533-0.036,116.298C224.721,285.717,224.721,288.202,224.721,291.546z"/>
+</g>
+<g>
+	<path fill="#FFFFFF" d="M191.273,129.808H72.733c-3.29,0-5.956-2.666-5.956-5.955c0-3.29,2.666-5.956,5.956-5.956h118.54
+		c3.289,0,5.956,2.666,5.956,5.956C197.229,127.142,194.562,129.808,191.273,129.808z"/>
+	<g>
+		<polygon fill="#FFFFFF" points="112.199,172.566 120.324,163.842 77.304,123.865 120.324,83.875 112.199,75.152 59.816,123.865 		
+			"/>
+	</g>
+</g>
+<g>
+	<path fill="#FFFFFF" d="M405.934,129.844h-118.54c-3.289,0-5.955-2.666-5.955-5.956c0-3.289,2.666-5.955,5.955-5.955h118.54
+		c3.289,0,5.955,2.666,5.955,5.955C411.889,127.178,409.223,129.844,405.934,129.844z"/>
+	<g>
+		<polygon fill="#FFFFFF" points="366.468,172.601 358.344,163.877 401.362,123.9 358.344,83.911 366.468,75.187 418.851,123.9 		
+			"/>
+	</g>
+</g>
+</svg>
diff --git a/client/assets/icons/smarthphone-orientation.svg b/client/assets/icons/smarthphone-orientation.svg
new file mode 100644
index 0000000..c81ef19
--- /dev/null
+++ b/client/assets/icons/smarthphone-orientation.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
+<path fill="#FFFFFF" d="M215.662,348.896H46.922c-9.651,0-17.502-7.852-17.502-17.502V45.974c0-9.651,7.852-17.502,17.502-17.502
+	h168.739c9.651,0,17.502,7.851,17.502,17.502v285.421C233.164,341.045,225.312,348.896,215.662,348.896z M46.922,41.935
+	c-2.228,0-4.039,1.812-4.039,4.039v285.421c0,2.227,1.812,4.039,4.039,4.039h168.739c2.227,0,4.039-1.812,4.039-4.039V45.974
+	c0-2.228-1.812-4.039-4.039-4.039H46.922z"/>
+<path fill="#FFFFFF" d="M466.078,483.529H180.657c-9.651,0-17.502-7.853-17.502-17.503V297.287c0-9.65,7.852-17.502,17.502-17.502
+	h285.421c9.65,0,17.502,7.852,17.502,17.502v168.739C483.58,475.677,475.729,483.529,466.078,483.529z M180.657,293.248
+	c-2.228,0-4.039,1.812-4.039,4.039v168.739c0,2.228,1.812,4.039,4.039,4.039h285.421c2.227,0,4.039-1.812,4.039-4.039V297.287
+	c0-2.227-1.812-4.039-4.039-4.039H180.657z"/>
+<g>
+	<path fill="#FFFFFF" d="M396.495,229.299l-9.847-0.713c2.581-35.695-5.564-62.864-24.211-80.753
+		c-30.749-29.498-80.49-24.2-80.989-24.142l-1.134-9.808c2.222-0.258,54.751-5.932,88.905,26.774
+		C390.124,160.677,399.302,190.501,396.495,229.299z"/>
+	<g>
+		<polygon fill="#FFFFFF" points="351.367,195.07 358.784,188.539 390.916,225.108 425.044,190.386 432.085,197.319 
+			390.512,239.598 		"/>
+	</g>
+</g>
+</svg>
diff --git a/client/assets/icons/spacebar.svg b/client/assets/icons/spacebar.svg
new file mode 100644
index 0000000..1f7f3c1
--- /dev/null
+++ b/client/assets/icons/spacebar.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M267.382,323.14c0-11.568,0-23.14,0-35.1c2.928,0,5.563,0,8.873,0
+	c0,11.675,0,23.388,0,35.1C273.298,323.14,270.339,323.14,267.382,323.14z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M294.005,178.273c0,2.859,0,4.618,0,6.377
+	c0,23.278,0.019,46.555-0.007,69.833c-0.017,14.405-9.212,24.366-22.332,24.28c-12.859-0.083-21.969-9.996-22.019-24.071
+	c-0.049-13.662-0.011-27.323-0.011-41.596c-14.443,6.751-25.932,4.022-34.232-10.175c-7.301,4.585-15.04,6.73-23.434,2.982
+	c-8.42-3.759-12.358-10.672-13.342-17.942c-6.521,0.393-12.907,1.838-18.916,0.895c-9.074-1.424-16.178-9.47-16.263-18.629
+	c-0.209-22.51-1.258-45.209,1.1-67.506c4.163-39.357,43.917-68.291,83.287-63.122c26.724,3.511,46.995,17.032,61.431,39.153
+	c17.143,26.265,33.643,52.957,50.072,79.679c3.526,5.736,6.331,12.181,8.11,18.671c3.713,13.539-7.19,24.265-20.964,21.201
+	c-10.438-2.323-18.643-8.625-26.667-15.213C298.171,181.736,296.532,180.368,294.005,178.273z M285.131,157.174
+	c8.602,7.816,16.038,15.328,24.29,21.802c5.415,4.248,11.699,7.844,18.153,10.202c8.099,2.961,13.95-3.033,11.01-11.136
+	c-2.556-7.04-6.082-13.851-10.032-20.237c-13.983-22.605-28.219-45.057-42.612-67.406c-4.283-6.651-8.867-13.254-14.217-19.048
+	c-18.442-19.969-41.469-27.553-67.822-21.23c-26.506,6.359-45.075,23.688-49.417,50.37c-3.725,22.879-2,46.702-1.944,70.104
+	c0.016,6.418,7.078,10.888,13.542,10.538c6.463-0.351,11.788-5.419,12.494-11.973c0.192-1.773,0.18-3.568,0.261-5.356
+	c3.091,0,5.733,0,8.699,0c0,7.377-0.125,14.379,0.034,21.374c0.186,8.11,6.051,13.896,13.604,13.715
+	c7.329-0.176,12.759-5.912,12.947-13.805c0.1-4.176,0.018-8.356,0.018-12.55c3.276,0,5.797,0,8.894,0
+	c0,7.387-0.142,14.547,0.038,21.699c0.196,7.829,5.893,13.504,13.229,13.529c7.348,0.025,13.036-5.671,13.312-13.437
+	c0.111-3.137,0.023-6.281,0.023-9.423c0.001-7.111,0.001-14.223,0.001-21.175c3.41,0,5.923,0,8.875,0c0,2.3,0,4.295,0,6.291
+	c0,27.16,0,54.32,0.001,81.481c0,1.478-0.034,2.956,0.014,4.433c0.264,8.193,5.849,13.995,13.402,13.944
+	c7.562-0.053,13.154-5.875,13.173-14.117c0.067-30.671,0.028-61.342,0.029-92.012C285.131,161.785,285.131,159.819,285.131,157.174z
+	"/>
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M339.968,231.882c0.733,3.278,1.284,5.735,1.931,8.625
+	c-11.448,2.653-22.515,5.216-34.236,7.932c-0.71-2.744-1.371-5.292-2.208-8.529C316.995,237.226,328.183,234.624,339.968,231.882z"
+	/>
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M238.107,239.85c-0.656,2.993-1.193,5.444-1.879,8.571
+	c-11.5-2.627-22.695-5.183-34.466-7.872c0.646-2.935,1.213-5.521,1.9-8.646C215.301,234.589,226.505,237.173,238.107,239.85z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M329.75,293.366c-1.983,2.468-3.587,4.462-5.54,6.892
+	c-9.166-7.416-18.128-14.666-27.528-22.271c1.88-2.354,3.562-4.46,5.522-6.917C311.381,278.497,320.335,285.745,329.75,293.366z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M247.029,277.939c-9.389,7.603-18.226,14.758-27.503,22.27
+	c-1.882-2.272-3.588-4.331-5.636-6.803c9.146-7.419,18.113-14.691,27.463-22.276C243.178,273.319,244.875,275.354,247.029,277.939z"
+	/>
+<path fill="#FFFFFF" d="M460,447.5H63c-9.649,0-17.5-7.851-17.5-17.5v-72c0-9.649,7.851-17.5,17.5-17.5h397
+	c9.649,0,17.5,7.851,17.5,17.5v72C477.5,439.649,469.649,447.5,460,447.5z M63,351.5c-3.584,0-6.5,2.916-6.5,6.5v72
+	c0,3.584,2.916,6.5,6.5,6.5h397c3.584,0,6.5-2.916,6.5-6.5v-72c0-3.584-2.916-6.5-6.5-6.5H63z"/>
+</svg>
diff --git a/client/assets/icons/touch.svg b/client/assets/icons/touch.svg
new file mode 100644
index 0000000..79c4fca
--- /dev/null
+++ b/client/assets/icons/touch.svg
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
+<path fill="#FFFFFF" d="M221.264,46.003c0,17.187,0,34.379,0,52.147c-4.351,0-8.266,0-13.182,0c0-17.345,0-34.746,0-52.147
+	C212.475,46.003,216.871,46.003,221.264,46.003z"/>
+<path fill="#FFFFFF" d="M181.711,261.227c0-4.247,0-6.86,0-9.474c0-34.583-0.027-69.165,0.01-103.747
+	c0.026-21.403,13.686-36.201,33.178-36.074c19.104,0.125,32.638,14.851,32.713,35.763c0.073,20.297,0.015,40.592,0.015,61.797
+	c21.458-10.031,38.526-5.976,50.858,15.116c10.847-6.812,22.343-9.998,34.814-4.429c12.509,5.583,18.36,15.854,19.821,26.655
+	c9.688-0.583,19.176-2.73,28.103-1.329c13.481,2.115,24.034,14.068,24.16,27.675c0.311,33.443,1.87,67.165-1.633,100.29
+	c-6.186,58.472-65.246,101.457-123.736,93.778c-39.703-5.216-69.818-25.303-91.266-58.167
+	c-25.468-39.021-49.981-78.676-74.389-118.377c-5.239-8.521-9.406-18.096-12.049-27.738c-5.516-20.113,10.683-36.049,31.145-31.496
+	c15.508,3.45,27.698,12.813,39.618,22.601C175.521,256.081,177.956,258.114,181.711,261.227z M194.895,292.573
+	c-12.779-11.612-23.827-22.772-36.086-32.392c-8.045-6.311-17.381-11.653-26.97-15.155c-12.032-4.399-20.725,4.506-16.356,16.544
+	c3.797,10.459,9.036,20.577,14.904,30.063c20.773,33.584,41.923,66.94,63.307,100.143c6.362,9.882,13.172,19.691,21.121,28.299
+	c27.398,29.668,61.607,40.936,100.76,31.541c39.379-9.447,66.965-35.192,73.417-74.832c5.533-33.99,2.972-69.384,2.887-104.151
+	c-0.022-9.535-10.516-16.174-20.118-15.654c-9.602,0.521-17.514,8.051-18.562,17.787c-0.284,2.633-0.267,5.301-0.387,7.956
+	c-4.592,0-8.517,0-12.925,0c0-10.96,0.187-21.362-0.049-31.753c-0.277-12.049-8.991-20.646-20.212-20.375
+	c-10.889,0.261-18.955,8.783-19.235,20.509c-0.147,6.204-0.025,12.414-0.025,18.645c-4.868,0-8.612,0-13.215,0
+	c0-10.975,0.212-21.612-0.057-32.236c-0.29-11.633-8.754-20.063-19.652-20.1c-10.916-0.038-19.367,8.423-19.776,19.962
+	c-0.166,4.662-0.035,9.332-0.035,13.999c-0.003,10.565-0.003,21.13-0.003,31.459c-5.065,0-8.798,0-13.186,0c0-3.417,0-6.381,0-9.347
+	c0-40.349,0-80.7,0-121.052c0-2.195,0.049-4.392-0.02-6.585c-0.393-12.173-8.69-20.793-19.911-20.717
+	c-11.235,0.079-19.543,8.729-19.572,20.972c-0.099,45.568-0.041,91.134-0.042,136.699
+	C194.895,285.722,194.895,288.643,194.895,292.573z"/>
+<path fill="#FFFFFF" d="M113.426,181.583c-1.089-4.871-1.908-8.521-2.87-12.814c17.008-3.942,33.451-7.749,50.863-11.785
+	c1.055,4.077,2.037,7.864,3.28,12.672C147.555,173.642,130.935,177.509,113.426,181.583z"/>
+<path fill="#FFFFFF" d="M264.756,169.745c0.974-4.447,1.771-8.088,2.792-12.734c17.085,3.903,33.716,7.7,51.204,11.695
+	c-0.961,4.36-1.802,8.203-2.823,12.846C298.638,177.561,281.992,173.722,264.756,169.745z"/>
+<path fill="#FFFFFF" d="M128.606,90.238c2.947-3.666,5.329-6.629,8.23-10.238c13.618,11.018,26.932,21.789,40.898,33.087
+	c-2.794,3.497-5.293,6.625-8.205,10.275C155.896,112.328,142.594,101.56,128.606,90.238z"/>
+<path fill="#FFFFFF" d="M251.501,113.157c13.948-11.295,27.077-21.925,40.86-33.085c2.796,3.375,5.33,6.435,8.373,10.106
+	c-13.589,11.023-26.91,21.827-40.801,33.095C257.222,120.022,254.701,116.999,251.501,113.157z"/>
+</svg>
diff --git a/client/components/App.vue b/client/components/App.vue
index 7f89cde..29084ca 100644
--- a/client/components/App.vue
+++ b/client/components/App.vue
@@ -34,6 +34,10 @@
 
   @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400i,600,600i,700,700i,900,900i');
 
+  html {
+    font-size: 100%;
+  }
+
   body {
     margin: 0;
     font-size: 2rem;
@@ -68,4 +72,34 @@
     -ms-user-select: none;
   }
 
+  @media screen and (min-width: 1200px) {
+    html {
+      font-size: 110%;
+    }
+  }
+
+  @media screen and (min-width: 1400px) {
+    html {
+      font-size: 120%;
+    }
+  }
+
+  @media screen and (min-width: 1600px) {
+    html {
+      font-size: 130%;
+    }
+  }
+
+  @media screen and (min-width: 1800px) {
+    html {
+      font-size: 140%;
+    }
+  }
+
+  @media screen and (min-width: 1900px) {
+    html {
+      font-size: 150%;
+    }
+  }
+
 </style>
diff --git a/client/components/Camera.vue b/client/components/Camera.vue
index 9f5b627..e5090c1 100644
--- a/client/components/Camera.vue
+++ b/client/components/Camera.vue
@@ -1,5 +1,5 @@
 <template>
-  <a-entity camera :position="attributify(position)" :look-controls="controlsEnabled ? '' : 'enabled: false; hmdEnabled: false;'">
+  <a-entity id="camera" camera :position="attributify(position)" :look-controls="controlsEnabled ? '' : 'enabled: false; hmdEnabled: false;'">
     <end-message></end-message>
   </a-entity>
 </template>
diff --git a/client/components/Preloader.vue b/client/components/Preloader.vue
index 776db18..dd1f1ce 100644
--- a/client/components/Preloader.vue
+++ b/client/components/Preloader.vue
@@ -1,21 +1,75 @@
 <template>
-  <div class="preloader" :style="display ? 'display: table' : 'display: none'">
+  <div :class="showPreloaderIcon ? 'preloader show' : 'preloader'" :style="display ? 'display: table' : 'display: none'">
     <div class="preloader-center">
-      <svg class="preloader-icon" width="34" height="38" viewBox="0 0 34 38">
-        <path class="preloader-path" stroke-dashoffset="0" d="M29.437 8.114L19.35 2.132c-1.473-.86-3.207-.86-4.68 0L4.153 8.114C2.68 8.974 1.5 10.56 1.5 12.28v11.964c0 1.718 1.22 3.306 2.69 4.165l10.404 5.98c1.47.86 3.362.86 4.834 0l9.97-5.98c1.472-.86 2.102-2.45 2.102-4.168V12.28c0-1.72-.59-3.306-2.063-4.166z">
-          <animate attributeType="XML" attributeName="stroke-dashoffset" from="0" to="102px" dur="1s" repeatCount="indefinite"/>
-        </path>
-      </svg>
+      <div class="preloader-icon">
+        <svg width="34" height="38" viewBox="0 0 34 38">
+          <path class="preloader-path" stroke-dashoffset="0" d="M29.437 8.114L19.35 2.132c-1.473-.86-3.207-.86-4.68 0L4.153 8.114C2.68 8.974 1.5 10.56 1.5 12.28v11.964c0 1.718 1.22 3.306 2.69 4.165l10.404 5.98c1.47.86 3.362.86 4.834 0l9.97-5.98c1.472-.86 2.102-2.45 2.102-4.168V12.28c0-1.72-.59-3.306-2.063-4.166z">
+            <animate attributeType="XML" attributeName="stroke-dashoffset" from="0" to="102px" dur="1s" repeatCount="indefinite"/>
+          </path>
+        </svg>
+      </div>
+      <div :class="showPreloaderInfos ? 'informations show' : 'informations'">
+        <div v-if="mobile" class="mobile-infos">
+          <div class="info landscape">
+            <img src="~assets/icons/smarthphone-orientation.svg" />
+            <p>Turn your mobile to landscape mode</p>
+          </div>
+          <div class="info cardboard">
+            <img src="~assets/icons/cardboard.svg" />
+            <p>Insert your mobile in your Cardboard</p>
+          </div>
+          <div class="info touch">
+            <img src="~assets/icons/touch.svg" />
+            <p>Touch the screen to slow down</p>
+          </div>
+        </div>
+        <div v-else class="desktop-infos">
+          <div class="info move">
+            <img src="~assets/icons/move-mouse.svg" />
+            <p>Move mouse to rotate the camera</p>
+          </div>
+          <div class="info spacebar">
+            <img src="~assets/icons/spacebar.svg" />
+            <p>Press spacebar to slow down</p>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 
+  import { isMobile } from 'utils/isMobile'
+
   export default {
     name: 'Preloader',
     props: {
       display: Boolean
+    },
+    data () {
+      return {
+        showPreloaderIcon: false,
+        showPreloaderInfos: false
+      }
+    },
+    computed: {
+      mobile: function () {
+        return isMobile()
+      }
+    },
+    mounted () {
+      this.$store.subscribe((mutation, state) => {
+        if(mutation.type === 'SHOW_PRELOADER') {
+          if(state.showPreloader) {
+            setTimeout( () => { this.showPreloaderIcon = true }, 1 * 1000)
+            setTimeout( () => { this.showPreloaderInfos = true }, 1.5 * 1000)
+          } else {
+            this.showPreloaderIcon = false
+            this.showPreloaderInfos = false
+          }
+        }
+      })
     }
   }
 
@@ -34,10 +88,16 @@
     text-align : center;
     width: 100%;
     height: 100%;
-    min-height: 230px;
-    min-width: 230px;
+    min-height: 23rem;
+    min-width: 23rem;
     opacity: 0;
-    transition: all 0.5s;
+    -webkit-transition: all 0.5s ease-in-out;
+    -moz-transition: all 0.5s ease-in-out;
+    transition: all 0.5s ease-in-out;
+
+    &.show {
+      opacity: 1;
+    }
 
     &:before {
       display : inline-block;
@@ -49,6 +109,10 @@
     }
   }
 
+  .preloader-icon {
+    margin: 0 auto 4rem auto;
+  }
+
   .preloader-center {
     display : inline-block;
     text-align : center;
@@ -56,11 +120,43 @@
   }
 
   .preloader-path {
-    stroke-linejoin : round;
-    fill : none;
-    stroke : #06b7c5;
-    stroke-width : 2;
-    stroke-dasharray : 70 32;
+    stroke-linejoin: round;
+    fill: none;
+    stroke: #FFFFFF;
+    stroke-width: 2;
+    stroke-dasharray: 70 32;
+  }
+
+  .informations {
+    opacity: 0;
+    -webkit-transition: all 0.5s ease-in-out;
+    -moz-transition: all 0.5s ease-in-out;
+    transition: all 0.5s ease-in-out;
+
+    &.show {
+      opacity: 1;
+    }
+
+
+    & > div > .info {
+      width: 10rem;
+      margin: 0 2rem;
+      display: inline-block;
+      vertical-align: top;
+    }
+
+    img {
+      width: 5rem;
+      height: 5rem;
+      display: inline-block;
+    }
+
+    p {
+      font-size: 1rem;
+      color: #FFFFFF;
+      text-transform: uppercase;
+    }
+
   }
 
 </style>
diff --git a/client/components/Renderer.vue b/client/components/Renderer.vue
index c544fc0..0a31700 100644
--- a/client/components/Renderer.vue
+++ b/client/components/Renderer.vue
@@ -2,7 +2,7 @@
   <div id="renderer" :class="sceneIsReady ? 'show' : 'hide' ">
     <a-scene antialias="true">
       <assets></assets>
-      <tweet v-for="tweet in visibleTweets" :key="tweet.id" :position="tweet.position" :rotation="tweet.rotation" :tweet="tweet"></tweet>
+      <tweet v-for="tweet in visibleTweets" :key="tweet.id" :position="tweet.position" :tweet="tweet"></tweet>
       <frame v-for="frame in visibleFrames" :key="frame.id" :id="frame.id" :position="frame.position" :rotation="frame.rotation"></frame>
       <camera :position="camera.position" :controls-enabled="controlsEnabled"></camera>
       <light :position="camera.position"></light>
@@ -20,14 +20,15 @@
   import Frame from 'components/Frame'
 
   import SimulationParams from '../params.js'
-  import Vector3D from 'utils/maths/vector3d.js'
   import Random from 'utils/maths/random.js'
   import PathCalculator from 'utils/PathCalculator.js'
 
   import { getTweetsFromAPI } from 'store/api'
+  import { isMobile } from 'utils/isMobile'
 
   let cycleFramesInterval = null
   let cycleTweetsInterval = null
+  let cameraTween = null
 
   export default {
     name: 'Renderer',
@@ -68,10 +69,10 @@
     },
     computed: {
       sceneIsReady () {
-        return this.isLoaded && this.framesAreReady ? true : false
+        return this.isLoaded && this.framesAreReady
       },
       hasHashtag () {
-        return this.$store.state.hashtag ? true : false
+        return !!this.$store.state.hashtag
       },
       tweets() {
         return this.$store.state.tweets
@@ -89,8 +90,6 @@
     },
     methods: {
       drawPath: function () {
-        let pathCalculator = new PathCalculator()
-
         let tempPaths = []
         for(let i = this.pathParams.offset; i < SimulationParams.pathAmountPerCycle + this.pathParams.offset; ++i) {
           tempPaths.push(PathCalculator.at(i))
@@ -99,11 +98,8 @@
         this.paths = tempPaths
         this.pathParams.offset += SimulationParams.pathAmountPerCycle
       },
-      initLastPath: function () {
-        this.lastPath = this.paths[0]
-      },
       startSimulation: function () {
-        TweenMax.to(this.camera.position, SimulationParams.speed, { bezier: this.paths, ease: Linear.easeNone, repeat: 0, onComplete: this.buildSplineAndRun })
+        cameraTween = TweenMax.to(this.camera.position, SimulationParams.speed, { bezier: this.paths, ease: Linear.easeNone, repeat: 0, onComplete: this.buildSplineAndRun })
       },
       buildSplineAndRun: function() {
         this.drawPath()
@@ -132,16 +128,13 @@
         }
       },
       cycleTweets: function() {
-
         if(this.tweets.length > 0) {
           let tweet = this.tweets[0]
 
           if(this.tweetsToRender.length % 2 == 0) {
-              tweet.position = PathCalculator.after(this.pathParams.separator - 30, 'left')
-              tweet.rotation = { x: SimulationParams.tweetRotation.x, y: -SimulationParams.tweetRotation.y, z: SimulationParams.tweetRotation.z }
+            tweet.position = PathCalculator.after(this.pathParams.separator - 30, 'left')
           } else {
             tweet.position = PathCalculator.after(this.pathParams.separator - 30, 'right')
-            tweet.rotation = { x: SimulationParams.tweetRotation.x, y: SimulationParams.tweetRotation.y, z: SimulationParams.tweetRotation.z }
           }
 
           this.$store.dispatch('removeFirstTweet')
@@ -149,13 +142,12 @@
           this.tweetsToRender.push(tweet)
 
           if(this.experimentOngoing && this.tweets.length < 5 ) {
-              getTweetsFromAPI()
-                .then(
-                  () => this.$store.dispatch('updateTweets'),
-                  () => this.experimentOngoing = false
-                )
+            getTweetsFromAPI()
+              .then(
+                () => this.$store.dispatch('updateTweets'),
+                () => this.experimentOngoing = false
+              )
           }
-
         }
 
         if(this.visibleTweets.length == 0) {
@@ -171,48 +163,78 @@
             this.$router.push({ path: '/hashtag' })
           }, 6 * 1000)
         }
-
+      },
+      createPauseHandler: function () {
+        if (isMobile()) {
+          window.addEventListener('touchstart', this.pauseOrPlayTouchHandler, false)
+          window.addEventListener('touchend', this.pauseOrPlayTouchHandler, false)
+        } else {
+          window.addEventListener('keydown', this.pauseOrPlaySpacebarHandler, false)
+          window.addEventListener('keyup', this.pauseOrPlaySpacebarHandler, false)
+        }
+      },
+      pause: function() {
+        cameraTween.timeScale(0.3)
+      },
+      play: function() {
+        cameraTween.timeScale(1)
+      },
+      pauseOrPlaySpacebarHandler: function (e) {
+        const onSpaceDown = (e, f) => { if (e.code == 'Space' && e.type == 'keydown') f() }
+        const onSpaceUp = (e, f) => { if (e.code == 'Space' && e.type == 'keyup') f() }
+        onSpaceDown(e, this.pause)
+        onSpaceUp(e, this.play)
+      },
+      pauseOrPlayTouchHandler: function(e) {
+        const onTouchStart = (e, f) => { if (e.type == 'touchstart') f() }
+        const onTouchEnd = (e, f) => { if (e.type == 'touchend') f() }
+        onTouchStart(e, this.pause)
+        onTouchEnd(e, this.play)
       }
     },
     mounted () {
-
       this.$store.dispatch('showEndMessage', false)
 
-      PathCalculator.setAmplitude(Random.getRandomInt(SimulationParams.pathAmplitude.x.min, SimulationParams.pathAmplitude.x.max), Random.getRandomInt(SimulationParams.pathAmplitude.y.min, SimulationParams.pathAmplitude.y.max))
-      PathCalculator.setFrequency(Random.getRandomInt(SimulationParams.pathFrequency.x.min, SimulationParams.pathFrequency.x.max) + Math.random()*2, Random.getRandomInt(SimulationParams.pathFrequency.y.min, SimulationParams.pathFrequency.y.max) + Math.random()*2)
+      const freq = SimulationParams.pathFrequency
+      const ampl = SimulationParams.pathAmplitude
+      PathCalculator.setAmplitude(Random.getRandomInt(ampl.x.min, ampl.x.max), Random.getRandomInt(ampl.y.min, ampl.y.max))
+      PathCalculator.setFrequency(Random.getRandomInt(freq.x.min, freq.x.max) + Math.random()*2, Random.getRandomInt(freq.y.min, freq.y.max) + Math.random()*2)
 
       this.initFirstFrames()
 
-      const scene = this.$el.querySelector('a-scene')
-      if (scene.hasLoaded) {
+      const startIfOk = () => {
         if(this.hasHashtag) {
           this.isLoaded = true
           this.buildSplineAndRun()
           cycleTweetsInterval = setInterval(this.cycleTweets, 1000)
+          this.createPauseHandler()
         } else {
           this.$router.push({ path: '/hashtag' })
         }
+      }
+
+      const scene = this.$el.querySelector('a-scene')
+      if (scene.hasLoaded) {
+        startIfOk()
       } else {
-        scene.addEventListener('loaded', () => {
-          if(this.hasHashtag) {
-            this.isLoaded = true
-            this.buildSplineAndRun()
-            cycleTweetsInterval = setInterval(this.cycleTweets, 1000)
-          } else {
-            this.$router.push({ path: '/hashtag' })
-          }
-        })
+        scene.addEventListener('loaded', startIfOk)
       }
 
       let events = 'enter-vr exit-vr'
       events.split(' ').forEach(e => scene.addEventListener(e, () => {
-          this.isVR = scene.is('vr-mode')
+        this.isVR = scene.is('vr-mode')
       }), false)
-
     },
     beforeDestroy () {
       clearInterval(cycleTweetsInterval)
       clearInterval(cycleFramesInterval)
+      if (isMobile()) {
+        document.removeEventListener('touchstart', this.pauseOrPlayTouchHandler)
+        document.removeEventListener('touchend', this.pauseOrPlayTouchHandler)
+      } else {
+        document.removeEventListener('keyup', this.pauseOrPlaySpacebarHandler)
+        document.removeEventListener('keydown', this.pauseOrPlaySpacebarHandler)
+      }
       this.$store.dispatch('resetAfterExperiment')
     }
   }
diff --git a/client/components/Tweet.vue b/client/components/Tweet.vue
index 367146f..5f3f354 100644
--- a/client/components/Tweet.vue
+++ b/client/components/Tweet.vue
@@ -2,8 +2,8 @@
   <a-plane :width="tweetParams.width"
            :height="tweetParams.height"
            :position="attributify(position)"
-           :rotation="attributify(rotation)"
            material="opacity: 0;"
+           look-at="#camera"
     >
   </a-plane>
 </template>
@@ -18,7 +18,6 @@
     replace: true,
     props: {
       position: Object,
-      rotation: Object,
       tweet: Object
     },
     data() {
diff --git a/client/index.js b/client/index.js
index 94043f6..ca67bff 100644
--- a/client/index.js
+++ b/client/index.js
@@ -30,6 +30,7 @@ sync(store, router)
 // Import a-frame libraries
 import 'aframe-gradient-sky'
 import 'aframe-gridhelper-component'
+import 'aframe-look-at-component'
 
 new Vue({
   el: '#app',
diff --git a/client/params.js b/client/params.js
index 1bf04e0..eb46f2f 100644
--- a/client/params.js
+++ b/client/params.js
@@ -9,7 +9,7 @@ const TWEET_SIZE = {
 const TWEET_ROTATION = { x: 0, y: 30, z: 0 }
 
 // PATH PARAMS
-const SPEED = 50
+const SPEED = 60
 const PATH_AMOUNT_PER_CYCLE = 100
 const PATH_AMPLITUDE = {
   x: { min: 1, max: 3 },
diff --git a/client/router/index.js b/client/router/index.js
index e7a7d15..79bd331 100644
--- a/client/router/index.js
+++ b/client/router/index.js
@@ -23,6 +23,10 @@ export default new Router({
       name: 'timeline',
       path: '/timeline',
       component: Timeline
+    },
+    {
+      path: '*',
+      redirect: '/'
     }
   ]
 })
diff --git a/client/store/index.js b/client/store/index.js
index daa81bd..3bfbc55 100644
--- a/client/store/index.js
+++ b/client/store/index.js
@@ -12,6 +12,7 @@ const state = {
   max_id: '',
   hashtag: null,
   gradients: [],
+  showPreloader: false,
   showEndMessage: false
 }
 
@@ -42,7 +43,10 @@ const mutations = {
   },
   RESET_TWEETS(state) {
     state.tweets = []
-  }
+  },
+  SHOW_PRELOADER(state, show) {
+    state.showPreloader = show
+  },
 }
 
 const actions = {
@@ -81,6 +85,9 @@ const actions = {
     commit('SET_HASHTAG', null)
     commit('RESET_TWEETS'),
     commit('SET_TWEETS_MAX_ID', '')
+  },
+  showPreloader({commit}, show) {
+    commit('SHOW_PRELOADER', show)
   }
 }
 
diff --git a/client/utils/CanvasTextWrapper.js b/client/utils/CanvasTextWrapper.js
index b88e41a..436cf08 100644
--- a/client/utils/CanvasTextWrapper.js
+++ b/client/utils/CanvasTextWrapper.js
@@ -6,7 +6,7 @@ export function CanvasTextWrapper(canvas, lines, style) {
   const fontSize = style.fontSize || 30
   const lineheight = 1 * fontSize
 
-  ctx.font = `normal ${fontSize}px Open Sans, Roboto, sans-serif`
+  ctx.font = `normal ${fontSize}px Source Sans Pro, sans-serif`
   ctx.textAlign = 'center'
   ctx.textBaseline = 'middle'
   ctx.fillStyle = style.color || '#000000'
diff --git a/client/utils/TweetDrawer.js b/client/utils/TweetDrawer.js
index 1225e11..ccc198c 100644
--- a/client/utils/TweetDrawer.js
+++ b/client/utils/TweetDrawer.js
@@ -2,7 +2,7 @@ import { getLines, CanvasTextWrapper } from 'utils/CanvasTextWrapper'
 
 const textStyle = {
   fontSize: 25,
-  color: '#245170'
+  color: '#021941'
 }
 
 const imageStyle = {
@@ -18,18 +18,46 @@ class TweetDrawer {
     this.ctx = canvas.getContext('2d')
     this.color = '#FF0000'
     this.lines = getLines(this.ctx, this.tweet.content, this.canvas.width, textStyle.fontSize)
+    this.filterOpacity = 0.7
   }
 
   drawBackground () {
-    let grd = this.ctx.createLinearGradient(150.000, 0.000, 150.000, 300.000);
+    let grd = this.ctx.createLinearGradient(150.000, 0.000, 150.000, 300.000)
 
-    grd.addColorStop(0.000, 'rgba(161, 196, 253, 1.000)');
-    grd.addColorStop(1.000, 'rgba(194, 233, 251, 1.000)');
+    grd.addColorStop(0.000, 'rgba(161, 196, 253, 1.000)')
+    grd.addColorStop(1.000, 'rgba(194, 233, 251, 1.000)')
 
     this.ctx.fillStyle = grd
     this.ctx.fillRect (0, 0, this.canvas.width, this.canvas.height)
   }
 
+  getImageLightness () {
+    let imageData = this.ctx.getImageData((this.canvas.width / 2)-imageStyle.imageSize, (150 - (this.lines.length + 1) * 5)-imageStyle.imageSize, 2 * imageStyle.imageSize, 2 * imageStyle.imageSize)
+    let data = imageData.data
+    let color = { r: 0, g: 0, b: 0 }
+    let avg
+    let colorSum = 0
+
+    for(var x = 0, len = data.length; x < len; x+=4) {
+        color.r = data[x]
+        color.g = data[x+1]
+        color.b = data[x+2]
+
+        avg = Math.floor((color.r + color.g + color.b)/3)
+        colorSum += avg
+    }
+
+    let brightness = Math.floor(colorSum / ((2 * imageStyle.imageSize)*(2 * imageStyle.imageSize)))
+
+    if(brightness <= 100) {
+      this.filterOpacity = 0.4
+    } else if (brightness <= 140) {
+      this.filterOpacity = 0.6
+    } else {
+      this.filterOpacity = 0.8
+    }
+  }
+
   drawContent () {
     CanvasTextWrapper(this.canvas, this.lines, textStyle)
   }
@@ -51,7 +79,11 @@ class TweetDrawer {
         this.ctx.closePath()
         this.ctx.clip()
 
+        this.ctx.filter = 'grayscale(100%)'
         this.ctx.drawImage(img, (this.canvas.width / 2)-imageStyle.imageSize, (150 - (this.lines.length + 1) * 5)-imageStyle.imageSize, 2 * imageStyle.imageSize, 2 * imageStyle.imageSize)
+        this.ctx.filter = 'grayscale(0%)'
+
+        this.getImageLightness()
 
         this.ctx.beginPath()
           this.ctx.arc((this.canvas.width / 2)-imageStyle.imageSize, (150 - (this.lines.length + 1) * 5)-imageStyle.imageSize, imageStyle.imageSize, 0, Math.PI*2, true)
@@ -59,6 +91,19 @@ class TweetDrawer {
         this.ctx.closePath()
         this.ctx.restore()
 
+        this.ctx.save()
+        this.ctx.beginPath()
+          this.ctx.arc((this.canvas.width / 2), 150 - (this.lines.length + 1) * 5, 50, 0, 2 * Math.PI)
+        this.ctx.closePath()
+        this.ctx.globalAlpha = this.filterOpacity
+        this.ctx.fillStyle = '#112c5b'
+        this.ctx.fill()
+        this.ctx.globalAlpha = 1
+        this.ctx.strokeStyle = "#021941"
+        this.ctx.lineWidth = 5
+        this.ctx.stroke()
+        this.ctx.restore()
+
         resolve()
       }
       img.src = this.tweet.author.image_url
@@ -69,15 +114,15 @@ class TweetDrawer {
   }
 
   drawUserName () {
-    this.ctx.font = 'bold 30px Open Sans, Roboto, sans-serif'
-    this.ctx.fillStyle = '#245170'
+    this.ctx.font = 'bold 30px Source Sans Pro, sans-serif'
+    this.ctx.fillStyle = '#021941'
     this.ctx.textAlign= 'center'
     this.ctx.fillText(this.tweet.author.name, this.canvas.width/2, 150 - (this.lines.length + 1) * 5 + imageStyle.imageSize + 30)
   }
 
   drawUserScreenName () {
-    this.ctx.font = 'italic 20px Open Sans, Roboto, sans-serif'
-    this.ctx.fillStyle = '#245170'
+    this.ctx.font = 'italic 20px Source Sans Pro, sans-serif'
+    this.ctx.fillStyle = '#021941'
     this.ctx.textAlign= 'center'
     this.ctx.fillText('@' + this.tweet.author.screen_name, this.canvas.width/2, 150 - (this.lines.length + 1) * 5 + imageStyle.imageSize + 65)
   }
diff --git a/client/utils/isMobile.js b/client/utils/isMobile.js
new file mode 100644
index 0000000..dde74af
--- /dev/null
+++ b/client/utils/isMobile.js
@@ -0,0 +1,7 @@
+export function isMobile() {
+  let isMobile = false;
+
+  (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) isMobile = true;})(navigator.userAgent||navigator.vendor||window.opera);
+
+  return isMobile;
+}
diff --git a/client/views/Hashtag.vue b/client/views/Hashtag.vue
index 31b2177..b8c0fdc 100644
--- a/client/views/Hashtag.vue
+++ b/client/views/Hashtag.vue
@@ -61,8 +61,12 @@
             this.isLoading = true
             this.gradientCanvas.gradient.changeState('timeline-state')
             this.startLoader()
-            this.$store.dispatch('sortTweetsByDate')
-            this.goToTimeline()
+              .then( () => {
+                this.$store.dispatch('sortTweetsByDate')
+                setTimeout( () => {
+                  this.goToTimeline()
+                }, 3 * 1000)
+              })
           }, (response) => {
             if(response.error == -1) {
               this.requestError.message = 'Your hashtag seems to be not very famous'
@@ -79,13 +83,19 @@
           })
       },
       startLoader: function () {
-        TweenMax.fromTo('.preloader', 1.5, { opacity: 0 }, { opacity: 1, onComplete: () => {}})
+          return new Promise( (resolve, reject) => {
+            this.$store.dispatch('showPreloader', true)
+            setTimeout( () => {
+              resolve()
+            }, 3 * 1000)
+          })
       },
       goToTimeline: function () {
-        TweenMax.fromTo('.preloader', 1.5, { opacity: 1 }, { opacity: 0, onComplete: () => {
+        this.$store.dispatch('showPreloader', false)
+        setTimeout( () => {
           this.isLoading = false
           this.$router.push({ path: '/timeline' })
-        }}).delay(1)
+        }, 1 * 1000)
       },
       focusToInput: function () {
         this.$el.querySelector('#hashtaginput').focus()
@@ -192,6 +202,15 @@
               text-align: left;
             }
 
+            input, input:before, input:after {
+              user-drag: initial;
+              user-select: initial;
+              -moz-user-select: initial;
+              -webkit-user-drag: initial;
+              -webkit-user-select: initial;
+              -ms-user-select: initial;
+            }
+
           }
 
         }
@@ -200,7 +219,8 @@
           outline: none;
           border: none;
           padding: 1rem 2rem;
-          border-radius: 8px;
+          font-size: 0.7rem;
+          border-radius: 0.4rem;
           color: #FFF;
           opacity: 1;
           text-transform: uppercase;
@@ -284,6 +304,14 @@
       }
     }
 
+    @media screen and (max-width: 400px) {
+
+      .content {
+        width: 100%;
+        margin-left: -50%;
+      }
+    }
+
   }
 
 </style>
diff --git a/client/views/Home.vue b/client/views/Home.vue
index a5276ef..ae52bbb 100644
--- a/client/views/Home.vue
+++ b/client/views/Home.vue
@@ -62,12 +62,12 @@
 
       .mask {
         position: absolute;
-        width: 10rem;
-        height: 10rem;
+        width: 10.1rem;
+        height: 10.1rem;
         top: 50%;
         left: 50%;
-        margin-top: -5rem;
-        margin-left: -5rem;
+        margin-top: -5.05rem;
+        margin-left: -5.05rem;
 
         img {
           width: 100%;
diff --git a/index.html b/index.html
index f193bbb..44df665 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="Content-Type" content="application/javascript; charset=utf-8">
-    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi" />
+    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1, width=device-width, height=device-height" />
     <link rel="alternate" href="https://pierrechls.github.io/tweetscape/" hreflang="fr">
 
     <title>TWEETSCAPE</title>
diff --git a/package.json b/package.json
index 224e743..ca9cf57 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tweetscape",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A WebRV experience displaying tweets along a 3D timeline",
   "author": "Pierre Charles <pierre.chls@gmail.com>",
   "private": true,
@@ -21,6 +21,7 @@
     "aframe": "^0.5",
     "aframe-gradient-sky": "^1.0.4",
     "aframe-gridhelper-component": "^0.2.0",
+    "aframe-look-at-component": "^0.2.0",
     "babel-runtime": "^6.0.0",
     "express": "^4.13.3",
     "granim": "^1.0.6",
diff --git a/static/preview.gif b/static/preview.gif
new file mode 100644
index 0000000..ab34632
Binary files /dev/null and b/static/preview.gif differ
diff --git a/static/preview.png b/static/preview.png
index 99b595a..f177ff4 100644
Binary files a/static/preview.png and b/static/preview.png differ