diff --git a/app/components/Sidebar/Sidebar.css b/app/components/Sidebar/Sidebar.css
index 2afb0474..41909b46 100644
--- a/app/components/Sidebar/Sidebar.css
+++ b/app/components/Sidebar/Sidebar.css
@@ -1,12 +1,23 @@
 /** @define Sidebar */
 
 .Sidebar {
+  position: fixed;
+  top: 0;
+  left: 100%;
   display: flex;
   flex-direction: column;
-  height: 100%;
+  width: 16rem;
+  max-width: 100vw;
+  height: 100vh;
   padding: 1rem;
   font-size: 12px;
+  background-color: #fff;
   box-shadow: inset 1rem 0 .75rem -1rem rgba(0, 0, 0, .5);
+  transition: transform var(--time-animation);
+}
+
+.Sidebar.is-active {
+  transform: translateX(-100%);
 }
 
 .Sidebar-title {
diff --git a/app/components/Sidebar/Sidebar.js b/app/components/Sidebar/Sidebar.js
index 4e7b741a..a6beed5d 100644
--- a/app/components/Sidebar/Sidebar.js
+++ b/app/components/Sidebar/Sidebar.js
@@ -1,7 +1,8 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent, Fragment } from 'react';
 import PropTypes from 'prop-types';
+import cs from 'classnames';
 import gql from 'graphql-tag';
-import { MdArrowBack } from 'react-icons/md';
+import { MdArrowForward } from 'react-icons/md';
 import getAllData from '../../../scripts/cfGraphql-es6';
 
 import SidebarContentEvent from './SidebarContentEvent';
@@ -115,24 +116,26 @@ class Sidebar extends PureComponent {
   }
 
   render() {
-    const { changeSidebarContent, contentElement: { type: contentType } } = this.props;
+    const { isActive, changeSidebarContent, contentElement: { type: contentType } } = this.props;
     const { content } = this.state;
 
-    if (!content) return null;
-
     return (
-      <div className="Sidebar">
-        <MdArrowBack className="Sidebar-icon Sidebar-icon--back" onClick={() => changeSidebarContent(undefined)} />
-        {contentType === 'event' && <SidebarContentEvent {...content} />}
-        {contentType === 'person' && <SidebarContentPerson {...content} />}
-        {contentType === 'time' && <SidebarContentTime {...content} />}
-      </div>
+      <aside className={cs('Sidebar', { 'is-active': isActive })}>
+        <MdArrowForward className="Sidebar-icon Sidebar-icon--back" onClick={() => changeSidebarContent(undefined)} />
+        { content &&
+          <Fragment>
+            {contentType === 'event' && <SidebarContentEvent {...content} />}
+            {contentType === 'person' && <SidebarContentPerson {...content} />}
+            {contentType === 'time' && <SidebarContentTime {...content} />}
+          </Fragment>
+        }
+      </aside>
     );
   }
 }
 
 Sidebar.defaultProps = {
-  contentElement: undefined,
+  contentElement: {},
 };
 
 Sidebar.propTypes = {
diff --git a/app/components/Time/Time.css b/app/components/Time/Time.css
index bdd7d171..d815ef13 100644
--- a/app/components/Time/Time.css
+++ b/app/components/Time/Time.css
@@ -37,5 +37,4 @@
 .Time-name {
   position: sticky;
   left: .5em;
-  padding-bottom: .25em;
 }
diff --git a/app/components/Timeline/Timeline.css b/app/components/Timeline/Timeline.css
index 92832dfd..be2a45b3 100644
--- a/app/components/Timeline/Timeline.css
+++ b/app/components/Timeline/Timeline.css
@@ -2,7 +2,7 @@
 
 :root {
   --Time-yearsBeforeZero: 4100px;
-  --Time-yearsAfterZero: 2200px;
+  --Time-yearsAfterZero: 2500px;
 }
 
 .Timeline {
diff --git a/app/components/Timeline/Timeline.js b/app/components/Timeline/Timeline.js
index dba3de7a..8c01a4fe 100644
--- a/app/components/Timeline/Timeline.js
+++ b/app/components/Timeline/Timeline.js
@@ -102,6 +102,7 @@ class Timeline extends Component {
       events,
       changeSidebarContent,
     } = this.props;
+
     const {
       activePersons,
       activeTimes,
diff --git a/app/css/shame.css b/app/css/shame.css
index 2a78bd13..43b1107d 100644
--- a/app/css/shame.css
+++ b/app/css/shame.css
@@ -7,12 +7,17 @@
   height: 100vh;
 }
 
-.Page-wrapSidebar {
-  flex-shrink: 0;
-  flex-basis: 16rem;
-}
-
 .Page-wrapTimeline {
   flex-grow: 1;
   overflow: auto;
 }
+
+.Page-wrapSidebar {
+  position: absolute;
+  top: 0;
+  left: 100%;
+  width: 16rem;
+  max-width: 95vw;
+  height: 100vh;
+}
+
diff --git a/app/js/calcTimes.js b/app/js/calcTimes.js
index cdf10171..111d9f50 100644
--- a/app/js/calcTimes.js
+++ b/app/js/calcTimes.js
@@ -51,8 +51,8 @@ export function calcPoints(type, year, vagueness) {
 }
 
 function maxEnd(value) {
-  if (value > 2200) {
-    return 2200;
+  if (value > 2500) {
+    return 2500;
   }
   return value;
 }
diff --git a/package-lock.json b/package-lock.json
index 86d8f202..b1e770be 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9979,11 +9979,24 @@
         }
       }
     },
