62 files changed, 1463 insertions, 282 deletions
diff --git a/client/src/app/shared/actor/actor.model.ts b/client/src/app/shared/actor/actor.model.ts
index 811afb449..adecec1fc 100644
--- a/client/src/app/shared/actor/actor.model.ts
+++ b/client/src/app/shared/actor/actor.model.ts
@@ -16,7 +16,7 @@ export abstract class Actor implements ActorServer {
  avatarUrl: string
-  static GET_ACTOR_AVATAR_URL (actor: { avatar: Avatar }) {
+  static GET_ACTOR_AVATAR_URL (actor: { avatar?: { path: string } }) {
    const absoluteAPIUrl = getAbsoluteAPIUrl()
    if (actor && actor.avatar) return absoluteAPIUrl + actor.avatar.path
diff --git a/client/src/app/shared/buttons/action-dropdown.component.html b/client/src/app/shared/buttons/action-dropdown.component.html
index 90651f217..114b1d71f 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.html
+++ b/client/src/app/shared/buttons/action-dropdown.component.html
@@ -3,7 +3,7 @@
    class="action-button" [ngClass]="{ small: buttonSize === 'small', grey: theme === 'grey', orange: theme === 'orange' }"
    ngbDropdownToggle role="button"
  >
-    <span *ngIf="!label" class="icon icon-action"></span>
+    <my-global-icon *ngIf="!label" class="more-icon" iconName="more"></my-global-icon>
    <span *ngIf="label" class="dropdown-toggle">{{ label }}</span>
  </div>
diff --git a/client/src/app/shared/buttons/action-dropdown.component.scss b/client/src/app/shared/buttons/action-dropdown.component.scss
index a4fcceeee..985b2ca88 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.scss
+++ b/client/src/app/shared/buttons/action-dropdown.component.scss
@@ -24,14 +24,11 @@
  }
  &:hover, &:active, &:focus {
-    background-color: $grey-color;
+    background-color: $grey-background-color;
  }
-  .icon-action {
+  .more-icon {
-    @include icon(21px);
+    width: 21px;
-    background-image: url('../../../assets/images/video/more.svg');
-    top: -1px;
  }
  &.small {
diff --git a/client/src/app/shared/buttons/button.component.html b/client/src/app/shared/buttons/button.component.html
index 87a8daccf..b6df67102 100644
--- a/client/src/app/shared/buttons/button.component.html
+++ b/client/src/app/shared/buttons/button.component.html
@@ -1,4 +1,4 @@
 <span class="action-button" [ngClass]="className" [title]="getTitle()">
-  <span class="icon" [ngClass]="icon"></span>
+  <my-global-icon [iconName]="icon"></my-global-icon>
  <span class="button-label">{{ label }}</span>
 </span>
diff --git a/client/src/app/shared/buttons/button.component.scss b/client/src/app/shared/buttons/button.component.scss
index 168102f09..04199a2a9 100644
--- a/client/src/app/shared/buttons/button.component.scss
+++ b/client/src/app/shared/buttons/button.component.scss
@@ -3,41 +3,18 @@
 .action-button {
  @include peertube-button-link;
+  @include button-with-icon(21px, 0, -2px);
-  font-size: 15px;
  font-weight: $font-semibold;
-  color: #585858;
+  color: $grey-foreground-color;
-  background-color: #E5E5E5;
+  background-color: $grey-background-color;
  &:hover {
-    background-color: #EFEFEF;
+    background-color: $grey-background-hover-color;
  }
-  .icon {
+  my-global-icon {
-    @include icon(21px);
+    @include apply-svg-color($grey-foreground-color);
-    position: relative;
-    top: -2px;
-    &.icon-edit {
-      background-image: url('../../../assets/images/global/edit-grey.svg');
-    }
-    &.icon-delete-grey {
-      background-image: url('../../../assets/images/global/delete-grey.svg');
-    }
-    &.icon-im-with-her {
-      background-image: url('../../../assets/images/global/im-with-her.svg');
-    }
-    &.icon-tick {
-      background-image: url('../../../assets/images/global/tick.svg');
-    }
-    &.icon-cross {
-      background-image: url('../../../assets/images/global/cross.svg');
-    }
  }
 }
diff --git a/client/src/app/shared/buttons/button.component.ts b/client/src/app/shared/buttons/button.component.ts
index 1a1162f09..a91e9c7eb 100644
--- a/client/src/app/shared/buttons/button.component.ts
+++ b/client/src/app/shared/buttons/button.component.ts
@@ -1,4 +1,5 @@
 import { Component, Input } from '@angular/core'
+import { GlobalIconName } from '@app/shared/icons/global-icon.component'
 @Component({
  selector: 'my-button',
@@ -9,7 +10,7 @@ import { Component, Input } from '@angular/core'
 export class ButtonComponent {
  @Input() label = ''
  @Input() className: string = undefined
-  @Input() icon: string = undefined
+  @Input() icon: GlobalIconName = undefined
  @Input() title: string = undefined
  getTitle () {
diff --git a/client/src/app/shared/buttons/delete-button.component.html b/client/src/app/shared/buttons/delete-button.component.html
index 6c55d8104..4d12a84c0 100644
--- a/client/src/app/shared/buttons/delete-button.component.html
+++ b/client/src/app/shared/buttons/delete-button.component.html
@@ -1,5 +1,5 @@
 <span class="action-button action-button-delete" [title]="getTitle()" role="button">
-  <span class="icon icon-delete-grey"></span>
+  <my-global-icon iconName="delete"></my-global-icon>
  <span class="button-label" *ngIf="label">{{ label }}</span>
  <span class="button-label" i18n *ngIf="!label">Delete</span>
diff --git a/client/src/app/shared/buttons/edit-button.component.html b/client/src/app/shared/buttons/edit-button.component.html
index cecb780f3..da3addbae 100644
--- a/client/src/app/shared/buttons/edit-button.component.html
+++ b/client/src/app/shared/buttons/edit-button.component.html
@@ -1,5 +1,5 @@
 <a class="action-button action-button-edit" [routerLink]="routerLink" i18n-title title="Edit">
-  <span class="icon icon-edit"></span>
+  <my-global-icon iconName="edit"></my-global-icon>
  <span class="button-label" *ngIf="label">{{ label }}</span>
  <span i18n class="button-label" *ngIf="!label">Edit</span>
diff --git a/client/src/app/shared/confirm/confirm.component.html b/client/src/app/shared/confirm/confirm.component.html
new file mode 100644
index 000000000..65df1cd4d
--- /dev/null
+++ b/client/src/app/shared/confirm/confirm.component.html
@@ -0,0 +1,26 @@
+<ng-template #confirmModal let-close="close" let-dismiss="dismiss">
+  <div class="modal-header">
+    <h4 class="modal-title">{{ title }}</h4>
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="dismiss()"></my-global-icon>
+  </div>
+  <div class="modal-body" >
+    <div [innerHtml]="message"></div>
+    <div *ngIf="inputLabel && expectedInputValue" class="form-group">
+      <label for="confirmInput">{{ inputLabel }}</label>
+      <input type="text" id="confirmInput" name="confirmInput" [(ngModel)]="inputValue" />
+    </div>
+  </div>
+  <div class="modal-footer inputs">
+    <span i18n class="action-button action-button-cancel" (click)="dismiss()" role="button">Cancel</span>
+    <input
+      type="submit" [value]="confirmButtonText" class="action-button-submit" [disabled]="isConfirmationDisabled()"
+      (click)="close()"
+    >
+  </div>
+</ng-template>
diff --git a/client/src/app/shared/confirm/confirm.component.scss b/client/src/app/shared/confirm/confirm.component.scss
new file mode 100644
index 000000000..93dd7926b
--- /dev/null
+++ b/client/src/app/shared/confirm/confirm.component.scss
@@ -0,0 +1,17 @@
+@import '_variables';
+@import '_mixins';
+.button {
+  padding: 0 13px;
+}
+input[type=text] {
+  @include peertube-input-text(100%);
+  display: block;
+}
+.form-group {
+  margin: 20px 0;
+}
diff --git a/client/src/app/shared/confirm/confirm.component.ts b/client/src/app/shared/confirm/confirm.component.ts
new file mode 100644
index 000000000..63c163da6
--- /dev/null
+++ b/client/src/app/shared/confirm/confirm.component.ts
@@ -0,0 +1,68 @@
+import { Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core'
+import { ConfirmService } from '@app/core/confirm/confirm.service'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
+@Component({
+  selector: 'my-confirm',
+  templateUrl: './confirm.component.html',
+  styleUrls: [ './confirm.component.scss' ]
+})
+export class ConfirmComponent implements OnInit {
+  @ViewChild('confirmModal') confirmModal: ElementRef
+  title = ''
+  message = ''
+  expectedInputValue = ''
+  inputLabel = ''
+  inputValue = ''
+  confirmButtonText = ''
+  private openedModal: NgbModalRef
+  constructor (
+    private modalService: NgbModal,
+    private confirmService: ConfirmService,
+    private i18n: I18n
+  ) { }
+  ngOnInit () {
+    this.confirmService.showConfirm.subscribe(
+      ({ title, message, expectedInputValue, inputLabel, confirmButtonText }) => {
+        this.title = title
+        this.message = message
+        this.inputLabel = inputLabel
+        this.expectedInputValue = expectedInputValue
+        this.confirmButtonText = confirmButtonText || this.i18n('Confirm')
+        this.showModal()
+      }
+    )
+  }
+  @HostListener('document:keydown.enter')
+  confirm () {
+    if (this.openedModal) this.openedModal.close()
+  }
+  isConfirmationDisabled () {
+    // No input validation
+    if (!this.inputLabel || !this.expectedInputValue) return false
+    return this.expectedInputValue !== this.inputValue
+  }
+  showModal () {
+    this.inputValue = ''
+    this.openedModal = this.modalService.open(this.confirmModal)
+    this.openedModal.result
+        .then(() => this.confirmService.confirmResponse.next(true))
+        .catch(() => this.confirmService.confirmResponse.next(false))
+  }
+}
diff --git a/client/src/app/shared/forms/form-reactive.ts b/client/src/app/shared/forms/form-reactive.ts
index 0bb7d25e6..b9873af2c 100644
--- a/client/src/app/shared/forms/form-reactive.ts
+++ b/client/src/app/shared/forms/form-reactive.ts
@@ -1,11 +1,9 @@
 import { FormGroup } from '@angular/forms'
 import { BuildFormArgument, BuildFormDefaultValues, FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
-export type FormReactiveErrors = { [ id: string ]: string }
+export type FormReactiveErrors = { [ id: string ]: string | FormReactiveErrors }
 export type FormReactiveValidationMessages = {
-  [ id: string ]: {
+  [ id: string ]: { [ name: string ]: string } | FormReactiveValidationMessages
-    [ name: string ]: string
-  }
 }
 export abstract class FormReactive {
@@ -13,7 +11,7 @@ export abstract class FormReactive {
  protected formChanged = false
  form: FormGroup
-  formErrors: FormReactiveErrors
+  formErrors: any // To avoid casting in template because of string | FormReactiveErrors
  validationMessages: FormReactiveValidationMessages
  buildForm (obj: BuildFormArgument, defaultValues: BuildFormDefaultValues = {}) {
@@ -23,29 +21,49 @@ export abstract class FormReactive {
    this.formErrors = formErrors
    this.validationMessages = validationMessages
-    this.form.valueChanges.subscribe(() => this.onValueChanged(false))
+    this.form.valueChanges.subscribe(() => this.onValueChanged(this.form, this.formErrors, this.validationMessages, false))
+  }
+  protected forceCheck () {
+    return this.onValueChanged(this.form, this.formErrors, this.validationMessages, true)
+  }
+  protected check () {
+    return this.onValueChanged(this.form, this.formErrors, this.validationMessages, false)
  }
-  protected onValueChanged (forceCheck = false) {
+  private onValueChanged (
-    for (const field in this.formErrors) {
+    form: FormGroup,
+    formErrors: FormReactiveErrors,
+    validationMessages: FormReactiveValidationMessages,
+    forceCheck = false
+  ) {
+    for (const field of Object.keys(formErrors)) {
+      if (formErrors[field] && typeof formErrors[field] === 'object') {
+        this.onValueChanged(
+          form.controls[field] as FormGroup,
+          formErrors[field] as FormReactiveErrors,
+          validationMessages[field] as FormReactiveValidationMessages,
+          forceCheck
+        )
+        continue
+      }
      // clear previous error message (if any)
-      this.formErrors[ field ] = ''
+      formErrors[ field ] = ''
-      const control = this.form.get(field)
+      const control = form.get(field)
      if (control.dirty) this.formChanged = true
      // Don't care if dirty on force check
      const isDirty = control.dirty || forceCheck === true
      if (control && isDirty && !control.valid) {
-        const messages = this.validationMessages[ field ]
+        const messages = validationMessages[ field ]
        for (const key in control.errors) {
-          this.formErrors[ field ] += messages[ key ] + ' '
+          formErrors[ field ] += messages[ key ] + ' '
        }
      }
    }
  }
-  protected forceCheck () {
-    return this.onValueChanged(true)
-  }
 }
diff --git a/client/src/app/shared/forms/form-validators/form-validator.service.ts b/client/src/app/shared/forms/form-validators/form-validator.service.ts
index 19a8bef25..249fdf119 100644
--- a/client/src/app/shared/forms/form-validators/form-validator.service.ts
+++ b/client/src/app/shared/forms/form-validators/form-validator.service.ts
@@ -7,10 +7,10 @@ export type BuildFormValidator = {
  MESSAGES: { [ name: string ]: string }
 }
 export type BuildFormArgument = {
-  [ id: string ]: BuildFormValidator
+  [ id: string ]: BuildFormValidator | BuildFormArgument
 }
 export type BuildFormDefaultValues = {
-  [ name: string ]: string | string[]
+  [ name: string ]: string | string[] | BuildFormDefaultValues
 }
 @Injectable()
@@ -29,7 +29,16 @@ export class FormValidatorService {
      formErrors[name] = ''
      const field = obj[name]
-      if (field && field.MESSAGES) validationMessages[name] = field.MESSAGES
+      if (this.isRecursiveField(field)) {
+        const result = this.buildForm(field as BuildFormArgument, defaultValues[name] as BuildFormDefaultValues)
+        group[name] = result.form
+        formErrors[name] = result.formErrors
+        validationMessages[name] = result.validationMessages
+        continue
+      }
+      if (field && field.MESSAGES) validationMessages[name] = field.MESSAGES as { [ name: string ]: string }
      const defaultValue = defaultValues[name] || ''
@@ -52,13 +61,27 @@ export class FormValidatorService {
      formErrors[name] = ''
      const field = obj[name]
-      if (field && field.MESSAGES) validationMessages[name] = field.MESSAGES
+      if (this.isRecursiveField(field)) {
+        this.updateForm(
+          form[name],
+          formErrors[name] as FormReactiveErrors,
+          validationMessages[name] as FormReactiveValidationMessages,
+          obj[name] as BuildFormArgument,
+          defaultValues[name] as BuildFormDefaultValues
+        )
+        continue
+      }
+      if (field && field.MESSAGES) validationMessages[name] = field.MESSAGES as { [ name: string ]: string }
      const defaultValue = defaultValues[name] || ''
-      if (field && field.VALIDATORS) form.addControl(name, new FormControl(defaultValue, field.VALIDATORS))
+      if (field && field.VALIDATORS) form.addControl(name, new FormControl(defaultValue, field.VALIDATORS as ValidatorFn[]))
      else form.addControl(name, new FormControl(defaultValue))
    }
  }
+  private isRecursiveField (field: any) {
+    return field && typeof field === 'object' && !field.MESSAGES && !field.VALIDATORS
+  }
 }
diff --git a/client/src/app/shared/forms/form-validators/index.ts b/client/src/app/shared/forms/form-validators/index.ts
index 74e385b3d..fdcbedb71 100644
--- a/client/src/app/shared/forms/form-validators/index.ts
+++ b/client/src/app/shared/forms/form-validators/index.ts
@@ -1,6 +1,7 @@
 export * from './custom-config-validators.service'
 export * from './form-validator.service'
 export * from './host'
+export * from './instance-validators.service'
 export * from './login-validators.service'
 export * from './reset-password-validators.service'
 export * from './user-validators.service'
diff --git a/client/src/app/shared/forms/form-validators/instance-validators.service.ts b/client/src/app/shared/forms/form-validators/instance-validators.service.ts
new file mode 100644
index 000000000..5bb852858
--- /dev/null
+++ b/client/src/app/shared/forms/form-validators/instance-validators.service.ts
@@ -0,0 +1,48 @@
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { Validators } from '@angular/forms'
+import { BuildFormValidator } from '@app/shared'
+import { Injectable } from '@angular/core'
+@Injectable()
+export class InstanceValidatorsService {
+  readonly FROM_EMAIL: BuildFormValidator
+  readonly FROM_NAME: BuildFormValidator
+  readonly BODY: BuildFormValidator
+  constructor (private i18n: I18n) {
+    this.FROM_EMAIL = {
+      VALIDATORS: [ Validators.required, Validators.email ],
+      MESSAGES: {
+        'required': this.i18n('Email is required.'),
+        'email': this.i18n('Email must be valid.')
+      }
+    }
+    this.FROM_NAME = {
+      VALIDATORS: [
+        Validators.required,
+        Validators.minLength(1),
+        Validators.maxLength(120)
+      ],
+      MESSAGES: {
+        'required': this.i18n('Your name is required.'),
+        'minlength': this.i18n('Your name must be at least 1 character long.'),
+        'maxlength': this.i18n('Your name cannot be more than 120 characters long.')
+      }
+    }
+    this.BODY = {
+      VALIDATORS: [
+        Validators.required,
+        Validators.minLength(3),
+        Validators.maxLength(5000)
+      ],
+      MESSAGES: {
+        'required': this.i18n('A message is required.'),
+        'minlength': this.i18n('The message must be at least 3 characters long.'),
+        'maxlength': this.i18n('The message cannot be more than 5000 characters long.')
+      }
+    }
+  }
+}
diff --git a/client/src/app/shared/forms/form-validators/user-validators.service.ts b/client/src/app/shared/forms/form-validators/user-validators.service.ts
index d14fa4777..6589b2580 100644
--- a/client/src/app/shared/forms/form-validators/user-validators.service.ts
+++ b/client/src/app/shared/forms/form-validators/user-validators.service.ts
@@ -23,15 +23,15 @@ export class UserValidatorsService {
    this.USER_USERNAME = {
      VALIDATORS: [
        Validators.required,
-        Validators.minLength(3),
+        Validators.minLength(1),
-        Validators.maxLength(20),
+        Validators.maxLength(50),
-        Validators.pattern(/^[a-z0-9._]+$/)
+        Validators.pattern(/^[a-z0-9][a-z0-9._]*$/)
      ],
      MESSAGES: {
        'required': this.i18n('Username is required.'),
-        'minlength': this.i18n('Username must be at least 3 characters long.'),
+        'minlength': this.i18n('Username must be at least 1 character long.'),
-        'maxlength': this.i18n('Username cannot be more than 20 characters long.'),
+        'maxlength': this.i18n('Username cannot be more than 50 characters long.'),
-        'pattern': this.i18n('Username should be only lowercase alphanumeric characters.')
+        'pattern': this.i18n('Username should be lowercase alphanumeric; dots and underscores are allowed.')
      }
    }
@@ -88,13 +88,13 @@ export class UserValidatorsService {
    this.USER_DISPLAY_NAME = {
      VALIDATORS: [
        Validators.required,
-        Validators.minLength(3),
+        Validators.minLength(1),
-        Validators.maxLength(120)
+        Validators.maxLength(50)
      ],
      MESSAGES: {
        'required': this.i18n('Display name is required.'),
-        'minlength': this.i18n('Display name must be at least 3 characters long.'),
+        'minlength': this.i18n('Display name must be at least 1 character long.'),
-        'maxlength': this.i18n('Display name cannot be more than 120 characters long.')
+        'maxlength': this.i18n('Display name cannot be more than 50 characters long.')
      }
    }
diff --git a/client/src/app/shared/forms/form-validators/video-abuse-validators.service.ts b/client/src/app/shared/forms/form-validators/video-abuse-validators.service.ts
index 6e9806611..fcc966b84 100644
--- a/client/src/app/shared/forms/form-validators/video-abuse-validators.service.ts
+++ b/client/src/app/shared/forms/form-validators/video-abuse-validators.service.ts
@@ -10,20 +10,20 @@ export class VideoAbuseValidatorsService {
  constructor (private i18n: I18n) {
    this.VIDEO_ABUSE_REASON = {
-      VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(300) ],
+      VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(3000) ],
      MESSAGES: {
        'required': this.i18n('Report reason is required.'),
        'minlength': this.i18n('Report reason must be at least 2 characters long.'),
-        'maxlength': this.i18n('Report reason cannot be more than 300 characters long.')
+        'maxlength': this.i18n('Report reason cannot be more than 3000 characters long.')
      }
    }
    this.VIDEO_ABUSE_MODERATION_COMMENT = {
-      VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(300) ],
+      VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(3000) ],
      MESSAGES: {
        'required': this.i18n('Moderation comment is required.'),
        'minlength': this.i18n('Moderation comment must be at least 2 characters long.'),
-        'maxlength': this.i18n('Moderation comment cannot be more than 300 characters long.')
+        'maxlength': this.i18n('Moderation comment cannot be more than 3000 characters long.')
      }
    }
  }
diff --git a/client/src/app/shared/forms/form-validators/video-channel-validators.service.ts b/client/src/app/shared/forms/form-validators/video-channel-validators.service.ts
index f62ff65f7..1c519c10a 100644
--- a/client/src/app/shared/forms/form-validators/video-channel-validators.service.ts
+++ b/client/src/app/shared/forms/form-validators/video-channel-validators.service.ts
@@ -14,28 +14,28 @@ export class VideoChannelValidatorsService {
    this.VIDEO_CHANNEL_NAME = {
      VALIDATORS: [
        Validators.required,
-        Validators.minLength(3),
+        Validators.minLength(1),
-        Validators.maxLength(20),
+        Validators.maxLength(50),
-        Validators.pattern(/^[a-z0-9._]+$/)
+        Validators.pattern(/^[a-z0-9][a-z0-9._]*$/)
      ],
      MESSAGES: {
        'required': this.i18n('Name is required.'),
-        'minlength': this.i18n('Name must be at least 3 characters long.'),
+        'minlength': this.i18n('Name must be at least 1 character long.'),
-        'maxlength': this.i18n('Name cannot be more than 20 characters long.'),
+        'maxlength': this.i18n('Name cannot be more than 50 characters long.'),
-        'pattern': this.i18n('Name should be only lowercase alphanumeric characters.')
+        'pattern': this.i18n('Name should be lowercase alphanumeric; dots and underscores are allowed.')
      }
    }
    this.VIDEO_CHANNEL_DISPLAY_NAME = {
      VALIDATORS: [
        Validators.required,
-        Validators.minLength(3),
+        Validators.minLength(1),
-        Validators.maxLength(120)
+        Validators.maxLength(50)
      ],
      MESSAGES: {
        'required': i18n('Display name is required.'),
-        'minlength': i18n('Display name must be at least 3 characters long.'),
+        'minlength': i18n('Display name must be at least 1 character long.'),
-        'maxlength': i18n('Display name cannot be more than 120 characters long.')
+        'maxlength': i18n('Display name cannot be more than 50 characters long.')
      }
    }
diff --git a/client/src/app/shared/forms/markdown-textarea.component.ts b/client/src/app/shared/forms/markdown-textarea.component.ts
index b99169ed2..e87aca0d4 100644
--- a/client/src/app/shared/forms/markdown-textarea.component.ts
+++ b/client/src/app/shared/forms/markdown-textarea.component.ts
@@ -1,10 +1,10 @@
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
 import { Component, forwardRef, Input, OnInit } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
-import { MarkdownService } from '@app/videos/shared'
 import { Subject } from 'rxjs'
 import truncate from 'lodash-es/truncate'
 import { ScreenService } from '@app/shared/misc/screen.service'
+import { MarkdownService } from '@app/shared/renderer'
 @Component({
  selector: 'my-markdown-textarea',
diff --git a/client/src/app/shared/forms/peertube-checkbox.component.html b/client/src/app/shared/forms/peertube-checkbox.component.html
index fb3006b53..7b8bcf601 100644
--- a/client/src/app/shared/forms/peertube-checkbox.component.html
+++ b/client/src/app/shared/forms/peertube-checkbox.component.html
@@ -1,10 +1,10 @@
 <div class="root">
  <label class="form-group-checkbox">
-    <input type="checkbox" [(ngModel)]="checked" (ngModelChange)="onModelChange()" [id]="inputName" [disabled]="isDisabled" />
+    <input type="checkbox" [(ngModel)]="checked" (ngModelChange)="onModelChange()" [id]="inputName" [disabled]="disabled" />
    <span role="checkbox" [attr.aria-checked]="checked"></span>
    <span *ngIf="labelText">{{ labelText }}</span>
    <span *ngIf="labelHtml" [innerHTML]="labelHtml"></span>
  </label>
  <my-help *ngIf="helpHtml" tooltipPlacement="top" helpType="custom" i18n-customHtml [customHtml]="helpHtml"></my-help>
-</div>
-\ No newline at end of file
+</div>
diff --git a/client/src/app/shared/forms/peertube-checkbox.component.ts b/client/src/app/shared/forms/peertube-checkbox.component.ts
index bbc9904df..c1a6915e8 100644
--- a/client/src/app/shared/forms/peertube-checkbox.component.ts
+++ b/client/src/app/shared/forms/peertube-checkbox.component.ts
@@ -19,8 +19,7 @@ export class PeertubeCheckboxComponent implements ControlValueAccessor {
  @Input() labelText: string
  @Input() labelHtml: string
  @Input() helpHtml: string
+  @Input() disabled = false
-  isDisabled = false
  propagateChange = (_: any) => { /* empty */ }
@@ -41,6 +40,6 @@ export class PeertubeCheckboxComponent implements ControlValueAccessor {
  }
  setDisabledState (isDisabled: boolean) {
-    this.isDisabled = isDisabled
+    this.disabled = isDisabled
  }
 }
diff --git a/client/src/app/shared/forms/reactive-file.component.ts b/client/src/app/shared/forms/reactive-file.component.ts
index 8d22aa56c..f60c38e8d 100644
--- a/client/src/app/shared/forms/reactive-file.component.ts
+++ b/client/src/app/shared/forms/reactive-file.component.ts
@@ -1,6 +1,6 @@
 import { Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
-import { NotificationsService } from 'angular2-notifications'
+import { Notifier } from '@app/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 @Component({
@@ -30,7 +30,7 @@ export class ReactiveFileComponent implements OnInit, ControlValueAccessor {
  private file: File
  constructor (
-    private notificationsService: NotificationsService,
+    private notifier: Notifier,
    private i18n: I18n
  ) {}
@@ -49,7 +49,18 @@ export class ReactiveFileComponent implements OnInit, ControlValueAccessor {
      const [ file ] = event.target.files
      if (file.size > this.maxFileSize) {
-        this.notificationsService.error(this.i18n('Error'), this.i18n('This file is too large.'))
+        this.notifier.error(this.i18n('This file is too large.'))
+        return
+      }
+      const extension = '.' + file.name.split('.').pop()
+      if (this.extensions.includes(extension) === false) {
+        const message = this.i18n(
+          'PeerTube cannot handle this kind of file. Accepted extensions are {{extensions}}.',
+          { extensions: this.allowedExtensionsMessage }
+        )
+        this.notifier.error(message)
        return
      }
diff --git a/client/src/app/shared/icons/global-icon.component.html b/client/src/app/shared/icons/global-icon.component.html
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/client/src/app/shared/icons/global-icon.component.html
diff --git a/client/src/app/shared/icons/global-icon.component.scss b/client/src/app/shared/icons/global-icon.component.scss
new file mode 100644
index 000000000..6805fb6f7
--- /dev/null
+++ b/client/src/app/shared/icons/global-icon.component.scss
@@ -0,0 +1,4 @@
+/deep/ svg {
+  width: inherit;
+  height: inherit;
+}
diff --git a/client/src/app/shared/icons/global-icon.component.ts b/client/src/app/shared/icons/global-icon.component.ts
new file mode 100644
index 000000000..e8ada0324
--- /dev/null
+++ b/client/src/app/shared/icons/global-icon.component.ts
@@ -0,0 +1,48 @@
+import { Component, ElementRef, Input, OnInit } from '@angular/core'
+const icons = {
+  'add': require('../../../assets/images/global/add.html'),
+  'syndication': require('../../../assets/images/global/syndication.html'),
+  'help': require('../../../assets/images/global/help.html'),
+  'sparkle': require('../../../assets/images/global/sparkle.html'),
+  'alert': require('../../../assets/images/global/alert.html'),
+  'cloud-error': require('../../../assets/images/global/cloud-error.html'),
+  'user-add': require('../../../assets/images/global/user-add.html'),
+  'no': require('../../../assets/images/global/no.html'),
+  'cloud-download': require('../../../assets/images/global/cloud-download.html'),
+  'undo': require('../../../assets/images/global/undo.html'),
+  'circle-tick': require('../../../assets/images/global/circle-tick.html'),
+  'cog': require('../../../assets/images/global/cog.html'),
+  'download': require('../../../assets/images/global/download.html'),
+  'edit': require('../../../assets/images/global/edit.html'),
+  'im-with-her': require('../../../assets/images/global/im-with-her.html'),
+  'delete': require('../../../assets/images/global/delete.html'),
+  'cross': require('../../../assets/images/global/cross.html'),
+  'validate': require('../../../assets/images/global/validate.html'),
+  'tick': require('../../../assets/images/global/tick.html'),
+  'dislike': require('../../../assets/images/video/dislike.html'),
+  'heart': require('../../../assets/images/video/heart.html'),
+  'like': require('../../../assets/images/video/like.html'),
+  'more': require('../../../assets/images/video/more.html'),
+  'share': require('../../../assets/images/video/share.html'),
+  'upload': require('../../../assets/images/video/upload.html')
+}
+export type GlobalIconName = keyof typeof icons
+@Component({
+  selector: 'my-global-icon',
+  template: '',
+  styleUrls: [ './global-icon.component.scss' ]
+})
+export class GlobalIconComponent implements OnInit {
+  @Input() iconName: GlobalIconName
+  constructor (private el: ElementRef) {}
+  ngOnInit () {
+    const nativeElement = this.el.nativeElement
+    nativeElement.innerHTML = icons[this.iconName]
+  }
+}
diff --git a/client/src/app/shared/instance/instance.service.ts b/client/src/app/shared/instance/instance.service.ts
new file mode 100644
index 000000000..61321ecce
--- /dev/null
+++ b/client/src/app/shared/instance/instance.service.ts
@@ -0,0 +1,36 @@
+import { catchError } from 'rxjs/operators'
+import { HttpClient } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { environment } from '../../../environments/environment'
+import { RestExtractor, RestService } from '../rest'
+import { About } from '../../../../../shared/models/server'
+@Injectable()
+export class InstanceService {
+  private static BASE_CONFIG_URL = environment.apiUrl + '/api/v1/config'
+  private static BASE_SERVER_URL = environment.apiUrl + '/api/v1/server'
+  constructor (
+    private authHttp: HttpClient,
+    private restService: RestService,
+    private restExtractor: RestExtractor
+  ) {
+  }
+  getAbout () {
+    return this.authHttp.get<About>(InstanceService.BASE_CONFIG_URL + '/about')
+               .pipe(catchError(res => this.restExtractor.handleError(res)))
+  }
+  contactAdministrator (fromEmail: string, fromName: string, message: string) {
+    const body = {
+      fromEmail,
+      fromName,
+      body: message
+    }
+    return this.authHttp.post(InstanceService.BASE_SERVER_URL + '/contact', body)
+               .pipe(catchError(res => this.restExtractor.handleError(res)))
+  }
+}
diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.html b/client/src/app/shared/menu/top-menu-dropdown.component.html
new file mode 100644
index 000000000..d3c896019
--- /dev/null
+++ b/client/src/app/shared/menu/top-menu-dropdown.component.html
@@ -0,0 +1,21 @@
+<div class="sub-menu">
+  <ng-container *ngFor="let menuEntry of menuEntries">
+    <a *ngIf="menuEntry.routerLink" [routerLink]="menuEntry.routerLink" routerLinkActive="active" class="title-page">{{ menuEntry.label }}</a>
+    <div *ngIf="!menuEntry.routerLink" ngbDropdown class="parent-entry" #dropdown="ngbDropdown" (mouseleave)="closeDropdownIfHovered(dropdown)">
+      <span
+        (mouseenter)="openDropdownOnHover(dropdown)" [ngClass]="{ active: !!suffixLabels[menuEntry.label] }" ngbDropdownAnchor
+        (click)="dropdownAnchorClicked(dropdown)" role="button" class="title-page"
+      >
+        <ng-container i18n>{{ menuEntry.label }}</ng-container>
+        <ng-container *ngIf="!!suffixLabels[menuEntry.label]"> - {{ suffixLabels[menuEntry.label] }}</ng-container>
+      </span>
+      <div ngbDropdownMenu>
+        <a *ngFor="let menuChild of menuEntry.children" class="dropdown-item" [routerLink]="menuChild.routerLink">{{ menuChild.label }}</a>
+      </div>
+    </div>
+  </ng-container>
+</div>
diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.scss b/client/src/app/shared/menu/top-menu-dropdown.component.scss
new file mode 100644
index 000000000..77159532f
--- /dev/null
+++ b/client/src/app/shared/menu/top-menu-dropdown.component.scss
@@ -0,0 +1,18 @@
+.parent-entry {
+  span[role=button] {
+    cursor: pointer;
+  }
+  a {
+    display: block;
+  }
+}
+/deep/ .dropdown-toggle::after {
+  position: relative;
+  top: 2px;
+}
+/deep/ .dropdown-menu {
+  margin-top: 0 !important;
+}
diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.ts b/client/src/app/shared/menu/top-menu-dropdown.component.ts
new file mode 100644
index 000000000..e859c30dd
--- /dev/null
+++ b/client/src/app/shared/menu/top-menu-dropdown.component.ts
@@ -0,0 +1,83 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core'
+import { filter, take } from 'rxjs/operators'
+import { NavigationEnd, Router } from '@angular/router'
+import { Subscription } from 'rxjs'
+import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
+export type TopMenuDropdownParam = {
+  label: string
+  routerLink?: string
+  children?: {
+    label: string
+    routerLink: string
+  }[]
+}
+@Component({
+  selector: 'my-top-menu-dropdown',
+  templateUrl: './top-menu-dropdown.component.html',
+  styleUrls: [ './top-menu-dropdown.component.scss' ]
+})
+export class TopMenuDropdownComponent implements OnInit, OnDestroy {
+  @Input() menuEntries: TopMenuDropdownParam[] = []
+  suffixLabels: { [ parentLabel: string ]: string }
+  private openedOnHover = false
+  private routeSub: Subscription
+  constructor (private router: Router) {}
+  ngOnInit () {
+    this.updateChildLabels(window.location.pathname)
+    this.routeSub = this.router.events
+                        .pipe(filter(event => event instanceof NavigationEnd))
+                        .subscribe(() => this.updateChildLabels(window.location.pathname))
+  }
+  ngOnDestroy () {
+    if (this.routeSub) this.routeSub.unsubscribe()
+  }
+  openDropdownOnHover (dropdown: NgbDropdown) {
+    this.openedOnHover = true
+    dropdown.open()
+    // Menu was closed
+    dropdown.openChange
+            .pipe(take(1))
+            .subscribe(e => this.openedOnHover = false)
+  }
+  dropdownAnchorClicked (dropdown: NgbDropdown) {
+    if (this.openedOnHover) {
+      this.openedOnHover = false
+      return
+    }
+    return dropdown.toggle()
+  }
+  closeDropdownIfHovered (dropdown: NgbDropdown) {
+    if (this.openedOnHover === false) return
+    dropdown.close()
+    this.openedOnHover = false
+  }
+  private updateChildLabels (path: string) {
+    this.suffixLabels = {}
+    for (const entry of this.menuEntries) {
+      if (!entry.children) continue
+      for (const child of entry.children) {
+        if (path.startsWith(child.routerLink)) {
+          this.suffixLabels[entry.label] = child.label
+        }
+      }
+    }
+  }
+}
diff --git a/client/src/app/shared/misc/help.component.html b/client/src/app/shared/misc/help.component.html
index 28ccb1e26..444425c9f 100644
--- a/client/src/app/shared/misc/help.component.html
+++ b/client/src/app/shared/misc/help.component.html
@@ -18,10 +18,13 @@
  container="body"
  title="Get help"
  i18n-title
+  popoverClass="help-popover"
  [attr.aria-pressed]="isPopoverOpened"
  [ngbPopover]="tooltipTemplate"
  [placement]="tooltipPlacement"
  [autoClose]="true"
  (onHidden)="onPopoverHidden()"
  (onShown)="onPopoverShown()"
-></span>
+>
+  <my-global-icon iconName="help"></my-global-icon>
+</span>
diff --git a/client/src/app/shared/misc/help.component.scss b/client/src/app/shared/misc/help.component.scss
index 5c73a8031..3898f3cda 100644
--- a/client/src/app/shared/misc/help.component.scss
+++ b/client/src/app/shared/misc/help.component.scss
@@ -2,29 +2,40 @@
 @import '_mixins';
 .help-tooltip-button {
-  @include icon(17px);
+  cursor: pointer;
-  position: relative;
-  top: -2px;
-  background-image: url('../../../assets/images/global/help.svg');
  border: none;
-  margin: 5px;
+  my-global-icon {
+    width: 17px;
+    position: relative;
+    top: -2px;
+    margin: 5px;
+    @include apply-svg-color(var(--mainForegroundColor))
+  }
 }
 /deep/ {
-  .popover-body {
+  .help-popover {
-    text-align: left;
-    padding: 10px;
    max-width: 300px;
-    font-size: 13px;
+    .popover-body {
-    font-family: $main-fonts;
+      font-family: $main-fonts;
-    background-color: #fff;
+      text-align: left;
-    color: #000;
+      padding: 10px;
-    box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
+      font-size: 13px;
+      background-color: var(--mainBackgroundColor);
+      color: var(--mainForegroundColor);
+      box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
+      p {
+        margin-bottom: 0;
+      }
-    ul {
+      ul {
-      padding-left: 20px;
+        padding-left: 20px;
+        margin-bottom: 0;
+      }
    }
  }
 }
diff --git a/client/src/app/shared/misc/help.component.ts b/client/src/app/shared/misc/help.component.ts
index ba0452e77..f3426f70f 100644
--- a/client/src/app/shared/misc/help.component.ts
+++ b/client/src/app/shared/misc/help.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, OnChanges, OnInit } from '@angular/core'
-import { MarkdownService } from '@app/videos/shared'
 import { I18n } from '@ngx-translate/i18n-polyfill'
+import { MarkdownService } from '@app/shared/renderer'
 @Component({
  selector: 'my-help',
diff --git a/client/src/app/shared/misc/utils.ts b/client/src/app/shared/misc/utils.ts
index 78e8e9682..7cc6055c2 100644
--- a/client/src/app/shared/misc/utils.ts
+++ b/client/src/app/shared/misc/utils.ts
@@ -102,12 +102,18 @@ function objectToFormData (obj: any, form?: FormData, namespace?: string) {
  return fd
 }
-function lineFeedToHtml (obj: any, keyToNormalize: string) {
+function objectLineFeedToHtml (obj: any, keyToNormalize: string) {
  return immutableAssign(obj, {
-    [keyToNormalize]: obj[keyToNormalize].replace(/\r?\n|\r/g, '<br />')
+    [keyToNormalize]: lineFeedToHtml(obj[keyToNormalize])
  })
 }
+function lineFeedToHtml (text: string) {
+  if (!text) return text
+  return text.replace(/\r?\n|\r/g, '<br />')
+}
 function removeElementFromArray <T> (arr: T[], elem: T) {
  const index = arr.indexOf(elem)
  if (index !== -1) arr.splice(index, 1)
@@ -131,6 +137,7 @@ function scrollToTop () {
 export {
  sortBy,
  durationToString,
+  lineFeedToHtml,
  objectToUrlEncoded,
  getParameterByName,
  populateAsyncUserVideoChannels,
@@ -138,7 +145,7 @@ export {
  dateToHuman,
  immutableAssign,
  objectToFormData,
-  lineFeedToHtml,
+  objectLineFeedToHtml,
  removeElementFromArray,
  scrollToTop
 }
diff --git a/client/src/app/shared/moderation/user-ban-modal.component.html b/client/src/app/shared/moderation/user-ban-modal.component.html
index fa5cb7404..f38ea543d 100644
--- a/client/src/app/shared/moderation/user-ban-modal.component.html
+++ b/client/src/app/shared/moderation/user-ban-modal.component.html
@@ -1,7 +1,8 @@
 <ng-template #modal>
  <div class="modal-header">
    <h4 i18n class="modal-title">Ban</h4>
-    <span class="close" aria-hidden="true" (click)="hideBanUserModal()"></span>
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
  </div>
  <div class="modal-body">
@@ -19,7 +20,7 @@
      </div>
      <div class="form-group inputs">
-        <span i18n class="action-button action-button-cancel" (click)="hideBanUserModal()">Cancel</span>
+        <span i18n class="action-button action-button-cancel" (click)="hide()">Cancel</span>
        <input
          type="submit" i18n-value value="Ban this user" class="action-button-submit"
@@ -29,4 +30,4 @@
    </form>
  </div>
-</ng-template>
-\ No newline at end of file
+</ng-template>
diff --git a/client/src/app/shared/moderation/user-ban-modal.component.ts b/client/src/app/shared/moderation/user-ban-modal.component.ts
index 60bd442dd..942765301 100644
--- a/client/src/app/shared/moderation/user-ban-modal.component.ts
+++ b/client/src/app/shared/moderation/user-ban-modal.component.ts
@@ -1,5 +1,5 @@
 import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'
-import { NotificationsService } from 'angular2-notifications'
+import { Notifier } from '@app/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
@@ -23,7 +23,7 @@ export class UserBanModalComponent extends FormReactive implements OnInit {
  constructor (
    protected formValidatorService: FormValidatorService,
    private modalService: NgbModal,
-    private notificationsService: NotificationsService,
+    private notifier: Notifier,
    private userService: UserService,
    private userValidatorsService: UserValidatorsService,
    private i18n: I18n
@@ -42,7 +42,7 @@ export class UserBanModalComponent extends FormReactive implements OnInit {
    this.openedModal = this.modalService.open(this.modal)
  }
-  hideBanUserModal () {
+  hide () {
    this.usersToBan = undefined
    this.openedModal.close()
  }
@@ -57,13 +57,13 @@ export class UserBanModalComponent extends FormReactive implements OnInit {
            ? this.i18n('{{num}} users banned.', { num: this.usersToBan.length })
            : this.i18n('User {{username}} banned.', { username: this.usersToBan.username })
-          this.notificationsService.success(this.i18n('Success'), message)
+          this.notifier.success(message)
          this.userBanned.emit(this.usersToBan)
-          this.hideBanUserModal()
+          this.hide()
        },
-          err => this.notificationsService.error(this.i18n('Error'), err.message)
+          err => this.notifier.error(err.message)
      )
  }
diff --git a/client/src/app/shared/moderation/user-moderation-dropdown.component.ts b/client/src/app/shared/moderation/user-moderation-dropdown.component.ts
index d391246e0..9a2461ebf 100644
--- a/client/src/app/shared/moderation/user-moderation-dropdown.component.ts
+++ b/client/src/app/shared/moderation/user-moderation-dropdown.component.ts
@@ -1,10 +1,9 @@
 import { Component, EventEmitter, Input, OnChanges, Output, ViewChild } from '@angular/core'
-import { NotificationsService } from 'angular2-notifications'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { DropdownAction } from '@app/shared/buttons/action-dropdown.component'
 import { UserBanModalComponent } from '@app/shared/moderation/user-ban-modal.component'
 import { UserService } from '@app/shared/users'
-import { AuthService, ConfirmService, ServerService } from '@app/core'
+import { AuthService, ConfirmService, Notifier, ServerService } from '@app/core'
 import { User, UserRight } from '../../../../../shared/models/users'
 import { Account } from '@app/shared/account/account.model'
 import { BlocklistService } from '@app/shared/blocklist'
@@ -30,7 +29,7 @@ export class UserModerationDropdownComponent implements OnChanges {
  constructor (
    private authService: AuthService,
-    private notificationsService: NotificationsService,
+    private notifier: Notifier,
    private confirmService: ConfirmService,
    private serverService: ServerService,
    private userService: UserService,
@@ -48,7 +47,7 @@ export class UserModerationDropdownComponent implements OnChanges {
  openBanUserModal (user: User) {
    if (user.username === 'root') {
-      this.notificationsService.error(this.i18n('Error'), this.i18n('You cannot ban root.'))
+      this.notifier.error(this.i18n('You cannot ban root.'))
      return
    }
@@ -67,21 +66,18 @@ export class UserModerationDropdownComponent implements OnChanges {
    this.userService.unbanUsers(user)
        .subscribe(
          () => {
-            this.notificationsService.success(
+            this.notifier.success(this.i18n('User {{username}} unbanned.', { username: user.username }))
-              this.i18n('Success'),
-              this.i18n('User {{username}} unbanned.', { username: user.username })
-            )
            this.userChanged.emit()
          },
-          err => this.notificationsService.error(this.i18n('Error'), err.message)
+          err => this.notifier.error(err.message)
        )
  }
  async removeUser (user: User) {
    if (user.username === 'root') {
-      this.notificationsService.error(this.i18n('Error'), this.i18n('You cannot delete root.'))
+      this.notifier.error(this.i18n('You cannot delete root.'))
      return
    }
@@ -91,29 +87,23 @@ export class UserModerationDropdownComponent implements OnChanges {
    this.userService.removeUser(user).subscribe(
      () => {
-        this.notificationsService.success(
+        this.notifier.success(this.i18n('User {{username}} deleted.', { username: user.username }))
-          this.i18n('Success'),
-          this.i18n('User {{username}} deleted.', { username: user.username })
-        )
        this.userDeleted.emit()
      },
-      err => this.notificationsService.error(this.i18n('Error'), err.message)
+      err => this.notifier.error(err.message)
    )
  }
  setEmailAsVerified (user: User) {
    this.userService.updateUser(user.id, { emailVerified: true }).subscribe(
      () => {
-        this.notificationsService.success(
+        this.notifier.success(this.i18n('User {{username}} email set as verified', { username: user.username }))
-          this.i18n('Success'),
-          this.i18n('User {{username}} email set as verified', { username: user.username })
-        )
        this.userChanged.emit()
      },
-      err => this.notificationsService.error(this.i18n('Error'), err.message)
+      err => this.notifier.error(err.message)
    )
  }
@@ -121,16 +111,13 @@ export class UserModerationDropdownComponent implements OnChanges {
    this.blocklistService.blockAccountByUser(account)
        .subscribe(
          () => {
-            this.notificationsService.success(
+            this.notifier.success(this.i18n('Account {{nameWithHost}} muted.', { nameWithHost: account.nameWithHost }))
-              this.i18n('Success'),
-              this.i18n('Account {{nameWithHost}} muted.', { nameWithHost: account.nameWithHost })
-            )
            this.account.mutedByUser = true
            this.userChanged.emit()
          },
-          err => this.notificationsService.error(this.i18n('Error'), err.message)
+          err => this.notifier.error(err.message)
        )
  }
@@ -138,16 +125,13 @@ export class UserModerationDropdownComponent implements OnChanges {
    this.blocklistService.unblockAccountByUser(account)
        .subscribe(
          () => {
-            this.notificationsService.success(
+            this.notifier.success(this.i18n('Account {{nameWithHost}} unmuted.', { nameWithHost: account.nameWithHost }))
-              this.i18n('Success'),
-              this.i18n('Account {{nameWithHost}} unmuted.', { nameWithHost: account.nameWithHost })
-            )
            this.account.mutedByUser = false
            this.userChanged.emit()
          },
-          err => this.notificationsService.error(this.i18n('Error'), err.message)
+          err => this.notifier.error(err.message)
        )
  }
@@ -155,16 +139,13 @@ export class UserModerationDropdownComponent implements OnChanges {
    this.blocklistService.blockServerByUser(host)
        .subscribe(
          () => {
-            this.notificationsService.success(
+            this.notifier.success(this.i18n('Instance {{host}} muted.', { host }))
-              this.i18n('Success'),
-              this.i18n('Instance {{host}} muted.', { host })
-            )
            this.account.mutedServerByUser = true
            this.userChanged.emit()
          },
-          err => this.notificationsService.error(this.i18n('Error'), err.message)
+          err => this.notifier.error(err.message)
        )
  }
@@ -172,16 +153,13 @@ export class UserModerationDropdownComponent implements OnChanges {
    this.blocklistService.unblockServerByUser(host)
        .subscribe(
          () => {
-            this.notificationsService.success(
+            this.notifier.success(this.i18n('Instance {{host}} unmuted.', { host }))
-              this.i18n('Success'),
-              this.i18n('Instance {{host}} unmuted.', { host })
-            )
            this.account.mutedServerByUser = false
            this.userChanged.emit()
          },
-          err => this.notificationsService.error(this.i18n('Error'), err.message)
+          err => this.notifier.error(err.message)
        )
  }
@@ -189,16 +167,13 @@ export class UserModerationDropdownComponent implements OnChanges {
    this.blocklistService.blockAccountByInstance(account)
        .subscribe(
          () => {
-            this.notificationsService.success(
+            this.notifier.success(this.i18n('Account {{nameWithHost}} muted by the instance.', { nameWithHost: account.nameWithHost }))
-              this.i18n('Success'),
-              this.i18n('Account {{nameWithHost}} muted by the instance.', { nameWithHost: account.nameWithHost })
-            )
            this.account.mutedByInstance = true
            this.userChanged.emit()
          },
-          err => this.notificationsService.error(this.i18n('Error'), err.message)
+          err => this.notifier.error(err.message)
        )
  }
@@ -206,16 +181,13 @@ export class UserModerationDropdownComponent implements OnChanges {
    this.blocklistService.unblockAccountByInstance(account)
        .subscribe(
          () => {
-            this.notificationsService.success(
+            this.notifier.success(this.i18n('Account {{nameWithHost}} unmuted by the instance.', { nameWithHost: account.nameWithHost }))
-              this.i18n('Success'),
-              this.i18n('Account {{nameWithHost}} unmuted by the instance.', { nameWithHost: account.nameWithHost })
-            )
            this.account.mutedByInstance = false
            this.userChanged.emit()
          },
-          err => this.notificationsService.error(this.i18n('Error'), err.message)
+          err => this.notifier.error(err.message)
        )
  }
@@ -223,16 +195,13 @@ export class UserModerationDropdownComponent implements OnChanges {
    this.blocklistService.blockServerByInstance(host)
        .subscribe(
          () => {
-            this.notificationsService.success(
+            this.notifier.success(this.i18n('Instance {{host}} muted by the instance.', { host }))
-              this.i18n('Success'),
-              this.i18n('Instance {{host}} muted by the instance.', { host })
-            )
            this.account.mutedServerByInstance = true
            this.userChanged.emit()
          },
-          err => this.notificationsService.error(this.i18n('Error'), err.message)
+          err => this.notifier.error(err.message)
        )
  }
@@ -240,16 +209,13 @@ export class UserModerationDropdownComponent implements OnChanges {
    this.blocklistService.unblockServerByInstance(host)
        .subscribe(
          () => {
-            this.notificationsService.success(
+            this.notifier.success(this.i18n('Instance {{host}} unmuted by the instance.', { host }))
-              this.i18n('Success'),
-              this.i18n('Instance {{host}} unmuted by the instance.', { host })
-            )
            this.account.mutedServerByInstance = false
            this.userChanged.emit()
          },
-          err => this.notificationsService.error(this.i18n('Error'), err.message)
+          err => this.notifier.error(err.message)
        )
  }
@@ -277,18 +243,18 @@ export class UserModerationDropdownComponent implements OnChanges {
          },
          {
            label: this.i18n('Ban'),
-            handler: ({ user }: { user: User }) => this.openBanUserModal(user),
+            handler: ({ user }) => this.openBanUserModal(user),
-            isDisplayed: ({ user }: { user: User }) => !user.blocked
+            isDisplayed: ({ user }) => !user.blocked
          },
          {
            label: this.i18n('Unban'),
-            handler: ({ user }: { user: User }) => this.unbanUser(user),
+            handler: ({ user }) => this.unbanUser(user),
-            isDisplayed: ({ user }: { user: User }) => user.blocked
+            isDisplayed: ({ user }) => user.blocked
          },
          {
            label: this.i18n('Set Email as Verified'),
-            handler: ({ user }: { user: User }) => this.setEmailAsVerified(user),
+            handler: ({ user }) => this.setEmailAsVerified(user),
-            isDisplayed: ({ user }: { user: User }) => this.requiresEmailVerification && !user.blocked && user.emailVerified === false
+            isDisplayed: ({ user }) => this.requiresEmailVerification && !user.blocked && user.emailVerified === false
          }
        ])
      }
@@ -299,23 +265,23 @@ export class UserModerationDropdownComponent implements OnChanges {
        this.userActions.push([
          {
            label: this.i18n('Mute this account'),
-            isDisplayed: ({ account }: { account: Account }) => account.mutedByUser === false,
+            isDisplayed: ({ account }) => account.mutedByUser === false,
-            handler: ({ account }: { account: Account }) => this.blockAccountByUser(account)
+            handler: ({ account }) => this.blockAccountByUser(account)
          },
          {
            label: this.i18n('Unmute this account'),
-            isDisplayed: ({ account }: { account: Account }) => account.mutedByUser === true,
+            isDisplayed: ({ account }) => account.mutedByUser === true,
-            handler: ({ account }: { account: Account }) => this.unblockAccountByUser(account)
+            handler: ({ account }) => this.unblockAccountByUser(account)
          },
          {
            label: this.i18n('Mute the instance'),
-            isDisplayed: ({ account }: { account: Account }) => !account.userId && account.mutedServerByInstance === false,
+            isDisplayed: ({ account }) => !account.userId && account.mutedServerByInstance === false,
-            handler: ({ account }: { account: Account }) => this.blockServerByUser(account.host)
+            handler: ({ account }) => this.blockServerByUser(account.host)
          },
          {
            label: this.i18n('Unmute the instance'),
-            isDisplayed: ({ account }: { account: Account }) => !account.userId && account.mutedServerByInstance === true,
+            isDisplayed: ({ account }) => !account.userId && account.mutedServerByInstance === true,
-            handler: ({ account }: { account: Account }) => this.unblockServerByUser(account.host)
+            handler: ({ account }) => this.unblockServerByUser(account.host)
          }
        ])
@@ -326,13 +292,13 @@ export class UserModerationDropdownComponent implements OnChanges {
          instanceActions = instanceActions.concat([
            {
              label: this.i18n('Mute this account by your instance'),
-              isDisplayed: ({ account }: { account: Account }) => account.mutedByInstance === false,
+              isDisplayed: ({ account }) => account.mutedByInstance === false,
-              handler: ({ account }: { account: Account }) => this.blockAccountByInstance(account)
+              handler: ({ account }) => this.blockAccountByInstance(account)
            },
            {
              label: this.i18n('Unmute this account by your instance'),
-              isDisplayed: ({ account }: { account: Account }) => account.mutedByInstance === true,
+              isDisplayed: ({ account }) => account.mutedByInstance === true,
-              handler: ({ account }: { account: Account }) => this.unblockAccountByInstance(account)
+              handler: ({ account }) => this.unblockAccountByInstance(account)
            }
          ])
        }
@@ -342,13 +308,13 @@ export class UserModerationDropdownComponent implements OnChanges {
          instanceActions = instanceActions.concat([
            {
              label: this.i18n('Mute the instance by your instance'),
-              isDisplayed: ({ account }: { account: Account }) => !account.userId && account.mutedServerByInstance === false,
+              isDisplayed: ({ account }) => !account.userId && account.mutedServerByInstance === false,
-              handler: ({ account }: { account: Account }) => this.blockServerByInstance(account.host)
+              handler: ({ account }) => this.blockServerByInstance(account.host)
            },
            {
              label: this.i18n('Unmute the instance by your instance'),
-              isDisplayed: ({ account }: { account: Account }) => !account.userId && account.mutedServerByInstance === true,
+              isDisplayed: ({ account }) => !account.userId && account.mutedServerByInstance === true,
-              handler: ({ account }: { account: Account }) => this.unblockServerByInstance(account.host)
+              handler: ({ account }) => this.unblockServerByInstance(account.host)
            }
          ])
        }
diff --git a/client/src/app/shared/renderer/html-renderer.service.ts b/client/src/app/shared/renderer/html-renderer.service.ts
new file mode 100644
index 000000000..d49df9b6d
--- /dev/null
+++ b/client/src/app/shared/renderer/html-renderer.service.ts
@@ -0,0 +1,35 @@
+import { Injectable } from '@angular/core'
+import { LinkifierService } from '@app/shared/renderer/linkifier.service'
+import * as sanitizeHtml from 'sanitize-html'
+@Injectable()
+export class HtmlRendererService {
+  constructor (private linkifier: LinkifierService) {
+  }
+  toSafeHtml (text: string) {
+    // Convert possible markdown to html
+    const html = this.linkifier.linkify(text)
+    return sanitizeHtml(html, {
+      allowedTags: [ 'a', 'p', 'span', 'br' ],
+      allowedSchemes: [ 'http', 'https' ],
+      allowedAttributes: {
+        'a': [ 'href', 'class', 'target' ]
+      },
+      transformTags: {
+        a: (tagName, attribs) => {
+          return {
+            tagName,
+            attribs: Object.assign(attribs, {
+              target: '_blank',
+              rel: 'noopener noreferrer'
+            })
+          }
+        }
+      }
+    })
+  }
+}
diff --git a/client/src/app/shared/renderer/index.ts b/client/src/app/shared/renderer/index.ts
new file mode 100644
index 000000000..39202b385
--- /dev/null
+++ b/client/src/app/shared/renderer/index.ts
@@ -0,0 +1,3 @@
+export * from './html-renderer.service'
+export * from './linkifier.service'
+export * from './markdown.service'
diff --git a/client/src/app/shared/renderer/linkifier.service.ts b/client/src/app/shared/renderer/linkifier.service.ts
new file mode 100644
index 000000000..2529c9eaf
--- /dev/null
+++ b/client/src/app/shared/renderer/linkifier.service.ts
@@ -0,0 +1,115 @@
+import { Injectable } from '@angular/core'
+import { getAbsoluteAPIUrl } from '@app/shared/misc/utils'
+// FIXME: use @types/linkify when https://github.com/DefinitelyTyped/DefinitelyTyped/pull/29682/files is merged?
+const linkify = require('linkifyjs')
+const linkifyHtml = require('linkifyjs/html')
+@Injectable()
+export class LinkifierService {
+  static CLASSNAME = 'linkified'
+  private linkifyOptions = {
+    className: {
+      mention: LinkifierService.CLASSNAME + '-mention',
+      url: LinkifierService.CLASSNAME + '-url'
+    }
+  }
+  constructor () {
+    // Apply plugin
+    this.mentionWithDomainPlugin(linkify)
+  }
+  linkify (text: string) {
+    return linkifyHtml(text, this.linkifyOptions)
+  }
+  private mentionWithDomainPlugin (linkify: any) {
+    const TT = linkify.scanner.TOKENS // Text tokens
+    const { TOKENS: MT, State } = linkify.parser // Multi tokens, state
+    const MultiToken = MT.Base
+    const S_START = linkify.parser.start
+    const TT_AT = TT.AT
+    const TT_DOMAIN = TT.DOMAIN
+    const TT_LOCALHOST = TT.LOCALHOST
+    const TT_NUM = TT.NUM
+    const TT_COLON = TT.COLON
+    const TT_SLASH = TT.SLASH
+    const TT_TLD = TT.TLD
+    const TT_UNDERSCORE = TT.UNDERSCORE
+    const TT_DOT = TT.DOT
+    function MENTION (this: any, value: any) {
+      this.v = value
+    }
+    linkify.inherits(MultiToken, MENTION, {
+      type: 'mentionWithDomain',
+      isLink: true,
+      toHref () {
+        return getAbsoluteAPIUrl() + '/services/redirect/accounts/' + this.toString().substr(1)
+      }
+    })
+    const S_AT = S_START.jump(TT_AT) // @
+    const S_AT_SYMS = new State()
+    const S_MENTION = new State(MENTION)
+    const S_MENTION_DIVIDER = new State()
+    const S_MENTION_DIVIDER_SYMS = new State()
+    // @_,
+    S_AT.on(TT_UNDERSCORE, S_AT_SYMS)
+    //  @_*
+    S_AT_SYMS
+      .on(TT_UNDERSCORE, S_AT_SYMS)
+      .on(TT_DOT, S_AT_SYMS)
+    // Valid mention (not made up entirely of symbols)
+    S_AT
+      .on(TT_DOMAIN, S_MENTION)
+      .on(TT_LOCALHOST, S_MENTION)
+      .on(TT_TLD, S_MENTION)
+      .on(TT_NUM, S_MENTION)
+    S_AT_SYMS
+      .on(TT_DOMAIN, S_MENTION)
+      .on(TT_LOCALHOST, S_MENTION)
+      .on(TT_TLD, S_MENTION)
+      .on(TT_NUM, S_MENTION)
+    // More valid mentions
+    S_MENTION
+      .on(TT_DOMAIN, S_MENTION)
+      .on(TT_LOCALHOST, S_MENTION)
+      .on(TT_TLD, S_MENTION)
+      .on(TT_COLON, S_MENTION)
+      .on(TT_NUM, S_MENTION)
+      .on(TT_UNDERSCORE, S_MENTION)
+    // Mention with a divider
+    S_MENTION
+      .on(TT_AT, S_MENTION_DIVIDER)
+      .on(TT_SLASH, S_MENTION_DIVIDER)
+      .on(TT_DOT, S_MENTION_DIVIDER)
+    // Mention _ trailing stash plus syms
+    S_MENTION_DIVIDER.on(TT_UNDERSCORE, S_MENTION_DIVIDER_SYMS)
+    S_MENTION_DIVIDER_SYMS.on(TT_UNDERSCORE, S_MENTION_DIVIDER_SYMS)
+    // Once we get a word token, mentions can start up again
+    S_MENTION_DIVIDER
+      .on(TT_DOMAIN, S_MENTION)
+      .on(TT_LOCALHOST, S_MENTION)
+      .on(TT_TLD, S_MENTION)
+      .on(TT_NUM, S_MENTION)
+    S_MENTION_DIVIDER_SYMS
+      .on(TT_DOMAIN, S_MENTION)
+      .on(TT_LOCALHOST, S_MENTION)
+      .on(TT_TLD, S_MENTION)
+      .on(TT_NUM, S_MENTION)
+  }
+}
diff --git a/client/src/app/shared/renderer/markdown.service.ts b/client/src/app/shared/renderer/markdown.service.ts
new file mode 100644
index 000000000..07017eca5
--- /dev/null
+++ b/client/src/app/shared/renderer/markdown.service.ts
@@ -0,0 +1,79 @@
+import { Injectable } from '@angular/core'
+import * as MarkdownIt from 'markdown-it'
+@Injectable()
+export class MarkdownService {
+  static TEXT_RULES = [
+    'linkify',
+    'autolink',
+    'emphasis',
+    'link',
+    'newline',
+    'list'
+  ]
+  static ENHANCED_RULES = MarkdownService.TEXT_RULES.concat([ 'image' ])
+  private textMarkdownIt: MarkdownIt.MarkdownIt
+  private enhancedMarkdownIt: MarkdownIt.MarkdownIt
+  constructor () {
+    this.textMarkdownIt = this.createMarkdownIt(MarkdownService.TEXT_RULES)
+    this.enhancedMarkdownIt = this.createMarkdownIt(MarkdownService.ENHANCED_RULES)
+  }
+  textMarkdownToHTML (markdown: string) {
+    if (!markdown) return ''
+    const html = this.textMarkdownIt.render(markdown)
+    return this.avoidTruncatedTags(html)
+  }
+  enhancedMarkdownToHTML (markdown: string) {
+    if (!markdown) return ''
+    const html = this.enhancedMarkdownIt.render(markdown)
+    return this.avoidTruncatedTags(html)
+  }
+  private createMarkdownIt (rules: string[]) {
+    const markdownIt = new MarkdownIt('zero', { linkify: true, breaks: true })
+    for (let rule of rules) {
+      markdownIt.enable(rule)
+    }
+    this.setTargetToLinks(markdownIt)
+    return markdownIt
+  }
+  private setTargetToLinks (markdownIt: MarkdownIt.MarkdownIt) {
+    // Snippet from markdown-it documentation: https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer
+    const defaultRender = markdownIt.renderer.rules.link_open || function (tokens, idx, options, env, self) {
+      return self.renderToken(tokens, idx, options)
+    }
+    markdownIt.renderer.rules.link_open = function (tokens, index, options, env, self) {
+      const token = tokens[index]
+      const targetIndex = token.attrIndex('target')
+      if (targetIndex < 0) token.attrPush([ 'target', '_blank' ])
+      else token.attrs[targetIndex][1] = '_blank'
+      const relIndex = token.attrIndex('rel')
+      if (relIndex < 0) token.attrPush([ 'rel', 'noopener noreferrer' ])
+      else token.attrs[relIndex][1] = 'noopener noreferrer'
+      // pass token to default renderer.
+      return defaultRender(tokens, index, options, env, self)
+    }
+  }
+  private avoidTruncatedTags (html: string) {
+    return html.replace(/\*\*?([^*]+)$/, '$1')
+      .replace(/<a[^>]+>([^<]+)<\/a>\s*...((<\/p>)|(<\/li>)|(<\/strong>))?$/mi, '$1...')
+      .replace(/\[[^\]]+\]?\(?([^\)]+)$/, '$1')
+  }
+}
diff --git a/client/src/app/shared/rest/component-pagination.model.ts b/client/src/app/shared/rest/component-pagination.model.ts
index 0b8ecc318..85160d445 100644
--- a/client/src/app/shared/rest/component-pagination.model.ts
+++ b/client/src/app/shared/rest/component-pagination.model.ts
@@ -3,3 +3,14 @@ export interface ComponentPagination {
  itemsPerPage: number
  totalItems?: number
 }
+export function hasMoreItems (componentPagination: ComponentPagination) {
+  // No results
+  if (componentPagination.totalItems === 0) return false
+  // Not loaded yet
+  if (!componentPagination.totalItems) return true
+  const maxPage = componentPagination.totalItems / componentPagination.itemsPerPage
+  return maxPage > componentPagination.currentPage
+}
diff --git a/client/src/app/shared/rest/rest-extractor.service.ts b/client/src/app/shared/rest/rest-extractor.service.ts
index f149569ef..e6518dd1d 100644
--- a/client/src/app/shared/rest/rest-extractor.service.ts
+++ b/client/src/app/shared/rest/rest-extractor.service.ts
@@ -80,6 +80,7 @@ export class RestExtractor {
      errorMessage = errorMessage ? errorMessage : 'Unknown error.'
      console.error(`Backend returned code ${err.status}, errorMessage is: ${errorMessage}`)
    } else {
+      console.error(err)
      errorMessage = err
    }
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index a2fa27b72..6f8625c7e 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -6,7 +6,6 @@ import { RouterModule } from '@angular/router'
 import { MarkdownTextareaComponent } from '@app/shared/forms/markdown-textarea.component'
 import { HelpComponent } from '@app/shared/misc/help.component'
 import { InfiniteScrollerDirective } from '@app/shared/video/infinite-scroller.directive'
-import { MarkdownService } from '@app/videos/shared'
 import { BytesPipe, KeysPipe, NgPipesModule } from 'ngx-pipes'
 import { SharedModule as PrimeSharedModule } from 'primeng/components/common/shared'
@@ -34,6 +33,7 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
 import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
 import {
  CustomConfigValidatorsService,
+  InstanceValidatorsService,
  LoginValidatorsService,
  ReactiveFileComponent,
  ResetPasswordValidatorsService,
@@ -61,6 +61,14 @@ import { OverviewService } from '@app/shared/overview'
 import { UserBanModalComponent } from '@app/shared/moderation'
 import { UserModerationDropdownComponent } from '@app/shared/moderation/user-moderation-dropdown.component'
 import { BlocklistService } from '@app/shared/blocklist'
+import { TopMenuDropdownComponent } from '@app/shared/menu/top-menu-dropdown.component'
+import { UserHistoryService } from '@app/shared/users/user-history.service'
+import { UserNotificationService } from '@app/shared/users/user-notification.service'
+import { UserNotificationsComponent } from '@app/shared/users/user-notifications.component'
+import { InstanceService } from '@app/shared/instance/instance.service'
+import { HtmlRendererService, LinkifierService, MarkdownService } from '@app/shared/renderer'
+import { ConfirmComponent } from '@app/shared/confirm/confirm.component'
+import { GlobalIconComponent } from '@app/shared/icons/global-icon.component'
 @NgModule({
  imports: [
@@ -102,7 +110,11 @@ import { BlocklistService } from '@app/shared/blocklist'
    RemoteSubscribeComponent,
    InstanceFeaturesTableComponent,
    UserBanModalComponent,
-    UserModerationDropdownComponent
+    UserModerationDropdownComponent,
+    TopMenuDropdownComponent,
+    UserNotificationsComponent,
+    ConfirmComponent,
+    GlobalIconComponent
  ],
  exports: [
@@ -141,6 +153,10 @@ import { BlocklistService } from '@app/shared/blocklist'
    InstanceFeaturesTableComponent,
    UserBanModalComponent,
    UserModerationDropdownComponent,
+    TopMenuDropdownComponent,
+    UserNotificationsComponent,
+    ConfirmComponent,
+    GlobalIconComponent,
    NumberFormatterPipe,
    ObjectLengthPipe,
@@ -157,7 +173,6 @@ import { BlocklistService } from '@app/shared/blocklist'
    UserService,
    VideoService,
    AccountService,
-    MarkdownService,
    VideoChannelService,
    VideoCaptionService,
    VideoImportService,
@@ -177,11 +192,20 @@ import { BlocklistService } from '@app/shared/blocklist'
    OverviewService,
    VideoChangeOwnershipValidatorsService,
    VideoAcceptOwnershipValidatorsService,
+    InstanceValidatorsService,
    BlocklistService,
+    UserHistoryService,
+    InstanceService,
+    MarkdownService,
+    LinkifierService,
+    HtmlRendererService,
    I18nPrimengCalendarService,
    ScreenService,
+    UserNotificationService,
    I18n
  ]
 })
diff --git a/client/src/app/shared/user-subscription/remote-subscribe.component.ts b/client/src/app/shared/user-subscription/remote-subscribe.component.ts
index 7a81108cd..ba2a45df1 100644
--- a/client/src/app/shared/user-subscription/remote-subscribe.component.ts
+++ b/client/src/app/shared/user-subscription/remote-subscribe.component.ts
@@ -29,7 +29,7 @@ export class RemoteSubscribeComponent extends FormReactive implements OnInit {
  }
  onValidKey () {
-    this.onValueChanged()
+    this.check()
    if (!this.form.valid) return
    this.formValidated()
@@ -37,7 +37,24 @@ export class RemoteSubscribeComponent extends FormReactive implements OnInit {
  formValidated () {
    const address = this.form.value['text']
-    const [ , hostname ] = address.split('@')
+    const [ username, hostname ] = address.split('@')
-    window.open(`https://${hostname}/authorize_interaction?acct=${this.account}`)
+    fetch(`https://${hostname}/.well-known/webfinger?resource=acct:${username}@${hostname}`)
+      .then(response => response.json())
+      .then(data => new Promise((resolve, reject) => {
+        if (data && Array.isArray(data.links)) {
+          const link: {
+            template: string
+          } = data.links.find((link: any) =>
+            link && typeof link.template === 'string' && link.rel === 'http://ostatus.org/schema/1.0/subscribe')
+          if (link && link.template.includes('{uri}')) {
+            resolve(link.template.replace('{uri}', `acct:${this.account}`))
+          }
+        }
+        reject()
+      }))
+      .then(window.open)
+      .catch(() => window.open(`https://${hostname}/authorize_interaction?acct=${this.account}`))
  }
 }
diff --git a/client/src/app/shared/user-subscription/subscribe-button.component.ts b/client/src/app/shared/user-subscription/subscribe-button.component.ts
index 315ea5037..8f1754c7f 100644
--- a/client/src/app/shared/user-subscription/subscribe-button.component.ts
+++ b/client/src/app/shared/user-subscription/subscribe-button.component.ts
@@ -1,9 +1,8 @@
 import { Component, Input, OnInit } from '@angular/core'
 import { Router } from '@angular/router'
-import { AuthService } from '@app/core'
+import { AuthService, Notifier } from '@app/core'
 import { UserSubscriptionService } from '@app/shared/user-subscription/user-subscription.service'
 import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
-import { NotificationsService } from 'angular2-notifications'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { VideoService } from '@app/shared/video/video.service'
 import { FeedFormat } from '../../../../../shared/models/feeds'
@@ -23,7 +22,7 @@ export class SubscribeButtonComponent implements OnInit {
  constructor (
    private authService: AuthService,
    private router: Router,
-    private notificationsService: NotificationsService,
+    private notifier: Notifier,
    private userSubscriptionService: UserSubscriptionService,
    private i18n: I18n,
    private videoService: VideoService
@@ -43,18 +42,17 @@ export class SubscribeButtonComponent implements OnInit {
        .subscribe(
          res => this.subscribed = res[this.uri],
-          err => this.notificationsService.error(this.i18n('Error'), err.message)
+          err => this.notifier.error(err.message)
        )
    }
  }
  subscribe () {
    if (this.isUserLoggedIn()) {
-      this.localSubscribe()
+      return this.localSubscribe()
-    } else {
-      this.authService.redirectUrl = this.router.url
-      this.gotoLogin()
    }
+    return this.gotoLogin()
  }
  localSubscribe () {
@@ -63,13 +61,13 @@ export class SubscribeButtonComponent implements OnInit {
        () => {
          this.subscribed = true
-          this.notificationsService.success(
+          this.notifier.success(
-            this.i18n('Subscribed'),
+            this.i18n('Subscribed to {{nameWithHost}}', { nameWithHost: this.videoChannel.displayName }),
-            this.i18n('Subscribed to {{nameWithHost}}', { nameWithHost: this.videoChannel.displayName })
+            this.i18n('Subscribed')
          )
        },
-          err => this.notificationsService.error(this.i18n('Error'), err.message)
+          err => this.notifier.error(err.message)
      )
  }
@@ -85,13 +83,13 @@ export class SubscribeButtonComponent implements OnInit {
          () => {
            this.subscribed = false
-            this.notificationsService.success(
+            this.notifier.success(
-              this.i18n('Unsubscribed'),
+              this.i18n('Unsubscribed from {{nameWithHost}}', { nameWithHost: this.videoChannel.displayName }),
-              this.i18n('Unsubscribed from {{nameWithHost}}', { nameWithHost: this.videoChannel.displayName })
+              this.i18n('Unsubscribed')
            )
          },
-          err => this.notificationsService.error(this.i18n('Error'), err.message)
+          err => this.notifier.error(err.message)
        )
  }
diff --git a/client/src/app/shared/users/index.ts b/client/src/app/shared/users/index.ts
index 7b5a67bc7..ebd715fb1 100644
--- a/client/src/app/shared/users/index.ts
+++ b/client/src/app/shared/users/index.ts
@@ -1,2 +1,3 @@
 export * from './user.model'
 export * from './user.service'
+export * from './user-notifications.component'
diff --git a/client/src/app/shared/users/user-history.service.ts b/client/src/app/shared/users/user-history.service.ts
new file mode 100644
index 000000000..9ed25bfc7
--- /dev/null
+++ b/client/src/app/shared/users/user-history.service.ts
@@ -0,0 +1,45 @@
+import { HttpClient, HttpParams } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { environment } from '../../../environments/environment'
+import { RestExtractor } from '../rest/rest-extractor.service'
+import { RestService } from '../rest/rest.service'
+import { Video } from '../video/video.model'
+import { catchError, map, switchMap } from 'rxjs/operators'
+import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
+import { VideoService } from '@app/shared/video/video.service'
+import { ResultList } from '../../../../../shared'
+@Injectable()
+export class UserHistoryService {
+  static BASE_USER_VIDEOS_HISTORY_URL = environment.apiUrl + '/api/v1/users/me/history/videos'
+  constructor (
+    private authHttp: HttpClient,
+    private restExtractor: RestExtractor,
+    private restService: RestService,
+    private videoService: VideoService
+  ) {}
+  getUserVideosHistory (historyPagination: ComponentPagination) {
+    const pagination = this.restService.componentPaginationToRestPagination(historyPagination)
+    let params = new HttpParams()
+    params = this.restService.addRestGetParams(params, pagination)
+    return this.authHttp
+               .get<ResultList<Video>>(UserHistoryService.BASE_USER_VIDEOS_HISTORY_URL, { params })
+               .pipe(
+                 switchMap(res => this.videoService.extractVideos(res)),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+  deleteUserVideosHistory () {
+    return this.authHttp
+               .post(UserHistoryService.BASE_USER_VIDEOS_HISTORY_URL + '/remove', {})
+               .pipe(
+                 map(() => this.restExtractor.extractDataBool()),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+}
diff --git a/client/src/app/shared/users/user-notification.model.ts b/client/src/app/shared/users/user-notification.model.ts
new file mode 100644
index 000000000..125d2120c
--- /dev/null
+++ b/client/src/app/shared/users/user-notification.model.ts
@@ -0,0 +1,155 @@
+import { UserNotification as UserNotificationServer, UserNotificationType, VideoInfo, ActorInfo } from '../../../../../shared'
+import { Actor } from '@app/shared/actor/actor.model'
+export class UserNotification implements UserNotificationServer {
+  id: number
+  type: UserNotificationType
+  read: boolean
+  video?: VideoInfo & {
+    channel: ActorInfo & { avatarUrl?: string }
+  }
+  videoImport?: {
+    id: number
+    video?: VideoInfo
+    torrentName?: string
+    magnetUri?: string
+    targetUrl?: string
+  }
+  comment?: {
+    id: number
+    threadId: number
+    account: ActorInfo & { avatarUrl?: string }
+    video: VideoInfo
+  }
+  videoAbuse?: {
+    id: number
+    video: VideoInfo
+  }
+  videoBlacklist?: {
+    id: number
+    video: VideoInfo
+  }
+  account?: ActorInfo & { avatarUrl?: string }
+  actorFollow?: {
+    id: number
+    follower: ActorInfo & { avatarUrl?: string }
+    following: {
+      type: 'account' | 'channel'
+      name: string
+      displayName: string
+    }
+  }
+  createdAt: string
+  updatedAt: string
+  // Additional fields
+  videoUrl?: string
+  commentUrl?: any[]
+  videoAbuseUrl?: string
+  accountUrl?: string
+  videoImportIdentifier?: string
+  videoImportUrl?: string
+  constructor (hash: UserNotificationServer) {
+    this.id = hash.id
+    this.type = hash.type
+    this.read = hash.read
+    this.video = hash.video
+    if (this.video) this.setAvatarUrl(this.video.channel)
+    this.videoImport = hash.videoImport
+    this.comment = hash.comment
+    if (this.comment) this.setAvatarUrl(this.comment.account)
+    this.videoAbuse = hash.videoAbuse
+    this.videoBlacklist = hash.videoBlacklist
+    this.account = hash.account
+    if (this.account) this.setAvatarUrl(this.account)
+    this.actorFollow = hash.actorFollow
+    if (this.actorFollow) this.setAvatarUrl(this.actorFollow.follower)
+    this.createdAt = hash.createdAt
+    this.updatedAt = hash.updatedAt
+    switch (this.type) {
+      case UserNotificationType.NEW_VIDEO_FROM_SUBSCRIPTION:
+        this.videoUrl = this.buildVideoUrl(this.video)
+        break
+      case UserNotificationType.UNBLACKLIST_ON_MY_VIDEO:
+        this.videoUrl = this.buildVideoUrl(this.video)
+        break
+      case UserNotificationType.NEW_COMMENT_ON_MY_VIDEO:
+      case UserNotificationType.COMMENT_MENTION:
+        this.accountUrl = this.buildAccountUrl(this.comment.account)
+        this.commentUrl = [ this.buildVideoUrl(this.comment.video), { threadId: this.comment.threadId } ]
+        break
+      case UserNotificationType.NEW_VIDEO_ABUSE_FOR_MODERATORS:
+        this.videoAbuseUrl = '/admin/moderation/video-abuses/list'
+        this.videoUrl = this.buildVideoUrl(this.videoAbuse.video)
+        break
+      case UserNotificationType.BLACKLIST_ON_MY_VIDEO:
+        this.videoUrl = this.buildVideoUrl(this.videoBlacklist.video)
+        break
+      case UserNotificationType.MY_VIDEO_PUBLISHED:
+        this.videoUrl = this.buildVideoUrl(this.video)
+        break
+      case UserNotificationType.MY_VIDEO_IMPORT_SUCCESS:
+        this.videoImportUrl = this.buildVideoImportUrl()
+        this.videoImportIdentifier = this.buildVideoImportIdentifier(this.videoImport)
+        this.videoUrl = this.buildVideoUrl(this.videoImport.video)
+        break
+      case UserNotificationType.MY_VIDEO_IMPORT_ERROR:
+        this.videoImportUrl = this.buildVideoImportUrl()
+        this.videoImportIdentifier = this.buildVideoImportIdentifier(this.videoImport)
+        break
+      case UserNotificationType.NEW_USER_REGISTRATION:
+        this.accountUrl = this.buildAccountUrl(this.account)
+        break
+      case UserNotificationType.NEW_FOLLOW:
+        this.accountUrl = this.buildAccountUrl(this.actorFollow.follower)
+        break
+    }
+  }
+  private buildVideoUrl (video: { uuid: string }) {
+    return '/videos/watch/' + video.uuid
+  }
+  private buildAccountUrl (account: { name: string, host: string }) {
+    return '/accounts/' + Actor.CREATE_BY_STRING(account.name, account.host)
+  }
+  private buildVideoImportUrl () {
+    return '/my-account/video-imports'
+  }
+  private buildVideoImportIdentifier (videoImport: { targetUrl?: string, magnetUri?: string, torrentName?: string }) {
+    return videoImport.targetUrl || videoImport.magnetUri || videoImport.torrentName
+  }
+  private setAvatarUrl (actor: { avatarUrl?: string, avatar?: { path: string } }) {
+    actor.avatarUrl = Actor.GET_ACTOR_AVATAR_URL(actor)
+  }
+}
diff --git a/client/src/app/shared/users/user-notification.service.ts b/client/src/app/shared/users/user-notification.service.ts
new file mode 100644
index 000000000..f8a30955d
--- /dev/null
+++ b/client/src/app/shared/users/user-notification.service.ts
@@ -0,0 +1,86 @@
+import { Injectable } from '@angular/core'
+import { HttpClient, HttpParams } from '@angular/common/http'
+import { RestExtractor, RestService } from '../rest'
+import { catchError, map, tap } from 'rxjs/operators'
+import { environment } from '../../../environments/environment'
+import { ResultList, UserNotification as UserNotificationServer, UserNotificationSetting } from '../../../../../shared'
+import { UserNotification } from './user-notification.model'
+import { AuthService } from '../../core'
+import { ComponentPagination } from '../rest/component-pagination.model'
+import { User } from '..'
+import { UserNotificationSocket } from '@app/core/notification/user-notification-socket.service'
+@Injectable()
+export class UserNotificationService {
+  static BASE_NOTIFICATIONS_URL = environment.apiUrl + '/api/v1/users/me/notifications'
+  static BASE_NOTIFICATION_SETTINGS = environment.apiUrl + '/api/v1/users/me/notification-settings'
+  constructor (
+    private auth: AuthService,
+    private authHttp: HttpClient,
+    private restExtractor: RestExtractor,
+    private restService: RestService,
+    private userNotificationSocket: UserNotificationSocket
+  ) {}
+  listMyNotifications (pagination: ComponentPagination, unread?: boolean, ignoreLoadingBar = false) {
+    let params = new HttpParams()
+    params = this.restService.addRestGetParams(params, this.restService.componentPaginationToRestPagination(pagination))
+    if (unread) params = params.append('unread', `${unread}`)
+    const headers = ignoreLoadingBar ? { ignoreLoadingBar: '' } : undefined
+    return this.authHttp.get<ResultList<UserNotification>>(UserNotificationService.BASE_NOTIFICATIONS_URL, { params, headers })
+               .pipe(
+                 map(res => this.restExtractor.convertResultListDateToHuman(res)),
+                 map(res => this.restExtractor.applyToResultListData(res, this.formatNotification.bind(this))),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+  countUnreadNotifications () {
+    return this.listMyNotifications({ currentPage: 1, itemsPerPage: 0 }, true)
+      .pipe(map(n => n.total))
+  }
+  markAsRead (notification: UserNotification) {
+    const url = UserNotificationService.BASE_NOTIFICATIONS_URL + '/read'
+    const body = { ids: [ notification.id ] }
+    const headers = { ignoreLoadingBar: '' }
+    return this.authHttp.post(url, body, { headers })
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 tap(() => this.userNotificationSocket.dispatch('read')),
+                 catchError(res => this.restExtractor.handleError(res))
+               )
+  }
+  markAllAsRead () {
+    const url = UserNotificationService.BASE_NOTIFICATIONS_URL + '/read-all'
+    const headers = { ignoreLoadingBar: '' }
+    return this.authHttp.post(url, {}, { headers })
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 tap(() => this.userNotificationSocket.dispatch('read-all')),
+                 catchError(res => this.restExtractor.handleError(res))
+               )
+  }
+  updateNotificationSettings (user: User, settings: UserNotificationSetting) {
+    const url = UserNotificationService.BASE_NOTIFICATION_SETTINGS
+    return this.authHttp.put(url, settings)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(res => this.restExtractor.handleError(res))
+               )
+  }
+  private formatNotification (notification: UserNotificationServer) {
+    return new UserNotification(notification)
+  }
+}
diff --git a/client/src/app/shared/users/user-notifications.component.html b/client/src/app/shared/users/user-notifications.component.html
new file mode 100644
index 000000000..0d69e0feb
--- /dev/null
+++ b/client/src/app/shared/users/user-notifications.component.html
@@ -0,0 +1,101 @@
+<div *ngIf="componentPagination.totalItems === 0" class="no-notification" i18n>You don't have notifications.</div>
+<div class="notifications" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()">
+  <div *ngFor="let notification of notifications" class="notification" [ngClass]="{ unread: !notification.read }" (click)="markAsRead(notification)">
+    <ng-container [ngSwitch]="notification.type">
+      <ng-container i18n *ngSwitchCase="UserNotificationType.NEW_VIDEO_FROM_SUBSCRIPTION">
+        <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.video.channel.avatarUrl" />
+        <div class="message">
+          {{ notification.video.channel.displayName }} published a <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">new video</a>
+        </div>
+      </ng-container>
+      <ng-container i18n *ngSwitchCase="UserNotificationType.UNBLACKLIST_ON_MY_VIDEO">
+        <my-global-icon iconName="undo"></my-global-icon>
+        <div class="message">
+          Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.video.name }}</a> has been unblacklisted
+        </div>
+      </ng-container>
+      <ng-container i18n *ngSwitchCase="UserNotificationType.BLACKLIST_ON_MY_VIDEO">
+        <my-global-icon iconName="no"></my-global-icon>
+        <div class="message">
+          Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.videoBlacklist.video.name }}</a> has been blacklisted
+        </div>
+      </ng-container>
+      <ng-container i18n *ngSwitchCase="UserNotificationType.NEW_VIDEO_ABUSE_FOR_MODERATORS">
+        <my-global-icon iconName="alert"></my-global-icon>
+        <div class="message">
+          <a (click)="markAsRead(notification)" [routerLink]="notification.videoAbuseUrl">A new video abuse</a> has been created on video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.videoAbuse.video.name }}</a>
+        </div>
+      </ng-container>
+      <ng-container i18n *ngSwitchCase="UserNotificationType.NEW_COMMENT_ON_MY_VIDEO">
+        <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.comment.account.avatarUrl" />
+        <div class="message">
+          <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.comment.account.displayName }}</a> commented your video <a (click)="markAsRead(notification)" [routerLink]="notification.commentUrl">{{ notification.comment.video.name }}</a>
+        </div>
+      </ng-container>
+      <ng-container i18n *ngSwitchCase="UserNotificationType.MY_VIDEO_PUBLISHED">
+        <my-global-icon iconName="sparkle"></my-global-icon>
+        <div class="message">
+          Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.video.name }}</a> has been published
+        </div>
+      </ng-container>
+      <ng-container i18n *ngSwitchCase="UserNotificationType.MY_VIDEO_IMPORT_SUCCESS">
+        <my-global-icon iconName="cloud-download"></my-global-icon>
+        <div class="message">
+          <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">Your video import</a> {{ notification.videoImportIdentifier }} succeeded
+        </div>
+      </ng-container>
+      <ng-container i18n *ngSwitchCase="UserNotificationType.MY_VIDEO_IMPORT_ERROR">
+        <my-global-icon iconName="cloud-error"></my-global-icon>
+        <div class="message">
+          <a (click)="markAsRead(notification)" [routerLink]="notification.videoImportUrl">Your video import</a> {{ notification.videoImportIdentifier }} failed
+        </div>
+      </ng-container>
+      <ng-container i18n *ngSwitchCase="UserNotificationType.NEW_USER_REGISTRATION">
+        <my-global-icon iconName="user-add"></my-global-icon>
+        <div class="message">
+          User <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.account.name }} registered</a> on your instance
+        </div>
+      </ng-container>
+      <ng-container i18n *ngSwitchCase="UserNotificationType.NEW_FOLLOW">
+        <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.actorFollow.follower.avatarUrl" />
+        <div class="message">
+          <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.actorFollow.follower.displayName }}</a> is following
+          <ng-container *ngIf="notification.actorFollow.following.type === 'channel'">your channel {{ notification.actorFollow.following.displayName }}</ng-container>
+          <ng-container *ngIf="notification.actorFollow.following.type === 'account'">your account</ng-container>
+        </div>
+      </ng-container>
+      <ng-container i18n *ngSwitchCase="UserNotificationType.COMMENT_MENTION">
+        <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.comment.account.avatarUrl" />
+        <div class="message">
+          <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.comment.account.displayName }}</a> mentioned you on <a (click)="markAsRead(notification)" [routerLink]="notification.commentUrl">video {{ notification.comment.video.name }}</a>
+        </div>
+      </ng-container>
+    </ng-container>
+    <div class="from-date">{{ notification.createdAt | myFromNow }}</div>
+  </div>
+</div>
diff --git a/client/src/app/shared/users/user-notifications.component.scss b/client/src/app/shared/users/user-notifications.component.scss
new file mode 100644
index 000000000..315d504c9
--- /dev/null
+++ b/client/src/app/shared/users/user-notifications.component.scss
@@ -0,0 +1,51 @@
+@import '_variables';
+@import '_mixins';
+.no-notification {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px 0;
+}
+.notification {
+  display: flex;
+  align-items: center;
+  font-size: inherit;
+  padding: 15px 5px 15px 10px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
+  &.unread {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+  my-global-icon {
+    width: 24px;
+    margin-right: 11px;
+    margin-left: 3px;
+    @include apply-svg-color(#333);
+  }
+  .avatar {
+    @include avatar(30px);
+    margin-right: 10px;
+  }
+  .message {
+    flex-grow: 1;
+    a {
+      font-weight: $font-semibold;
+    }
+  }
+  .from-date {
+    font-size: 0.85em;
+    color: $grey-foreground-color;
+    padding-left: 5px;
+    min-width: 70px;
+    text-align: right;
+  }
+}
diff --git a/client/src/app/shared/users/user-notifications.component.ts b/client/src/app/shared/users/user-notifications.component.ts
new file mode 100644
index 000000000..b5f9fd399
--- /dev/null
+++ b/client/src/app/shared/users/user-notifications.component.ts
@@ -0,0 +1,87 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { UserNotificationService } from '@app/shared/users/user-notification.service'
+import { UserNotificationType } from '../../../../../shared'
+import { ComponentPagination, hasMoreItems } from '@app/shared/rest/component-pagination.model'
+import { Notifier } from '@app/core'
+import { UserNotification } from '@app/shared/users/user-notification.model'
+@Component({
+  selector: 'my-user-notifications',
+  templateUrl: 'user-notifications.component.html',
+  styleUrls: [ 'user-notifications.component.scss' ]
+})
+export class UserNotificationsComponent implements OnInit {
+  @Input() ignoreLoadingBar = false
+  @Input() infiniteScroll = true
+  @Input() itemsPerPage = 20
+  notifications: UserNotification[] = []
+  // So we can access it in the template
+  UserNotificationType = UserNotificationType
+  componentPagination: ComponentPagination
+  constructor (
+    private userNotificationService: UserNotificationService,
+    private notifier: Notifier
+  ) { }
+  ngOnInit () {
+    this.componentPagination = {
+      currentPage: 1,
+      itemsPerPage: this.itemsPerPage, // Reset items per page, because of the @Input() variable
+      totalItems: null
+    }
+    this.loadMoreNotifications()
+  }
+  loadMoreNotifications () {
+    this.userNotificationService.listMyNotifications(this.componentPagination, undefined, this.ignoreLoadingBar)
+        .subscribe(
+          result => {
+            this.notifications = this.notifications.concat(result.data)
+            this.componentPagination.totalItems = result.total
+          },
+          err => this.notifier.error(err.message)
+        )
+  }
+  onNearOfBottom () {
+    if (this.infiniteScroll === false) return
+    this.componentPagination.currentPage++
+    if (hasMoreItems(this.componentPagination)) {
+      this.loadMoreNotifications()
+    }
+  }
+  markAsRead (notification: UserNotification) {
+    if (notification.read) return
+    this.userNotificationService.markAsRead(notification)
+        .subscribe(
+          () => {
+            notification.read = true
+          },
+          err => this.notifier.error(err.message)
+        )
+  }
+  markAllAsRead () {
+    this.userNotificationService.markAllAsRead()
+        .subscribe(
+          () => {
+            for (const notification of this.notifications) {
+              notification.read = true
+            }
+          },
+          err => this.notifier.error(err.message)
+        )
+  }
+}
diff --git a/client/src/app/shared/users/user.model.ts b/client/src/app/shared/users/user.model.ts
index 9819829fd..c15f1de8c 100644
--- a/client/src/app/shared/users/user.model.ts
+++ b/client/src/app/shared/users/user.model.ts
@@ -1,33 +1,8 @@
-import {
+import { hasUserRight, User as UserServerModel, UserNotificationSetting, UserRight, UserRole, VideoChannel } from '../../../../../shared'
-  Account as AccountServerModel,
-  hasUserRight,
-  User as UserServerModel,
-  UserRight,
-  UserRole,
-  VideoChannel
-} from '../../../../../shared'
 import { NSFWPolicyType } from '../../../../../shared/models/videos/nsfw-policy.type'
 import { Account } from '@app/shared/account/account.model'
 import { Avatar } from '../../../../../shared/models/avatars/avatar.model'
-export type UserConstructorHash = {
-  id: number,
-  username: string,
-  email: string,
-  role: UserRole,
-  emailVerified?: boolean,
-  videoQuota?: number,
-  videoQuotaDaily?: number,
-  nsfwPolicy?: NSFWPolicyType,
-  webTorrentEnabled?: boolean,
-  autoPlayVideo?: boolean,
-  createdAt?: Date,
-  account?: AccountServerModel,
-  videoChannels?: VideoChannel[]
-  blocked?: boolean
-  blockedReason?: string
-}
 export class User implements UserServerModel {
  id: number
  username: string
@@ -35,8 +10,11 @@ export class User implements UserServerModel {
  emailVerified: boolean
  role: UserRole
  nsfwPolicy: NSFWPolicyType
  webTorrentEnabled: boolean
  autoPlayVideo: boolean
+  videosHistoryEnabled: boolean
  videoQuota: number
  videoQuotaDaily: number
  account: Account
@@ -46,7 +24,9 @@ export class User implements UserServerModel {
  blocked: boolean
  blockedReason?: string
-  constructor (hash: UserConstructorHash) {
+  notificationSettings?: UserNotificationSetting
+  constructor (hash: Partial<UserServerModel>) {
    this.id = hash.id
    this.username = hash.username
    this.email = hash.email
@@ -57,11 +37,14 @@ export class User implements UserServerModel {
    this.videoQuotaDaily = hash.videoQuotaDaily
    this.nsfwPolicy = hash.nsfwPolicy
    this.webTorrentEnabled = hash.webTorrentEnabled
+    this.videosHistoryEnabled = hash.videosHistoryEnabled
    this.autoPlayVideo = hash.autoPlayVideo
    this.createdAt = hash.createdAt
    this.blocked = hash.blocked
    this.blockedReason = hash.blockedReason
+    this.notificationSettings = hash.notificationSettings
    if (hash.account !== undefined) {
      this.account = new Account(hash.account)
    }
diff --git a/client/src/app/shared/video-abuse/video-abuse.service.ts b/client/src/app/shared/video-abuse/video-abuse.service.ts
index 61b7e1b98..b0b59ea0c 100644
--- a/client/src/app/shared/video-abuse/video-abuse.service.ts
+++ b/client/src/app/shared/video-abuse/video-abuse.service.ts
@@ -32,9 +32,7 @@ export class VideoAbuseService {
  reportVideo (id: number, reason: string) {
    const url = VideoAbuseService.BASE_VIDEO_ABUSE_URL + id + '/abuse'
-    const body = {
+    const body = { reason }
-      reason
-    }
    return this.authHttp.post(url, body)
               .pipe(
diff --git a/client/src/app/shared/video-blacklist/video-blacklist.service.ts b/client/src/app/shared/video-blacklist/video-blacklist.service.ts
index 7d39fd4f2..94e46d7c2 100644
--- a/client/src/app/shared/video-blacklist/video-blacklist.service.ts
+++ b/client/src/app/shared/video-blacklist/video-blacklist.service.ts
@@ -36,8 +36,11 @@ export class VideoBlacklistService {
               )
  }
-  blacklistVideo (videoId: number, reason?: string) {
+  blacklistVideo (videoId: number, reason: string, unfederate: boolean) {
-    const body = reason ? { reason } : {}
+    const body = {
+      unfederate,
+      reason
+    }
    return this.authHttp.post(VideoBlacklistService.BASE_VIDEOS_URL + videoId + '/blacklist', body)
               .pipe(
diff --git a/client/src/app/shared/video/abstract-video-list.html b/client/src/app/shared/video/abstract-video-list.html
index 29492351b..1f97bc389 100644
--- a/client/src/app/shared/video/abstract-video-list.html
+++ b/client/src/app/shared/video/abstract-video-list.html
@@ -1,8 +1,11 @@
 <div [ngClass]="{ 'margin-content': marginContent }">
  <div class="videos-header">
    <div *ngIf="titlePage" class="title-page title-page-single">
-      {{ titlePage }}
+      <div placement="bottom" [ngbTooltip]="titleTooltip" container="body">
+        {{ titlePage }}
+      </div>
    </div>
    <my-feed [syndicationItems]="syndicationItems"></my-feed>
    <div class="moderation-block" *ngIf="displayModerationBlock">
diff --git a/client/src/app/shared/video/abstract-video-list.scss b/client/src/app/shared/video/abstract-video-list.scss
index 9fb3fd4d6..292ede698 100644
--- a/client/src/app/shared/video/abstract-video-list.scss
+++ b/client/src/app/shared/video/abstract-video-list.scss
@@ -19,8 +19,8 @@
  my-feed {
    display: inline-block;
-    position: relative;
    top: 1px;
+    min-width: 60px;
  }
  .moderation-block {
diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts
index 2d32dd6ad..b0633be4a 100644
--- a/client/src/app/shared/video/abstract-video-list.ts
+++ b/client/src/app/shared/video/abstract-video-list.ts
@@ -3,7 +3,6 @@ import { ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { Location } from '@angular/common'
 import { InfiniteScrollerDirective } from '@app/shared/video/infinite-scroller.directive'
-import { NotificationsService } from 'angular2-notifications'
 import { fromEvent, Observable, Subscription } from 'rxjs'
 import { AuthService } from '../../core/auth'
 import { ComponentPagination } from '../rest/component-pagination.model'
@@ -13,6 +12,7 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ScreenService } from '@app/shared/misc/screen.service'
 import { OwnerDisplayType } from '@app/shared/video/video-miniature.component'
 import { Syndication } from '@app/shared/video/syndication.model'
+import { Notifier } from '@app/core'
 export abstract class AbstractVideoList implements OnInit, OnDestroy {
  private static LINES_PER_PAGE = 4
@@ -39,11 +39,12 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy {
  ownerDisplayType: OwnerDisplayType = 'account'
  firstLoadedPage: number
  displayModerationBlock = false
+  titleTooltip: string
  protected baseVideoWidth = 215
  protected baseVideoHeight = 205
-  protected abstract notificationsService: NotificationsService
+  protected abstract notifier: Notifier
  protected abstract authService: AuthService
  protected abstract router: Router
  protected abstract route: ActivatedRoute
@@ -157,7 +158,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy {
      },
      error => {
        this.loadingPage[page] = false
-        this.notificationsService.error(this.i18n('Error'), error.message)
+        this.notifier.error(error.message)
      }
    )
  }
diff --git a/client/src/app/shared/video/feed.component.html b/client/src/app/shared/video/feed.component.html
index 16116ba88..f7624ec01 100644
--- a/client/src/app/shared/video/feed.component.html
+++ b/client/src/app/shared/video/feed.component.html
@@ -1,10 +1,11 @@
 <div class="video-feed">
-  <span
+  <my-global-icon
    *ngIf="syndicationItems.length !== 0" [ngbPopover]="feedsList" [autoClose]="true" placement="bottom"
-    class="icon icon-syndication" role="button"
+    class="icon-syndication" role="button" iconName="syndication"
-  ></span>
+  >
+  </my-global-icon>
  <ng-template #feedsList>
    <a *ngFor="let item of syndicationItems" [href]="item.url" target="_blank" rel="noopener noreferrer">{{ item.label }}</a>
  </ng-template>
-</div>
-\ No newline at end of file
+</div>
diff --git a/client/src/app/shared/video/feed.component.scss b/client/src/app/shared/video/feed.component.scss
index 385764be0..ed1dc17d3 100644
--- a/client/src/app/shared/video/feed.component.scss
+++ b/client/src/app/shared/video/feed.component.scss
@@ -1,3 +1,4 @@
+@import '_variables';
 @import '_mixins';
 .video-feed {
@@ -6,14 +7,12 @@
    display: block;
  }
-  .icon {
+  my-global-icon {
-    @include icon(12px);
+    cursor: pointer;
+    width: 12px;
+    position: relative;
+    top: -2px;
-    &.icon-syndication {
+    @include apply-svg-color(var(--mainForegroundColor))
-      position: relative;
-      top: -2px;
-      background-color: var(--mainForegroundColor);
-      mask-image: url('../../../assets/images/global/syndication.svg');
-    }
  }
-}
-\ No newline at end of file
+}
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss
index 895879adc..f44bdf9a9 100644
--- a/client/src/app/shared/video/video-miniature.component.scss
+++ b/client/src/app/shared/video/video-miniature.component.scss
@@ -50,10 +50,10 @@
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 13px;
-      color: #585858;
+      color: $grey-foreground-color;
      &:hover {
-        color: #303030;
+        color: $grey-foreground-hover-color;
      }
    }
  }
diff --git a/client/src/app/shared/video/video.model.ts b/client/src/app/shared/video/video.model.ts
index b92c96450..6ea83d13b 100644
--- a/client/src/app/shared/video/video.model.ts
+++ b/client/src/app/shared/video/video.model.ts
@@ -53,7 +53,7 @@ export class Video implements VideoServerModel {
    displayName: string
    url: string
    host: string
-    avatar: Avatar
+    avatar?: Avatar
  }
  channel: {
@@ -63,7 +63,7 @@ export class Video implements VideoServerModel {
    displayName: string
    url: string
    host: string
-    avatar: Avatar
+    avatar?: Avatar
  }
  userHistory?: {