diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index f6e204b..ed9c5db 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -11,6 +11,14 @@ import { UserComponent } from './user/user.component';
 import { MessagesWithUserComponent } from './messages-with-user/messages-with-user.component';
 import { MapComponent } from './map/map.component';
 
+// welcome
+import { WelcomeComponent } from './welcome/welcome.component';
+import { WelcomeStartComponent } from './welcome/welcome-start/welcome-start.component';
+import { WelcomeTagsComponent } from './welcome/welcome-tags/welcome-tags.component';
+import { WelcomeInfoComponent } from './welcome/welcome-info/welcome-info.component';
+import { WelcomeLocationComponent } from './welcome/welcome-location/welcome-location.component';
+import { WelcomeFinishComponent } from './welcome/welcome-finish/welcome-finish.component';
+
 // user edit
 import { UserEditComponent } from './user-edit/user-edit.component';
 import { UserEditProfileComponent } from './user-edit/user-edit-profile/user-edit-profile.component';
@@ -75,7 +83,12 @@ import { TagResolver } from './tag/tag-resolver.service';
 import { ContactResolver } from './contact/contact-resolver.service';
 import { ThreadsResolver } from './messages/threads-resolver.service';
 import { MessagesResolver } from './messages-with-user/messages-resolver.service';
-import { TagsRelatedToMyTagsResolver, RandomTagsResolver, TagsRelatedToTagResolver } from './tags/tags-resolver.service';
+import {
+  PopularTagsResolver,
+  TagsRelatedToMyTagsResolver,
+  RandomTagsResolver,
+  TagsRelatedToTagResolver
+} from './tags/tags-resolver.service';
 import { PeopleWithMyTagsResolver, NewPeopleResolver, PeopleWithTagResolver } from './people/people-resolver.service';
 
 // services
@@ -353,6 +366,40 @@ const routes: Routes = [
       user: LoggedUserResolver
     }
   },
+  {
+    path: 'welcome',
+    component: WelcomeComponent,
+    canActivate: [AuthGuard],
+    resolve: {
+      user: LoggedUserResolver
+    },
+    children: [
+      {
+        path: '',
+        component: WelcomeStartComponent
+      },
+      {
+        path: '1',
+        component: WelcomeTagsComponent,
+        resolve: {
+          userTags: LoggedUserTagsResolver,
+          popularTags: PopularTagsResolver
+        }
+      },
+      {
+        path: '2',
+        component: WelcomeInfoComponent
+      },
+      {
+        path: '3',
+        component: WelcomeLocationComponent
+      },
+      {
+        path: 'done',
+        component: WelcomeFinishComponent
+      }
+    ]
+  },
   {
     path: '**',
     component: FofComponent
@@ -389,6 +436,7 @@ const routeWrapper: Routes = [
     TagsRelatedToMyTagsResolver,
     TagsRelatedToTagResolver,
     RandomTagsResolver,
+    PopularTagsResolver,
     PeopleWithMyTagsResolver,
     PeopleWithTagResolver,
     NewPeopleResolver,
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 1049e22..be03b65 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -110,6 +110,13 @@ import { CommentsComponent } from './comments/comments.component';
 import { CommentComponent } from './comments/comment/comment.component';
 import { CommentFormComponent } from './comments/comment-form/comment-form.component';
 import { TagRelatedIdeasComponent } from './tag/tag-related-ideas/tag-related-ideas.component';
+import { WelcomeComponent } from './welcome/welcome.component';
+import { WelcomeStartComponent } from './welcome/welcome-start/welcome-start.component';
+import { WelcomeTagsComponent } from './welcome/welcome-tags/welcome-tags.component';
+import { WelcomeInfoComponent } from './welcome/welcome-info/welcome-info.component';
+import { WelcomeLocationComponent } from './welcome/welcome-location/welcome-location.component';
+import { WelcomeFinishComponent } from './welcome/welcome-finish/welcome-finish.component';
+import { WelcomeNavigationComponent } from './welcome/welcome-navigation/welcome-navigation.component';
 
 @NgModule({
   declarations: [
@@ -197,7 +204,14 @@ import { TagRelatedIdeasComponent } from './tag/tag-related-ideas/tag-related-id
     CommentsComponent,
     CommentComponent,
     CommentFormComponent,
-    TagRelatedIdeasComponent
+    TagRelatedIdeasComponent,
+    WelcomeComponent,
+    WelcomeStartComponent,
+    WelcomeTagsComponent,
+    WelcomeInfoComponent,
+    WelcomeLocationComponent,
+    WelcomeFinishComponent,
+    WelcomeNavigationComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
index 89f15fc..3782377 100644
--- a/src/app/header/header.component.ts
+++ b/src/app/header/header.component.ts
@@ -64,6 +64,7 @@ export class HeaderComponent implements OnInit, OnDestroy {
      * Reloading avatar image
      */
     this.updateAvatarSubscription = this.headerControl.updateAvatar$.subscribe(() => {
+      if (!this.display) { return; }
       this.avatar.reload();
     });
   }
diff --git a/src/app/model.service.spec.ts b/src/app/model.service.spec.ts
index 6c935e1..198883f 100644
--- a/src/app/model.service.spec.ts
+++ b/src/app/model.service.spec.ts
@@ -68,10 +68,11 @@ describe('ModelService', () => {
 
       req.flush({ meta: {
         email: 'email@example.com',
-        token: 'aaaa.bbbb.cccc'
+        token: 'aaaa.bbbb.cccc',
+        isNewUser: false
       } });
       const response = await verifyEmailPromise;
-      expect(response).toEqual({ email: 'email@example.com', token: 'aaaa.bbbb.cccc' });
+      expect(response).toEqual({ email: 'email@example.com', token: 'aaaa.bbbb.cccc', isNewUser: false });
     }));
 
   });
@@ -156,6 +157,30 @@ describe('ModelService', () => {
     }));
   });
 
