diff --git a/app/views/user/layout.scala.html b/app/views/user/layout.scala.html
deleted file mode 100644
index 9d290d53d3..0000000000
--- a/app/views/user/layout.scala.html
+++ /dev/null
@@ -1,23 +0,0 @@
-@(title: String, side: Option[Html] = None, robots: Boolean = true, evenMoreJs: Html = emptyHtml, evenMoreCss: Html = emptyHtml, openGraph: Option[lila.app.ui.OpenGraph] = None, menu: Option[Html] = None, withInfScroll: Boolean = true)(body: Html)(implicit ctx: Context)
-
-@moreCss = {
-@cssTags("user-list.css", "user-show.css")
-@evenMoreCss
-}
-
-@moreJs = {
-@if(withInfScroll) {
-@infiniteScrollTag
-}
-@jsAt("compiled/user.js")
-@evenMoreJs
-}
-
-@base.layout(
-title = title,
-side = side,
-moreCss = moreCss,
-moreJs = moreJs,
-menu = menu,
-robots = robots,
-openGraph = openGraph)(body).toHtml
diff --git a/app/views/user/mod/actions.scala.html b/app/views/user/mod/actions.scala.html
index 16f40a80da..5b9da63720 100644
--- a/app/views/user/mod/actions.scala.html
+++ b/app/views/user/mod/actions.scala.html
@@ -2,81 +2,86 @@
 
 <div id="mz_actions">
   @if(isGranted(_.UserEvaluate)) {
-  <form method="post" action="@routes.Mod.spontaneousInquiry(u.username)" title="Start an inquiry">
-    <button class="button inquiry" type="submit"><i></i></button>
-  </form>
-  <form method="post" action="@routes.Mod.refreshUserAssess(u.username)" title="Collect data and analyze if the user is suspicious.">
-    <input class="button" type="submit" value="Evaluate" />
-  </form>
-  @if(isGranted(_.Shadowban)) {
-  <a class="button" href="@routes.Mod.communicationPublic(u.id)" title="View communications">Comms</a>
+  <div class="btn-rack">
+    <form method="post" action="@routes.Mod.spontaneousInquiry(u.username)" title="Start an inquiry">
+      <button class="btn-rack__btn inquiry" type="submit"><i></i></button>
+    </form>
+    <form method="post" action="@routes.Mod.refreshUserAssess(u.username)" title="Collect data and analyze if the user is suspicious.">
+      <button class="btn-rack__btn" type="submit">Evaluate</button>
+    </form>
+    @if(isGranted(_.Shadowban)) {
+    <a class="btn-rack__btn" href="@routes.Mod.communicationPublic(u.id)" title="View communications">Comms</a>
+    }
+    <form method="post" action="@routes.Mod.notifySlack(u.id)" title="Notify slack #tavern" class="xhr">
+      <button class="btn-rack__btn" type="submit">Slack</button>
+    </form>
+  </div>
   }
-  <form method="post" action="@routes.Mod.notifySlack(u.id)" title="Notify slack #tavern" class="xhr">
-    <input class="button" type="submit" value="Slack" />
-  </form>
-  •
-  }
-  @if(isGranted(_.MarkEngine)) {
-  <form method="post" action="@routes.Mod.engine(u.username, !u.engine)" title="This user is clearly cheating." class="xhr">
-    <input class="button@when(u.engine, " active")" type="submit" value="Engine" />
-  </form>
-  }
-  @if(isGranted(_.MarkBooster)) {
-  <form method="post" action="@routes.Mod.booster(u.username, !u.booster)" title="Marks the user as a booster or sandbagger." class="xhr">
-    <input class="button@when(u.booster, " active")" type="submit" value="Booster" />
-  </form>
-  }
-  @if(isGranted(_.Shadowban)) {
-  <form method="post" action="@routes.Mod.troll(u.username, !u.troll)" title="@if(u.troll){En}else{Dis}able communication features for this user." class="xhr">
-    <input class="button@when(u.troll, " active")" type="submit" value="Shadowban" />
-  </form>
-  @if(u.troll) {
-  <form method="post" action="@routes.Mod.deletePmsAndChats(u.username)" title="Delete all PMs and public chat messages" class="xhr">
-    <input class="button confirm" type="submit" value="Clear PMs & chats" />
-  </form>
-  }
-  }
-  @if(isGranted(_.IpBan)) {
-  <form method="post" action="@routes.Mod.ban(u.username, !u.ipBan)" class="xhr">
-    <input class="button@when(u.ipBan, " active")" type="submit" value="IP ban" />
-  </form>
-  }
-  @if(u.totpSecret.isDefined && isGranted(_.DisableTwoFactor)) {
-  <form method="post" action="@routes.Mod.disableTwoFactor(u.username)" title="Disables two-factor authentication for this account." class="xhr">
-    <input class="button confirm" type="submit" value="Disable 2FA" />
-  </form>
-  }
-  @if(u.enabled) {
-  @if(isGranted(_.CloseAccount)) {
-  <form method="post" action="@routes.Mod.closeAccount(u.username)" title="Disables this account." class="xhr">
-    <input class="button" type="submit" value="Close" />
-  </form>
-  }
-  } else {
-  @if(erased.value) {
-  Erased
-  } else {
-  @if(isGranted(_.ReopenAccount)) {
-  <form method="post" action="@routes.Mod.reopenAccount(u.username)" title="Re-activates this account." class="xhr">
-    <input type="submit" class="button active" value="Closed" />
-  </form>
-  }
-  }
-  }
-  <div class="second_mod_button_row">
+  <div class="btn-rack">
+    @if(isGranted(_.MarkEngine)) {
+    <form method="post" action="@routes.Mod.engine(u.username, !u.engine)" title="This user is clearly cheating." class="xhr">
+      <button class="btn-rack__btn@when(u.engine, " active")" type="submit">Engine</button>
+    </form>
+    }
+    @if(isGranted(_.MarkBooster)) {
+    <form method="post" action="@routes.Mod.booster(u.username, !u.booster)" title="Marks the user as a booster or sandbagger." class="xhr">
+      <button class="btn-rack__btn@when(u.booster, " active")" type="submit">Booster</button>
+    </form>
+    }
+    @if(isGranted(_.Shadowban)) {
+    <form method="post" action="@routes.Mod.troll(u.username, !u.troll)" title="@if(u.troll){En}else{Dis}able communication features for this user." class="xhr">
+      <button class="btn-rack__btn@when(u.troll, " active")" type="submit">Shadowban</button>
+    </form>
+    @if(u.troll) {
+    <form method="post" action="@routes.Mod.deletePmsAndChats(u.username)" title="Delete all PMs and public chat messages" class="xhr">
+      <button class="btn-rack__btn confirm" type="submit">Clear PMs & chats</button>
+    </form>
+    }
+    }
     @if(isGranted(_.RemoveRanking)) {
     <form method="post" action="@routes.Mod.rankban(u.username, !u.rankban)" title="@if(u.rankban){In}else{Ex}cludes this user @if(u.rankban){from}else{in} the rankings." class="xhr">
-      <input class="button@when(u.rankban, " active")" type="submit" value="Ban from ranking" />
+      <button class="btn-rack__btn@when(u.rankban, " active")" type="submit">Rankban</button>
     </form>
     }
     @if(isGranted(_.ReportBan)) {
     <form method="post" action="@routes.Mod.reportban(u.username, !u.reportban)" title="@if(u.reportban){En}else{Dis}able the report feature for this user." class="xhr">
-      <input class="button@when(u.reportban, " active")" type="submit" value="Reportban" />
+      <button class="btn-rack__btn@when(u.reportban, " active")" type="submit">Reportban</button>
+    </form>
+    }
+  </div>
+  <div class="btn-rack">
+    @if(isGranted(_.IpBan)) {
+    <form method="post" action="@routes.Mod.ban(u.username, !u.ipBan)" class="xhr">
+      <button class="btn-rack__btn@when(u.ipBan, " active")" type="submit">IP ban</button>
+    </form>
+    }
+    @if(u.enabled) {
+    @if(isGranted(_.CloseAccount)) {
+    <form method="post" action="@routes.Mod.closeAccount(u.username)" title="Disables this account." class="xhr">
+      <button class="btn-rack__btn" type="submit">Close</button>
+    </form>
+    }
+    } else {
+    @if(erased.value) {
+    Erased
+    } else {
+    @if(isGranted(_.ReopenAccount)) {
+    <form method="post" action="@routes.Mod.reopenAccount(u.username)" title="Re-activates this account." class="xhr">
+      <button type="submit" class="btn-rack__btn active">Closed</button>
+    </form>
+    }
+    }
+    }
+  </div>
+  <div class="btn-rack">
+    @if(u.totpSecret.isDefined && isGranted(_.DisableTwoFactor)) {
+    <form method="post" action="@routes.Mod.disableTwoFactor(u.username)" title="Disables two-factor authentication for this account." class="xhr">
+      <button class="btn-rack__btn confirm" type="submit">Disable 2FA</button>
     </form>
     }
     @if(isGranted(_.Impersonate)) {
     <form method="post" action="@routes.Mod.impersonate(u.username)">
-      <input class="button" type="submit" value="Impersonate" />
+      <button class="btn-rack__btn" type="submit">Impersonate</button>
     </form>
     }
   </div>
