diff --git a/assets/css/styles.css b/assets/css/styles.css
index 666d6ea..c95c6f5 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -41,7 +41,7 @@ header {
 }
 .index-header {
   min-height: 200px;
-  height: 50vh;
+  height: 70vh;
 }
 @screen md {
   .index-header {
@@ -49,6 +49,9 @@ header {
     height: 70vh;
   }
 }
+.index-header.large {
+  height: 90vh;
+}
 .no-image {
   @apply bg-yuika-blue-500
 }
@@ -254,6 +257,10 @@ footer {
 .nav li {
   @apply w-full flex flex-row justify-start items-center my-0 text-white text-base h-12 transition duration-300 ease-in-out;
 }
+.nav li.separator {
+  height: 0;
+  @apply border border-white;
+}
 .nav li a {
   @apply align-middle w-full h-full flex items-center justify-start px-4 py-2;
 }
@@ -370,7 +377,21 @@ footer {
   @apply grid grid-cols-1 row-gap-4 my-8;
 }
 
-/* 7. Default transitions */
+/* 7. Subscribe form */
+#subscribe-form .message-success {
+  @apply hidden;
+}
+#subscribe-form.success .message-success {
+  @apply block;
+}
+#subscribe-form .message-error {
+  @apply hidden;
+}
+#subscribe-form.error .message-error {
+  @apply block;
+}
+
+/* 8. Default transitions */
 @tailwind components;
 
 @tailwind utilities;
