diff --git a/src/app/components/login/login.component.html b/src/app/components/login/login.component.html
index e71540b..a29a884 100644
--- a/src/app/components/login/login.component.html
+++ b/src/app/components/login/login.component.html
@@ -1,17 +1,20 @@
+
 <div id="login">
+  <app-scaffold id="headerbar"></app-scaffold>
   <div id="logincontainer">
     <table style="width:100%">
       <tr>
-        <td>username: </td>
-        <td><input type="inputBox" name="username"><br></td>
+        <td>email: </td>
+        <td><input #email type="text" name="email"><br></td>
       </tr>
       <tr>
           <td>password:</td>
-          <td> <input type="text" name="password"><br></td>
+          <td> <input #password type="password" name="password"><br></td>
         </tr>
     </table>
-      <button type="loginbutton">Login</button>
+      <button type="loginbutton" (click)="onClickSubmit(email.value,password.value)">Login</button>
       <br>
     <a href="/register">You aren´t part of greenvironment yet? - join us here</a>
   </div>
-</div>
\ No newline at end of file
+</div>
+
diff --git a/src/app/components/login/login.component.sass b/src/app/components/login/login.component.sass
index 7c5c8d8..a1809fb 100644
--- a/src/app/components/login/login.component.sass
+++ b/src/app/components/login/login.component.sass
@@ -3,16 +3,21 @@
 
 #login
   background-color:  $cSecondaryBackground
-  grid-template: 15% 70% 15% / 15% 70% 15% 
+  grid-template: 8% 77% 15% / 15% 70% 15% 
   display: grid
   min-height: 100vh
   max-height: 100vh
-    
+
 #logincontainer
     @include gridPosition(2, 2,2,2)
     grid-template: 15% 15% 15% 15% 15% 15% / 100%
     background-color: $cPrimaryBackground
 input
     margin: 0.25em
-#header
-    @include gridPosition(1, 2, 1, 2)
+
+#headerbar
+  @include gridPosition(1, 1, 1, 4)
+  display: grid
+  grid-template: 100% /30% 10% 10% 10% 10% 10% 15% 5%
+  background-color: $cHeadPrimaryBackground
+  color: $cHeadFontColor
diff --git a/src/app/components/login/login.component.ts b/src/app/components/login/login.component.ts
index 848c59b..23c6c80 100644
--- a/src/app/components/login/login.component.ts
+++ b/src/app/components/login/login.component.ts
@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { Login } from 'src/app/models/login';
+import { LoginService } from 'src/app/services/login/login.service';
 
 @Component({
   selector: 'app-login',
@@ -6,10 +8,19 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./login.component.sass']
 })
 export class LoginComponent implements OnInit {
+  login: Login 
+ 
+  constructor(private loginService: LoginService) {
+    this.login = {passwordHash: null, email: null};
+  }
 
-  constructor() { }
+  onClickSubmit(pEmail: string, pPasswordHash: string) {
+    console.log('email: ' + pEmail); 
+    this.login.email = pEmail
+    this.login.passwordHash = pPasswordHash 
 
-  ngOnInit() {
+    this.loginService.login(this.login)
   }
-
+  ngOnInit() {}
 }
+
diff --git a/src/app/components/register/register.component.html b/src/app/components/register/register.component.html
index ca7da31..172d4cc 100644
--- a/src/app/components/register/register.component.html
+++ b/src/app/components/register/register.component.html
@@ -1,4 +1,5 @@
 <div id="register">
+    <app-scaffold id="headerbar"></app-scaffold>
   <div id="registercontainer">
       <table style="width:100%">
           <tr>
@@ -11,7 +12,7 @@
           </tr>
           <tr>
               <td>password:</td>
-              <td> <input #password type="text" name="password"><br></td>
+              <td> <input #password type="password" name="password"><br></td>
             </tr>
           <tr>
               <td>repeat password:</td>
diff --git a/src/app/components/register/register.component.sass b/src/app/components/register/register.component.sass
index 01893ff..54ae275 100644
--- a/src/app/components/register/register.component.sass
+++ b/src/app/components/register/register.component.sass
@@ -3,7 +3,7 @@
 
 #register
   background-color:  $cSecondaryBackground
-  grid-template: 15% 70% 15% / 15% 70% 15% 
+  grid-template: 8% 77% 15% / 15% 70% 15% 
   display: grid
   min-height: 100vh
   max-height: 100vh
@@ -15,6 +15,10 @@
     padding: 1em
 input
     margin: 0.25em
-    
-#header
-    @include gridPosition(1, 2, 1, 2)
+
+#headerbar
+  @include gridPosition(1, 1, 1, 4)
+  display: grid
+  grid-template: 100% /30% 10% 10% 10% 10% 10% 15% 5%
+  background-color: $cHeadPrimaryBackground
+  color: $cHeadFontColor
diff --git a/src/app/models/login.ts b/src/app/models/login.ts
new file mode 100644
index 0000000..30aeb8f
--- /dev/null
+++ b/src/app/models/login.ts
@@ -0,0 +1,4 @@
+export interface Login {
+    email: string;
+    passwordHash: string
+  }
\ No newline at end of file
diff --git a/src/app/services/login/login.service.ts b/src/app/services/login/login.service.ts
index 92c777e..ee3e5c0 100644
--- a/src/app/services/login/login.service.ts
+++ b/src/app/services/login/login.service.ts
@@ -1,9 +1,32 @@
 import { Injectable } from '@angular/core';
+import {Http, URLSearchParams, Headers} from '@angular/http';
+import { Login } from '../../models/login';
 
 @Injectable({
   providedIn: 'root'
 })
 export class LoginService {
 
-  constructor() { }
+  constructor(private http: Http) { }
+
+  public login(login : Login) {
+ 
+    //let url = './graphql'
+    let url = 'https://greenvironment.net/graphql'
+ 
+    let headers = new Headers();
+    headers.set('Content-Type', 'application/json');
+ 
+    return this.http.post(url, this.buildJson(login)).subscribe(response => console.log(response.text()));
+  }
+
+  public buildJson(login: Login): any {
+    const body =  {query: `mutation($email: String, $pwHash: String) {
+      login(email: $email, passwordHash: $pwHash) {id}
+    }`, variables: {
+        email: login.email,
+        pwHash: login.passwordHash,
+      }};
+    return body;
+  }
 }