diff --git a/.angular-cli.json b/.angular-cli.json
index 49dbe99..a15ae5f 100644
--- a/.angular-cli.json
+++ b/.angular-cli.json
@@ -20,7 +20,8 @@
       "prefix": "app",
       "styles": [
         "theme/variables.scss",
-        "styles.scss"
+        "styles.scss",
+        "../node_modules/font-awesome/scss/font-awesome.scss"
       ],
       "scripts": [],
       "environmentSource": "environments/environment.ts",
diff --git a/package.json b/package.json
index db6e1f8..499bbaf 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "core-js": "^2.4.1",
     "global": "^4.3.2",
     "graphql-tag": "^2.2.0",
+    "font-awesome": "^4.7.0",
     "ionic-angular": "^3.2.1",
     "ionicons": "^3.0.0",
     "moment": "^2.18.1",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 57dcc7b..af45f69 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -6,14 +6,15 @@ import { IonicApp, IonicModule } from 'ionic-angular';
 
 import { AppComponent } from './app.component';
 import { AppRouting } from './app.routing';
-import { LoginComponent } from './components/login/login.component';
-import { ChatComponent } from './components/chat/chat.component';
+import { LoginPageComponent } from './components/login-page/login-page.component';
+import { ChatPageComponent } from './components/chat-page/chat-page.component';
 import { AuthGuard } from './services/auth-guard.service';
 import { AuthenticationService } from './services/authentication.service';
 import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
-import { ChannelComponent } from './components/channel/channel.component';
+import { ChannelViewComponent } from './components/channel-view/channel-view.component';
 import { WelcomePageComponent } from './components/welcome-page/welcome-page.component';
 import { ChatMessageComponent } from './components/chat-message/chat-message.component';
+import { ChannelItemComponent } from './components/channel-item/channel-item.component';
 import { ApolloModule } from 'apollo-angular';
 import { getClient } from './graphql/client/apollo-client';
 import { GetChatDummyService } from './graphql/get-chat-dummy.service';
@@ -21,22 +22,24 @@ import { GetChatDummyService } from './graphql/get-chat-dummy.service';
 @NgModule({
   declarations: [
     AppComponent,
-    LoginComponent,
-    ChatComponent,
+    LoginPageComponent,
+    ChatPageComponent,
     PageNotFoundComponent,
-    ChannelComponent,
+    ChannelViewComponent,
     WelcomePageComponent,
     ChatMessageComponent,
+    ChannelItemComponent,
   ],
   imports: [
+    IonicModule.forRoot(AppComponent, { mode: 'md' }),
+    ApolloModule.forRoot(getClient),
     BrowserModule,
     FormsModule,
     HttpModule,
-    IonicModule.forRoot(AppComponent),
-    ApolloModule.forRoot(getClient),
     AppRouting,
   ],
   providers: [AuthGuard, AuthenticationService, GetChatDummyService],
   bootstrap: [IonicApp]
 })
-export class AppModule { }
+export class AppModule {
+}
diff --git a/src/app/app.routing.ts b/src/app/app.routing.ts
index 423b27b..170b9e4 100644
--- a/src/app/app.routing.ts
+++ b/src/app/app.routing.ts
@@ -1,19 +1,19 @@
 import { Routes, RouterModule } from '@angular/router';
 
 import { AuthGuard } from './services/auth-guard.service';
-import { LoginComponent } from './components/login/login.component';
-import { ChatComponent } from './components/chat/chat.component';
+import { LoginPageComponent } from './components/login-page/login-page.component';
+import { ChatPageComponent } from './components/chat-page/chat-page.component';
 import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
