65 files changed, 1662 insertions, 433 deletions
diff --git a/client/package.json b/client/package.json
index ba4f5000d..39fd63434 100644
--- a/client/package.json
+++ b/client/package.json
@@ -100,7 +100,7 @@
    "ngx-pipes": "^2.1.7",
    "node-sass": "^4.9.3",
    "npm-font-source-sans-pro": "^1.0.2",
-    "p2p-media-loader-hlsjs": "^0.6.1",
+    "p2p-media-loader-hlsjs": "^0.6.2",
    "path-browserify": "^1.0.0",
    "primeng": "^8.0.2",
    "process": "^0.11.10",
diff --git a/client/src/app/+about/about-instance/about-instance.component.html b/client/src/app/+about/about-instance/about-instance.component.html
index 7c27ec760..25d416740 100644
--- a/client/src/app/+about/about-instance/about-instance.component.html
+++ b/client/src/app/+about/about-instance/about-instance.component.html
@@ -1,32 +1,97 @@
 <div class="row">
  <div class="col-md-12 col-xl-6">
    <div class="about-instance-title">
-      <div i18n>About {{ instanceName }} instance</div>
+      <div i18n class="title">About {{ instanceName }} instance</div>
-      <div *ngIf="isContactFormEnabled" (click)="openContactModal()" i18n role="button" class="contact-admin">Contact administrator</div>
+      <div i18n *ngIf="isContactFormEnabled" (click)="openContactModal()" role="button" class="contact-admin">Contact administrator</div>
+    </div>
+    <div class="block instance-badges">
+      <span *ngFor="let category of categories" class="badge badge-primary category">{{ category }}</span>
+      <span *ngFor="let language of languages" class="badge badge-secondary language">{{ language }}</span>
    </div>
    <div class="short-description">
-      <div>{{ shortDescription }}</div>
+      <div class="block short-description">{{ shortDescription }}</div>
+      <div i18n *ngIf="isNSFW" class="block dedicated-to-nsfw">This instance is dedicated to sensitive/NSFW content.</div>
+    </div>
+    <div i18n class="middle-title" *ngIf="html.administrator || maintenanceLifetime || businessModel">
+      Administrators & sustainability
+    </div>
+    <div class="block administrator" *ngIf="html.administrator">
+      <div i18n class="section-title">Who we are</div>
-      <div *ngIf="isNSFW" class="dedicated-to-nsfw">This instance is dedicated to sensitive/NSFW content.</div>
+      <div [innerHTML]="html.administrator"></div>
    </div>
-    <div class="description">
+    <div class="block creation-reason" *ngIf="creationReason">
+      <div i18n class="section-title">Why we created this instance</div>
+      <p>{{ creationReason }}</p>
+    </div>
+    <div class="block maintenance-lifetime" *ngIf="maintenanceLifetime">
+      <div i18n class="section-title">How long we plan to maintain this instance</div>
+      <p>{{ maintenanceLifetime }}</p>
+    </div>
+    <div class="block business-model" *ngIf="businessModel">
+      <div i18n class="section-title">How we will pay this instance</div>
+      <p>{{ businessModel }}</p>
+    </div>
+    <div i18n class="middle-title" *ngIf="html.description">
+      Information
+    </div>
+    <div class="block description">
      <div i18n class="section-title">Description</div>
-      <div [innerHTML]="descriptionHTML"></div>
+      <div [innerHTML]="html.description"></div>
+    </div>
+    <div i18n class="middle-title" *ngIf="html.moderationInformation || html.codeOfConduct || html.terms">
+      Moderation
+    </div>
+    <div class="block moderation-information" *ngIf="html.moderationInformation">
+      <div i18n class="section-title">Moderation information</div>
+      <div [innerHTML]="html.moderationInformation"></div>
    </div>
-    <div class="terms" id="terms-section">
+    <div class="block code-of-conduct" *ngIf="html.codeOfConduct">
+      <div i18n class="section-title">Code of conduct</div>
+      <div [innerHTML]="html.codeOfConduct"></div>
+    </div>
+    <div class="block terms">
      <div i18n class="section-title">Terms</div>
-      <div [innerHTML]="termsHTML"></div>
+      <div [innerHTML]="html.terms"></div>
+    </div>
+    <div i18n class="middle-title" *ngIf="html.hardwareInformation">
+      Other information
+    </div>
+    <div class="block hardware-information">
+      <div i18n class="section-title">Hardware information</div>
+      <div [innerHTML]="html.hardwareInformation"></div>
    </div>
  </div>
  <div class="col-md-12 col-xl-6">
-    <label>Features found on this instance</label>
+    <label i18n>Features found on this instance</label>
    <my-instance-features-table></my-instance-features-table>
  </div>
 </div>
diff --git a/client/src/app/+about/about-instance/about-instance.component.scss b/client/src/app/+about/about-instance/about-instance.component.scss
index 0296ae8e9..909ae5c21 100644
--- a/client/src/app/+about/about-instance/about-instance.component.scss
+++ b/client/src/app/+about/about-instance/about-instance.component.scss
@@ -5,13 +5,12 @@
  display: flex;
  justify-content: space-between;
