diff --git a/assets/css/components/forms.css b/assets/css/components/forms.css
index b1212c8b..4cdb668e 100644
--- a/assets/css/components/forms.css
+++ b/assets/css/components/forms.css
@@ -17,7 +17,6 @@
 
 .gh-input:focus {
     border-color: var(--color-primary);
-    box-shadow: 0 0 0 1px var(--color-primary);
 }
 
 .gh-select {
diff --git a/assets/css/ghost/members.css b/assets/css/ghost/members.css
index 3c01601e..28e8846f 100644
--- a/assets/css/ghost/members.css
+++ b/assets/css/ghost/members.css
@@ -1,12 +1,65 @@
+/* Members Auth Template
+/* ---------------------------------------------------------- */
+
+.gh-auth-form {
+    width: 100%;
+    max-width: 600px;
+    margin: 0 auto 10vmin;
+    text-align: center;
+}
+
+.gh-auth-title {
+    margin: 0 0 0.1em;
+    font-size: 4.2rem;
+}
+
+.gh-auth-form p {
+    margin: 0 0 20px 0;
+    font-size: 1.7rem;
+    color: rgba(0,0,0,0.6)
+}
+
+.gh-auth-form p small {
+    display: inline-block;
+    margin: 15px 0 0 0;
+    font-size: 1.4rem;
+}
+
+.gh-auth-box {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    max-width: 460px;
+    margin: 0 auto;
+}
+
+.gh-auth-box .gh-button {
+    margin-left: 10px;
+}
+
+@media (max-width: 600px) {
+    .gh-auth-box {
+        flex-direction: column;
+    }
+    .gh-auth-box .gh-button {
+        width: 100%;
+        margin: 15px 0 0 0;
+    }
+}
+
 /* Members Forms
 /* ---------------------------------------------------------- */
 
-form[data-members-form] .button-loader,
+form[data-members-form] .gh-button-loader,
 form[data-members-form] .message-success,
 form[data-members-form] .message-error {
     display: none;
 }
 
+.gh-button-content {
+    min-width: 100px;
+}
+
 .message-success svg,
 .message-error svg {
     position: relative;
@@ -19,17 +72,17 @@ form[data-members-form] .message-error {
     fill: #fff;
 }
 .message-error svg {
-    fill: var(--color-primary);
+    fill: red;
 }
 
 form[data-members-form].success .message-success,
 form[data-members-form].error .message-error {
     position: fixed;
     top: 20px;
-    left: 6vw;
-    right: 6vw;
+    left: 4vw;
+    right: 4vw;
     z-index: 9999;
-    max-width: calc(1400px - 12vw);
+    max-width: calc(1400px - 8vw);
     margin: 0 auto;
     padding: 10px 0;
     color: #fff;
@@ -44,33 +97,35 @@ form[data-members-form].success .message-success {
     background: var(--color-success);
 }
 form[data-members-form].error .message-error {
-    color: var(--color-primary);
+    color: red;
     background: #fff;
-    box-shadow: var(--color-primary) 0 0 0 1px;
+    box-shadow: red 0 0 0 1px;
 }
 
-form[data-members-form] .button {
+form[data-members-form] .gh-button {
     position: relative;
+    min-width: 120px;
 }
 
 /*-- Loading --*/
 
 /* Hide button text */
-form[data-members-form].loading .button-content {
+form[data-members-form].loading .gh-button-content {
     visibility: hidden;
 }
 
 /* Show loading spinner */
-form[data-members-form].loading .button-loader {
+form[data-members-form].loading .gh-button-loader {
     display: inline-block;
     position: absolute;
     left: 50%;
-    margin-left: -19px;
-    transform: scale(0.7);
+    bottom: -30%;
+    margin: 0 0 0 -19px;
+    transform: scale(0.6);
 }
 
-.button-loader svg path,
-.button-loader svg rect{
+.gh-button-loader svg path,
+.gh-button-loader svg rect{
   fill: #fff;
 }
 
diff --git a/members/account.hbs b/members/account.hbs
new file mode 100644
index 00000000..f7080fe7
--- /dev/null
+++ b/members/account.hbs
@@ -0,0 +1,37 @@
+{{!< ../default}}
+
+<div class="gh-page">
+    <div class="gh-container">
+
+    {{#if @member.paid}}
+
+        {{!-- Logged in, paying member: Show account info --}}
+        <div class="account-box">
+            <h2 class="account-box-title">Nice, you're a subscriber!</h2>
+            <p>Hey! <strong>{{@member.email}}</strong> has an active {{@site.title}} account with access to all areas. You're all set, but if you need any help, get in touch with us and we'd be happy to help.</p>
+        </div>
+
+    {{else if @member}}
+
+        {{!-- Logged in, not paying: Link to checkout --}}
+        <div class="account-box">
+            <h1 class="account-box-title">Currently, you're not a subscriber</h1>
+            <p>Hey there! <strong>{{@member.email}}</strong> is subscribed to free updates from {{@site.title}}, but doesn't have a paid subscription to unlock full access.</p>
+            <div class="authbox-signup">
+                <a class="button primary" href="/signup/">
+                    <span class="button-content">Subscribe now</span>
+                </a>
+            </div>
+        </div>
+
+    {{else}}
+
+        {{!-- Not logged in: Redirect to signin --}}
+        <script>window.location = '{{@site.url}}/signin/';</script>
+
+    {{/if}}
+
+    </div>
+</div>
+
+<style>.pico-cta{display:none;}</style>
diff --git a/members/signin.hbs b/members/signin.hbs
new file mode 100644
index 00000000..ba546661
--- /dev/null
+++ b/members/signin.hbs
@@ -0,0 +1,34 @@
+{{!< ../default}}
+
+<div class="gh-page">
+    <div class="gh-container">
+
+    {{#if @member}}
+
+        {{!-- Logged in: Redirect home --}}
+        <script>window.location = '{{@site.url}}';</script>
+
+    {{else}}
+
+        {{!-- Not logged in: Signin form --}}
+        <form class="gh-auth-form" data-members-form="signin">
+            <h1 class="gh-auth-title">Welcome back!</h1>
+            <p>Sign into your account again for full access</p>
+            <div class="gh-auth-box">
+                <input class="gh-input" data-members-email type="email" placeholder="Your email address" required="true" autocomplete="false" />
+                <button class="gh-button gh-button-primary" type="submit">
+                    <span class="gh-button-content">Sign in</span>
+                    <span class="gh-button-loader">{{> "icons/loader"}}</span>
+                </button>
+            </div>
+            <p><small>Don't have an account yet? <a href="/signup/">Sign up</a></small></p>
+            <div class="message-success"><strong>Great!</strong> Check your inbox and click the link to complete signin</div>
+            <div class="message-error">Please enter a valid email address!</div>
+        </form>
+
+    {{/if}}
+
+    </div>
+</div>
+
+<style>.pico-cta{display:none;}</style>
\ No newline at end of file
diff --git a/members/signup.hbs b/members/signup.hbs
new file mode 100644
index 00000000..b0ec78e9
--- /dev/null
+++ b/members/signup.hbs
@@ -0,0 +1,75 @@
+{{!< ../default}}
+
+<div class="gh-page">
+    <div class="gh-container">
+
+    {{#if @member.paid}}
+
+        {{!-- Logged in, paying member: Redirect home --}}
+        <script>window.location = '{{@site.url}}';</script>
+
+    {{else if @member}}
+
+        {{!-- Logged in, not paying: Check out --}}
+        <div class="gh-checkout-form">
+            <h1 class="gh-checkout-title">Choose your subscription</h1>
+            <p>Unlock full access to {{@site.title}} and see the entire library of members-only content & updates</p>
+            <div class="gh-checkout-box">
+                <div class="gh-checkout-plan">
+                    <header class="gh-checkout-plan-header">
+                        <h3>Monthly</h3>
+                        <span>$</span><strong>{{@price.monthly}}</strong> / month
+                    </header>
+                    <div class="gh-checkout-plan-content">
+                        <ul>
+                            <li>Full access to all private posts</li>
+                            <li>Regular updates with new content</li>
+                            <li>Support independent publishing</li>
+                            <li>Simple, secure card payment</li>
+                        </ul>
+                        <a class="button primary fit" href="javascript:void(0)" data-members-plan="Monthly">Choose this plan</a>
+                    </div>
+                </div>
+                <div class="gh-checkout-plan">
+                    <header class="gh-checkout-plan-header">
+                        <h3>Yearly</h3>
+                        <span>$</span><strong>{{@price.yearly}}</strong> / year
+                    </header>
+                    <div class="gh-checkout-plan-content">
+                        <ul>
+                            <li>Full access to all private posts</li>
+                            <li>Regular updates with new content</li>
+                            <li>Support independent publishing</li>
+                            <li>Simple, secure card payment</li>
+                            <li>One easy payment instead of 12!</li>
+                        </ul>
+                        <a class="button primary fit" href="javascript:void(0)" data-members-plan="Yearly">Choose this plan</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    {{else}}
+
+        {{!-- Not logged in: Sign up --}}
+        <form class="gh-auth-form" data-members-form="signup">
+            <h1 class="gh-auth-title">Signup to {{@site.title}}</h1>
+            <p>{{@site.description}}</p>
+            <div class="gh-auth-box">
+                <input class="gh-input" data-members-email type="email" placeholder="Type your email..." required="true" autocomplete="false" />
+                <button class="gh-button gh-button-primary" type="submit">
+                    <span class="gh-button-content">Continue</span>
+                    <span class="gh-button-loader">{{> "icons/loader"}}</span>
+                </button>
+            </div>
+            <p><small>Already have an account? <a href="/signin/">Sign in</a></small></p>
+            <div class="message-success"><strong>Great!</strong> Check your inbox and click the link to confirm your subscription</div>
+            <div class="message-error">Please enter a valid email address!</div>
+        </form>
+
+    {{/if}}
+
+    </div>
+</div>
+
+<style>.pico-cta{display:none;}</style>
\ No newline at end of file