diff --git a/package-lock.json b/package-lock.json
index 86c7311..49b375b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9444,9 +9444,9 @@
       }
     },
     "ts-md5": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/ts-md5/-/ts-md5-1.2.6.tgz",
-      "integrity": "sha512-VFW6O4CTZsgTPDBhF31i83hPhfwd9Dcp5RnbfGOIJPDRro9IhvXMYd8xBycD0yXqHZiAvv+iDG8F+UFrPEyQ5w=="
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/ts-md5/-/ts-md5-1.2.7.tgz",
+      "integrity": "sha512-emODogvKGWi1KO1l9c6YxLMBn6CEH3VrH5mVPIyOtxBG52BvV4jP3GWz6bOZCz61nLgBc3ffQYE4+EHfCD+V7w=="
     },
     "ts-node": {
       "version": "7.0.1",
diff --git a/package.json b/package.json
index a943834..7ee7710 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
     "graphql-tag": "^2.10.0",
     "ngx-socket-io": "^2.0.0",
     "rxjs": "~6.3.3",
-    "ts-md5": "^1.2.6",
+    "ts-md5": "^1.2.7",
     "zone.js": "~0.8.26"
   },
   "devDependencies": {
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 9ac92e0..a377c4d 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -30,7 +30,7 @@ export class AppComponent implements OnInit {
     this.data.currentUserInfo.subscribe(user => {
       this.userInfo = user;
       console.log(this.userInfo);
-      this.data.changeChatIDs(this.chatIDs)
+      this.data.changeChatIDs(user.chatIDs)
     })
   }
 }
diff --git a/src/app/components/app-scaffold/app-scaffold.component.html b/src/app/components/app-scaffold/app-scaffold.component.html
index ed80193..df665b0 100644
--- a/src/app/components/app-scaffold/app-scaffold.component.html
+++ b/src/app/components/app-scaffold/app-scaffold.component.html
@@ -6,11 +6,18 @@
   <button id="tab-imprint" routerLink="/imprint">Imprint</button>
   <div id="dropdown" *ngIf="loggedIn">
     <div>
-      <span><i class="fa fa-caret-down" aria-hidden="true"></i></span>
-      <span> Niklas Lampe</span>
+      <span (click)="showDropdown()"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
+      <span>{{username}}</span>
     </div>
-    <div id="dropdown-content">
-      Hallo
+    <div id="dropdown-content" *ngIf="dropdownShown">
+      <div>
+        <span>Rang:</span>
+        <span>{{level}}</span>
+      </div>
+      <div>
+        <span>Punkte:</span>
+        <span>{{points}}</span>
+      </div>
     </div>
   </div>
-  <button id="logoutbutton" *ngIf="loggedIn"><span><i class="fa fa-sign-out-alt fa-2x" aria-hidden="true"></i></span></button>
+  <button id="logoutbutton" *ngIf="loggedIn" (click)="logout()"><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.sass b/src/app/components/app-scaffold/app-scaffold.component.sass
index fd527fc..d9c67b2 100644
--- a/src/app/components/app-scaffold/app-scaffold.component.sass
+++ b/src/app/components/app-scaffold/app-scaffold.component.sass
@@ -47,18 +47,18 @@ h1
   span
     margin-left: 1em
   #dropdown-content
-    display: none
     position: absolute
-    background-color: #f9f9f9
+    background-color: $cHeadPrimaryBackground
     min-width: 160px
+    margin-top: 7vh
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2)
     padding: 12px 16px
     z-index: 1
   div:hover
     background-color: lighten($cHeadPrimaryBackground, 10%)
     cursor: pointer
-  div:hover #dropdown-content
-  display: block
+    #dropdown-content
+      //display: block
 
 #logoutbutton
   @include gridPosition(1, 2, 8, 9)
\ No newline at end of file
diff --git a/src/app/components/app-scaffold/app-scaffold.component.ts b/src/app/components/app-scaffold/app-scaffold.component.ts
index cc28c79..2ec09b7 100644
--- a/src/app/components/app-scaffold/app-scaffold.component.ts
+++ b/src/app/components/app-scaffold/app-scaffold.component.ts
@@ -2,6 +2,10 @@ import { Component, OnInit } from '@angular/core';
 import { LoginComponent } from '../login/login.component';
 import { DatasharingService } from '../../services/datasharing.service';
 import { SelfService } from '../../services/selfservice/self.service';
