diff --git a/core/client/routes/application.js b/core/client/routes/application.js
index 0d45d3d63b..bf2f4fb7e6 100644
--- a/core/client/routes/application.js
+++ b/core/client/routes/application.js
@@ -1,9 +1,24 @@
 import ShortcutsRoute from 'ghost/mixins/shortcuts-route';
+import mobileUtils from 'ghost/utils/mobile-utils';
 
 var ApplicationRoute = Ember.Route.extend(ShortcutsRoute, {
     shortcuts: {
         'esc': 'closePopups'
     },
+
+    mobileInteractions: function () {
+        var responsiveAction = mobileUtils.responsiveAction;
+
+        Ember.run.scheduleOnce('afterRender', document, function () {
+            // ### Toggle the sidebar menu
+            $('[data-off-canvas]').on('click', function (event) {
+                responsiveAction(event, '(max-width: 650px)', function () {
+                    $('body').toggleClass('off-canvas');
+                });
+            });
+        });
+    }.on('init'),
+
     actions: {
         closePopups: function () {
             this.get('popover').closePopovers();
diff --git a/core/client/templates/posts.hbs b/core/client/templates/posts.hbs
index 5d34716772..92778bb618 100644
--- a/core/client/templates/posts.hbs
+++ b/core/client/templates/posts.hbs
@@ -1,37 +1,35 @@
-<section class="content-view-container">
-    <section class="content-list js-content-list">
-        <header class="floatingheader">
-            <section class="content-filter">
-                <small>All Posts</small>
-            </section>
-            {{#link-to "editor.new" class="button button-add" title="New Post"}}<span class="hidden">New Post</span>{{/link-to}}
-        </header>
-        {{#view "content-list-content-view" tagName="section"}}
-            <ol class="posts-list">
-                {{#each itemController="posts/post" itemView="post-item-view" itemTagName="li"}}
-                    {{#link-to "posts.post" this class="permalink" title="Edit this post"}}
-                        <h3 class="entry-title">{{title}}</h3>
-                        <section class="entry-meta">
-                            <span class="status">
-                                {{#if isPublished}}
-                                    {{#if page}}
-                                            <span class="page">Page</span>
-                                    {{else}}
-                                        <time datetime="{{unbound published_at}}" class="date published">
-                                            Published {{gh-format-timeago published_at}}
-                                        </time>
-                                    {{/if}}
-                                {{else}}
-                                    <span class="draft">Draft</span>
-                                {{/if}}
-                            </span>
-                        </section>
-                    {{/link-to}}
-                {{/each}}
-            </ol>
-        {{/view}}
-    </section>
-    <section class="content-preview js-content-preview">
-        {{outlet}}
-    </section>
+<section class="content-list js-content-list">
+    <header class="floatingheader">
+        <section class="content-filter">
+            <small>All Posts</small>
+        </section>
+        {{#link-to "editor.new" class="button button-add" title="New Post"}}<span class="hidden">New Post</span>{{/link-to}}
+    </header>
+    {{#view "content-list-content-view" tagName="section"}}
+    <ol class="posts-list">
+        {{#each itemController="posts/post" itemView="post-item-view" itemTagName="li"}}
+        {{#link-to "posts.post" this class="permalink" title="Edit this post"}}
+        <h3 class="entry-title">{{title}}</h3>
+        <section class="entry-meta">
+            <span class="status">
+                {{#if isPublished}}
+                {{#if page}}
+                <span class="page">Page</span>
+                {{else}}
+                <time datetime="{{unbound published_at}}" class="date published">
+                    Published {{gh-format-timeago published_at}}
+                </time>
+                {{/if}}
+                {{else}}
+                <span class="draft">Draft</span>
+                {{/if}}
+            </span>
+        </section>
+        {{/link-to}}
+        {{/each}}
+    </ol>
+    {{/view}}
+</section>
+<section class="content-preview js-content-preview">
+    {{outlet}}
 </section>
diff --git a/core/client/templates/settings.hbs b/core/client/templates/settings.hbs
index fa900e6f9f..1b5c12bde5 100644
--- a/core/client/templates/settings.hbs
+++ b/core/client/templates/settings.hbs
@@ -1,28 +1,26 @@
-<div class="wrapper">
-    <aside class="settings-sidebar" role="complementary">
-        <header>
-            <h1 class="title">Settings</h1>
-        </header>
-        <nav class="settings-menu">
-            <ul>
-                {{#view "item-view" tagName="li" class="general"}}
-                    {{#link-to "settings.general"}}General{{/link-to}}
-                {{/view}}
+<aside class="settings-sidebar" role="complementary">
+    <header>
+        <h1 class="title">Settings</h1>
+    </header>
+    <nav class="settings-menu">
+        <ul>
+            {{#view "item-view" tagName="li" class="general"}}
+            {{#link-to "settings.general"}}General{{/link-to}}
+            {{/view}}
 
-                {{#view "item-view" tagName="li" class="users"}}
-                    {{#link-to "settings.user"}}User{{/link-to}}
-                {{/view}}
+            {{#view "item-view" tagName="li" class="users"}}
+            {{#link-to "settings.user"}}User{{/link-to}}
+            {{/view}}
 
-                {{#if showApps}}
-                    {{#view "item-view" tagName="li" class="apps"}}
-                        {{#link-to "settings.apps"}}Apps{{/link-to}}
-                    {{/view}}
-                {{/if}}
-            </ul>
-        </nav>
-    </aside>
+            {{#if showApps}}
+            {{#view "item-view" tagName="li" class="apps"}}
+            {{#link-to "settings.apps"}}Apps{{/link-to}}
+            {{/view}}
+            {{/if}}
+        </ul>
+    </nav>
+</aside>
 
-    <section class="settings-content active">
-        {{outlet}}
-    </section>
-</div>
+<section class="settings-content active">
+    {{outlet}}
+</section>
diff --git a/core/client/views/posts.js b/core/client/views/posts.js
new file mode 100644
index 0000000000..79afb751af
--- /dev/null
+++ b/core/client/views/posts.js
@@ -0,0 +1,30 @@
+import mobileUtils from 'ghost/utils/mobile-utils';
+
+var PostsView = Ember.View.extend({
+    classNames: ['content-view-container'],
+    tagName: 'section',
+
+    mobileInteractions: function () {
+        var responsiveAction = mobileUtils.responsiveAction;
+
+        Ember.run.scheduleOnce('afterRender', this, function () {
+            // ### Show content preview when swiping left on content list
+            $('.manage').on('click', '.content-list ol li', function (event) {
+                responsiveAction(event, '(max-width: 800px)', function () {
+                    $('.content-list').animate({right: '100%', left: '-100%', 'margin-right': '15px'}, 300);
+                    $('.content-preview').animate({right: '0', left: '0', 'margin-left': '0'}, 300);
+                });
+            });
+
+            // ### Hide content preview
+            $('.manage').on('click', '.content-preview .button-back', function (event) {
+                responsiveAction(event, '(max-width: 800px)', function () {
+                    $('.content-list').animate({right: '0', left: '0', 'margin-right': '0'}, 300);
+                    $('.content-preview').animate({right: '-100%', left: '100%', 'margin-left': '15px'}, 300);
+                });
+            });
+        });
+    }.on('didInsertElement'),
+});
+
+export default PostsView;
diff --git a/core/client/views/settings.js b/core/client/views/settings.js
new file mode 100644
index 0000000000..4143ab627e
--- /dev/null
+++ b/core/client/views/settings.js
@@ -0,0 +1,31 @@
+import mobileUtils from 'ghost/utils/mobile-utils';
+
+var SettingsView = Ember.View.extend({
+    classNames: ['wrapper'],
+
+    mobileInteractions: function () {
+        var responsiveAction = mobileUtils.responsiveAction;
+
+        Ember.run.scheduleOnce('afterRender', this, function () {
+            // ### Show settings options page when swiping left on settings menu link
+            $('.settings').on('click', '.settings-menu li', function (event) {
+                responsiveAction(event, '(max-width: 800px)', function () {
+                    $('.settings-sidebar').animate({right: '100%', left: '-102%', 'margin-right': '15px'}, 300);
+                    $('.settings-content').animate({right: '0', left: '0', 'margin-left': '0'}, 300);
+                    $('.settings-content .button-back, .settings-content .button-save').css('display', 'inline-block');
+                });
+            });
+
+            // ### Hide settings options page
+            $('.settings').on('click', '.settings-content .button-back', function (event) {
+                responsiveAction(event, '(max-width: 800px)', function () {
+                    $('.settings-sidebar').animate({right: '0', left: '0', 'margin-right': '0'}, 300);
+                    $('.settings-content').animate({right: '-100%', left: '100%', 'margin-left': '15'}, 300);
+                    $('.settings-content .button-back, .settings-content .button-save').css('display', 'none');
+                });
+            });
+        });
+    }.on('didInsertElement')
+});
+
+export default SettingsView;