diff --git a/assets/js/subscription.js b/assets/js/subscription.js
deleted file mode 100644
index 3e1d426..0000000
--- a/assets/js/subscription.js
+++ /dev/null
@@ -1,50 +0,0 @@
-
-// Parse the URL parameter
-function getParameterByName(name, url) {
-    if (!url) url = window.location.href;
-    name = name.replace(/[\[\]]/g, "\\$&");
-    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
-        results = regex.exec(url);
-    if (!results) return null;
-    if (!results[2]) return '';
-    return decodeURIComponent(results[2].replace(/\+/g, " "));
-}
-
-$("#subscribe-button").click(function(){
-    $("#subscribe-dialog").show();
-    $("#subscribe-form").show();
-    $("#subscribe-success").hide();
-    $("#subscribe-confirmation").hide();
-    $("#subscribe-failure").hide();
-})
-
-$("#subscribe-back").click(function(){
-    $("#subscribe-dialog").hide();
-})
-
-$("#subscribe-submit").click(function() {
-    $("#subscribe-form").hide();
-    $("#subscribe-success").hide();
-    $("#subscribe-confirmation").show();
-    $("#subscribe-failure").hide();
-
-})
-$(document).ready(function () {
-    var action = getParameterByName('action');
-    var success = getParameterByName('success');
-    
-    if (action == 'subscribe' && (success === null || success === 'true')) {
-        $("#subscribe-dialog").show();
-        $("#subscribe-form").hide();
-        $("#subscribe-success").show();
-        $("#subscribe-confirmation").hide();
-        $("#subscribe-failure").hide();
-    }
-    if (action == 'subscribe' && success === 'false') {
-        $("#subscribe-dialog").show();
-        $("#subscribe-form").hide();
-        $("#subscribe-success").hide();
-        $("#subscribe-confirmation").hide();
-        $("#subscribe-failure").show();
-    }
-});
\ No newline at end of file
diff --git a/members/account.hbs b/members/account.hbs
new file mode 100644
index 0000000..5d91b45
--- /dev/null
+++ b/members/account.hbs
@@ -0,0 +1,50 @@
+{{!< ../default}}
+
+
+{{#unless @member}}
+<script>window.location = '{{@site.url}}';</script>
+{{/unless}}
+<div class="relative group index-header">
+  {{> header-background background=@site.cover_image}} {{!--Special header-image.hbs partial to generate the background image--}}
+    <div class="w-full h-full opacity-50 bg-black">
+    </div>
+  </div>
+  <div class="absolute bottom-0 py-4 left-0 right-0">
+    <div class="container mx-auto content-full">
+      <div class="text-white">
+        <div>
+            {{#if @member}}
+            <div class="flex flex-row items-center mb-2">
+                {{#if @member.avatar_image}} 
+                <img class="author-image" src="{{@member.avatar_image}}" alt="{{@member.email}}" />
+                {{/if}}
+            <p class="text-white text-2xl md:text-4xl ml-4">{{@member.email}}</p>
+            </div>
+            {{/if}}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<article class="post-article">
+<main class="content container" id="post">
+  <div class="content-full">
+    {{#if @member.paid}}
+    {{else if @member}}
+        <h1 class="text-2xl">You are subscribed to updates</h1>
+        <p>You are currently subscribed to updates from <strong>{{@site.title}}</strong>.</p>
+    {{else}}
+    {{/if}}
+  </div>
+</main>
+{{#contentFor "scripts"}}
+<script>
+$(document).ready(function () {
+        // FitVids - start
+        var $postContent = $("#post");
+        $postContent.fitVids();
+        // FitVids - end
+});
+</script>
+{{/contentFor}}
diff --git a/members/signin.hbs b/members/signin.hbs
new file mode 100644
index 0000000..b2be181
--- /dev/null
+++ b/members/signin.hbs
@@ -0,0 +1,56 @@
+{{!< ../default}}
+
+
+{{#if @member}}
+<script>window.location = '{{@site.url}}';</script>
+{{/if}}
+<div class="relative group index-header large">
+  {{> header-background background=@site.cover_image}} {{!--Special header-image.hbs partial to generate the background image--}}
+    <div class="w-full h-full opacity-50 bg-black">
+    </div>
+  </div>
+  <div class="absolute left-0 right-0 top-0 bottom-0 flex flex-row items-center justify-center">
+   <div class="container mx-auto content-full">
+    <div class="text-white">
+      <div id="subscribe-form">
+        <h1 class="text-2xl">Welcome back!</h1>
+        <p>Sign into your account again for full access</p>
+        <form id="subscribe-form" data-members-form="signin">
+          <div class="py-8">
+            <label class="text-sm">Email address</label>
+            <input type="email" data-members-email class="appearance-none bg-transparent focus:outline-none text-xl border-b w-full px-2 py-1">
+          </div>
+          <button type="submit" class="px-4 py-2 appearance-none focus:outline-none bg-yuika-blue-700 rounded-none hover:bg-yuika-blue-500 transition duration-300 ease-in-out">
+            Send login link
+          </button>
+          <div class="message-success">
+            <p>Please check your email inbox to complete sign in.</p>
+          </div>
+          <div class="message-error">
+            <p>Please enter a valid email address!</p>
+          </div>
+        </form>
+      </div>
+    </div>
+   </div>
+  </div>
+</div>
+
+<article class="post-article">
+<main class="content container" id="post">
+  <div class="content-full">
+    {{#post}}
+    {{content}}
+    {{/post}}
+  </div>
+</main>
+{{#contentFor "scripts"}}
+<script>
+$(document).ready(function () {
+        // FitVids - start
+        var $postContent = $("#post");
+        $postContent.fitVids();
+        // FitVids - end
+});
+</script>
+{{/contentFor}}
diff --git a/members/signup.hbs b/members/signup.hbs
new file mode 100644
index 0000000..542f616
--- /dev/null
+++ b/members/signup.hbs
@@ -0,0 +1,58 @@
+{{!< ../default}}
+
+
+{{#if @member}}
+<script>window.location = '{{@site.url}}';</script>
+{{/if}}
+<div class="relative group index-header large">
+  {{> header-background background=@site.cover_image}} {{!--Special header-image.hbs partial to generate the background image--}}
+    <div class="w-full h-full opacity-50 bg-black">
+    </div>
+  </div>
+  <div class="absolute left-0 right-0 top-0 bottom-0 flex flex-row items-center justify-center">
+   <div class="container mx-auto content-full">
+    <div class="text-white">
+      <div>
+        {{#unless @member}}
+        <h1 class="text-2xl">Subscribe to {{@site.title}}</h1>
+        <p>Get the latest posts delivered straight to your inbox</p>
+        <form id="subscribe-form" data-members-form="subscribe">
+          <div class="py-8">
+            <label class="text-sm">Email address</label>
+            <input type="email" data-members-email class="appearance-none bg-transparent focus:outline-none text-xl border-b w-full px-2 py-1">
+          </div>
+          <button id="subscribe-submit" type="submit" class="px-4 py-2 appearance-none focus:outline-none bg-yuika-blue-700 rounded-none hover:bg-yuika-blue-500 transition duration-300 ease-in-out">
+            Subscribe
+          </button>
+          <div class="message-success">
+            <p>Please check your email inbox to confirm your subscription!</p>
+          </div>
+          <div class="message-error">
+            <p>Please enter a valid email address!</p>
+          </div>
+        </form>
+        {{/unless}}
+      </div>
+    </div>
+   </div>
+  </div>
+</div>
+
+<article class="post-article">
+<main class="content container" id="post">
+  <div class="content-full">
+    {{#post}}
+    {{content}}
+    {{/post}}
+  </div>
+</main>
+{{#contentFor "scripts"}}
+<script>
+$(document).ready(function () {
+        // FitVids - start
+        var $postContent = $("#post");
+        $postContent.fitVids();
+        // FitVids - end
+});
+</script>
+{{/contentFor}}
diff --git a/package.json b/package.json
index 010910d..48e46fb 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "yuika",
     "description": "nanao.moe's blog theme",
-    "version": "2.4.1",
+    "version": "2.5.0",
     "engines": {
         "ghost-api": "v3"
     },
diff --git a/partials/site-header.hbs b/partials/site-header.hbs
index b3cc79b..8cfe7d5 100644
--- a/partials/site-header.hbs
+++ b/partials/site-header.hbs
@@ -17,57 +17,26 @@
         </div>
       </div>
       <div class="nav-group">
-        {{#if @labs.members}}
         <ul class="nav">
+        {{#if @member}}
           <li>
-            <a id="subscribe-button" href="#">Subscribe</a>
+            <a href="{{@site.url}}/account/">{{@member.email}}</a>
+           </li>
+          <li>
+            <a href="#signout" data-members-signout>Sign out</a>
+          </li>
+        {{else}}
+          <li>
+            <a href="{{@site.url}}/signin/">Sign in</a>
+          </li>
+          <li>
+            <a href="{{@site.url}}/signup/">Subscribe</a>
           </li>
-        </ul>
         {{/if}}
+          <li class="separator"></li>
+        </ul>
         {{navigation}}
       </div>
     </header>
   </div>
-</div>
-
-{{#if @labs.members}}
-{{!-- Subscription dialog --}}
-<div class="fixed left-0 right-0 top-0 bottom-0 z-30 hidden" id="subscribe-dialog">
-  <div class="h-full w-full responsive-site-header-img bg-cover bg-yuika-blue-500">
-    <div class="h-full w-full bg-black opacity-50">
-    </div>
-  </div>
-  <div class="absolute left-0 right-0 top-0 bottom-0 z-40">
-    <div class="h-full w-full py-16 px-4 text-white">
-      <div id="subscribe-form">
-        <h1 class="text-2xl">Subscribe to {{@site.title}}</h1>
-        <p>Get the latest posts delivered straight to your inbox</p>
-        <form data-members-form="subscribe">
-        <div class="py-8">
-          <label class="text-sm">Email address</label>
-          <input type="email" data-members-email class="appearance-none bg-transparent focus:outline-none text-xl border-b w-full px-2 py-1">
-        </div>
-        <button id="subscribe-submit" type="submit" class="px-4 py-2 appearance-none focus:outline-none bg-yuika-blue-700 rounded-none hover:bg-yuika-blue-500 transition duration-300 ease-in-out">
-          Subscribe
-        </button>
-        </form>
-      </div>
-      <div id="subscribe-confirmation">
-        <h1 class="text-2xl">One more step....</h1>
-        <p>Please check your email inbox to confirm your subscription!</p>
-      </div>
-      <div id="subscribe-success">
-        <h1 class="text-2xl">Thank you for subscribing to {{@site.title}}!</h1>
-        <p>The latest posts will be periodically delivered to you when they are published.</p>
-      </div>
-      <div id="subscribe-failure">
-        <h1 class="text-2xl">Invalid subscription link</h1>
-        <p>The link might have expired, or you entered the wrong link. You can try resubscribing.</p>
-      </div>
-    </div>
-  </div>
-  <div class="absolute left-0 top-0 z-50 py-2 pl-2 text-white hover:bg-yuika-blue-700 transition duration-300 ease-in-out flex flex-row items-center justify-center">
-    <a id="subscribe-back" href="#"><span class="h-12 w-12 px-2 py-3 text-white material-icons">arrow_back</span></a>
-  </div>
-</div>
-{{/if}}
\ No newline at end of file
+</div>
\ No newline at end of file