122 files changed, 1380 insertions, 335 deletions
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
index c45269be4..dd774a4ef 100644
--- a/client/src/app/+about/about-peertube/about-peertube-contributors.component.ts
+++ b/client/src/app/+about/about-peertube/about-peertube-contributors.component.ts
@@ -14,6 +14,6 @@ export class AboutPeertubeContributorsComponent implements OnInit {
  constructor (private markdownService: MarkdownService) { }
  async ngOnInit () {
-    this.creditsHtml = await this.markdownService.completeMarkdownToHTML(this.markdown)
+    this.creditsHtml = await this.markdownService.unsafeMarkdownToHTML(this.markdown, true)
  }
 }
diff --git a/client/src/app/+about/about-routing.module.ts b/client/src/app/+about/about-routing.module.ts
index 96a737555..880bf4a39 100644
--- a/client/src/app/+about/about-routing.module.ts
+++ b/client/src/app/+about/about-routing.module.ts
@@ -1,17 +1,15 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
-import { MetaGuard } from '@ngx-meta/core'
-import { AboutComponent } from './about.component'
-import { AboutInstanceComponent } from '@app/+about/about-instance/about-instance.component'
-import { AboutPeertubeComponent } from '@app/+about/about-peertube/about-peertube.component'
 import { AboutFollowsComponent } from '@app/+about/about-follows/about-follows.component'
+import { AboutInstanceComponent } from '@app/+about/about-instance/about-instance.component'
 import { AboutInstanceResolver } from '@app/+about/about-instance/about-instance.resolver'