-import { ChannelComponent } from './components/channel/channel.component';
+import { ChannelViewComponent } from './components/channel-view/channel-view.component';
 import { WelcomePageComponent } from './components/welcome-page/welcome-page.component';
 
 const appRoutes: Routes = [
   {
-    path: 'chat', component: ChatComponent, canActivate: [AuthGuard], canActivateChild: [AuthGuard],
+    path: 'chat', component: ChatPageComponent, canActivate: [AuthGuard], canActivateChild: [AuthGuard],
     children: [
       {
         path: 'channel/:id',
-        component: ChannelComponent
+        component: ChannelViewComponent
       },
       {
         path: 'welcome-page',
@@ -26,7 +26,7 @@ const appRoutes: Routes = [
       }
     ]
   },
-  { path: 'login', component: LoginComponent },
+  { path: 'login', component: LoginPageComponent },
   { path: '', redirectTo: 'chat', pathMatch: 'full' },
   { path: '**', component: PageNotFoundComponent }
 ];
diff --git a/src/app/components/channel-item/channel-item.component.html b/src/app/components/channel-item/channel-item.component.html
new file mode 100644
index 0000000..7f12f5f
--- /dev/null
+++ b/src/app/components/channel-item/channel-item.component.html
@@ -0,0 +1,11 @@
+<div class="channel-item" (click)="gotoChannel(channel.title)">
+  <span class="channel-title">
+    <i class="channel-icon fa" [ngClass]="['fa-' + channelSymbol]" aria-hidden="true"></i>
+    <span>{{channel.title}}</span>
+  </span>
+  <span>
+    <i class="fa fa-eye-slash hide-channel-icon" aria-hidden="true" (click)="hideChannel()"></i>
+    <i class="fa fa-sign-out exit-channel-icon" aria-hidden="true" (click)="exitChannel()"></i>
+  </span>
+</div>
+
diff --git a/src/app/components/channel-item/channel-item.component.scss b/src/app/components/channel-item/channel-item.component.scss
new file mode 100644
index 0000000..c92e102
--- /dev/null
+++ b/src/app/components/channel-item/channel-item.component.scss
@@ -0,0 +1,38 @@
+.channel-item {
+  display: flex;
+  justify-content: space-between;
+  font-size: 15px;
+  padding: 5px 10px 5px 5px;
+}
+
+.channel-item:hover {
+  background-color: rgba(0,0,0,0.2);
+}
+
+.channel-icon {
+  color: rgba(255, 255, 255, 0.3);
+  font-size: 14px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 16px;
+  margin: 3px;
+}
+
+.channel-title {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.hide-channel-icon, .exit-channel-icon {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.3);
+  &:hover {
+    color: rgba(255, 255, 255, 0.6);
+  }
+}
+
+.hide-channel-icon {
+  margin-right: 10px;
+}
diff --git a/src/app/components/channel-item/channel-item.component.ts b/src/app/components/channel-item/channel-item.component.ts
new file mode 100644
index 0000000..89959bd
--- /dev/null
+++ b/src/app/components/channel-item/channel-item.component.ts
@@ -0,0 +1,42 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+@Component({
+  selector: 'channel-item',
+  templateUrl: './channel-item.component.html',
+  styleUrls: ['./channel-item.component.scss']
+})
+export class ChannelItemComponent implements OnInit {
+  @Input()
+  channel: any;
+  channelSymbol: string;
+
+
+  constructor(private router: Router, private route: ActivatedRoute) {
+  }
+
+  gotoChannel(channelId) {
+    this.router.navigate(['channel', channelId], { relativeTo: this.route });
+  }
+
+  ngOnInit(): void {
+    if (this.channel.direct) {
+      this.channelSymbol = 'at';
+    }
+    else if (this.channel.privateChannel) {
+      this.channelSymbol = 'lock';
+    }
+    else {
+      this.channelSymbol = 'hashtag';
+    }
+  }
+
+  exitChannel() {
+
+  }
+
+  hideChannel() {
+
+  }
+
+}
diff --git a/src/app/components/channel/channel.component.html b/src/app/components/channel-view/channel-view.component.html
similarity index 77%
rename from src/app/components/channel/channel.component.html
rename to src/app/components/channel-view/channel-view.component.html
index c7da56d..09b15ab 100644
--- a/src/app/components/channel/channel.component.html
+++ b/src/app/components/channel-view/channel-view.component.html
@@ -1,4 +1,7 @@
-<ion-header>
+<ion-header class="channel-view-header">
+  <button ion-item class="menu-button" menuToggle>
+    <ion-icon name="menu"></ion-icon>
+  </button>
   <ion-title># {{channel}}</ion-title>
 </ion-header>
 <ion-content #chatContent>
@@ -18,7 +21,7 @@
   <ion-row class="message-row">
     <ion-input #messageInput class="message-input" type="text" placeholder="Message"
                [(ngModel)]="model.message" (keyup.enter)="sendMessage()"></ion-input>
-    <button class="send-button" ion-item (click)="sendMessage()">
+    <button item-right class="send-button" ion-item (click)="sendMessage()">
       <ion-icon name="paper-plane"></ion-icon>
     </button>
   </ion-row>
diff --git a/src/app/components/channel-view/channel-view.component.scss b/src/app/components/channel-view/channel-view.component.scss
new file mode 100644
index 0000000..79a4f01
--- /dev/null
+++ b/src/app/components/channel-view/channel-view.component.scss
@@ -0,0 +1,25 @@
+.channel-view-header {
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.menu-button {
+  width: 48px;
+}
+
+.menu-button:hover{
+  background-color: rgb(200,200,200);
+}
+
+.message-row {
+  display: flex;
+}
+
+.message-input {
+
+}
+
+.send-button {
+  background: #f4f4f4;
+  width: 48px;
+}
diff --git a/src/app/components/channel/channel.component.ts b/src/app/components/channel-view/channel-view.component.ts
similarity index 91%
rename from src/app/components/channel/channel.component.ts
rename to src/app/components/channel-view/channel-view.component.ts
index e78f563..1f12d48 100644
--- a/src/app/components/channel/channel.component.ts
+++ b/src/app/components/channel-view/channel-view.component.ts
@@ -3,10 +3,10 @@ import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'channel',
-  templateUrl: './channel.component.html',
-  styleUrls: ['./channel.component.scss'],
+  templateUrl: './channel-view.component.html',
+  styleUrls: ['./channel-view.component.scss'],
 })