-  & > div {
+  .title {
    font-size: 20px;
-    font-weight: bold;
+    font-weight: $font-semibold;
-    margin-bottom: 15px;
  }
-  & > .contact-admin {
+  .contact-admin {
    @include peertube-button;
    @include orange-button;
@@ -19,14 +18,38 @@
  }
 }
+.instance-badges {
+  font-size: 16px;
+  .badge {
+    font-size: 12px;
+    font-weight: $font-semibold;
+    margin-right: 5px;
+    &.category {
+      background-color: var(--mainColor);
+    }
+  }
+}
 .section-title {
  font-weight: $font-semibold;
-  font-size: 20px;
+  font-size: 16px;
  margin-bottom: 5px;
+  display: flex;
+  align-items: center;
+}
+.middle-title {
+  @include in-content-small-title;
+  margin-top: 45px;
+  margin-bottom: 25px;
 }
-.short-description, .description, .terms, .signup {
+.block {
  margin-bottom: 30px;
+  font-size: 15px;
 }
 .short-description .dedicated-to-nsfw {
diff --git a/client/src/app/+about/about-instance/about-instance.component.ts b/client/src/app/+about/about-instance/about-instance.component.ts
index a5204de27..16ccae2e2 100644
--- a/client/src/app/+about/about-instance/about-instance.component.ts
+++ b/client/src/app/+about/about-instance/about-instance.component.ts
@@ -4,6 +4,8 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-admin-modal.component'
 import { InstanceService } from '@app/shared/instance/instance.service'
 import { MarkdownService } from '@app/shared/renderer'
+import { forkJoin } from 'rxjs'
+import { first } from 'rxjs/operators'
 @Component({
  selector: 'my-about-instance',
@@ -14,8 +16,22 @@ export class AboutInstanceComponent implements OnInit {
  @ViewChild('contactAdminModal', { static: true }) contactAdminModal: ContactAdminModalComponent
  shortDescription = ''
-  descriptionHTML = ''
-  termsHTML = ''
+  html = {
+    description: '',
+    terms: '',
+    codeOfConduct: '',
+    moderationInformation: '',
+    administrator: '',
+    hardwareInformation: ''
+  }
+  creationReason = ''
+  maintenanceLifetime = ''
+  businessModel = ''
+  languages: string[] = []
+  categories: string[] = []
  constructor (
    private notifier: Notifier,
@@ -38,21 +54,30 @@ export class AboutInstanceComponent implements OnInit {
  }
  ngOnInit () {
-    this.instanceService.getAbout()
+    forkJoin([
-      .subscribe(
+      this.instanceService.getAbout(),
-        async res => {
+      this.serverService.localeObservable.pipe(first()),
-          this.shortDescription = res.instance.shortDescription
+      this.serverService.videoLanguagesLoaded.pipe(first()),
+      this.serverService.videoCategoriesLoaded.pipe(first())
+    ]).subscribe(
+      async ([ about, translations ]) => {
+        this.shortDescription = about.instance.shortDescription
-          this.descriptionHTML = await this.markdownService.textMarkdownToHTML(res.instance.description)
+        this.creationReason = about.instance.creationReason
-          this.termsHTML = await this.markdownService.textMarkdownToHTML(res.instance.terms)
+        this.maintenanceLifetime = about.instance.maintenanceLifetime
-        },
+        this.businessModel = about.instance.businessModel
-        () => this.notifier.error(this.i18n('Cannot get about information from server'))
+        this.html = await this.instanceService.buildHtml(about)
-      )
+        this.languages = this.instanceService.buildTranslatedLanguages(about, translations)
+        this.categories = this.instanceService.buildTranslatedCategories(about, translations)
+      },
+      () => this.notifier.error(this.i18n('Cannot get about information from server'))
+    )
  }
  openContactModal () {
    return this.contactAdminModal.show()
  }
 }
diff --git a/client/src/app/+about/about-peertube/about-peertube-contributors.component.html b/client/src/app/+about/about-peertube/about-peertube-contributors.component.html
new file mode 100644
index 000000000..997a6a3e1
--- /dev/null
+++ b/client/src/app/+about/about-peertube/about-peertube-contributors.component.html
@@ -0,0 +1,13 @@
+<h3 i18n class="section-title">Who made this software?</h3>
+<p align="center">
+  <strong>Developed with &#10084; by <a target="_blank" rel="noopener noreferrer" href="https://framasoft.org">Framasoft</a></strong>
+</p>
+<p align="center">
+  <a target="_blank" rel="noopener noreferrer" href="https://framasoft.org">
+    <img width="150px" src="/client/assets/images/framasoft.png" alt="Framasoft logo"/>
+  </a>
+</p>
+<div [innerHTML]="creditsHtml"></div>
diff --git a/client/src/app/+about/about-peertube/about-peertube-contributors.component.scss b/client/src/app/+about/about-peertube/about-peertube-contributors.component.scss
new file mode 100644
index 000000000..9c3b0a46b
--- /dev/null
+++ b/client/src/app/+about/about-peertube/about-peertube-contributors.component.scss
@@ -0,0 +1,15 @@
+@import '_variables';
+@import '_mixins';
+/deep/ h1 {
+  font-size: 1rem;
+}
+/deep/ ul {
+  padding: 0;
+  li {
+    display: inline-block;
+    margin-right: 10px;
+  }
+}
diff --git a/client/src/app/+about/about-peertube/about-peertube-contributors.component.ts b/client/src/app/+about/about-peertube/about-peertube-contributors.component.ts
new file mode 100644
index 000000000..fa2c0daa0
--- /dev/null
+++ b/client/src/app/+about/about-peertube/about-peertube-contributors.component.ts
@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core'
+import { MarkdownService } from '@app/shared/renderer'
+@Component({
+  selector: 'my-about-peertube-contributors',
+  templateUrl: './about-peertube-contributors.component.html',
+  styleUrls: [ './about-peertube-contributors.component.scss' ]
+})
+export class AboutPeertubeContributorsComponent implements OnInit {
+  creditsHtml: string
+  private markdown = require('raw-loader!../../../../../CREDITS.md')
+  constructor (private markdownService: MarkdownService) { }
+  async ngOnInit () {
+    this.creditsHtml = await this.markdownService.completeMarkdownToHTML(this.markdown)
+  }
+}
diff --git a/client/src/app/+about/about-peertube/about-peertube.component.html b/client/src/app/+about/about-peertube/about-peertube.component.html
index d3fc9a828..423f7bce7 100644
--- a/client/src/app/+about/about-peertube/about-peertube.component.html
+++ b/client/src/app/+about/about-peertube/about-peertube.component.html
@@ -14,84 +14,89 @@
  </p>
 </div>
-<div id="p2p-privacy">
+<div class="privacy-contributors">
-  <h3 i18n class="section-title">P2P & Privacy</h3>
+  <my-about-peertube-contributors></my-about-peertube-contributors>
+  <div class="p2p-privacy">
+    <h3 i18n class="section-title">P2P & Privacy</h3>
+    <p i18n>
+      PeerTube uses the BitTorrent protocol to share bandwidth between users.
+      This implies that your IP address is stored in the instance's BitTorrent tracker as long as you download or watch the video.
+    </p>
+    <h6 i18n class="p2p-privacy-title">What are the consequences?</h6>
+    <p i18n>
+      In theory, someone with enough technical skills could create a script that tracks which IP is downloading which video.
+      In practice, this is much more difficult because:
+    </p>
+    <ul>
+      <li i18n>
+        An HTTP request has to be sent on each tracker for each video to spy.
+        If we want to spy all PeerTube's videos, we have to send as many requests as there are videos (so potentially a lot)
+      </li>
+      <li i18n>
+        For each request sent, the tracker returns random peers at a limited number.
+        For instance, if there are 1000 peers in the swarm and the tracker sends only 20 peers for each request, there must be at least 50 requests sent to know every peers in the swarm
+      </li>
+      <li i18n>
+        Those requests have to be sent regularly to know who starts/stops watching a video. It is easy to detect that kind of behaviour
+      </li>
+      <li i18n>
+        If an IP address is stored in the tracker, it doesn't mean that the person behind the IP (if this person exists) has watched the video
+      </li>
+      <li i18n>
+        The IP address is a vague information : usually, it regularly changes and can represent many persons or entities
+      </li>
+      <li i18n>
+        Web peers are not publicly accessible: because we use WebRTC inside the web browser (<a href="https://webtorrent.io/">with the WebTorrent library</a>), the protocol is different from classic BitTorrent.
+        When you are in a web browser, you send a signal containing your IP address to the tracker that will randomly choose other peers to forward the information to.
+        See <a href="https://github.com/yciabaud/webtorrent/blob/beps/bep_webrtc.rst">this document</a> for more information
+      </li>
+    </ul>
+    <p i18n>
+      The worst-case scenario of an average person spying on their friends is quite unlikely.
+      There are much more effective ways to get that kind of information.
+    </p>
+    <h6 i18n class="p2p-privacy-title">How does PeerTube compare with YouTube?</h6>
+    <p i18n>
+      The threats to privacy in YouTube are different from PeerTube's.
+      In YouTube's case, the platform gathers a huge amount of your personal information (not only your IP) to analyze them and track you.
+      Moreover, YouTube is owned by Google/Alphabet, a company that tracks you across many websites (via AdSense or Google Analytics).
+    </p>
+    <h6 i18n class="p2p-privacy-title">What can I do to limit the exposure of my IP address?</h6>
+    <p i18n>
+      Your IP address is public so every time you consult a website, there is a number of actors (in addition to the final website) seeing your IP in their connection logs: ISP/routers/trackers/CDN and more.
+      PeerTube is transparent about it: we warn you that if you want to keep your IP private, you must use a VPN or Tor Browser.
+      Thinking that removing P2P from PeerTube will give you back anonymity doesn't make sense.
+    </p>
+    <h6 i18n class="p2p-privacy-title">What will be done to mitigate this problem?</h6>
+    <p i18n>
+      PeerTube is in its early stages, and want to deliver the best countermeasures possible by the time the stable is released.
+      In the meantime, we want to test different ideas related to this issue:
+    </p>
+    <ul>
+      <li i18n>Set a limit to the number of peers sent by the tracker</li>
+      <li i18n>Set a limit on the request frequency received by the tracker (being tested)</li>
+      <li i18n>Ring a bell if there are unusual requests (being tested)</li>
+      <li i18n>Disable P2P from the administration interface</li>
+      <li i18n>An automatic video redundancy program: we wouldn't know if the IP downloaded the video on purpose or if it was the automatized program</li>
+    </ul>
+  </div>
-  <p i18n>
-    PeerTube uses the BitTorrent protocol to share bandwidth between users.
-    This implies that your IP address is stored in the instance's BitTorrent tracker as long as you download or watch the video.
-  </p>
-  <h6 i18n class="p2p-privacy-title">What are the consequences?</h6>
-  <p i18n>
-    In theory, someone with enough technical skills could create a script that tracks which IP is downloading which video.
-    In practice, this is much more difficult because:
-  </p>
-  <ul>
-    <li i18n>
-      An HTTP request has to be sent on each tracker for each video to spy.
-      If we want to spy all PeerTube's videos, we have to send as many requests as there are videos (so potentially a lot)
-    </li>
-    <li i18n>
-      For each request sent, the tracker returns random peers at a limited number.
-      For instance, if there are 1000 peers in the swarm and the tracker sends only 20 peers for each request, there must be at least 50 requests sent to know every peers in the swarm
-    </li>
-    <li i18n>
-      Those requests have to be sent regularly to know who starts/stops watching a video. It is easy to detect that kind of behaviour
-    </li>
-    <li i18n>
-      If an IP address is stored in the tracker, it doesn't mean that the person behind the IP (if this person exists) has watched the video
-    </li>
-    <li i18n>
-      The IP address is a vague information : usually, it regularly changes and can represent many persons or entities
-    </li>
-    <li i18n>
-      Web peers are not publicly accessible: because we use WebRTC inside the web browser (<a href="https://webtorrent.io/">with the WebTorrent library</a>), the protocol is different from classic BitTorrent.
-      When you are in a web browser, you send a signal containing your IP address to the tracker that will randomly choose other peers to forward the information to.
-      See <a href="https://github.com/yciabaud/webtorrent/blob/beps/bep_webrtc.rst">this document</a> for more information
-    </li>
-  </ul>
-  <p i18n>
-    The worst-case scenario of an average person spying on their friends is quite unlikely.
-    There are much more effective ways to get that kind of information.
-  </p>
-  <h6 i18n class="p2p-privacy-title">How does PeerTube compare with YouTube?</h6>
-  <p i18n>
-    The threats to privacy in YouTube are different from PeerTube's.
-    In YouTube's case, the platform gathers a huge amount of your personal information (not only your IP) to analyze them and track you.
-    Moreover, YouTube is owned by Google/Alphabet, a company that tracks you across many websites (via AdSense or Google Analytics).
-  </p>
-  <h6 i18n class="p2p-privacy-title">What can I do to limit the exposure of my IP address?</h6>
-  <p i18n>
-    Your IP address is public so every time you consult a website, there is a number of actors (in addition to the final website) seeing your IP in their connection logs: ISP/routers/trackers/CDN and more.
-    PeerTube is transparent about it: we warn you that if you want to keep your IP private, you must use a VPN or Tor Browser.
-    Thinking that removing P2P from PeerTube will give you back anonymity doesn't make sense.
-  </p>
-  <h6 i18n class="p2p-privacy-title">What will be done to mitigate this problem?</h6>
-  <p i18n>
-    PeerTube is in its early stages, and want to deliver the best countermeasures possible by the time the stable is released.
-    In the meantime, we want to test different ideas related to this issue:
-  </p>
-  <ul>
-    <li i18n>Set a limit to the number of peers sent by the tracker</li>
-    <li i18n>Set a limit on the request frequency received by the tracker (being tested)</li>
-    <li i18n>Ring a bell if there are unusual requests (being tested)</li>
-    <li i18n>Disable P2P from the administration interface</li>
-    <li i18n>An automatic video redundancy program: we wouldn't know if the IP downloaded the video on purpose or if it was the automatized program</li>
-  </ul>
 </div>
diff --git a/client/src/app/+about/about-peertube/about-peertube.component.scss b/client/src/app/+about/about-peertube/about-peertube.component.scss
index 0d2e2bb68..8fca53e90 100644
--- a/client/src/app/+about/about-peertube/about-peertube.component.scss
+++ b/client/src/app/+about/about-peertube/about-peertube.component.scss
@@ -2,12 +2,12 @@
 @import '_mixins';
 .about-peertube-title {
-  font-size: 25px;
+  font-size: 20px;
-  font-weight: bold;
+  font-weight: $font-semibold;
  margin-bottom: 15px;
 }
-.section-title {
+/deep/ .section-title {
  font-weight: $font-semibold;
  font-size: 20px;
  margin-bottom: 5px;
@@ -17,6 +17,41 @@
  margin-bottom: 30px;
 }
+.description,
+.p2p-privacy,
+my-about-peertube-contributors {
+  /deep/ {
+    p, li {
+      font-size: 15px;
+    }
+  }
+}
 .p2p-privacy-title {
  margin-top: 15px;
-}
-\ No newline at end of file
+}
+.privacy-contributors {
+  display: flex;
+  flex-direction: row;
+  > div,
+  > my-about-peertube-contributors {
+    flex-basis: 100%;
+    display: block;
+  }
+  .p2p-privacy {
+    h6 {
+      font-size: 20px;
+    }
+  }
+  my-about-peertube-contributors {
+    margin: 0 40px 40px 0;
+  }
+  @media screen and (max-width: $small-view) {
+    flex-direction: column;
+  }
+}
diff --git a/client/src/app/+about/about.module.ts b/client/src/app/+about/about.module.ts
index 49a7a52f8..14bf76e55 100644
--- a/client/src/app/+about/about.module.ts
+++ b/client/src/app/+about/about.module.ts
@@ -1,5 +1,4 @@
 import { NgModule } from '@angular/core'
 import { AboutRoutingModule } from './about-routing.module'
 import { AboutComponent } from './about.component'
 import { SharedModule } from '../shared'
@@ -7,6 +6,7 @@ import { AboutInstanceComponent } from '@app/+about/about-instance/about-instanc
 import { AboutPeertubeComponent } from '@app/+about/about-peertube/about-peertube.component'
 import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-admin-modal.component'
 import { AboutFollowsComponent } from '@app/+about/about-follows/about-follows.component'
+import { AboutPeertubeContributorsComponent } from '@app/+about/about-peertube/about-peertube-contributors.component'
 @NgModule({
  imports: [
@@ -19,6 +19,7 @@ import { AboutFollowsComponent } from '@app/+about/about-follows/about-follows.c
    AboutInstanceComponent,
    AboutPeertubeComponent,
    AboutFollowsComponent,
+    AboutPeertubeContributorsComponent,
    ContactAdminModalComponent
  ],
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
index fe9d856d0..54115055a 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
@@ -2,12 +2,13 @@
  <ngb-tabset class="root-tabset bootstrap">
-    <ngb-tab i18n-title title="Basic configuration">
+    <ngb-tab i18n-title title="Instance information">
      <ng-template ngbTabContent>
-        <div i18n class="inner-form-title">Instance</div>
        <ng-container formGroupName="instance">
+          <div i18n class="inner-form-title">Instance</div>
          <div class="form-group">
            <label i18n for="instanceName">Name</label>
            <input
@@ -20,7 +21,7 @@
          <div class="form-group">
            <label i18n for="instanceShortDescription">Short description</label>
            <textarea
-              id="instanceShortDescription" formControlName="shortDescription"
+              id="instanceShortDescription" formControlName="shortDescription" class="small"
              [ngClass]="{ 'input-error': formErrors['instance.shortDescription'] }"
            ></textarea>
            <div *ngIf="formErrors.instance.shortDescription" class="form-error">{{ formErrors.instance.shortDescription }}</div>
@@ -36,42 +37,56 @@
          </div>
          <div class="form-group">
-            <label i18n for="instanceTerms">Terms</label><my-help helpType="markdownText"></my-help>
+            <label i18n for="instanceCategories">Main instance categories</label>
-            <my-markdown-textarea
-              id="instanceTerms" formControlName="terms" textareaWidth="500px" [previewColumn]="true"
+            <div>
-              [ngClass]="{ 'input-error': formErrors['instance.terms'] }"
+              <p-multiSelect
-            ></my-markdown-textarea>
+                inputId="instanceCategories" [options]="categoryItems" formControlName="categories" showToggleAll="false"
-            <div *ngIf="formErrors.instance.terms" class="form-error">{{ formErrors.instance.terms }}</div>
+                [defaultLabel]="getDefaultCategoryLabel()" [selectedItemsLabel]="getSelectedCategoryLabel()"
+                emptyFilterMessage="No results found" i18n-emptyFilterMessage
+              ></p-multiSelect>
+            </div>
          </div>
          <div class="form-group">
-            <my-peertube-checkbox
+            <label i18n for="instanceLanguages">Main languages you/your moderators speak</label>
-              inputName="instanceIsNSFW" formControlName="isNSFW"
-              i18n-labelText labelText="Dedicated to sensitive or NSFW content"
+            <div>
-              i18n-helpHtml helpHtml="Enabling it will allow other administrators to know that you are mainly federating sensitive content.<br /><br />
+              <p-multiSelect
-              Moreover, the NSFW checkbox on video upload will be automatically checked by default."
+                inputId="instanceLanguages" [options]="languageItems" formControlName="languages" showToggleAll="false"
-            ></my-peertube-checkbox>
+                [defaultLabel]="getDefaultLanguageLabel()" [selectedItemsLabel]="getSelectedLanguageLabel()"
+                emptyFilterMessage="No results found" i18n-emptyFilterMessage
+              ></p-multiSelect>
+            </div>
          </div>
+          <div i18n class="inner-form-title">Moderation & NSFW</div>
          <div class="form-group">
-            <label i18n for="instanceDefaultClientRoute">Default client route</label>
+            <my-peertube-checkbox inputName="instanceIsNSFW" formControlName="isNSFW">
-            <div class="peertube-select-container">
+              <ng-template ptTemplate="label">
-              <select id="instanceDefaultClientRoute" formControlName="defaultClientRoute">
+                <ng-container i18n>This instance is dedicated to sensitive or NSFW content</ng-container>
-                <option i18n value="/videos/overview">Videos Overview</option>
+              </ng-template>
-                <option i18n value="/videos/trending">Videos Trending</option>
-                <option i18n value="/videos/recently-added">Videos Recently Added</option>
+              <ng-template ptTemplate="help">
-                <option i18n value="/videos/local">Local videos</option>
+                <ng-container i18n>
-              </select>
+                  Enabling it will allow other administrators to know that you are mainly federating sensitive content.<br /><br />
-            </div>
+                  Moreover, the NSFW checkbox on video upload will be automatically checked by default.
-            <div *ngIf="formErrors.instance.defaultClientRoute" class="form-error">{{ formErrors.instance.defaultClientRoute }}</div>
+                </ng-container>
+              </ng-template>
+            </my-peertube-checkbox>
          </div>
          <div class="form-group">
            <label i18n for="instanceDefaultNSFWPolicy">Policy on videos containing sensitive content</label>
-            <my-help
-              helpType="custom" i18n-customHtml
+            <my-help>
-              customHtml="With <strong>Do not list</strong> or <strong>Blur thumbnails</strong>, a confirmation will be requested to watch the video."
+              <ng-template ptTemplate="customHtml">
-            ></my-help>
+                <ng-container i18n>
+                  With <strong>Do not list</strong> or <strong>Blur thumbnails</strong>, a confirmation will be requested to watch the video.
+                </ng-container>
+              </ng-template>
+            </my-help>
            <div class="peertube-select-container">
              <select id="instanceDefaultNSFWPolicy" formControlName="defaultNSFWPolicy">
@@ -82,10 +97,105 @@
            </div>
            <div *ngIf="formErrors.instance.defaultNSFWPolicy" class="form-error">{{ formErrors.instance.defaultNSFWPolicy }}</div>
          </div>
+          <div class="form-group">
+            <label i18n for="instanceTerms">Terms</label><my-help helpType="markdownText"></my-help>
+            <my-markdown-textarea
+              id="instanceTerms" formControlName="terms" textareaWidth="500px" [previewColumn]="true"
+              [ngClass]="{ 'input-error': formErrors['instance.terms'] }"
+            ></my-markdown-textarea>
+            <div *ngIf="formErrors.instance.terms" class="form-error">{{ formErrors.instance.terms }}</div>
+          </div>
+          <div class="form-group">
+            <label i18n for="instanceCodeOfConduct">Code of conduct</label><my-help helpType="markdownText"></my-help>
+            <my-markdown-textarea
+              id="instanceCodeOfConduct" formControlName="codeOfConduct" textareaWidth="500px" [previewColumn]="true"
+              [ngClass]="{ 'input-error': formErrors['instance.codeOfConduct'] }"
+            ></my-markdown-textarea>
+            <div *ngIf="formErrors.instance.codeOfConduct" class="form-error">{{ formErrors.instance.codeOfConduct }}</div>
+          </div>
+          <div class="form-group">
+            <label i18n for="instanceModerationInformation">Moderation information</label><my-help helpType="markdownText"></my-help>
+            <div class="label-small-info">Who moderates the instance? What is the policy regarding NSFW videos? Political videos? etc</div>
+            <my-markdown-textarea
+              id="instanceModerationInformation" formControlName="moderationInformation" textareaWidth="500px" [previewColumn]="true"
+              [ngClass]="{ 'input-error': formErrors['instance.moderationInformation'] }"
+            ></my-markdown-textarea>
+            <div *ngIf="formErrors.instance.moderationInformation" class="form-error">{{ formErrors.instance.moderationInformation }}</div>
+          </div>
+          <div i18n class="inner-form-title">You and your instance</div>
+          <div class="form-group">
+            <label i18n for="instanceAdministrator">Who is behind the instance?</label>
+            <div class="label-small-info">A single person? A non profit? A company?</div>
+            <my-markdown-textarea
+              id="instanceAdministrator" formControlName="administrator" textareaWidth="500px" textareaHeight="75px" [previewColumn]="true"
+              [classes]="{ 'input-error': formErrors['instance.administrator'] }"
+            ></my-markdown-textarea>
+            <div *ngIf="formErrors.instance.administrator" class="form-error">{{ formErrors.instance.administrator }}</div>
+          </div>
+          <div class="form-group">
+            <label i18n for="instanceCreationReason">Why did you create this instance?</label>
+            <div class="label-small-info">To share your personal videos? To open registrations and allow people to upload what they want?</div>
+            <textarea
+              id="instanceCreationReason" formControlName="creationReason" class="small"
+              [ngClass]="{ 'input-error': formErrors['instance.creationReason'] }"
+            ></textarea>
+            <div *ngIf="formErrors.instance.creationReason" class="form-error">{{ formErrors.instance.creationReason }}</div>
+          </div>
+          <div class="form-group">
+            <label i18n for="instanceMaintenanceLifetime">How long do you plan to maintain this instance?</label>
+            <div class="label-small-info">It's important to know for users who want to register on your instance</div>
+            <textarea
+              id="instanceMaintenanceLifetime" formControlName="maintenanceLifetime" class="small"
+              [ngClass]="{ 'input-error': formErrors['instance.maintenanceLifetime'] }"
+            ></textarea>
+            <div *ngIf="formErrors.instance.maintenanceLifetime" class="form-error">{{ formErrors.instance.maintenanceLifetime }}</div>
+          </div>
+          <div class="form-group">
+            <label i18n for="instanceBusinessModel">How will you pay the PeerTube instance server?</label>
+            <div class="label-small-info">With you own funds? With users donations? Advertising?</div>
+            <textarea
+              id="instanceBusinessModel" formControlName="businessModel" class="small"
+              [ngClass]="{ 'input-error': formErrors['instance.businessModel'] }"
+            ></textarea>
+            <div *ngIf="formErrors.instance.businessModel" class="form-error">{{ formErrors.instance.businessModel }}</div>
+          </div>
+          <div i18n class="inner-form-title">Other information</div>
+          <div class="form-group">
+            <label i18n for="instanceHardwareInformation">On what server/hardware the instance runs?</label>
+            <div class="label-small-info">2vCore 2GB RAM/or directly the link to the server you rent etc</div>
+            <my-markdown-textarea
+              id="instanceHardwareInformation" formControlName="hardwareInformation" textareaWidth="500px" textareaHeight="75px" [previewColumn]="true"
+              [classes]="{ 'input-error': formErrors['instance.hardwareInformation'] }"
+            ></my-markdown-textarea>
+            <div *ngIf="formErrors.instance.hardwareInformation" class="form-error">{{ formErrors.instance.hardwareInformation }}</div>
+          </div>
        </ng-container>
+      </ng-template>
+    </ngb-tab>
+    <ngb-tab i18n-title title="Basic configuration">
+      <ng-template ngbTabContent>
-        <div i18n class="inner-form-title">Theme</div>
+        <div i18n class="inner-form-title">Theme & Default route</div>
        <ng-container formGroupName="theme">
          <div class="form-group">
@@ -102,6 +212,19 @@
        </ng-container>
+        <div class="form-group" formGroupName="instance">
+          <label i18n for="instanceDefaultClientRoute">Default client route</label>
+          <div class="peertube-select-container">
+            <select id="instanceDefaultClientRoute" formControlName="defaultClientRoute">
+              <option i18n value="/videos/overview">Videos Discover</option>
+              <option i18n value="/videos/trending">Videos Trending</option>
+              <option i18n value="/videos/recently-added">Videos Recently Added</option>
+              <option i18n value="/videos/local">Local videos</option>
+            </select>
+          </div>
+          <div *ngIf="formErrors.instance.defaultClientRoute" class="form-error">{{ formErrors.instance.defaultClientRoute }}</div>
+        </div>
        <div i18n class="inner-form-title">Signup</div>
        <ng-container formGroupName="signup">
@@ -221,6 +344,41 @@
          </ng-container>
        </ng-container>
+        <div i18n class="inner-form-title">Instance followings</div>
+        <ng-container formGroupName="followings">
+          <ng-container formGroupName="instance">
+            <ng-container formGroupName="autoFollowBack">
+              <div class="form-group">
+                <my-peertube-checkbox
+                  inputName="followingsInstanceAutoFollowBackEnabled" formControlName="enabled"
+                  i18n-labelText labelText="Automatically follow other instances that follow you"
+                ></my-peertube-checkbox>
+              </div>
+            </ng-container>
+            <ng-container formGroupName="autoFollowIndex">
+              <div class="form-group">
+                <my-peertube-checkbox
+                  inputName="followingsInstanceAutoFollowIndexEnabled" formControlName="enabled"
+                  i18n-labelText labelText="Automatically follow instance of the public index (below)"
+                ></my-peertube-checkbox>
+              </div>
+              <div class="form-group">
+                <label i18n for="followingsInstanceAutoFollowIndexUrl">Index URL</label>
+                <input
+                  type="text" id="followingsInstanceAutoFollowIndexUrl"
+                  formControlName="indexUrl" [ngClass]="{ 'input-error': formErrors['followings.instance.autoFollowIndex.indexUrl'] }"
+                >
+                <div *ngIf="formErrors.followings.instance.autoFollowIndex.indexUrl" class="form-error">{{ formErrors.followings.instance.autoFollowIndex.indexUrl }}</div>
+              </div>
+            </ng-container>
+          </ng-container>
+        </ng-container>
        <div i18n class="inner-form-title">Administrator</div>
@@ -252,10 +410,13 @@
            <div class="form-group">
              <label i18n for="signupLimit">Your Twitter username</label>
-              <my-help
-                helpType="custom" i18n-customHtml
+              <my-help>
-                customHtml="Indicates the Twitter account for the website or platform on which the content was published."
+                <ng-template ptTemplate="customHtml">
-              ></my-help>
+                  <ng-container i18n>Indicates the Twitter account for the website or platform on which the content was published.</ng-container>
+                </ng-template>
+              </my-help>
              <input
                type="text" id="servicesTwitterUsername"
                formControlName="username" [ngClass]="{ 'input-error': formErrors['services.twitter.username'] }"
@@ -264,13 +425,21 @@
            </div>
            <div class="form-group">
-              <my-peertube-checkbox
+              <my-peertube-checkbox inputName="servicesTwitterWhitelisted" formControlName="whitelisted">
-                inputName="servicesTwitterWhitelisted" formControlName="whitelisted"
+                <ng-template ptTemplate="label">
-                i18n-labelText labelText="Instance whitelisted by Twitter"
+                  <ng-container i18n>Instance whitelisted by Twitter</ng-container>
-                i18n-helpHtml helpHtml="If your instance is whitelisted by Twitter, a video player will be embedded in the Twitter feed on PeerTube video share.<br />
+                </ng-template>
-        If the instance is not whitelisted, we use an image link card that will redirect on your PeerTube instance.<br /><br />
-        Check this checkbox, save the configuration and test with a video URL of your instance (https://example.com/videos/watch/blabla) on <a target='_blank' rel='noopener noreferrer' href='https://cards-dev.twitter.com/validator'>https://cards-dev.twitter.com/validator</a> to see if you instance is whitelisted."
+                <ng-template ptTemplate="help">
-              ></my-peertube-checkbox>
+                  <ng-container i18n>
+                    If your instance is whitelisted by Twitter, a video player will be embedded in the Twitter feed on PeerTube video share.<br />
+                    If the instance is not whitelisted, we use an image link card that will redirect on your PeerTube instance.<br /><br />
+                    Check this checkbox, save the configuration and test with a video URL of your instance (https://example.com/videos/watch/blabla) on
+                    <a target='_blank' rel='noopener noreferrer' href='https://cards-dev.twitter.com/validator'>https://cards-dev.twitter.com/validator</a>
+                    to see if you instance is whitelisted.
+                  </ng-container>
+                </ng-template>
+              </my-peertube-checkbox>
            </div>
          </ng-container>
@@ -286,11 +455,15 @@
        <ng-container formGroupName="transcoding">
          <div class="form-group">
-            <my-peertube-checkbox
+            <my-peertube-checkbox inputName="transcodingEnabled" formControlName="enabled">
-              inputName="transcodingEnabled" formControlName="enabled"
+              <ng-template ptTemplate="label">
-              i18n-labelText labelText="Transcoding enabled"
+                <ng-container i18n>Transcoding enabled</ng-container>
-              i18n-helpHtml helpHtml="If you disable transcoding, many videos from your users will not work!"
+              </ng-template>
-            ></my-peertube-checkbox>
+              <ng-template ptTemplate="help">
+                <ng-container i18n>If you disable transcoding, many videos from your users will not work!</ng-container>
+              </ng-template>
+            </my-peertube-checkbox>
          </div>
          <ng-container *ngIf="isTranscodingEnabled()">
@@ -299,16 +472,22 @@
              <my-peertube-checkbox
                inputName="transcodingAllowAdditionalExtensions" formControlName="allowAdditionalExtensions"
                i18n-labelText labelText="Allow additional extensions"
-                i18n-helpHtml helpHtml="Allow your users to upload .mkv, .mov, .avi, .flv videos"
+              >
-              ></my-peertube-checkbox>
+                <ng-template ptTemplate="help">
+                  <ng-container i18n>Allow your users to upload .mkv, .mov, .avi, .flv videos</ng-container>
+                </ng-template>
+              </my-peertube-checkbox>
            </div>
            <div class="form-group">
              <my-peertube-checkbox
                inputName="transcodingAllowAudioFiles" formControlName="allowAudioFiles"
                i18n-labelText labelText="Allow audio files upload"
-                i18n-helpHtml helpHtml="Allow your users to upload audio files that will be merged with the preview file on upload"
+              >
-              ></my-peertube-checkbox>
+                <ng-template ptTemplate="help">
+                  <ng-container i18n>Allow your users to upload audio files that will be merged with the preview file on upload</ng-container>
+                </ng-template>
+              </my-peertube-checkbox>
            </div>
            <div class="form-group">
@@ -338,10 +517,11 @@
        <div i18n class="inner-form-title">
          Cache
-          <my-help
+          <my-help>
-            helpType="custom" i18n-customHtml
+            <ng-template ptTemplate="customHtml">
-            customHtml="Some files are not federated (previews, captions). We fetch them directly from the origin instance and cache them."
+              <ng-container i18n>Some files are not federated (previews, captions). We fetch them directly from the origin instance and cache them.</ng-container>
-          ></my-help>
+            </ng-template>
+          </my-help>
        </div>
        <ng-container formGroupName="cache">
@@ -370,38 +550,45 @@
          <ng-container formGroupName="customizations">
            <div class="form-group">
              <label i18n for="customizationJavascript">JavaScript</label>
-              <my-help
+              <my-help>
-                helpType="custom" i18n-customHtml
+                <ng-template ptTemplate="customHtml">
-                customHtml="Write directly JavaScript code.<br />Example: <pre>console.log('my instance is amazing');</pre>"
+                  <ng-container i18n>
-              ></my-help>
+                    Write directly JavaScript code.<br />Example: <pre>console.log('my instance is amazing');</pre>
+                  </ng-container>
+                </ng-template>
+              </my-help>
              <textarea
                id="customizationJavascript" formControlName="javascript"
                [ngClass]="{ 'input-error': formErrors['instance.customizations.javascript'] }"
              ></textarea>
              <div *ngIf="formErrors.instance.customizations.javascript" class="form-error">{{ formErrors.instance.customizations.javascript }}</div>
            </div>
            <div class="form-group">
              <label for="customizationCSS">CSS</label>
-              <my-help
-                  helpType="custom"
+              <my-help>
-                  i18n-customHtml
+                <ng-template ptTemplate="customHtml">
-                  customHtml="
+                  <ng-container i18n>
                    Write directly CSS code. Example:<br /><br />
-                    <pre>
+<pre>
-  #custom-css {{ '{' }}
+#custom-css {{ '{' }}
-    color: red;
+  color: red;
-  {{ '}' }}
+{{ '}' }}
-                    </pre>
+</pre>
                    Prepend with <em>#custom-css</em> to override styles. Example:<br /><br />
-                    <pre>
+<pre>
-  #custom-css .logged-in-email {{ '{' }}
+#custom-css .logged-in-email {{ '{' }}
-    color: red;
+  color: red;
-  {{ '}' }}
+{{ '}' }}
-                    </pre>
+</pre>
-                  "
+                  </ng-container>
-              ></my-help>
+                </ng-template>
+              </my-help>
              <textarea
                id="customizationCSS" formControlName="css"
                [ngClass]="{ 'input-error': formErrors['instance.customizations.css'] }"
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
index c90bd5141..2b4d0da2c 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
@@ -1,6 +1,10 @@
 @import '_variables';
 @import '_mixins';
+.form-group {
+  margin-bottom: 25px;
+}
 input[type=text] {
  @include peertube-input-text(340px);
  display: block;
@@ -40,7 +44,12 @@ textarea {
  display: block;
-  &#instanceShortDescription {
+  &.small {
-    height: 100px;
+    height: 75px;
  }
 }
+.label-small-info {
+  font-style: italic;
+  margin-bottom: 10px;
+}
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
index 8bd7f7cf6..0a69f3481 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
@@ -6,6 +6,9 @@ import { Notifier } from '@app/core'
 import { CustomConfig } from '../../../../../../shared/models/server/custom-config.model'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
+import { SelectItem } from 'primeng/api'
+import { forkJoin } from 'rxjs'
+import { first } from 'rxjs/operators'
 @Component({
  selector: 'my-edit-custom-config',
@@ -18,6 +21,9 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
  resolutions: { id: string, label: string }[] = []
  transcodingThreadOptions: { label: string, value: number }[] = []
+  languageItems: SelectItem[] = []
+  categoryItems: SelectItem[] = []
  constructor (
    protected formValidatorService: FormValidatorService,
    private customConfigValidatorsService: CustomConfigValidatorsService,
@@ -88,10 +94,26 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
        name: this.customConfigValidatorsService.INSTANCE_NAME,
        shortDescription: this.customConfigValidatorsService.INSTANCE_SHORT_DESCRIPTION,
        description: null,
-        terms: null,
-        defaultClientRoute: null,
        isNSFW: false,
        defaultNSFWPolicy: null,
+        terms: null,
+        codeOfConduct: null,
+        creationReason: null,
+        moderationInformation: null,
+        administrator: null,
+        maintenanceLifetime: null,
+        businessModel: null,
+        hardwareInformation: null,
+        categories: null,
+        languages: null,
+        defaultClientRoute: null,
        customizations: {
          javascript: null,
          css: null
@@ -158,6 +180,17 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
          enabled: null,
          manualApproval: null
        }
+      },
+      followings: {
+        instance: {
+          autoFollowBack: {
+            enabled: null
+          },
+          autoFollowIndex: {
+            enabled: null,
+            indexUrl: this.customConfigValidatorsService.INDEX_URL
+          }
+        }
      }
    }
@@ -173,18 +206,27 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
    this.buildForm(formGroupData)
-    this.configService.getCustomConfig()
+    forkJoin([
-      .subscribe(
+      this.configService.getCustomConfig(),
-        res => {
+      this.serverService.videoLanguagesLoaded.pipe(first()), // First so the observable completes
-          this.customConfig = res
+      this.serverService.videoCategoriesLoaded.pipe(first())
+    ]).subscribe(
+      ([ config ]) => {
+        this.customConfig = config
-          this.updateForm()
+        const languages = this.serverService.getVideoLanguages()
-          // Force form validation
+        this.languageItems = languages.map(l => ({ label: l.label, value: l.id }))
-          this.forceCheck()
-        },
-        err => this.notifier.error(err.message)
+        const categories = this.serverService.getVideoCategories()
-      )
+        this.categoryItems = categories.map(l => ({ label: l.label, value: l.id }))
+        this.updateForm()
+        // Force form validation
+        this.forceCheck()
+      },
+      err => this.notifier.error(err.message)
+    )
  }
  isTranscodingEnabled () {
@@ -213,8 +255,23 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
      )
  }
+  getSelectedLanguageLabel () {
+    return this.i18n('{{\'{0} languages selected')
+  }
+  getDefaultLanguageLabel () {
+    return this.i18n('No language')
+  }
+  getSelectedCategoryLabel () {
+    return this.i18n('{{\'{0} categories selected')
+  }
+  getDefaultCategoryLabel () {
+    return this.i18n('No category')
+  }
  private updateForm () {
    this.form.patchValue(this.customConfig)
  }
 }
diff --git a/client/src/app/+admin/system/debug/debug.component.html b/client/src/app/+admin/system/debug/debug.component.html
index f35414b37..75f3df601 100644
--- a/client/src/app/+admin/system/debug/debug.component.html
+++ b/client/src/app/+admin/system/debug/debug.component.html
@@ -1,7 +1,7 @@
 <div class="root">
  <h4>IP</h4>
-  <p>PeerTube thinks your public IP is <strong>{{ debug?.ip }}</strong>.</p>
+  <p>PeerTube thinks your web browser public IP is <strong>{{ debug?.ip }}</strong>.</p>
  <p>If this is not your correct public IP, please consider fixing it because:</p>
  <ul>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts
index 34febc457..76fabb19d 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts
@@ -43,7 +43,8 @@ export class MyAccountNotificationPreferencesComponent implements OnInit {
      newUserRegistration: this.i18n('A new user registered on your instance'),
      newFollow: this.i18n('You or your channel(s) has a new follower'),
      commentMention: this.i18n('Someone mentioned you in video comments'),
-      newInstanceFollower: this.i18n('Your instance has a new follower')
+      newInstanceFollower: this.i18n('Your instance has a new follower'),
+      autoInstanceFollowing: this.i18n('Your instance auto followed another instance')
    }
    this.notificationSettingKeys = Object.keys(this.labelNotifications) as (keyof UserNotificationSetting)[]
@@ -51,7 +52,8 @@ export class MyAccountNotificationPreferencesComponent implements OnInit {
      videoAbuseAsModerator: UserRight.MANAGE_VIDEO_ABUSES,
      videoAutoBlacklistAsModerator: UserRight.MANAGE_VIDEO_BLACKLIST,
      newUserRegistration: UserRight.MANAGE_USERS,
-      newInstanceFollower: UserRight.MANAGE_SERVER_FOLLOW
+      newInstanceFollower: UserRight.MANAGE_SERVER_FOLLOW,
+      autoInstanceFollowing: UserRight.MANAGE_CONFIGURATION
    }
    this.emailEnabled = this.serverService.getConfig().email.enabled
diff --git a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html
index 2796dd2db..a11238925 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html
@@ -1,10 +1,13 @@
 <form role="form" (ngSubmit)="updateDetails()" [formGroup]="form">
  <div class="form-group">
    <label i18n for="nsfwPolicy">Default policy on videos containing sensitive content</label>
-    <my-help
+    <my-help>
-      helpType="custom" i18n-customHtml
+      <ng-template ptTemplate="customHtml">
-      customHtml="With <strong>Do not list</strong> or <strong>Blur thumbnails</strong>, a confirmation will be requested to watch the video."
+        <ng-container i18n>
-    ></my-help>
+          With <strong>Do not list</strong> or <strong>Blur thumbnails</strong>, a confirmation will be requested to watch the video.
+        </ng-container>
+      </ng-template>
+    </my-help>
    <div class="peertube-select-container">
      <select id="nsfwPolicy" formControlName="nsfwPolicy">
@@ -17,13 +20,15 @@
  <div class="form-group">
    <label i18n for="videoLanguages">Only display videos in the following languages</label>
-    <my-help i18n-customHtml
+    <my-help>
-             customHtml="In Recently added, Trending, Local and Search pages"
+      <ng-template ptTemplate="customHtml">
-    ></my-help>
+        <ng-container i18n>In Recently added, Trending, Local and Search pages</ng-container>
+      </ng-template>
+    </my-help>
    <div>
      <p-multiSelect
-        [options]="languageItems" formControlName="videoLanguages" showToggleAll="true"
+        inputId="videoLanguages" [options]="languageItems" formControlName="videoLanguages" showToggleAll="true"
        [defaultLabel]="getDefaultVideoLanguageLabel()" [selectedItemsLabel]="getSelectedVideoLanguageLabel()"
        emptyFilterMessage="No results found" i18n-emptyFilterMessage
      ></p-multiSelect>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.ts b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.ts
index 77febf179..4fb828082 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.ts
@@ -5,9 +5,9 @@ import { AuthService } from '../../../core'
 import { FormReactive, User, UserService } from '../../../shared'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
-import { Subject } from 'rxjs'
+import { forkJoin, Subject } from 'rxjs'
 import { SelectItem } from 'primeng/api'
-import { switchMap } from 'rxjs/operators'
+import { first } from 'rxjs/operators'
 @Component({
  selector: 'my-account-video-settings',
@@ -39,30 +39,31 @@ export class MyAccountVideoSettingsComponent extends FormReactive implements OnI
      videoLanguages: null
    })
-    this.serverService.videoLanguagesLoaded
+    forkJoin([
-        .pipe(switchMap(() => this.userInformationLoaded))
+      this.serverService.videoLanguagesLoaded.pipe(first()),
-        .subscribe(() => {
+      this.userInformationLoaded.pipe(first())
-          const languages = this.serverService.getVideoLanguages()
+    ]).subscribe(() => {
+      const languages = this.serverService.getVideoLanguages()
-          this.languageItems = [ { label: this.i18n('Unknown language'), value: '_unknown' } ]
-          this.languageItems = this.languageItems
+      this.languageItems = [ { label: this.i18n('Unknown language'), value: '_unknown' } ]
-                                   .concat(languages.map(l => ({ label: l.label, value: l.id })))
+      this.languageItems = this.languageItems
+                               .concat(languages.map(l => ({ label: l.label, value: l.id })))
-          const videoLanguages = this.user.videoLanguages
-            ? this.user.videoLanguages
+      const videoLanguages = this.user.videoLanguages
-            : this.languageItems.map(l => l.value)
+        ? this.user.videoLanguages
+        : this.languageItems.map(l => l.value)
-          this.form.patchValue({
-            nsfwPolicy: this.user.nsfwPolicy,
+      this.form.patchValue({
-            webTorrentEnabled: this.user.webTorrentEnabled,
+        nsfwPolicy: this.user.nsfwPolicy,
-            autoPlayVideo: this.user.autoPlayVideo === true,
+        webTorrentEnabled: this.user.webTorrentEnabled,
-            videoLanguages
+        autoPlayVideo: this.user.autoPlayVideo === true,
-          })
+        videoLanguages
-        })
+      })
+    })
  }
  updateDetails () {
-    const nsfwPolicy = this.form.value['nsfwPolicy']
+    const nsfwPolicy = this.form.value[ 'nsfwPolicy' ]
    const webTorrentEnabled = this.form.value['webTorrentEnabled']
    const autoPlayVideo = this.form.value['autoPlayVideo']
diff --git a/client/src/app/+my-account/my-account.module.ts b/client/src/app/+my-account/my-account.module.ts
index 571f46de9..6cf1499d3 100644
--- a/client/src/app/+my-account/my-account.module.ts
+++ b/client/src/app/+my-account/my-account.module.ts
@@ -37,7 +37,6 @@ import {
 } from '@app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component'
 import { DragDropModule } from '@angular/cdk/drag-drop'
 import { MyAccountChangeEmailComponent } from '@app/+my-account/my-account-settings/my-account-change-email'
-import { MultiSelectModule } from 'primeng/multiselect'
 import { MyAccountInterfaceSettingsComponent } from '@app/+my-account/my-account-settings/my-account-interface'
 @NgModule({
@@ -48,8 +47,7 @@ import { MyAccountInterfaceSettingsComponent } from '@app/+my-account/my-account
    SharedModule,
    TableModule,
    InputSwitchModule,
-    DragDropModule,
+    DragDropModule
-    MultiSelectModule
  ],
  declarations: [
diff --git a/client/src/app/+signup/+register/register-step-user.component.html b/client/src/app/+signup/+register/register-step-user.component.html
index 47b3be8cc..4381702ae 100644
--- a/client/src/app/+signup/+register/register-step-user.component.html
+++ b/client/src/app/+signup/+register/register-step-user.component.html
@@ -60,11 +60,16 @@
  </div>
  <div class="form-group form-group-terms">
-    <my-peertube-checkbox
+    <my-peertube-checkbox inputName="terms" formControlName="terms">
-      inputName="terms" formControlName="terms"
+      <ng-template ptTemplate="label">
-      i18n-labelHtml
+        <ng-container i18n>
-      labelHtml="I am at least 16 years old and agree to the <a href='/about/instance#terms-section' target='_blank'rel='noopener noreferrer'>Terms</a> of this instance"
+          I am at least 16 years old and agree
-    ></my-peertube-checkbox>
+          to the <a (click)="onTermsClick($event)" href='#'>Terms</a>
+          <ng-container *ngIf="hasCodeOfConduct"> and to the <a (click)="onCodeOfConductClick($event)" href='#'>Code of Conduct</a></ng-container>
+          of this instance
+        </ng-container>
+      </ng-template>
+    </my-peertube-checkbox>
    <div *ngIf="formErrors.terms" class="form-error">
      {{ formErrors.terms }}
diff --git a/client/src/app/+signup/+register/register-step-user.component.ts b/client/src/app/+signup/+register/register-step-user.component.ts
index 3b71fd3c4..6c96f20b4 100644
--- a/client/src/app/+signup/+register/register-step-user.component.ts
+++ b/client/src/app/+signup/+register/register-step-user.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, OnInit, Output } from '@angular/core'
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
 import { AuthService } from '@app/core'
 import { FormReactive, UserService, UserValidatorsService } from '@app/shared'
 import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
@@ -12,7 +12,11 @@ import { concat, of } from 'rxjs'
  styleUrls: [ './register.component.scss' ]
 })
 export class RegisterStepUserComponent extends FormReactive implements OnInit {
+  @Input() hasCodeOfConduct = false
  @Output() formBuilt = new EventEmitter<FormGroup>()
+  @Output() termsClick = new EventEmitter<void>()
+  @Output() codeOfConductClick = new EventEmitter<void>()
  constructor (
    protected formValidatorService: FormValidatorService,
@@ -45,6 +49,16 @@ export class RegisterStepUserComponent extends FormReactive implements OnInit {
     .subscribe(([ oldValue, newValue ]) => this.onDisplayNameChange(oldValue, newValue))
  }
+  onTermsClick (event: Event) {
+    event.preventDefault()
+    this.termsClick.emit()
+  }
+  onCodeOfConductClick (event: Event) {
+    event.preventDefault()
+    this.codeOfConductClick.emit()
+  }
  private onDisplayNameChange (oldDisplayName: string, newDisplayName: string) {
    const username = this.form.value['username'] || ''
diff --git a/client/src/app/+signup/+register/register.component.html b/client/src/app/+signup/+register/register.component.html
index e4d647fef..906e29aed 100644
--- a/client/src/app/+signup/+register/register.component.html
+++ b/client/src/app/+signup/+register/register.component.html
@@ -7,11 +7,15 @@
  <my-signup-success *ngIf="signupDone" [message]="success"></my-signup-success>
  <div *ngIf="info" class="alert alert-info">{{ info }}</div>
-  <div class="wrapper" *ngIf="!signupDone">
+  <div class="wrapper" [hidden]="signupDone">
-    <div>
+    <div class="register-form">
      <my-custom-stepper linear *ngIf="!signupDone">
        <cdk-step [stepControl]="formStepUser" i18n-label label="User">
-          <my-register-step-user (formBuilt)="onUserFormBuilt($event)"></my-register-step-user>
+          <my-register-step-user
+            [hasCodeOfConduct]="!!aboutHtml.codeOfConduct"
+            (formBuilt)="onUserFormBuilt($event)" (termsClick)="onTermsClick()" (codeOfConductClick)="onCodeOfConductClick()"
+          >
+          </my-register-step-user>
          <button i18n cdkStepperNext [disabled]="!formStepUser || !formStepUser.valid">Next</button>
        </cdk-step>
@@ -38,9 +42,56 @@
      </my-custom-stepper>
    </div>
-    <div>
+    <div class="instance-information">
-      <label i18n>Features found on this instance</label>
+      <ngb-accordion [closeOthers]="true" #accordion="ngbAccordion">
-      <my-instance-features-table></my-instance-features-table>
+        <ngb-panel id="instance-features" i18n-title title="Features found on this instance">
+          <ng-template ngbPanelContent>
+            <my-instance-features-table></my-instance-features-table>
+          </ng-template>
+        </ngb-panel>
+        <ng-container *ngIf="about">
+          <ngb-panel
+            *ngIf="aboutHtml.administrator || about.instance.maintenanceLifetime || about.instance.businessModel"
+            id="admin-sustainability" i18n-title title="Administrators & Sustainability"
+          >
+            <ng-template ngbPanelContent>
+              <div class="block">
+                <strong i18n>Who are we?</strong>
+                <div [innerHTML]="aboutHtml.administrator"></div>
+              </div>
+              <div class="block">
+                <strong i18n>How long do we plan to maintain this instance?</strong>
+                <div [innerHTML]="about.instance.maintenanceLifetime"></div>
+              </div>
+              <div class="block">
+                <strong i18n>How will we pay this instance?</strong>
+                <div [innerHTML]="about.instance.businessModel"></div>
+              </div>
+            </ng-template>
+          </ngb-panel>
+          <ngb-panel *ngIf="aboutHtml.moderationInformation" id="moderation-information" i18n-title title="Moderation information">
+            <ng-template ngbPanelContent>
+              <div class="block" [innerHTML]="aboutHtml.moderationInformation"></div>
+            </ng-template>
+          </ngb-panel>
+          <ngb-panel *ngIf="aboutHtml.codeOfConduct" id="code-of-conduct" i18n-title title="Code of conduct">
+            <ng-template ngbPanelContent>
+              <div class="block" [innerHTML]="aboutHtml.codeOfConduct"></div>
+            </ng-template>
+          </ngb-panel>
+          <ngb-panel *ngIf="aboutHtml.terms" id="terms" i18n-title title="Terms">
+            <ng-template ngbPanelContent>
+              <div class="block" [innerHTML]="aboutHtml.terms"></div>
+            </ng-template>
+          </ngb-panel>
+        </ng-container>
+      </ngb-accordion>
    </div>
  </div>
diff --git a/client/src/app/+signup/+register/register.component.scss b/client/src/app/+signup/+register/register.component.scss
index 9405b5293..2f62dd59d 100644
--- a/client/src/app/+signup/+register/register.component.scss
+++ b/client/src/app/+signup/+register/register.component.scss
@@ -1,5 +1,9 @@
 @import '_variables';
 @import '_mixins';
+@import "./_bootstrap-variables";
+@import '~bootstrap/scss/functions';
+@import '~bootstrap/scss/variables';
 .alert {
  font-size: 15px;
@@ -13,7 +17,32 @@
  & > div {
    margin-bottom: 40px;
-    width: 450px;
+    &.register-form {
+      width: 450px;
+    }
+    &.instance-information {
+      width: 600px;
+      margin-bottom: 40px;
+      .block {
+        font-size: 15px;
+        margin-bottom: 15px;
+        padding: 0 $btn-padding-x;
+      }
+      @media screen and (max-width: 1500px) {
+        width: 450px;
+      }
+      ngb-accordion ::ng-deep {
+        .btn {
+          font-weight: $font-semibold !important;
+          color: var(--mainForegroundColor) !important;
+        }
+      }
+    }
    @media screen and (max-width: 500px) {
      width: auto;
@@ -21,12 +50,6 @@
  }
 }
-my-instance-features-table {
-  display: block;
-  margin-bottom: 40px;
-}
 .form-group-terms {
  margin: 30px 0;
 }
diff --git a/client/src/app/+signup/+register/register.component.ts b/client/src/app/+signup/+register/register.component.ts
index cd6059728..d470ef4dc 100644
--- a/client/src/app/+signup/+register/register.component.ts
+++ b/client/src/app/+signup/+register/register.component.ts
@@ -1,21 +1,35 @@
-import { Component } from '@angular/core'
+import { Component, OnInit, ViewChild } from '@angular/core'
 import { AuthService, Notifier, RedirectService, ServerService } from '@app/core'
 import { UserService, UserValidatorsService } from '@app/shared'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { UserRegister } from '@shared/models/users/user-register.model'
 import { FormGroup } from '@angular/forms'
+import { About } from '@shared/models/server'
+import { InstanceService } from '@app/shared/instance/instance.service'
+import { NgbAccordion } from '@ng-bootstrap/ng-bootstrap'
 @Component({
  selector: 'my-register',
  templateUrl: './register.component.html',
  styleUrls: [ './register.component.scss' ]
 })
-export class RegisterComponent {
+export class RegisterComponent implements OnInit {
+  @ViewChild('accordion', { static: true }) accordion: NgbAccordion
  info: string = null
  error: string = null
  success: string = null
  signupDone = false
+  about: About
+  aboutHtml = {
+    description: '',
+    terms: '',
+    codeOfConduct: '',
+    moderationInformation: '',
+    administrator: ''
+  }
  formStepUser: FormGroup
  formStepChannel: FormGroup
@@ -26,6 +40,7 @@ export class RegisterComponent {
    private userService: UserService,
    private serverService: ServerService,
    private redirectService: RedirectService,
+    private instanceService: InstanceService,
    private i18n: I18n
  ) {
  }
@@ -34,6 +49,19 @@ export class RegisterComponent {
    return this.serverService.getConfig().signup.requiresEmailVerification
  }
+  ngOnInit (): void {
+    this.instanceService.getAbout()
+      .subscribe(
+        async about => {
+          this.about = about
+          this.aboutHtml = await this.instanceService.buildHtml(about)
+        },
+        err => this.notifier.error(err.message)
+      )
+  }
  hasSameChannelAndAccountNames () {
    return this.getUsername() === this.getChannelName()
  }
@@ -58,6 +86,14 @@ export class RegisterComponent {
    this.formStepChannel = form
  }
+  onTermsClick () {
+    if (this.accordion) this.accordion.toggle('terms')
+  }
+  onCodeOfConductClick () {
+    if (this.accordion) this.accordion.toggle('code-of-conduct')
+  }
  signup () {
    this.error = null
diff --git a/client/src/app/+signup/+register/register.module.ts b/client/src/app/+signup/+register/register.module.ts
index 46336cbd0..e55f83990 100644
--- a/client/src/app/+signup/+register/register.module.ts
+++ b/client/src/app/+signup/+register/register.module.ts
@@ -7,13 +7,15 @@ import { RegisterStepChannelComponent } from './register-step-channel.component'
 import { RegisterStepUserComponent } from './register-step-user.component'
 import { CustomStepperComponent } from './custom-stepper.component'
 import { SignupSharedModule } from '@app/+signup/shared/signup-shared.module'
+import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap'
 @NgModule({
  imports: [
    RegisterRoutingModule,
    SharedModule,
    CdkStepperModule,
-    SignupSharedModule
+    SignupSharedModule,
+    NgbAccordionModule
  ],
  declarations: [
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index 07a576083..81b4351c5 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -54,3 +54,8 @@
    </div>
  </ng-template>
 </p-toast>
+<ng-template [ngIf]="isUserLoggedIn()">
+  <my-welcome-modal #welcomeModal></my-welcome-modal>
+  <my-instance-config-warning-modal #instanceConfigWarningModal></my-instance-config-warning-modal>
+</ng-template>
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index 64bfb9671..6b18e5feb 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -1,10 +1,10 @@
-import { Component, OnInit } from '@angular/core'
+import { Component, OnInit, ViewChild } from '@angular/core'
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
 import { Event, GuardsCheckStart, NavigationEnd, Router, Scroll } from '@angular/router'
 import { AuthService, RedirectService, ServerService, ThemeService } from '@app/core'
 import { is18nPath } from '../../../shared/models/i18n'
 import { ScreenService } from '@app/shared/misc/screen.service'
-import { debounceTime, filter, map, pairwise, skip } from 'rxjs/operators'
+import { debounceTime, filter, map, pairwise, skip, switchMap } from 'rxjs/operators'
 import { Hotkey, HotkeysService } from 'angular2-hotkeys'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { fromEvent } from 'rxjs'
@@ -13,6 +13,11 @@ import { PluginService } from '@app/core/plugins/plugin.service'
 import { HooksService } from '@app/core/plugins/hooks.service'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { POP_STATE_MODAL_DISMISS } from '@app/shared/misc/constants'
+import { WelcomeModalComponent } from '@app/modal/welcome-modal.component'
+import { InstanceConfigWarningModalComponent } from '@app/modal/instance-config-warning-modal.component'
+import { UserRole } from '@shared/models'
+import { User } from '@app/shared'
+import { InstanceService } from '@app/shared/instance/instance.service'
 @Component({
  selector: 'my-app',
@@ -20,6 +25,9 @@ import { POP_STATE_MODAL_DISMISS } from '@app/shared/misc/constants'
  styleUrls: [ './app.component.scss' ]
 })
 export class AppComponent implements OnInit {
+  @ViewChild('welcomeModal', { static: false }) welcomeModal: WelcomeModalComponent
+  @ViewChild('instanceConfigWarningModal', { static: false }) instanceConfigWarningModal: InstanceConfigWarningModalComponent
  isMenuDisplayed = true
  isMenuChangedByUser = false
@@ -32,6 +40,7 @@ export class AppComponent implements OnInit {
    private authService: AuthService,
    private serverService: ServerService,
    private pluginService: PluginService,
+    private instanceService: InstanceService,
    private domSanitizer: DomSanitizer,
    private redirectService: RedirectService,
    private screenService: ScreenService,
@@ -96,6 +105,8 @@ export class AppComponent implements OnInit {
      .subscribe(() => this.onResize())
    this.location.onPopState(() => this.modalService.dismissAll(POP_STATE_MODAL_DISMISS))
+    this.openModalsIfNeeded()
  }
  isUserLoggedIn () {
@@ -220,32 +231,66 @@ export class AppComponent implements OnInit {
    this.hooks.runAction('action:application.init', 'common')
  }
+  private async openModalsIfNeeded () {
+    this.serverService.configLoaded
+        .pipe(
+          switchMap(() => this.authService.userInformationLoaded),
+          map(() => this.authService.getUser()),
+          filter(user => user.role === UserRole.ADMINISTRATOR)
+        ).subscribe(user => setTimeout(() => this.openAdminModals(user))) // setTimeout because of ngIf in template
+  }
+  private async openAdminModals (user: User) {
+    if (user.noWelcomeModal !== true) return this.welcomeModal.show()
+    const config = this.serverService.getConfig()
+    if (user.noInstanceConfigWarningModal === true || !config.signup.allowed) return
+    this.instanceService.getAbout()
+      .subscribe(about => {
+        if (
+          config.instance.name.toLowerCase() === 'peertube' ||
+          !about.instance.terms ||
+          !about.instance.administrator ||
+          !about.instance.maintenanceLifetime
+        ) {
+          this.instanceConfigWarningModal.show(about)
+        }
+      })
+  }
  private initHotkeys () {
    this.hotkeysService.add([
      new Hotkey(['/', 's'], (event: KeyboardEvent): boolean => {
        document.getElementById('search-video').focus()
        return false
      }, undefined, this.i18n('Focus the search bar')),
      new Hotkey('b', (event: KeyboardEvent): boolean => {
        this.toggleMenu()
        return false
      }, undefined, this.i18n('Toggle the left menu')),
      new Hotkey('g o', (event: KeyboardEvent): boolean => {
        this.router.navigate([ '/videos/overview' ])
        return false
      }, undefined, this.i18n('Go to the discover videos page')),
      new Hotkey('g t', (event: KeyboardEvent): boolean => {
        this.router.navigate([ '/videos/trending' ])
        return false
      }, undefined, this.i18n('Go to the trending videos page')),
      new Hotkey('g r', (event: KeyboardEvent): boolean => {
        this.router.navigate([ '/videos/recently-added' ])
        return false
      }, undefined, this.i18n('Go to the recently added videos page')),
      new Hotkey('g l', (event: KeyboardEvent): boolean => {
        this.router.navigate([ '/videos/local' ])
        return false
      }, undefined, this.i18n('Go to the local videos page')),
      new Hotkey('g u', (event: KeyboardEvent): boolean => {
        this.router.navigate([ '/videos/upload' ])
        return false
diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts
index 1e2936a37..a3ea33ca9 100644
--- a/client/src/app/app.module.ts
+++ b/client/src/app/app.module.ts
@@ -18,6 +18,8 @@ import { VideosModule } from './videos'
 import { buildFileLocale, getCompleteLocale, isDefaultLocale } from '../../../shared/models/i18n'
 import { getDevLocale, isOnDevLocale } from '@app/shared/i18n/i18n-utils'
 import { SearchModule } from '@app/search'
+import { WelcomeModalComponent } from '@app/modal/welcome-modal.component'
+import { InstanceConfigWarningModalComponent } from '@app/modal/instance-config-warning-modal.component'
 export function metaFactory (serverService: ServerService): MetaLoader {
  return new MetaStaticLoader({
@@ -39,7 +41,10 @@ export function metaFactory (serverService: ServerService): MetaLoader {
    MenuComponent,
    LanguageChooserComponent,
    AvatarNotificationComponent,
-    HeaderComponent
+    HeaderComponent,
+    WelcomeModalComponent,
+    InstanceConfigWarningModalComponent
  ],
  imports: [
    BrowserModule,
diff --git a/client/src/app/login/login.component.html b/client/src/app/login/login.component.html
index 4efe3fb22..683355960 100644
--- a/client/src/app/login/login.component.html
+++ b/client/src/app/login/login.component.html
@@ -23,10 +23,11 @@
          or create an account on another instance
        </a>
-        <my-help
+        <my-help *ngIf="signupAllowed === false">
-          *ngIf="signupAllowed === false" helpType="custom" i18n-customHtml
+          <ng-template ptTemplate="customHtml">
-          customHtml="User registration is not allowed on this instance, but you can register on many others!"
+            <ng-container i18n>User registration is not allowed on this instance, but you can register on many others!</ng-container>
-        ></my-help>
+          </ng-template>
+        </my-help>
      </div>
      <div *ngIf="formErrors.username" class="form-error">
diff --git a/client/src/app/modal/instance-config-warning-modal.component.html b/client/src/app/modal/instance-config-warning-modal.component.html
new file mode 100644
index 000000000..64f14e69b
--- /dev/null
+++ b/client/src/app/modal/instance-config-warning-modal.component.html
@@ -0,0 +1,45 @@
+<ng-template #modal let-hide="close">
+  <div class="modal-header">
+    <h4 i18n class="modal-title">Configuration warning!</h4>
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
+  </div>
+  <div class="modal-body">
+    <p i18n>Hello dear administrator. You enabled user registration on your instance but you did not configure the following fields:</p>
+    <ul>
+      <li i18n *ngIf="about.instance.name.toLowerCase() === 'peertube'">Instance name</li>
+      <li i18n *ngIf="isDefaultShortDescription(about.instance.shortDescription)">Instance short description</li>
+      <li i18n *ngIf="!about.instance.administrator">Who you are</li>
+      <li i18n *ngIf="!about.instance.maintenanceLifetime">How long you plan to maintain your instance</li>
+      <li i18n *ngIf="!about.instance.businessModel">How you plan to pay your instance</li>
+      <li i18n *ngIf="!about.instance.moderationInformation">How you will moderate your instance</li>
+      <li i18n *ngIf="!about.instance.terms">Instance terms</li>
+    </ul>
+    <p>
+      Please consider to configure these fields to help people to choose <strong>the appropriate instance</strong>.
+      Without them, your instance may not be referenced on <a target="_blank" rel="noopener noreferrer" href="https://joinpeertube.org">JoinPeerTube website</a>.
+    </p>
+    <div class="configure-instance">
+      <a i18n href="/admin/config/edit-custom" target="_blank" rel="noopener noreferrer">Configure these fields</a>
+    </div>
+  </div>
+  <div class="modal-footer inputs">
+    <my-peertube-checkbox
+      inputName="stopDisplayModal" [(ngModel)]="stopDisplayModal"
+      i18n-labelText labelText="Don't show me this warning anymore"
+    >
+    </my-peertube-checkbox>
+    <span i18n class="action-button action-button-cancel" (click)="hide()">Close</span>
+  </div>
+</ng-template>
diff --git a/client/src/app/modal/instance-config-warning-modal.component.scss b/client/src/app/modal/instance-config-warning-modal.component.scss
new file mode 100644
index 000000000..ff62a1b9c
--- /dev/null
+++ b/client/src/app/modal/instance-config-warning-modal.component.scss
@@ -0,0 +1,22 @@
+@import '_mixins';
+@import '_variables';
+.action-button-cancel {
+  margin-right: 0 !important;
+}
+.modal-body {
+  font-size: 15px;
+}
+li {
+  margin-bottom: 10px;
+}
+.configure-instance {
+  text-align: center;
+  font-weight: 600;
+  font-size: 18px;
+  margin-top: 40px;
+  margin-bottom: 10px;
+}
diff --git a/client/src/app/modal/instance-config-warning-modal.component.ts b/client/src/app/modal/instance-config-warning-modal.component.ts
new file mode 100644
index 000000000..742a7dd41
--- /dev/null
+++ b/client/src/app/modal/instance-config-warning-modal.component.ts
@@ -0,0 +1,47 @@
+import { Component, ElementRef, ViewChild } from '@angular/core'
+import { Notifier } from '@app/core'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { About } from '@shared/models/server'
+import { UserService } from '@app/shared'
+@Component({
+  selector: 'my-instance-config-warning-modal',
+  templateUrl: './instance-config-warning-modal.component.html',
+  styleUrls: [ './instance-config-warning-modal.component.scss' ]
+})
+export class InstanceConfigWarningModalComponent {
+  @ViewChild('modal', { static: true }) modal: ElementRef
+  stopDisplayModal = false
+  about: About
+  constructor (
+    private userService: UserService,
+    private modalService: NgbModal,
+    private notifier: Notifier
+  ) { }
+  show (about: About) {
+    this.about = about
+    const ref = this.modalService.open(this.modal)
+    ref.result.finally(() => {
+      if (this.stopDisplayModal === true) this.doNotOpenAgain()
+    })
+  }
+  isDefaultShortDescription (description: string) {
+    return description === 'PeerTube, a federated (ActivityPub) video streaming platform using P2P (BitTorrent) directly ' +
+      'in the web browser with WebTorrent and Angular.'
+  }
+  private doNotOpenAgain () {
+    this.userService.updateMyProfile({ noInstanceConfigWarningModal: true })
+        .subscribe(
+          () => console.log('We will not open the instance config warning modal again.'),
+          err => this.notifier.error(err.message)
+        )
+  }
+}
diff --git a/client/src/app/modal/welcome-modal.component.html b/client/src/app/modal/welcome-modal.component.html
new file mode 100644
index 000000000..09ff2163b
--- /dev/null
+++ b/client/src/app/modal/welcome-modal.component.html
@@ -0,0 +1,67 @@
+<ng-template #modal let-hide="close">
+  <div class="modal-header">
+    <h4 i18n class="modal-title">Welcome on PeerTube dear administrator!</h4>
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
+  </div>
+  <div class="modal-body">
+    <div class="block-documentation">
+      <div i18n class="subtitle">Documentation</div>
+      <div class="columns">
+        <a class="link-block" href="https://docs.joinpeertube.org/#/maintain-tools" target="_blank" rel="noopener noreferrer">
+          <a class="link-title" href="https://docs.joinpeertube.org/#/maintain-tools" target="_blank" rel="noopener noreferrer">CLI</a>
+          <div>Upload or import videos, parse logs, prune storage directories, reset user password...</div>
+        </a>
+        <a class="link-block" href="https://docs.joinpeertube.org/#/admin-following-instances" target="_blank" rel="noopener noreferrer">
+          <a class="link-title" href="https://docs.joinpeertube.org/#/admin-following-instances" target="_blank" rel="noopener noreferrer">Administer</a>
+          <div>Managing users, following other instances, dealing with spammers...</div>
+        </a>
+        <a class="link-block" href="https://docs.joinpeertube.org/#/use-setup-account" target="_blank" rel="noopener noreferrer">
+          <a class="link-title" href="https://docs.joinpeertube.org/#/use-setup-account" target="_blank" rel="noopener noreferrer">Use</a>
+          <div>Setup your account, managing video playlists, discover third-party applications...</div>
+        </a>
+      </div>
+    </div>
+    <div class="block-configuration">
+      <div i18n class="subtitle">It's time to configure your instance!</div>
+      <p i18n>
+        Choosing your <strong>instance name</strong>, <strong>setting up a description</strong>, specifying <strong>who you are</strong>,
+        why <strong>you created your instance</strong> and <strong>how long</strong> you plan to <strong>maintain your it</strong>
+        is very important for visitors to understand on what type of instance they are.
+      </p>
+      <p i18n>
+        If you want to open registrations, please decide what are <strong>your moderation rules</strong>, fill your <strong>instance terms</strong>
+        and specify the categories and languages you speak. This way, you will help users to register on <strong>the appropriate</strong> PeerTube instance.
+      </p>
+      <div class="configure-instance">
+        <a i18n href="/admin/config/edit-custom" target="_blank" rel="noopener noreferrer">Configure your instance</a>
+      </div>
+    </div>
+    <div class="block-links">
+      <div i18n class="subtitle">Useful links</div>
+      <ul>
+        <li>Official PeerTube website (news, support, contribute...): <a href="https://joinpeertube.org" target="_blank" rel="noopener noreferrer">https://joinpeertube.org</a></li>
+        <li>Put your instance on the public PeerTube index: <a href="https://instances.joinpeertube.org/instances">https://instances.joinpeertube.org/instances</a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="modal-footer inputs">
+    <span i18n class="action-button action-button-submit" (click)="hide()">Understood!</span>
+  </div>
+</ng-template>
diff --git a/client/src/app/modal/welcome-modal.component.scss b/client/src/app/modal/welcome-modal.component.scss
new file mode 100644
index 000000000..8bb6973f4
--- /dev/null
+++ b/client/src/app/modal/welcome-modal.component.scss
@@ -0,0 +1,56 @@
+@import '_mixins';
+@import '_variables';
+.modal-body {
+  font-size: 15px;
+}
+.subtitle {
+  font-weight: $font-semibold;
+  margin-bottom: 10px;
+  font-size: 16px;
+}
+.block-documentation .subtitle {
+  margin-bottom: 20px;
+}
+.block-configuration,
+.block-instance {
+  margin-top: 30px;
+}
+li {
+  margin-bottom: 10px;
+}
+.configure-instance {
+  text-align: center;
+  font-weight: 600;
+  font-size: 18px;
+  margin: 20px 0 40px 0;
+}
+.columns {
+  display: flex;
+  .link-block {
+    @include disable-default-a-behaviour;
+    color: var(--mainForegroundColor);
+    padding: 10px;
+    transition: background-color 0.2s ease-in;
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.05);
+    }
+    .link-title {
+      font-size: 16px;
+      font-weight: $font-semibold;
+      display: flex;
+      justify-content: center;
+      margin-bottom: 5px;
+    }
+  }
+}
diff --git a/client/src/app/modal/welcome-modal.component.ts b/client/src/app/modal/welcome-modal.component.ts
new file mode 100644
index 000000000..05412a4cd
--- /dev/null
+++ b/client/src/app/modal/welcome-modal.component.ts
@@ -0,0 +1,38 @@
+import { Component, ElementRef, ViewChild } from '@angular/core'
+import { Notifier } from '@app/core'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { UserService } from '@app/shared'
+@Component({
+  selector: 'my-welcome-modal',
+  templateUrl: './welcome-modal.component.html',
+  styleUrls: [ './welcome-modal.component.scss' ]
+})
+export class WelcomeModalComponent {
+  @ViewChild('modal', { static: true }) modal: ElementRef
+  constructor (
+    private userService: UserService,
+    private modalService: NgbModal,
+    private notifier: Notifier
+  ) { }
+  show () {
+    const ref = this.modalService.open(this.modal,{
+      backdrop: 'static',
+      keyboard: false,
+      size: 'lg'
+    })
+    ref.result.finally(() => this.doNotOpenAgain())
+  }
+  private doNotOpenAgain () {
+    this.userService.updateMyProfile({ noWelcomeModal: true })
+      .subscribe(
+        () => console.log('We will not open the welcome modal again.'),
+        err => this.notifier.error(err.message)
+      )
+  }
+}
diff --git a/client/src/app/shared/angular/peertube-template.directive.ts b/client/src/app/shared/angular/peertube-template.directive.ts
index a514b6057..e04c25d9a 100644
--- a/client/src/app/shared/angular/peertube-template.directive.ts
+++ b/client/src/app/shared/angular/peertube-template.directive.ts
@@ -3,8 +3,8 @@ import { Directive, Input, TemplateRef } from '@angular/core'
 @Directive({
  selector: '[ptTemplate]'
 })
-export class PeerTubeTemplateDirective {
+export class PeerTubeTemplateDirective <T extends string> {
-  @Input('ptTemplate') name: string
+  @Input('ptTemplate') name: T
  constructor (public template: TemplateRef<any>) {
    // empty
diff --git a/client/src/app/shared/forms/form-validators/custom-config-validators.service.ts b/client/src/app/shared/forms/form-validators/custom-config-validators.service.ts
index 882e39453..767e3f026 100644
--- a/client/src/app/shared/forms/form-validators/custom-config-validators.service.ts
+++ b/client/src/app/shared/forms/form-validators/custom-config-validators.service.ts
@@ -13,6 +13,7 @@ export class CustomConfigValidatorsService {
  readonly SIGNUP_LIMIT: BuildFormValidator
  readonly ADMIN_EMAIL: BuildFormValidator
  readonly TRANSCODING_THREADS: BuildFormValidator
+  readonly INDEX_URL: BuildFormValidator
  constructor (private i18n: I18n) {
    this.INSTANCE_NAME = {
@@ -78,5 +79,13 @@ export class CustomConfigValidatorsService {
        'min': this.i18n('Transcoding threads must be greater or equal to 0.')
      }
    }
+    this.INDEX_URL = {
+      VALIDATORS: [ Validators.required, Validators.pattern(/^https:\/\//) ],
+      MESSAGES: {
+        'required': this.i18n('Index URL is required.'),
+        'pattern': this.i18n('Index URL should be a URL')
+      }
+    }
  }
 }
diff --git a/client/src/app/shared/forms/peertube-checkbox.component.html b/client/src/app/shared/forms/peertube-checkbox.component.html
index 571a1a673..f1e3bf0bf 100644
--- a/client/src/app/shared/forms/peertube-checkbox.component.html
+++ b/client/src/app/shared/forms/peertube-checkbox.component.html
@@ -3,8 +3,15 @@
    <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>
+    <span *ngIf="labelTemplate">
+      <ng-container *ngTemplateOutlet="labelTemplate"></ng-container>
+    </span>
  </label>
-  <my-help *ngIf="helpHtml" [tooltipPlacement]="helpPlacement" helpType="custom" i18n-customHtml [customHtml]="helpHtml"></my-help>
+  <my-help *ngIf="helpTemplate" [tooltipPlacement]="helpPlacement" helpType="custom">
+    <ng-template ptTemplate="customHtml">
+      <ng-template *ngTemplateOutlet="helpTemplate"></ng-template>
+    </ng-template>
+  </my-help>
 </div>
diff --git a/client/src/app/shared/forms/peertube-checkbox.component.scss b/client/src/app/shared/forms/peertube-checkbox.component.scss
index 84ea788af..51f98b0bc 100644
--- a/client/src/app/shared/forms/peertube-checkbox.component.scss
+++ b/client/src/app/shared/forms/peertube-checkbox.component.scss
@@ -7,7 +7,7 @@
  .form-group-checkbox {
    display: flex;
-    span {
+    .label-text {
      font-weight: $font-regular;
      margin: 0;
    }
diff --git a/client/src/app/shared/forms/peertube-checkbox.component.ts b/client/src/app/shared/forms/peertube-checkbox.component.ts
index a4b72aa37..3b8f39ed0 100644
--- a/client/src/app/shared/forms/peertube-checkbox.component.ts
+++ b/client/src/app/shared/forms/peertube-checkbox.component.ts
@@ -1,5 +1,6 @@
-import { ChangeDetectorRef, Component, forwardRef, Input, OnChanges, SimpleChanges } from '@angular/core'
+import { AfterContentInit, ChangeDetectorRef, Component, ContentChildren, forwardRef, Input, QueryList, TemplateRef } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
+import { PeerTubeTemplateDirective } from '@app/shared/angular/peertube-template.directive'
 @Component({
  selector: 'my-peertube-checkbox',
@@ -13,20 +14,35 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
    }
  ]
 })
-export class PeertubeCheckboxComponent implements ControlValueAccessor {
+export class PeertubeCheckboxComponent implements ControlValueAccessor, AfterContentInit {
  @Input() checked = false
  @Input() inputName: string
  @Input() labelText: string
-  @Input() labelHtml: string
-  @Input() helpHtml: string
  @Input() helpPlacement = 'top'
  @Input() disabled = false
+  @ContentChildren(PeerTubeTemplateDirective) templates: QueryList<PeerTubeTemplateDirective<'label' | 'help'>>
  // FIXME: https://github.com/angular/angular/issues/10816#issuecomment-307567836
  @Input() onPushWorkaround = false
+  labelTemplate: TemplateRef<any>
+  helpTemplate: TemplateRef<any>
  constructor (private cdr: ChangeDetectorRef) { }
+  ngAfterContentInit () {
+    {
+      const t = this.templates.find(t => t.name === 'label')
+      if (t) this.labelTemplate = t.template
+    }
+    {
+      const t = this.templates.find(t => t.name === 'help')
+      if (t) this.helpTemplate = t.template
+    }
+  }
  propagateChange = (_: any) => { /* empty */ }
  writeValue (checked: boolean) {
diff --git a/client/src/app/shared/instance/feature-boolean.component.html b/client/src/app/shared/instance/feature-boolean.component.html
new file mode 100644
index 000000000..ac208fc13
--- /dev/null
+++ b/client/src/app/shared/instance/feature-boolean.component.html
@@ -0,0 +1,3 @@
+<span *ngIf="value === true" class="glyphicon glyphicon-ok"></span>
+<span *ngIf="value === false" class="glyphicon glyphicon-remove"></span>
diff --git a/client/src/app/shared/instance/feature-boolean.component.scss b/client/src/app/shared/instance/feature-boolean.component.scss
new file mode 100644
index 000000000..56d08af06
--- /dev/null
+++ b/client/src/app/shared/instance/feature-boolean.component.scss
@@ -0,0 +1,10 @@
+@import '_variables';
+@import '_mixins';
+.glyphicon-ok {
+  color: $green;
+}
+.glyphicon-remove {
+  color: $red;
+}
diff --git a/client/src/app/shared/instance/feature-boolean.component.ts b/client/src/app/shared/instance/feature-boolean.component.ts
new file mode 100644
index 000000000..d02d513d6
--- /dev/null
+++ b/client/src/app/shared/instance/feature-boolean.component.ts
@@ -0,0 +1,10 @@
+import { Component, Input } from '@angular/core'
+@Component({
+  selector: 'my-feature-boolean',
+  templateUrl: './feature-boolean.component.html',
+  styleUrls: [ './feature-boolean.component.scss' ]
+})
+export class FeatureBooleanComponent {
+  @Input() value: boolean
+}
diff --git a/client/src/app/shared/instance/instance-features-table.component.html b/client/src/app/shared/instance/instance-features-table.component.html
index 2987bd00e..d1cb8fcbe 100644
--- a/client/src/app/shared/instance/instance-features-table.component.html
+++ b/client/src/app/shared/instance/instance-features-table.component.html
@@ -1,28 +1,53 @@
 <div class="feature-table">
-  <table class="table">
+  <table class="table" *ngIf="config">
    <tr>
-      <td i18n class="label">Default NSFW/sensitive videos policy (can be redefined by the users)</td>
+      <td i18n class="label">
+        <div>Default NSFW/sensitive videos policy</div>
+        <div class="more-info">can be redefined by the users</div>
+      </td>
      <td class="value">{{ buildNSFWLabel() }}</td>
    </tr>
-    <tr *ngFor="let feature of features">
+    <tr>
-      <td class="label">{{ feature.label }}</td>
+      <td i18n class="label">User registration allowed</td>
      <td>
-        <span *ngIf="feature.value === true" class="glyphicon glyphicon-ok"></span>
+        <my-feature-boolean [value]="config.signup.allowed"></my-feature-boolean>
-        <span *ngIf="feature.value === false" class="glyphicon glyphicon-remove"></span>
      </td>
    </tr>
    <tr>
-      <td i18n class="label">Video quota</td>
+      <td i18n class="label" colspan="2">Video uploads</td>
+    </tr>
+    <tr>
+      <td i18n class="sub-label">Transcoding in multiple resolutions</td>
+      <td>
+        <my-feature-boolean [value]="config.transcoding.enabledResolutions.length !== 0"></my-feature-boolean>
+      </td>
+    </tr>
+    <tr>
+      <td i18n class="sub-label">Video uploads</td>
+      <td>
+        <span *ngIf="config.autoBlacklist.videos.ofUsers.enabled">Requires manual validation by moderators</span>
+        <span *ngIf="!config.autoBlacklist.videos.ofUsers.enabled">Automatically published</span>
+      </td>
+    </tr>
+    <tr>
+      <td i18n class="sub-label">Video quota</td>
      <td class="value">
        <ng-container *ngIf="initialUserVideoQuota !== -1">
          {{ initialUserVideoQuota | bytes: 0 }} <ng-container *ngIf="dailyUserVideoQuota !== -1">({{ dailyUserVideoQuota | bytes: 0 }} per day)</ng-container>
-          <my-help tooltipPlacement="auto" helpType="custom" [customHtml]="quotaHelpIndication"></my-help>
+          <my-help tooltipPlacement="auto" helpType="custom">
+            <ng-template ptTemplate="customHtml">
+              <div [innerHTML]="quotaHelpIndication"></div>
+            </ng-template>
+          </my-help>
        </ng-container>
        <ng-container i18n *ngIf="initialUserVideoQuota === -1">
@@ -30,5 +55,35 @@
        </ng-container>
      </td>
    </tr>
+    <tr>
+      <td i18n class="label" colspan="2">Import</td>
+    </tr>
+    <tr>
+      <td i18n class="sub-label">HTTP import (YouTube, Vimeo, direct URL...)</td>
+      <td>
+        <my-feature-boolean [value]="config.import.videos.http.enabled"></my-feature-boolean>
+      </td>
+    </tr>
+    <tr>
+      <td i18n class="sub-label">Torrent import</td>
+      <td>
+        <my-feature-boolean [value]="config.import.videos.torrent.enabled"></my-feature-boolean>
+      </td>
+    </tr>
+    <tr>
+      <td i18n class="label" colspan="2">Player</td>
+    </tr>
+    <tr>
+      <td i18n class="sub-label">P2P enabled</td>
+      <td>
+        <my-feature-boolean [value]="config.tracker.enabled"></my-feature-boolean>
+      </td>
+    </tr>
  </table>
 </div>
diff --git a/client/src/app/shared/instance/instance-features-table.component.scss b/client/src/app/shared/instance/instance-features-table.component.scss
index f9bec038d..67f2b6c84 100644
--- a/client/src/app/shared/instance/instance-features-table.component.scss
+++ b/client/src/app/shared/instance/instance-features-table.component.scss
@@ -5,16 +5,28 @@ table {
  font-size: 14px;
  color: var(--mainForegroundColor);
-  .label {
+  .label,
-    font-weight: $font-semibold;
+  .sub-label {
    min-width: 330px;
-  }
-  .glyphicon-ok {
+    &.label {
-    color: $green;
+      font-weight: $font-semibold;
+    }
+    &.sub-label {
+      padding-left: 30px;
+    }
+    .more-info {
+      font-style: italic;
+      font-weight: initial;
+      font-size: 14px
+    }
  }
-  .glyphicon-remove {
+  td {
-    color: $red;
+    vertical-align: middle;
  }
 }
diff --git a/client/src/app/shared/instance/instance-features-table.component.ts b/client/src/app/shared/instance/instance-features-table.component.ts
index a53082a93..46df4d0b2 100644
--- a/client/src/app/shared/instance/instance-features-table.component.ts
+++ b/client/src/app/shared/instance/instance-features-table.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core'
 import { ServerService } from '@app/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
+import { ServerConfig } from '@shared/models'
 @Component({
  selector: 'my-instance-features-table',
@@ -8,8 +9,8 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
  styleUrls: [ './instance-features-table.component.scss' ]
 })
 export class InstanceFeaturesTableComponent implements OnInit {
-  features: { label: string, value?: boolean }[] = []
  quotaHelpIndication = ''
+  config: ServerConfig
  constructor (
    private i18n: I18n,
@@ -28,7 +29,7 @@ export class InstanceFeaturesTableComponent implements OnInit {
  ngOnInit () {
    this.serverService.configLoaded
        .subscribe(() => {
-          this.buildFeatures()
+          this.config = this.serverService.getConfig()
          this.buildQuotaHelpIndication()
        })
  }
@@ -41,37 +42,6 @@ export class InstanceFeaturesTableComponent implements OnInit {
    if (policy === 'display') return this.i18n('Displayed')
  }
-  private buildFeatures () {
-    const config = this.serverService.getConfig()
-    this.features = [
-      {
-        label: this.i18n('User registration allowed'),
-        value: config.signup.allowed
-      },
-      {
-        label: this.i18n('Video uploads require manual validation by moderators'),
-        value: config.autoBlacklist.videos.ofUsers.enabled
-      },
-      {
-        label: this.i18n('Transcode your videos in multiple resolutions'),
-        value: config.transcoding.enabledResolutions.length !== 0
-      },
-      {
-        label: this.i18n('HTTP import (YouTube, Vimeo, direct URL...)'),
-        value: config.import.videos.http.enabled
-      },
-      {
-        label: this.i18n('Torrent import'),
-        value: config.import.videos.torrent.enabled
-      },
-      {
-        label: this.i18n('P2P enabled'),
-        value: config.tracker.enabled
-      }
-    ]
-  }
  private getApproximateTime (seconds: number) {
    const hours = Math.floor(seconds / 3600)
    let pluralSuffix = ''
diff --git a/client/src/app/shared/instance/instance.service.ts b/client/src/app/shared/instance/instance.service.ts
index d0c96941d..44b413fa4 100644
--- a/client/src/app/shared/instance/instance.service.ts
+++ b/client/src/app/shared/instance/instance.service.ts
@@ -4,6 +4,9 @@ import { Injectable } from '@angular/core'
 import { environment } from '../../../environments/environment'
 import { RestExtractor, RestService } from '../rest'
 import { About } from '../../../../../shared/models/server'
+import { MarkdownService } from '@app/shared/renderer'
+import { peertubeTranslate } from '@shared/models'
+import { ServerService } from '@app/core'
 @Injectable()
 export class InstanceService {
@@ -13,7 +16,9 @@ export class InstanceService {
  constructor (
    private authHttp: HttpClient,
    private restService: RestService,
-    private restExtractor: RestExtractor
+    private restExtractor: RestExtractor,
+    private markdownService: MarkdownService,
+    private serverService: ServerService
  ) {
  }
@@ -34,4 +39,43 @@ export class InstanceService {
               .pipe(catchError(res => this.restExtractor.handleError(res)))
  }
+  async buildHtml (about: About) {
+    const html = {
+      description: '',
+      terms: '',
+      codeOfConduct: '',
+      moderationInformation: '',
+      administrator: '',
+      hardwareInformation: ''
+    }
+    for (const key of Object.keys(html)) {
+      html[ key ] = await this.markdownService.textMarkdownToHTML(about.instance[ key ])
+    }
+    return html
+  }
+  buildTranslatedLanguages (about: About, translations: any) {
+    const languagesArray = this.serverService.getVideoLanguages()
+    return about.instance.languages
+                .map(l => {
+                  const languageObj = languagesArray.find(la => la.id === l)
+                  return peertubeTranslate(languageObj.label, translations)
+                })
+  }
+  buildTranslatedCategories (about: About, translations: any) {
+    const categoriesArray = this.serverService.getVideoCategories()
+    return about.instance.categories
+                .map(c => {
+                  const categoryObj = categoriesArray.find(ca => ca.id === c)
+                  return peertubeTranslate(categoryObj.label, translations)
+                })
+  }
 }
diff --git a/client/src/app/shared/misc/help.component.html b/client/src/app/shared/misc/help.component.html
index e31eef06a..9a6d3e48e 100644
--- a/client/src/app/shared/misc/help.component.html
+++ b/client/src/app/shared/misc/help.component.html
@@ -1,15 +1,25 @@
 <ng-template #tooltipTemplate>
-  <ng-template [ngIf]="preHtml">
+  <p *ngIf="preHtmlTemplate">
-    <p [innerHTML]="preHtml"></p>
+    <ng-template *ngTemplateOutlet="preHtmlTemplate"></ng-template>
-    <br />
+  </p>
-  </ng-template>
-  <p [innerHTML]="mainHtml"></p>
+  <ng-container *ngIf="preHtmlTemplate && (customHtmlTemplate || mainHtml || postHtmlTemplate)">
+    <br /><br />
+  </ng-container>
-  <ng-template [ngIf]="postHtml">
+  <p *ngIf="customHtmlTemplate">
-    <br />
+    <ng-template *ngTemplateOutlet="customHtmlTemplate"></ng-template>
-    <p [innerHTML]="postHtml"></p>
+  </p>
-  </ng-template>
+  <p *ngIf="mainHtml" [innerHTML]="mainHtml"></p>
+  <ng-container *ngIf="(customHtmlTemplate || mainHtml) && postHtmlTemplate">
+    <br /><br />
+  </ng-container>
+  <p *ngIf="postHtmlTemplate">
+    <ng-template *ngTemplateOutlet="postHtmlTemplate"></ng-template>
+  </p>
 </ng-template>
 <span
diff --git a/client/src/app/shared/misc/help.component.ts b/client/src/app/shared/misc/help.component.ts
index f3426f70f..18ba8ad5e 100644
--- a/client/src/app/shared/misc/help.component.ts
+++ b/client/src/app/shared/misc/help.component.ts
@@ -1,6 +1,7 @@
-import { Component, Input, OnChanges, OnInit } from '@angular/core'
+import { AfterContentInit, Component, ContentChildren, Input, OnChanges, OnInit, QueryList, TemplateRef } from '@angular/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { MarkdownService } from '@app/shared/renderer'
+import { PeerTubeTemplateDirective } from '@app/shared/angular/peertube-template.directive'
 @Component({
  selector: 'my-help',
@@ -8,22 +9,42 @@ import { MarkdownService } from '@app/shared/renderer'
  templateUrl: './help.component.html'
 })
-export class HelpComponent implements OnInit, OnChanges {
+export class HelpComponent implements OnInit, OnChanges, AfterContentInit {
-  @Input() preHtml = ''
-  @Input() postHtml = ''
-  @Input() customHtml = ''
  @Input() helpType: 'custom' | 'markdownText' | 'markdownEnhanced' = 'custom'
  @Input() tooltipPlacement = 'right'
+  @ContentChildren(PeerTubeTemplateDirective) templates: QueryList<PeerTubeTemplateDirective<'preHtml' | 'customHtml' | 'postHtml'>>
  isPopoverOpened = false
  mainHtml = ''
+  preHtmlTemplate: TemplateRef<any>
+  customHtmlTemplate: TemplateRef<any>
+  postHtmlTemplate: TemplateRef<any>
  constructor (private i18n: I18n) { }
  ngOnInit () {
    this.init()
  }
+  ngAfterContentInit () {
+    {
+      const t = this.templates.find(t => t.name === 'preHtml')
+      if (t) this.preHtmlTemplate = t.template
+    }
+    {
+      const t = this.templates.find(t => t.name === 'customHtml')
+      if (t) this.customHtmlTemplate = t.template
+    }
+    {
+      const t = this.templates.find(t => t.name === 'postHtml')
+      if (t) this.postHtmlTemplate = t.template
+    }
+  }
  ngOnChanges () {
    this.init()
  }
@@ -37,11 +58,6 @@ export class HelpComponent implements OnInit, OnChanges {
  }
  private init () {
-    if (this.helpType === 'custom') {
-      this.mainHtml = this.customHtml
-      return
-    }
    if (this.helpType === 'markdownText') {
      this.mainHtml = this.formatMarkdownSupport(MarkdownService.TEXT_RULES)
      return
diff --git a/client/src/app/shared/renderer/markdown.service.ts b/client/src/app/shared/renderer/markdown.service.ts
index 9a9066351..0e24f3085 100644
--- a/client/src/app/shared/renderer/markdown.service.ts
+++ b/client/src/app/shared/renderer/markdown.service.ts
@@ -13,9 +13,11 @@ export class MarkdownService {
    'list'
  ]
  static ENHANCED_RULES = MarkdownService.TEXT_RULES.concat([ 'image' ])
+  static COMPLETE_RULES = MarkdownService.ENHANCED_RULES.concat([ 'block', 'inline', 'heading', 'html_inline', 'html_block', 'paragraph' ])
  private textMarkdownIt: MarkdownIt
  private enhancedMarkdownIt: MarkdownIt
+  private completeMarkdownIt: MarkdownIt
  async textMarkdownToHTML (markdown: string) {
    if (!markdown) return ''
@@ -39,11 +41,22 @@ export class MarkdownService {
    return this.avoidTruncatedTags(html)
  }
-  private async createMarkdownIt (rules: string[]) {
+  async completeMarkdownToHTML (markdown: string) {
-    // FIXME: import('..') returns a struct module, containing a "default" field corresponding to our sanitizeHtml function
+    if (!markdown) return ''
+    if (!this.completeMarkdownIt) {
+      this.completeMarkdownIt = await this.createMarkdownIt(MarkdownService.COMPLETE_RULES, true)
+    }
+    const html = this.completeMarkdownIt.render(markdown)
+    return this.avoidTruncatedTags(html)
+  }
+  private async createMarkdownIt (rules: string[], html = false) {
+    // FIXME: import('...') returns a struct module, containing a "default" field corresponding to our sanitizeHtml function
    const MarkdownItClass: typeof import ('markdown-it') = (await import('markdown-it') as any).default
-    const markdownIt = new MarkdownItClass('zero', { linkify: true, breaks: true })
+    const markdownIt = new MarkdownItClass('zero', { linkify: true, breaks: true, html })
    for (const rule of rules) {
      markdownIt.enable(rule)
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index eb57a2fff..65e0f21a4 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -6,10 +6,8 @@ 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 { BytesPipe, KeysPipe, NgPipesModule } from 'ngx-pipes'
 import { SharedModule as PrimeSharedModule } from 'primeng/components/common/shared'
 import { AUTH_INTERCEPTOR_PROVIDER } from './auth'
 import { ButtonComponent } from './buttons/button.component'
 import { DeleteButtonComponent } from './buttons/delete-button.component'
@@ -93,6 +91,8 @@ import { VideoDownloadComponent } from '@app/shared/video/modals/video-download.
 import { VideoReportComponent } from '@app/shared/video/modals/video-report.component'
 import { ClipboardModule } from 'ngx-clipboard'
 import { FollowService } from '@app/shared/instance/follow.service'
+import { MultiSelectModule } from 'primeng/multiselect'
+import { FeatureBooleanComponent } from '@app/shared/instance/feature-boolean.component'
 @NgModule({
  imports: [
@@ -113,7 +113,8 @@ import { FollowService } from '@app/shared/instance/follow.service'
    PrimeSharedModule,
    InputMaskModule,
-    NgPipesModule
+    NgPipesModule,
+    MultiSelectModule
  ],
  declarations: [
@@ -156,6 +157,7 @@ import { FollowService } from '@app/shared/instance/follow.service'
    SubscribeButtonComponent,
    RemoteSubscribeComponent,
    InstanceFeaturesTableComponent,
+    FeatureBooleanComponent,
    UserBanModalComponent,
    UserModerationDropdownComponent,
    TopMenuDropdownComponent,
@@ -186,6 +188,7 @@ import { FollowService } from '@app/shared/instance/follow.service'
    InputMaskModule,
    BytesPipe,
    KeysPipe,
+    MultiSelectModule,
    LoaderComponent,
    SmallLoaderComponent,
diff --git a/client/src/app/shared/user-subscription/remote-subscribe.component.html b/client/src/app/shared/user-subscription/remote-subscribe.component.html
index ec3636b3e..59ee1cb04 100644
--- a/client/src/app/shared/user-subscription/remote-subscribe.component.html
+++ b/client/src/app/shared/user-subscription/remote-subscribe.component.html
@@ -12,13 +12,21 @@
    <span *ngIf="interact">Remote interact</span>
  </button>
-  <my-help *ngIf="!interact && showHelp"
+  <my-help *ngIf="!interact && showHelp">
-           helpType="custom"
+    <ng-template ptTemplate="customHtml">
-           i18n-customHtml customHtml="You can subscribe to the channel via any ActivityPub-capable fediverse instance. For instance with Mastodon or Pleroma you can type the channel URL in the search box and subscribe there.">
+      <ng-container i18n>
+        You can subscribe to the channel via any ActivityPub-capable fediverse instance.<br /><br />
+        For instance with Mastodon or Pleroma you can type the channel URL in the search box and subscribe there.
+      </ng-container>
+    </ng-template>
  </my-help>
-  <my-help *ngIf="showHelp && interact"
+  <my-help *ngIf="showHelp && interact">
-           helpType="custom"
+    <ng-template ptTemplate="customHtml">
-           i18n-customHtml customHtml="You can interact with this via any ActivityPub-capable fediverse instance. For instance with Mastodon or Pleroma you can type the current URL in the search box and interact with it there.">
+      <ng-container i18n>
+        You can interact with this via any ActivityPub-capable fediverse instance.<br /><br />
+        For instance with Mastodon or Pleroma you can type the current URL in the search box and interact with it there.
+      </ng-container>
+    </ng-template>
  </my-help>
-</form>
-\ No newline at end of file
+</form>
diff --git a/client/src/app/shared/users/user-notification.model.ts b/client/src/app/shared/users/user-notification.model.ts
index 06eace71c..c3f4bf429 100644
--- a/client/src/app/shared/users/user-notification.model.ts
+++ b/client/src/app/shared/users/user-notification.model.ts
@@ -42,9 +42,10 @@ export class UserNotification implements UserNotificationServer {
    state: FollowState
    follower: ActorInfo & { avatarUrl?: string }
    following: {
-      type: 'account' | 'channel'
+      type: 'account' | 'channel' | 'instance'
      name: string
      displayName: string
+      host: string
    }
  }
@@ -112,7 +113,10 @@ export class UserNotification implements UserNotificationServer {
        case UserNotificationType.VIDEO_AUTO_BLACKLIST_FOR_MODERATORS:
          this.videoAutoBlacklistUrl = '/admin/moderation/video-auto-blacklist/list'
-          this.videoUrl = this.buildVideoUrl(this.video)
+          // Backward compatibility where we did not assign videoBlacklist to this type of notification before
+          if (!this.videoBlacklist) this.videoBlacklist = { id: null, video: this.video }
+          this.videoUrl = this.buildVideoUrl(this.videoBlacklist.video)
          break
        case UserNotificationType.BLACKLIST_ON_MY_VIDEO:
@@ -146,6 +150,10 @@ export class UserNotification implements UserNotificationServer {
        case UserNotificationType.NEW_INSTANCE_FOLLOWER:
          this.instanceFollowUrl = '/admin/follows/followers-list'
          break
+        case UserNotificationType.AUTO_INSTANCE_FOLLOWING:
+          this.instanceFollowUrl = '/admin/follows/following-list'
+          break
      }
    } catch (err) {
      this.type = null
diff --git a/client/src/app/shared/users/user-notifications.component.html b/client/src/app/shared/users/user-notifications.component.html
index 292813426..a0f8e6df5 100644
--- a/client/src/app/shared/users/user-notifications.component.html
+++ b/client/src/app/shared/users/user-notifications.component.html
@@ -8,7 +8,7 @@
        <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>
+          {{ notification.video.channel.displayName }} published a new video: <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.video.name }}</a>
        </div>
      </ng-container>
@@ -40,7 +40,7 @@
        <my-global-icon iconName="no"></my-global-icon>
        <div class="message">
-          The recently added video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.video.name }}</a> has been <a (click)="markAsRead(notification)" [routerLink]="notification.videoAutoBlacklistUrl">auto-blacklisted</a>
+          The recently added video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.videoBlacklist.video.name }}</a> has been <a (click)="markAsRead(notification)" [routerLink]="notification.videoAutoBlacklistUrl">auto-blacklisted</a>
        </div>
      </ng-container>
@@ -111,6 +111,14 @@
          <ng-container *ngIf="notification.actorFollow.state === 'pending'"> awaiting your approval</ng-container>
        </div>
      </ng-container>
+      <ng-container i18n *ngSwitchCase="UserNotificationType.AUTO_INSTANCE_FOLLOWING">
+        <my-global-icon iconName="users"></my-global-icon>
+        <div class="message">
+          Your instance automatically followed <a (click)="markAsRead(notification)" [routerLink]="notification.instanceFollowUrl">{{ notification.actorFollow.following.host }}</a>
+        </div>
+      </ng-container>
    </ng-container>
    <div class="from-date">{{ notification.createdAt | myFromNow }}</div>
diff --git a/client/src/app/shared/users/user.model.ts b/client/src/app/shared/users/user.model.ts
index 53809f82c..656b73dd2 100644
--- a/client/src/app/shared/users/user.model.ts
+++ b/client/src/app/shared/users/user.model.ts
@@ -9,31 +9,38 @@ export class User implements UserServerModel {
  username: string
  email: string
  pendingEmail: string | null
  emailVerified: boolean
  nsfwPolicy: NSFWPolicyType
-  role: UserRole
+  adminFlags?: UserAdminFlag
-  roleLabel: string
-  webTorrentEnabled: boolean
  autoPlayVideo: boolean
+  webTorrentEnabled: boolean
  videosHistoryEnabled: boolean
  videoLanguages: string[]
+  role: UserRole
+  roleLabel: string
  videoQuota: number
  videoQuotaDaily: number
-  account: Account
+  videoQuotaUsed?: number
-  videoChannels: VideoChannel[]
+  videoQuotaUsedDaily?: number
-  createdAt: Date
  theme: string
-  adminFlags?: UserAdminFlag
+  account: Account
+  notificationSettings?: UserNotificationSetting
+  videoChannels?: VideoChannel[]
  blocked: boolean
  blockedReason?: string
-  notificationSettings?: UserNotificationSetting
+  noInstanceConfigWarningModal: boolean
+  noWelcomeModal: boolean
+  createdAt: Date
  constructor (hash: Partial<UserServerModel>) {
    this.id = hash.id
@@ -43,13 +50,16 @@ export class User implements UserServerModel {
    this.role = hash.role
    this.videoChannels = hash.videoChannels
    this.videoQuota = hash.videoQuota
    this.videoQuotaDaily = hash.videoQuotaDaily
+    this.videoQuotaUsed = hash.videoQuotaUsed
+    this.videoQuotaUsedDaily = hash.videoQuotaUsedDaily
    this.nsfwPolicy = hash.nsfwPolicy
    this.webTorrentEnabled = hash.webTorrentEnabled
    this.videosHistoryEnabled = hash.videosHistoryEnabled
    this.autoPlayVideo = hash.autoPlayVideo
-    this.createdAt = hash.createdAt
    this.theme = hash.theme
@@ -58,8 +68,13 @@ export class User implements UserServerModel {
    this.blocked = hash.blocked
    this.blockedReason = hash.blockedReason
+    this.noInstanceConfigWarningModal = hash.noInstanceConfigWarningModal
+    this.noWelcomeModal = hash.noWelcomeModal
    this.notificationSettings = hash.notificationSettings
+    this.createdAt = hash.createdAt
    if (hash.account !== undefined) {
      this.account = new Account(hash.account)
    }
diff --git a/client/src/app/shared/video/videos-selection.component.ts b/client/src/app/shared/video/videos-selection.component.ts
index 994e0fa1e..064420056 100644
--- a/client/src/app/shared/video/videos-selection.component.ts
+++ b/client/src/app/shared/video/videos-selection.component.ts
@@ -35,7 +35,7 @@ export class VideosSelectionComponent extends AbstractVideoList implements OnIni
  @Input() titlePage: string
  @Input() miniatureDisplayOptions: MiniatureDisplayOptions
  @Input() getVideosObservableFunction: (page: number, sort?: VideoSortField) => Observable<ResultList<Video>>
-  @ContentChildren(PeerTubeTemplateDirective) templates: QueryList<PeerTubeTemplateDirective>
+  @ContentChildren(PeerTubeTemplateDirective) templates: QueryList<PeerTubeTemplateDirective<'rowButtons' | 'globalButtons'>>
  @Output() selectionChange = new EventEmitter<SelectionType>()
  @Output() videosModelChange = new EventEmitter<Video[]>()
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.html b/client/src/app/videos/+video-edit/shared/video-edit.component.html
index 217cadc66..245ae42b6 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.html
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.html
@@ -15,7 +15,16 @@
            <div class="form-group">
              <label i18n class="label-tags">Tags</label>
-              <my-help i18n-preHtml preHtml="Tags could be used to suggest relevant recommendations.</br>Press Enter to add a new tag."></my-help>
+              <my-help>
+                <ng-template ptTemplate="customHtml">
+                  <ng-container i18n>
+                    Tags could be used to suggest relevant recommendations. <br />
+                    Press Enter to add a new tag.
+                  </ng-container>
+                </ng-template>
+              </my-help>
              <tag-input
                [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
                i18n-placeholder placeholder="+ Tag" i18n-secondaryPlaceholder secondaryPlaceholder="Enter a new tag"
@@ -25,7 +34,15 @@
            <div class="form-group">
              <label i18n for="description">Description</label>
-              <my-help helpType="markdownText" i18n-preHtml preHtml="Video descriptions are truncated by default and require manual action to expand them."></my-help>
+              <my-help helpType="markdownText">
+                <ng-template ptTemplate="preHtml">
+                  <ng-container i18n>
+                    Video descriptions are truncated by default and require manual action to expand them.
+                  </ng-container>
+                </ng-template>
+              </my-help>
              <my-markdown-textarea truncate="250" formControlName="description"></my-markdown-textarea>
              <div *ngIf="formErrors.description" class="form-error">
@@ -114,20 +131,25 @@
              </div>
            </div>
-            <my-peertube-checkbox
+            <my-peertube-checkbox inputName="nsfw" formControlName="nsfw" helpPlacement="bottom-right">
-              inputName="nsfw" formControlName="nsfw"
+              <ng-template ptTemplate="label">
-              i18n-labelText labelText="This video contains mature or explicit content"
+                <ng-container i18n>This video contains mature or explicit content</ng-container>
-              i18n-helpHtml helpHtml="Some instances do not list videos containing mature or explicit content by default."
+              </ng-template>
-              helpPlacement="bottom-right"
-            ></my-peertube-checkbox>
+              <ng-template ptTemplate="help">
+                <ng-container i18n>Some instances do not list videos containing mature or explicit content by default.</ng-container>
-            <my-peertube-checkbox
+              </ng-template>
-              *ngIf="waitTranscodingEnabled"
+            </my-peertube-checkbox>
-              inputName="waitTranscoding" formControlName="waitTranscoding"
-              i18n-labelText labelText="Wait transcoding before publishing the video"
+            <my-peertube-checkbox *ngIf="waitTranscodingEnabled" inputName="waitTranscoding" formControlName="waitTranscoding" helpPlacement="bottom-right">
-              i18n-helpHtml helpHtml="If you decide not to wait for transcoding before publishing the video, it could be unplayable until transcoding ends."
+              <ng-template ptTemplate="label">
-              helpPlacement="bottom-right"
+                <ng-container i18n>Wait transcoding before publishing the video</ng-container>
-            ></my-peertube-checkbox>
+              </ng-template>
+              <ng-template ptTemplate="help">
+                <ng-container i18n>If you decide not to wait for transcoding before publishing the video, it could be unplayable until transcoding ends.</ng-container>
+              </ng-template>
+            </my-peertube-checkbox>
          </div>
        </div>
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html
index 7a495fea5..c290fd4b1 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html
+++ b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html
@@ -12,10 +12,14 @@
    <div class="form-group form-group-magnet-uri">
      <label i18n for="magnetUri">Paste magnet URI</label>
-      <my-help
+      <my-help>
-        helpType="custom" i18n-customHtml
+        <ng-template ptTemplate="customHtml">
-        customHtml="You can import any torrent file that points to a mp4 file. You should make sure you have diffusion rights over the content it points to, otherwise it could cause legal trouble to yourself and your instance."
+          <ng-container i18n>
-      ></my-help>
+            You can import any torrent file that points to a mp4 file.
+            You should make sure you have diffusion rights over the content it points to, otherwise it could cause legal trouble to yourself and your instance.
+          </ng-container>
+        </ng-template>
+      </my-help>
      <input type="text" id="magnetUri" [(ngModel)]="magnetUri" />
    </div>
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html
index e4f19faa8..09d0b8272 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html
+++ b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html
@@ -4,10 +4,16 @@
    <div class="form-group">
      <label i18n for="targetUrl">URL</label>
-      <my-help
-        helpType="custom" i18n-customHtml
+      <my-help>
-        customHtml="You can import any URL <a href='https://rg3.github.io/youtube-dl/supportedsites.html' target='_blank' rel='noopener noreferrer'>supported by youtube-dl</a> or URL that points to a raw MP4 file. You should make sure you have diffusion rights over the content it points to, otherwise it could cause legal trouble to yourself and your instance."
+        <ng-template ptTemplate="customHtml">
-      ></my-help>
+          <ng-container i18n>
+            You can import any URL <a href='https://rg3.github.io/youtube-dl/supportedsites.html' target='_blank' rel='noopener noreferrer'>supported by youtube-dl</a>
+            or URL that points to a raw MP4 file.
+            You should make sure you have diffusion rights over the content it points to, otherwise it could cause legal trouble to yourself and your instance.
+          </ng-container>
+        </ng-template>
+      </my-help>
      <input type="text" id="targetUrl" [(ngModel)]="targetUrl" />
    </div>
diff --git a/client/src/assets/images/framasoft.png b/client/src/assets/images/framasoft.png
new file mode 100644
index 000000000..57be8c219
--- /dev/null
+++ b/client/src/assets/images/framasoft.png
Binary files differ
diff --git a/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts b/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts
index 0c8c612ee..c44c184d5 100644
--- a/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts
+++ b/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts
@@ -92,7 +92,7 @@ class P2pMediaLoaderPlugin extends Plugin {
    this.p2pEngine.on(Events.SegmentError, (segment: Segment, err) => {
      console.error('Segment error.', segment, err)
-      this.options.redundancyUrlManager.removeByOriginUrl(segment.url)
+      this.options.redundancyUrlManager.removeBySegmentUrl(segment.requestUrl)
    })
    this.statsP2PBytes.numPeers = 1 + this.options.redundancyUrlManager.countBaseUrls()
diff --git a/client/src/assets/player/p2p-media-loader/redundancy-url-manager.ts b/client/src/assets/player/p2p-media-loader/redundancy-url-manager.ts
index 7fc2b6ab1..abab8aa99 100644
--- a/client/src/assets/player/p2p-media-loader/redundancy-url-manager.ts
+++ b/client/src/assets/player/p2p-media-loader/redundancy-url-manager.ts
@@ -2,9 +2,6 @@ import { basename, dirname } from 'path'
 class RedundancyUrlManager {
-  // Remember by what new URL we replaced an origin URL
-  private replacedSegmentUrls: { [originUrl: string]: string } = {}
  constructor (private baseUrls: string[] = []) {
    // empty
  }
@@ -17,16 +14,7 @@ class RedundancyUrlManager {
    this.baseUrls = this.baseUrls.filter(u => u !== baseUrl && u !== baseUrl + '/')
  }
-  removeByOriginUrl (originUrl: string) {
-    const replaced = this.replacedSegmentUrls[originUrl]
-    if (!replaced) return
-    return this.removeBySegmentUrl(replaced)
-  }
  buildUrl (url: string) {
-    delete this.replacedSegmentUrls[url]
    const max = this.baseUrls.length + 1
    const i = this.getRandomInt(max)
@@ -35,10 +23,7 @@ class RedundancyUrlManager {
    const newBaseUrl = this.baseUrls[i]
    const slashPart = newBaseUrl.endsWith('/') ? '' : '/'
-    const newUrl = newBaseUrl + slashPart + basename(url)
+    return newBaseUrl + slashPart + basename(url)
-    this.replacedSegmentUrls[url] = newUrl
-    return newUrl
  }
  countBaseUrls () {
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index abbc137b2..26ba490c7 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -343,6 +343,7 @@
  & + span {
    position: relative;
    width: 18px;
+    min-width: 18px;
    height: 18px;
    border: $border-width solid var(--mainForegroundColor);
    border-radius: 3px;
@@ -395,6 +396,7 @@
  border-radius: 50%;
  width: $size;
  height: $size;
+  min-width: $size;
 }
 @mixin chevron ($size, $border-width) {
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index 1a5144b11..4bf48a570 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -26,11 +26,6 @@ body {
  .vjs-dock-description {
    font-size: 11px;
-    .text::before, .text::after {
-      display: inline-block;
-      content: '\1F308';
-    }
    .text::before {
      margin-right: 4px;
    }
diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts
index 6ff3efef1..19d2a1d02 100644
--- a/client/src/standalone/videos/embed.ts
+++ b/client/src/standalone/videos/embed.ts
@@ -239,7 +239,7 @@ export class PeerTubeEmbed {
      const config: ServerConfig = await configResponse.json()
      const description = config.tracker.enabled && this.warningTitle
-        ? '<span class="text">' + this.player.localize('Uses P2P, others may know your IP is downloading this video.') + '</span>'
+        ? '<span class="text">' + this.player.localize('Watching this video may reveal your IP address to others.') + '</span>'
        : undefined
      this.player.dock({
diff --git a/client/yarn.lock b/client/yarn.lock
index a67ffe6d1..6755d7e64 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -1139,6 +1139,11 @@ async-foreach@^0.1.3:
  resolved "https://registry.yarnpkg.com/async-foreach/-/async-foreach-0.1.3.tgz#36121f845c0578172de419a97dbeb1d16ec34542"
  integrity sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI=
+async-limiter@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
+  integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
 async-limiter@~1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"
@@ -1433,7 +1438,7 @@ bittorrent-protocol@^3.0.0:
    speedometer "^1.0.0"
    unordered-array-remove "^1.0.2"
-bittorrent-tracker@^9.0.0, bittorrent-tracker@^9.11.0:
+bittorrent-tracker@^9.0.0:
  version "9.11.0"
  resolved "https://registry.yarnpkg.com/bittorrent-tracker/-/bittorrent-tracker-9.11.0.tgz#9911f9c14e5a29f84990a0c31b3d83dd16eb2876"
  integrity sha512-T1zvW/kSeEnWT4I3JE+6c7aZbO5jtleZyQe911SyzIxFF9DvtUNWXud3p5ZUkXaoI2xXwfpvlks5VFj5SKEB+A==
@@ -1463,6 +1468,36 @@ bittorrent-tracker@^9.0.0, bittorrent-tracker@^9.11.0:
    bufferutil "^4.0.0"
    utf-8-validate "^5.0.1"
+bittorrent-tracker@^9.14.4:
+  version "9.14.4"
+  resolved "https://registry.yarnpkg.com/bittorrent-tracker/-/bittorrent-tracker-9.14.4.tgz#0d9661560e6fec37689dfc5045142772eac05536"
+  integrity sha512-2Y/MNRjYhysD6t4r38z7l1WTT7g23IAqRWZRsj7xnnpciFn4xE4qiKmyFwA4gtbFGAZ14K3DdaqZbiQsC3PEfQ==
+  dependencies:
+    bencode "^2.0.0"
+    bittorrent-peerid "^1.0.2"
+    bn.js "^5.0.0"
+    chrome-dgram "^3.0.2"
+    compact2string "^1.2.0"
+    debug "^4.0.1"
+    ip "^1.0.1"
+    lru "^3.0.0"
+    minimist "^1.1.1"
+    once "^1.3.0"
+    random-iterate "^1.0.1"
+    randombytes "^2.0.3"
+    run-parallel "^1.1.2"
+    run-series "^1.0.2"
+    simple-get "^3.0.0"
+    simple-peer "^9.0.0"
+    simple-websocket "^8.0.0"
+    string2compact "^1.1.1"
+    uniq "^1.0.1"
+    unordered-array-remove "^1.0.2"
+    ws "^7.0.0"
+  optionalDependencies:
+    bufferutil "^4.0.0"
+    utf-8-validate "^5.0.1"
 blob-to-buffer@^1.2.6:
  version "1.2.8"
  resolved "https://registry.yarnpkg.com/blob-to-buffer/-/blob-to-buffer-1.2.8.tgz#78eeeb332f1280ed0ca6fb2b60693a8c6d36903a"
@@ -1506,6 +1541,11 @@ bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
  integrity sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA==
+bn.js@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.0.0.tgz#5c3d398021b3ddb548c1296a16f857e908f35c70"
+  integrity sha512-bVwDX8AF+72fIUNuARelKAlQUNtPOfG2fRxorbVvFk4zpHbqLrPdOGfVg5vrKwVzLLePqPBiATaOZNELQzmS0A==
 body-parser@1.19.0, body-parser@^1.16.1:
  version "1.19.0"
  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.19.0.tgz#96b2709e57c9c4e09a6fd66a8fd979844f69f08a"
@@ -1959,6 +1999,14 @@ chownr@^1.1.1:
  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.2.tgz#a18f1e0b269c8a6a5d3c86eb298beb14c3dd7bf6"
  integrity sha512-GkfeAQh+QNy3wquu9oIZr6SS5x7wGdSgNQvD10X3r+AZr1Oys22HW8kAmDMvNg2+Dm0TeGaEuO8gFwdBXxwO8A==
+chrome-dgram@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/chrome-dgram/-/chrome-dgram-3.0.2.tgz#7e0e00084b57971714214372368ad18a7785ad52"
+  integrity sha512-Ay741EHF/Ib18un+LUtBNK43NrabD6GOuwVaka7uUbV0gFRLEPULm2Q05YSzRNBtSrbaO4eErmDdniiy/u8Lig==
+  dependencies:
+    inherits "^2.0.1"
+    run-series "^1.1.2"
 chrome-trace-event@^1.0.0:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.2.tgz#234090ee97c7d4ad1a2c4beae27505deffc608a4"
@@ -6488,26 +6536,26 @@ p-try@^2.0.0:
  resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
  integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
-p2p-media-loader-core@^0.6.1:
+p2p-media-loader-core@^0.6.2:
-  version "0.6.1"
+  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/p2p-media-loader-core/-/p2p-media-loader-core-0.6.1.tgz#90cc05460cb5207897953e92059b32930f06a56f"
+  resolved "https://registry.yarnpkg.com/p2p-media-loader-core/-/p2p-media-loader-core-0.6.2.tgz#7e46cf8fc4357596f389e106bee850908cc974ef"
-  integrity sha512-bTyOdTVxbjzr1GCt6bOIxXlw7U6gPvYXOGo07EU0wufabKscn/TNyuTH4fDhVtw6NGMISn18G06td3V049tOBw==
+  integrity sha512-yspgCOrVVYitVNece5CA6W/kcVA0UybvbD4kyBE5ooyhCAXQK5/q6JsIpXiVQ3VkQw8Qs4mfZjU39Vt6vEk6aw==
  dependencies:
-    bittorrent-tracker "^9.11.0"
+    bittorrent-tracker "^9.14.4"
    debug "^4.1.1"
    events "^3.0.0"
    get-browser-rtc "^1.0.2"
    sha.js "^2.4.11"
-    simple-peer "^9.4.0"
+    simple-peer "^9.5.0"
-p2p-media-loader-hlsjs@^0.6.1:
+p2p-media-loader-hlsjs@^0.6.2:
-  version "0.6.1"
+  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/p2p-media-loader-hlsjs/-/p2p-media-loader-hlsjs-0.6.1.tgz#558e1737241f3c17810cddafde0e992c20656886"
+  resolved "https://registry.yarnpkg.com/p2p-media-loader-hlsjs/-/p2p-media-loader-hlsjs-0.6.2.tgz#b66f977a5d28986c8f6e62d2ffa297aec3c05186"
-  integrity sha512-JadTwrxNNKXyO4MyiK7i5zT1zOSFmaiIOlE4Gr6NjxDg8v3+Q8q09YHJPXumXexUWDNpw5vw8eHTpBdQClJ9lQ==
+  integrity sha512-5LgqWPDsgyST9rxoHGDpExZU1rIDZIT0qft2wAnlg8Cb8aVeaBxUsmF4Sj692Qb5/GBDsi8vLE03LW8gpvlh1g==
  dependencies:
    events "^3.0.0"
    m3u8-parser "^4.4.0"
-    p2p-media-loader-core "^0.6.1"
+    p2p-media-loader-core "^0.6.2"
 package-json-versionify@^1.0.2:
  version "1.0.4"
@@ -7624,7 +7672,7 @@ run-queue@^1.0.0, run-queue@^1.0.3:
  dependencies:
    aproba "^1.1.1"
-run-series@^1.0.2:
+run-series@^1.0.2, run-series@^1.1.2:
  version "1.1.8"
  resolved "https://registry.yarnpkg.com/run-series/-/run-series-1.1.8.tgz#2c4558f49221e01cd6371ff4e0a1e203e460fc36"
  integrity sha512-+GztYEPRpIsQoCSraWHDBs9WVy4eVME16zhOtDB4H9J4xN0XRhknnmLOl+4gRgZtu8dpp9N/utSPjKH/xmDzXg==
@@ -7985,7 +8033,7 @@ simple-get@^2.8.1, simple-get@^3.0.0, simple-get@^3.0.1:
    once "^1.3.1"
    simple-concat "^1.0.0"
-simple-peer@^9.0.0, simple-peer@^9.4.0:
+simple-peer@^9.0.0:
  version "9.4.0"
  resolved "https://registry.yarnpkg.com/simple-peer/-/simple-peer-9.4.0.tgz#eb82ef1181e10ec0c014a94953e2eb278f3d9025"
  integrity sha512-8qF32uq6SSSVXoBq9g31uGqZYupwRD3Ta/QK9fV04U/IbnIS6mictLb8/kjFyLVa3JrD7QYyKrw3nvJJ+lNFDw==
@@ -7996,6 +8044,17 @@ simple-peer@^9.0.0, simple-peer@^9.4.0:
    randombytes "^2.0.3"
    readable-stream "^2.3.4"
+simple-peer@^9.5.0:
+  version "9.5.0"
+  resolved "https://registry.yarnpkg.com/simple-peer/-/simple-peer-9.5.0.tgz#67ba8bd4b54efc3acf19aceafdc118b27e24fcbc"
+  integrity sha512-3tROq3nBo/CIZI8PWlXGbAxQIlQF6KQ/zcd4lQ2pAC4+rPiV7E721hI22nTO54uw/nzb2HKbvmDtZ4Wr173+vA==
+  dependencies:
+    debug "^4.0.1"
+    get-browser-rtc "^1.0.0"
+    inherits "^2.0.1"
+    randombytes "^2.0.3"
+    readable-stream "^3.4.0"
 simple-sha1@^2.0.0, simple-sha1@^2.0.8, simple-sha1@^2.1.0:
  version "2.1.2"
  resolved "https://registry.yarnpkg.com/simple-sha1/-/simple-sha1-2.1.2.tgz#de40cbd5aae278fde8e3bb3250a35d74c67326b1"
@@ -8014,6 +8073,16 @@ simple-websocket@^7.0.1:
    readable-stream "^2.0.5"
    ws "^6.0.0"
+simple-websocket@^8.0.0:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/simple-websocket/-/simple-websocket-8.0.1.tgz#c28af779034b329d0cf1448a45fdd311d21fa289"
+  integrity sha512-2QKSRjf+tqFXLVmOQjf95gHeKhuyx2k1ouDjtnE0uKCYw84HfN85HsXo+GmPH+2PIh5BQql++g2AIbHgGAZU4w==
+  dependencies:
+    debug "^4.1.1"
+    randombytes "^2.0.3"
+    readable-stream "^3.1.1"
+    ws "^7.0.0"
 slash@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
@@ -9710,6 +9779,13 @@ ws@^6.0.0:
  dependencies:
    async-limiter "~1.0.0"
+ws@^7.0.0:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.1.2.tgz#c672d1629de8bb27a9699eb599be47aeeedd8f73"
+  integrity sha512-gftXq3XI81cJCgkUiAVixA0raD9IVmXqsylCrjRygw4+UOOGzPoxnQ6r/CnVL9i+mDncJo94tSkyrtuuQVBmrg==
+  dependencies:
+    async-limiter "^1.0.0"
 ws@~3.3.1:
  version "3.3.3"
  resolved "https://registry.yarnpkg.com/ws/-/ws-3.3.3.tgz#f1cf84fe2d5e901ebce94efaece785f187a228f2"