@@ -88,7 +93,7 @@
   @if(isGranted(_.SetEmail)) {
   <form class="email" method="post" action="@routes.Mod.setEmail(u.username)">
     <input type="email" value="@emails.current" name="email" placeholder="Email address" />
-    <button type="submit" class="thin button" data-icon="E"></button>
+    <button type="submit" class="button" data-icon="E"></button>
   </form>
   @emails.previous.map { email =>
   Previously @email
diff --git a/app/views/user/show/gamesContent.scala b/app/views/user/show/gamesContent.scala
index b2e919f846..f11ddf1d16 100644
--- a/app/views/user/show/gamesContent.scala
+++ b/app/views/user/show/gamesContent.scala
@@ -29,8 +29,8 @@ object gamesContent {
         )(userGameFilterTitle(u, nbs, f))
       }
     ),
-    filters.current.name == "me" option nbs.crosstable.map { c =>
-      div(cls := "crosstable")(views.html.game.crosstable(c, none))
+    nbs.crosstable.ifTrue(filters.current.name == "me").map {
+      views.html.game.crosstable(_, none)
     },
     div(cls := "search_result")(
       if (filterName == "search") {
diff --git a/app/views/user/show/header.scala b/app/views/user/show/header.scala
index 2c77a2b94e..163e47a941 100644
--- a/app/views/user/show/header.scala
+++ b/app/views/user/show/header.scala
@@ -74,7 +74,7 @@ object header {
           a(cls := "btn-rack__btn", href := routes.Relation.blocks(), title := trans.listBlockedPlayers.txt(), dataIcon := "k")
         ),
         isGranted(_.UserSpy) option
-          a(cls := "btn-rack__btn mod_zone_toggle", href := routes.User.mod(u.username), title := "Mod zone", dataIcon := ""),
+          a(cls := "btn-rack__btn mod-zone-toggle", href := routes.User.mod(u.username), title := "Mod zone", dataIcon := ""),
         a(cls := "btn-rack__btn", href := routes.User.tv(u.username), title := trans.watchGames.txt(), dataIcon := "1"),
         (ctx.isAuth && !ctx.is(u)) option
           views.html.relation.actions(u.id, relation = social.relation, followable = social.followable, blocked = social.blocked),
@@ -122,7 +122,7 @@ object header {
       }
     ),
     ((ctx is u) && u.perfs.bestStandardRating > 2400 && !u.hasTitle && !ctx.pref.hasSeenVerifyTitle) option claimTitle(u),
-    isGranted(_.UserSpy) option div(cls := "mod_zone none"),
+    isGranted(_.UserSpy) option div(cls := "mod-zone none"),
     angle match {
       case Angle.Games(Some(searchForm)) => views.html.search.user(u, searchForm)
       case _ =>
diff --git a/app/views/user/show/otherTrophies.scala.html b/app/views/user/show/otherTrophies.scala.html
index 3c94385a0b..9661724437 100644
--- a/app/views/user/show/otherTrophies.scala.html
+++ b/app/views/user/show/otherTrophies.scala.html
@@ -81,6 +81,3 @@
   class="trophy award icon3d streamer@if(isStreaming(u.id)){ streaming}"
   title="@if(isStreaming(u.id)){Live now!}else{Lichess Streamer}"></a>
 }
-<a href="@routes.Streamer.show(u.username)"
-  class="trophy award icon3d streamer streaming"
-  title="Live now!"></a>
diff --git a/app/views/user/show/page.scala b/app/views/user/show/page.scala
index d6c1ec4d44..a8ae7f432e 100644
--- a/app/views/user/show/page.scala
+++ b/app/views/user/show/page.scala
@@ -39,7 +39,7 @@ object page {
     ),
     moreCss = frag(
       responsiveCssTag("user.show.activity"),
-      isGranted(_.UserSpy) option responsiveCssTag("user-mod")
+      isGranted(_.UserSpy) option responsiveCssTag("mod.user")
     ),
     responsive = true
   ) {
@@ -62,6 +62,7 @@ object page {
   )(implicit ctx: Context) = views.html.base.layout(
     title = s"${u.username} : ${userGameFilterTitleNoTag(u, info.nbs, filters.current)}${if (games.currentPage == 1) "" else " - page " + games.currentPage}",
     moreJs = frag(
+      infiniteScrollTag,
       jsAt("compiled/user.js"),
       info.ratingChart.map { ratingChart =>
         frag(
@@ -74,7 +75,8 @@ object page {
     ),
     moreCss = frag(
       responsiveCssTag("user.show.games"),
-      isGranted(_.UserSpy) option responsiveCssTag("user-mod")
+      info.nbs.crosstable.isDefined option responsiveCssTag("crosstable"),
+      isGranted(_.UserSpy) option responsiveCssTag("mod.user")
     ),
     responsive = true
   ) {
diff --git a/ui/common/css/component/_btn-rack.scss b/ui/common/css/component/_btn-rack.scss
index 7d48ea3c5f..d58e30dce9 100644
--- a/ui/common/css/component/_btn-rack.scss
+++ b/ui/common/css/component/_btn-rack.scss
@@ -7,11 +7,11 @@
   .btn-rack { /* embedded racks */
     border: none;
   }
-  &__btn {
+  &__btn,
+  form {
     @extend %flex-center, %metal;
     justify-content: center;
     text-align: center;
-    padding: 0 12px;
     line-height: 2rem;
     cursor: pointer;
     border-right: $border;
@@ -32,4 +32,7 @@
       letter-spacing: -1px;
     }
   }
+  &__btn {
+    padding: 0 .6em;
+  }
 }
diff --git a/ui/site/css/build/_crosstable.scss b/ui/site/css/build/_crosstable.scss
new file mode 100644
index 0000000000..883b4c5e34
--- /dev/null
+++ b/ui/site/css/build/_crosstable.scss
@@ -0,0 +1,2 @@
+@import '../../../common/css/plugin';
+@import '../../../common/css/component/crosstable';
diff --git a/ui/site/css/build/_mod.user.scss b/ui/site/css/build/_mod.user.scss
new file mode 100644
index 0000000000..974e861e8f
--- /dev/null
+++ b/ui/site/css/build/_mod.user.scss
@@ -0,0 +1,3 @@
+@import '../../../common/css/plugin';
+@import '../../../common/css/component/slist';
+@import '../mod/user';
diff --git a/ui/site/css/build/crosstable.dark.scss b/ui/site/css/build/crosstable.dark.scss
new file mode 100644
index 0000000000..969d11018d
--- /dev/null
+++ b/ui/site/css/build/crosstable.dark.scss
@@ -0,0 +1,2 @@
+@import '../../../common/css/theme/dark';
+@import 'crosstable';
diff --git a/ui/site/css/build/crosstable.light.scss b/ui/site/css/build/crosstable.light.scss
new file mode 100644
index 0000000000..e36d499545
--- /dev/null
+++ b/ui/site/css/build/crosstable.light.scss
@@ -0,0 +1,2 @@
+@import '../../../common/css/theme/light';
+@import 'crosstable';
diff --git a/ui/site/css/build/crosstable.transp.scss b/ui/site/css/build/crosstable.transp.scss
new file mode 100644
index 0000000000..836d45a14a
--- /dev/null
+++ b/ui/site/css/build/crosstable.transp.scss
@@ -0,0 +1,2 @@
+@import '../../../common/css/theme/transp';
+@import 'crosstable';
diff --git a/ui/site/css/build/mod.user.dark.scss b/ui/site/css/build/mod.user.dark.scss
new file mode 100644
index 0000000000..61cc8b9a7a
--- /dev/null
+++ b/ui/site/css/build/mod.user.dark.scss
@@ -0,0 +1,2 @@
+@import '../../../common/css/theme/dark';
+@import 'mod.user';
diff --git a/ui/site/css/build/mod.user.light.scss b/ui/site/css/build/mod.user.light.scss
new file mode 100644
index 0000000000..63763d0b57
--- /dev/null
+++ b/ui/site/css/build/mod.user.light.scss
@@ -0,0 +1,2 @@
+@import '../../../common/css/theme/light';
+@import 'mod.user';
diff --git a/ui/site/css/build/mod.user.transp.scss b/ui/site/css/build/mod.user.transp.scss
new file mode 100644
index 0000000000..6143c0c6cc
--- /dev/null
+++ b/ui/site/css/build/mod.user.transp.scss
@@ -0,0 +1,2 @@
+@import '../../../common/css/theme/transp';
+@import 'mod.user';
diff --git a/public/stylesheets/user-mod.css b/ui/site/css/mod/_user.scss
similarity index 83%
rename from public/stylesheets/user-mod.css
rename to ui/site/css/mod/_user.scss
index 1d24dedceb..35ec5ddde7 100644
--- a/public/stylesheets/user-mod.css
+++ b/ui/site/css/mod/_user.scss
@@ -1,12 +1,12 @@
-.mod_zone {
+.mod-zone {
   display: flex;
   flex-flow: column;
   margin: 1em 20px;
 }
-.mod_zone.none {
+.mod-zone.none {
   display: none;
 }
-.mod_zone .spinner {
+.mod-zone .spinner {
   margin: 100px auto;
 }
 #mz_actions { order: 1; }
@@ -26,74 +26,75 @@
   top: 0;
   left: 0;
   padding: 0;
-}
-#mz_menu .inner {
-  position: absolute;
-  right: -137px;
-  top: 0;
-  margin-top: 20px;
-  display: flex;
-  flex-flow: column;
-}
-#mz_menu a {
-  padding: 7px 10px;
-}
-#mz_menu a.disabled {
-  opacity: 0.6;
-}
-#mz_menu a:not(.disabled):hover {
-  color: #3893E8;
+  .inner {
+    @extend %roboto;
+    position: absolute;
+    right: -156px;
+    top: 0;
+    margin-top: 20px;
+    display: flex;
+    flex-flow: column;
+  }
+  a {
+    padding: 7px 10px;
+    color: $c-font;
+    &.disabled {
+      opacity: 0.6;
+    }
+    &:not(.disabled):hover {
+      color: $c-link;
+    }
+  }
 }
 
 #mz_actions {
+  @extend %flex-center;
   text-align: center;
-  padding: 10px 0;
+  padding-top: 0;
+  .btn-rack, > form {
+    margin: 1em 1em 0 0;
+  }
+  .btn-rack .active {
+  }
 }
 #mz_actions .inquiry {
-  border-radius: 3px;
-  height: 32px;
-  width: 32px;
+  height: 2em;
+  width: 2em;
   margin: 0;
   padding: 0;
   vertical-align: top;
   background: #484541;
+  i {
+    display: block;
+    height: 30px;
+    width: 30px;
+    background: no-repeat url(../images/icons/octopus.svg);
+    background-size: 80%;
+    background-position: 50% 50%;
+  }
 }
-#mz_actions .inquiry i {
-  display: block;
-  height: 30px;
-  width: 30px;
-  background: no-repeat url(../images/icons/octopus.svg);
-  background-size: 80%;
-  background-position: 50% 50%;
-}
-.mod_zone .second_mod_button_row {
-  margin: 5px 0 10px 0;
-}
-.mod_zone > * {
+.mod-zone > * {
   padding: 20px 0 0 0;
 }
-.mod_zone .neural strong {
+.mod-zone .neural strong {
   display: inline;
 }
-.mod_zone .slist {
-  border: 1px solid #ccc;
+.mod-zone .slist {
+  border: $border;
   border-top: none;
   font-size: 0.9em;
   margin-bottom: 1em;
 }
-body.dark .mod_zone .slist {
-  border-color: #3d3d3d;
-}
-.mod_zone .same {
+.mod-zone .same {
   font-style: italic;
   font-weight: bold;
   background: rgba(56,147,232,0.2)!important;
   border-left: 3px solid rgba(56,147,232,0.8)!important;
 }
-.mod_zone time {
+.mod-zone time {
   opacity: 0.7;
 }
-.mod_zone form {
+.mod-zone form {
   display: inline;
 }
 #mz_identification > div {
@@ -130,14 +131,14 @@ body.dark .mod_zone .slist {
   color: red;
   font-weight: bold;
 }
-.mod_zone .ip .intel {
+.mod-zone .ip .intel {
   margin-left: 10px;
 }
-.mod_zone strong {
+.mod-zone strong {
   display: block;
   margin-top: 0.5em;
 }
-.mod_zone strong.inline {
+.mod-zone strong.inline {
   display: inline;
 }
 #mz_plan ul {
@@ -209,11 +210,11 @@ body.dark .mod_zone .slist {
   /* orange */
 }
 #mz_assessments .sig_5 {
-  color: #E73B38;
+  color: $c-bad;
   /* red */
 }
 #mz_assessments .result_4 {
-  color: #E73B38;
+  color: $c-bad;
   /* red */
 }
 #mz_assessments .result_3 {
@@ -230,13 +231,13 @@ body.dark .mod_zone .slist {
 }
 #mz_assessments .match {
   font-weight: bold;
-  color: #759900;
+  color: $c-good;
 }
 
 #mz_irwin header {
   margin-top: 10px;
   display: flex;
-  border: 1px solid #ccc;
+  border: $border;
 }
 #mz_irwin header > * {
   flex: 1 1 100%;
@@ -245,19 +246,15 @@ body.dark .mod_zone .slist {
   align-items: center;
   justify-content: center;
   white-space: nowrap;
-  border-left: 1px solid #ccc;
+  border-left: $border;
   padding: 5px 10px;
 }
 #mz_irwin header > *:first-child {
   border-left: none;
 }
-body.dark #mz_irwin header,
-body.dark #mz_irwin header > * {
-  border-color: #3d3d3d;
-}
 #mz_irwin header .title {
   flex-flow: row;
-  color: #3893E8;
+  color: $c-link;
   font-size: 1.4em;
   text-transform: uppercase;
   letter-spacing: 3px;
@@ -322,7 +319,7 @@ body.dark #mz_irwin header > * {
   color: #E79B64;
 }
 #mz_irwin .text .red {
-  color: #E73B38;
+  color: $c-bad;
 }
 #mz_irwin .moves .green {
   /* actually blue */
@@ -335,7 +332,7 @@ body.dark #mz_irwin header > * {
   background-color: #E79B64;
 }
 #mz_irwin .moves .red {
