diff --git a/src/app/app.component.html b/src/app/app.component.html
index b367d53f..5d8518e6 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -5,7 +5,7 @@
 </app-streams-main-display>-->
 
 <div id="display-zone">
-    <app-tutorial id="tutorial"></app-tutorial>
+    <app-tutorial id="tutorial" *ngIf="tutorialActive"></app-tutorial>
     <app-floating-column id="floating-column" *ngIf="floatingColumnActive"></app-floating-column>
     <router-outlet></router-outlet> 
 </div>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index d2d98276..12cf64ec 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,38 +1,48 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { ElectronService } from 'ngx-electron';
-import { NavigationService, LeftPanelType } from './services/navigation.service';
-import { Subscription } from 'rxjs';
-import { AccountWrapper } from './models/account.models';
+import { Subscription, Observable } from 'rxjs';
+import { Select } from '@ngxs/store';
+// import { ElectronService } from 'ngx-electron';
 
+import { NavigationService, LeftPanelType } from './services/navigation.service';
+import { StreamElement } from './states/streams.state';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.scss']
 })
-export class AppComponent implements OnInit, OnDestroy{
- 
-  title = 'app';
+export class AppComponent implements OnInit, OnDestroy {    
+    title = 'Sengi';
 
-  floatingColumnActive: boolean;
-  private columnEditorSub: Subscription;
+    floatingColumnActive: boolean;
+    tutorialActive: boolean;
+    private columnEditorSub: Subscription;
 
-  constructor(private readonly navigationService: NavigationService) {
-   
-  }
-  
-  ngOnInit(): void {
-    this.columnEditorSub = this.navigationService.activatedPanelSubject.subscribe((type: LeftPanelType) => {
-      if(type === LeftPanelType.Closed) {
-        this.floatingColumnActive = false;
-      } else {
-        this.floatingColumnActive = true;
-      }
-    });
-  }
+    @Select(state => state.streamsstatemodel.streams) streamElements$: Observable<StreamElement[]>;
+
+    constructor(private readonly navigationService: NavigationService) {
+    }
+
+    ngOnInit(): void {
+        this.streamElements$.subscribe((streams: StreamElement[]) => {
+            if(streams && streams.length === 0){
+                this.tutorialActive = true;
+            } else {
+                this.tutorialActive = false;
+            }
+        });
+
+        this.columnEditorSub = this.navigationService.activatedPanelSubject.subscribe((type: LeftPanelType) => {
+            if (type === LeftPanelType.Closed) {
+                this.floatingColumnActive = false;
+            } else {
+                this.floatingColumnActive = true;
+            }
+        });
+    }
+
+    ngOnDestroy(): void {
+        this.columnEditorSub.unsubscribe();
+    }
 
-  ngOnDestroy(): void {
-    this.columnEditorSub.unsubscribe();
-  }
-  
 }
diff --git a/src/app/components/left-side-bar/left-side-bar.component.html b/src/app/components/left-side-bar/left-side-bar.component.html
index f9bbc44c..310d3f50 100644
--- a/src/app/components/left-side-bar/left-side-bar.component.html
+++ b/src/app/components/left-side-bar/left-side-bar.component.html
@@ -1,8 +1,8 @@
 <div class="left-bar">
-    <a class="left-bar-button left-bar-button--status left-bar-link" href title="write new message" (click)="createNewStatus()">
+    <a class="left-bar-button left-bar-button--status left-bar-link" href title="write new message" (click)="createNewStatus()" *ngIf="hasAccounts">
         <ion-icon name="md-send"></ion-icon>
     </a>
-    <a class="left-bar-button left-bar-button--search left-bar-link" href title="search" (click)="openSearch()">
+    <a class="left-bar-button left-bar-button--search left-bar-link" href title="search" (click)="openSearch()" *ngIf="hasAccounts">
         <ion-icon name="md-search"></ion-icon>
     </a>
 
@@ -11,11 +11,11 @@
         </app-account-icon>
     </div>
 
-    <a class="left-bar-button left-bar-button--add  left-bar-link" href title="add new account" (click)="addNewAccount()">
+    <a class="left-bar-button left-bar-button--add left-bar-link" [ngClass]="{'no-accounts': hasAccounts === false }" href title="add new account" (click)="addNewAccount()">
         <ion-icon name="md-add"></ion-icon>
     </a>
 
-    <a class="left-bar-button left-bar-button--cog left-bar-link" href title="settings" (click)="openSettings()">
+    <a class="left-bar-button left-bar-button--cog left-bar-link" href title="settings" (click)="openSettings()" *ngIf="hasAccounts">
         <ion-icon name="md-cog"></ion-icon>
     </a>
 </div>
\ No newline at end of file
diff --git a/src/app/components/left-side-bar/left-side-bar.component.scss b/src/app/components/left-side-bar/left-side-bar.component.scss
index 052f750e..4bc39ed3 100644
--- a/src/app/components/left-side-bar/left-side-bar.component.scss
+++ b/src/app/components/left-side-bar/left-side-bar.component.scss
@@ -1,6 +1,7 @@
 @import "variables";
 $width-button: 50px;
 $height-button: 40px;
+
 .left-bar {
     width: $width-button;
     height: calc(100%);
@@ -62,3 +63,7 @@ $height-button: 40px;
     }
 }
 
