13 files changed, 510 insertions, 274 deletions

diff --git a/client/src/app/+accounts/account-about/account-about.component.html b/client/src/app/+accounts/account-about/account-about.component.html
deleted file mode 100644
index e9e0e4079..000000000
--- a/client/src/app/+accounts/account-about/account-about.component.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<h1 class="sr-only" i18n>About</h1>
-<div class="margin-content">
-  <div *ngIf="account" class="row no-gutters">
-    <div class="block col-md-6 col-sm-12 pr-2">
-      <h2 i18n class="small-title">DESCRIPTION</h2>
-      <div class="content" [innerHtml]="getAccountDescription()"></div>
-    </div>
-  
-    <div class="block col-md-6 col-sm-12">
-      <h2 i18n class="small-title">STATS</h2>
-  
-      <div i18n class="content">Joined {{ account.createdAt | date }}</div>
-    </div>
-  </div>
-</div>
diff --git a/client/src/app/+accounts/account-about/account-about.component.scss b/client/src/app/+accounts/account-about/account-about.component.scss
deleted file mode 100644
index 5bcd4b561..000000000
--- a/client/src/app/+accounts/account-about/account-about.component.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-@import '_variables';
-@import '_mixins';
-
-.block {
-  margin-bottom: 40px;
-
-  .small-title {
-    @include in-content-small-title;
-
-    margin-bottom: 20px;
-  }
-}
diff --git a/client/src/app/+accounts/account-about/account-about.component.ts b/client/src/app/+accounts/account-about/account-about.component.ts
deleted file mode 100644
index 6cf846d72..000000000
--- a/client/src/app/+accounts/account-about/account-about.component.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Subscription } from 'rxjs'
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { MarkdownService } from '@app/core'
-import { Account, AccountService } from '@app/shared/shared-main'
-
-@Component({
-  selector: 'my-account-about',
-  templateUrl: './account-about.component.html',
-  styleUrls: [ './account-about.component.scss' ]
-})
-export class AccountAboutComponent implements OnInit, OnDestroy {
-  account: Account
-  descriptionHTML = ''
-
-  private accountSub: Subscription
-
-  constructor (
-    private accountService: AccountService,
-    private markdownService: MarkdownService
-  ) { }
-
-  ngOnInit () {
-    // Parent get the account for us
-    this.accountSub = this.accountService.accountLoaded
-      .subscribe(async account => {
-        this.account = account
-        this.descriptionHTML = await this.markdownService.textMarkdownToHTML(this.account.description, true)
-      })
-  }
-
-  ngOnDestroy () {
-    if (this.accountSub) this.accountSub.unsubscribe()
-  }
-
-  getAccountDescription () {
-    if (this.descriptionHTML) return this.descriptionHTML
-
-    return $localize`No description`
-  }
-}
diff --git a/client/src/app/+accounts/account-search/account-search.component.ts b/client/src/app/+accounts/account-search/account-search.component.ts
index dda4bf0c7..f54ab846a 100644
--- a/client/src/app/+accounts/account-search/account-search.component.ts
+++ b/client/src/app/+accounts/account-search/account-search.component.ts
@@ -64,9 +64,14 @@ export class AccountSearchComponent extends AbstractVideoList implements OnInit,
   }
 
   updateSearch (value: string) {
-    if (value === '') this.router.navigate(['../videos'], { relativeTo: this.route })
     this.search = value
 
+    if (!this.search) {
+      this.router.navigate([ '../videos' ], { relativeTo: this.route })
+      return
+    }
+
+    this.videos = []
     this.reloadVideos()
   }
 
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
index 5dbb341d2..19a4b3c9c 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
@@ -1,33 +1,50 @@
 <h1 class="sr-only" i18n>Video channels</h1>
+
 <div class="margin-content">
 
   <div class="no-results" i18n *ngIf="channelPagination.totalItems === 0">This account does not have channels.</div>
 
   <div class="channels" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" [dataObservable]="onChannelDataSubject.asObservable()">
-    <div class="section channel" *ngFor="let videoChannel of videoChannels">
-      <div class="section-title">
-        <a [routerLink]="getVideoChannelLink(videoChannel)" i18n-title title="See this video channel">
+    <div class="channel" *ngFor="let videoChannel of videoChannels">
+
+      <div class="channel-avatar-row">
+        <a class="avatar-link" [routerLink]="getVideoChannelLink(videoChannel)" i18n-title title="See this video channel">
           <img [src]="videoChannel.avatarUrl" alt="Avatar" />
+        </a>
 
