diff --git a/ghost/admin/assets/sass/components/navigation.scss b/ghost/admin/assets/sass/components/navigation.scss
index b974267d34..22eb0e26b6 100644
--- a/ghost/admin/assets/sass/components/navigation.scss
+++ b/ghost/admin/assets/sass/components/navigation.scss
@@ -12,12 +12,17 @@
     left: 0;
     z-index: 800;
     background: $darkgrey;
+    transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1);
 
     i:before {
         display: inline-block;
         width: 16px;
     }
 
+    &.right-outlet-expanded {
+        transform: translate3d(-350px, 0px, 0px);
+    }
+
     .thing,
     .thing2 {
         display: none; // hide until mobile
@@ -175,7 +180,7 @@
         -webkit-overflow-scrolling: touch;
 
         transform: translate3d(-60px, 0px, 0px); // Not off the screen, to give a parallax effect
-        transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
+        transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1);
 
         .thing, .thing2 {
             display: block;
diff --git a/ghost/admin/assets/sass/helpers/variables.scss b/ghost/admin/assets/sass/helpers/variables.scss
index 0640e32d8f..105f5a67d9 100644
--- a/ghost/admin/assets/sass/helpers/variables.scss
+++ b/ghost/admin/assets/sass/helpers/variables.scss
@@ -36,6 +36,7 @@ $list-colours:
 $rounded: 3px;
 $shadow: rgba(0,0,0,0.05) 0 1px 5px;
 $default-transition-duration: 0.3s;
+$side-outlet-transition-duration: 0.4s;
 
 $font-family: 'Open Sans', sans-serif;
 $font-family-mono: Inconsolata, monospace;
diff --git a/ghost/admin/assets/sass/layouts/default.scss b/ghost/admin/assets/sass/layouts/default.scss
index 4c008bd47f..e09198493e 100644
--- a/ghost/admin/assets/sass/layouts/default.scss
+++ b/ghost/admin/assets/sass/layouts/default.scss
@@ -24,6 +24,7 @@
     left: 0;
     overflow: hidden;
     z-index: 500; // Above the .global-nav when collapsed
+    transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1);
 
     @media (max-width: 900px) {
         transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
@@ -32,6 +33,63 @@
     &.global-nav-expanded {
         transform: translate3d(260px, 0px, 0px);
     }
+
+    &.right-outlet-expanded {
+        @media (max-width: 350px) {
+            transform: translate3d(-100%, 0px, 0px);
+        }
+        @media (min-width: 351px) {
+            &:before {
+                content: '';
+                position: absolute;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                z-index: 1000;
+                width: 1px;
+                background: #EDECE4;
+            }
+            transform: translate3d(-350px, 0px, 0px);
+        }
+    }
+}
+
+.right-outlet {
+    background: $lightestgrey;
+    width: 100%;
+    max-width: 350px;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1);
+    transform: translate3d(60px, 0px, 0px);
+    &.right-outlet-expanded {
+        transform: translate3d(0, 0px, 0px);
+    }
+    .outlet-pane {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        transform: translate3d(0, 0px, 0px);
+        opacity: 1;
+
+        transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1);
+
+        &.outlet-pane-out-left {
+            transform: translate3d(-100%, 0px, 0px);
+        }
+        &.outlet-pane-out-right {
+            transform: translate3d(100%, 0px, 0px);
+        }
+        &.outlet-pane-in {
+            transform: translate3d(0, 0px, 0px);
+        }
+    }
 }
 
 //
diff --git a/ghost/admin/assets/sass/layouts/post-settings-menu.scss b/ghost/admin/assets/sass/layouts/post-settings-menu.scss
index 2ae27b3b90..e1750bcff3 100644
--- a/ghost/admin/assets/sass/layouts/post-settings-menu.scss
+++ b/ghost/admin/assets/sass/layouts/post-settings-menu.scss
@@ -3,11 +3,7 @@
 // --------------------------------------------------
 
 // Wrapper
-.post-settings-menu {
-    background: $lightestgrey;
-    width: 100%;
-    max-width: 350px;
-}
+.post-settings-menu {}
 
 // Header
 .post-settings-header {
@@ -26,7 +22,8 @@
         }
     }
 }