+.no-accounts {
+    margin-top: 10px;
+    // color: cornflowerblue;   
+}
\ No newline at end of file
diff --git a/src/app/components/left-side-bar/left-side-bar.component.ts b/src/app/components/left-side-bar/left-side-bar.component.ts
index ad6c0163..9b7f2dc7 100644
--- a/src/app/components/left-side-bar/left-side-bar.component.ts
+++ b/src/app/components/left-side-bar/left-side-bar.component.ts
@@ -16,6 +16,7 @@ import { MastodonService } from "../../services/mastodon.service";
 })
 export class LeftSideBarComponent implements OnInit, OnDestroy {
     accounts: AccountWrapper[] = [];
+    hasAccounts: boolean;
     private accounts$: Observable<AccountInfo[]>;
 
     // private loadedAccounts: { [index: string]: AccountInfo } = {};
@@ -55,6 +56,8 @@ export class LeftSideBarComponent implements OnInit, OnDestroy {
                 for(let delAcc of deletedAccounts){
                     this.accounts = this.accounts.filter(x => x.info.id !== delAcc.info.id);
                 }
+
+                this.hasAccounts = this.accounts.length > 0;
             }
         });
     }
diff --git a/src/app/components/tutorial/tutorial.component.html b/src/app/components/tutorial/tutorial.component.html
index 864e5f1e..41292be0 100644
--- a/src/app/components/tutorial/tutorial.component.html
+++ b/src/app/components/tutorial/tutorial.component.html
@@ -1,10 +1,17 @@
 <!-- <div class="tutorial"> -->
-    <div class="add-account">
-        <div class="add-account__arrow"></div>
-        <h3 class="add-account__title">Welcome to Sengi!</h3> 
-        <p class="add-account__description"> 
-            Let's start, click the "+" button to add a new account.
-        </p>
-    </div>
-    <div class="open-account"></div>
+<div class="add-account" *ngIf="showAddAccount">
+    <div class="add-account__arrow"></div>
+    <h3 class="add-account__title">Welcome to Sengi!</h3>
+    <p class="add-account__description">
+        Let's start, click the "+" button to add a new account.
+    </p>
+</div>
+<div class="open-account" *ngIf="showOpenAccount">
+    <div class="open-account__arrow"></div>
+    <div class="open-account__mouse-icon"></div>
+    <h3 class="open-account__title">Nice!</h3>
+    <p class="open-account__description">
+        Now <span class="underline">left-click</span> on your avatar to open your account and be able to add some timelines!
+    </p>
+</div>
 <!-- </div> -->
