diff --git a/frontend/components/DropdownMenu/DropdownMenu.scss b/frontend/components/DropdownMenu/DropdownMenu.scss
index 545694e1..b0c9e42d 100644
--- a/frontend/components/DropdownMenu/DropdownMenu.scss
+++ b/frontend/components/DropdownMenu/DropdownMenu.scss
@@ -21,7 +21,7 @@
     z-index: 1000;
     border: 1px solid #eee;
     background-color: #fff;
-    min-width: 150px;
+    min-width: 160px;
   }
 }
 
diff --git a/frontend/components/Layout/Layout.js b/frontend/components/Layout/Layout.js
index ef05bcd4..c9b4399a 100644
--- a/frontend/components/Layout/Layout.js
+++ b/frontend/components/Layout/Layout.js
@@ -100,6 +100,8 @@ class Layout extends React.Component {
                     /> }
                   >
                     <MenuItem to="/settings">Settings</MenuItem>
+                    <MenuItem to="/keyboard-shortcuts">Keyboard shortcuts</MenuItem>
+                    <MenuItem to="/developers">API</MenuItem>
                     <MenuItem onClick={ user.logout }>Logout</MenuItem>
                   </DropdownMenu>
                 </Flex>
diff --git a/frontend/index.js b/frontend/index.js
index 2088b107..95726a80 100644
--- a/frontend/index.js
+++ b/frontend/index.js
@@ -26,9 +26,12 @@ import DocumentEdit from 'scenes/DocumentEdit';
 import Search from 'scenes/Search';
 import Settings from 'scenes/Settings';
 import SlackAuth from 'scenes/SlackAuth';
+import Flatpage from 'scenes/Flatpage';
 import Error404 from 'scenes/Error404';
 import ErrorAuth from 'scenes/ErrorAuth';
 