-  background-color: #E73B38;
+  background-color: $c-bad;
 }
 
 .mz_reports .score {
diff --git a/ui/site/css/user/_number-menu.scss b/ui/site/css/user/_number-menu.scss
index 60d7545542..cb4a0db3a3 100644
--- a/ui/site/css/user/_number-menu.scss
+++ b/ui/site/css/user/_number-menu.scss
@@ -21,19 +21,24 @@
     margin-top: .7em;
     padding-bottom: 0.8em;
     @include transition();
+    border-bottom: $border;
     &:first-child {
-      box-radius-top-left: 0;
+      border-top-left-radius: 0;
+      border-left: 0!important;
     }
     &:last-child {
-      box-radius-top-right: 0;
+      border-top-right-radius: 0;
+      border-right: 0!important;
     }
     &:hover {
       background: mix($c-link, $c-bg-box, 10%);
+      color: $c-font-clear;
     }
     &.active {
-      color: $c-font;
-      margin-bottom: -1px;
-      background: #fff;
+      color: $c-font-clear;
+      border: $border;
+      border-bottom: 0;
+      background: $c-bg-box;
     }
   }
   strong {
diff --git a/ui/site/css/user/_show.scss b/ui/site/css/user/_show.scss
index 17fa16e6db..6cef53308f 100644
--- a/ui/site/css/user/_show.scss
+++ b/ui/site/css/user/_show.scss
@@ -32,7 +32,7 @@
       margin: 10px 0;
     }
     .rating_history {
-      flex: 1 1 62%;
+      flex: 0 0 62%;
       margin-left: -10px;
       height: 350px;
     }