\ No newline at end of file
diff --git a/src/app/components/tutorial/tutorial.component.scss b/src/app/components/tutorial/tutorial.component.scss
index b61779df..f6e3795e 100644
--- a/src/app/components/tutorial/tutorial.component.scss
+++ b/src/app/components/tutorial/tutorial.component.scss
@@ -15,6 +15,10 @@
 //     font-size: $default-font-size;
 // }
 
+.underline {
+    text-decoration: underline;    
+}
+
 
 .add-account{
     position: absolute;
@@ -39,7 +43,37 @@
         width: 200px;
         display: inline-block;
 
-        word-break: break-all;
+        //word-break: break-all;
+        white-space: normal;
+    }
+}
+
+
+.open-account{
+    position: absolute;
+
+    &__arrow {
+        position: relative;
+    }
+
+    &__title{
+        position: relative;
+        top: 30px;
+        left: 160px;
+        width: 50px;
+    }
+
+    &__description {
+        position: relative;
+        top: 40px;
+        left: 90px;
+
+        text-align: right;
+
+        width: 200px;
+        display: inline-block;
+
+        // word-break: break-all;
         white-space: normal;
     }
 }
\ No newline at end of file
diff --git a/src/app/components/tutorial/tutorial.component.ts b/src/app/components/tutorial/tutorial.component.ts
index 6d5e5ff5..b8fa998a 100644
--- a/src/app/components/tutorial/tutorial.component.ts
+++ b/src/app/components/tutorial/tutorial.component.ts
@@ -1,15 +1,62 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Select } from '@ngxs/store';
+import { Observable, Subscription } from 'rxjs';
+
+import { AccountInfo } from '../../states/accounts.state';
+import { StreamElement } from '../../states/streams.state';
 
 @Component({
-  selector: 'app-tutorial',
-  templateUrl: './tutorial.component.html',
-  styleUrls: ['./tutorial.component.scss']
+    selector: 'app-tutorial',
+    templateUrl: './tutorial.component.html',
+    styleUrls: ['./tutorial.component.scss']
 })
-export class TutorialComponent implements OnInit {
+export class TutorialComponent implements OnInit, OnDestroy {   
+    public showAddAccount: boolean;
+    public showOpenAccount: boolean;
 
-  constructor() { }
+    private hasAccounts: boolean;
+    private hasColumns: boolean;
 
-  ngOnInit() {
-  }
+    @Select(state => state.streamsstatemodel.streams) streamElements$: Observable<StreamElement[]>;
+    @Select(state => state.registeredaccounts.accounts) accounts$: Observable<AccountInfo[]>;
 
+    private accountsSub: Subscription;
+    private steamsSub: Subscription;
+
+    constructor() {
+    }
+
+    ngOnInit() {
+        this.accountsSub = this.accounts$.subscribe((accounts: AccountInfo[]) => {
+            if (accounts) {
+                if (accounts.length === 0) {
+                    this.showAddAccount = true;
+                    this.showOpenAccount = false;
+                } else {
+                    this.hasAccounts = true;
+                    this.showAddAccount = false;
+
+                    if (!this.hasColumns) {
+                        this.showOpenAccount = true;
+                    }
+                }
+            }
+        });
+
+        this.steamsSub = this.streamElements$.subscribe((streams: StreamElement[]) => {
+            if (streams) {
+                if (streams.length === 0 && this.hasAccounts) {
+                    this.showOpenAccount = true;
+                } else if(streams.length > 0 && this.hasAccounts){
+                    this.hasColumns = true;
+                    this.showOpenAccount = false;
+                }
+            }
+        });
+    }
+
+    ngOnDestroy(): void {
+        this.accountsSub.unsubscribe();
+        this.steamsSub.unsubscribe();
+    }
 }