+  describe('findPopularTags(limit = 10)', () => {
+    it('should success', async(async () => {
+      const findPopularTagsPromise = service.findPopularTags(4);
+
+      const req = httpMock.expectOne(`${baseUrl}/tags?sort=-popularityByUses&page[offset]=0&page[limit]=4`);
+
+      expect(req.request.method).toEqual('GET');
+      expect(req.request.headers.get('content-type')).toEqual('application/vnd.api+json');
+      expect(req.request.headers.has('authorization')).toEqual(true);
+
+      req.flush({
+        data: [
+          { type: 'tags', id: 'tag3', attributes: { popularityByUses: 25 } },
+          { type: 'tags', id: 'tag4', attributes: { popularityByUses: 12 } },
+          { type: 'tags', id: 'tag6', attributes: { popularityByUses: 11 } },
+          { type: 'tags', id: 'tag0', attributes: { popularityByUses: 7 } }
+        ]
+      });
+
+      const response = await findPopularTagsPromise;
+      expect(response.length).toEqual(4);
+    }));
+  });
+
   describe('findNewUsers()', () => {
 
     it('should success', async(async () => {
diff --git a/src/app/model.service.ts b/src/app/model.service.ts
index 209e025..a0de917 100644
--- a/src/app/model.service.ts
+++ b/src/app/model.service.ts
@@ -86,7 +86,7 @@ export class ModelService {
       });
   }
 
-  async verifyEmail(username: string, code: string): Promise<{ email: string, token: string }> {
+  async verifyEmail(username: string, code: string): Promise<{ email: string, token: string, isNewUser: boolean }> {
 
     const body = {
       data: {
@@ -103,8 +103,8 @@ export class ModelService {
         .patch(`${this.baseUrl}/account`, body, { headers: this.notLoggedHeaders })
         .toPromise();
 
-      const { email, token } = response.meta;
-      return { email, token };
+      const { email, token, isNewUser } = response.meta;
+      return { email, token, isNewUser };
     } catch (e) {
       throw { status: e.status, message: 'todo error' };
     }
@@ -519,6 +519,19 @@ export class ModelService {
     return tags;
   }
 
+  public async findPopularTags(limit = 10): Promise<Tag[]> {
+    const headers = this.loggedHeaders;
+
+    const response: any = await this.http
+      .get(`${this.baseUrl}/tags?sort=-popularityByUses&page[offset]=0&page[limit]=${limit}`, { headers })
+      .toPromise();
+
+    const { data } = response;
+
+    const tags: Tag[] = data.map(tag => this.deserializeTag(tag));
+    return tags;
+  }
+
   public async readMessagesWith(username: string): Promise<Message[]> {
     const headers = this.loggedHeaders;
 
@@ -1070,7 +1083,13 @@ export class ModelService {
   }
 
   private deserializeTag(tagData: any): Tag {
-    return { tagname: tagData.id };
+    const tag: Tag = { tagname: tagData.id };
+
+    if (tagData.attributes && tagData.attributes.hasOwnProperty('popularityByUses')) {
+      tag.popularityByUses = tagData.attributes.popularityByUses;
+    }
+
+    return tag;
   }
 
   private deserializeUserTag(rawUserTag: any, included: any[]): UserTag {
diff --git a/src/app/shared/select-location/select-location.component.html b/src/app/shared/select-location/select-location.component.html
index 4c2c6af..7c49c0f 100644
--- a/src/app/shared/select-location/select-location.component.html
+++ b/src/app/shared/select-location/select-location.component.html
@@ -1,6 +1,7 @@
-<button [disabled]="disabled"
-  (click)="updateLocation()">Update My Location</button>
 <div class="edit-location-container">
+  <button [disabled]="disabled"
+    class="save-button"
+  (click)="updateLocation()">Update My Location</button>
   <div #locationContainer class="edit-location-map"></div>
   <div class="edit-location-overlay"></div>
 </div>
diff --git a/src/app/shared/select-location/select-location.component.scss b/src/app/shared/select-location/select-location.component.scss
index bfd801f..3d5f7d8 100644
--- a/src/app/shared/select-location/select-location.component.scss
+++ b/src/app/shared/select-location/select-location.component.scss
@@ -18,3 +18,10 @@
   background-repeat: no-repeat;
   z-index: 1000;
 }
+
+.save-button {
+  position: absolute;
+  z-index: 999; // above map but below header menu
+  top: 16px;
+  right: 16px;
+}
diff --git a/src/app/shared/tag-list/tag-list.component.html b/src/app/shared/tag-list/tag-list.component.html
index b51e41c..94b984a 100644
--- a/src/app/shared/tag-list/tag-list.component.html
+++ b/src/app/shared/tag-list/tag-list.component.html
@@ -1,4 +1,12 @@
-<ul>
+<ul *ngIf="!linksDisabled">
   <li *ngFor="let tag of tags"
-    [routerLink]="'/tag/' + tag.tagname">{{tag.tagname}}</li>
+    [routerLink]="'/tag/' + tag.tagname">{{tag.tagname}}
+    <span class="tag-popularity" *ngIf="tag.popularityByUses">{{tag.popularityByUses}}&times;</span>
+  </li>
+</ul>
+
+<ul *ngIf="linksDisabled">
+  <li *ngFor="let tag of tags" class="link-disabled">{{tag.tagname}}
+    <span class="tag-popularity" *ngIf="tag.popularityByUses">{{tag.popularityByUses}}&times;</span>
+  </li>
 </ul>
diff --git a/src/app/shared/tag-list/tag-list.component.scss b/src/app/shared/tag-list/tag-list.component.scss
index f72fc24..3a237ee 100644
--- a/src/app/shared/tag-list/tag-list.component.scss
+++ b/src/app/shared/tag-list/tag-list.component.scss
@@ -12,4 +12,12 @@ li {
   cursor: pointer;
   background-color: $accent;
   color: white;
+
+  &.link-disabled {
+    cursor: auto;
+  }
+}
+
+.tag-popularity {
+  font-size: small;
 }
diff --git a/src/app/shared/tag-list/tag-list.component.ts b/src/app/shared/tag-list/tag-list.component.ts
index ebbf00b..d2ed06b 100644
--- a/src/app/shared/tag-list/tag-list.component.ts
+++ b/src/app/shared/tag-list/tag-list.component.ts
@@ -11,6 +11,8 @@ export class TagListComponent implements OnInit {
 
   @Input() tags: Tag[] = [];
 
+  @Input() linksDisabled = false;
+
   constructor() { }
 
   ngOnInit() {
diff --git a/src/app/shared/types.ts b/src/app/shared/types.ts
index d7a4e01..6d41027 100644
--- a/src/app/shared/types.ts
+++ b/src/app/shared/types.ts
@@ -26,6 +26,7 @@ export class User {
 
 export class Tag {
   constructor(public tagname: string,
+              public popularityByUses?: number,
               public created?: number) {
 
     // TODO fix the creator
diff --git a/src/app/tags/tags-resolver.service.spec.ts b/src/app/tags/tags-resolver.service.spec.ts
index 443ab52..d075394 100644
--- a/src/app/tags/tags-resolver.service.spec.ts
+++ b/src/app/tags/tags-resolver.service.spec.ts
@@ -1,6 +1,10 @@
 import { TestBed, inject } from '@angular/core/testing';
 
-import { TagsRelatedToMyTagsResolver, RandomTagsResolver, TagsRelatedToTagResolver } from './tags-resolver.service';
+import {
+  PopularTagsResolver,
+  TagsRelatedToMyTagsResolver,
+  RandomTagsResolver,
+  TagsRelatedToTagResolver } from './tags-resolver.service';
 
 import { ModelService } from '../model.service';
 
@@ -22,6 +26,14 @@ class ModelStubService {
     ];
   }
 
+  public async findPopularTags(): Promise<Tag[]> {
+    return [
+      { tagname: 'tag1', popularityByUses: 21 },
+      { tagname: 'tag0', popularityByUses: 12 },
+      { tagname: 'tag2', popularityByUses: 2 }
+    ];
+  }
+
   public async findTagsByTags(tagsIn: Tag[]): Promise<Tag[]> {
 
     // the tags to choose from
@@ -86,6 +98,28 @@ describe('RandomTagsResolver', () => {
   }));
 });
 
+describe('PopularTagsResolver', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        PopularTagsResolver,
+        { provide: ModelService, useClass: ModelStubService }
+      ],
+    });
+  });
+
+  it('should be created', inject([PopularTagsResolver], (service: PopularTagsResolver) => {
+    expect(service).toBeTruthy();
+  }));
+
+  it('should resolve with some tags', inject([PopularTagsResolver], async (service: PopularTagsResolver) => {
+    expect(service).toBeTruthy();
+    const tags = await service.resolve();
+
+    expect(tags.length).toEqual(3);
+  }));
+});
+
 describe('TagsRelatedToTagResolver', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
diff --git a/src/app/tags/tags-resolver.service.ts b/src/app/tags/tags-resolver.service.ts
index 8923eaf..27e25d2 100644
--- a/src/app/tags/tags-resolver.service.ts
+++ b/src/app/tags/tags-resolver.service.ts
@@ -13,6 +13,16 @@ export class TagsRelatedToMyTagsResolver implements Resolve<Tag[]> {
   }
 }
 
+@Injectable()
+export class PopularTagsResolver implements Resolve<Tag[]> {
+
+  constructor(private model: ModelService) { }
+
+  async resolve(): Promise<Tag[]> {
+    return await this.model.findPopularTags();
+  }
+}
+
 @Injectable()
 export class RandomTagsResolver implements Resolve<Tag[]> {
 
diff --git a/src/app/verify-email-code/verify-email-code.component.spec.ts b/src/app/verify-email-code/verify-email-code.component.spec.ts
index 5309782..7cc2447 100644
--- a/src/app/verify-email-code/verify-email-code.component.spec.ts
+++ b/src/app/verify-email-code/verify-email-code.component.spec.ts
@@ -24,7 +24,13 @@ class AuthStubService {
 
 class ModelStubService {
   async verifyEmail(_username: string, _code: string) {
-    return { email: 'email@example.com', token: 'aaaa.bbbb.cccc' };
+    return { email: 'email@example.com', token: 'aaaa.bbbb.cccc', isNewUser: false };
+  }
+}
+
+class ModelStubService2 {
+  async verifyEmail(_username: string, _code: string) {
+    return { email: 'email@example.com', token: 'aaaa.bbbb.cccc', isNewUser: true };
   }
 }
 
@@ -140,6 +146,43 @@ describe('VerifyEmailCodeComponent', () => {
     }));
   });
 
+  describe('successful verification of new user', () => {
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        declarations: [ VerifyEmailCodeComponent ],
+        providers: [
+          { provide: AuthService, useClass: AuthStubService },
+          { provide: ActivatedRoute, useClass: ActivatedRouteStub },
+          HeaderControlService,
+          { provide: ModelService, useClass: ModelStubService2 },
+          NotificationsService,
+          { provide: Router, useClass: RouterStub }
+        ]
+      })
+      .compileComponents();
+    }));
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(VerifyEmailCodeComponent);
+      component = fixture.componentInstance;
+
+      const notify = fixture.debugElement.injector.get(NotificationsService);
+      notifyInfoSpy = spyOn(notify, 'info');
+      const router = fixture.debugElement.injector.get(Router);
+      navigateSpy = spyOn(router, 'navigate');
+
+      fixture.detectChanges();
+    });
+
+    it('redirect to /welcome', async(async () => {
+      await fixture.whenStable();
+
+      expect(navigateSpy.calls.count()).toEqual(1);
+      expect(navigateSpy.calls.argsFor(0)[0]).toEqual(['/welcome']);
+    }));
+
+  });
+
   describe('failed verification', () => {
     beforeEach(async(() => {
       TestBed.configureTestingModule({
diff --git a/src/app/verify-email-code/verify-email-code.component.ts b/src/app/verify-email-code/verify-email-code.component.ts
index c576543..449dbc5 100644
--- a/src/app/verify-email-code/verify-email-code.component.ts
+++ b/src/app/verify-email-code/verify-email-code.component.ts
@@ -64,14 +64,15 @@ export class VerifyEmailCodeComponent implements OnInit, OnDestroy {
 
     try {
       // perform the verification
-      const { email, token } = await this.model.verifyEmail(username, code);
+      const { email, token, isNewUser } = await this.model.verifyEmail(username, code);
       // on success
       // inform
       this.notify.info(`your email ${email} was successfully verified`);
       // TODO login, when we get jwt token
       this.auth.login(token);
       // redirect to /home
-      await this.router.navigate(['/']);
+      const redirectTarget = (isNewUser) ? '/welcome' : '/';
+      await this.router.navigate([redirectTarget]);
     } catch (e) {
       this.failed = true;
       // TODO better error reporting
diff --git a/src/app/welcome/welcome-finish/welcome-finish.component.html b/src/app/welcome/welcome-finish/welcome-finish.component.html
new file mode 100644
index 0000000..edbf7ac
--- /dev/null
+++ b/src/app/welcome/welcome-finish/welcome-finish.component.html
@@ -0,0 +1,5 @@
+<h1>You are all set</h1>
+
+<nav>
+  <a class="link-button" routerLink="/">Let's go!</a>
+</nav>
diff --git a/src/app/welcome/welcome-finish/welcome-finish.component.scss b/src/app/welcome/welcome-finish/welcome-finish.component.scss
new file mode 100644
index 0000000..3da5b12
--- /dev/null
+++ b/src/app/welcome/welcome-finish/welcome-finish.component.scss
@@ -0,0 +1,3 @@
+* {
+  text-align: center;
+}
diff --git a/src/app/welcome/welcome-finish/welcome-finish.component.spec.ts b/src/app/welcome/welcome-finish/welcome-finish.component.spec.ts
new file mode 100644
index 0000000..02f555f
--- /dev/null
+++ b/src/app/welcome/welcome-finish/welcome-finish.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WelcomeFinishComponent } from './welcome-finish.component';
+
+describe('WelcomeFinishComponent', () => {
+  let component: WelcomeFinishComponent;
+  let fixture: ComponentFixture<WelcomeFinishComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WelcomeFinishComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WelcomeFinishComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/welcome/welcome-finish/welcome-finish.component.ts b/src/app/welcome/welcome-finish/welcome-finish.component.ts
new file mode 100644
index 0000000..f074fdb
--- /dev/null
+++ b/src/app/welcome/welcome-finish/welcome-finish.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-welcome-finish',
+  templateUrl: './welcome-finish.component.html',
+  styleUrls: ['./welcome-finish.component.scss']
+})
+export class WelcomeFinishComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/welcome/welcome-info/welcome-info.component.html b/src/app/welcome/welcome-info/welcome-info.component.html
new file mode 100644
index 0000000..1dec325
--- /dev/null
+++ b/src/app/welcome/welcome-info/welcome-info.component.html
@@ -0,0 +1,9 @@
+<h1>Who are you?</h1>
+
+<section>
+  <p>Share some basics so others can get to know you.</p>
+</section>
+
+<app-user-edit-profile></app-user-edit-profile>
+
+<app-welcome-navigation [step]="2"></app-welcome-navigation>
diff --git a/src/app/welcome/welcome-info/welcome-info.component.scss b/src/app/welcome/welcome-info/welcome-info.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/welcome/welcome-info/welcome-info.component.spec.ts b/src/app/welcome/welcome-info/welcome-info.component.spec.ts
new file mode 100644
index 0000000..ae434d3
--- /dev/null
+++ b/src/app/welcome/welcome-info/welcome-info.component.spec.ts
@@ -0,0 +1,34 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Component } from '@angular/core';
+
+import { WelcomeInfoComponent } from './welcome-info.component';
+import { WelcomeNavigationStubComponent } from '../../../testing/welcome-navigation-stub';
+
+@Component({ selector: 'app-user-edit-profile', template: '' })
+class UserEditProfileStubComponent { }
+
+describe('WelcomeInfoComponent', () => {
+  let component: WelcomeInfoComponent;
+  let fixture: ComponentFixture<WelcomeInfoComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        UserEditProfileStubComponent,
+        WelcomeInfoComponent,
+        WelcomeNavigationStubComponent
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WelcomeInfoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/welcome/welcome-info/welcome-info.component.ts b/src/app/welcome/welcome-info/welcome-info.component.ts
new file mode 100644
index 0000000..627a8e9
--- /dev/null
+++ b/src/app/welcome/welcome-info/welcome-info.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-welcome-info',
+  templateUrl: './welcome-info.component.html',
+  styleUrls: ['./welcome-info.component.scss']
+})
+export class WelcomeInfoComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/welcome/welcome-location/welcome-location.component.html b/src/app/welcome/welcome-location/welcome-location.component.html
new file mode 100644
index 0000000..d69138f
--- /dev/null
+++ b/src/app/welcome/welcome-location/welcome-location.component.html
@@ -0,0 +1,9 @@
+<h1>Where are you?</h1>
+
+<section>
+  <p>You can find others on the map and others may find you.</p>
+</section>
+
+<app-user-edit-location></app-user-edit-location>
+
+<app-welcome-navigation [step]="3"></app-welcome-navigation>
diff --git a/src/app/welcome/welcome-location/welcome-location.component.scss b/src/app/welcome/welcome-location/welcome-location.component.scss
new file mode 100644
index 0000000..4839019
--- /dev/null
+++ b/src/app/welcome/welcome-location/welcome-location.component.scss
@@ -0,0 +1,7 @@
+* {
+  text-align: center;
+}
+
+section {
+  margin-bottom: 1em;
+}
diff --git a/src/app/welcome/welcome-location/welcome-location.component.spec.ts b/src/app/welcome/welcome-location/welcome-location.component.spec.ts
new file mode 100644
index 0000000..50f6e45
--- /dev/null
+++ b/src/app/welcome/welcome-location/welcome-location.component.spec.ts
@@ -0,0 +1,34 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Component } from '@angular/core';
+
+import { WelcomeLocationComponent } from './welcome-location.component';
+import { WelcomeNavigationStubComponent } from '../../../testing/welcome-navigation-stub';
+
+@Component({ selector: 'app-user-edit-location', template: '' })
+class UserEditLocationStubComponent { }
+
+describe('WelcomeLocationComponent', () => {
+  let component: WelcomeLocationComponent;
+  let fixture: ComponentFixture<WelcomeLocationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        UserEditLocationStubComponent,
+        WelcomeLocationComponent,
+        WelcomeNavigationStubComponent
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WelcomeLocationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/welcome/welcome-location/welcome-location.component.ts b/src/app/welcome/welcome-location/welcome-location.component.ts
new file mode 100644
index 0000000..bde3d30
--- /dev/null
+++ b/src/app/welcome/welcome-location/welcome-location.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-welcome-location',
+  templateUrl: './welcome-location.component.html',
+  styleUrls: ['./welcome-location.component.scss']
+})
+export class WelcomeLocationComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/welcome/welcome-navigation/welcome-navigation.component.html b/src/app/welcome/welcome-navigation/welcome-navigation.component.html
new file mode 100644
index 0000000..63cf775
--- /dev/null
+++ b/src/app/welcome/welcome-navigation/welcome-navigation.component.html
@@ -0,0 +1,9 @@
+<nav>
+  <div>
+    <a *ngIf="step > 1" class="link-button back-link" [routerLink]="'/welcome/'+(step-1)">Back</a>
+    <a class="link-button next-link" [ngClass]="(disabled) ? 'disabled' : ''" [routerLink]="'/welcome/'+nextStep">{{(step === steps) ? 'Finish' : 'Next'}}</a>
+  </div>
+  <div>
+    <a class="skip-link" [routerLink]="'/welcome/'+nextStep">skip</a>
+  </div>
+</nav>
diff --git a/src/app/welcome/welcome-navigation/welcome-navigation.component.scss b/src/app/welcome/welcome-navigation/welcome-navigation.component.scss
new file mode 100644
index 0000000..fe9891c
--- /dev/null
+++ b/src/app/welcome/welcome-navigation/welcome-navigation.component.scss
@@ -0,0 +1,11 @@
+* {
+  text-align: center;
+}
+
+.skip-link {
+  color: gray;
+}
+
+.link-button {
+  margin: 0.5em;
+}
diff --git a/src/app/welcome/welcome-navigation/welcome-navigation.component.spec.ts b/src/app/welcome/welcome-navigation/welcome-navigation.component.spec.ts
new file mode 100644
index 0000000..c863894
--- /dev/null
+++ b/src/app/welcome/welcome-navigation/welcome-navigation.component.spec.ts
@@ -0,0 +1,29 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { WelcomeNavigationComponent } from './welcome-navigation.component';
+
+describe('WelcomeNavigationComponent', () => {
+  let component: WelcomeNavigationComponent;
+  let fixture: ComponentFixture<WelcomeNavigationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WelcomeNavigationComponent ],
+      imports: [
+        RouterTestingModule
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WelcomeNavigationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/welcome/welcome-navigation/welcome-navigation.component.ts b/src/app/welcome/welcome-navigation/welcome-navigation.component.ts
new file mode 100644
index 0000000..a027aeb
--- /dev/null
+++ b/src/app/welcome/welcome-navigation/welcome-navigation.component.ts
@@ -0,0 +1,27 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-welcome-navigation',
+  templateUrl: './welcome-navigation.component.html',
+  styleUrls: ['./welcome-navigation.component.scss']
+})
+export class WelcomeNavigationComponent implements OnInit {
+
+  // current step in navigation
+  @Input() step: number;
+  // total steps in navigation
+  @Input() steps = 3;
+  // is the "next" button disabled
+  @Input() disabled = true;
+
+  public get nextStep(): string {
+    // is this the last step or not?
+    return (this.step < this.steps) ? String(this.step + 1) : 'done';
+  }
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/welcome/welcome-start/welcome-start.component.html b/src/app/welcome/welcome-start/welcome-start.component.html
new file mode 100644
index 0000000..3e07fb8
--- /dev/null
+++ b/src/app/welcome/welcome-start/welcome-start.component.html
@@ -0,0 +1,8 @@
+<img src="/static/img/fungi/clathrus_n.png" alt="Clathrus mushroom by Carl Linnae">
+
+<h1>Welcome, {{me.username}}</h1>
+
+<nav>
+  <a class="link-button" routerLink="/welcome/1">Let's start!</a>
+</nav>
+
diff --git a/src/app/welcome/welcome-start/welcome-start.component.scss b/src/app/welcome/welcome-start/welcome-start.component.scss
new file mode 100644
index 0000000..37c3df2
--- /dev/null
+++ b/src/app/welcome/welcome-start/welcome-start.component.scss
@@ -0,0 +1,17 @@
+* {
+  text-align: center;
+}
+
+h1 {
+  margin: 1em;
+}
+
+nav {
+  font-size: 1.2em;
+}
+
+img {
+  display: block;
+  margin: 0 auto;
+  width: 128px;
+}
diff --git a/src/app/welcome/welcome-start/welcome-start.component.spec.ts b/src/app/welcome/welcome-start/welcome-start.component.spec.ts
new file mode 100644
index 0000000..7f73bc5
--- /dev/null
+++ b/src/app/welcome/welcome-start/welcome-start.component.spec.ts
@@ -0,0 +1,31 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WelcomeStartComponent } from './welcome-start.component';
+import { AuthService } from '../../auth.service';
+
+class AuthStubService { }
+
+describe('WelcomeStartComponent', () => {
+  let component: WelcomeStartComponent;
+  let fixture: ComponentFixture<WelcomeStartComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WelcomeStartComponent ],
+      providers: [
+        { provide: AuthService, useClass: AuthStubService }
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WelcomeStartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/welcome/welcome-start/welcome-start.component.ts b/src/app/welcome/welcome-start/welcome-start.component.ts
new file mode 100644
index 0000000..9d3af1a
--- /dev/null
+++ b/src/app/welcome/welcome-start/welcome-start.component.ts
@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+
+import { AuthService } from '../../auth.service';
+import { User } from '../../shared/types';
+
+@Component({
+  selector: 'app-welcome-start',
+  templateUrl: './welcome-start.component.html',
+  styleUrls: ['./welcome-start.component.scss']
+})
+export class WelcomeStartComponent implements OnInit {
+
+  public me: User;
+
+  constructor(private auth: AuthService) { }
+
+  ngOnInit() {
+    this.me = { username: this.auth.username };
+  }
+
+}
diff --git a/src/app/welcome/welcome-tags/welcome-tags.component.html b/src/app/welcome/welcome-tags/welcome-tags.component.html
new file mode 100644
index 0000000..5558b53
--- /dev/null
+++ b/src/app/welcome/welcome-tags/welcome-tags.component.html
@@ -0,0 +1,14 @@
+<h1>What do you care about?</h1>
+
+<section>
+  <p>Choose your tags. They represent what you care about. Tags will help you connect with similar-minded people.</p>
+</section>
+
+<section>
+  <p>Here are a few popular tags to inspire you:</p>
+  <app-tag-list [tags]="popularTags" [linksDisabled]="true"></app-tag-list>
+</section>
+
+<app-user-edit-tags></app-user-edit-tags>
+
+<app-welcome-navigation [step]="1" [steps]="3" [disabled]="isNavigationDisabled"></app-welcome-navigation>
diff --git a/src/app/welcome/welcome-tags/welcome-tags.component.scss b/src/app/welcome/welcome-tags/welcome-tags.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/welcome/welcome-tags/welcome-tags.component.spec.ts b/src/app/welcome/welcome-tags/welcome-tags.component.spec.ts
new file mode 100644
index 0000000..921b3c1
--- /dev/null
+++ b/src/app/welcome/welcome-tags/welcome-tags.component.spec.ts
@@ -0,0 +1,50 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Component, Input } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Observable } from 'rxjs/Observable';
+
+import { WelcomeTagsComponent } from './welcome-tags.component';
+import { WelcomeNavigationStubComponent } from '../../../testing/welcome-navigation-stub';
+
+class ActivatedRouteStub {
+  data = Observable.of({ popularTags: [] });
+}
+
+@Component({ selector: 'app-tag-list', template: '' })
+class TagListStubComponent {
+  @Input() tags = [];
+  @Input() linksDisabled: boolean;
+}
+
+@Component({ selector: 'app-user-edit-tags', template: '' })
+class UserEditTagsStubComponent { }
+
+describe('WelcomeTagsComponent', () => {
+  let component: WelcomeTagsComponent;
+  let fixture: ComponentFixture<WelcomeTagsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        TagListStubComponent,
+        UserEditTagsStubComponent,
+        WelcomeNavigationStubComponent,
+        WelcomeTagsComponent
+      ],
+      providers: [
+        { provide: ActivatedRoute, useClass: ActivatedRouteStub }
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WelcomeTagsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/welcome/welcome-tags/welcome-tags.component.ts b/src/app/welcome/welcome-tags/welcome-tags.component.ts
new file mode 100644
index 0000000..f81d50b
--- /dev/null
+++ b/src/app/welcome/welcome-tags/welcome-tags.component.ts
@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import { Tag } from '../../shared/types';
+
+@Component({
+  selector: 'app-welcome-tags',
+  templateUrl: './welcome-tags.component.html',
+  styleUrls: ['./welcome-tags.component.scss']
+})
+export class WelcomeTagsComponent implements OnInit {
+
+  public popularTags: Tag[];
+
+  constructor(private route: ActivatedRoute) { }
+
+  ngOnInit() {
+    this.route.data
+      .subscribe(({ popularTags }: { popularTags: Tag[] }) => {
+        this.popularTags = popularTags;
+      });
+  }
+
+}
diff --git a/src/app/welcome/welcome.component.html b/src/app/welcome/welcome.component.html
new file mode 100644
index 0000000..0680b43
--- /dev/null
+++ b/src/app/welcome/welcome.component.html
@@ -0,0 +1 @@
+<router-outlet></router-outlet>
diff --git a/src/app/welcome/welcome.component.scss b/src/app/welcome/welcome.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/welcome/welcome.component.spec.ts b/src/app/welcome/welcome.component.spec.ts
new file mode 100644
index 0000000..d32e8c4
--- /dev/null
+++ b/src/app/welcome/welcome.component.spec.ts
@@ -0,0 +1,33 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { WelcomeComponent } from './welcome.component';
+import { HeaderControlService } from '../header-control.service';
+
+describe('WelcomeComponent', () => {
+  let component: WelcomeComponent;
+  let fixture: ComponentFixture<WelcomeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WelcomeComponent ],
+      imports: [
+        RouterTestingModule
+      ],
+      providers: [
+        HeaderControlService
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WelcomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/welcome/welcome.component.ts b/src/app/welcome/welcome.component.ts
new file mode 100644
index 0000000..72583cb
--- /dev/null
+++ b/src/app/welcome/welcome.component.ts
@@ -0,0 +1,22 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+
+import { HeaderControlService } from '../header-control.service';
+
+@Component({
+  selector: 'app-welcome',
+  templateUrl: './welcome.component.html',
+  styleUrls: ['./welcome.component.scss']
+})
+export class WelcomeComponent implements OnInit, OnDestroy {
+
+  constructor(private headerControl: HeaderControlService) { }
+
+  ngOnInit() {
+    this.headerControl.display(false);
+  }
+
+  ngOnDestroy() {
+    this.headerControl.display(true);
+  }
+
+}
diff --git a/src/static/index.css b/src/static/index.css
index d745810..4f95d84 100644
--- a/src/static/index.css
+++ b/src/static/index.css
@@ -1,7 +1,13 @@
 .loading-container {
+  height: 100%;
   text-align: center;
-  margin-top: 30px;
-  text-height: 50px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.loading-container img {
+  margin: 0 auto;
 }
 
 /** credits to https://martinwolf.org/blog/2015/01/pure-css-savingloading-dots-animation */
diff --git a/src/testing/welcome-navigation-stub.ts b/src/testing/welcome-navigation-stub.ts
new file mode 100644
index 0000000..6537419
--- /dev/null
+++ b/src/testing/welcome-navigation-stub.ts
@@ -0,0 +1,9 @@
+import { Component, Input } from '@angular/core';
+
+@Component({ selector: 'app-welcome-navigation', template: '' })
+export class WelcomeNavigationStubComponent {
+  @Input() step;
+  @Input() steps;
+  @Input() disabled;
+  constructor() { }
+}