diff --git a/src/app/app.component.html b/src/app/app.component.html
index 90c6b64..4e1306a 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1 +1,2 @@
+<app-scaffold id="headerbar"></app-scaffold>
 <router-outlet></router-outlet>
\ No newline at end of file
diff --git a/src/app/app.component.sass b/src/app/app.component.sass
index f00d56b..2a73a26 100644
--- a/src/app/app.component.sass
+++ b/src/app/app.component.sass
@@ -34,3 +34,10 @@
   display: grid
   min-height: 100vh
   max-height: 100vh
+
+#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/app.component.ts b/src/app/app.component.ts
index 73203c5..35e899d 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { User } from './models/user';
+import { DatasharingService } from './services/datasharing.service';
 
 @Component({
   selector: 'app-root',
@@ -6,7 +8,28 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./app.component.sass']
 })
 export class AppComponent implements OnInit {
-  constructor() { }
+  constructor(private data: DatasharingService) { }
 
-  ngOnInit() { }
+  userInfo: User
+
+  loggedIn : boolean = false;
+  userID : number;
+  username : string;
+  handle : string;
+  email : string;
+  points : number;
+  level : number;
+
+  friendIDs : number[];
+  groupIDs : number[];
+  chatIDs : number[];
+
+  requestIDs : number[];
+
+  ngOnInit() {
+    this.data.currentUserInfo.subscribe(user => {
+      this.userInfo = user;
+      console.log(this.userInfo);
+    })
+  }
 }
diff --git a/src/app/components/app-scaffold/app-scaffold.component.html b/src/app/components/app-scaffold/app-scaffold.component.html
index cfd5a41..ea1e121 100644
--- a/src/app/components/app-scaffold/app-scaffold.component.html
+++ b/src/app/components/app-scaffold/app-scaffold.component.html
@@ -1,10 +1,10 @@
 <h1>Greenvironment</h1>
   <button id="tab-home" routerLink="">Home</button>
-  <button id="tab-profile" routerLink="/profile">Profile</button>
-  <button id="tab-rank">Rank</button>
+  <button id="tab-profile" routerLink="/profile" *ngIf="loggedIn">Profile</button>
+  <button id="tab-rank" *ngIf="loggedIn">Rank</button>
   <button id="tab-about" routerLink="/about">About</button>
   <button id="tab-imprint" routerLink="/imprint">Imprint</button>
-  <div id="dropdown">
+  <div id="dropdown" *ngIf="loggedIn">
     <div>
       <span><i class="fa fa-caret-down" aria-hidden="true"></i></span>
       <span> Niklas Lampe</span>
@@ -13,4 +13,4 @@
       Hallo
     </div>
   </div>
-  <button id="logoutbutton"><span><i class="fa fa-sign-out-alt fa-2x" aria-hidden="true"></i></span></button>
+  <button id="logoutbutton" *ngIf="loggedIn"><span><i class="fa fa-sign-out-alt fa-2x" aria-hidden="true"></i></span></button>
diff --git a/src/app/components/app-scaffold/app-scaffold.component.ts b/src/app/components/app-scaffold/app-scaffold.component.ts
index 75a2283..e173656 100644
--- a/src/app/components/app-scaffold/app-scaffold.component.ts
+++ b/src/app/components/app-scaffold/app-scaffold.component.ts
@@ -1,12 +1,14 @@
 import { Component, OnInit } from '@angular/core';
+import { LoginComponent } from '../login/login.component';
 
 @Component({
   selector: 'app-scaffold',
   templateUrl: './app-scaffold.component.html',
   styleUrls: ['./app-scaffold.component.sass']
 })
