diff --git a/metabrainz/static/css/login.less b/metabrainz/static/css/login.less
new file mode 100644
index 00000000..316f3a60
--- /dev/null
+++ b/metabrainz/static/css/login.less
@@ -0,0 +1,63 @@
+#login-page {
+	font-family: 'Sintony';
+	font-style: normal;
+	font-weight: 400;
+	min-height: 500px;
+	background: linear-gradient(90deg, #3B9766 0%, #FFA500 100%);
+	display: flex;
+	align-items: center;
+    justify-content: center;
+	
+	.form-label{
+		font-weight: normal;
+	}
+	
+	.icon-pills {
+		display: flex;
+		justify-content: space-evenly;
+		margin-bottom: 2rem;
+	}
+	.icon-pill {
+		background: #D9D9D9;
+		box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
+		border-radius: 50%;
+		text-align: center;
+		width:50px;
+		height: 50px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		img {
+			width:65%;
+		}
+	}
+
+	.login-page-container {
+		max-width: 400px;
+	}
+	.login-card-container {
+		background: #E7E7E7;
+		box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
+		border-radius: 3px;
+	}
+	.login-card {
+		h1,h2,h3,h4,h5,h6{
+			font-weight: bold;
+		}
+		background: #FFFFFF;
+		box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
+		padding: 1rem;
+		border-radius: 3px;
+	}
+	.login-card-bottom {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+	.create-account-card {
+		padding: 1rem;
+		font-size: 1.3rem;
+		line-height: 1.6rem;
+		color: #808080;
+	}
+}
diff --git a/metabrainz/static/css/main.less b/metabrainz/static/css/main.less
index 61478331..cd343778 100644
--- a/metabrainz/static/css/main.less
+++ b/metabrainz/static/css/main.less
@@ -1,5 +1,6 @@
 @import "theme/theme.less";
 @import "carousel.less";
+@import "login.less";
 
 @icon-font-path:"/static/fonts/";
 
diff --git a/metabrainz/templates/users/mb-login.html b/metabrainz/templates/users/mb-login.html
index 3a976929..6f12a52a 100644
--- a/metabrainz/templates/users/mb-login.html
+++ b/metabrainz/templates/users/mb-login.html
@@ -1,15 +1,89 @@
 {% extends 'base.html' %}
 
-{% block title %}{{ _('Log in') }} - MetaBrainz Foundation{% endblock %}
+{% block title %}{{ _('Sign in') }} - MetaBrainz Foundation{% endblock %}
 
 {% block content %}
-  <h1 class="page-title">{{ _('Log in') }}</h1>
+  <section id="login-page">
+      <div class="login-page-container">
+        <div class="icon-pills">
+          <div class="icon-pill">
+            <img src="{{ url_for('static', filename='img/projects/musicbrainz.svg') }}" />
+          </div>
+          <div class="icon-pill">
+            <img src="{{ url_for('static', filename='img/projects/critiquebrainz.svg') }}" />
+          </div>
+          <div class="icon-pill">
+            <img src="{{ url_for('static', filename='img/projects/picard.svg') }}" />
+          </div>
+          <div class="icon-pill">
+            <img src="{{ url_for('static', filename='img/projects/listenbrainz.svg') }}" />
+          </div>
+          <div class="icon-pill">
+            <img src="{{ url_for('static', filename='img/projects/bookbrainz.svg') }}" />
+          </div>
+        </div>
+        <div class="login-card-container">
+        
+          <div class="login-card">
+            <h1 class="page-title text-center">{{ _('Sign in') }}</h1>
+            <form>
+              <div class="form-group">
+                <label class="form-label" htmlFor="yourUsername">
+                  Username
+                </label>
+                <div>
+                  <input
+                    class="form-control"
+                    id="yourUsername"
+                    name="username"
+                    required
+                    type="text"
+                  />
+                </div>
+              </div>
 
-  <p>{{ _('To log in you need to have a MusicBrainz account.') }}</p>
+              <div class="form-group">
+                <label class="form-label" htmlFor="yourPassword">
+                  Password
+                </label>
+                <input
+                  class="form-control"
+                  id="yourPassword"
+                  name="passwword"
+                  required
+                  type="password"
+                />
+              </div>
 
-  <hr />
-  <div class="well" style="max-width: 400px; margin: 0 auto;">
-    <a href="{{ url_for('users.musicbrainz', next=request.args.get('next')) }}"
-       class="btn btn-primary btn-lg btn-block">{{ _('Log in with MusicBrainz') }}</a>
-  </div>
+              <div class="login-card-bottom">
+                <small class="checkbox">
+                  <label htmlFor="rememberMe">
+                    <input
+                      id="rememberMe"
+                      name="remember"
+                      type="checkbox"
+                      value="true"
+                    />
+                    Remember me
+                  </label>
+                </small>
+                <a class="small" href="#">
+                  I forgot my username / password
+                </a>
+              </div>
+              
+              <button class="btn btn-primary btn-block" type="submit">
+                Sign in
+              </button>
+            </form>
+            
+          </div>
+          <div class="create-account-card">
+            <dix class="small">
+              Don‘t have an account?<a href="#"> Create a free MetaBrainz account </a>to access MusicBrainz, ListenBrainz, CritiqueBrainz, and more.
+            </dix>
+          </div>
+        </div>
+    </div>
+  </section>
 {% endblock %}