+    "react-easy-swipe": {
+      "version": "0.0.17",
+      "resolved": "https://registry.npmjs.org/react-easy-swipe/-/react-easy-swipe-0.0.17.tgz",
+      "integrity": "sha512-+4486duR/1Gq16o4+eRkDLG/uKWur+aZ6TOLq4p8GvdHmQblZLbgEaN+Cr6U8P7Dcnou5gA3shMr9B3gq+AD7w==",
+      "requires": {
+        "prop-types": "^15.5.8"
+      }
+    },
     "react-error-overlay": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-4.0.0.tgz",
       "integrity": "sha512-FlsPxavEyMuR6TjVbSSywovXSEyOg6ZDj5+Z8nbsRl9EkOzAhEIcS+GLoQDC5fz/t9suhUXWmUrOBrgeUvrMxw=="
     },
+    "react-icons": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-3.2.1.tgz",
+      "integrity": "sha512-NQhnh7G5hWCAK7pXPeeI944RkeZ85mtvFATx3wfcVQRTW4ejaQgriemYF72gQIFIyoApMXLTdb01BKp8PaXlrg=="
+    },
     "react-is": {
       "version": "16.5.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.5.2.tgz",
diff --git a/package.json b/package.json
index 837cf3f9..0148b540 100644
--- a/package.json
+++ b/package.json
@@ -78,6 +78,8 @@
     "react": "16.5.2",
     "react-addons-test-utils": "15.6.2",
     "react-dom": "16.5.2",
+    "react-easy-swipe": "0.0.17",
+    "react-icons": "3.2.1",
     "react-reveal": "1.2.2",
     "react-test-renderer": "16.5.2",
     "style-loader": "0.23.0",
diff --git a/pages/index.js b/pages/index.js
index 0b3804c2..d1d756f2 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,23 +1,47 @@
-import React from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-
+import Swipe from 'react-easy-swipe';
 
 import '../app/css/index.css';
 
 // import Header from '../app/components/Header/Header';
 import Timeline from '../app/components/Timeline/Timeline';
+import Sidebar from '../app/components/Sidebar/Sidebar';
 import { formatPerson, formatTime, formatEvent } from '../scripts/formatData';
 
-const Page = ({ persons, times, events }) => {
-  return (
-    <div className="Page">
-      {/* <Header /> */}
-      <section className="Page-wrapTimeline" role="main">
-        <Timeline persons={persons} times={times} events={events} />
-      </section>
-    </div>
-  );
-};
+class Page extends PureComponent {
+  state = {
+    activeElement: undefined,
+  }
+
+  changeSidebarContent = (id, type) => {
+    this.setState({
+      activeElement: {
+        id,
+        type,
+      },
+    });
+  }
+
+  render() {
+    const { persons, times, events } = this.props;
+    const { activeElement } = this.state;
+    return (
+      <div className="Page">
+        {/* <Header /> */}
+        <section className="Page-wrapTimeline" role="main">
+          <Timeline persons={persons} times={times} events={events} changeSidebarContent={this.changeSidebarContent} />
+        </section>
+        <Swipe onSwipeRight={() => this.changeSidebarContent(undefined)}>
+          <Sidebar
+            isActive={activeElement && activeElement.id}
+            contentElement={activeElement}
+            changeSidebarContent={this.changeSidebarContent} />
+        </Swipe>
+      </div>
+    );
+  }
+}
 
 Page.getInitialProps = async ({ query: { data } }) => {
   const {
diff --git a/scripts/cfGraphql-es6.js b/scripts/cfGraphql-es6.js
new file mode 100644
index 00000000..d8865109
--- /dev/null
+++ b/scripts/cfGraphql-es6.js
@@ -0,0 +1,50 @@
+import { ApolloClient } from 'apollo-client';
+import { InMemoryCache } from 'apollo-cache-inmemory';
+import { HttpLink } from 'apollo-link-http';
+import fetch from 'node-fetch';
+
+
+function newContenfulGQLClient({
+  baseURL = 'https://graphql.contentful.com/content/v1',
+  spaceId,
+  cdaToken,
+}) {
+  try {
+    const link = new HttpLink({
+      fetch,
+      uri: `${baseURL}/spaces/${spaceId}`,
+      headers: {
+        Authorization: `Bearer ${cdaToken}`,
+      },
+    });
+
+    return new ApolloClient({
+      link,
+      cache: new InMemoryCache(),
+    });
+  } catch (error) {
+    if (error.networkError) {
+      console.error(error.networkError.results.errors);
+    }
+  }
+}
+
+const client = newContenfulGQLClient({
+  spaceId: process.env.CONTENTFUL_SPACE_ID,
+  cdaToken: process.env.CONTENTFUL_CONTENT_DELIVERY_TOKEN,
+});
+
+
+async function getAllData(query) {
+  try {
+    const { data } = await client.query({ query });
+
+    return data;
+  } catch (error) {
+    if (error.networkError) {
+      console.error(error.networkError.result.errors);
+    }
+  }
+}
+
+export default getAllData;
diff --git a/scripts/gqlSchema.js b/scripts/gqlSchema.js
index 498a39fe..0f613115 100644
--- a/scripts/gqlSchema.js
+++ b/scripts/gqlSchema.js
@@ -20,27 +20,11 @@ module.exports = gql`{
         id
       }
       name,
-      image {
-        fileName,
-        url
-      },
-      gender,
       startYear,
       startVagueness,
       endYear,
       endVagueness,
       stillActive,
-      father {
-        name
-      },
-      mother {
-        name
-      },
-      childsCollection {
-        items {
-          name
-        }
-      }
     }
   },
   timeCollection(