-export class AppScaffoldComponent implements OnInit {
 
+export class AppScaffoldComponent implements OnInit {
+  
   constructor() { }
 
   ngOnInit() {
diff --git a/src/app/components/login/login.component.html b/src/app/components/login/login.component.html
index e71540b..00341e7 100644
--- a/src/app/components/login/login.component.html
+++ b/src/app/components/login/login.component.html
@@ -1,17 +1,19 @@
+
 <div id="login">
   <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..8e687e2 100644
--- a/src/app/components/login/login.component.sass
+++ b/src/app/components/login/login.component.sass
@@ -3,16 +3,14 @@
 
 #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)
+    margin: 0.25em
\ No newline at end of file
diff --git a/src/app/components/login/login.component.ts b/src/app/components/login/login.component.ts
index 848c59b..40d6725 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,20 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./login.component.sass']
 })
 export class LoginComponent implements OnInit {
+  login: Login
 
-  constructor() { }
+  constructor(private loginService: LoginService) {
+    this.login = {passwordHash: null, email: null};
+  }
+
+  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..4683ee6 100644
--- a/src/app/components/register/register.component.html
+++ b/src/app/components/register/register.component.html
@@ -11,7 +11,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..639703f 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,4 @@
     padding: 1em
 input
     margin: 0.25em
-    
-#header
-    @include gridPosition(1, 2, 1, 2)
+
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/models/user.ts b/src/app/models/user.ts
new file mode 100644
index 0000000..619d6b7
--- /dev/null
+++ b/src/app/models/user.ts
@@ -0,0 +1,15 @@
+export class User {
+  loggedIn : boolean
+  userID : number
+  username : string
+  handle : string
+  email : string
+  points : number
+  level : number
+
+  friendIDs : number[]
+  groupIDs : number[]
+  chatIDs : number[]
+
+  requestIDs : number[]
+}
\ No newline at end of file
diff --git a/src/app/services/datasharing.service.spec.ts b/src/app/services/datasharing.service.spec.ts
new file mode 100644
index 0000000..6c24291
--- /dev/null
+++ b/src/app/services/datasharing.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { DatasharingService } from './datasharing.service';
+
+describe('DatasharingService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: DatasharingService = TestBed.get(DatasharingService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/services/datasharing.service.ts b/src/app/services/datasharing.service.ts
new file mode 100644
index 0000000..f15a310
--- /dev/null
+++ b/src/app/services/datasharing.service.ts
@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { User } from '../models/user';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DatasharingService {
+
+  private userInfoSource = new BehaviorSubject<User>(new User())
+  currentUserInfo = this.userInfoSource.asObservable();
+
+  constructor() { }
+
+  changeUserInfo(pUserInfo: User) {
+    this.userInfoSource.next(pUserInfo)
+  }
+}
diff --git a/src/app/services/login/login.service.ts b/src/app/services/login/login.service.ts
index 92c777e..8276696 100644
--- a/src/app/services/login/login.service.ts
+++ b/src/app/services/login/login.service.ts
@@ -1,9 +1,57 @@
-import { Injectable } from '@angular/core';
+import { Injectable, EventEmitter, Output } from '@angular/core';
+import {Http, URLSearchParams, Headers} from '@angular/http';
+import { Login } from '../../models/login';
+import { User } from 'src/app/models/user';
+import { DatasharingService } from '../datasharing.service';
+import { userInfo } from 'os';
 
 @Injectable({
   providedIn: 'root'
 })
 export class LoginService {
 
-  constructor() { }
-}
+  constructor(private http: Http, private data: DatasharingService) { }
+
+  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());
+        this.updateUserInfo(response.json())
+      });
+  }
+
+  public updateUserInfo(response : any){
+    const user: User = new User();
+    user.loggedIn = true;
+    user.userID = response.data.login.id;
+    user.username = response.data.login.name;
+    user.handle = response.data.login.handle;
+    user.email = response.data.login.email;
+    user.points = response.data.login.points;
+    user.level = response.data.login.level;
+    user.friendIDs = response.data.login.friends;
+    user.groupIDs = response.data.login.groups;
+    user.chatIDs = response.data.login.chats;
+    user.requestIDs = response.data.login.requests;
+
+    this.data.changeUserInfo(user)
+    
+  }
+
+  public buildJson(login: Login): any {
+    const body =  {query: `mutation($email: String, $pwHash: String) {
+      login(email: $email, passwordHash: $pwHash) {id, name, handle, points, level, friends{id}, groups{id},chats{id}} 
+    }`, variables: {
+        email: login.email,
+        pwHash: login.passwordHash,
+      }};
+    return body;
+  }
+}//add ,receivedRequests{id} later