-          <h2 class="section-title">{{ videoChannel.displayName }}</h2>
+        <h2>
+          <a [routerLink]="getVideoChannelLink(videoChannel)" i18n-title title="See this video channel">
+            {{ videoChannel.displayName }}
+          </a>
+        </h2>
+
+        <div class="actor-counters">
           <div class="followers" i18n>{videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}</div>
-        </a>
 
-        <my-subscribe-button [videoChannels]="[videoChannel]"></my-subscribe-button>
+          <span class="videos-count" *ngIf="getTotalVideosOf(videoChannel) !== undefined" i18n>
+            {getTotalVideosOf(videoChannel), plural, =1 {1 videos} other {{{ getTotalVideosOf(videoChannel) }} videos}}
+          </span>
+        </div>
+
+        <div class="description-html" [innerHTML]="getChannelDescription(videoChannel)"></div>
       </div>
 
-      <div *ngIf="getVideosOf(videoChannel)" class="videos">
-        <div class="no-results my-5" i18n *ngIf="getVideosOf(videoChannel).length === 0">This channel doesn't have any videos.</div>
+      <my-subscribe-button [videoChannels]="[videoChannel]"></my-subscribe-button>
+
+      <a i18n class="button-show-channel peertube-button-link orange-button-inverted" [routerLink]="getVideoChannelLink(videoChannel)">Show this channel</a>
+
+      <div class="videos">
+        <div class="no-results" i18n *ngIf="getTotalVideosOf(videoChannel) === 0">This channel doesn't have any videos.</div>
 
         <my-video-miniature
           *ngFor="let video of getVideosOf(videoChannel)"
-          [video]="video" [user]="userMiniature" [displayVideoActions]="true"
+          [video]="video" [user]="userMiniature" [displayVideoActions]="true" [displayOptions]="miniatureDisplayOptions"
         ></my-video-miniature>
-      </div>
 
-      <a *ngIf="getVideosOf(videoChannel).length !== 0" class="show-more" i18n [routerLink]="getVideoChannelLink(videoChannel)">
-        SHOW THIS CHANNEL
-      </a>
+        <div *ngIf="getTotalVideosOf(videoChannel)" class="miniature-show-channel">
+          <a i18n [routerLink]="getVideoChannelLink(videoChannel)">SHOW THIS CHANNEL ></a>
+        </div>
+      </div>
     </div>
   </div>
 </div>
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
index 4957e91d7..7e88802f3 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
@@ -3,37 +3,175 @@
 @import '_miniature';
 
 .margin-content {
-  @include fluid-videos-miniature-layout;
+  @include grid-videos-miniature-margins;
 }
 