@@ -102,7 +102,8 @@
     }
   }
   .crosstable {
-    margin: 25px 10px 15px 10px;
+    margin: 2em 1em;
+    width: auto;
   }
   .new-player {
     padding: 1.5em;
@@ -138,4 +139,8 @@
       justify-content: center;
     }
   }
+
+  .activity {
+    margin-bottom: 2em;
+  }
 }
diff --git a/ui/site/css/user/_sub-rating.scss b/ui/site/css/user/_sub-rating.scss
index 4dbfd50e06..6ed03f225f 100644
--- a/ui/site/css/user/_sub-rating.scss
+++ b/ui/site/css/user/_sub-rating.scss
@@ -67,6 +67,7 @@
     display: inline-block;
   }
   strong {
+    color: $c-font-dim;
     font-weight: bold;
     font-size: 1.2em;
   }
diff --git a/ui/site/src/user-mod.js b/ui/site/src/user-mod.js
index dd2428f656..fa34b5bc3d 100644
--- a/ui/site/src/user-mod.js
+++ b/ui/site/src/user-mod.js
@@ -16,8 +16,8 @@ function streamLoad(opts) {
   source.onerror = function() { source.close(); };
 }
 
-var $toggle = $('div.user_show .mod_zone_toggle');
-var $zone = $('div.user_show .mod_zone');
+var $toggle = $('.user-show .mod-zone-toggle');
+var $zone = $('.user-show .mod-zone');
 
 function loadZone() {
   $zone.html(lichess.spinnerHtml).removeClass('none');