diff --git a/pages/_includes/cards/forgot-password.html b/pages/_includes/cards/forgot-password.html
new file mode 100644
index 000000000..dc13d1f56
--- /dev/null
+++ b/pages/_includes/cards/forgot-password.html
@@ -0,0 +1,19 @@
+<form class="card" action="#" method="post">
+
+	<div class="card-body p-5">
+		<div class="card-title">Forgot password</div>
+
+		<p class="text-muted">Enter your email address and your password will be reset and emailed to you.</p>
+
+		<div class="mb-2">
+			<label class="form-label">Email address</label>
+			<input type="email" class="form-control" placeholder="Enter email">
+		</div>
+		<div class="form-footer">
+			<button type="submit" class="btn btn-primary btn-block">Send me new password</button>
+		</div>
+	</div>
+</form>
+<div class="text-center text-muted">
+	Forget it, <a href="{{ site.base }}/sign-in.html">send me back</a> to the sign in screen.
+</div>
diff --git a/pages/_includes/cards/forgot.html b/pages/_includes/cards/forgot.html
deleted file mode 100644
index c85209778..000000000
--- a/pages/_includes/cards/forgot.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<form class="card" action="" method="post">
-
-   <div class="card-body p-5">
-      <div class="card-title">Forgot password</div>
-
-      <p class="text-muted">Enter your email address and your password will be reset and emailed to you.</p>
-      <div class="mb-2">
-         <label class="form-label" for="exampleInputEmail1">Email address</label>
-         <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
-      </div>
-      <div class="form-footer">
-         <button type="submit" class="btn btn-primary btn-block">Send me new password</button>
-      </div>
-   </div>
-</form>
-<div class="text-center text-muted">
-   Forget it, <a href="{{ site.base }}/login.html">send me back</a> to the sign in screen.
-</div>
diff --git a/pages/_includes/cards/login.html b/pages/_includes/cards/login.html
deleted file mode 100644
index 2b1114214..000000000
--- a/pages/_includes/cards/login.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<form class="card" action="" method="get">
-
-   <div class="card-body p-6">
-      <div class="card-title">Login to your account</div>
-
-      <div class="mb-2">
-         <label class="form-label">Email address</label>
-         <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
-                placeholder="Enter email" autocomplete="off">
-      </div>
-      <div class="mb-2">
-         <a href="{{ site.base }}/forgot-password.html" class="float-right small">I forgot password</a>
-         <label class="form-label">
-            Password
-         </label>
-         <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" autocomplete="off">
-      </div>
-      <div class="mb-2">
-         <label class="custom-control custom-checkbox">
-            <input type="checkbox" class="custom-control-input" {{ site.base }}/>
-            <span class="custom-control-label">Remember me</span>
-         </label>
-      </div>
-
-      <div class="form-footer">
-         <button type="submit" class="btn btn-primary btn-block">Sign in</button>
-      </div>
-   </div>
-</form>
-
-<div class="text-center text-muted">
-   Don't have account yet? <a href="{{ site.base }}/register.html">Sign up</a>
-</div>
diff --git a/pages/_includes/cards/register.html b/pages/_includes/cards/register.html
deleted file mode 100644
index 85bc742c7..000000000
--- a/pages/_includes/cards/register.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<form class="card" action="" method="post">
-    <div class="card-body p-6">
-        <div class="card-title">Create new account</div>
-
-        <div class="mb-2">
-            <label class="form-label">Name</label>
-            <input type="text" class="form-control" placeholder="Enter name">
-        </div>
-        <div class="mb-2">
-            <label class="form-label">Email address</label>
-            <input type="email" class="form-control" placeholder="Enter email">
-        </div>
-        <div class="mb-2">
-            <label class="form-label">Password</label>
-            <input type="password" class="form-control" placeholder="Password">
-        </div>
-        <div class="mb-2">
-            <label class="custom-control custom-checkbox">
-                <input type="checkbox" class="custom-control-input"{{ site.base }}/>
-                <span class="custom-control-label">Agree the <a href="terms.html">terms and policy</a></span>
-            </label>
-        </div>
-
-        <div class="form-footer">
-            <button type="submit" class="btn btn-primary btn-block">Create new account</button>
-        </div>
-    </div>
-</form>
-
-<div class="text-center text-muted">
-    Already have account? <a href="{{ site.base }}/login.html">Sign in</a>
-</div>
diff --git a/pages/_includes/cards/sign-in.html b/pages/_includes/cards/sign-in.html
new file mode 100644
index 000000000..d8e4a7540
--- /dev/null
+++ b/pages/_includes/cards/sign-in.html
@@ -0,0 +1,33 @@
+<form class="card" action="#" method="get">
+	<div class="card-body p-5">
+		<div class="card-title">Login to your account</div>
+
+		<div class="mb-3">
+			<label class="form-label">Email address</label>
+			<input type="email" class="form-control" placeholder="Enter email" autocomplete="off">
+		</div>
+		<div class="mb-2">
+			<label class="form-label">
+				Password
+				<span class="form-label-description">
+					<a href="{{ site.base }}/forgot-password.html">I forgot password</a>
+				</span>
+			</label>
+			<input type="password" class="form-control" placeholder="Password" autocomplete="off">
+		</div>
+		<div class="mb-2">
+			<label class="form-check">
+				<input type="checkbox" class="form-check-input"/>
+				<span class="form-check-label">Remember me on this device</span>
+			</label>
+		</div>
+
+		<div class="form-footer">
+			<button type="submit" class="btn btn-primary btn-block">Sign in</button>
+		</div>
+	</div>
+</form>
+
+<div class="text-center text-muted">
+	Don't have account yet? <a href="{{ site.base }}/sign-up.html" tabindex="-1">Sign up</a>
+</div>
diff --git a/pages/_includes/cards/sign-up.html b/pages/_includes/cards/sign-up.html
new file mode 100644
index 000000000..83c07f6a6
--- /dev/null
+++ b/pages/_includes/cards/sign-up.html
@@ -0,0 +1,32 @@
+<form class="card" action="#" method="post">
+	<div class="card-body p-5">
+		<div class="card-title">Create new account</div>
+
+		<div class="mb-3">
+			<label class="form-label">Name</label>
+			<input type="text" class="form-control" placeholder="Enter name">
+		</div>
+		<div class="mb-3">
+			<label class="form-label">Email address</label>
+			<input type="email" class="form-control" placeholder="Enter email">
+		</div>
+		<div class="mb-3">
+			<label class="form-label">Password</label>
+			<input type="password" class="form-control" placeholder="Password">
+		</div>
+		<div class="mb-3">
+			<label class="form-check">
+				<input type="checkbox" class="form-check-input"/>
+				<span class="form-check-label">Agree the <a href="#" tabindex="-1">terms and policy</a>.</span>
+			</label>
+		</div>
+
+		<div class="form-footer">
+			<button type="submit" class="btn btn-primary btn-block">Create new account</button>
+		</div>
+	</div>
+</form>
+
+<div class="text-center text-muted">
+	Already have account? <a href="{{ site.base }}/sign-in.html" tabindex="-1">Sign in</a>
+</div>
diff --git a/pages/_includes/forms/form-elements-5.html b/pages/_includes/forms/form-elements-5.html
index 3527a9ae2..603b653fd 100644
--- a/pages/_includes/forms/form-elements-5.html
+++ b/pages/_includes/forms/form-elements-5.html
@@ -7,7 +7,7 @@
 <div class="mb-3">
 	<label class="form-label">Checkboxes with description</label>
 