-.subview .post-settings-header {
+
+.post-settings-header.subview {
     h4 {
         text-align: center;
     }
diff --git a/ghost/admin/html/psm.html b/ghost/admin/html/psm.html
new file mode 100644
index 0000000000..a120d5df4b
--- /dev/null
+++ b/ghost/admin/html/psm.html
@@ -0,0 +1,202 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>New PSM</title>
+    <link rel="stylesheet" href="../assets/css/ghost.min.css">
+
+    <!--
+        Styles to mimick the rest of Ghost
+        There ARE NOT needed at all.
+    -->
+    <style>
+        .temp-nav {
+            height: 60px;
+            background: #000;
+            position: fixed;
+            top: 0;
+            right: 0;
+            left: 0;
+            z-index: 100;
+        }
+        .temp-main {
+            position: fixed;
+            top: 60px;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            background: #fff;
+            z-index: 100;
+        }
+        .temp-main .post-settings {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            background: #eee;
+            padding: 11px 20px 10px;
+            margin-left: -108px;
+            margin-top: -22px;
+        }
+        .temp-main .post-settings:before {
+            margin-right: 5px;
+        }
+    </style>
+
+</head>
+<body>
+
+    <nav class="global-nav temp-nav"></nav>
+    <main class="viewport temp-main">
+        <button class="post-settings">Make the magic happen</button>
+    </main>
+
+    <div class="right-outlet">
+
+        <div class="post-settings-menu outlet-pane outlet-pane-in">
+            <div class="post-settings-header">
+                <h4>Post Settings</h4>
+                <button class="close icon-x post-settings-header-action"><span class="hidden">Close</span></button>
+            </div>
+            <div class="post-settings-content">
+
+                <section class="image-uploader">
+                    <span class="media">
+                        <span class="hidden">Image Upload</span>
+                    </span>
+                    <img class="js-upload-target" style="display: none;" src="">
+                    <div class="description">Add image of <strong></strong></div>
+                </section>
+
+                <div class="form-group">
+                    <label for="blog-title">Post URL</label>
+                    <span class="input-icon icon-link">
+                        <input type="text" value="myblog.com/this-is-my-post/" />
+                    </span>
+                </div>
+
+                <div class="form-group">
+                    <label for="blog-title">Publish Date</label>
+                    <span class="input-icon icon-calendar">
+                        <input type="text" value="23 Apr 14 @ 11:59" />
+                    </span>
+                </div>
+
+                <div class="form-group for-select">
+                    <label for="activeTheme">Author</label>
+                    <span class="input-icon icon-user">
+                        <span class="gh-select">
+                            <select>
+                                <option>Lorem Ipsum</option>
+                                <option>Corporis Voluptates</option>
+                                <option>Veniam Quae</option>
+                            </select>
+                        </span>
+                    </span>
+                </div>
+
+                <div class="form-group for-checkbox">
+                    <label class="checkbox" for="thing">
+                        <input id="thing" type="checkbox">
+                        <span class="input-toggle-component"></span>
+                        <p>Static Page</p>
+                    </label>
+                </div>
+
+                <ul class="nav-list nav-list-block">
+                    <li class="nav-list-item">
+                        <a href="#">
+                            <b>Revision History</b>
+                            <span>12 versions of this post by 3 people.</span>
+                        </a>
+                    </li>
+                    <li class="nav-list-item">
+                        <a href="#">
+                            <b>Advanced Settings</b>
+                            <span>Convert to a page, mark as featured.</span>
+                        </a>
+                    </li>
+                    <li class="nav-list-item">
+                        <a href="#">
+                            <b>Meta Data</b>
+                            <span>Extra content for SEO and social media.</span>
+                        </a>
+                    </li>
+                    <li class="nav-list-item">
+                        <a href="#">
+                            <b>Custom App</b>
+                            <span>Registered an advanced setting panel.</span>
+                        </a>
+                    </li>
+                </ul>
+
+                <button class="btn btn-red icon-trash">Delete This Post</button>
+
+            </div><!-- .post-settings-content -->
+        </div><!-- .post-settings-menu -->
+
+        <div class="post-settings-menu outlet-pane outlet-pane-out-right">
+
+            <div class="post-settings-header subview">
+                <button class="back icon-chevron-left post-settings-header-action"><span class="hidden">Back</span></button>
+                <h4>Meta Data</h4>
+            </div>
+
+            <div class="post-settings-content">
+                <div class="form-group">
+                    <label for="blog-title">Meta Title</label>
+                    <input type="text" value="My Post is Super SEO Friendly" />
+                    <p>Recommended: <b>70</b> characters. You’ve used <b class="green">43</b></p>
+                </div>
+
+                <div class="form-group">
+                    <label for="blog-title">Meta Description</label>
+                    <textarea>In this fascinating posts I explore the value of SEO meta descriptions and their impact on blogging. Don’t miss my stunning insights!</textarea>
+                    <p>Recommended: <b>156</b> characters. You’ve used <b class="green">133</b></p>
+                </div>
+
+                <div class="form-group">
+                    <label>Search Engine Result Preview</label>
+                    <div class="seo-preview">
+                        <div class="seo-preview-title">My Post is Super SEO Friendly</div>
+                        <div class="seo-preview-link">myblog.com/this-is-my-post/</div>
+                        <div class="seo-preview-description">In this fascinating posts I explore the value of SEO meta descriptions and their impact on blogging. Don’t miss my stunning insights!</div>
+                    </div>
+                </div><!-- .post-settings-search-preview -->
+
+            </div><!-- .post-settings-content -->
+
+        </div><!-- .post-settings-menu -->
+
+</div>
+
+    <script src="../../../bower_components/jquery/dist/jquery.js"></script>
+    <script>
+        $(function(){
+            $(".post-settings, .post-settings-header-action.close").on("click", function(e){
+                e.preventDefault();
+                $(".viewport, .global-nav, .right-outlet, body").toggleClass("right-outlet-expanded");
+            });
+
+            $(".nav-list-item a").on("click", function(e){
+                e.preventDefault();
+                $(".outlet-pane:nth-child(1)").addClass("outlet-pane-out-left").removeClass("outlet-pane-in");
+                $(".outlet-pane:nth-child(2)").addClass("outlet-pane-in").removeClass("outlet-pane-hidden-left");
+            });
+
+
+
+
+            $(".post-settings-header-action.back").on("click", function(e){
+                e.preventDefault();
+                $(".outlet-pane:nth-child(1)").addClass("outlet-pane-in").removeClass("outlet-pane-out-left");
+                $(".outlet-pane:nth-child(2)").addClass("outlet-pane-out-right").removeClass("outlet-pane-in");
+            });
+
+            // This also needs to close the right outlet when clicking outside of it (like when clicking outside of popovers)
+            // And... close outlet by hitting escape
+        });
+    </script>
+
+    
+</body>
+</html>
\ No newline at end of file