+import flatpages from 'static/flatpages';
+
 let DevTools;
 if (__DEV__) {
   DevTools = require('mobx-react-devtools').default; // eslint-disable-line global-require
@@ -79,6 +82,21 @@ render((
             />
             <Route path="/auth/error" component={ ErrorAuth } />
 
+            <Flatpage
+              path="/keyboard-shortcuts"
+              component={ Flatpage }
+              title="Keyboard shortcuts"
+              content={ flatpages.keyboard }
+            />
+
+            <Flatpage
+              path="/developers"
+              component={ Flatpage }
+              title="API"
+              content={ flatpages.api }
+            />
+
+
             <Route path="/404" component={ Error404 } />
             <Redirect from="*" to="/404" />
           </Route>
diff --git a/frontend/scenes/Flatpage/Flatpage.js b/frontend/scenes/Flatpage/Flatpage.js
new file mode 100644
index 00000000..47c16e8e
--- /dev/null
+++ b/frontend/scenes/Flatpage/Flatpage.js
@@ -0,0 +1,33 @@
+import React, { PropTypes } from 'react';
+import { observer } from 'mobx-react';
+
+import Layout, { Title } from 'components/Layout';
+import CenteredContent from 'components/CenteredContent';
+import { DocumentHtml } from 'components/Document';
+
+import { convertToMarkdown } from 'utils/markdown';
+
+@observer
+class Flatpage extends React.Component {
+  static propTypes = {
+    route: PropTypes.object.isRequired,
+  }
+
+  render() {
+    const { title, content } = this.props.route;
+
+    return (
+      <Layout
+        title={ <Title>{ title }</Title> }
+        titleText={ title }
+        search={ false }
+      >
+        <CenteredContent>
+          <DocumentHtml html={ convertToMarkdown(content) } />
+        </CenteredContent>
+      </Layout>
+    );
+  }
+}
+
+export default Flatpage;
diff --git a/frontend/scenes/Flatpage/Flatpage.scss b/frontend/scenes/Flatpage/Flatpage.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/scenes/Flatpage/index.js b/frontend/scenes/Flatpage/index.js
new file mode 100644
index 00000000..e43db410
--- /dev/null
+++ b/frontend/scenes/Flatpage/index.js
@@ -0,0 +1,2 @@
+import Flatpage from './Flatpage';
+export default Flatpage;
diff --git a/frontend/static/flatpages/api.markdown b/frontend/static/flatpages/api.markdown
new file mode 100644
index 00000000..9ca139f7
--- /dev/null
+++ b/frontend/static/flatpages/api.markdown
@@ -0,0 +1,117 @@
+# Atlas API
+
+## Making requests
+
+Atlas' API follows JSON RPC style convention where each API endpoint is a method on `https://www.beautifulatlas.com/api/<METHOD>`. Each request needs to be made using HTTPS.
+
+Each method can be called with either `GET` or `POST` (recommended). For `GET` requests query string parameters are expected (e.g. `/api/document.info?id=...&token=...`). When making `POST` requests, request parameters are parsed depending on `Content-Type` header. To make a call using JSON payload, one must pass `Content-Type: application/json` header:
+
+```shell
+curl 'https://www.beautifulatlas.com/api/documents.info?id=atlas-api-NTpezNwhUP'\
+  -H 'authorization: Bearer <API KEY>'\
+  -H 'content-type: application/json'\
+  -H 'accept: application/json'
+```
+
+## Authentication
+
+To access private API endpoints, you must provide a valid API key. You can create new API keys in your [account settings](https://www.beautifulatlas.com/settings). Be careful when handling your keys as they give access to all of your documents.
+
+To authenticate with Atlas API, you can supply the API key as a header (`Authorization: Bearer <API KEY>`) or as part of the payload using `token` parameter.
+
+Some API endpoints allow unauhenticated requests for public resources and they can be called without an API key.
+
+## Errors
+
+All successful API requests will be returned with `200` status code and `ok: true` in the response payload. If there's an error while making the request, appropriate status code is returned with the `error` message:
+
+```json
+{
+	"ok": false,
+    "error: "Not Found"
+}
+```
+
+## Methods
+
+### `documents.info` - Get a document
+
+This method returns information for a document with a specific ID. Following identifiers are allowed:
+
+- UUID - `id` field of the document
+- URI identifier - Human readable identifier used in Atlas URLs (e.g. `atlas-api-i48ZEZc5zjXndcP`)
+
+#### Arguments
+
+`https://www.beautifulatlas.com/api/documents.info`
+
+Parameter | Description
+------------ | -------------
+`token` | Authentication token
+`id` | Document id or URI identifier
+
+---
+
+### `documents.search` - Search documents
+
+This methods allows you to search all of your documents with keywords.
+
+#### Arguments
+
+`https://www.beautifulatlas.com/api/documents.search`
+
+Parameter | Description
+------------ | -------------
+`token` | Authentication token
+`query` | Search query
+
+---
+
+### `documents.create` - Create a new document
+
+This method allows you to publish a new document under an existing collection. If your collection is structured `type: atlas` collection, you can also create sub-documents for other documents with optional `parentDocument` parameter.
+
+#### Arguments
+
+`https://www.beautifulatlas.com/api/documents.create`
+
+Parameter | Description
+------------ | -------------
+`token` | Authentication token
+`collection` | `id` of the collection to which the document is created
+`parentDocument` | `id` of the parent document within the collection
+`title` | Title for the document
+`text` | Content of the document in Markdown
+
+---
+
+### `user.info` - Get current user
+
+This method returns the information for currently logged in user.
+
+#### Arguments
+
+`https://www.beautifulatlas.com/api/user.info`
+
+Parameter | Description
+------------ | -------------
+`token` | Authentication token
+
+---
+
+### `user.s3Upload` - Gets S3 upload credentials
+
+You can upload small files and images as part of your documents. All files are stored using Amazon S3. Instead of uploading files to Atlas, you need to upload them directly to S3 with special credentials which can be obtained through this endpoint.
+
+_TODO: Add more about restrictions and flow_
+
+#### Arguments
+
+`https://www.beautifulatlas.com/api/user.s3Upload`
+
+Parameter | Description
+------------ | -------------
+`token` | Authentication token
+`filename` | Filename of the uploaded file
+`kind` | Mimetype of the document
+`size` | Filesize of the document
diff --git a/frontend/static/flatpages/index.js b/frontend/static/flatpages/index.js
new file mode 100644
index 00000000..42ddef8f
--- /dev/null
+++ b/frontend/static/flatpages/index.js
@@ -0,0 +1,7 @@
+import api from './api.markdown';
+import keyboard from './keyboard.markdown';
+
+export default {
+  api,
+  keyboard,
+};
diff --git a/frontend/static/flatpages/keyboard.markdown b/frontend/static/flatpages/keyboard.markdown
new file mode 100644
index 00000000..576f0522
--- /dev/null
+++ b/frontend/static/flatpages/keyboard.markdown
@@ -0,0 +1,10 @@
+# Keyboard shortcuts
+
+- `Cmd+/` - Toggle navigation tree
+- `Cmd+Enter` - Save document
+- `Cmd+Esc` - Cancel edit
+- `Cmd+Shift+p` - Toggle document preview
+- `/` or `t` - Jump to search
+- `d` - Jump to dashboard
+- `c` - Compose within a collection
+- `e` - Edit document
diff --git a/package.json b/package.json
index 1d5f1732..2320c064 100644
--- a/package.json
+++ b/package.json
@@ -122,6 +122,7 @@
     "query-string": "^4.2.2",
     "querystring": "0.2.0",
     "randomstring": "1.1.5",
+    "raw-loader": "^0.5.1",
     "react": "15.3.1",
     "react-codemirror": "0.2.6",
     "react-dom": "15.1.0",
diff --git a/server/static/dev.html b/server/static/dev.html
index 091e809c..7c1dc25e 100644
--- a/server/static/dev.html
+++ b/server/static/dev.html
@@ -4,6 +4,11 @@
     <title>Atlas</title>
     <link href="/static/styles.css" rel="stylesheet"></head>
     <style>
+      body, html {
+        margin: 0;
+        padding: 0;
+      }
+
       #root {
         flex: 1;
         height: 100%;
diff --git a/server/static/index.html b/server/static/index.html
index abdd89b8..5292ee21 100644
--- a/server/static/index.html
+++ b/server/static/index.html
@@ -3,6 +3,11 @@
   <head>
     <title>Atlas</title>
     <style>
+      body, html {
+        margin: 0;
+        padding: 0;
+      }
+    
       #root {
         flex: 1;
         height: 100%;
diff --git a/webpack.config.js b/webpack.config.js
index 2330d6a9..0816cf8b 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,10 +1,10 @@
-var path = require('path');
-var webpack = require('webpack');
+const path = require('path');
+const webpack = require('webpack');
 
 // Load .env
 require('dotenv').config();
 
-var definePlugin = new webpack.DefinePlugin({
+const definePlugin = new webpack.DefinePlugin({
   __DEV__: JSON.stringify(JSON.parse(process.env.NODE_ENV !== 'production')),
   __PRERELEASE__: JSON.stringify(JSON.parse(process.env.BUILD_PRERELEASE || 'false')),
   SLACK_REDIRECT_URI: JSON.stringify(process.env.SLACK_REDIRECT_URI),
@@ -16,41 +16,43 @@ module.exports = {
   output: {
     path: path.join(__dirname, 'dist'),
     filename: 'bundle.js',
-    publicPath: '/static/'
+    publicPath: '/static/',
   },
   module: {
     loaders: [
       {
         test: /\.js$/,
         loader: 'babel',
-        include: path.join(__dirname, 'frontend')
+        include: path.join(__dirname, 'frontend'),
       },
       { test: /\.json$/, loader: 'json-loader' },
-      { test: /\.(png|jpg|svg)$/, loader: 'url-loader' }, // inline base64 URLs for <=8k images, direct URLs for the rest
+      // inline base64 URLs for <=8k images, direct URLs for the rest
+      { test: /\.(png|jpg|svg)$/, loader: 'url-loader' },
       {
         test: /\.woff$/,
-        loader: 'url-loader?limit=1&mimetype=application/font-woff&name=public/fonts/[name].[ext]'
+        loader: 'url-loader?limit=1&mimetype=application/font-woff&name=public/fonts/[name].[ext]',
       },
+      { test: /\.markdown/, loader: 'raw-loader' },
 
       // Excludes
       {
         // slug
         test: /unicode/,
         loader: 'ignore-loader',
-      }
-    ]
+      },
+    ],
   },
   resolve: {
     root: path.join(__dirname, 'frontend'),
     // you can now require('file') instead of require('file.json')
-    extensions: ['', '.js', '.json']
+    extensions: ['', '.js', '.json'],
   },
   plugins: [
     definePlugin,
     new webpack.ProvidePlugin({
-      'fetch': 'imports?this=>global!exports?global.fetch!isomorphic-fetch'
+      fetch: 'imports?this=>global!exports?global.fetch!isomorphic-fetch',
     }),
-    new webpack.ContextReplacementPlugin(/moment[\\\/]locale$/, /^\.\/(en)$/)
+    new webpack.ContextReplacementPlugin(/moment[\\\/]locale$/, /^\.\/(en)$/),
   ],
   stats: {
     assets: false,