-	<label class="form-check mb-2">
+	<label class="form-check form-check-highlight mb-2">
 		<input class="form-check-input" type="checkbox">
 		<div class="form-check-label">
 			Default checkbox
@@ -16,7 +16,7 @@
 			Lorem ipsum dolor sit amet, consectetur adipisicing elit.
 		</div>
 	</label>
-	<label class="form-check mb-2">
+	<label class="form-check form-check-highlight mb-2">
 		<input class="form-check-input" type="checkbox">
 		<div class="form-check-label">
 			Longer checkbox item that wraps on to two separate lines
@@ -25,7 +25,7 @@
 			Ab alias aut, consequuntur cumque esse eveniet incidunt laborum minus molestiae.
 		</div>
 	</label>
-	<label class="form-check">
+	<label class="form-check form-check-highlight">
 		<input class="form-check-input" type="checkbox">
 		<div class="form-check-label">
 			Default checkbox without description
diff --git a/pages/forgot-password.html b/pages/forgot-password.html
index 875461bc9..55f59b31e 100644
--- a/pages/forgot-password.html
+++ b/pages/forgot-password.html
@@ -3,4 +3,4 @@ title: Forgot password
 layout: single
 ---
 
-{% include cards/forgot.html show-header="1" %}
+{% include cards/forgot-password.html show-header="1" %}
diff --git a/pages/login.html b/pages/login.html
deleted file mode 100644
index e178851c0..000000000
--- a/pages/login.html
+++ /dev/null
@@ -1,6 +0,0 @@
----
-layout: single
-title: Login
----
-
-{% include cards/login.html show-header="1" %}
diff --git a/pages/register.html b/pages/register.html
deleted file mode 100644
index 02dc2619e..000000000
--- a/pages/register.html
+++ /dev/null
@@ -1,6 +0,0 @@
----
-layout: single
-title: Register
----
-
-{% include cards/register.html %}
diff --git a/pages/sign-in.html b/pages/sign-in.html
new file mode 100644
index 000000000..4510822ad
--- /dev/null
+++ b/pages/sign-in.html
@@ -0,0 +1,6 @@
+---
+layout: single
+title: Sign in
+---
+
+{% include cards/sign-in.html show-header="1" %}
diff --git a/pages/sign-up.html b/pages/sign-up.html
new file mode 100644
index 000000000..707e55145
--- /dev/null
+++ b/pages/sign-up.html
@@ -0,0 +1,6 @@
+---
+layout: single
+title: Sign up
+---
+
+{% include cards/sign-up.html %}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 006a9d4e9..a0151fb41 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -282,7 +282,7 @@ $dropdown-border-color: $border-color !default;
 $dropdown-menu-max-width: 25rem !default;
 
 //grid
-$grid-gutter-width: 1.5rem !default;
+$grid-gutter-width: 1.25rem !default;
 
 //loader
 $loader-size: 2.5rem !default;
diff --git a/scss/ui/_forms.scss b/scss/ui/_forms.scss
index f0ca2ec67..89201afd2 100644
--- a/scss/ui/_forms.scss
+++ b/scss/ui/_forms.scss
@@ -123,7 +123,7 @@ Form switch
 .form-check {
   user-select: none;
 
-  .form-check-input:not(:checked) ~ .form-check-label {
+  &.form-check-highlight .form-check-input:not(:checked) ~ .form-check-label {
     opacity: .64;
   }
 }