+import { AboutPeertubeComponent } from '@app/+about/about-peertube/about-peertube.component'
+import { AboutComponent } from './about.component'
 const aboutRoutes: Routes = [
  {
    path: '',
    component: AboutComponent,
-    canActivateChild: [ MetaGuard ],
    children: [
      {
        path: '',
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts b/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts
index 7e916e122..e146a5cd2 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts
@@ -139,6 +139,6 @@ export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
  }
  getVideoChannelLink (videoChannel: VideoChannel) {
-    return [ '/video-channels', videoChannel.nameWithHost ]
+    return [ '/c', videoChannel.nameWithHost ]
  }
 }
diff --git a/client/src/app/+accounts/accounts-routing.module.ts b/client/src/app/+accounts/accounts-routing.module.ts
index 3bf0f7185..2f3792a8d 100644
--- a/client/src/app/+accounts/accounts-routing.module.ts
+++ b/client/src/app/+accounts/accounts-routing.module.ts
@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
-import { MetaGuard } from '@ngx-meta/core'
 import { AccountSearchComponent } from './account-search/account-search.component'
 import { AccountVideoChannelsComponent } from './account-video-channels/account-video-channels.component'
 import { AccountVideosComponent } from './account-videos/account-videos.component'
@@ -14,7 +13,6 @@ const accountsRoutes: Routes = [
  {
    path: ':accountId',
    component: AccountsComponent,
-    canActivateChild: [ MetaGuard ],
    children: [
      {
        path: '',
diff --git a/client/src/app/+admin/admin-routing.module.ts b/client/src/app/+admin/admin-routing.module.ts
index 986dae8eb..d029661d3 100644
--- a/client/src/app/+admin/admin-routing.module.ts
+++ b/client/src/app/+admin/admin-routing.module.ts
@@ -4,7 +4,6 @@ import { ConfigRoutes } from '@app/+admin/config'
 import { ModerationRoutes } from '@app/+admin/moderation/moderation.routes'
 import { PluginsRoutes } from '@app/+admin/plugins/plugins.routes'
 import { SystemRoutes } from '@app/+admin/system'
-import { MetaGuard } from '@ngx-meta/core'
 import { AdminComponent } from './admin.component'
 import { FollowsRoutes } from './follows'
 import { UsersRoutes } from './users'
@@ -13,8 +12,6 @@ const adminRoutes: Routes = [
  {
    path: '',
    component: AdminComponent,
-    canActivate: [ MetaGuard ],
-    canActivateChild: [ MetaGuard ],
    children: [
      {
        path: '',
diff --git a/client/src/app/+admin/admin.module.ts b/client/src/app/+admin/admin.module.ts
index 45366f9ec..a7fe20b07 100644
--- a/client/src/app/+admin/admin.module.ts
+++ b/client/src/app/+admin/admin.module.ts
@@ -4,12 +4,13 @@ import { TableModule } from 'primeng/table'
 import { NgModule } from '@angular/core'
 import { SharedAbuseListModule } from '@app/shared/shared-abuse-list'
 import { SharedActorImageEditModule } from '@app/shared/shared-actor-image-edit'
+import { SharedActorImageModule } from '@app/shared/shared-actor-image/shared-actor-image.module'
+import { SharedCustomMarkupModule } from '@app/shared/shared-custom-markup'
 import { SharedFormModule } from '@app/shared/shared-forms'
 import { SharedGlobalIconModule } from '@app/shared/shared-icons'
 import { SharedMainModule } from '@app/shared/shared-main'
 import { SharedModerationModule } from '@app/shared/shared-moderation'
 import { SharedVideoCommentModule } from '@app/shared/shared-video-comment'
-import { SharedActorImageModule } from '../shared/shared-actor-image/shared-actor-image.module'
 import { AdminRoutingModule } from './admin-routing.module'
 import { AdminComponent } from './admin.component'
 import {
@@ -18,6 +19,7 @@ import {
  EditBasicConfigurationComponent,
  EditConfigurationService,
  EditCustomConfigComponent,
+  EditHomepageComponent,
  EditInstanceInformationComponent,
  EditLiveConfigurationComponent,
  EditVODTranscodingComponent
@@ -53,6 +55,7 @@ import { UserCreateComponent, UserListComponent, UserPasswordComponent, UsersCom
    SharedVideoCommentModule,
    SharedActorImageModule,
    SharedActorImageEditModule,
+    SharedCustomMarkupModule,
    TableModule,
    SelectButtonModule,
@@ -100,7 +103,8 @@ import { UserCreateComponent, UserListComponent, UserPasswordComponent, UsersCom
    EditVODTranscodingComponent,
    EditLiveConfigurationComponent,
    EditAdvancedConfigurationComponent,
-    EditInstanceInformationComponent
+    EditInstanceInformationComponent,
+    EditHomepageComponent
  ],
  exports: [
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
index 84a793ae4..1f542e458 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
@@ -26,22 +26,13 @@
      <div class="form-group" formGroupName="instance">
        <label i18n for="instanceDefaultClientRoute">Landing page</label>
-        <div class="peertube-select-container">
+        <my-select-custom-value
-          <select id="instanceDefaultClientRoute" formControlName="defaultClientRoute" class="form-control">
+          id="instanceDefaultClientRoute"
-            <option i18n value="/videos/overview">Discover videos</option>
+          [items]="defaultLandingPageOptions"
+          formControlName="defaultClientRoute"
-            <optgroup i18n-label label="Trending pages">
+          inputType="text"
-              <option i18n value="/videos/trending">Default trending page</option>
+          [clearable]="false"
-              <option i18n value="/videos/trending?alg=best" [disabled]="!doesTrendingVideosAlgorithmsEnabledInclude('best')">Best videos</option>
+        ></my-select-custom-value>
-              <option i18n value="/videos/trending?alg=hot" [disabled]="!doesTrendingVideosAlgorithmsEnabledInclude('hot')">Hot videos</option>
-              <option i18n value="/videos/trending?alg=most-viewed" [disabled]="!doesTrendingVideosAlgorithmsEnabledInclude('most-viewed')">Most viewed videos</option>
-              <option i18n value="/videos/trending?alg=most-liked" [disabled]="!doesTrendingVideosAlgorithmsEnabledInclude('most-liked')">Most liked videos</option>
-            </optgroup>
-            <option i18n value="/videos/recently-added">Recently added videos</option>
-            <option i18n value="/videos/local">Local videos</option>
-          </select>
-        </div>
        <div *ngIf="formErrors.instance.defaultClientRoute" class="form-error">{{ formErrors.instance.defaultClientRoute }}</div>
      </div>
@@ -167,6 +158,20 @@
                <small i18n *ngIf="hasUnlimitedSignup()" class="text-muted">Signup won't be limited to a fixed number of users.</small>
              </div>
+              <div [ngClass]="getDisabledSignupClass()" class="mt-3">
+                <label i18n for="signupMinimumAge">Minimum required age to create an account</label>
+                <div class="number-with-unit">
+                    <input
+                      type="number" min="1" id="signupMinimumAge" class="form-control"
+                      formControlName="minimumAge" [ngClass]="{ 'input-error': formErrors['signup.minimumAge'] }"
+                    >
+                    <span i18n>{form.value['signup']['minimumAge'], plural, =1 {year old} other {years old}}</span>
+                </div>
+                <div *ngIf="formErrors.signup.minimumAge" class="form-error">{{ formErrors.signup.minimumAge }}</div>
+              </div>
            </ng-container>
          </my-peertube-checkbox>
        </div>
@@ -478,7 +483,7 @@
        <ng-container formGroupName="twitter">
          <div class="form-group">
-            <label i18n for="signupLimit">Your Twitter username</label>
+            <label for="servicesTwitterUsername" i18n>Your Twitter username</label>
            <input
              type="text" id="servicesTwitterUsername" class="form-control"
@@ -498,7 +503,7 @@
                <ng-container i18n>
                  If your instance is explicitly allowed by Twitter, a video player will be embedded in the Twitter feed on PeerTube video share.<br />
                  If the instance is not, we use an image link card that will redirect to 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
+                  Check this checkbox, save the configuration and test with a video URL of your instance (https://example.com/w/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 allowed.
                </ng-container>
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.ts
index 34d05f9f3..74fdb87a1 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.ts
@@ -1,7 +1,8 @@
 import { pairwise } from 'rxjs/operators'
-import { Component, Input, OnInit } from '@angular/core'
+import { SelectOptionsItem } from 'src/types/select-options-item.model'
+import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'
 import { FormGroup } from '@angular/forms'
+import { MenuService } from '@app/core'
 import { ServerConfig } from '@shared/models'
 import { ConfigService } from '../shared/config.service'
@@ -10,22 +11,31 @@ import { ConfigService } from '../shared/config.service'
  templateUrl: './edit-basic-configuration.component.html',
  styleUrls: [ './edit-custom-config.component.scss' ]
 })
-export class EditBasicConfigurationComponent implements OnInit {
+export class EditBasicConfigurationComponent implements OnInit, OnChanges {
  @Input() form: FormGroup
  @Input() formErrors: any
  @Input() serverConfig: ServerConfig
  signupAlertMessage: string
+  defaultLandingPageOptions: SelectOptionsItem[] = []
  constructor (
-    private configService: ConfigService
+    private configService: ConfigService,
+    private menuService: MenuService
  ) { }
  ngOnInit () {
+    this.buildLandingPageOptions()
    this.checkSignupField()
  }
+  ngOnChanges (changes: SimpleChanges) {
+    if (changes['serverConfig']) {
+      this.buildLandingPageOptions()
+    }
+  }
  getVideoQuotaOptions () {
    return this.configService.videoQuotaOptions
  }
@@ -70,6 +80,15 @@ export class EditBasicConfigurationComponent implements OnInit {
    return this.form.value['followings']['instance']['autoFollowIndex']['enabled'] === true
  }
+  buildLandingPageOptions () {
+    this.defaultLandingPageOptions = this.menuService.buildCommonLinks(this.serverConfig)
+      .map(o => ({
+        id: o.path,
+        label: o.label,
+        description: o.path
+      }))
+  }
  private checkSignupField () {
    const signupControl = this.form.get('signup.enabled')
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 b6365614d..3ceea02ca 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
@@ -3,8 +3,16 @@
  <div ngbNav #nav="ngbNav" [activeId]="activeNav" (activeIdChange)="onNavChange($event)" class="nav-tabs">
+    <ng-container ngbNavItem="instance-homepage">
+      <a ngbNavLink i18n>Homepage</a>
+      <ng-template ngbNavContent>
+        <my-edit-homepage [form]="form" [formErrors]="formErrors"></my-edit-homepage>
+      </ng-template>
+    </ng-container>
    <ng-container ngbNavItem="instance-information">
-      <a ngbNavLink i18n>Instance information</a>
+      <a ngbNavLink i18n>Information</a>
      <ng-template ngbNavContent>
        <my-edit-instance-information [form]="form" [formErrors]="formErrors" [languageItems]="languageItems" [categoryItems]="categoryItems">
@@ -13,7 +21,7 @@
    </ng-container>
    <ng-container ngbNavItem="basic-configuration">
-      <a ngbNavLink i18n>Basic configuration</a>
+      <a ngbNavLink i18n>Basic</a>
      <ng-template ngbNavContent>
        <my-edit-basic-configuration [form]="form" [formErrors]="formErrors" [serverConfig]="serverConfig">
@@ -40,7 +48,7 @@
    </ng-container>
    <ng-container ngbNavItem="advanced-configuration">
-      <a ngbNavLink i18n>Advanced configuration</a>
+      <a ngbNavLink i18n>Advanced</a>
      <ng-template ngbNavContent>
        <my-edit-advanced-configuration [form]="form" [formErrors]="formErrors">
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 4b35d65fc..cb65ca6e7 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
@@ -1,4 +1,5 @@
+import omit from 'lodash-es/omit'
 import { forkJoin } from 'rxjs'
 import { SelectOptionsItem } from 'src/types/select-options-item.model'
 import { Component, OnInit } from '@angular/core'
@@ -20,13 +21,19 @@ import {
  SEARCH_INDEX_URL_VALIDATOR,
  SERVICES_TWITTER_USERNAME_VALIDATOR,
  SIGNUP_LIMIT_VALIDATOR,
+  SIGNUP_MINIMUM_AGE_VALIDATOR,
  TRANSCODING_THREADS_VALIDATOR
 } from '@app/shared/form-validators/custom-config-validators'
 import { USER_VIDEO_QUOTA_DAILY_VALIDATOR, USER_VIDEO_QUOTA_VALIDATOR } from '@app/shared/form-validators/user-validators'
 import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
-import { CustomConfig, ServerConfig } from '@shared/models'
+import { CustomPageService } from '@app/shared/shared-main/custom-page'
+import { CustomConfig, CustomPage, ServerConfig } from '@shared/models'
 import { EditConfigurationService } from './edit-configuration.service'
+type ComponentCustomConfig = CustomConfig & {
+  instanceCustomHomepage: CustomPage
+}
 @Component({
  selector: 'my-edit-custom-config',
  templateUrl: './edit-custom-config.component.html',
@@ -35,9 +42,11 @@ import { EditConfigurationService } from './edit-configuration.service'
 export class EditCustomConfigComponent extends FormReactive implements OnInit {
  activeNav: string
-  customConfig: CustomConfig
+  customConfig: ComponentCustomConfig
  serverConfig: ServerConfig
+  homepage: CustomPage
  languageItems: SelectOptionsItem[] = []
  categoryItems: SelectOptionsItem[] = []
@@ -47,6 +56,7 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
    protected formValidatorService: FormValidatorService,
    private notifier: Notifier,
    private configService: ConfigService,
+    private customPage: CustomPageService,
    private serverService: ServerService,
    private editConfigurationService: EditConfigurationService
  ) {
@@ -56,11 +66,9 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
  ngOnInit () {
    this.serverConfig = this.serverService.getTmpConfig()
    this.serverService.getConfig()
-        .subscribe(config => {
+        .subscribe(config => this.serverConfig = config)
-          this.serverConfig = config
-        })
-    const formGroupData: { [key in keyof CustomConfig ]: any } = {
+    const formGroupData: { [key in keyof ComponentCustomConfig ]: any } = {
      instance: {
        name: INSTANCE_NAME_VALIDATOR,
        shortDescription: INSTANCE_SHORT_DESCRIPTION_VALIDATOR,
@@ -113,7 +121,8 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
      signup: {
        enabled: null,
        limit: SIGNUP_LIMIT_VALIDATOR,
-        requiresEmailVerification: null
+        requiresEmailVerification: null,
+        minimumAge: SIGNUP_MINIMUM_AGE_VALIDATOR
      },
      import: {
        videos: {
@@ -215,6 +224,10 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
          disableLocalSearch: null,
          isDefaultSearch: null
        }
+      },
+      instanceCustomHomepage: {
+        content: null
      }
    }
@@ -250,15 +263,23 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
  }
  async formValidated () {
-    const value: CustomConfig = this.form.getRawValue()
+    const value: ComponentCustomConfig = this.form.getRawValue()
-    this.configService.updateCustomConfig(value)
+    forkJoin([
+      this.configService.updateCustomConfig(omit(value, 'instanceCustomHomepage')),
+      this.customPage.updateInstanceHomepage(value.instanceCustomHomepage.content)
+    ])
      .subscribe(
-        res => {
+        ([ resConfig ]) => {
-          this.customConfig = res
+          const instanceCustomHomepage = {
+            content: value.instanceCustomHomepage.content
+          }
+          this.customConfig = { ...resConfig, instanceCustomHomepage }
          // Reload general configuration
          this.serverService.resetConfig()
+            .subscribe(config => this.serverConfig = config)
          this.updateForm()
@@ -317,9 +338,12 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
  }
  private loadConfigAndUpdateForm () {
-    this.configService.getCustomConfig()
+    forkJoin([
-      .subscribe(config => {
+      this.configService.getCustomConfig(),
-        this.customConfig = config
+      this.customPage.getInstanceHomepage()
+    ])
+      .subscribe(([ config, homepage ]) => {
+        this.customConfig = { ...config, instanceCustomHomepage: homepage }
        this.updateForm()
        // Force form validation
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html b/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html
new file mode 100644
index 000000000..c48fa5bf8
--- /dev/null
+++ b/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html
@@ -0,0 +1,28 @@
+<ng-container [formGroup]="form">
+  <ng-container formGroupName="instanceCustomHomepage">
+    <div class="form-row mt-5"> <!-- homepage grid -->
+      <div class="form-group col-12 col-lg-4 col-xl-3">
+        <div i18n class="inner-form-title">INSTANCE HOMEPAGE</div>
+      </div>
+      <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+        <div class="form-group">
+          <label i18n for="instanceCustomHomepageContent">Homepage</label>
+          <my-markdown-textarea
+            name="instanceCustomHomepageContent" formControlName="content" textareaMaxWidth="90%" textareaHeight="300px"
+            [customMarkdownRenderer]="customMarkdownRenderer"
+            [classes]="{ 'input-error': formErrors['instanceCustomHomepage.content'] }"
+          ></my-markdown-textarea>
+          <div *ngIf="formErrors.instanceCustomHomepage.content" class="form-error">{{ formErrors.instanceCustomHomepage.content }}</div>
+        </div>
+      </div>
+    </div>
+  </ng-container>
+</ng-container>
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.ts
new file mode 100644
index 000000000..7decf8f75
--- /dev/null
+++ b/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.ts
@@ -0,0 +1,25 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { FormGroup } from '@angular/forms'
+import { CustomMarkupService } from '@app/shared/shared-custom-markup'
+@Component({
+  selector: 'my-edit-homepage',
+  templateUrl: './edit-homepage.component.html',
+  styleUrls: [ './edit-custom-config.component.scss' ]
+})
+export class EditHomepageComponent implements OnInit {
+  @Input() form: FormGroup
+  @Input() formErrors: any
+  customMarkdownRenderer: (text: string) => Promise<HTMLElement>
+  constructor (private customMarkup: CustomMarkupService) {
+  }
+  ngOnInit () {
+    this.customMarkdownRenderer = async (text: string) => {
+      return this.customMarkup.buildElement(text)
+    }
+  }
+}
diff --git a/client/src/app/+admin/config/edit-custom-config/index.ts b/client/src/app/+admin/config/edit-custom-config/index.ts
index 95fcc8f52..4281ad09b 100644
--- a/client/src/app/+admin/config/edit-custom-config/index.ts
+++ b/client/src/app/+admin/config/edit-custom-config/index.ts
@@ -2,6 +2,7 @@ export * from './edit-advanced-configuration.component'
 export * from './edit-basic-configuration.component'
 export * from './edit-configuration.service'
 export * from './edit-custom-config.component'
+export * from './edit-homepage.component'
 export * from './edit-instance-information.component'
 export * from './edit-live-configuration.component'
 export * from './edit-vod-transcoding.component'
diff --git a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts
index 1a95980ae..6af224920 100644
--- a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts
+++ b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts
@@ -5,8 +5,7 @@ import { PluginApiService } from '@app/+admin/plugins/shared/plugin-api.service'
 import { ComponentPagination, ConfirmService, hasMoreItems, Notifier } from '@app/core'
 import { PluginService } from '@app/core/plugins/plugin.service'
 import { compareSemVer } from '@shared/core-utils/miscs/miscs'
-import { PeerTubePlugin } from '@shared/models/plugins/peertube-plugin.model'
+import { PeerTubePlugin, PluginType } from '@shared/models'
-import { PluginType } from '@shared/models/plugins/plugin.type'
 @Component({
  selector: 'my-plugin-list-installed',
diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts
index d2c179aba..0a6e57904 100644
--- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts
@@ -4,8 +4,7 @@ import { Component, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { PluginApiService } from '@app/+admin/plugins/shared/plugin-api.service'
 import { ComponentPagination, ConfirmService, hasMoreItems, Notifier, PluginService } from '@app/core'
-import { PeerTubePluginIndex } from '@shared/models/plugins/peertube-plugin-index.model'
+import { PeerTubePluginIndex, PluginType } from '@shared/models'
-import { PluginType } from '@shared/models/plugins/plugin.type'
 @Component({
  selector: 'my-plugin-search',
diff --git a/client/src/app/+admin/users/user-edit/user-edit.component.html b/client/src/app/+admin/users/user-edit/user-edit.component.html
index 5e92c0f36..772ebf272 100644
--- a/client/src/app/+admin/users/user-edit/user-edit.component.html
+++ b/client/src/app/+admin/users/user-edit/user-edit.component.html
@@ -10,7 +10,7 @@
    <ng-container *ngIf="!isCreation()">
      <li class="breadcrumb-item active" i18n>Edit</li>
      <li class="breadcrumb-item active" aria-current="page">
-        <a *ngIf="user" [routerLink]="[ '/accounts', user?.username ]">{{ user?.username }}</a>
+        <a *ngIf="user" [routerLink]="[ '/a', user?.username ]">{{ user?.username }}</a>
      </li>
    </ng-container>
  </ol>
diff --git a/client/src/app/+admin/users/user-list/user-list.component.html b/client/src/app/+admin/users/user-list/user-list.component.html
index 44d8a7e87..5b4f35c77 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.html
+++ b/client/src/app/+admin/users/user-list/user-list.component.html
@@ -87,7 +87,7 @@
      </td>
      <td *ngIf="isSelected('username')">
-        <a i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer" [routerLink]="[ '/accounts/' + user.username ]">
+        <a i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer" [routerLink]="[ '/a/' + user.username ]">
          <div class="chip two-lines">
            <my-actor-avatar [account]="user?.account" size="32"></my-actor-avatar>
           <div>
diff --git a/client/src/app/+home/home-routing.module.ts b/client/src/app/+home/home-routing.module.ts
new file mode 100644
index 000000000..a2085f191
--- /dev/null
+++ b/client/src/app/+home/home-routing.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core'
+import { RouterModule, Routes } from '@angular/router'
+import { HomeComponent } from './home.component'
+const homeRoutes: Routes = [
+  {
+    path: '',
+    component: HomeComponent
+  }
+]
+@NgModule({
+  imports: [ RouterModule.forChild(homeRoutes) ],
+  exports: [ RouterModule ]
+})
+export class HomeRoutingModule {}
diff --git a/client/src/app/+home/home.component.html b/client/src/app/+home/home.component.html
new file mode 100644
index 000000000..645b9dc69
--- /dev/null
+++ b/client/src/app/+home/home.component.html
@@ -0,0 +1,4 @@
+<div class="root margin-content">
+  <div #contentWrapper></div>
+</div>
diff --git a/client/src/app/+home/home.component.scss b/client/src/app/+home/home.component.scss
new file mode 100644
index 000000000..6c73e9248
--- /dev/null
+++ b/client/src/app/+home/home.component.scss
@@ -0,0 +1,3 @@
+.root {
+  padding-top: 20px;
+}
diff --git a/client/src/app/+home/home.component.ts b/client/src/app/+home/home.component.ts
new file mode 100644
index 000000000..16d3a6df7
--- /dev/null
+++ b/client/src/app/+home/home.component.ts
@@ -0,0 +1,26 @@
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'
+import { CustomMarkupService } from '@app/shared/shared-custom-markup'
+import { CustomPageService } from '@app/shared/shared-main/custom-page'
+@Component({
+  templateUrl: './home.component.html',
+  styleUrls: [ './home.component.scss' ]
+})
+export class HomeComponent implements OnInit {
+  @ViewChild('contentWrapper') contentWrapper: ElementRef<HTMLInputElement>
+  constructor (
+    private customMarkupService: CustomMarkupService,
+    private customPageService: CustomPageService
+  ) { }
+  async ngOnInit () {
+    this.customPageService.getInstanceHomepage()
+      .subscribe(async ({ content }) => {
+        const element = await this.customMarkupService.buildElement(content)
+        this.contentWrapper.nativeElement.appendChild(element)
+      })
+  }
+}
diff --git a/client/src/app/+home/home.module.ts b/client/src/app/+home/home.module.ts
new file mode 100644
index 000000000..102cdc296
--- /dev/null
+++ b/client/src/app/+home/home.module.ts
@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core'
+import { SharedCustomMarkupModule } from '@app/shared/shared-custom-markup'
+import { SharedMainModule } from '@app/shared/shared-main'
+import { HomeRoutingModule } from './home-routing.module'
+import { HomeComponent } from './home.component'
+@NgModule({
+  imports: [
+    HomeRoutingModule,
+    SharedMainModule,
+    SharedCustomMarkupModule
+  ],
+  declarations: [
+    HomeComponent
+  ],
+  exports: [
+    HomeComponent
+  ],
+  providers: [ ]
+})
+export class HomeModule { }
diff --git a/client/src/app/+home/index.ts b/client/src/app/+home/index.ts
new file mode 100644
index 000000000..7c77cf9fd
--- /dev/null
+++ b/client/src/app/+home/index.ts
@@ -0,0 +1,3 @@
+export * from './home-routing.module'
+export * from './home.component'
+export * from './home.module'
diff --git a/client/src/app/+login/login-routing.module.ts b/client/src/app/+login/login-routing.module.ts
index 258ddc5c1..c5f0f23c2 100644
--- a/client/src/app/+login/login-routing.module.ts
+++ b/client/src/app/+login/login-routing.module.ts
@@ -1,14 +1,12 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
-import { MetaGuard } from '@ngx-meta/core'
-import { LoginComponent } from './login.component'
 import { ServerConfigResolver } from '@app/core/routing/server-config-resolver.service'
+import { LoginComponent } from './login.component'
 const loginRoutes: Routes = [
  {
    path: '',
    component: LoginComponent,
-    canActivate: [ MetaGuard ],
    data: {
      meta: {
        title: $localize`Login`
diff --git a/client/src/app/+my-account/my-account-routing.module.ts b/client/src/app/+my-account/my-account-routing.module.ts
index e2f8660fb..ef39c1a36 100644
--- a/client/src/app/+my-account/my-account-routing.module.ts
+++ b/client/src/app/+my-account/my-account-routing.module.ts
@@ -1,20 +1,19 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
-import { MetaGuard } from '@ngx-meta/core'
 import { LoginGuard } from '../core'
 import { MyAccountAbusesListComponent } from './my-account-abuses/my-account-abuses-list.component'
+import { MyAccountApplicationsComponent } from './my-account-applications/my-account-applications.component'
 import { MyAccountBlocklistComponent } from './my-account-blocklist/my-account-blocklist.component'
 import { MyAccountServerBlocklistComponent } from './my-account-blocklist/my-account-server-blocklist.component'
 import { MyAccountNotificationsComponent } from './my-account-notifications/my-account-notifications.component'
 import { MyAccountSettingsComponent } from './my-account-settings/my-account-settings.component'
 import { MyAccountComponent } from './my-account.component'
-import { MyAccountApplicationsComponent } from './my-account-applications/my-account-applications.component'
 const myAccountRoutes: Routes = [
  {
    path: '',
    component: MyAccountComponent,
-    canActivateChild: [ MetaGuard, LoginGuard ],
+    canActivateChild: [ LoginGuard ],
    children: [
      {
        path: '',
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
index e41cbe921..9f139b4f2 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
@@ -17,10 +17,10 @@
 <div class="video-channels">
  <div *ngFor="let videoChannel of videoChannels; let i = index" class="video-channel">
-    <my-actor-avatar [channel]="videoChannel" [internalHref]="[ '/video-channels', videoChannel.nameWithHost ]"></my-actor-avatar>
+    <my-actor-avatar [channel]="videoChannel" [internalHref]="[ '/c', videoChannel.nameWithHost ]"></my-actor-avatar>
    <div class="video-channel-info">
-      <a [routerLink]="[ '/video-channels', videoChannel.nameWithHost ]" class="video-channel-names" i18n-title title="Channel page">
+      <a [routerLink]="[ '/c', videoChannel.nameWithHost ]" class="video-channel-names" i18n-title title="Channel page">
        <div class="video-channel-display-name">{{ videoChannel.displayName }}</div>
        <div class="video-channel-name">{{ videoChannel.nameWithHost }}</div>
      </a>
diff --git a/client/src/app/+my-library/my-library-routing.module.ts b/client/src/app/+my-library/my-library-routing.module.ts
index d8e5aa562..76894bed8 100644
--- a/client/src/app/+my-library/my-library-routing.module.ts
+++ b/client/src/app/+my-library/my-library-routing.module.ts
@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
-import { MetaGuard } from '@ngx-meta/core'
 import { LoginGuard } from '../core'
 import { MyHistoryComponent } from './my-history/my-history.component'
 import { MyLibraryComponent } from './my-library.component'
@@ -17,7 +16,7 @@ const myLibraryRoutes: Routes = [
  {
    path: '',
    component: MyLibraryComponent,
-    canActivateChild: [ MetaGuard, LoginGuard ],
+    canActivateChild: [ LoginGuard ],
    children: [
      {
        path: '',
diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html
index f91cebacf..1bd459059 100644
--- a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html
+++ b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html
@@ -14,17 +14,17 @@
 <div class="video-channels" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
  <div *ngFor="let videoChannel of videoChannels" class="video-channel">
-    <my-actor-avatar [channel]="videoChannel" [internalHref]="[ '/video-channels', videoChannel.nameWithHost ]"></my-actor-avatar>
+    <my-actor-avatar [channel]="videoChannel" [internalHref]="[ '/c', videoChannel.nameWithHost ]"></my-actor-avatar>
    <div class="video-channel-info">
-      <a [routerLink]="[ '/video-channels', videoChannel.nameWithHost ]" class="video-channel-names" i18n-title title="Channel page">
+      <a [routerLink]="[ '/c', videoChannel.nameWithHost ]" class="video-channel-names" i18n-title title="Channel page">
        <div class="video-channel-display-name">{{ videoChannel.displayName }}</div>
        <div class="video-channel-name">{{ videoChannel.nameWithHost }}</div>
      </a>
      <div i18n class="video-channel-followers">{{ videoChannel.followersCount }} subscribers</div>
-      <a [routerLink]="[ '/accounts', videoChannel.ownerBy ]" i18n-title title="Owner account page" class="actor-owner">
+      <a [routerLink]="[ '/a', videoChannel.ownerBy ]" i18n-title title="Owner account page" class="actor-owner">
        <span i18n>Created by {{ videoChannel.ownerBy }}</span>
        <my-actor-avatar [account]="videoChannel.ownerAccount" size="18"></my-actor-avatar>
diff --git a/client/src/app/+my-library/my-video-imports/my-video-imports.component.ts b/client/src/app/+my-library/my-video-imports/my-video-imports.component.ts
index 359535526..bb9d70524 100644
--- a/client/src/app/+my-library/my-video-imports/my-video-imports.component.ts
+++ b/client/src/app/+my-library/my-video-imports/my-video-imports.component.ts
@@ -55,7 +55,7 @@ export class MyVideoImportsComponent extends RestTable implements OnInit {
  }
  getVideoUrl (video: { uuid: string }) {
-    return '/videos/watch/' + video.uuid
+    return '/w/' + video.uuid
  }
  getEditVideoUrl (video: { uuid: string }) {
diff --git a/client/src/app/+page-not-found/page-not-found.component.ts b/client/src/app/+page-not-found/page-not-found.component.ts
index 94b4c8d27..639e5db78 100644
--- a/client/src/app/+page-not-found/page-not-found.component.ts
+++ b/client/src/app/+page-not-found/page-not-found.component.ts
@@ -2,7 +2,6 @@ import { Component, OnInit } from '@angular/core'
 import { Title } from '@angular/platform-browser'
 import { Router } from '@angular/router'
 import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes'
 @Component({
  selector: 'my-page-not-found',
  templateUrl: './page-not-found.component.html',
@@ -10,7 +9,7 @@ import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes'
 })
 export class PageNotFoundComponent implements OnInit {
  status = HttpStatusCode.NOT_FOUND_404
-  type: string
+  type: 'video' | 'other' = 'other'
  public constructor (
    private titleService: Title,
diff --git a/client/src/app/+remote-interaction/remote-interaction.component.ts b/client/src/app/+remote-interaction/remote-interaction.component.ts
index e24607b24..6ddf5b58d 100644
--- a/client/src/app/+remote-interaction/remote-interaction.component.ts
+++ b/client/src/app/+remote-interaction/remote-interaction.component.ts
@@ -39,11 +39,11 @@ export class RemoteInteractionComponent implements OnInit {
      if (videoResult.data.length !== 0) {
        const video = videoResult.data[0]
-        redirectUrl = '/videos/watch/' + video.uuid
+        redirectUrl = '/w/' + video.uuid
      } else if (channelResult.data.length !== 0) {
        const channel = new VideoChannel(channelResult.data[0])
-        redirectUrl = '/video-channels/' + channel.nameWithHost
+        redirectUrl = '/c/' + channel.nameWithHost
      } else {
        this.error = $localize`Cannot access to the remote resource`
        return
diff --git a/client/src/app/+reset-password/reset-password-routing.module.ts b/client/src/app/+reset-password/reset-password-routing.module.ts
index 7f1ba2f68..3532cdbc1 100644
--- a/client/src/app/+reset-password/reset-password-routing.module.ts
+++ b/client/src/app/+reset-password/reset-password-routing.module.ts
@@ -1,16 +1,14 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
-import { MetaGuard } from '@ngx-meta/core'
 import { ResetPasswordComponent } from './reset-password.component'
 const resetPasswordRoutes: Routes = [
  {
    path: '',
    component: ResetPasswordComponent,
-    canActivate: [ MetaGuard ],
    data: {
      meta: {
-        title: `Reset password`
+        title: $localize`Reset password`
      }
    }
  }
diff --git a/client/src/app/+search/search-routing.module.ts b/client/src/app/+search/search-routing.module.ts
index e5d7d1ede..0d778af0d 100644
--- a/client/src/app/+search/search-routing.module.ts
+++ b/client/src/app/+search/search-routing.module.ts
@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
-import { MetaGuard } from '@ngx-meta/core'
 import { ChannelLazyLoadResolver } from './channel-lazy-load.resolver'
 import { SearchComponent } from './search.component'
 import { VideoLazyLoadResolver } from './video-lazy-load.resolver'
@@ -9,7 +8,6 @@ const searchRoutes: Routes = [
  {
    path: '',
    component: SearchComponent,
-    canActivate: [ MetaGuard ],
    data: {
      meta: {
        title: $localize`Search`
@@ -19,7 +17,6 @@ const searchRoutes: Routes = [
  {
    path: 'lazy-load-video',
    component: SearchComponent,
-    canActivate: [ MetaGuard ],
    resolve: {
      data: VideoLazyLoadResolver
    }
@@ -27,7 +24,6 @@ const searchRoutes: Routes = [
  {
    path: 'lazy-load-channel',
    component: SearchComponent,
-    canActivate: [ MetaGuard ],
    resolve: {
      data: ChannelLazyLoadResolver
    }
diff --git a/client/src/app/+search/search.component.ts b/client/src/app/+search/search.component.ts
index ecede19a3..4381659e1 100644
--- a/client/src/app/+search/search.component.ts
+++ b/client/src/app/+search/search.component.ts
@@ -1,12 +1,11 @@
 import { forkJoin, of, Subscription } from 'rxjs'
 import { Component, OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
-import { AuthService, ComponentPagination, HooksService, Notifier, ServerService, User, UserService } from '@app/core'
+import { AuthService, ComponentPagination, HooksService, MetaService, Notifier, ServerService, User, UserService } from '@app/core'
 import { immutableAssign } from '@app/helpers'
 import { Video, VideoChannel } from '@app/shared/shared-main'
 import { AdvancedSearch, SearchService } from '@app/shared/shared-search'
 import { MiniatureDisplayOptions, VideoLinkType } from '@app/shared/shared-video-miniature'
-import { MetaService } from '@ngx-meta/core'
 import { SearchTargetType, ServerConfig } from '@shared/models'
 @Component({
@@ -214,7 +213,7 @@ export class SearchComponent implements OnInit, OnDestroy {
    const linkType = this.getVideoLinkType()
    if (linkType === 'internal') {
-      return [ '/video-channels', channel.nameWithHost ]
+      return [ '/c', channel.nameWithHost ]
    }
    if (linkType === 'lazy-load') {
@@ -238,7 +237,10 @@ export class SearchComponent implements OnInit, OnDestroy {
  }
  private updateTitle () {
-    const suffix = this.currentSearch ? ' ' + this.currentSearch : ''
+    const suffix = this.currentSearch
+      ? ' ' + this.currentSearch
+      : ''
    this.metaService.setTitle($localize`Search` + suffix)
  }
diff --git a/client/src/app/+search/video-lazy-load.resolver.ts b/client/src/app/+search/video-lazy-load.resolver.ts
index d4fe6ed79..e43e0089b 100644
--- a/client/src/app/+search/video-lazy-load.resolver.ts
+++ b/client/src/app/+search/video-lazy-load.resolver.ts
@@ -28,7 +28,7 @@ export class VideoLazyLoadResolver implements Resolve<any> {
          const video = result.data[0]
-          return this.router.navigateByUrl('/videos/watch/' + video.uuid)
+          return this.router.navigateByUrl('/w/' + video.uuid)
        })
      )
  }
diff --git a/client/src/app/+signup/+register/register-routing.module.ts b/client/src/app/+signup/+register/register-routing.module.ts
index 61a2fa42d..dabe79fa5 100644
--- a/client/src/app/+signup/+register/register-routing.module.ts
+++ b/client/src/app/+signup/+register/register-routing.module.ts
@@ -1,14 +1,13 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
 import { ServerConfigResolver, UnloggedGuard } from '@app/core'
-import { MetaGuard } from '@ngx-meta/core'
 import { RegisterComponent } from './register.component'
 const registerRoutes: Routes = [
  {
    path: '',
    component: RegisterComponent,
-    canActivate: [ MetaGuard, UnloggedGuard ],
+    canActivate: [ UnloggedGuard ],
    data: {
      meta: {
        title: $localize`Register`
diff --git a/client/src/app/+signup/+register/register-step-terms.component.html b/client/src/app/+signup/+register/register-step-terms.component.html
index 1cfdc0a3a..28a6e0021 100644
--- a/client/src/app/+signup/+register/register-step-terms.component.html
+++ b/client/src/app/+signup/+register/register-step-terms.component.html
@@ -2,8 +2,8 @@
  <div class="form-group form-group-terms">
    <my-peertube-checkbox inputName="terms" formControlName="terms">
      <ng-template ptTemplate="label">
-        <ng-container i18n>
+        <ng-container i18n> 
-          I am at least 16 years old and agree
+          I am at least {{ minimumAge }} years old and agree
          to the <a class="terms-anchor" (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
diff --git a/client/src/app/+signup/+register/register-step-terms.component.ts b/client/src/app/+signup/+register/register-step-terms.component.ts
index db834c68d..20c1ae1c4 100644
--- a/client/src/app/+signup/+register/register-step-terms.component.ts
+++ b/client/src/app/+signup/+register/register-step-terms.component.ts
@@ -12,6 +12,7 @@ import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 })
 export class RegisterStepTermsComponent extends FormReactive implements OnInit {
  @Input() hasCodeOfConduct = false
+  @Input() minimumAge = 16
  @Output() formBuilt = new EventEmitter<FormGroup>()
  @Output() termsClick = new EventEmitter<void>()
diff --git a/client/src/app/+signup/+register/register.component.html b/client/src/app/+signup/+register/register.component.html
index dc1c7496f..de72065d3 100644
--- a/client/src/app/+signup/+register/register.component.html
+++ b/client/src/app/+signup/+register/register.component.html
@@ -17,6 +17,7 @@
          <my-register-step-terms
            [hasCodeOfConduct]="!!aboutHtml.codeOfConduct"
+            [minimumAge]="minimumAge"
            (formBuilt)="onTermsFormBuilt($event)" (termsClick)="onTermsClick()" (codeOfConductClick)="onCodeOfConductClick()"
          ></my-register-step-terms>
diff --git a/client/src/app/+signup/+register/register.component.ts b/client/src/app/+signup/+register/register.component.ts
index 8e89bb01a..241ca04c6 100644
--- a/client/src/app/+signup/+register/register.component.ts
+++ b/client/src/app/+signup/+register/register.component.ts
@@ -56,6 +56,10 @@ export class RegisterComponent implements OnInit {
    return this.serverConfig.signup.requiresEmailVerification
  }
+  get minimumAge () {
+    return this.serverConfig.signup.minimumAge
+  }
  ngOnInit (): void {
    this.serverConfig = this.route.snapshot.data.serverConfig
diff --git a/client/src/app/+signup/+verify-account/verify-account-routing.module.ts b/client/src/app/+signup/+verify-account/verify-account-routing.module.ts
index 67c80ae93..1bc636345 100644
--- a/client/src/app/+signup/+verify-account/verify-account-routing.module.ts
+++ b/client/src/app/+signup/+verify-account/verify-account-routing.module.ts
@@ -1,13 +1,11 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
-import { MetaGuard } from '@ngx-meta/core'
-import { VerifyAccountEmailComponent } from './verify-account-email/verify-account-email.component'
 import { VerifyAccountAskSendEmailComponent } from './verify-account-ask-send-email/verify-account-ask-send-email.component'
+import { VerifyAccountEmailComponent } from './verify-account-email/verify-account-email.component'
 const verifyAccountRoutes: Routes = [
  {
    path: '',
-    canActivateChild: [ MetaGuard ],
    children: [
      {
        path: 'email',
diff --git a/client/src/app/+video-channels/video-channels-routing.module.ts b/client/src/app/+video-channels/video-channels-routing.module.ts
index fcaad8934..4ee052873 100644
--- a/client/src/app/+video-channels/video-channels-routing.module.ts
+++ b/client/src/app/+video-channels/video-channels-routing.module.ts
@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
-import { MetaGuard } from '@ngx-meta/core'
 import { VideoChannelPlaylistsComponent } from './video-channel-playlists/video-channel-playlists.component'
 import { VideoChannelVideosComponent } from './video-channel-videos/video-channel-videos.component'
 import { VideoChannelsComponent } from './video-channels.component'
@@ -9,7 +8,6 @@ const videoChannelsRoutes: Routes = [
  {
    path: ':videoChannelName',
    component: VideoChannelsComponent,
-    canActivateChild: [ MetaGuard ],
    children: [
      {
        path: '',
diff --git a/client/src/app/+video-channels/video-channels.component.ts b/client/src/app/+video-channels/video-channels.component.ts
index 41fdb5e79..3833d9c54 100644
--- a/client/src/app/+video-channels/video-channels.component.ts
+++ b/client/src/app/+video-channels/video-channels.component.ts
@@ -112,7 +112,7 @@ export class VideoChannelsComponent implements OnInit, OnDestroy {
  }
  getAccountUrl () {
-    return [ '/accounts', this.videoChannel.ownerBy ]
+    return [ '/a', this.videoChannel.ownerBy ]
  }
  private loadChannelVideosCount () {
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 16233f9e0..50d030ac9 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
@@ -76,7 +76,7 @@
              <my-help>
                <ng-template ptTemplate="customHtml">
                  <ng-container i18n>
-                    <a href="https://chooser-beta.creativecommons.org/" target="_blank" rel="noopener noreferrer">Choose</a> the appropriate license for your work.
+                    <a href="https://chooser-beta.creativecommons.org/" target="_blank" rel="noopener noreferrer">Choose</a> the appropriate licence for your work.
                  </ng-container>
                </ng-template>
              </my-help>
diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.ts b/client/src/app/+videos/+video-edit/shared/video-edit.component.ts
index 34119f7ab..3d916dbce 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.ts
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.ts
@@ -21,8 +21,15 @@ import {
 import { FormReactiveValidationMessages, FormValidatorService } from '@app/shared/shared-forms'
 import { InstanceService } from '@app/shared/shared-instance'
 import { VideoCaptionEdit, VideoEdit, VideoService } from '@app/shared/shared-main'
-import { LiveVideo, ServerConfig, VideoConstant, VideoDetails, VideoPrivacy } from '@shared/models'
+import {
-import { RegisterClientFormFieldOptions, RegisterClientVideoFieldOptions } from '@shared/models/plugins/register-client-form-field.model'
+  LiveVideo,
+  RegisterClientFormFieldOptions,
+  RegisterClientVideoFieldOptions,
+  ServerConfig,
+  VideoConstant,
+  VideoDetails,
+  VideoPrivacy
+} from '@shared/models'
 import { I18nPrimengCalendarService } from './i18n-primeng-calendar.service'
 import { VideoCaptionAddModalComponent } from './video-caption-add-modal.component'
 import { VideoEditType } from './video-edit.type'
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.ts b/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.ts
index 8e035b6bb..727bbc32f 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.ts
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.ts
@@ -127,7 +127,7 @@ export class VideoGoLiveComponent extends VideoSend implements OnInit, AfterView
      () => {
        this.notifier.success($localize`Live published.`)
-        this.router.navigate(['/videos/watch', video.uuid])
+        this.router.navigate(['/w', video.uuid])
      },
      err => {
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.ts b/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.ts
index 3aae24732..23bd5ef76 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.ts
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.ts
@@ -5,7 +5,7 @@ import { scrollToTop } from '@app/helpers'
 import { FormValidatorService } from '@app/shared/shared-forms'
 import { VideoCaptionService, VideoEdit, VideoImportService, VideoService } from '@app/shared/shared-main'
 import { LoadingBarService } from '@ngx-loading-bar/core'
-import { VideoPrivacy, VideoUpdate } from '@shared/models'
+import { ServerErrorCode, VideoPrivacy, VideoUpdate } from '@shared/models'
 import { hydrateFormFromVideo } from '../shared/video-edit-utils'
 import { VideoSend } from './video-send'
@@ -113,7 +113,13 @@ export class VideoImportTorrentComponent extends VideoSend implements OnInit, Af
        this.loadingBar.useRef().complete()
        this.isImportingVideo = false
        this.firstStepError.emit()
-        this.notifier.error(err.message)
+        let message = err.message
+        if (err.body?.code === ServerErrorCode.INCORRECT_FILES_IN_TORRENT) {
+          message = $localize`Torrents with only 1 file are supported.`
+        }
+        this.notifier.error(message)
      }
    )
  }
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts
index bca1b6eb6..e20f08879 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts
@@ -244,7 +244,7 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
            this.isUploadingVideo = false
            this.notifier.success($localize`Video published.`)
-            this.router.navigate([ '/videos/watch', video.uuid ])
+            this.router.navigate([ '/w', video.uuid ])
          },
          err => {
diff --git a/client/src/app/+videos/+video-edit/video-add-routing.module.ts b/client/src/app/+videos/+video-edit/video-add-routing.module.ts
index 9ff66bea0..3b9a5ab3a 100644
--- a/client/src/app/+videos/+video-edit/video-add-routing.module.ts
+++ b/client/src/app/+videos/+video-edit/video-add-routing.module.ts
@@ -1,14 +1,13 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
 import { CanDeactivateGuard, LoginGuard } from '@app/core'
-import { MetaGuard } from '@ngx-meta/core'
 import { VideoAddComponent } from './video-add.component'
 const videoAddRoutes: Routes = [
  {
    path: '',
    component: VideoAddComponent,
-    canActivate: [ MetaGuard, LoginGuard ],
+    canActivate: [ LoginGuard ],
    canDeactivate: [ CanDeactivateGuard ]
  }
 ]
diff --git a/client/src/app/+videos/+video-edit/video-add.component.html b/client/src/app/+videos/+video-edit/video-add.component.html
index dc8c2f21d..ac75d9ff8 100644
--- a/client/src/app/+videos/+video-edit/video-add.component.html
+++ b/client/src/app/+videos/+video-edit/video-add.component.html
@@ -20,8 +20,8 @@
    <ng-container *ngIf="secondStepType === 'upload'" i18n>Upload {{ videoName }}</ng-container>
  </div>
-  <div ngbNav #nav="ngbNav" class="nav-tabs video-add-nav" [ngClass]="{ 'hide-nav': secondStepType !== undefined }">
+  <div ngbNav #nav="ngbNav" class="nav-tabs video-add-nav" [activeId]="activeNav" (activeIdChange)="onNavChange($event)" [ngClass]="{ 'hide-nav': !!secondStepType }">
-    <ng-container ngbNavItem>
+    <ng-container ngbNavItem="upload">
      <a ngbNavLink>
        <span i18n>Upload a file</span>
      </a>
@@ -31,7 +31,7 @@
      </ng-template>
    </ng-container>
-    <ng-container ngbNavItem *ngIf="isVideoImportHttpEnabled()">
+    <ng-container ngbNavItem="import-url" *ngIf="isVideoImportHttpEnabled()">
      <a ngbNavLink>
        <span i18n>Import with URL</span>
      </a>
@@ -41,7 +41,7 @@
      </ng-template>
    </ng-container>
-    <ng-container ngbNavItem *ngIf="isVideoImportTorrentEnabled()">
+    <ng-container ngbNavItem="import-torrent" *ngIf="isVideoImportTorrentEnabled()">
      <a ngbNavLink>
        <span i18n>Import with torrent</span>
      </a>
@@ -51,7 +51,7 @@
      </ng-template>
    </ng-container>
-    <ng-container ngbNavItem *ngIf="isVideoLiveEnabled()">
+    <ng-container ngbNavItem="go-live" *ngIf="isVideoLiveEnabled()">
      <a ngbNavLink>
        <span i18n>Go live</span>
      </a>
diff --git a/client/src/app/+videos/+video-edit/video-add.component.ts b/client/src/app/+videos/+video-edit/video-add.component.ts
index 441d5a3db..d735c936c 100644
--- a/client/src/app/+videos/+video-edit/video-add.component.ts
+++ b/client/src/app/+videos/+video-edit/video-add.component.ts
@@ -1,4 +1,5 @@
 import { Component, HostListener, OnInit, ViewChild } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService, AuthUser, CanComponentDeactivate, ServerService } from '@app/core'
 import { ServerConfig } from '@shared/models'
 import { VideoEditType } from './shared/video-edit.type'
@@ -22,11 +23,16 @@ export class VideoAddComponent implements OnInit, CanComponentDeactivate {
  secondStepType: VideoEditType
  videoName: string
-  serverConfig: ServerConfig
+  activeNav: string
+  private serverConfig: ServerConfig
  constructor (
    private auth: AuthService,
-    private serverService: ServerService
+    private serverService: ServerService,
+    private route: ActivatedRoute,
+    private router: Router
  ) {}
  get userInformationLoaded () {
@@ -42,6 +48,16 @@ export class VideoAddComponent implements OnInit, CanComponentDeactivate {
      .subscribe(config => this.serverConfig = config)
    this.user = this.auth.getUser()
+    if (this.route.snapshot.fragment) {
+      this.onNavChange(this.route.snapshot.fragment)
+    }
+  }
+  onNavChange (newActiveNav: string) {
+    this.activeNav = newActiveNav
+    this.router.navigate([], { fragment: this.activeNav })
  }
  onFirstStepDone (type: VideoEditType, videoName: string) {
diff --git a/client/src/app/+videos/+video-edit/video-update-routing.module.ts b/client/src/app/+videos/+video-edit/video-update-routing.module.ts
index a04351b05..ba9167dd0 100644
--- a/client/src/app/+videos/+video-edit/video-update-routing.module.ts
+++ b/client/src/app/+videos/+video-edit/video-update-routing.module.ts
@@ -1,7 +1,6 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
 import { CanDeactivateGuard, LoginGuard } from '@app/core'
-import { MetaGuard } from '@ngx-meta/core'
 import { VideoUpdateComponent } from './video-update.component'
 import { VideoUpdateResolver } from './video-update.resolver'
@@ -9,7 +8,7 @@ const videoUpdateRoutes: Routes = [
  {
    path: '',
    component: VideoUpdateComponent,
-    canActivate: [ MetaGuard, LoginGuard ],
+    canActivate: [ LoginGuard ],
    canDeactivate: [ CanDeactivateGuard ],
    resolve: {
      videoData: VideoUpdateResolver
diff --git a/client/src/app/+videos/+video-edit/video-update.component.html b/client/src/app/+videos/+video-edit/video-update.component.html
index 3ce3e623e..9629081e3 100644
--- a/client/src/app/+videos/+video-edit/video-update.component.html
+++ b/client/src/app/+videos/+video-edit/video-update.component.html
@@ -1,7 +1,7 @@
 <div class="margin-content">
  <div class="title-page title-page-single">
    <span class="mr-1" i18n>Update</span>
-    <a [routerLink]="[ '/videos/watch', video.uuid ]">{{ video?.name }}</a>
+    <a [routerLink]="[ '/w', video.uuid ]">{{ video?.name }}</a>
  </div>
  <form novalidate [formGroup]="form">
diff --git a/client/src/app/+videos/+video-edit/video-update.component.ts b/client/src/app/+videos/+video-edit/video-update.component.ts
index 2973c6840..574669a23 100644
--- a/client/src/app/+videos/+video-edit/video-update.component.ts
+++ b/client/src/app/+videos/+video-edit/video-update.component.ts
@@ -156,7 +156,7 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
            this.isUpdatingVideo = false
            this.loadingBar.useRef().complete()
            this.notifier.success($localize`Video updated.`)
-            this.router.navigate([ '/videos/watch', this.video.uuid ])
+            this.router.navigate([ '/w', this.video.uuid ])
          },
          err => {
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment.component.html b/client/src/app/+videos/+video-watch/comment/video-comment.component.html
index d7ba40ef6..06548edc8 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comment.component.html
+++ b/client/src/app/+videos/+video-watch/comment/video-comment.component.html
@@ -11,7 +11,7 @@
        <div class="comment-account-date">
          <div class="comment-account">
-            <a [routerLink]="[ '/accounts', comment.by ]">
+            <a [routerLink]="[ '/a', comment.by ]">
              <span class="comment-account-name" [ngClass]="{ 'video-author': video.account.id === comment.account.id }">
                {{ comment.account.displayName }}
              </span>
@@ -20,7 +20,7 @@
            </a>
          </div>
-          <a [routerLink]="['/videos/watch', video.uuid, { 'threadId': comment.threadId }]" class="comment-date" [title]="comment.createdAt">
+          <a [routerLink]="['/w', video.uuid, { 'threadId': comment.threadId }]" class="comment-date" [title]="comment.createdAt">
            {{ comment.createdAt | myFromNow }}
          </a>
        </div>
@@ -45,7 +45,7 @@
      <ng-container *ngIf="comment.isDeleted">
        <div class="comment-account-date">
          <span class="comment-account" i18n>Deleted</span>
-          <a [routerLink]="['/videos/watch', video.uuid, { 'threadId': comment.threadId }]"
+          <a [routerLink]="['/w', video.uuid, { 'threadId': comment.threadId }]"
             class="comment-date">{{ comment.createdAt | myFromNow }}</a>
        </div>
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment.component.ts b/client/src/app/+videos/+video-watch/comment/video-comment.component.ts
index fd379e80e..04f8f0d58 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comment.component.ts
+++ b/client/src/app/+videos/+video-watch/comment/video-comment.component.ts
@@ -161,7 +161,7 @@ export class VideoCommentComponent implements OnInit, OnChanges {
    // Before HTML rendering restore line feed for markdown list compatibility
    const commentText = this.comment.text.replace(/<br.?\/?>/g, '\r\n')
    const html = await this.markdownService.textMarkdownToHTML(commentText, true, true)
-    this.sanitizedCommentHTML = await this.markdownService.processVideoTimestamps(html)
+    this.sanitizedCommentHTML = this.markdownService.processVideoTimestamps(html)
    this.newParentComments = this.parentComments.concat([ this.comment ])
    if (this.comment.account) {
diff --git a/client/src/app/+videos/+video-watch/video-avatar-channel.component.html b/client/src/app/+videos/+video-watch/video-avatar-channel.component.html
index 5f149cbd1..5a7221858 100644
--- a/client/src/app/+videos/+video-watch/video-avatar-channel.component.html
+++ b/client/src/app/+videos/+video-watch/video-avatar-channel.component.html
@@ -1,11 +1,11 @@
 <div class="wrapper" [ngClass]="{ 'generic-channel': genericChannel }">
  <my-actor-avatar
    class="channel" [channel]="video.channel"
-    [internalHref]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle"
+    [internalHref]="[ '/c', video.byVideoChannel ]" [title]="channelLinkTitle"
  ></my-actor-avatar>
  <my-actor-avatar
    class="account" [account]="video.account"
-    [internalHref]="[ '/accounts', video.byAccount ]" [title]="accountLinkTitle">
+    [internalHref]="[ '/a', video.byAccount ]" [title]="accountLinkTitle">
  </my-actor-avatar>
 </div>
diff --git a/client/src/app/+videos/+video-watch/video-watch-routing.module.ts b/client/src/app/+videos/+video-watch/video-watch-routing.module.ts
index d8fecb87d..657fd10f8 100644
--- a/client/src/app/+videos/+video-watch/video-watch-routing.module.ts
+++ b/client/src/app/+videos/+video-watch/video-watch-routing.module.ts
@@ -1,13 +1,11 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
-import { MetaGuard } from '@ngx-meta/core'
 import { VideoWatchComponent } from './video-watch.component'
 const videoWatchRoutes: Routes = [
  {
-    path: 'playlist/:playlistId',
+    path: 'p/:playlistId',
-    component: VideoWatchComponent,
+    component: VideoWatchComponent
-    canActivate: [ MetaGuard ]
  },
  {
    path: ':videoId/comments/:commentId',
@@ -15,8 +13,7 @@ const videoWatchRoutes: Routes = [
  },
  {
    path: ':videoId',
-    component: VideoWatchComponent,
+    component: VideoWatchComponent
-    canActivate: [ MetaGuard ]
  }
 ]
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.html b/client/src/app/+videos/+video-watch/video-watch.component.html
index 4779602d2..bb41fba77 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.html
+++ b/client/src/app/+videos/+video-watch/video-watch.component.html
@@ -183,16 +183,16 @@
              <div class="video-info-channel-left-links ml-1">
                <ng-container *ngIf="!isChannelDisplayNameGeneric()">
-                  <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" i18n-title title="Channel page">
+                  <a [routerLink]="[ '/c', video.byVideoChannel ]" i18n-title title="Channel page">
                    {{ video.channel.displayName }}
                  </a>
-                  <a [routerLink]="[ '/accounts', video.byAccount ]" i18n-title title="Account page">
+                  <a [routerLink]="[ '/a', video.byAccount ]" i18n-title title="Account page">
                    <span i18n>By {{ video.byAccount }}</span>
                  </a>
                </ng-container>
                <ng-container *ngIf="isChannelDisplayNameGeneric()">
-                  <a [routerLink]="[ '/accounts', video.byAccount ]" class="single-link" i18n-title title="Account page">
+                  <a [routerLink]="[ '/a', video.byAccount ]" class="single-link" i18n-title title="Account page">
                    <span i18n>{{ video.byAccount }}</span>
                  </a>
                </ng-container>
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.ts b/client/src/app/+videos/+video-watch/video-watch.component.ts
index 116139d47..0acd44524 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.component.ts
@@ -9,6 +9,7 @@ import {
  AuthUser,
  ConfirmService,
  MarkdownService,
+  MetaService,
  Notifier,
  PeerTubeSocket,
  RestExtractor,
@@ -25,7 +26,6 @@ import { SupportModalComponent } from '@app/shared/shared-support-modal'
 import { SubscribeButtonComponent } from '@app/shared/shared-user-subscription'
 import { VideoActionsDisplayType, VideoDownloadComponent } from '@app/shared/shared-video-miniature'
 import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist'
-import { MetaService } from '@ngx-meta/core'
 import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
 import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes'
 import { ServerConfig, ServerErrorCode, UserVideoRateType, VideoCaption, VideoPrivacy, VideoState } from '@shared/models'
@@ -509,7 +509,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
  private async setVideoDescriptionHTML () {
    const html = await this.markdownService.textMarkdownToHTML(this.video.description)
-    this.videoHTMLDescription = await this.markdownService.processVideoTimestamps(html)
+    this.videoHTMLDescription = this.markdownService.processVideoTimestamps(html)
  }
  private setVideoLikesBarTooltipText () {
@@ -690,7 +690,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
    if (this.playlist) {
      this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo())
    } else if (this.nextVideoUuid) {
-      this.router.navigate([ '/videos/watch', this.nextVideoUuid ])
+      this.router.navigate([ '/w', this.nextVideoUuid ])
    }
  }
diff --git a/client/src/app/+videos/video-list/overview/video-overview.component.html b/client/src/app/+videos/video-list/overview/video-overview.component.html
index e21bffb6c..d3c602aa5 100644
--- a/client/src/app/+videos/video-list/overview/video-overview.component.html
+++ b/client/src/app/+videos/video-list/overview/video-overview.component.html
@@ -32,7 +32,7 @@
      <div class="section channel videos" *ngFor="let object of overview.channels">
        <div class="section-title">
-          <a [routerLink]="[ '/video-channels', buildVideoChannelBy(object) ]">
+          <a [routerLink]="[ '/c', buildVideoChannelBy(object) ]">
            <my-actor-avatar [channel]="buildVideoChannel(object)"></my-actor-avatar>
            <h2 class="section-title">{{ object.channel.displayName }}</h2>
diff --git a/client/src/app/+videos/video-list/trending/video-trending-header.component.ts b/client/src/app/+videos/video-list/trending/video-trending-header.component.ts
index 55040f3c9..bbb02a236 100644
--- a/client/src/app/+videos/video-list/trending/video-trending-header.component.ts
+++ b/client/src/app/+videos/video-list/trending/video-trending-header.component.ts
@@ -31,7 +31,8 @@ export class VideoTrendingHeaderComponent extends VideoListHeaderComponent imple
    private route: ActivatedRoute,
    private router: Router,
    private auth: AuthService,
-    private serverService: ServerService
+    private serverService: ServerService,
+    private redirectService: RedirectService
  ) {
    super(data)
@@ -84,12 +85,7 @@ export class VideoTrendingHeaderComponent extends VideoListHeaderComponent imple
    this.algorithmChangeSub = this.route.queryParams.subscribe(
      queryParams => {
-        const algorithm = queryParams['alg']
+        this.data.model = queryParams['alg'] || this.redirectService.getDefaultTrendingAlgorithm()
-        if (algorithm) {
-          this.data.model = algorithm
-        } else {
-          this.data.model = RedirectService.DEFAULT_TRENDING_ALGORITHM
-        }
      }
    )
  }
@@ -99,7 +95,7 @@ export class VideoTrendingHeaderComponent extends VideoListHeaderComponent imple
  }
  setSort () {
-    const alg = this.data.model !== RedirectService.DEFAULT_TRENDING_ALGORITHM
+    const alg = this.data.model !== this.redirectService.getDefaultTrendingAlgorithm()
      ? this.data.model
      : undefined
diff --git a/client/src/app/+videos/video-list/trending/video-trending.component.ts b/client/src/app/+videos/video-list/trending/video-trending.component.ts
index e50d6ec3a..ebec672f3 100644
--- a/client/src/app/+videos/video-list/trending/video-trending.component.ts
+++ b/client/src/app/+videos/video-list/trending/video-trending.component.ts
@@ -35,11 +35,12 @@ export class VideoTrendingComponent extends AbstractVideoList implements OnInit,
    protected storageService: LocalStorageService,
    protected cfr: ComponentFactoryResolver,
    private videoService: VideoService,
+    private redirectService: RedirectService,
    private hooks: HooksService
  ) {
    super()
-    this.defaultSort = this.parseAlgorithm(RedirectService.DEFAULT_TRENDING_ALGORITHM)
+    this.defaultSort = this.parseAlgorithm(this.redirectService.getDefaultTrendingAlgorithm())
    this.headerComponentInjector = this.getInjector()
  }
@@ -106,7 +107,7 @@ export class VideoTrendingComponent extends AbstractVideoList implements OnInit,
  }
  protected loadPageRouteParams (queryParams: Params) {
-    const algorithm = queryParams['alg'] || RedirectService.DEFAULT_TRENDING_ALGORITHM
+    const algorithm = queryParams['alg'] || this.redirectService.getDefaultTrendingAlgorithm()
    this.sort = this.parseAlgorithm(algorithm)
  }
@@ -115,8 +116,10 @@ export class VideoTrendingComponent extends AbstractVideoList implements OnInit,
    switch (algorithm) {
      case 'most-viewed':
        return '-trending'
      case 'most-liked':
        return '-likes'
      default:
        return '-' + algorithm as VideoSortField
    }
diff --git a/client/src/app/+videos/videos-routing.module.ts b/client/src/app/+videos/videos-routing.module.ts
index 16e3b9bb2..926dfaab0 100644
--- a/client/src/app/+videos/videos-routing.module.ts
+++ b/client/src/app/+videos/videos-routing.module.ts
@@ -1,7 +1,6 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
 import { LoginGuard } from '@app/core'
-import { MetaGuard } from '@ngx-meta/core'
 import { VideoTrendingComponent } from './video-list'
 import { VideoOverviewComponent } from './video-list/overview/video-overview.component'
 import { VideoLocalComponent } from './video-list/video-local.component'
@@ -13,7 +12,6 @@ const videosRoutes: Routes = [
  {
    path: '',
    component: VideosComponent,
-    canActivateChild: [ MetaGuard ],
    children: [
      {
        path: 'overview',
@@ -76,31 +74,6 @@ const videosRoutes: Routes = [
            key: 'local-videos-list'
          }
        }
-      },
-      {
-        path: 'upload',
-        loadChildren: () => import('@app/+videos/+video-edit/video-add.module').then(m => m.VideoAddModule),
-        data: {
-          meta: {
-            title: $localize`Upload a video`
-          }
-        }
-      },
-      {
-        path: 'update/:uuid',
-        loadChildren: () => import('@app/+videos/+video-edit/video-update.module').then(m => m.VideoUpdateModule),
-        data: {
-          meta: {
-            title: $localize`Edit a video`
-          }
-        }
-      },
-      {
-        path: 'watch',
-        loadChildren: () => import('@app/+videos/+video-watch/video-watch.module').then(m => m.VideoWatchModule),
-        data: {
-          preload: 3000
-        }
      }
    ]
  }
diff --git a/client/src/app/app-routing.module.ts b/client/src/app/app-routing.module.ts
index 3ea5b7e5e..e35f540be 100644
--- a/client/src/app/app-routing.module.ts
+++ b/client/src/app/app-routing.module.ts
@@ -1,70 +1,159 @@
 import { NgModule } from '@angular/core'
-import { RouteReuseStrategy, RouterModule, Routes } from '@angular/router'
+import { RouteReuseStrategy, RouterModule, Routes, UrlMatchResult, UrlSegment } from '@angular/router'
 import { CustomReuseStrategy } from '@app/core/routing/custom-reuse-strategy'
 import { MenuGuards } from '@app/core/routing/menu-guard.service'
 import { POSSIBLE_LOCALES } from '@shared/core-utils/i18n'
-import { PreloadSelectedModulesList } from './core'
+import { MetaGuard, PreloadSelectedModulesList } from './core'
 import { EmptyComponent } from './empty.component'
+import { USER_USERNAME_REGEX_CHARACTERS } from './shared/form-validators/user-validators'
+import { ActorRedirectGuard } from './shared/shared-main'
 const routes: Routes = [
  {
    path: 'admin',
    canActivate: [ MenuGuards.close() ],
    canDeactivate: [ MenuGuards.open() ],
-    loadChildren: () => import('./+admin/admin.module').then(m => m.AdminModule)
+    loadChildren: () => import('./+admin/admin.module').then(m => m.AdminModule),
+    canActivateChild: [ MetaGuard ]
+  },
+  {
+    path: 'home',
+    loadChildren: () => import('./+home/home.module').then(m => m.HomeModule),
+    canActivateChild: [ MetaGuard ]
  },
  {
    path: 'my-account',
-    loadChildren: () => import('./+my-account/my-account.module').then(m => m.MyAccountModule)
+    loadChildren: () => import('./+my-account/my-account.module').then(m => m.MyAccountModule),
+    canActivateChild: [ MetaGuard ]
  },
  {
    path: 'my-library',
-    loadChildren: () => import('./+my-library/my-library.module').then(m => m.MyLibraryModule)
+    loadChildren: () => import('./+my-library/my-library.module').then(m => m.MyLibraryModule),
+    canActivateChild: [ MetaGuard ]
  },
  {
    path: 'verify-account',
-    loadChildren: () => import('./+signup/+verify-account/verify-account.module').then(m => m.VerifyAccountModule)
+    loadChildren: () => import('./+signup/+verify-account/verify-account.module').then(m => m.VerifyAccountModule),
+    canActivateChild: [ MetaGuard ]
  },
  {
    path: 'accounts',
-    loadChildren: () => import('./+accounts/accounts.module').then(m => m.AccountsModule)
+    redirectTo: 'a'
  },
  {
+    path: 'a',
+    loadChildren: () => import('./+accounts/accounts.module').then(m => m.AccountsModule),
+    canActivateChild: [ MetaGuard ]
+  },
+  {
    path: 'video-channels',
-    loadChildren: () => import('./+video-channels/video-channels.module').then(m => m.VideoChannelsModule)
+    redirectTo: 'c'
+  },
+  {
+    path: 'c',
+    loadChildren: () => import('./+video-channels/video-channels.module').then(m => m.VideoChannelsModule),
+    canActivateChild: [ MetaGuard ]
  },
  {
    path: 'about',
-    loadChildren: () => import('./+about/about.module').then(m => m.AboutModule)
+    loadChildren: () => import('./+about/about.module').then(m => m.AboutModule),
+    canActivateChild: [ MetaGuard ]
  },
  {
    path: 'signup',
-    loadChildren: () => import('./+signup/+register/register.module').then(m => m.RegisterModule)
+    loadChildren: () => import('./+signup/+register/register.module').then(m => m.RegisterModule),
+    canActivateChild: [ MetaGuard ]
  },
  {
    path: 'reset-password',
-    loadChildren: () => import('./+reset-password/reset-password.module').then(m => m.ResetPasswordModule)
+    loadChildren: () => import('./+reset-password/reset-password.module').then(m => m.ResetPasswordModule),
+    canActivateChild: [ MetaGuard ]
  },
  {
    path: 'login',
-    loadChildren: () => import('./+login/login.module').then(m => m.LoginModule)
+    loadChildren: () => import('./+login/login.module').then(m => m.LoginModule),
+    canActivateChild: [ MetaGuard ]
  },
  {
    path: 'search',
-    loadChildren: () => import('./+search/search.module').then(m => m.SearchModule)
+    loadChildren: () => import('./+search/search.module').then(m => m.SearchModule),
+    canActivateChild: [ MetaGuard ]
  },
  {
-    path: 'videos',
+    path: 'videos/upload',
-    loadChildren: () => import('./+videos/videos.module').then(m => m.VideosModule)
+    loadChildren: () => import('@app/+videos/+video-edit/video-add.module').then(m => m.VideoAddModule),
+    data: {
+      meta: {
+        title: $localize`Upload a video`
+      }
+    }
  },
  {
-    path: 'remote-interaction',
+    path: 'videos/update/:uuid',
-    loadChildren: () => import('./+remote-interaction/remote-interaction.module').then(m => m.RemoteInteractionModule)
+    loadChildren: () => import('@app/+videos/+video-edit/video-update.module').then(m => m.VideoUpdateModule),
+    data: {
+      meta: {
+        title: $localize`Edit a video`
+      }
+    }
+  },
+  {
+    path: 'videos/watch/playlist',
+    redirectTo: 'w/p'
+  },
+  {
+    path: 'videos/watch',
+    redirectTo: 'w'
+  },
+  {
+    path: 'w',
+    loadChildren: () => import('@app/+videos/+video-watch/video-watch.module').then(m => m.VideoWatchModule),
+    data: {
+      preload: 3000
+    }
+  },
+  {
+    path: 'videos',
+    loadChildren: () => import('./+videos/videos.module').then(m => m.VideosModule),
+    canActivateChild: [ MetaGuard ]
  },
  {
    path: 'video-playlists/watch',
    redirectTo: 'videos/watch/playlist'
  },
+  {
+    path: 'remote-interaction',
+    loadChildren: () => import('./+remote-interaction/remote-interaction.module').then(m => m.RemoteInteractionModule),
+    canActivateChild: [ MetaGuard ]
+  },
+  // Matches /@:actorName
+  {
+    matcher: (url): UrlMatchResult => {
+      const regex = new RegExp(`^@(${USER_USERNAME_REGEX_CHARACTERS}+)$`)
+      if (url.length !== 1) return null
+      const matchResult = url[0].path.match(regex)
+      if (!matchResult) return null
+      return {
+        consumed: url,
+        posParams: {
+          actorName: new UrlSegment(matchResult[1], {})
+        }
+      }
+    },
+    pathMatch: 'full',
+    canActivate: [ ActorRedirectGuard ],
+    component: EmptyComponent
+  },
  {
    path: '',
    component: EmptyComponent // Avoid 404, app component will redirect dynamically
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index 66d871b4a..863c3f3b5 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -67,7 +67,7 @@ export class AppComponent implements OnInit, AfterViewInit {
  }
  goToDefaultRoute () {
-    return this.router.navigateByUrl(RedirectService.DEFAULT_ROUTE)
+    return this.router.navigateByUrl(this.redirectService.getDefaultRoute())
  }
  ngOnInit () {
@@ -231,7 +231,7 @@ export class AppComponent implements OnInit, AfterViewInit {
        }
        this.broadcastMessage = {
-          message: await this.markdownService.completeMarkdownToHTML(messageConfig.message),
+          message: await this.markdownService.unsafeMarkdownToHTML(messageConfig.message, true),
          dismissable: messageConfig.dismissable,
          class: classes[messageConfig.level]
        }
diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts
index 3cec6d739..9f46d49a2 100644
--- a/client/src/app/app.module.ts
+++ b/client/src/app/app.module.ts
@@ -4,9 +4,7 @@ import { APP_BASE_HREF, registerLocaleData } from '@angular/common'
 import { NgModule } from '@angular/core'
 import { BrowserModule } from '@angular/platform-browser'
 import { ServiceWorkerModule } from '@angular/service-worker'
-import { ServerService } from '@app/core'
 import localeOc from '@app/helpers/locales/oc'
-import { MetaLoader, MetaModule, MetaStaticLoader, PageTitlePositioning } from '@ngx-meta/core'
 import { AppRoutingModule } from './app-routing.module'
 import { AppComponent } from './app.component'
 import { CoreModule } from './core'
@@ -19,12 +17,12 @@ import { CustomModalComponent } from './modal/custom-modal.component'
 import { InstanceConfigWarningModalComponent } from './modal/instance-config-warning-modal.component'
 import { QuickSettingsModalComponent } from './modal/quick-settings-modal.component'
 import { WelcomeModalComponent } from './modal/welcome-modal.component'
+import { SharedActorImageModule } from './shared/shared-actor-image/shared-actor-image.module'
 import { SharedFormModule } from './shared/shared-forms'
 import { SharedGlobalIconModule } from './shared/shared-icons'
 import { SharedInstanceModule } from './shared/shared-instance'
 import { SharedMainModule } from './shared/shared-main'
 import { SharedUserInterfaceSettingsModule } from './shared/shared-user-settings'
-import { SharedActorImageModule } from './shared/shared-actor-image/shared-actor-image.module'
 registerLocaleData(localeOc, 'oc')
@@ -62,22 +60,6 @@ registerLocaleData(localeOc, 'oc')
    SharedInstanceModule,
    SharedActorImageModule,
-    MetaModule.forRoot({
-      provide: MetaLoader,
-      useFactory: (serverService: ServerService) => {
-        return new MetaStaticLoader({
-          pageTitlePositioning: PageTitlePositioning.PrependPageTitle,
-          pageTitleSeparator: ' - ',
-          get applicationName () { return serverService.getTmpConfig().instance.name },
-          defaults: {
-            get title () { return serverService.getTmpConfig().instance.name },
-            get description () { return serverService.getTmpConfig().instance.shortDescription }
-          }
-        })
-      },
-      deps: [ ServerService ]
-    }),
    AppRoutingModule // Put it after all the module because it has the 404 route
  ],
diff --git a/client/src/app/core/core.module.ts b/client/src/app/core/core.module.ts
index 3152a7003..de3274544 100644
--- a/client/src/app/core/core.module.ts
+++ b/client/src/app/core/core.module.ts
@@ -14,7 +14,7 @@ import { throwIfAlreadyLoaded } from './module-import-guard'
 import { Notifier } from './notification'
 import { HtmlRendererService, LinkifierService, MarkdownService } from './renderer'
 import { RestExtractor, RestService } from './rest'
-import { LoginGuard, RedirectService, UnloggedGuard, UserRightGuard } from './routing'
+import { LoginGuard, MetaGuard, MetaService, RedirectService, UnloggedGuard, UserRightGuard } from './routing'
 import { CanDeactivateGuard } from './routing/can-deactivate-guard.service'
 import { ServerConfigResolver } from './routing/server-config-resolver.service'
 import { ScopedTokensService } from './scoped-tokens'
@@ -77,7 +77,10 @@ import { LocalStorageService, ScreenService, SessionStorageService } from './wra
    MessageService,
    PeerTubeSocket,
    ServerConfigResolver,
-    CanDeactivateGuard
+    CanDeactivateGuard,
+    MetaService,
+    MetaGuard
  ]
 })
 export class CoreModule {
diff --git a/client/src/app/core/menu/menu.service.ts b/client/src/app/core/menu/menu.service.ts
index 502d3bb2f..77592cbb6 100644
--- a/client/src/app/core/menu/menu.service.ts
+++ b/client/src/app/core/menu/menu.service.ts
@@ -1,8 +1,19 @@
 import { fromEvent } from 'rxjs'
 import { debounceTime } from 'rxjs/operators'
 import { Injectable } from '@angular/core'
+import { GlobalIconName } from '@app/shared/shared-icons'
+import { sortObjectComparator } from '@shared/core-utils/miscs/miscs'
+import { ServerConfig } from '@shared/models/server'
 import { ScreenService } from '../wrappers'
+export type MenuLink = {
+  icon: GlobalIconName
+  label: string
+  menuLabel: string
+  path: string
+  priority: number
+}
 @Injectable()
 export class MenuService {
  isMenuDisplayed = true
@@ -48,6 +59,53 @@ export class MenuService {
    this.isMenuDisplayed = window.innerWidth >= 800 && !this.isMenuChangedByUser
  }
+  buildCommonLinks (config: ServerConfig) {
+    let entries: MenuLink[] = [
+      {
+        icon: 'globe' as 'globe',
+        label: $localize`Discover videos`,
+        menuLabel: $localize`Discover`,
+        path: '/videos/overview',
+        priority: 150
+      },
+      {
+        icon: 'trending' as 'trending',
+        label: $localize`Trending videos`,
+        menuLabel: $localize`Trending`,
+        path: '/videos/trending',
+        priority: 140
+      },
+      {
+        icon: 'recently-added' as 'recently-added',
+        label: $localize`Recently added videos`,
+        menuLabel: $localize`Recently added`,
+        path: '/videos/recently-added',
+        priority: 130
+      },
+      {
+        icon: 'octagon' as 'octagon',
+        label: $localize`Local videos`,
+        menuLabel: $localize`Local videos`,
+        path: '/videos/local',
+        priority: 120
+      }
+    ]
+    if (config.homepage.enabled) {
+      entries.push({
+        icon: 'home' as 'home',
+        label: $localize`Home`,
+        menuLabel: $localize`Home`,
+        path: '/home',
+        priority: 160
+      })
+    }
+    entries = entries.sort(sortObjectComparator('priority', 'desc'))
+    return entries
+  }
  private handleWindowResize () {
    // On touch screens, do not handle window resize event since opened menu is handled with a content overlay
    if (this.screenService.isInTouchScreen()) return
diff --git a/client/src/app/core/renderer/html-renderer.service.ts b/client/src/app/core/renderer/html-renderer.service.ts
index 3176cf6a4..418d8603e 100644
--- a/client/src/app/core/renderer/html-renderer.service.ts
+++ b/client/src/app/core/renderer/html-renderer.service.ts
@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core'
 import { LinkifierService } from './linkifier.service'
-import { SANITIZE_OPTIONS } from '@shared/core-utils/renderer/html'
+import { getCustomMarkupSanitizeOptions, getSanitizeOptions } from '@shared/core-utils/renderer/html'
 @Injectable()
 export class HtmlRendererService {
@@ -20,7 +20,7 @@ export class HtmlRendererService {
    })
  }
-  async toSafeHtml (text: string) {
+  async toSafeHtml (text: string, additionalAllowedTags: string[] = []) {
    const [ html ] = await Promise.all([
      // Convert possible markdown to html
      this.linkifier.linkify(text),
@@ -28,7 +28,11 @@ export class HtmlRendererService {
      this.loadSanitizeHtml()
    ])
-    return this.sanitizeHtml(html, SANITIZE_OPTIONS)
+    const options = additionalAllowedTags.length !== 0
+      ? getCustomMarkupSanitizeOptions(additionalAllowedTags)
+      : getSanitizeOptions()
+    return this.sanitizeHtml(html, options)
  }
  private async loadSanitizeHtml () {
diff --git a/client/src/app/core/renderer/markdown.service.ts b/client/src/app/core/renderer/markdown.service.ts
index edddb0a66..ca1bf4eb9 100644
--- a/client/src/app/core/renderer/markdown.service.ts
+++ b/client/src/app/core/renderer/markdown.service.ts
@@ -17,12 +17,15 @@ type MarkdownParsers = {
  enhancedMarkdownIt: MarkdownIt
  enhancedWithHTMLMarkdownIt: MarkdownIt
-  completeMarkdownIt: MarkdownIt
+  unsafeMarkdownIt: MarkdownIt
+  customPageMarkdownIt: MarkdownIt
 }
 type MarkdownConfig = {
  rules: string[]
  html: boolean
+  breaks: boolean
  escape?: boolean
 }
@@ -35,18 +38,24 @@ export class MarkdownService {
  private markdownParsers: MarkdownParsers = {
    textMarkdownIt: null,
    textWithHTMLMarkdownIt: null,
    enhancedMarkdownIt: null,
    enhancedWithHTMLMarkdownIt: null,
-    completeMarkdownIt: null
+    unsafeMarkdownIt: null,
+    customPageMarkdownIt: null
  }
  private parsersConfig: MarkdownParserConfigs = {
-    textMarkdownIt: { rules: TEXT_RULES, html: false },
+    textMarkdownIt: { rules: TEXT_RULES, breaks: true, html: false },
-    textWithHTMLMarkdownIt: { rules: TEXT_WITH_HTML_RULES, html: true, escape: true },
+    textWithHTMLMarkdownIt: { rules: TEXT_WITH_HTML_RULES, breaks: true, html: true, escape: true },
-    enhancedMarkdownIt: { rules: ENHANCED_RULES, html: false },
+    enhancedMarkdownIt: { rules: ENHANCED_RULES, breaks: true, html: false },
-    enhancedWithHTMLMarkdownIt: { rules: ENHANCED_WITH_HTML_RULES, html: true, escape: true },
+    enhancedWithHTMLMarkdownIt: { rules: ENHANCED_WITH_HTML_RULES, breaks: true, html: true, escape: true },
-    completeMarkdownIt: { rules: COMPLETE_RULES, html: true }
+    unsafeMarkdownIt: { rules: COMPLETE_RULES, breaks: true, html: true, escape: false },
+    customPageMarkdownIt: { rules: COMPLETE_RULES, breaks: false, html: true, escape: true }
  }
  private emojiModule: any
@@ -54,22 +63,26 @@ export class MarkdownService {
  constructor (private htmlRenderer: HtmlRendererService) {}
  textMarkdownToHTML (markdown: string, withHtml = false, withEmoji = false) {
-    if (withHtml) return this.render('textWithHTMLMarkdownIt', markdown, withEmoji)
+    if (withHtml) return this.render({ name: 'textWithHTMLMarkdownIt', markdown, withEmoji })
-    return this.render('textMarkdownIt', markdown, withEmoji)
+    return this.render({ name: 'textMarkdownIt', markdown, withEmoji })
  }
  enhancedMarkdownToHTML (markdown: string, withHtml = false, withEmoji = false) {
-    if (withHtml) return this.render('enhancedWithHTMLMarkdownIt', markdown, withEmoji)
+    if (withHtml) return this.render({ name: 'enhancedWithHTMLMarkdownIt', markdown, withEmoji })
+    return this.render({ name: 'enhancedMarkdownIt', markdown, withEmoji })
+  }
-    return this.render('enhancedMarkdownIt', markdown, withEmoji)
+  unsafeMarkdownToHTML (markdown: string, _trustedInput: true) {
+    return this.render({ name: 'unsafeMarkdownIt', markdown, withEmoji: true })
  }
-  completeMarkdownToHTML (markdown: string) {
+  customPageMarkdownToHTML (markdown: string, additionalAllowedTags: string[]) {
-    return this.render('completeMarkdownIt', markdown, true)
+    return this.render({ name: 'customPageMarkdownIt', markdown, withEmoji: true, additionalAllowedTags })
  }
-  async processVideoTimestamps (html: string) {
+  processVideoTimestamps (html: string) {
    return html.replace(/((\d{1,2}):)?(\d{1,2}):(\d{1,2})/g, function (str, _, h, m, s) {
      const t = (3600 * +(h || 0)) + (60 * +(m || 0)) + (+(s || 0))
      const url = buildVideoLink({ startTime: t })
@@ -77,7 +90,13 @@ export class MarkdownService {
    })
  }
-  private async render (name: keyof MarkdownParsers, markdown: string, withEmoji = false) {
+  private async render (options: {
+    name: keyof MarkdownParsers
+    markdown: string
+    withEmoji: boolean
+    additionalAllowedTags?: string[]
+  }) {
+    const { name, markdown, withEmoji, additionalAllowedTags } = options
    if (!markdown) return ''
    const config = this.parsersConfig[ name ]
@@ -96,7 +115,7 @@ export class MarkdownService {
    let html = this.markdownParsers[ name ].render(markdown)
    html = this.avoidTruncatedTags(html)
-    if (config.escape) return this.htmlRenderer.toSafeHtml(html)
+    if (config.escape) return this.htmlRenderer.toSafeHtml(html, additionalAllowedTags)
    return html
  }
@@ -105,7 +124,7 @@ export class MarkdownService {
    // FIXME: import('...') returns a struct module, containing a "default" field
    const MarkdownItClass: typeof import ('markdown-it') = (await import('markdown-it') as any).default
-    const markdownIt = new MarkdownItClass('zero', { linkify: true, breaks: true, html: config.html })
+    const markdownIt = new MarkdownItClass('zero', { linkify: true, breaks: config.breaks, html: config.html })
    for (const rule of config.rules) {
      markdownIt.enable(rule)
diff --git a/client/src/app/core/routing/index.ts b/client/src/app/core/routing/index.ts
index 239c27caf..4314ea475 100644
--- a/client/src/app/core/routing/index.ts
+++ b/client/src/app/core/routing/index.ts
@@ -3,6 +3,8 @@ export * from './custom-reuse-strategy'
 export * from './disable-for-reuse-hook'
 export * from './login-guard.service'
 export * from './menu-guard.service'
+export * from './meta-guard.service'
+export * from './meta.service'
 export * from './preload-selected-modules-list'
 export * from './redirect.service'
 export * from './server-config-resolver.service'
diff --git a/client/src/app/core/routing/meta-guard.service.ts b/client/src/app/core/routing/meta-guard.service.ts
new file mode 100644
index 000000000..bedb3450e
--- /dev/null
+++ b/client/src/app/core/routing/meta-guard.service.ts
@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core'
+import { ActivatedRouteSnapshot, CanActivate, CanActivateChild, RouterStateSnapshot } from '@angular/router'
+import { MetaService } from './meta.service'
+@Injectable()
+export class MetaGuard implements CanActivate, CanActivateChild {
+  constructor (private meta: MetaService) { }
+  canActivate (route: ActivatedRouteSnapshot): boolean {
+    const metaSettings = route.data?.meta
+    if (metaSettings) {
+      this.meta.update(metaSettings)
+    }
+    return true
+  }
+  canActivateChild (route: ActivatedRouteSnapshot): boolean {
+    return this.canActivate(route)
+  }
+}
diff --git a/client/src/app/core/routing/meta.service.ts b/client/src/app/core/routing/meta.service.ts
new file mode 100644
index 000000000..a5ac778dc
--- /dev/null
+++ b/client/src/app/core/routing/meta.service.ts
@@ -0,0 +1,40 @@
+import { Injectable } from '@angular/core'
+import { Meta, Title } from '@angular/platform-browser'
+import { HTMLServerConfig } from '@shared/models/server'
+import { ServerService } from '../server'
+export interface MetaSettings {
+  title?: string
+}
+@Injectable()
+export class MetaService {
+  private config: HTMLServerConfig
+  constructor (
+    private titleService: Title,
+    private meta: Meta,
+    private server: ServerService
+  ) {
+    this.config = this.server.getTmpConfig()
+    this.server.getConfig()
+      .subscribe(config => this.config = config)
+  }
+  setTitle (subTitle?: string) {
+    let title = ''
+    if (subTitle) title += `${subTitle} - `
+    title += this.config.instance.name
+    this.titleService.setTitle(title)
+  }
+  setTag (name: string, value: string) {
+    this.meta.addTag({ name, content: value })
+  }
+  update (meta: MetaSettings) {
+    this.setTitle(meta.title)
+  }
+}
diff --git a/client/src/app/core/routing/redirect.service.ts b/client/src/app/core/routing/redirect.service.ts
index 6d26fb504..cf690a4d0 100644
--- a/client/src/app/core/routing/redirect.service.ts
+++ b/client/src/app/core/routing/redirect.service.ts
@@ -6,14 +6,14 @@ import { ServerService } from '../server'
 export class RedirectService {
  // Default route could change according to the instance configuration
  static INIT_DEFAULT_ROUTE = '/videos/trending'
-  static DEFAULT_ROUTE = RedirectService.INIT_DEFAULT_ROUTE
  static INIT_DEFAULT_TRENDING_ALGORITHM = 'most-viewed'
-  static DEFAULT_TRENDING_ALGORITHM = RedirectService.INIT_DEFAULT_TRENDING_ALGORITHM
  private previousUrl: string
  private currentUrl: string
  private redirectingToHomepage = false
+  private defaultTrendingAlgorithm = RedirectService.INIT_DEFAULT_TRENDING_ALGORITHM
+  private defaultRoute = RedirectService.INIT_DEFAULT_ROUTE
  constructor (
    private router: Router,
@@ -22,10 +22,10 @@ export class RedirectService {
    // The config is first loaded from the cache so try to get the default route
    const tmpConfig = this.serverService.getTmpConfig()
    if (tmpConfig?.instance?.defaultClientRoute) {
-      RedirectService.DEFAULT_ROUTE = tmpConfig.instance.defaultClientRoute
+      this.defaultRoute = tmpConfig.instance.defaultClientRoute
    }
    if (tmpConfig?.trending?.videos?.algorithms?.default) {
-      RedirectService.DEFAULT_TRENDING_ALGORITHM = tmpConfig.trending.videos.algorithms.default
+      this.defaultTrendingAlgorithm = tmpConfig.trending.videos.algorithms.default
    }
    // Load default route
@@ -34,13 +34,8 @@ export class RedirectService {
          const defaultRouteConfig = config.instance.defaultClientRoute
          const defaultTrendingConfig = config.trending.videos.algorithms.default
-          if (defaultRouteConfig) {
+          if (defaultRouteConfig) this.defaultRoute = defaultRouteConfig
-            RedirectService.DEFAULT_ROUTE = defaultRouteConfig
+          if (defaultTrendingConfig) this.defaultTrendingAlgorithm = defaultTrendingConfig
-          }
-          if (defaultTrendingConfig) {
-            RedirectService.DEFAULT_TRENDING_ALGORITHM = defaultTrendingConfig
-          }
        })
    // Track previous url
@@ -53,6 +48,14 @@ export class RedirectService {
    })
  }
+  getDefaultRoute () {
+    return this.defaultRoute
+  }
+  getDefaultTrendingAlgorithm () {
+    return this.defaultTrendingAlgorithm
+  }
  redirectToPreviousRoute () {
    const exceptions = [
      '/verify-account',
@@ -72,21 +75,21 @@ export class RedirectService {
    this.redirectingToHomepage = true
-    console.log('Redirecting to %s...', RedirectService.DEFAULT_ROUTE)
+    console.log('Redirecting to %s...', this.defaultRoute)
-    this.router.navigateByUrl(RedirectService.DEFAULT_ROUTE, { skipLocationChange })
+    this.router.navigateByUrl(this.defaultRoute, { skipLocationChange })
        .then(() => this.redirectingToHomepage = false)
        .catch(() => {
          this.redirectingToHomepage = false
          console.error(
            'Cannot navigate to %s, resetting default route to %s.',
-            RedirectService.DEFAULT_ROUTE,
+            this.defaultRoute,
            RedirectService.INIT_DEFAULT_ROUTE
          )
-          RedirectService.DEFAULT_ROUTE = RedirectService.INIT_DEFAULT_ROUTE
+          this.defaultRoute = RedirectService.INIT_DEFAULT_ROUTE
-          return this.router.navigateByUrl(RedirectService.DEFAULT_ROUTE, { skipLocationChange })
+          return this.router.navigateByUrl(this.defaultRoute, { skipLocationChange })
        })
  }
diff --git a/client/src/app/core/server/server.service.ts b/client/src/app/core/server/server.service.ts
index 906191ae1..6918957f4 100644
--- a/client/src/app/core/server/server.service.ts
+++ b/client/src/app/core/server/server.service.ts
@@ -3,7 +3,6 @@ import { first, map, share, shareReplay, switchMap, tap } from 'rxjs/operators'
 import { HttpClient } from '@angular/common/http'
 import { Inject, Injectable, LOCALE_ID } from '@angular/core'
 import { getDevLocale, isOnDevLocale, sortBy } from '@app/helpers'
-import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
 import { getCompleteLocale, isDefaultLocale, peertubeTranslate } from '@shared/core-utils/i18n'
 import { SearchTargetType, ServerConfig, ServerStats, VideoConstant } from '@shared/models'
 import { environment } from '../../../environments/environment'
@@ -16,8 +15,6 @@ export class ServerService {
  private static BASE_LOCALE_URL = environment.apiUrl + '/client/locales/'
  private static BASE_STATS_URL = environment.apiUrl + '/api/v1/server/stats'
-  private static CONFIG_LOCAL_STORAGE_KEY = 'server-config'
  configReloaded = new Subject<ServerConfig>()
  private localeObservable: Observable<any>
@@ -63,7 +60,8 @@ export class ServerService {
    signup: {
      allowed: false,
      allowedForCurrentIP: false,
-      requiresEmailVerification: false
+      requiresEmailVerification: false,
+      minimumAge: 16
    },
    transcoding: {
      profile: 'default',
@@ -176,6 +174,9 @@ export class ServerService {
        disableLocalSearch: false,
        isDefaultSearch: false
      }
+    },
+    homepage: {
+      enabled: false
    }
  }
@@ -201,9 +202,7 @@ export class ServerService {
    this.configReset = true
    // Notify config update
-    this.getConfig().subscribe(() => {
+    return this.getConfig()
-      // empty, to fire a reset config event
-    })
  }
  getConfig () {
@@ -212,7 +211,6 @@ export class ServerService {
    if (!this.configObservable) {
      this.configObservable = this.http.get<ServerConfig>(ServerService.BASE_CONFIG_URL)
                                  .pipe(
-                                    tap(config => this.saveConfigLocally(config)),
                                    tap(config => {
                                      this.config = config
                                      this.configLoaded = true
@@ -343,20 +341,15 @@ export class ServerService {
               )
  }
-  private saveConfigLocally (config: ServerConfig) {
-    peertubeLocalStorage.setItem(ServerService.CONFIG_LOCAL_STORAGE_KEY, JSON.stringify(config))
-  }
  private loadConfigLocally () {
-    const configString = peertubeLocalStorage.getItem(ServerService.CONFIG_LOCAL_STORAGE_KEY)
+    const configString = window['PeerTubeServerConfig']
+    if (!configString) return
-    if (configString) {
-      try {
+    try {
-        const parsed = JSON.parse(configString)
+      const parsed = JSON.parse(configString)
-        Object.assign(this.config, parsed)
+      Object.assign(this.config, parsed)
-      } catch (err) {
+    } catch (err) {
-        console.error('Cannot parse config saved in local storage.', err)
+      console.error('Cannot parse config saved in from index.html.', err)
-      }
    }
  }
 }
diff --git a/client/src/app/core/theme/theme.service.ts b/client/src/app/core/theme/theme.service.ts
index 4c4611d01..e7a5ae17a 100644
--- a/client/src/app/core/theme/theme.service.ts
+++ b/client/src/app/core/theme/theme.service.ts
@@ -82,7 +82,19 @@ export class ThemeService {
      : this.userService.getAnonymousUser().theme
    if (theme !== 'instance-default') return theme
-    return this.serverConfig.theme.default
+    const instanceTheme = this.serverConfig.theme.default
+    if (instanceTheme !== 'default') return instanceTheme
+    // Default to dark theme if available and wanted by the user
+    if (
+      this.themes.find(t => t.name === 'dark') &&
+      window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+    ) {
+      return 'dark'
+    }
+    return instanceTheme
  }
  private loadTheme (name: string) {
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index eaaaae314..099ee8f36 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -18,7 +18,7 @@
            </div>
            <div ngbDropdownMenu>
-              <a *ngIf="user.account" ngbDropdownItem ngbDropdownToggle class="dropdown-item" [routerLink]="[ '/accounts', user.account.nameWithHost ]"
+              <a *ngIf="user.account" ngbDropdownItem ngbDropdownToggle class="dropdown-item" [routerLink]="[ '/a', user.account.nameWithHost ]"
                #profile (click)="onActiveLinkScrollToAnchor(profile)">
                <my-global-icon iconName="go" aria-hidden="true"></my-global-icon> <ng-container i18n>Public profile</ng-container>
              </a>
@@ -123,24 +123,9 @@
      <div class="on-instance">
        <div i18n class="block-title">ON {{instanceName}}</div>
-        <a class="menu-link" routerLink="/videos/overview" routerLinkActive="active">
+        <a class="menu-link" *ngFor="let commonLink of commonMenuLinks" [routerLink]="commonLink.path" routerLinkActive="active">
-          <my-global-icon iconName="globe" aria-hidden="true"></my-global-icon>
+          <my-global-icon [iconName]="commonLink.icon" aria-hidden="true"></my-global-icon>
-          <ng-container i18n>Discover</ng-container>
+          <ng-container>{{ commonLink.menuLabel }}</ng-container>
-        </a>
-        <a class="menu-link" routerLink="/videos/trending" routerLinkActive="active">
-          <my-global-icon iconName="trending" aria-hidden="true"></my-global-icon>
-          <ng-container i18n>Trending</ng-container>
-        </a>
-        <a class="menu-link" routerLink="/videos/recently-added" routerLinkActive="active">
-          <my-global-icon iconName="recently-added" aria-hidden="true"></my-global-icon>
-          <ng-container i18n>Recently added</ng-container>
-        </a>
-        <a class="menu-link" routerLink="/videos/local" routerLinkActive="active">
-          <my-global-icon iconName="home" aria-hidden="true"></my-global-icon>
-          <ng-container i18n>Local videos</ng-container>
        </a>
      </div>
    </div>
diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts
index 8fa1de326..2f7e0cf07 100644
--- a/client/src/app/menu/menu.component.ts
+++ b/client/src/app/menu/menu.component.ts
@@ -4,7 +4,17 @@ import { switchMap } from 'rxjs/operators'
 import { ViewportScroller } from '@angular/common'
 import { Component, OnInit, ViewChild } from '@angular/core'
 import { Router } from '@angular/router'
-import { AuthService, AuthStatus, AuthUser, MenuService, RedirectService, ScreenService, ServerService, UserService } from '@app/core'
+import {
+  AuthService,
+  AuthStatus,
+  AuthUser,
+  MenuLink,
+  MenuService,
+  RedirectService,
+  ScreenService,
+  ServerService,
+  UserService
+} from '@app/core'
 import { scrollToTop } from '@app/helpers'
 import { LanguageChooserComponent } from '@app/menu/language-chooser.component'
 import { QuickSettingsModalComponent } from '@app/modal/quick-settings-modal.component'
@@ -35,6 +45,8 @@ export class MenuComponent implements OnInit {
  currentInterfaceLanguage: string
+  commonMenuLinks: MenuLink[] = []
  private languages: VideoConstant<string>[] = []
  private serverConfig: ServerConfig
  private routesPerRight: { [role in UserRight]?: string } = {
@@ -80,7 +92,10 @@ export class MenuComponent implements OnInit {
  ngOnInit () {
    this.serverConfig = this.serverService.getTmpConfig()
    this.serverService.getConfig()
-      .subscribe(config => this.serverConfig = config)
+      .subscribe(config => {
+        this.serverConfig = config
+        this.buildMenuLinks()
+      })
    this.isLoggedIn = this.authService.isLoggedIn()
    if (this.isLoggedIn === true) {
@@ -241,6 +256,10 @@ export class MenuComponent implements OnInit {
    }
  }
+  private buildMenuLinks () {
+    this.commonMenuLinks = this.menuService.buildCommonLinks(this.serverConfig)
+  }
  private buildUserLanguages () {
    if (!this.user) {
      this.videoLanguages = []
diff --git a/client/src/app/shared/form-validators/custom-config-validators.ts b/client/src/app/shared/form-validators/custom-config-validators.ts
index ef6e9b456..1ed5700ff 100644
--- a/client/src/app/shared/form-validators/custom-config-validators.ts
+++ b/client/src/app/shared/form-validators/custom-config-validators.ts
@@ -49,6 +49,15 @@ export const SIGNUP_LIMIT_VALIDATOR: BuildFormValidator = {
  }
 }
+export const SIGNUP_MINIMUM_AGE_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [Validators.required, Validators.min(1), Validators.pattern('[0-9]+')],
+  MESSAGES: {
+    'required': $localize`Signup minimum age is required.`,
+    'min': $localize`Signup minimum age must be greater than 1.`,
+    'pattern': $localize`Signup minimum age must be a number.`
+  }
+}
 export const ADMIN_EMAIL_VALIDATOR: BuildFormValidator = {
  VALIDATORS: [Validators.required, Validators.email],
  MESSAGES: {
diff --git a/client/src/app/shared/form-validators/user-validators.ts b/client/src/app/shared/form-validators/user-validators.ts
index fee37e95f..976c97b87 100644
--- a/client/src/app/shared/form-validators/user-validators.ts
+++ b/client/src/app/shared/form-validators/user-validators.ts
@@ -1,12 +1,14 @@
 import { Validators } from '@angular/forms'
 import { BuildFormValidator } from './form-validator.model'
+export const USER_USERNAME_REGEX_CHARACTERS = '[a-z0-9][a-z0-9._]'
 export const USER_USERNAME_VALIDATOR: BuildFormValidator = {
  VALIDATORS: [
    Validators.required,
    Validators.minLength(1),
    Validators.maxLength(50),
-    Validators.pattern(/^[a-z0-9][a-z0-9._]*$/)
+    Validators.pattern(new RegExp(`^${USER_USERNAME_REGEX_CHARACTERS}*$`))
  ],
  MESSAGES: {
    'required': $localize`Username is required.`,
diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts
index 4dc2b4f10..07b9dddba 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts
@@ -124,7 +124,7 @@ export class AbuseListTableComponent extends RestTable implements OnInit {
  }
  getAccountUrl (abuse: ProcessedAbuse) {
-    return '/accounts/' + abuse.flaggedAccount.nameWithHost
+    return '/a/' + abuse.flaggedAccount.nameWithHost
  }
  getVideoEmbed (abuse: AdminAbuse) {
diff --git a/client/src/app/shared/shared-custom-markup/channel-miniature-markup.component.html b/client/src/app/shared/shared-custom-markup/channel-miniature-markup.component.html
new file mode 100644
index 000000000..da81006b9
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/channel-miniature-markup.component.html
@@ -0,0 +1,8 @@
+<div *ngIf="channel" class="channel">
+  <my-actor-avatar [channel]="channel" size="34"></my-actor-avatar>
+  <div class="display-name">{{ channel.displayName }}</div>
+  <div class="username">{{ channel.name }}</div>
+  <div class="description">{{ channel.description }}</div>
+</div>
diff --git a/client/src/app/shared/shared-custom-markup/channel-miniature-markup.component.scss b/client/src/app/shared/shared-custom-markup/channel-miniature-markup.component.scss
new file mode 100644
index 000000000..85018afe2
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/channel-miniature-markup.component.scss
@@ -0,0 +1,9 @@
+@import '_variables';
+@import '_mixins';
+.channel {
+  border-radius: 15px;
+  padding: 10px;
+  width: min-content;
+  border: 1px solid pvar(--mainColor);
+}
diff --git a/client/src/app/shared/shared-custom-markup/channel-miniature-markup.component.ts b/client/src/app/shared/shared-custom-markup/channel-miniature-markup.component.ts
new file mode 100644
index 000000000..97bb5567e
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/channel-miniature-markup.component.ts
@@ -0,0 +1,26 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { VideoChannel, VideoChannelService } from '../shared-main'
+/*
+ * Markup component that creates a channel miniature only
+*/
+@Component({
+  selector: 'my-channel-miniature-markup',
+  templateUrl: 'channel-miniature-markup.component.html',
+  styleUrls: [ 'channel-miniature-markup.component.scss' ]
+})
+export class ChannelMiniatureMarkupComponent implements OnInit {
+  @Input() name: string
+  channel: VideoChannel
+  constructor (
+    private channelService: VideoChannelService
+  ) { }
+  ngOnInit () {
+    this.channelService.getVideoChannel(this.name)
+      .subscribe(channel => this.channel = channel)
+  }
+}
diff --git a/client/src/app/shared/shared-custom-markup/custom-markup.service.ts b/client/src/app/shared/shared-custom-markup/custom-markup.service.ts
new file mode 100644
index 000000000..ffaf15710
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/custom-markup.service.ts
@@ -0,0 +1,136 @@
+import { ComponentRef, Injectable } from '@angular/core'
+import { MarkdownService } from '@app/core'
+import {
+  ChannelMiniatureMarkupData,
+  EmbedMarkupData,
+  PlaylistMiniatureMarkupData,
+  VideoMiniatureMarkupData,
+  VideosListMarkupData
+} from '@shared/models'
+import { ChannelMiniatureMarkupComponent } from './channel-miniature-markup.component'
+import { DynamicElementService } from './dynamic-element.service'
+import { EmbedMarkupComponent } from './embed-markup.component'
+import { PlaylistMiniatureMarkupComponent } from './playlist-miniature-markup.component'
+import { VideoMiniatureMarkupComponent } from './video-miniature-markup.component'
+import { VideosListMarkupComponent } from './videos-list-markup.component'
+type BuilderFunction = (el: HTMLElement) => ComponentRef<any>
+@Injectable()
+export class CustomMarkupService {
+  private builders: { [ selector: string ]: BuilderFunction } = {
+    'peertube-video-embed': el => this.embedBuilder(el, 'video'),
+    'peertube-playlist-embed': el => this.embedBuilder(el, 'playlist'),
+    'peertube-video-miniature': el => this.videoMiniatureBuilder(el),
+    'peertube-playlist-miniature': el => this.playlistMiniatureBuilder(el),
+    'peertube-channel-miniature': el => this.channelMiniatureBuilder(el),
+    'peertube-videos-list': el => this.videosListBuilder(el)
+  }
+  constructor (
+    private dynamicElementService: DynamicElementService,
+    private markdown: MarkdownService
+  ) { }
+  async buildElement (text: string) {
+    const html = await this.markdown.customPageMarkdownToHTML(text, this.getSupportedTags())
+    const rootElement = document.createElement('div')
+    rootElement.innerHTML = html
+    for (const selector of this.getSupportedTags()) {
+      rootElement.querySelectorAll(selector)
+        .forEach((e: HTMLElement) => {
+          try {
+            const component = this.execBuilder(selector, e)
+            this.dynamicElementService.injectElement(e, component)
+          } catch (err) {
+            console.error('Cannot inject component %s.', selector, err)
+          }
+        })
+    }
+    return rootElement
+  }
+  private getSupportedTags () {
+    return Object.keys(this.builders)
+  }
+  private execBuilder (selector: string, el: HTMLElement) {
+    return this.builders[selector](el)
+  }
+  private embedBuilder (el: HTMLElement, type: 'video' | 'playlist') {
+    const data = el.dataset as EmbedMarkupData
+    const component = this.dynamicElementService.createElement(EmbedMarkupComponent)
+    this.dynamicElementService.setModel(component, { uuid: data.uuid, type })
+    return component
+  }
+  private videoMiniatureBuilder (el: HTMLElement) {
+    const data = el.dataset as VideoMiniatureMarkupData
+    const component = this.dynamicElementService.createElement(VideoMiniatureMarkupComponent)
+    this.dynamicElementService.setModel(component, { uuid: data.uuid })
+    return component
+  }
+  private playlistMiniatureBuilder (el: HTMLElement) {
+    const data = el.dataset as PlaylistMiniatureMarkupData
+    const component = this.dynamicElementService.createElement(PlaylistMiniatureMarkupComponent)
+    this.dynamicElementService.setModel(component, { uuid: data.uuid })
+    return component
+  }
+  private channelMiniatureBuilder (el: HTMLElement) {
+    const data = el.dataset as ChannelMiniatureMarkupData
+    const component = this.dynamicElementService.createElement(ChannelMiniatureMarkupComponent)
+    this.dynamicElementService.setModel(component, { name: data.name })
+    return component
+  }
+  private videosListBuilder (el: HTMLElement) {
+    const data = el.dataset as VideosListMarkupData
+    const component = this.dynamicElementService.createElement(VideosListMarkupComponent)
+    const model = {
+      title: data.title,
+      description: data.description,
+      sort: data.sort,
+      categoryOneOf: this.buildArrayNumber(data.categoryOneOf),
+      languageOneOf: this.buildArrayString(data.languageOneOf),
+      count: this.buildNumber(data.count) || 10
+    }
+    this.dynamicElementService.setModel(component, model)
+    return component
+  }
+  private buildNumber (value: string) {
+    if (!value) return undefined
+    return parseInt(value, 10)
+  }
+  private buildArrayNumber (value: string) {
+    if (!value) return undefined
+    return value.split(',').map(v => parseInt(v, 10))
+  }
+  private buildArrayString (value: string) {
+    if (!value) return undefined
+    return value.split(',')
+  }
+}
diff --git a/client/src/app/shared/shared-custom-markup/dynamic-element.service.ts b/client/src/app/shared/shared-custom-markup/dynamic-element.service.ts
new file mode 100644
index 000000000..e967e30ac
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/dynamic-element.service.ts
@@ -0,0 +1,57 @@
+import {
+  ApplicationRef,
+  ComponentFactoryResolver,
+  ComponentRef,
+  EmbeddedViewRef,
+  Injectable,
+  Injector,
+  OnChanges,
+  SimpleChange,
+  SimpleChanges,
+  Type
+} from '@angular/core'
+@Injectable()
+export class DynamicElementService {
+  constructor (
+    private injector: Injector,
+    private applicationRef: ApplicationRef,
+    private componentFactoryResolver: ComponentFactoryResolver
+  ) { }
+  createElement <T> (ofComponent: Type<T>) {
+    const div = document.createElement('div')
+    const component = this.componentFactoryResolver.resolveComponentFactory(ofComponent)
+      .create(this.injector, [], div)
+    return component
+  }
+  injectElement <T> (wrapper: HTMLElement, componentRef: ComponentRef<T>) {
+    const hostView = componentRef.hostView as EmbeddedViewRef<any>
+    this.applicationRef.attachView(hostView)
+    wrapper.appendChild(hostView.rootNodes[0])
+  }
+  setModel <T> (componentRef: ComponentRef<T>, attributes: Partial<T>) {
+    const changes: SimpleChanges = {}
+    for (const key of Object.keys(attributes)) {
+      const previousValue = componentRef.instance[key]
+      const newValue = attributes[key]
+      componentRef.instance[key] = newValue
+      changes[key] = new SimpleChange(previousValue, newValue, previousValue === undefined)
+    }
+    const component = componentRef.instance
+    if (typeof (component as unknown as OnChanges).ngOnChanges === 'function') {
+      (component as unknown as OnChanges).ngOnChanges(changes)
+    }
+    componentRef.changeDetectorRef.detectChanges()
+  }
+}
diff --git a/client/src/app/shared/shared-custom-markup/embed-markup.component.ts b/client/src/app/shared/shared-custom-markup/embed-markup.component.ts
new file mode 100644
index 000000000..a854d89f6
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/embed-markup.component.ts
@@ -0,0 +1,22 @@
+import { buildPlaylistLink, buildVideoLink, buildVideoOrPlaylistEmbed } from 'src/assets/player/utils'
+import { environment } from 'src/environments/environment'
+import { Component, ElementRef, Input, OnInit } from '@angular/core'
+@Component({
+  selector: 'my-embed-markup',
+  template: ''
+})
+export class EmbedMarkupComponent implements OnInit {
+  @Input() uuid: string
+  @Input() type: 'video' | 'playlist' = 'video'
+  constructor (private el: ElementRef) { }
+  ngOnInit () {
+    const link = this.type === 'video'
+      ? buildVideoLink({ baseUrl: `${environment.originServerUrl}/videos/embed/${this.uuid}` })
+      : buildPlaylistLink({ baseUrl: `${environment.originServerUrl}/video-playlists/embed/${this.uuid}` })
+    this.el.nativeElement.innerHTML = buildVideoOrPlaylistEmbed(link, this.uuid)
+  }
+}
diff --git a/client/src/app/shared/shared-custom-markup/index.ts b/client/src/app/shared/shared-custom-markup/index.ts
new file mode 100644
index 000000000..14bde3ea9
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/index.ts
@@ -0,0 +1,3 @@
+export * from './custom-markup.service'
+export * from './dynamic-element.service'
+export * from './shared-custom-markup.module'
diff --git a/client/src/app/shared/shared-custom-markup/playlist-miniature-markup.component.html b/client/src/app/shared/shared-custom-markup/playlist-miniature-markup.component.html
new file mode 100644
index 000000000..4e1d1a13f
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/playlist-miniature-markup.component.html
@@ -0,0 +1,2 @@
+<my-video-playlist-miniature *ngIf="playlist" [playlist]="playlist">
+</my-video-playlist-miniature>
diff --git a/client/src/app/shared/shared-custom-markup/playlist-miniature-markup.component.scss b/client/src/app/shared/shared-custom-markup/playlist-miniature-markup.component.scss
new file mode 100644
index 000000000..281cef726
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/playlist-miniature-markup.component.scss
@@ -0,0 +1,7 @@
+@import '_variables';
+@import '_mixins';
+my-video-playlist-miniature {
+  display: inline-block;
+  width: $video-thumbnail-width;
+}
diff --git a/client/src/app/shared/shared-custom-markup/playlist-miniature-markup.component.ts b/client/src/app/shared/shared-custom-markup/playlist-miniature-markup.component.ts
new file mode 100644
index 000000000..7aee450f1
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/playlist-miniature-markup.component.ts
@@ -0,0 +1,38 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { MiniatureDisplayOptions } from '../shared-video-miniature'
+import { VideoPlaylist, VideoPlaylistService } from '../shared-video-playlist'
+/*
+ * Markup component that creates a playlist miniature only
+*/
+@Component({
+  selector: 'my-playlist-miniature-markup',
+  templateUrl: 'playlist-miniature-markup.component.html',
+  styleUrls: [ 'playlist-miniature-markup.component.scss' ]
+})
+export class PlaylistMiniatureMarkupComponent implements OnInit {
+  @Input() uuid: string
+  playlist: VideoPlaylist
+  displayOptions: MiniatureDisplayOptions = {
+    date: true,
+    views: true,
+    by: true,
+    avatar: false,
+    privacyLabel: false,
+    privacyText: false,
+    state: false,
+    blacklistInfo: false
+  }
+  constructor (
+    private playlistService: VideoPlaylistService
+  ) { }
+  ngOnInit () {
+    this.playlistService.getVideoPlaylist(this.uuid)
+      .subscribe(playlist => this.playlist = playlist)
+  }
+}
diff --git a/client/src/app/shared/shared-custom-markup/shared-custom-markup.module.ts b/client/src/app/shared/shared-custom-markup/shared-custom-markup.module.ts
new file mode 100644
index 000000000..4bbb71588
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/shared-custom-markup.module.ts
@@ -0,0 +1,49 @@
+import { CommonModule } from '@angular/common'
+import { NgModule } from '@angular/core'
+import { SharedActorImageModule } from '../shared-actor-image/shared-actor-image.module'
+import { SharedGlobalIconModule } from '../shared-icons'
+import { SharedMainModule } from '../shared-main'
+import { SharedVideoMiniatureModule } from '../shared-video-miniature'
+import { SharedVideoPlaylistModule } from '../shared-video-playlist'
+import { ChannelMiniatureMarkupComponent } from './channel-miniature-markup.component'
+import { CustomMarkupService } from './custom-markup.service'
+import { DynamicElementService } from './dynamic-element.service'
+import { EmbedMarkupComponent } from './embed-markup.component'
+import { PlaylistMiniatureMarkupComponent } from './playlist-miniature-markup.component'
+import { VideoMiniatureMarkupComponent } from './video-miniature-markup.component'
+import { VideosListMarkupComponent } from './videos-list-markup.component'
+@NgModule({
+  imports: [
+    CommonModule,
+    SharedMainModule,
+    SharedGlobalIconModule,
+    SharedVideoMiniatureModule,
+    SharedVideoPlaylistModule,
+    SharedActorImageModule
+  ],
+  declarations: [
+    VideoMiniatureMarkupComponent,
+    PlaylistMiniatureMarkupComponent,
+    ChannelMiniatureMarkupComponent,
+    EmbedMarkupComponent,
+    VideosListMarkupComponent
+  ],
+  exports: [
+    VideoMiniatureMarkupComponent,
+    PlaylistMiniatureMarkupComponent,
+    ChannelMiniatureMarkupComponent,
+    VideosListMarkupComponent,
+    EmbedMarkupComponent
+  ],
+  providers: [
+    CustomMarkupService,
+    DynamicElementService
+  ]
+})
+export class SharedCustomMarkupModule { }
diff --git a/client/src/app/shared/shared-custom-markup/video-miniature-markup.component.html b/client/src/app/shared/shared-custom-markup/video-miniature-markup.component.html
new file mode 100644
index 000000000..9b4930b6d
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/video-miniature-markup.component.html
@@ -0,0 +1,6 @@
+<my-video-miniature
+  *ngIf="video"
+  [video]="video" [user]="getUser()" [displayAsRow]="false"
+  [displayVideoActions]="false" [displayOptions]="displayOptions"
+>
+</my-video-miniature>
diff --git a/client/src/app/shared/shared-custom-markup/video-miniature-markup.component.scss b/client/src/app/shared/shared-custom-markup/video-miniature-markup.component.scss
new file mode 100644
index 000000000..81e265f29
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/video-miniature-markup.component.scss
@@ -0,0 +1,7 @@
+@import '_variables';
+@import '_mixins';
+my-video-miniature {
+  display: inline-block;
+  width: $video-thumbnail-width;
+}
diff --git a/client/src/app/shared/shared-custom-markup/video-miniature-markup.component.ts b/client/src/app/shared/shared-custom-markup/video-miniature-markup.component.ts
new file mode 100644
index 000000000..79add0c3b
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/video-miniature-markup.component.ts
@@ -0,0 +1,44 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { AuthService } from '@app/core'
+import { Video, VideoService } from '../shared-main'
+import { MiniatureDisplayOptions } from '../shared-video-miniature'
+/*
+ * Markup component that creates a video miniature only
+*/
+@Component({
+  selector: 'my-video-miniature-markup',
+  templateUrl: 'video-miniature-markup.component.html',
+  styleUrls: [ 'video-miniature-markup.component.scss' ]
+})
+export class VideoMiniatureMarkupComponent implements OnInit {
+  @Input() uuid: string
+  video: Video
+  displayOptions: MiniatureDisplayOptions = {
+    date: true,
+    views: true,
+    by: true,
+    avatar: false,
+    privacyLabel: false,
+    privacyText: false,
+    state: false,
+    blacklistInfo: false
+  }
+  constructor (
+    private auth: AuthService,
+    private videoService: VideoService
+  ) { }
+  getUser () {
+    return this.auth.getUser()
+  }
+  ngOnInit () {
+    this.videoService.getVideo({ videoId: this.uuid })
+      .subscribe(video => this.video = video)
+  }
+}
diff --git a/client/src/app/shared/shared-custom-markup/videos-list-markup.component.html b/client/src/app/shared/shared-custom-markup/videos-list-markup.component.html
new file mode 100644
index 000000000..501f35e04
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/videos-list-markup.component.html
@@ -0,0 +1,13 @@
+<div class="root">
+  <h4 *ngIf="title">{{ title }}</h4>
+  <div *ngIf="description" class="description">{{ description }}</div>
+  <div class="videos">
+    <my-video-miniature
+      *ngFor="let video of videos"
+      [video]="video" [user]="getUser()" [displayAsRow]="false"
+      [displayVideoActions]="false" [displayOptions]="displayOptions"
+    >
+    </my-video-miniature>
+  </div>
+</div>
diff --git a/client/src/app/shared/shared-custom-markup/videos-list-markup.component.scss b/client/src/app/shared/shared-custom-markup/videos-list-markup.component.scss
new file mode 100644
index 000000000..dcd931090
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/videos-list-markup.component.scss
@@ -0,0 +1,9 @@
+@import '_variables';
+@import '_mixins';
+my-video-miniature {
+  margin-right: 15px;
+  display: inline-block;
+  min-width: $video-thumbnail-width;
+  max-width: $video-thumbnail-width;
+}
diff --git a/client/src/app/shared/shared-custom-markup/videos-list-markup.component.ts b/client/src/app/shared/shared-custom-markup/videos-list-markup.component.ts
new file mode 100644
index 000000000..cc25d0a51
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/videos-list-markup.component.ts
@@ -0,0 +1,60 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { AuthService } from '@app/core'
+import { VideoSortField } from '@shared/models'
+import { Video, VideoService } from '../shared-main'
+import { MiniatureDisplayOptions } from '../shared-video-miniature'
+/*
+ * Markup component list videos depending on criterias
+*/
+@Component({
+  selector: 'my-videos-list-markup',
+  templateUrl: 'videos-list-markup.component.html',
+  styleUrls: [ 'videos-list-markup.component.scss' ]
+})
+export class VideosListMarkupComponent implements OnInit {
+  @Input() title: string
+  @Input() description: string
+  @Input() sort = '-publishedAt'
+  @Input() categoryOneOf: number[]
+  @Input() languageOneOf: string[]
+  @Input() count = 10
+  videos: Video[]
+  displayOptions: MiniatureDisplayOptions = {
+    date: true,
+    views: true,
+    by: true,
+    avatar: false,
+    privacyLabel: false,
+    privacyText: false,
+    state: false,
+    blacklistInfo: false
+  }
+  constructor (
+    private auth: AuthService,
+    private videoService: VideoService
+  ) { }
+  getUser () {
+    return this.auth.getUser()
+  }
+  ngOnInit () {
+    const options = {
+      videoPagination: {
+        currentPage: 1,
+        itemsPerPage: this.count
+      },
+      categoryOneOf: this.categoryOneOf,
+      languageOneOf: this.languageOneOf,
+      sort: this.sort as VideoSortField
+    }
+    this.videoService.getVideos(options)
+      .subscribe(({ data }) => this.videos = data)
+  }
+}
diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.html b/client/src/app/shared/shared-forms/markdown-textarea.component.html
index 513b543cd..6e70e2f37 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.html
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.html
@@ -19,6 +19,7 @@
      <a ngbNavLink i18n>Complete preview</a>
      <ng-template ngbNavContent>
+        <div #previewElement></div>
        <div [innerHTML]="previewHTML"></div>
      </ng-template>
    </ng-container>
diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.ts b/client/src/app/shared/shared-forms/markdown-textarea.component.ts
index 9b3ab9cf3..a233a4205 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.ts
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.ts
@@ -1,9 +1,10 @@
-import { ViewportScroller } from '@angular/common'
 import truncate from 'lodash-es/truncate'
 import { Subject } from 'rxjs'
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
+import { ViewportScroller } from '@angular/common'
 import { Component, ElementRef, forwardRef, Input, OnInit, ViewChild } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
+import { SafeHtml } from '@angular/platform-browser'
 import { MarkdownService, ScreenService } from '@app/core'
 @Component({
@@ -21,18 +22,27 @@ import { MarkdownService, ScreenService } from '@app/core'
 export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
  @Input() content = ''
  @Input() classes: string[] | { [klass: string]: any[] | any } = []
  @Input() textareaMaxWidth = '100%'
  @Input() textareaHeight = '150px'
  @Input() truncate: number
  @Input() markdownType: 'text' | 'enhanced' = 'text'
+  @Input() customMarkdownRenderer?: (text: string) => Promise<string | HTMLElement>
  @Input() markdownVideo = false
  @Input() name = 'description'
  @ViewChild('textarea') textareaElement: ElementRef
+  @ViewChild('previewElement') previewElement: ElementRef
+  truncatedPreviewHTML: SafeHtml | string = ''
+  previewHTML: SafeHtml | string = ''
-  truncatedPreviewHTML = ''
-  previewHTML = ''
  isMaximized = false
  maximizeInText = $localize`Maximize editor`
@@ -115,10 +125,31 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
  }
  private async markdownRender (text: string) {
-    const html = this.markdownType === 'text' ?
+    let html: string
-      await this.markdownService.textMarkdownToHTML(text) :
-      await this.markdownService.enhancedMarkdownToHTML(text)
+    if (this.customMarkdownRenderer) {
+      const result = await this.customMarkdownRenderer(text)
+      if (result instanceof HTMLElement) {
+        html = ''
+        const wrapperElement = this.previewElement.nativeElement as HTMLElement
+        wrapperElement.innerHTML = ''
+        wrapperElement.appendChild(result)
+        return
+      }
+      html = result
+    } else if (this.markdownType === 'text') {
+      html = await this.markdownService.textMarkdownToHTML(text)
+    } else {
+      html = await this.markdownService.enhancedMarkdownToHTML(text)
+    }
+    if (this.markdownVideo) {
+      html = this.markdownService.processVideoTimestamps(html)
+    }
-    return this.markdownVideo ? this.markdownService.processVideoTimestamps(html) : html
+    return html
  }
 }
diff --git a/client/src/app/shared/shared-icons/global-icon.component.ts b/client/src/app/shared/shared-icons/global-icon.component.ts
index 3af517927..a4dd72db6 100644
--- a/client/src/app/shared/shared-icons/global-icon.component.ts
+++ b/client/src/app/shared/shared-icons/global-icon.component.ts
@@ -72,6 +72,7 @@ const icons = {
  'repeat': require('!!raw-loader?!../../../assets/images/feather/repeat.svg').default,
  'message-circle': require('!!raw-loader?!../../../assets/images/feather/message-circle.svg').default,
  'codesandbox': require('!!raw-loader?!../../../assets/images/feather/codesandbox.svg').default,
+  'octagon': require('!!raw-loader?!../../../assets/images/feather/octagon.svg').default,
  'award': require('!!raw-loader?!../../../assets/images/feather/award.svg').default
 }
diff --git a/client/src/app/shared/shared-main/angular/from-now.pipe.ts b/client/src/app/shared/shared-main/angular/from-now.pipe.ts
index 5e7832807..d62c1f88e 100644
--- a/client/src/app/shared/shared-main/angular/from-now.pipe.ts
+++ b/client/src/app/shared/shared-main/angular/from-now.pipe.ts
@@ -3,32 +3,37 @@ import { Pipe, PipeTransform } from '@angular/core'
 // Thanks: https://stackoverflow.com/questions/3177836/how-to-format-time-since-xxx-e-g-4-minutes-ago-similar-to-stack-exchange-site
 @Pipe({ name: 'myFromNow' })
 export class FromNowPipe implements PipeTransform {
  transform (arg: number | Date | string) {
    const argDate = new Date(arg)
    const seconds = Math.floor((Date.now() - argDate.getTime()) / 1000)
-    let interval = Math.round(seconds / 31536000)
+    let interval = Math.floor(seconds / 31536000)
    if (interval > 1) return $localize`${interval} years ago`
-    if (interval === 1) return $localize`${interval} year ago`
+    if (interval === 1) return $localize`1 year ago`
-    interval = Math.round(seconds / 2592000)
+    interval = Math.floor(seconds / 2419200)
+    // 12 months = 360 days, but a year ~ 365 days
+    // Display "1 year ago" rather than "12 months ago"
+    if (interval >= 12) return $localize`1 year ago`
    if (interval > 1) return $localize`${interval} months ago`
-    if (interval === 1) return $localize`${interval} month ago`
+    if (interval === 1) return $localize`1 month ago`
-    interval = Math.round(seconds / 604800)
+    interval = Math.floor(seconds / 604800)
+    // 4 weeks ~ 28 days, but our month is 30 days
+    // Display "1 month ago" rather than "4 weeks ago"
+    if (interval >= 4) return $localize`1 month ago`
    if (interval > 1) return $localize`${interval} weeks ago`
-    if (interval === 1) return $localize`${interval} week ago`
+    if (interval === 1) return $localize`1 week ago`
-    interval = Math.round(seconds / 86400)
+    interval = Math.floor(seconds / 86400)
    if (interval > 1) return $localize`${interval} days ago`
-    if (interval === 1) return $localize`${interval} day ago`
+    if (interval === 1) return $localize`1 day ago`
-    interval = Math.round(seconds / 3600)
+    interval = Math.floor(seconds / 3600)
    if (interval > 1) return $localize`${interval} hours ago`
-    if (interval === 1) return $localize`${interval} hour ago`
+    if (interval === 1) return $localize`1 hour ago`
-    interval = Math.round(seconds / 60)
+    interval = Math.floor(seconds / 60)
    if (interval >= 1) return $localize`${interval} min ago`
    return $localize`just now`
diff --git a/client/src/app/shared/shared-main/custom-page/custom-page.service.ts b/client/src/app/shared/shared-main/custom-page/custom-page.service.ts
new file mode 100644
index 000000000..e5c2b3cd4
--- /dev/null
+++ b/client/src/app/shared/shared-main/custom-page/custom-page.service.ts
@@ -0,0 +1,38 @@
+import { of } from 'rxjs'
+import { catchError, map } from 'rxjs/operators'
+import { HttpClient } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { RestExtractor } from '@app/core'
+import { CustomPage } from '@shared/models'
+import { environment } from '../../../../environments/environment'
+@Injectable()
+export class CustomPageService {
+  static BASE_INSTANCE_HOMEPAGE_URL = environment.apiUrl + '/api/v1/custom-pages/homepage/instance'
+  constructor (
+    private authHttp: HttpClient,
+    private restExtractor: RestExtractor
+  ) { }
+  getInstanceHomepage () {
+    return this.authHttp.get<CustomPage>(CustomPageService.BASE_INSTANCE_HOMEPAGE_URL)
+                        .pipe(
+                          catchError(err => {
+                            if (err.status === 404) {
+                              return of({ content: '' })
+                            }
+                            this.restExtractor.handleError(err)
+                          })
+                        )
+  }
+  updateInstanceHomepage (content: string) {
+    return this.authHttp.put(CustomPageService.BASE_INSTANCE_HOMEPAGE_URL, { content })
+      .pipe(
+        map(this.restExtractor.extractDataBool),
+        catchError(err => this.restExtractor.handleError(err))
+      )
+  }
+}
diff --git a/client/src/app/shared/shared-main/custom-page/index.ts b/client/src/app/shared/shared-main/custom-page/index.ts
new file mode 100644
index 000000000..7269ece95
--- /dev/null
+++ b/client/src/app/shared/shared-main/custom-page/index.ts
@@ -0,0 +1 @@
+export * from './custom-page.service'
diff --git a/client/src/app/shared/shared-main/index.ts b/client/src/app/shared/shared-main/index.ts
index a4d813c06..3a7fd4c34 100644
--- a/client/src/app/shared/shared-main/index.ts
+++ b/client/src/app/shared/shared-main/index.ts
@@ -5,6 +5,9 @@ export * from './date'
 export * from './feeds'
 export * from './loaders'
 export * from './misc'
+export * from './peertube-modal'
+export * from './plugins'
+export * from './router'
 export * from './users'
 export * from './video'
 export * from './video-caption'
diff --git a/client/src/app/shared/shared-main/plugins/plugin-placeholder.component.scss b/client/src/app/shared/shared-main/plugins/plugin-placeholder.component.scss
new file mode 100644
index 000000000..4e37c5e61
--- /dev/null
+++ b/client/src/app/shared/shared-main/plugins/plugin-placeholder.component.scss
@@ -0,0 +1,3 @@
+div {
+  height: 100%;
+}
diff --git a/client/src/app/shared/shared-main/plugins/plugin-placeholder.component.ts b/client/src/app/shared/shared-main/plugins/plugin-placeholder.component.ts
index 4d5381e8d..858eff9ba 100644
--- a/client/src/app/shared/shared-main/plugins/plugin-placeholder.component.ts
+++ b/client/src/app/shared/shared-main/plugins/plugin-placeholder.component.ts
@@ -4,7 +4,7 @@ import { PluginElementPlaceholder } from '@shared/models'
 @Component({
  selector: 'my-plugin-placeholder',
  template: '<div [id]="getId()"></div>',
-  styles: [ 'div { height: 100%; }' ]
+  styleUrls: [ './plugin-placeholder.component.scss' ]
 })
 export class PluginPlaceholderComponent {
diff --git a/client/src/app/shared/shared-main/router/actor-redirect-guard.service.ts b/client/src/app/shared/shared-main/router/actor-redirect-guard.service.ts
new file mode 100644
index 000000000..49d61f945
--- /dev/null
+++ b/client/src/app/shared/shared-main/router/actor-redirect-guard.service.ts
@@ -0,0 +1,46 @@
+import { forkJoin, of } from 'rxjs'
+import { catchError, map } from 'rxjs/operators'
+import { Injectable } from '@angular/core'
+import { ActivatedRouteSnapshot, CanActivate, Router } from '@angular/router'
+import { AccountService } from '../account'
+import { VideoChannelService } from '../video-channel'
+@Injectable()
+export class ActorRedirectGuard implements CanActivate {
+  constructor (
+    private router: Router,
+    private accountService: AccountService,
+    private channelService: VideoChannelService
+  ) {}
+  canActivate (route: ActivatedRouteSnapshot) {
+    const actorName = route.params.actorName
+    return forkJoin([
+      this.accountService.getAccount(actorName).pipe(this.orUndefined()),
+      this.channelService.getVideoChannel(actorName).pipe(this.orUndefined())
+    ]).pipe(
+      map(([ account, channel ]) => {
+        if (!account && !channel) {
+          this.router.navigate([ '/404' ])
+          return false
+        }
+        if (account) {
+          this.router.navigate([ `/a/${actorName}` ], { skipLocationChange: true })
+        }
+        if (channel) {
+          this.router.navigate([ `/c/${actorName}` ], { skipLocationChange: true })
+        }
+        return true
+      })
+    )
+  }
+  private orUndefined () {
+    return catchError(() => of(undefined))
+  }
+}
diff --git a/client/src/app/shared/shared-main/router/index.ts b/client/src/app/shared/shared-main/router/index.ts
new file mode 100644
index 000000000..f4000b674
--- /dev/null
+++ b/client/src/app/shared/shared-main/router/index.ts
@@ -0,0 +1 @@
+export * from './actor-redirect-guard.service'
diff --git a/client/src/app/shared/shared-main/shared-main.module.ts b/client/src/app/shared/shared-main/shared-main.module.ts
index 772198cb2..c8dd01429 100644
--- a/client/src/app/shared/shared-main/shared-main.module.ts
+++ b/client/src/app/shared/shared-main/shared-main.module.ts
@@ -4,7 +4,7 @@ import { CommonModule, DatePipe } from '@angular/common'
 import { HttpClientModule } from '@angular/common/http'
 import { NgModule } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { RouterModule } from '@angular/router'
+import { ActivatedRouteSnapshot, RouterModule } from '@angular/router'
 import {
  NgbButtonsModule,
  NgbCollapseModule,
@@ -29,6 +29,7 @@ import {
 } from './angular'
 import { AUTH_INTERCEPTOR_PROVIDER } from './auth'
 import { ActionDropdownComponent, ButtonComponent, DeleteButtonComponent, EditButtonComponent } from './buttons'
+import { CustomPageService } from './custom-page'
 import { DateToggleComponent } from './date'
 import { FeedComponent } from './feeds'
 import { LoaderComponent, SmallLoaderComponent } from './loaders'
@@ -38,6 +39,7 @@ import { UserHistoryService, UserNotificationsComponent, UserNotificationService
 import { RedundancyService, VideoImportService, VideoOwnershipService, VideoService } from './video'
 import { VideoCaptionService } from './video-caption'
 import { VideoChannelService } from './video-channel'
+import { ActorRedirectGuard } from './router'
 @NgModule({
  imports: [
@@ -171,7 +173,11 @@ import { VideoChannelService } from './video-channel'
    VideoCaptionService,
-    VideoChannelService
+    VideoChannelService,
+    CustomPageService,
+    ActorRedirectGuard
  ]
 })
 export class SharedMainModule { }
diff --git a/client/src/app/shared/shared-main/users/user-notification.model.ts b/client/src/app/shared/shared-main/users/user-notification.model.ts
index ed5791794..c80bc13b0 100644
--- a/client/src/app/shared/shared-main/users/user-notification.model.ts
+++ b/client/src/app/shared/shared-main/users/user-notification.model.ts
@@ -238,11 +238,11 @@ export class UserNotification implements UserNotificationServer {
  }
  private buildVideoUrl (video: { uuid: string }) {
-    return '/videos/watch/' + video.uuid
+    return '/w/' + video.uuid
  }
  private buildAccountUrl (account: { name: string, host: string }) {
-    return '/accounts/' + Actor.CREATE_BY_STRING(account.name, account.host)
+    return '/a/' + Actor.CREATE_BY_STRING(account.name, account.host)
  }
  private buildVideoImportUrl () {
diff --git a/client/src/app/shared/shared-main/video/video.model.ts b/client/src/app/shared/shared-main/video/video.model.ts
index 526d10e32..e7f739bfe 100644
--- a/client/src/app/shared/shared-main/video/video.model.ts
+++ b/client/src/app/shared/shared-main/video/video.model.ts
@@ -88,7 +88,7 @@ export class Video implements VideoServerModel {
  pluginData?: any
  static buildClientUrl (videoUUID: string) {
-    return '/videos/watch/' + videoUUID
+    return '/w/' + videoUUID
  }
  constructor (hash: VideoServerModel, translations = {}) {
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.ts b/client/src/app/shared/shared-share-modal/video-share.component.ts
index e8760bfcc..2a73e6166 100644
--- a/client/src/app/shared/shared-share-modal/video-share.component.ts
+++ b/client/src/app/shared/shared-share-modal/video-share.component.ts
@@ -98,14 +98,14 @@ export class VideoShareComponent {
  getVideoUrl () {
    let baseUrl = this.customizations.originUrl ? this.video.originInstanceUrl : window.location.origin
-    baseUrl += '/videos/watch/' + this.video.uuid
+    baseUrl += '/w/' + this.video.uuid
    const options = this.getVideoOptions(baseUrl)
    return buildVideoLink(options)
  }
  getPlaylistUrl () {
-    const base = window.location.origin + '/videos/watch/playlist/' + this.playlist.uuid
+    const base = window.location.origin + '/w/p/' + this.playlist.uuid
    if (!this.includeVideoInPlaylist) return base
diff --git a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.ts b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.ts
index bdede17a3..d5583c29f 100644
--- a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.ts
+++ b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.ts
@@ -57,7 +57,7 @@ export class VideoThumbnailComponent {
  getVideoRouterLink () {
    if (this.videoRouterLink) return this.videoRouterLink
-    return [ '/videos/watch', this.video.uuid ]
+    return [ '/w', this.video.uuid ]
  }
  onWatchLaterClick (event: Event) {
diff --git a/client/src/app/shared/shared-video-comment/video-comment.model.ts b/client/src/app/shared/shared-video-comment/video-comment.model.ts
index 9a4e3954e..94d6c5fa8 100644
--- a/client/src/app/shared/shared-video-comment/video-comment.model.ts
+++ b/client/src/app/shared/shared-video-comment/video-comment.model.ts
@@ -85,7 +85,7 @@ export class VideoCommentAdmin implements VideoCommentAdminServerModel {
      id: hash.video.id,
      uuid: hash.video.uuid,
      name: hash.video.name,
-      localUrl: '/videos/watch/' + hash.video.uuid
+      localUrl: '/w/' + hash.video.uuid
    }
    this.localUrl = this.video.localUrl + ';threadId=' + this.threadId
@@ -95,7 +95,7 @@ export class VideoCommentAdmin implements VideoCommentAdminServerModel {
    if (this.account) {
      this.by = Actor.CREATE_BY_STRING(this.account.name, this.account.host)
-      this.account.localUrl = '/accounts/' + this.by
+      this.account.localUrl = '/a/' + this.by
    }
  }
 }
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.html b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
index 645be92bd..6c34123ed 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
@@ -12,12 +12,12 @@
      <div class="d-flex video-miniature-meta">
        <my-actor-avatar
          *ngIf="displayOptions.avatar && displayOwnerVideoChannel()" [title]="channelLinkTitle"
-          [channel]="video.channel" [size]="actorImageSize" [internalHref]="[ '/video-channels', video.byVideoChannel ]"
+          [channel]="video.channel" [size]="actorImageSize" [internalHref]="[ '/c', video.byVideoChannel ]"
        ></my-actor-avatar>
        <my-actor-avatar
          *ngIf="displayOptions.avatar && displayOwnerAccount()" [title]="channelLinkTitle"
-          [account]="video.account" [size]="actorImageSize" [internalHref]="[ '/video-channels', video.byVideoChannel ]"
+          [account]="video.account" [size]="actorImageSize" [internalHref]="[ '/c', video.byVideoChannel ]"
        ></my-actor-avatar>
        <div class="w-100 d-flex flex-column">
@@ -39,10 +39,10 @@
            </span>
          </span>
-          <a tabindex="-1" *ngIf="displayOptions.by && displayOwnerAccount()" class="video-miniature-account" [routerLink]="[ '/video-channels', video.byVideoChannel ]">
+          <a tabindex="-1" *ngIf="displayOptions.by && displayOwnerAccount()" class="video-miniature-account" [routerLink]="[ '/c', video.byVideoChannel ]">
            {{ video.byAccount }}
          </a>
-          <a tabindex="-1" *ngIf="displayOptions.by && displayOwnerVideoChannel()" class="video-miniature-channel" [routerLink]="[ '/video-channels', video.byVideoChannel ]">
+          <a tabindex="-1" *ngIf="displayOptions.by && displayOwnerVideoChannel()" class="video-miniature-channel" [routerLink]="[ '/c', video.byVideoChannel ]">
            {{ video.byVideoChannel }}
          </a>
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
index b58c118be..aac55a6e9 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
@@ -125,7 +125,7 @@ export class VideoMiniatureComponent implements OnInit {
  buildVideoLink () {
    if (this.videoLinkType === 'internal' || !this.video.url) {
-      this.videoRouterLink = [ '/videos/watch', this.video.uuid ]
+      this.videoRouterLink = [ '/w', this.video.uuid ]
      return
    }
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html
index ec004a407..e74f58f47 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html
@@ -20,7 +20,7 @@
          [attr.title]="playlistElement.video.name"
        >{{ playlistElement.video.name }}</a>
-        <a *ngIf="accountLink" tabindex="-1" class="video-info-account" [routerLink]="[ '/accounts', playlistElement.video.byAccount ]">
+        <a *ngIf="accountLink" tabindex="-1" class="video-info-account" [routerLink]="[ '/a', playlistElement.video.byAccount ]">
          {{ playlistElement.video.byAccount }}
        </a>
        <span *ngIf="!accountLink" tabindex="-1" class="video-info-account">{{ playlistElement.video.byAccount }}</span>
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.ts b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.ts
index 7c083ae26..86c281a1e 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.ts
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.ts
@@ -71,7 +71,7 @@ export class VideoPlaylistElementMiniatureComponent implements OnInit {
  buildRouterLink () {
    if (!this.playlist) return null
-    return [ '/videos/watch/playlist', this.playlist.uuid ]
+    return [ '/w/p', this.playlist.uuid ]
  }
  buildRouterQuery () {
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html
index f50f95003..81c36e6fe 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html
@@ -19,7 +19,7 @@
      {{ playlist.displayName }}
    </a>
-    <a i18n [routerLink]="[ '/video-channels', playlist.videoChannelBy ]" class="by" *ngIf="displayChannel && playlist.videoChannelBy">
+    <a i18n [routerLink]="[ '/c', playlist.videoChannelBy ]" class="by" *ngIf="displayChannel && playlist.videoChannelBy">
      {{ playlist.videoChannelBy }}
    </a>
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.ts b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.ts
index 6b0b1056f..9bbec6038 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.ts
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.ts
@@ -18,6 +18,6 @@ export class VideoPlaylistMiniatureComponent {
    if (this.toManage) return [ '/my-library/video-playlists', this.playlist.uuid ]
    if (this.playlist.videosLength === 0) return null
-    return [ '/videos/watch/playlist', this.playlist.uuid ]
+    return [ '/w/p', this.playlist.uuid ]
  }
 }