-export class ChannelComponent implements OnInit, OnDestroy {
+export class ChannelViewComponent implements OnInit, OnDestroy {
 
   @ViewChild('chatContent') chatContent: any;
   public channel;
diff --git a/src/app/components/channel/channel.component.scss b/src/app/components/channel/channel.component.scss
deleted file mode 100644
index 84df6a7..0000000
--- a/src/app/components/channel/channel.component.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.message-row {
-}
-
-.message-input {
-
-}
-
-.send-button {
-  background: #f4f4f4;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 50px;
-}
diff --git a/src/app/components/chat/chat.component.html b/src/app/components/chat-page/chat-page.component.html
similarity index 64%
rename from src/app/components/chat/chat.component.html
rename to src/app/components/chat-page/chat-page.component.html
index 5d7c2b1..d1f5dc9 100644
--- a/src/app/components/chat/chat.component.html
+++ b/src/app/components/chat-page/chat-page.component.html
@@ -4,7 +4,8 @@
   </ion-header>
   <ion-content class="home-menu-content">
     <ion-list no-lines no-padding>
-      <button ion-item class="menu-item" *ngFor="let channel of channels" (click)="gotoChannel(channel)">{{channel}}</button>
+      <!--<button ion-item class="menu-item" *ngFor="let channel of channels" (click)="gotoChannel(channel)">{{channel}}</button>-->
+      <channel-item class="menu-item" *ngFor="let channel of channels" [channel]="channel"></channel-item>
     </ion-list>
   </ion-content>
   <ion-footer class="home-menu-footer">
diff --git a/src/app/components/chat/chat.component.scss b/src/app/components/chat-page/chat-page.component.scss
similarity index 67%
rename from src/app/components/chat/chat.component.scss
rename to src/app/components/chat-page/chat-page.component.scss
index 5c5e782..b47603f 100644
--- a/src/app/components/chat/chat.component.scss
+++ b/src/app/components/chat-page/chat-page.component.scss
@@ -1,12 +1,17 @@
 .home-page{
   position: absolute;
   width:100%;
-  height: 100%
+  height: 100%;
+}
+
+.home-page.menu-content-open{
+  @media (min-width: 600px) {
+    width: calc(100% - 304px) !important;
+  }
 }
 
 .home-menu-content{
   background-color: #044b76;
-  //background-color: #13679a;
 }
 
 .home-menu-header{
diff --git a/src/app/components/chat/chat.component.ts b/src/app/components/chat-page/chat-page.component.ts
similarity index 58%
rename from src/app/components/chat/chat.component.ts
rename to src/app/components/chat-page/chat-page.component.ts
index f34c6ee..893e743 100644
--- a/src/app/components/chat/chat.component.ts
+++ b/src/app/components/chat-page/chat-page.component.ts
@@ -1,17 +1,21 @@
-import { AfterViewInit, Component, ViewEncapsulation } from '@angular/core';
+import { AfterViewInit, Component } from '@angular/core';
 import { MenuController } from 'ionic-angular';
 import { ActivatedRoute, Router } from '@angular/router';
 import { AuthenticationService } from '../../services/authentication.service';
 
 @Component({
   selector: 'chat',
-  templateUrl: './chat.component.html',
-  styleUrls: ['chat.component.scss'],
-  encapsulation: ViewEncapsulation.None
+  templateUrl: './chat-page.component.html',
+  styleUrls: ['chat-page.component.scss'],
 })
-export class ChatComponent implements AfterViewInit {
+export class ChatPageComponent implements AfterViewInit {
 
-  public channels = ['channel1', 'channel2', 'kentak', 'tomer'];
+  public channels = [
+    { title: 'channel1', privateChannel: true },
+    { title: 'channel2' },
+    { title: 'kentak', direct: true },
+    { title: 'tomer', direct: true }
+  ];
 
   constructor(private menuCtrl: MenuController,
               private router: Router,
@@ -23,10 +27,6 @@ export class ChatComponent implements AfterViewInit {
     this.menuCtrl.open();
   }
 
-  gotoChannel(channelId) {
-    this.router.navigate(['channel', channelId], { relativeTo: this.route });
-  }
-
   logout() {
     this.authenticationService.logout();
     this.router.navigate(['login']);
diff --git a/src/app/components/login/login.component.html b/src/app/components/login-page/login-page.component.html
similarity index 100%
rename from src/app/components/login/login.component.html
rename to src/app/components/login-page/login-page.component.html
diff --git a/src/app/components/login/login.component.scss b/src/app/components/login-page/login-page.component.scss
similarity index 84%
rename from src/app/components/login/login.component.scss
rename to src/app/components/login-page/login-page.component.scss
index 42743b5..f834048 100644
--- a/src/app/components/login/login.component.scss
+++ b/src/app/components/login-page/login-page.component.scss
@@ -20,5 +20,8 @@
 }
 
 .login-logo{
-  width: 50%;
+  width: 80%;
+  @media (min-width: 600px) {
+    width: 50%;
+  }
 }
diff --git a/src/app/components/login/login.component.ts b/src/app/components/login-page/login-page.component.ts
similarity index 88%
rename from src/app/components/login/login.component.ts
rename to src/app/components/login-page/login-page.component.ts
index dc8eef4..203841c 100644
--- a/src/app/components/login/login.component.ts
+++ b/src/app/components/login-page/login-page.component.ts
@@ -5,12 +5,12 @@ import { ToastController } from 'ionic-angular';
 import { GetChatDummyService } from '../../graphql/get-chat-dummy.service';
 
 @Component({
-  moduleId : module.id,
-  templateUrl : 'login.component.html',
-  styleUrls : ['login.component.scss']
+  moduleId: module.id,
+  templateUrl: 'login-page.component.html',
+  styleUrls: ['login-page.component.scss']
 })
 
-export class LoginComponent implements OnInit {
+export class LoginPageComponent implements OnInit {
   model: any = {};
   loading = false;
   returnUrl: string;
diff --git a/yarn.lock b/yarn.lock
index c5c1795..5f405c4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1917,6 +1917,10 @@ flatten@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
 
+font-awesome@^4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133"
+
 for-in@^0.1.3:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"