+import { Levellist } from 'src/app/models/levellist';
+import { Http } from '@angular/http';
+import { Router } from '@angular/router';
+import { User } from 'src/app/models/user';
 
 @Component({
   selector: 'app-scaffold',
@@ -12,14 +16,25 @@ import { SelfService } from '../../services/selfservice/self.service';
 export class AppScaffoldComponent implements OnInit {
   loggedIn: boolean = false;
   userId: number;
+  username: string
+  user: User
+  levellist: Levellist = new Levellist()
+  level: string
+  points: number
   profileUrl: string;
 
-  constructor(private data: DatasharingService,private selfservice: SelfService) { }
+  dropdownShown: boolean = false
+
+  constructor(private data: DatasharingService,private selfservice: SelfService, private http: Http, private router: Router) { }
 
   ngOnInit() {
     this.data.currentUserInfo.subscribe(user => {
+      this.user = user
       this.loggedIn = user.loggedIn;
       this.userId = user.userID;
+      this.username = user.username
+      this.level = this.levellist.getLevelName(user.level)
+      this.points = user.points
       this.profileUrl = '/profile/' + this.userId;
       console.log(user.loggedIn);
     })
@@ -30,4 +45,32 @@ export class AppScaffoldComponent implements OnInit {
     console.log('loggedIn is ' + this.loggedIn)
   }
 
+  showDropdown() {
+    if(!this.dropdownShown) {
+      this.dropdownShown = true
+    }
+    else {
+      this.dropdownShown = false
+    }
+  }
+
+  logout() {
+    let url = 'https://greenvironment.net/graphql'
+ 
+    let headers = new Headers()
+    headers.set('Content-Type', 'application/json')
+
+    const body = {query: `mutation {
+        logout
+      }`}
+ 
+    this.http.post(url, body).subscribe(response => {
+        console.log(response.text())})
+    this.loggedIn = false
+    let user = new User()
+    user.loggedIn = false
+    this.data.changeUserInfo(user)
+    this.router.navigate(['login'])
+  }
+
 }
diff --git a/src/app/components/chat/chat.component.html b/src/app/components/chat/chat.component.html
index b4daf21..30f7be2 100644
--- a/src/app/components/chat/chat.component.html
+++ b/src/app/components/chat/chat.component.html
@@ -1,10 +1,10 @@
 <div id="chat">
     <div id='header'>
         <button id="goback" (click)="goBack()"><span><i class="fa fa-arrow-left fa-3x" aria-hidden="true"></i></span></button>
-        <span class='title'>{{childChat.id}}</span>
+        <span class='title'>{{childChat.memberName}}</span>
     </div>
     <div id='messagecontainer'>
-        <div class="chatmessage" *ngFor="let message of messages">
+        <div class="chatmessage" *ngFor="let message of childChat.messages">
             <div *ngIf="message.myself == true" id='ownmessage'><span>{{message.content}}</span></div>
             <div *ngIf="message.myself == false" id='foreignmessage'><span>{{message.content}}</span></div>
         </div>
diff --git a/src/app/components/chat/chat.component.ts b/src/app/components/chat/chat.component.ts
index 50dedca..92b6c2a 100644
--- a/src/app/components/chat/chat.component.ts
+++ b/src/app/components/chat/chat.component.ts
@@ -1,6 +1,8 @@
 import { Component, OnInit, EventEmitter, Output, Input } from '@angular/core';
 import { Chatmessage } from 'src/app/models/chatmessage';
 import { Chatinfo } from 'src/app/models/chatinfo';
+import { ChatService } from 'src/app/services/chat/chat.service';
+import { Chat } from 'src/app/models/chat';
 
 @Component({
   selector: 'chatmanager-chat',
@@ -14,15 +16,21 @@ export class ChatComponent implements OnInit {
   new Chatmessage("Hallo", "01.01.",true)]
 
   @Output() goBackEvent = new EventEmitter<boolean>();
-  @Input() childChat: Chatinfo;
+  @Input() childChat: Chat;
 
-  constructor() { }
+  constructor(private chatService: ChatService) { }
 
   ngOnInit() {
   }
 
   goBack() {
     this.goBackEvent.emit(true)
+    this.chatService.getAllChats()
+  }
+
+  sendMessage(pContent: string) {
+    this.chatService.sendMessage(this.childChat.id, pContent)
+    this.chatService.getMessages(this.childChat.id)
   }
 
 }
diff --git a/src/app/components/chatlist/chatlist.component.html b/src/app/components/chatlist/chatlist.component.html
index aaf6b06..2fd8c59 100644
--- a/src/app/components/chatlist/chatlist.component.html
+++ b/src/app/components/chatlist/chatlist.component.html
@@ -4,11 +4,11 @@
     <button id="newchat" (click)="newChat()"><span><i class="fa fa-plus fa-3x" aria-hidden="true"></i></span></button>
   </div>
   <div id="chats">
-    <div class="chatitem" *ngFor="let chat of chats" 
+    <div class="chatitem" *ngFor="let chat of chatService.chats" 
     [class.selected]="chat === selectedChat" (click)="showChat(chat)">
       <div class="picture">Pic</div>
       <div class="name"><span>{{chat.id}}</span></div>
-      <div class="date"> <a>{{chat.date}}</a></div>
+      <div class="date"> <a>Date of last message</a></div>
     </div>
   </div>
 </div>
diff --git a/src/app/components/chatlist/chatlist.component.sass b/src/app/components/chatlist/chatlist.component.sass
index 4db994c..1fb59d4 100644
--- a/src/app/components/chatlist/chatlist.component.sass
+++ b/src/app/components/chatlist/chatlist.component.sass
@@ -49,7 +49,6 @@
     margin: 0.2em
     padding: 0.25em
     border-radius: 0.25em
-    border: solid
     display: grid
     grid-template: 100% / 20% 60% 20%
     .picture
diff --git a/src/app/components/chatlist/chatlist.component.ts b/src/app/components/chatlist/chatlist.component.ts
index 4c12acc..1cbbf44 100644
--- a/src/app/components/chatlist/chatlist.component.ts
+++ b/src/app/components/chatlist/chatlist.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit, Output, EventEmitter } from '@angular/core';
 import { Chatinfo } from 'src/app/models/chatinfo';
 import { ChatService } from 'src/app/services/chat/chat.service';
+import { Chat } from 'src/app/models/chat';
 
 @Component({
   selector: 'chatmanager-chatlist',
@@ -9,23 +10,21 @@ import { ChatService } from 'src/app/services/chat/chat.service';
 })
 export class ChatlistComponent implements OnInit {
 
-  chats:Array<Chatinfo> = [new Chatinfo("Max", "23.06.19 12:50"), new Chatinfo("Julius", "17.04.19 16:50"),
-  new Chatinfo("David", "23.06.19 12:50"), new Chatinfo("Bruno", "23.06.19 12:50")]
-
-  @Output() showChatEvent = new EventEmitter<Chatinfo>();
+  @Output() showChatEvent = new EventEmitter<Chat>();
   @Output() showCreateChatEvent = new EventEmitter<boolean>();
-  selectedChat: Chatinfo;
+  selectedChat: Chat;
 
   constructor(private chatService: ChatService) { }
 
   ngOnInit() {
+    
   }
 
   showNewChat() {
     this.showCreateChatEvent.emit(true)
   }
 
-  showChat(pChat: Chatinfo) {
+  showChat(pChat: Chat) {
     this.selectedChat = pChat
     this.showChatEvent.emit(this.selectedChat)
   }
diff --git a/src/app/components/chatmanager/chatmanager.component.ts b/src/app/components/chatmanager/chatmanager.component.ts
index 578f96d..c92aeee 100644
--- a/src/app/components/chatmanager/chatmanager.component.ts
+++ b/src/app/components/chatmanager/chatmanager.component.ts
@@ -3,6 +3,7 @@ import { ChatService } from '../../services/chat/chat.service'
 import { ChatComponent } from '../chat/chat.component';
 import { Chatinfo } from 'src/app/models/chatinfo';
 import { DatasharingService } from 'src/app/services/datasharing.service';
+import { Chat } from 'src/app/models/chat';
 
 @Component({
   selector: 'home-chatmanager',
@@ -14,16 +15,17 @@ export class ChatmanagerComponent implements OnInit {
   showChatlist: boolean = true
   showChat: boolean = false
   showCreateNewChat: boolean = false
-  parentSelectedChat: Chatinfo
+  parentSelectedChat: Chat
 
-  chatIDs: number[]
+  chatIds: number[] = []
 
-  constructor(private data: DatasharingService) { }
+  constructor(private data: DatasharingService, private chatService: ChatService) { }
 
   ngOnInit() {
     this.data.currentChatIDs.subscribe(chatIDs => {
-      this.chatIDs = chatIDs
+      this.chatIds = chatIDs
     })
+    this.chatService.getChatsByID(this.chatIds)
   }
 
   goBackToChatlist($event) {
diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html
index a2cf492..b2c7a2e 100644
--- a/src/app/components/feed/feed.component.html
+++ b/src/app/components/feed/feed.component.html
@@ -1,7 +1,7 @@
 <div id="postinput">
-  <textarea id='input' placeholder="Post something ..." rows='3' wrap="soft"></textarea>
+  <textarea #content id='input' placeholder="Post something ..." rows='3' wrap="soft"></textarea>
   <button id="attach" type='submit'><span><i class="fa fa-paperclip fa-2x" aria-hidden="true"></i></span></button>
-  <button id="submit" type='submit'><span><i class="fa fa-send-o fa-2x" aria-hidden="true"></i></span></button>
+  <button id="submit" type='submit' (click)=createPost(content.value)><span><i class="fa fa-send-o fa-2x" aria-hidden="true"></i></span></button>
 </div>
 <div id='completeFeed'>
   <div id='feedchooser'>
diff --git a/src/app/components/feed/feed.component.sass b/src/app/components/feed/feed.component.sass
index 399e19c..02fe803 100644
--- a/src/app/components/feed/feed.component.sass
+++ b/src/app/components/feed/feed.component.sass
@@ -8,20 +8,27 @@
   grid-template: 100% /80% 10% 10%
   #input
     @include gridPosition(1, 2, 1, 2)
-    border-radius: 0.25em
-    border: 1px solid $cFeedInputBorder
+    border-radius: 0.5em
     padding: 0.125em
     resize: none
   #attach
     @include gridPosition(1, 2, 2, 3)
   #submit
     @include gridPosition(1, 2, 3, 4)
+  button
+    background-color: $cFeedChooserBackground
+    color: $cFontWhite
+    border: none
+    border-radius: 0.5em
+  button:hover
+    background-color: lighten($cFeedChooserBackground, 10%)
+    cursor: pointer
     
 #completeFeed
   @include gridPosition(2, 3, 1, 2)
   display: grid
   grid-template: 5% 95% /100%
-  background-color: $cFeedBackground
+  background-color: $cFontWhite
 
   #feedchooser
     @include gridPosition(1, 2, 1, 2)
@@ -35,6 +42,7 @@
       border: none
       font-size: 1.5em
       color: $cFontWhite
+      border-radius: 0.5em
     button:hover
       background-color: lighten($cFeedChooserBackground, 10%)
       cursor: pointer
diff --git a/src/app/components/feed/feed.component.ts b/src/app/components/feed/feed.component.ts
index 681817a..a328a76 100644
--- a/src/app/components/feed/feed.component.ts
+++ b/src/app/components/feed/feed.component.ts
@@ -12,30 +12,25 @@ export class FeedComponent implements OnInit {
   viewNew: boolean = true
   viewMostLiked: boolean = false
 
-  feedNew: Array<Post>/* = [
-    new Post("1", "Niklas", "@nick123", "This is a test message", "01.10.2019 10:00 Uhr", 10),
-    new Post("2", "Niklas", "@nick123", "This is a test message", "01.10.2019 10:00 Uhr", 10),
-    new Post("3", "Niklas", "@nick123", "This is a test message", "01.10.2019 10:00 Uhr", 10),
-    new Post("4", "Niklas", "@nick123", "This is a test message", "01.10.2019 10:00 Uhr", 10),
-    new Post("5", "Niklas", "@nick123", "This is a test message", "01.10.2019 10:00 Uhr", 10),
-    new Post("6", "Niklas", "@nick123", "This is a test message", "01.10.2019 10:00 Uhr", 10),
-    new Post("7", "Niklas", "@nick123", "This is a test message", "01.10.2019 10:00 Uhr", 10)
-  ]*/
-  feedMostLiked: Array<Post>/* = [
-    new Post("1", "Max", "@max123", "This is a test message", "01.10.2019 10:00 Uhr", 50),
-    new Post("2", "Max", "@max123", "This is a test message", "01.10.2019 10:00 Uhr", 50),
-    new Post("3", "Max", "@max123", "This is a test message", "01.10.2019 10:00 Uhr", 50),
-    new Post("4", "Max", "@max123", "This is a test message", "01.10.2019 10:00 Uhr", 50),
-    new Post("5", "Max", "@max123", "This is a test message", "01.10.2019 10:00 Uhr", 50)
-  ]*/
-
-  parentSelectedPostList: Array<Post> = this.feedNew
+  feedNew: Array<Post>
+  feedMostLiked: Array<Post>
+
+  parentSelectedPostList: Array<Post>
 
   constructor(private feedService: FeedService) { }
 
   ngOnInit() {
-    this.feedNew = this.feedService.getAllPosts()
-    this.feedMostLiked = this.feedService.getAllPosts()
+    this.feedService.getAllPostsRaw().subscribe(response => {
+      this.feedNew = this.feedService.renderAllPosts(response.json())
+      console.log(response)
+      this.parentSelectedPostList = this.feedNew
+      this.feedMostLiked = this.feedNew
+    })
+  }
+
+  createPost(pContent: string){
+    this.feedService.createPost(pContent)
+    console.log(pContent)
   }
 
   showNew() {
diff --git a/src/app/components/feed/postlist/postlist.component.ts b/src/app/components/feed/postlist/postlist.component.ts
index d95d5dd..3489d9c 100644
--- a/src/app/components/feed/postlist/postlist.component.ts
+++ b/src/app/components/feed/postlist/postlist.component.ts
@@ -18,12 +18,12 @@ export class PostlistComponent implements OnInit {
   }
 
   voteUp(pPost: Post){
-    this.feedService.voteUp(pPost.id)
+    this.feedService.upvote(pPost.id)
     console.log("UPVOTE", pPost.id)
   }
 
   voteDown(pPost: Post){
-    this.feedService.voteDown(pPost.id)
+    this.feedService.downvote(pPost.id)
   }
 
 }
diff --git a/src/app/components/home/home.component.html b/src/app/components/home/home.component.html
index 8027381..4128e78 100644
--- a/src/app/components/home/home.component.html
+++ b/src/app/components/home/home.component.html
@@ -1,5 +1,5 @@
 <div id="content">
-    <home-chatmanager id="chatcontainer"></home-chatmanager>
+    <home-chatmanager id="chatcontainer" *ngIf="loggedIn"></home-chatmanager>
     <home-feed id="feedcontainer"></home-feed>
-    <home-social id="socialcontainer"></home-social>
+    <home-social id="socialcontainer" *ngIf="loggedIn"></home-social>
 </div>
\ No newline at end of file
diff --git a/src/app/components/home/home.component.sass b/src/app/components/home/home.component.sass
index b0d77dd..62e1983 100644
--- a/src/app/components/home/home.component.sass
+++ b/src/app/components/home/home.component.sass
@@ -6,6 +6,7 @@
   display: grid
   min-height: 100vh
   max-height: 100vh
+  background-color: $cFontWhite
 
 #chatcontainer
   @include gridPosition(1, 3, 1, 2)
@@ -15,7 +16,7 @@
   @include gridPosition(1, 3, 2, 3)
   display: grid
   grid-template: 10% 90% /100%
-  background-color: $cSecondaryBackground
+  background-color: $cFontWhite
 
 #socialcontainer
   @include gridPosition(1, 3, 3, 4)
diff --git a/src/app/components/home/home.component.ts b/src/app/components/home/home.component.ts
index e80493b..fed6aed 100644
--- a/src/app/components/home/home.component.ts
+++ b/src/app/components/home/home.component.ts
@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { DatasharingService } from 'src/app/services/datasharing.service';
+import { FeedService } from 'src/app/services/feed/feed.service';
 
 @Component({
   selector: 'app-home',
@@ -7,9 +9,15 @@ import { Component, OnInit } from '@angular/core';
 })
 export class HomeComponent implements OnInit {
 
-  constructor() { }
+  loggedIn: boolean
+
+  constructor(private data: DatasharingService, private feedService: FeedService) { }
 
   ngOnInit() {
+    this.data.currentUserInfo.subscribe(user => {
+      this.loggedIn = user.loggedIn;
+    })
+    this.feedService.getAllPosts()
   }
 
 }
diff --git a/src/app/components/login/login.component.ts b/src/app/components/login/login.component.ts
index 75fbb95..cc49235 100644
--- a/src/app/components/login/login.component.ts
+++ b/src/app/components/login/login.component.ts
@@ -33,6 +33,8 @@ export class LoginComponent implements OnInit {
     const md5 = new Md5();
     this.login.passwordHash = md5.appendStr(pPasswordHash).end() as string
 
+    console.log(this.login.passwordHash)
+
     this.loginService.login(this.login, error => this.loginError(error.json()));
   }
 
diff --git a/src/app/components/social/friends/friends.component.html b/src/app/components/social/friends/friends.component.html
index f3e92ff..447637d 100644
--- a/src/app/components/social/friends/friends.component.html
+++ b/src/app/components/social/friends/friends.component.html
@@ -4,7 +4,9 @@
   <button id="invitations" type="submit"><span><i class="fa fa-envelope-o fa-3x" aria-hidden="true"></i></span></button>
 </div>
 <div id="friendslist">
-    <div class="frienditem" *ngFor="let friend of friends"> 
-      <div class="friendname">{{friend}}</div>
+    <div class="frienditem" *ngFor="let friend of friends"
+    [class.selected]="friend === selectedFriend" (click)="showFriendProfile(friend)"> 
+      <div class="picture">Pic</div>
+      <div class="name"><span>{{friend.name}}</span></div>
     </div>
 </div>
diff --git a/src/app/components/social/friends/friends.component.sass b/src/app/components/social/friends/friends.component.sass
index 140dee3..f8c7775 100644
--- a/src/app/components/social/friends/friends.component.sass
+++ b/src/app/components/social/friends/friends.component.sass
@@ -5,20 +5,28 @@
 #friendslist
   overflow: auto
   @include gridPosition(2, 3, 1, 2)
+  div:hover
+    background-color: darken($cPrimaryBackground, 10%)
+    cursor: pointer
   .frienditem
     background-color: $cPrimaryBackground
     height: 3em
     margin: 0.2em
     padding: 0.25em
     border-radius: 0.25em
-    border: solid
-    display: flex;
-    .friendname
+    //border: solid
+    display: grid
+    grid-template: 100% / 20% 60% 20%
+    .picture
+      @include gridPosition(1, 2, 1, 2)
+      border: solid
+    .name, .date
+      margin-top: auto
+      margin-bottom: auto
+    .name
+      @include gridPosition(1, 2, 2, 3)
       font-weight: bold
       text-align: left
-      border: solid
-      width: 60%
-      padding-left: 1em
-      margin: auto
+      padding-left: 0.5em
       span
         font-size: 125%
\ No newline at end of file
diff --git a/src/app/components/social/friends/friends.component.ts b/src/app/components/social/friends/friends.component.ts
index 154df3a..4c4bc27 100644
--- a/src/app/components/social/friends/friends.component.ts
+++ b/src/app/components/social/friends/friends.component.ts
@@ -1,4 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+import { DatasharingService } from 'src/app/services/datasharing.service';
+import { Http } from '@angular/http';
+import { FriendInfo } from 'src/app/models/friendinfo';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'social-friends',
@@ -6,10 +10,47 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./friends.component.sass']
 })
 export class FriendsComponent implements OnInit {
-  friends: Array<String> = ["Friend 1", "Friend 2", "Friend 3", "Friend 4", "Friend 5", "Friend 6"]
-  constructor() { }
+
+  friendIDs: number[] = [1,2,3,4,5,6]
+  friends = new Array<FriendInfo>() //= ["Friend 1", "Friend 2", "Friend 3", "Friend 4", "Friend 5", "Friend 6"]
+
+  constructor(private data: DatasharingService, private http: Http, private router: Router) { }
 
   ngOnInit() {
+    //this.data.currentUserInfo.subscribe(user => {
+    //  this.friendIDs = user.friendIDs})
+    this.getFriendsNames()
+  }
+
+  getFriendsNames() {
+    for(let id of this.friendIDs) {
+      let url = 'https://greenvironment.net/graphql'
+      let headers = new Headers();
+      headers.set('Content-Type', 'application/json');
+  
+      this.http.post(url, this.buildJson(id))
+        .subscribe(response => {this.readOutFriendsNames(id, response.json())})
+      }
+  }
+
+  readOutFriendsNames(pId: number, pResponse : any) {
+    this.friends.push(new FriendInfo(pId, pResponse.data.getUser.name))
+  }
+
+  buildJson(pId: number): any {
+    const body =  {query: `query($userId: ID) {
+      getUser(userId:$userId) {
+        name
+      }
+    }`, variables: {
+        userId: pId 
+      }}
+
+    return body
+  }
+
+  public showFriendProfile(pFriend: FriendInfo){
+    this.router.navigate(['profile/' + pFriend.id])
   }
 
 }
diff --git a/src/app/components/social/groups/groups.component.html b/src/app/components/social/groups/groups.component.html
index 6164f35..7b9f1e0 100644
--- a/src/app/components/social/groups/groups.component.html
+++ b/src/app/components/social/groups/groups.component.html
@@ -4,7 +4,9 @@
     <button id="invitations" type="submit"><span><i class="fa fa-envelope-o fa-3x" aria-hidden="true"></i></span></button>
 </div>
 <div id="groupslist">
-    <div class="groupitem" *ngFor="let group of groups"> 
-      <div class="groupname">{{group}}</div>
+    <div class="groupitem" *ngFor="let group of groups"
+    [class.selected]="group === selectedGroup" (click)="showGroup(group)"> 
+      <div class="picture">Pic</div>
+      <div class="name"><span>{{group.name}}</span></div>
     </div>
 </div>
diff --git a/src/app/components/social/groups/groups.component.sass b/src/app/components/social/groups/groups.component.sass
index 8530af3..c835ebb 100644
--- a/src/app/components/social/groups/groups.component.sass
+++ b/src/app/components/social/groups/groups.component.sass
@@ -5,20 +5,28 @@
 #groupslist
   overflow: auto
   @include gridPosition(2, 3, 1, 2)
+  div:hover
+    background-color: darken($cPrimaryBackground, 10%)
+    cursor: pointer
   .groupitem
     background-color: $cPrimaryBackground
     height: 3em
     margin: 0.2em
     padding: 0.25em
     border-radius: 0.25em
-    border: solid
-    display: flex;
-    .groupname
+    //border: solid
+    display: grid
+    grid-template: 100% / 20% 60% 20%
+    .picture
+      @include gridPosition(1, 2, 1, 2)
+      border: solid
+    .name, .date
+      margin-top: auto
+      margin-bottom: auto
+    .name
+      @include gridPosition(1, 2, 2, 3)
       font-weight: bold
       text-align: left
-      border: solid
-      width: 60%
-      padding-left: 1em
-      margin: auto
+      padding-left: 0.5em
       span
         font-size: 125%
\ No newline at end of file
diff --git a/src/app/components/social/groups/groups.component.ts b/src/app/components/social/groups/groups.component.ts
index 5e7f8f2..cb7b7f6 100644
--- a/src/app/components/social/groups/groups.component.ts
+++ b/src/app/components/social/groups/groups.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { GroupInfo } from 'src/app/models/groupinfo';
 
 @Component({
   selector: 'social-groups',
@@ -6,7 +7,7 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./groups.component.sass']
 })
 export class GroupsComponent implements OnInit {
-  groups: Array<String> = ["Group 1", "Group 2", "Group 3", "Group 4", "Group 5", "Group 6"]
+  groups: Array<GroupInfo> = [new GroupInfo(1,"Group 1",[]), new GroupInfo(1,"Group 2",[]), new GroupInfo(1,"Group 3",[]), new GroupInfo(1,"Group 4",[])]
   constructor() { }
 
   ngOnInit() {
diff --git a/src/app/models/groupinfo.ts b/src/app/models/groupinfo.ts
new file mode 100644
index 0000000..43e5a28
--- /dev/null
+++ b/src/app/models/groupinfo.ts
@@ -0,0 +1,11 @@
+export class GroupInfo {
+    id: number
+    name: string
+    members: number[]
+
+    constructor(pId: number, pName: string, pMembers: number[]) {
+        this.id = pId
+        this.name = pName
+        this.members = pMembers
+    }
+}
\ No newline at end of file
diff --git a/src/app/services/chat/chat.service.ts b/src/app/services/chat/chat.service.ts
index 55cde5d..dded0b4 100644
--- a/src/app/services/chat/chat.service.ts
+++ b/src/app/services/chat/chat.service.ts
@@ -4,6 +4,7 @@ import { Chat } from 'src/app/models/chat';
 import { responsePathAsArray } from 'graphql';
 import { Chatmessage } from 'src/app/models/chatmessage';
 import { FriendInfo } from 'src/app/models/friendinfo';
+import { DatasharingService } from '../datasharing.service';
 
 @Injectable({
   providedIn: 'root'
@@ -12,11 +13,15 @@ export class ChatService {
 
   arr: number[]
   ownID: number
-  chats: Array<Chat>
+  chats: Array<Chat> = []
 
-  constructor(private http: Http) { }
+  constructor(private http: Http, private data: DatasharingService) {
+    this.data.currentUserInfo.subscribe(user => {
+      this.ownID = user.userID})
+   }
 
   public getAllChats(): Array<Chat> {
+    console.log("Getting all chats ..")
     let url = 'https://greenvironment.net/graphql'
  
     let headers = new Headers()
@@ -29,6 +34,24 @@ export class ChatService {
     return this.chats
   }
 
+  public getChatsByID(pChatIDs: number[]): Array<Chat> {
+    this.chats = []
+    console.log("Getting chats by ID..")
+
+    for(let chatId of pChatIDs) {
+      let url = 'https://greenvironment.net/graphql'
+  
+      let headers = new Headers()
+      headers.set('Content-Type', 'application/json')
+
+      this.http.post(url, this.getBodyForGetChatsByID(chatId))
+      .subscribe(response => {
+        this.updateChat(response.json())
+      })
+    }
+    return this.chats
+  }
+
   public createNewChat(pUserID: number) {
     let url = 'https://greenvironment.net/graphql'
  
@@ -72,11 +95,38 @@ export class ChatService {
     let headers = new Headers()
     headers.set('Content-Type', 'application/json')
  
-    this.http.post(url, this.getBodyForSendMessage(pChatID, pContent))
+    this.http.post(url, this.getBodyForSendMessage(pChatID, pContent)).subscribe(response => console.log("Message sent"))
+  }
+
+  public getMessages(pChatID): Array<Chatmessage> {
+    let messages: Array<Chatmessage>
+    let url = 'https://greenvironment.net/graphql'
+ 
+    let headers = new Headers()
+    headers.set('Content-Type', 'application/json')
+ 
+    this.http.post(url, this.getBodyForGetMessagesInChat(pChatID)).subscribe(response => 
+      {
+        console.log("Downloading messages ...")
+        messages = this.updateMessages(response.json())
+      })
+    return messages
+  }
+
+  updateMessages(pResponse: any): Array<Chatmessage> {
+    let messages = new Array<Chatmessage>()
+      for(let message of pResponse.data.getChat.messages) {
+        if(message.author.id == this.ownID) {
+          messages.push(new Chatmessage(message.content, message.createdAt, true))
+        } else {
+          messages.push(new Chatmessage(message.content, message.createdAt, false))
+        }
+      }
+    return messages
   }
 
   updateAllChats(pResponse: any): Array<Chat> {
-    let chats: Array<Chat>
+    let chats = Array<Chat>()
     for(let chat of pResponse.data.getSelf.chats) {
       let memberID: number
       let memberName: string
@@ -86,7 +136,7 @@ export class ChatService {
           memberName = member.name
         }
       }
-      let messages: Array<Chatmessage>
+      let messages = new Array<Chatmessage>()
       for(let message of chat.messages) {
         if(message.author.id == this.ownID) {
           messages.push(new Chatmessage(message.content, message.createdAt, true))
@@ -99,6 +149,27 @@ export class ChatService {
     return chats
   }
 
+  updateChat(pResponse: any) {
+    let id = pResponse.data.getChat.id
+    let memberId : number
+    let memberName: string
+    for(let member of pResponse.data.getChat.members) {
+      if(member.id != this.ownID) {
+        memberId = member.id
+        memberName = member.name
+      }
+    }
+    let messages = new Array<Chatmessage>()
+    for(let message of pResponse.data.getChat.messages) {
+      if(message.author.id == this.ownID) {
+        messages.push(new Chatmessage(message.content, message.createdAt, true))
+      } else {
+        messages.push(new Chatmessage(message.content, message.createdAt, false))
+      }
+    }
+    this.chats.push(new Chat(id, memberId, memberName, messages))
+  }
+
   getBodyForNewChat(pUserID: number) {
     this.arr = [pUserID]
     const body =  {query: `mutation($userID: number[]) {
@@ -133,11 +204,34 @@ export class ChatService {
 
   getBodyForGetAllChats() {
     const body =  {query: `query {
-        getSelf {
+        getUser {
           chats(first: 1000, offset: 0) {id, members{name, id}, 
           messages(first: 1000, offset: 0) {author {id}, createdAt, content}}
         }
       }`
       }
+    return body
+  }
+
+  getBodyForGetChatsByID(pChatID: number) {
+    const body =  {query: `query($chatID: ID!) {
+        getChat(chatId: $chatID) {id, members{name, id}, 
+          messages(first: 1000, offset: 0) {author {id}, createdAt, content}}
+        }
+      }`, variables: {
+          chatId: pChatID
+      }}
+    return body
+  }
+
+  getBodyForGetMessagesInChat(pChatID: number) {
+    const body =  {query: `query($chatID: ID!) {
+        getChat(chatId: $chatID) {
+          messages(first: 1000, offset: 0) {author {id}, createdAt, content}
+        }
+      }`, variables: {
+          chatId: pChatID
+      }}
+    return body
   }
 }
diff --git a/src/app/services/feed/feed.service.ts b/src/app/services/feed/feed.service.ts
index 6c6181f..7031e0f 100644
--- a/src/app/services/feed/feed.service.ts
+++ b/src/app/services/feed/feed.service.ts
@@ -12,34 +12,66 @@ export class FeedService {
 
   constructor(private http: Http) { }
 
-  public voteUp(pPostID: number): void {
+  public createPost(pContent: String){
     let url = 'https://greenvironment.net/graphql'
  
     let headers = new Headers()
     headers.set('Content-Type', 'application/json')
 
-    const body = {query: `mutation($postId: number) {
+    const body = {query: `mutation($content: String!) {
+        createPost(content: $content) {id}
+      }`, variables: {
+          content: pContent
+      }}
+ 
+    this.http.post(url, body).subscribe(response => {
+        console.log(response.text())})
+  }
+
+  public createPost2(pContent: String){
+    let url = 'https://greenvironment.net/graphql'
+ 
+    let headers = new Headers()
+    headers.set('Content-Type', 'application/json')
+
+    const body = {query: `query{
+        getSelf {name}
+      }`}
+ 
+    this.http.post(url, body).subscribe(response => {
+        console.log(response.text())})
+  }
+
+  public upvote(pPostID: number): void {
+    let url = 'https://greenvironment.net/graphql'
+ 
+    let headers = new Headers()
+    headers.set('Content-Type', 'application/json')
+
+    const body = {query: `mutation($postId: ID!) {
         vote(postId: $postId, type: UPVOTE)
       }`, variables: {
           postId: pPostID
       }}
  
-    this.http.post(url, body)
+    this.http.post(url, body).subscribe(response => {
+        console.log(response.text())})
   }
 
-  public voteDown(pPostID: number): void {
+  public downvote(pPostID: number): void {
     let url = 'https://greenvironment.net/graphql'
  
     let headers = new Headers()
     headers.set('Content-Type', 'application/json')
 
-    const body = {query: `mutation($postId: number) {
+    const body = {query: `mutation($postId: ID!) {
         vote(postId: $postId, type: DOWNVOTE)
       }`, variables: {
           postId: pPostID
       }}
  
-    this.http.post(url, body)
+    this.http.post(url, body).subscribe(response => {
+        console.log(response.text())})
   }
 
   public getAllPosts(): Array<Post> {
@@ -51,10 +83,20 @@ export class FeedService {
     this.http.post(url, this.getBodyForGetAllChats())
     .subscribe(response => {
         this.posts = this.renderAllPosts(response.json())
+        console.log(response)
       });
     return this.posts
   }
 
+  public getAllPostsRaw(): any {
+    let url = 'https://greenvironment.net/graphql'
+ 
+    let headers = new Headers()
+    headers.set('Content-Type', 'application/json')
+ 
+    return this.http.post(url, this.getBodyForGetAllChats())
+  }
+
   getBodyForGetAllChats() {
     const body =  {query: `query {
         getPosts (first: 1000, offset: 0) {id, content, upvotes, downvotes, author{name, handle, id}, createdAt}
@@ -64,7 +106,7 @@ export class FeedService {
       return body
   }
 
-  renderAllPosts(pResponse: any): Array<Post> {
+  public renderAllPosts(pResponse: any): Array<Post> {
     let posts = new Array<Post>()
     for(let post of pResponse.data.getPosts) {
       let id: number = post.id
diff --git a/src/app/services/login/login.service.ts b/src/app/services/login/login.service.ts
index 8924676..a03fd8e 100644
--- a/src/app/services/login/login.service.ts
+++ b/src/app/services/login/login.service.ts
@@ -32,7 +32,7 @@ export class LoginService {
   public loginSuccess(){
     console.log('alles supi dupi');
     //do routing
-    this.router.navigateByUrl('');
+    this.router.navigateByUrl(''); 
   }
 
   public updateUserInfo(response : any){