diff --git a/site/client/app/app.js b/site/client/app/app.js
index 7ebeeb2..790d8d3 100644
--- a/site/client/app/app.js
+++ b/site/client/app/app.js
@@ -15,8 +15,8 @@ var app = new Vue({
   },
 
   components: {
-    'landing': require('./components/landing'),
-    'lobby': require('./components/lobby')
+    landing: require('./components/landing'),
+    lobby: require('./components/lobby')
   }
 
 });
diff --git a/site/client/app/components/landing.js b/site/client/app/components/landing.js
index 89c7fd7..b7e1699 100644
--- a/site/client/app/components/landing.js
+++ b/site/client/app/components/landing.js
@@ -2,6 +2,10 @@ module.exports = {
 
   template: require('../views/landing.html'),
 
+  components: {
+    login: require('./modals/login')
+  },
+
   ready: function() {
     setTimeout(function() {
       $('.container-form-landing').addClass('active')
diff --git a/site/client/app/components/modals/login.js b/site/client/app/components/modals/login.js
new file mode 100644
index 0000000..f8456c1
--- /dev/null
+++ b/site/client/app/components/modals/login.js
@@ -0,0 +1,5 @@
+module.exports = {
+
+  template: require('../../views/modals/login.html')
+
+};
\ No newline at end of file
diff --git a/site/client/app/views/landing.html b/site/client/app/views/landing.html
index d75d01d..7013383 100644
--- a/site/client/app/views/landing.html
+++ b/site/client/app/views/landing.html
@@ -1,4 +1,6 @@
-<section class="container-landing" id="lol">
+<login></login>
+
+<section class="container-landing">
   <div class="wrap-landing">
     <img src="assets/img/logo-big.png" width="243" height="85" alt="Gwent" class="logo-big">
 
@@ -22,7 +24,7 @@
       <span class="choose">or</span>
 
       <a href="#/lobby" class="btn-second btn-guest">Play as guest</a>
-      <a href="#" class="btn-none btn-login">Login</a>
+      <a href="#" class="btn-none btn-login" v-on="click: modal = true">Login</a>
 
     </div>
   </div>
diff --git a/site/client/app/views/lobby.html b/site/client/app/views/lobby.html
index 8cfec73..f0b2493 100644
--- a/site/client/app/views/lobby.html
+++ b/site/client/app/views/lobby.html
@@ -1 +1,9 @@
-LOBBY HIER BLA BLA
\ No newline at end of file
+<section class="container-inner">
+
+  <a href="#/lobby"><img src="assets/img/logo-medium.png" width="148" height="46" alt="Gwent" class="logo-medium"></a>
+
+  <main>
+
+  </main>
+
+</section>
diff --git a/site/client/app/views/modals/login.html b/site/client/app/views/modals/login.html
new file mode 100644
index 0000000..4f6fa29
--- /dev/null
+++ b/site/client/app/views/modals/login.html
@@ -0,0 +1,17 @@
+<div class="modal" v-class="active: modal">
+  <div class="modal-banner">
+    <div class="wrap-modal">
+
+      <form class="form-session form-login">
+        <input type="text" placeholder="Username" class="field-session">
+        <input type="password" placeholder="Password" class="field-session">
+
+        <div class="wrap-btn-action btn-login-action">
+          <input type="submit" value="Login" class="btn-action">
+          <i class="icon-load"></i>
+        </div>
+      </form>
+
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/site/client/assets/sass/_base.scss b/site/client/assets/sass/_base.scss
index 8295bdb..0f3c2cd 100644
--- a/site/client/assets/sass/_base.scss
+++ b/site/client/assets/sass/_base.scss
@@ -13,11 +13,6 @@ body {
   font-family: 'Titillium Web', sans-serif;
 }
 
-body.inner {
-  background: url(../img/inner-bg.jpg) center top no-repeat;
-  background-size: cover;
-}
-
 ::-moz-selection {
   background: rgba($main, .99);
   color: #fff;
diff --git a/site/client/assets/sass/_inner.scss b/site/client/assets/sass/_inner.scss
new file mode 100644
index 0000000..4911f82
--- /dev/null
+++ b/site/client/assets/sass/_inner.scss
@@ -0,0 +1,9 @@
+body.inner {
+  background: url(../img/inner-bg.jpg) #162232 center top no-repeat;
+  background-size: cover;
+}
+
+.container-inner {
+  width: 100%;
+  padding: 40px;
+}
\ No newline at end of file
diff --git a/site/client/assets/sass/_landing.scss b/site/client/assets/sass/_landing.scss
index 930106b..4621c97 100644
--- a/site/client/assets/sass/_landing.scss
+++ b/site/client/assets/sass/_landing.scss
@@ -1,5 +1,5 @@
 body.landing {
-  background: url(../img/landing-bg.jpg) center top no-repeat;
+  background: url(../img/landing-bg.jpg) #162232 center top no-repeat;
   background-size: cover;
 }
 
diff --git a/site/client/assets/sass/app.scss b/site/client/assets/sass/app.scss
index ea14220..7c54197 100644
--- a/site/client/assets/sass/app.scss
+++ b/site/client/assets/sass/app.scss
@@ -8,4 +8,5 @@
 
 'modal',
 'form',
-'landing';
\ No newline at end of file
+'landing',
+'inner';
\ No newline at end of file
diff --git a/site/public/assets/img/landing-bg.jpg b/site/public/assets/img/landing-bg.jpg
index f7cffa2..fff4478 100644
Binary files a/site/public/assets/img/landing-bg.jpg and b/site/public/assets/img/landing-bg.jpg differ
diff --git a/site/public/assets/img/logo-medium.png b/site/public/assets/img/logo-medium.png
new file mode 100644
index 0000000..24911ac
Binary files /dev/null and b/site/public/assets/img/logo-medium.png differ