-.section {
-  @include miniature-rows;
+.channel {
+  max-width: $max-channels-width;
+  background-color: pvar(--channelBackgroundColor);
+  padding: 30px;
 
-  padding-top: 0 !important;
+  margin: 30px 0;
 
-  .section-title {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto auto;
+  column-gap: 15px;
+}
+
+.channel-avatar-row {
+  grid-column: 1;
+  grid-row: 1;
+
+  display: grid;
+  grid-template-columns: auto auto 1fr;
+  grid-template-rows: auto 1fr;
+
+  .avatar-link {
+    grid-column: 1;
+    grid-row: 1 / 3;
+    margin-right: 30px;
+  }
+
+  img {
+    @include channel-avatar(75px);
+  }
+
+  a {
+    color: pvar(--mainForegroundColor);
+  }
+
+  h2 {
+    grid-row: 1;
+    grid-column: 2;
+    font-size: 20px;
+    line-height: 1;
+    font-weight: $font-bold;
+    margin: 0;
+  }
+
+  .actor-counters {
+    grid-row: 1;
+    grid-column: 3;
+    color: pvar(--greyForegroundColor);
+    font-size: 16px;
+    display: flex;
     align-items: center;
+    margin-left: 15px;
   }
 
-  .videos {
-    overflow: hidden;
+  .actor-counters > *:not(:last-child)::after {
+    content: '•';
+    margin: 0 10px;
+    color: pvar(--mainColor);
+  }
 
-    .no-results {
-      height: 50px;
-    }
+  .description-html {
+    grid-column: 2 / 4;
+    grid-row: 2;
+
+    max-height: 80px;
+    font-size: 16px;
+
+    @include fade-text(30px, pvar(--channelBackgroundColor));
+  }
+}
+
+my-subscribe-button {
+  grid-row: 1;
+  grid-column: 2;
+}
+
+.videos {
+  display: flex;
+  grid-column: 1 / 3;
+  grid-row: 2;
+  margin-top: 30px;
+
+  position: relative;
+  overflow: hidden;
+
+  my-video-miniature {
+    margin-right: 15px;
+    min-width: $video-thumbnail-medium-width;
+    max-width: $video-thumbnail-medium-width;
+  }
+
+  .no-results {
+    height: auto;
   }
+}
 
-  my-video-miniature ::ng-deep my-video-actions-dropdown > my-action-dropdown {
-    // Fix our overflow
-    position: absolute;
+.miniature-show-channel {
+  height: 100%;
+  position: absolute;
+  right: 0;
+  background: linear-gradient(90deg, transparent 0, pvar(--channelBackgroundColor) 45px);
+  padding: ($video-thumbnail-medium-height / 2 - 10px) 15px 0 60px;
+  z-index: z(miniature) + 1;
+
+  a {
+    color: pvar(--mainColor);
+    font-size: 16px;
+    font-weight: $font-semibold;
   }
 }
 
+.button-show-channel {
+  display: none;
+}
+
 @media screen and (max-width: $mobile-view) {
-  .section {
-    .section-title {
-      flex-direction: column;
-      align-items: normal;
+  .channel {
+    padding: 15px;
+  }
+
+  .channel-avatar-row {
+    grid-template-columns: auto auto auto 1fr;
+
+    .avatar-link {
+      grid-row: 1 / 4;
+    }
+
+    h2 {
+      font-size: 16px;
     }
+
+    .actor-counters {
+      margin: 0;
+      font-size: 13px;
+      grid-row: 2;
+      grid-column: 2 / 4;
+    }
+
+    .description-html {
+      grid-row: 3;
+      font-size: 14px;
+    }
+  }
+
+  .show-channel a {
+    @include peertube-button-link;
+    @include orange-button-inverted;
+  }
+
+  .videos {
+    display: none;
+  }
+
+  my-subscribe-button,
+  .button-show-channel {
+    grid-column: 1 / 4;
+    grid-row: 3;
+    margin-top: 15px;
+  }
+
+  my-subscribe-button {
+    justify-self: start;
+  }
+
+  .button-show-channel {
+    display: block;
+    justify-self: end;
   }
 }
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 f2beb6689..0628c7a96 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
@@ -1,9 +1,10 @@
 import { from, Subject, Subscription } from 'rxjs'
 import { concatMap, map, switchMap, tap } from 'rxjs/operators'
 import { Component, OnDestroy, OnInit } from '@angular/core'
-import { ComponentPagination, hasMoreItems, ScreenService, User, UserService } from '@app/core'
+import { ComponentPagination, hasMoreItems, MarkdownService, ScreenService, User, UserService } from '@app/core'
 import { Account, AccountService, Video, VideoChannel, VideoChannelService, VideoService } from '@app/shared/shared-main'
 import { NSFWPolicyType, VideoSortField } from '@shared/models'
+import { MiniatureDisplayOptions } from '@app/shared/shared-video-miniature'
 
 @Component({
   selector: 'my-account-video-channels',
@@ -13,7 +14,10 @@ import { NSFWPolicyType, VideoSortField } from '@shared/models'
 export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
   account: Account
   videoChannels: VideoChannel[] = []
-  videos: { [id: number]: Video[] } = {}
+
+  videos: { [id: number]: { total: number, videos: Video[] } } = {}
+
+  channelsDescriptionHTML: { [ id: number ]: string } = {}
 
   channelPagination: ComponentPagination = {
     currentPage: 1,
@@ -23,7 +27,7 @@ export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
 
   videosPagination: ComponentPagination = {
     currentPage: 1,
-    itemsPerPage: 12,
+    itemsPerPage: 5,
     totalItems: null
   }
   videosSort: VideoSortField = '-publishedAt'
@@ -32,6 +36,16 @@ export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
 
   userMiniature: User
   nsfwPolicy: NSFWPolicyType
+  miniatureDisplayOptions: MiniatureDisplayOptions = {
+    date: true,
+    views: true,
+    by: false,
+    avatar: false,
+    privacyLabel: false,
+    privacyText: false,
+    state: false,
+    blacklistInfo: false
+  }
 
   private accountSub: Subscription
 
@@ -39,7 +53,7 @@ export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
     private accountService: AccountService,
     private videoChannelService: VideoChannelService,
     private videoService: VideoService,
-    private screenService: ScreenService,
+    private markdown: MarkdownService,
     private userService: UserService
   ) { }
 
@@ -78,23 +92,36 @@ export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
           }
 
           return this.videoService.getVideoChannelVideos(options)
-            .pipe(map(data => ({ videoChannel, videos: data.data })))
+            .pipe(map(data => ({ videoChannel, videos: data.data, total: data.total })))
         })
       )
-      .subscribe(({ videoChannel, videos }) => {
+      .subscribe(async ({ videoChannel, videos, total }) => {
+        this.channelsDescriptionHTML[videoChannel.id] = await this.markdown.textMarkdownToHTML(videoChannel.description)
+
         this.videoChannels.push(videoChannel)
 
-        this.videos[videoChannel.id] = videos
+        this.videos[videoChannel.id] = { videos, total }
 
         this.onChannelDataSubject.next([ videoChannel ])
       })
   }
 
   getVideosOf (videoChannel: VideoChannel) {
-    const numberOfVideos = this.screenService.getNumberOfAvailableMiniatures()
+    const obj = this.videos[ videoChannel.id ]
+    if (!obj) return []
+
+    return obj.videos
+  }
+
+  getTotalVideosOf (videoChannel: VideoChannel) {
+    const obj = this.videos[ videoChannel.id ]
+    if (!obj) return undefined
+
+    return obj.total
+  }
 
-    // 2 rows
-    return this.videos[ videoChannel.id ].slice(0, numberOfVideos * 2)
+  getChannelDescription (videoChannel: VideoChannel) {
+    return this.channelsDescriptionHTML[videoChannel.id]
   }
 
   onNearOfBottom () {
diff --git a/client/src/app/+accounts/account-videos/account-videos.component.ts b/client/src/app/+accounts/account-videos/account-videos.component.ts
index 484d60e25..75af45e90 100644
--- a/client/src/app/+accounts/account-videos/account-videos.component.ts
+++ b/client/src/app/+accounts/account-videos/account-videos.component.ts
@@ -16,6 +16,7 @@ import { VideoFilter } from '@shared/models'
   ]
 })
 export class AccountVideosComponent extends AbstractVideoList implements OnInit, OnDestroy {
+  // No value because we don't want a page title
   titlePage: string
   loadOnInit = false
   loadUserVideoPreferences = true
@@ -77,11 +78,6 @@ export class AccountVideosComponent extends AbstractVideoList implements OnInit,
 
     return this.videoService
                .getAccountVideos(options)
-               .pipe(
-                 tap(({ total }) => {
-                   this.titlePage = $localize`Published ${total} videos`
-                 })
-               )
   }
 
   toggleModerationDisplay () {
@@ -93,4 +89,8 @@ export class AccountVideosComponent extends AbstractVideoList implements OnInit,
   generateSyndicationList () {
     this.syndicationItems = this.videoService.getAccountFeedUrls(this.account.id)
   }
+
+  displayAsRow () {
+    return this.screenService.isInMobileView()
+  }
 }
diff --git a/client/src/app/+accounts/accounts-routing.module.ts b/client/src/app/+accounts/accounts-routing.module.ts
index 15937a67b..3bf0f7185 100644
--- a/client/src/app/+accounts/accounts-routing.module.ts
+++ b/client/src/app/+accounts/accounts-routing.module.ts
@@ -1,11 +1,10 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
 import { MetaGuard } from '@ngx-meta/core'
-import { AccountsComponent } from './accounts.component'
-import { AccountVideosComponent } from './account-videos/account-videos.component'
-import { AccountAboutComponent } from './account-about/account-about.component'
-import { AccountVideoChannelsComponent } from './account-video-channels/account-video-channels.component'
 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'
+import { AccountsComponent } from './accounts.component'
 
 const accountsRoutes: Routes = [
   {
@@ -32,15 +31,6 @@ const accountsRoutes: Routes = [
         }
       },
       {
-        path: 'about',
-        component: AccountAboutComponent,
-        data: {
-          meta: {
-            title: $localize`About account`
-          }
-        }
-      },
-      {
         path: 'videos',
         component: AccountVideosComponent,
         data: {
diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html
index 5bd7b0824..ea7a317eb 100644
--- a/client/src/app/+accounts/accounts.component.html
+++ b/client/src/app/+accounts/accounts.component.html
@@ -1,57 +1,87 @@
-<div *ngIf="account" class="row">
-  <div class="sub-menu">
-
-    <div class="actor">
-      <img [src]="account.avatarUrl" alt="Avatar" />
-
-      <div class="actor-info">
-        <div class="actor-names">
-          <div class="actor-display-name">{{ account.displayName }}</div>
-          <div class="actor-name">
-            <span>{{ account.nameWithHost }}</span>
-            <button [cdkCopyToClipboard]="account.nameWithHostForced" (click)="activateCopiedMessage()"
-                    class="btn btn-outline-secondary btn-sm copy-button"
-            >
-              <span class="glyphicon glyphicon-copy"></span>
-            </button>
+<div *ngIf="account" class="root">
+  <div class="account-info">
+
+    <div class="account-avatar-row">
+      <my-account-avatar [account]="account" size="120"></my-account-avatar>
+
+      <div>
+        <div class="section-label" i18n>PEERTUBE ACCOUNT</div>
+
+        <div class="actor-info">
+          <div>
+            <div class="actor-display-name">
+              <h1 i18n-title [title]="'Created on ' + (account.createdAt | date)">{{ account.displayName }}</h1>
+
+              <my-user-moderation-dropdown
+                [prependActions]="prependModerationActions"
+                buttonSize="small" [account]="account" [user]="accountUser" placement="bottom-left auto"
+                (userChanged)="onUserChanged()" (userDeleted)="onUserDeleted()"
+              ></my-user-moderation-dropdown>
+
+              <span *ngIf="accountUser?.blocked" [ngbTooltip]="accountUser.blockedReason" class="badge badge-danger" i18n>Banned</span>
+              <span *ngIf="account.mutedByUser" class="badge badge-danger" i18n>Muted</span>
+              <span *ngIf="account.mutedServerByUser" class="badge badge-danger" i18n>Instance muted</span>
+              <span *ngIf="account.mutedByInstance" class="badge badge-danger" i18n>Muted by your instance</span>
+              <span *ngIf="account.mutedServerByInstance" class="badge badge-danger" i18n>Instance muted by your instance</span>
+            </div>
+
+            <div class="actor-handle">
+              <span>@{{ account.nameWithHost }}</span>
+              <button [cdkCopyToClipboard]="account.nameWithHostForced" (click)="activateCopiedMessage()"
+                      class="btn btn-outline-secondary btn-sm copy-button" title="Copy account handle" i18n-title
+              >
+                <span class="glyphicon glyphicon-duplicate"></span>
+              </button>
+            </div>
+
+            <div class="actor-counters">
+              <span i18n>{naiveAggregatedSubscribers(), plural, =1 {1 subscriber} other {{{ naiveAggregatedSubscribers() }} subscribers}}</span>
+
+              <span class="videos-count" *ngIf="accountVideosCount !== undefined" i18n>
+                {accountVideosCount, plural, =1 {1 videos} other {{{ accountVideosCount }} videos}}
+              </span>
+            </div>
           </div>
-          <span *ngIf="accountUser?.blocked" [ngbTooltip]="accountUser.blockedReason" class="badge badge-danger" i18n>Banned</span>
-          <span *ngIf="account.mutedByUser" class="badge badge-danger" i18n>Muted</span>
-          <span *ngIf="account.mutedServerByUser" class="badge badge-danger" i18n>Instance muted</span>
-          <span *ngIf="account.mutedByInstance" class="badge badge-danger" i18n>Muted by your instance</span>
-          <span *ngIf="account.mutedServerByInstance" class="badge badge-danger" i18n>Instance muted by your instance</span>
-
-          <my-user-moderation-dropdown
-            [prependActions]="prependModerationActions"
-            buttonSize="small" [account]="account" [user]="accountUser" placement="bottom-left auto"
-            (userChanged)="onUserChanged()" (userDeleted)="onUserDeleted()"
-          ></my-user-moderation-dropdown>
-        </div>
-        <div class="actor-followers" [title]="accountFollowerTitle">
-          {{ subscribersDisplayFor(naiveAggregatedSubscribers) }}
         </div>
       </div>
+    </div>
 
-      <div class="right-buttons">
-        <a *ngIf="isAccountManageable && !isInSmallView" routerLink="/my-account" class="btn btn-outline-tertiary mr-2" i18n>Manage account</a>
-        <my-subscribe-button *ngIf="videoChannels" [account]="account" [videoChannels]="videoChannels"></my-subscribe-button>
-      </div>
+    <div class="description" [ngClass]="{ expanded: accountDescriptionExpanded }">
+      <div class="description-html" [innerHTML]="accountDescriptionHTML"></div>
     </div>
 
-    <div class="links w-100">
-      <ng-template #linkTemplate let-item="item">
-        <a [routerLink]="item.routerLink" routerLinkActive="active" class="title-page">{{ item.label }}</a>
-      </ng-template>
+    <div *ngIf="hasShowMoreDescription()" class="show-more" role="button"
+      (click)="accountDescriptionExpanded = !accountDescriptionExpanded"
+      title="Show the complete description" i18n-title i18n
+    >
+      Show more...
+    </div>
 
-      <list-overflow [items]="links" [itemTemplate]="linkTemplate"></list-overflow>
+    <div class="buttons">
+      <a *ngIf="isManageable()" routerLink="/my-account" class="peertube-button-link orange-button" i18n>
+        Manage account
+      </a>
 
-      <simple-search-input (searchChanged)="searchChanged($event)" name="search-videos" i18n-placeholder placeholder="Search videos"></simple-search-input>
+      <my-subscribe-button *ngIf="hasVideoChannels() && !isManageable()" [account]="account" [videoChannels]="videoChannels"></my-subscribe-button>
     </div>
   </div>
 
-  <div class="margin-content">
-    <router-outlet (activate)="onOutletLoaded($event)"></router-outlet>
+  <div class="links">
+    <ng-template #linkTemplate let-item="item">
+      <a [routerLink]="item.routerLink" routerLinkActive="active" class="title-page">{{ item.label }}</a>
+    </ng-template>
+
+    <list-overflow [hidden]="hideMenu" [items]="links" [itemTemplate]="linkTemplate"></list-overflow>
+
+    <simple-search-input
+      [alwaysShow]="!isInSmallView()" (searchChanged)="searchChanged($event)"
+      (inputDisplayChanged)="onSearchInputDisplayChanged($event)" name="search-videos"
+      i18n-iconTitle icon-title="Search account videos"
+      i18n-placeholder placeholder="Search account videos"
+    ></simple-search-input>
   </div>
+
+  <router-outlet (activate)="onOutletLoaded($event)"></router-outlet>
 </div>
 
 <ng-container *ngIf="prependModerationActions">
diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss
index 40c6b6493..56927dea6 100644
--- a/client/src/app/+accounts/accounts.component.scss
+++ b/client/src/app/+accounts/accounts.component.scss
@@ -1,48 +1,29 @@
-// Bootstrap grid utilities require functions, variables and mixins
-@import 'node_modules/bootstrap/scss/functions';
-@import 'node_modules/bootstrap/scss/variables';
-@import 'node_modules/bootstrap/scss/mixins';
-@import 'node_modules/bootstrap/scss/grid';
-
 @import '_variables';
 @import '_mixins';
-
-.sub-menu {
-  @include sub-menu-with-actor;
-
-  .actor {
-    width: 100%;
-  }
+@import '_actor';
+@import '_miniature';
+
+.root {
+  --myGlobalTopPadding: 60px;
+  --myImgMargin: 30px;
+  --myFontSize: 16px;
+  --myGreyFontSize: 16px;
 }
 
-.margin-content {
-  // margin-content is required, but child views have their own margins
-  // that match views outside the scope of accounts, so we only align
-  // them with the margins of .sub-menu when required.
-  margin: 0;
+.section-label {
+  @include section-label-responsive;
 }
 
-.right-buttons {
-  display: flex;
-  height: max-content;
-  margin-left: auto;
-  margin-top: 10px;
-
-  @include media-breakpoint-down(lg) {
-    flex-flow: column-reverse;
+.links {
+  @include grid-videos-miniature-margins;
 
-    a {
-      margin-top: 0.25rem;
-      margin-right: 0 !important;
-    }
-  }
-
-  a {
-    @include peertube-button-outline;
-  }
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: $max-channels-width;
 
-  my-subscribe-button {
-    min-height: 30px;
+  simple-search-input {
+    margin-left: auto;
   }
 }
 
@@ -60,39 +41,101 @@ my-user-moderation-dropdown,
 
 .copy-button {
   border: none;
-  padding: 5px;
-  margin-top: -2px;
+}
+
+.account-info {
+  @include grid-videos-miniature-margins(false, 15px);
+
+  display: grid;
+  grid-template-columns: 1fr min-content;
+  grid-template-rows: auto auto;
+
+  background-color: pvar(--submenuBackgroundColor);
+  margin-bottom: 45px;
+  padding-top: var(--myGlobalTopPadding);
+  padding-bottom: var(--myGlobalTopPadding);
+  font-size: var(--myFontSize);
+}
+
+.account-avatar-row {
+  @include avatar-row-responsive(var(--myImgMargin), var(--myGreyFontSize));
+}
+
+.description {
+  grid-column: 1 / 3;
+  max-width: 1000px;
+  word-break: break-word;
+}
+
+.show-more {
+  @include show-more-description;
+
+  display: none;
+  text-align: center;
+}
+
+.buttons {
+  grid-column: 2;
+  grid-row: 1;
+
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-content: flex-start;
+
+  > *:not(:last-child) {
+    margin-bottom: 15px;
+  }
+
+  > a {
+    white-space: nowrap;
+  }
+}
+
+@media screen and (max-width: $small-view) {
+  .root {
+    --myGlobalTopPadding: 45px;
+    --myChannelImgMargin: 15px;
+  }
+
+  .account-info {
+    display: block;
+    padding-bottom: 60px;
+  }
+
+  .description:not(.expanded) {
+    max-height: 70px;
+
+    @include fade-text(30px, pvar(--submenuBackgroundColor));
+  }
+
+  .show-more {
+    display: block;
+  }
+
+  .buttons {
+    justify-content: center;
+  }
 }
 
 @media screen and (max-width: $mobile-view) {
-  .sub-menu {
-    .actor {
-      flex-direction: column;
-      align-items: center;
-
-      img,
-      .actor-info .actor-names .actor-display-name {
-        margin-right: 0;
-      }
-
-      .actor-info  {
-        .actor-names {
-          flex-direction: column;
-          align-items: center;
-        }
-
-        my-user-moderation-dropdown {
-          margin-left: 0;
-        }
-
-        .actor-followers {
-          text-align: center;
-        }
-      }
-
-      .right-buttons {
-        margin-left: 0;
-      }
-    }
+  .root {
+    --myGlobalTopPadding: 15px;
+    --myFontSize: 14px;
+    --myGreyFontSize: 13px;
+  }
+
+  .account-info {
+    display: block;
+    padding-bottom: 30px;
+  }
+
+  .links {
+    margin: auto !important;
+    width: min-content;
+  }
+
+  .show-more {
+    margin-bottom: 30px;
   }
 }
diff --git a/client/src/app/+accounts/accounts.component.ts b/client/src/app/+accounts/accounts.component.ts
index e6a5a5d5e..fbd7380a9 100644
--- a/client/src/app/+accounts/accounts.component.ts
+++ b/client/src/app/+accounts/accounts.component.ts
@@ -2,11 +2,19 @@ import { Subscription } from 'rxjs'
 import { catchError, distinctUntilChanged, map, switchMap, tap } from 'rxjs/operators'
 import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
-import { AuthService, Notifier, RedirectService, RestExtractor, ScreenService, UserService } from '@app/core'
-import { Account, AccountService, DropdownAction, ListOverflowItem, VideoChannel, VideoChannelService } from '@app/shared/shared-main'
+import { AuthService, MarkdownService, Notifier, RedirectService, RestExtractor, ScreenService, UserService } from '@app/core'
+import {
+  Account,
+  AccountService,
+  DropdownAction,
+  ListOverflowItem,
+  VideoChannel,
+  VideoChannelService,
+  VideoService
+} from '@app/shared/shared-main'
 import { AccountReportComponent } from '@app/shared/shared-moderation'
-import { User, UserRight } from '@shared/models'
 import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes'
+import { User, UserRight } from '@shared/models'
 import { AccountSearchComponent } from './account-search/account-search.component'
 
 @Component({
@@ -15,16 +23,23 @@ import { AccountSearchComponent } from './account-search/account-search.componen
 })
 export class AccountsComponent implements OnInit, OnDestroy {
   @ViewChild('accountReportModal') accountReportModal: AccountReportComponent
+
   accountSearch: AccountSearchComponent
 
   account: Account
   accountUser: User
+
   videoChannels: VideoChannel[] = []
+
   links: ListOverflowItem[] = []
+  hideMenu = false
 
-  isAccountManageable = false
   accountFollowerTitle = ''
 
+  accountVideosCount: number
+  accountDescriptionHTML = ''
+  accountDescriptionExpanded = false
+
   prependModerationActions: DropdownAction<any>[]
 
   private routeSub: Subscription
@@ -38,6 +53,8 @@ export class AccountsComponent implements OnInit, OnDestroy {
     private restExtractor: RestExtractor,
     private redirectService: RedirectService,
     private authService: AuthService,
+    private videoService: VideoService,
+    private markdown: MarkdownService,
     private screenService: ScreenService
   ) {
   }
@@ -62,9 +79,8 @@ export class AccountsComponent implements OnInit, OnDestroy {
                         )
 
     this.links = [
-      { label: $localize`VIDEO CHANNELS`, routerLink: 'video-channels' },
-      { label: $localize`VIDEOS`, routerLink: 'videos' },
-      { label: $localize`ABOUT`, routerLink: 'about' }
+      { label: $localize`CHANNELS`, routerLink: 'video-channels' },
+      { label: $localize`VIDEOS`, routerLink: 'videos' }
     ]
   }
 
@@ -72,19 +88,29 @@ export class AccountsComponent implements OnInit, OnDestroy {
     if (this.routeSub) this.routeSub.unsubscribe()
   }
 
-  get naiveAggregatedSubscribers () {
+  naiveAggregatedSubscribers () {
     return this.videoChannels.reduce(
       (acc, val) => acc + val.followersCount,
       this.account.followersCount // accumulator starts with the base number of subscribers the account has
     )
   }
 
-  get isInSmallView () {
+  isUserLoggedIn () {
+    return this.authService.isLoggedIn()
+  }
+
+  isInSmallView () {
     return this.screenService.isInSmallView()
   }
 
+  isManageable () {
+    if (!this.isUserLoggedIn()) return false
+
+    return this.account?.userId === this.authService.getUser().id
+  }
+
   onUserChanged () {
-    this.getUserIfNeeded(this.account)
+    this.loadUserIfNeeded(this.account)
   }
 
   onUserDeleted () {
@@ -113,40 +139,38 @@ export class AccountsComponent implements OnInit, OnDestroy {
     if (this.accountSearch) this.accountSearch.updateSearch(search)
   }
 
-  private onAccount (account: Account) {
+  onSearchInputDisplayChanged (displayed: boolean) {
+    this.hideMenu = this.isInSmallView() && displayed
+  }
+
+  hasVideoChannels () {
+    return this.videoChannels.length !== 0
+  }
+
+  hasShowMoreDescription () {
+    return !this.accountDescriptionExpanded && this.accountDescriptionHTML.length > 100
+  }
+
+  private async onAccount (account: Account) {
+    this.accountFollowerTitle = $localize`${account.followersCount} direct account followers`
+
     this.prependModerationActions = undefined
 
-    this.account = account
+    this.accountDescriptionHTML = await this.markdown.textMarkdownToHTML(account.description)
 
-    if (this.authService.isLoggedIn()) {
-      this.authService.userInformationLoaded.subscribe(
-        () => {
-          this.isAccountManageable = this.account.userId && this.account.userId === this.authService.getUser().id
-
-          const followers = this.subscribersDisplayFor(account.followersCount)
-          this.accountFollowerTitle = $localize`${followers} direct account followers`
-
-          // It's not our account, we can report it
-          if (!this.isAccountManageable) {
-            this.prependModerationActions = [
-              {
-                label: $localize`Report this account`,
-                handler: () => this.showReportModal()
-              }
-            ]
-          }
-        }
-      )
-    }
+    // After the markdown renderer to avoid layout changes
+    this.account = account
 
-    this.getUserIfNeeded(account)
+    this.updateModerationActions()
+    this.loadUserIfNeeded(account)
+    this.loadAccountVideosCount()
   }
 
   private showReportModal () {
     this.accountReportModal.show()
   }
 
-  private getUserIfNeeded (account: Account) {
+  private loadUserIfNeeded (account: Account) {
     if (!account.userId || !this.authService.isLoggedIn()) return
 
     const user = this.authService.getUser()
@@ -158,4 +182,33 @@ export class AccountsComponent implements OnInit, OnDestroy {
       )
     }
   }
+
+  private updateModerationActions () {
+    if (!this.authService.isLoggedIn()) return
+
+    this.authService.userInformationLoaded.subscribe(
+      () => {
+        if (this.isManageable()) return
+
+        // It's not our account, we can report it
+        this.prependModerationActions = [
+          {
+            label: $localize`Report this account`,
+            handler: () => this.showReportModal()
+          }
+        ]
+      }
+    )
+  }
+
+  private loadAccountVideosCount () {
+    this.videoService.getAccountVideos({
+      account: this.account,
+      videoPagination: {
+        currentPage: 1,
+        itemsPerPage: 0
+      },
+      sort: '-publishedAt'
+    }).subscribe(res => this.accountVideosCount = res.total)
+  }
 }
diff --git a/client/src/app/+accounts/accounts.module.ts b/client/src/app/+accounts/accounts.module.ts
index 6da65cbc1..22cdd0642 100644
--- a/client/src/app/+accounts/accounts.module.ts
+++ b/client/src/app/+accounts/accounts.module.ts
@@ -5,12 +5,12 @@ import { SharedMainModule } from '@app/shared/shared-main'
 import { SharedModerationModule } from '@app/shared/shared-moderation'
 import { SharedUserSubscriptionModule } from '@app/shared/shared-user-subscription'
 import { SharedVideoMiniatureModule } from '@app/shared/shared-video-miniature'
-import { AccountAboutComponent } from './account-about/account-about.component'
+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'
-import { AccountSearchComponent } from './account-search/account-search.component'
 import { AccountsRoutingModule } from './accounts-routing.module'
 import { AccountsComponent } from './accounts.component'
+import { SharedAccountAvatarModule } from '../shared/shared-account-avatar/shared-account-avatar.module'
 
 @NgModule({
   imports: [
@@ -21,14 +21,14 @@ import { AccountsComponent } from './accounts.component'
     SharedUserSubscriptionModule,
     SharedModerationModule,
     SharedVideoMiniatureModule,
-    SharedGlobalIconModule
+    SharedGlobalIconModule,
+    SharedAccountAvatarModule
   ],
 
   declarations: [
     AccountsComponent,
     AccountVideosComponent,
     AccountVideoChannelsComponent,
-    AccountAboutComponent,
     AccountSearchComponent
   ],