SONAR-10188 Update project/organization header

61 files changed, 1417 insertions, 1344 deletions

diff --git a/server/sonar-web/src/main/js/apps/about/components/AboutApp.js b/server/sonar-web/src/main/js/apps/about/components/AboutApp.js
index 267d0fc7cf1..d0369971567 100644
--- a/server/sonar-web/src/main/js/apps/about/components/AboutApp.js
+++ b/server/sonar-web/src/main/js/apps/about/components/AboutApp.js
@@ -76,11 +76,15 @@ class AboutApp extends React.PureComponent {
       window.location = 'https://about.sonarcloud.io';
     } else {
       this.loadData();
+      // $FlowFixMe
+      document.body.classList.add('white-page');
     }
   }
 
   componentWillUnmount() {
     this.mounted = false;
+    // $FlowFixMe
+    document.body.classList.remove('white-page');
   }
 
   loadProjects() {
diff --git a/server/sonar-web/src/main/js/apps/account/account.css b/server/sonar-web/src/main/js/apps/account/account.css
index 12c3cabf574..73d42282e13 100644
--- a/server/sonar-web/src/main/js/apps/account/account.css
+++ b/server/sonar-web/src/main/js/apps/account/account.css
@@ -8,7 +8,7 @@
   padding-top: 20px;
   padding-bottom: 20px;
   border-bottom: 1px solid var(--barBorderColor);
-  background-color: var(--barBackgroundColor);
+  background-color: #fff;
 }
 
 .account-nav {
diff --git a/server/sonar-web/src/main/js/apps/account/components/Password.js b/server/sonar-web/src/main/js/apps/account/components/Password.js
index dec082bc69b..6e3bb3c3c69 100644
--- a/server/sonar-web/src/main/js/apps/account/components/Password.js
+++ b/server/sonar-web/src/main/js/apps/account/components/Password.js
@@ -70,10 +70,10 @@ export default class Password extends Component {
     const { success, errors } = this.state;
 
     return (
-      <section>
+      <section className="boxed-group">
         <h2 className="spacer-bottom">{translate('my_profile.password.title')}</h2>
 
-        <form onSubmit={this.handleChangePassword}>
+        <form className="boxed-group-inner" onSubmit={this.handleChangePassword}>
           {success && (
             <div className="alert alert-success">{translate('my_profile.password.changed')}</div>
           )}
diff --git a/server/sonar-web/src/main/js/apps/account/components/Security.js b/server/sonar-web/src/main/js/apps/account/components/Security.js
index d52a3b6e1ea..3006ca55f1a 100644
--- a/server/sonar-web/src/main/js/apps/account/components/Security.js
+++ b/server/sonar-web/src/main/js/apps/account/components/Security.js
@@ -31,11 +31,7 @@ function Security(props) {
   return (
     <div className="account-body account-container">
       <Helmet title={translate('my_account.security')} />
-
       <Tokens user={user} />
-
-      {user.local && <hr className="account-separator" />}
-
       {user.local && <Password user={user} />}
     </div>
   );
diff --git a/server/sonar-web/src/main/js/apps/account/notifications/GlobalNotifications.js b/server/sonar-web/src/main/js/apps/account/notifications/GlobalNotifications.js
index d7ba3d35197..294c2c209c6 100644
--- a/server/sonar-web/src/main/js/apps/account/notifications/GlobalNotifications.js
+++ b/server/sonar-web/src/main/js/apps/account/notifications/GlobalNotifications.js
@@ -46,30 +46,32 @@ type Props = {
 
 function GlobalNotifications(props /*: Props */) {
   return (
-    <section>
-      <h2 className="spacer-bottom">{translate('my_profile.overall_notifications.title')}</h2>
+    <section className="boxed-group">
+      <h2>{translate('my_profile.overall_notifications.title')}</h2>
 
-      <table className="form">
-        <thead>
-          <tr>
-            <th />
-            {props.channels.map(channel => (
-              <th key={channel} className="text-center">
-                <h4>{translate('notification.channel', channel)}</h4>
-              </th>
-            ))}
-          </tr>
-        </thead>
+      <div className="boxed-group-inner">
+        <table className="form">
+          <thead>
+            <tr>
+              <th />
+              {props.channels.map(channel => (
+                <th key={channel} className="text-center">
+                  <h4>{translate('notification.channel', channel)}</h4>
+                </th>
+              ))}
+            </tr>
+          </thead>
 
-        <NotificationsList
-          notifications={props.notifications}
-          channels={props.channels}
-          types={props.types}
-          checkboxId={(d, c) => `global-notification-${d}-${c}`}
-          onAdd={props.addNotification}
-          onRemove={props.removeNotification}
-        />
-      </table>
+          <NotificationsList
+            notifications={props.notifications}
+            channels={props.channels}
+            types={props.types}
+            checkboxId={(d, c) => `global-notification-${d}-${c}`}
+            onAdd={props.addNotification}
+            onRemove={props.removeNotification}
+          />
+        </table>
+      </div>
     </section>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/account/notifications/Notifications.js b/server/sonar-web/src/main/js/apps/account/notifications/Notifications.js
index aa2c8d1179e..6e5fed53bcc 100644
--- a/server/sonar-web/src/main/js/apps/account/notifications/Notifications.js
+++ b/server/sonar-web/src/main/js/apps/account/notifications/Notifications.js
@@ -40,13 +40,8 @@ class Notifications extends React.PureComponent {
     return (
       <div className="account-body account-container">
         <Helmet title={translate('my_account.notifications')} />
-
-        <p className="big-spacer-bottom">{translate('notification.dispatcher.information')}</p>
-
+        <p className="alert alert-info">{translate('notification.dispatcher.information')}</p>
         <GlobalNotifications />
-
-        <hr className="account-separator" />
-
         <Projects />
       </div>
     );
diff --git a/server/sonar-web/src/main/js/apps/account/notifications/Projects.js b/server/sonar-web/src/main/js/apps/account/notifications/Projects.js
index 14a7f74020c..5345b55591a 100644
--- a/server/sonar-web/src/main/js/apps/account/notifications/Projects.js
+++ b/server/sonar-web/src/main/js/apps/account/notifications/Projects.js
@@ -113,30 +113,32 @@ class Projects extends React.PureComponent {
     const allProjects = [...this.props.projects, ...this.state.addedProjects];
 
     return (
-      <section>
-        <h2 className="spacer-bottom">{translate('my_profile.per_project_notifications.title')}</h2>
-
-        {allProjects.length === 0 && (
-          <div className="note">{translate('my_account.no_project_notifications')}</div>
-        )}
-
-        {allProjects.map(project => <ProjectNotifications key={project.key} project={project} />)}
-
-        <div className="spacer-top panel bg-muted">
-          <span className="text-middle spacer-right">
-            {translate('my_account.set_notifications_for')}:
-          </span>
-          <AsyncSelect
-            autoload={false}
-            cache={false}
-            name="new_project"
-            style={{ width: '300px' }}
-            loadOptions={this.loadOptions}
-            minimumInput={2}
-            optionRenderer={this.renderOption}
-            onChange={this.handleAddProject}
-            placeholder={translate('my_account.search_project')}
-          />
+      <section className="boxed-group">
+        <h2>{translate('my_profile.per_project_notifications.title')}</h2>
+
+        <div className="boxed-group-inner">
+          {allProjects.length === 0 && (
+            <div className="note">{translate('my_account.no_project_notifications')}</div>
+          )}
+
+          {allProjects.map(project => <ProjectNotifications key={project.key} project={project} />)}
+
+          <div className="spacer-top panel bg-muted">
+            <span className="text-middle spacer-right">
+              {translate('my_account.set_notifications_for')}:
+            </span>
+            <AsyncSelect
+              autoload={false}
+              cache={false}
+              name="new_project"
+              style={{ width: '300px' }}
+              loadOptions={this.loadOptions}
+              minimumInput={2}
+              optionRenderer={this.renderOption}
+              onChange={this.handleAddProject}
+              placeholder={translate('my_account.search_project')}
+            />
+          </div>
         </div>
       </section>
     );
diff --git a/server/sonar-web/src/main/js/apps/account/notifications/__tests__/__snapshots__/GlobalNotifications-test.js.snap b/server/sonar-web/src/main/js/apps/account/notifications/__tests__/__snapshots__/GlobalNotifications-test.js.snap
index 4a7d7d10c5a..64a62011d96 100644
--- a/server/sonar-web/src/main/js/apps/account/notifications/__tests__/__snapshots__/GlobalNotifications-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/account/notifications/__tests__/__snapshots__/GlobalNotifications-test.js.snap
@@ -1,69 +1,73 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should match snapshot 1`] = `
-<section>
-  <h2
-    className="spacer-bottom"
-  >
+<section
+  className="boxed-group"
+>
+  <h2>
     my_profile.overall_notifications.title
   </h2>
-  <table
-    className="form"
+  <div
+    className="boxed-group-inner"
   >
-    <thead>
-      <tr>
-        <th />
-        <th
-          className="text-center"
-          key="channel1"
-        >
-          <h4>
-            notification.channel.channel1
-          </h4>
-        </th>
-        <th
-          className="text-center"
-          key="channel2"
-        >
-          <h4>
-            notification.channel.channel2
-          </h4>
-        </th>
-      </tr>
-    </thead>
-    <NotificationsList
-      channels={
-        Array [
-          "channel1",
-          "channel2",
-        ]
-      }
-      checkboxId={[Function]}
-      notifications={
-        Array [
-          Object {
-            "channel": "channel1",
-            "type": "type1",
-          },
-          Object {
-            "channel": "channel1",
-            "type": "type2",
-          },
-          Object {
-            "channel": "channel2",
-            "type": "type2",
-          },
-        ]
-      }
-      onAdd={[Function]}
-      onRemove={[Function]}
-      types={
-        Array [
-          "type1",
-          "type2",
-        ]
-      }
-    />
-  </table>
+    <table
+      className="form"
+    >
+      <thead>
+        <tr>
+          <th />
+          <th
+            className="text-center"
+            key="channel1"
+          >
+            <h4>
+              notification.channel.channel1
+            </h4>
+          </th>
+          <th
+            className="text-center"
+            key="channel2"
+          >
+            <h4>
+              notification.channel.channel2
+            </h4>
+          </th>
+        </tr>
+      </thead>
+      <NotificationsList
+        channels={
+          Array [
+            "channel1",
+            "channel2",
+          ]
+        }
+        checkboxId={[Function]}
+        notifications={
+          Array [
+            Object {
+              "channel": "channel1",
+              "type": "type1",
+            },
+            Object {
+              "channel": "channel1",
+              "type": "type2",
+            },
+            Object {
+              "channel": "channel2",
+              "type": "type2",
+            },
+          ]
+        }
+        onAdd={[Function]}
+        onRemove={[Function]}
+        types={
+          Array [
+            "type1",
+            "type2",
+          ]
+        }
+      />
+    </table>
+  </div>
 </section>
 `;
diff --git a/server/sonar-web/src/main/js/apps/account/notifications/__tests__/__snapshots__/Notifications-test.js.snap b/server/sonar-web/src/main/js/apps/account/notifications/__tests__/__snapshots__/Notifications-test.js.snap
index 8541cc01be7..855ccecb356 100644
--- a/server/sonar-web/src/main/js/apps/account/notifications/__tests__/__snapshots__/Notifications-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/account/notifications/__tests__/__snapshots__/Notifications-test.js.snap
@@ -10,14 +10,11 @@ exports[`should match snapshot 1`] = `
     title="my_account.notifications"
   />
   <p
-    className="big-spacer-bottom"
+    className="alert alert-info"
   >
     notification.dispatcher.information
   </p>
   <Connect(GlobalNotifications) />
-  <hr
-    className="account-separator"
-  />
   <Connect(Projects) />
 </div>
 `;
diff --git a/server/sonar-web/src/main/js/apps/account/notifications/__tests__/__snapshots__/Projects-test.js.snap b/server/sonar-web/src/main/js/apps/account/notifications/__tests__/__snapshots__/Projects-test.js.snap
index 3d6b8b28eb1..7f2fb250868 100644
--- a/server/sonar-web/src/main/js/apps/account/notifications/__tests__/__snapshots__/Projects-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/account/notifications/__tests__/__snapshots__/Projects-test.js.snap
@@ -1,178 +1,190 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render projects 1`] = `
-<section>
-  <h2
-    className="spacer-bottom"
-  >
+<section
+  className="boxed-group"
+>
+  <h2>
     my_profile.per_project_notifications.title
   </h2>
-  <Connect(ProjectNotifications)
-    key="foo"
-    project={
-      Object {
-        "key": "foo",
-        "name": "Foo",
-      }
-    }
-  />
-  <Connect(ProjectNotifications)
-    key="bar"
-    project={
-      Object {
-        "key": "bar",
-        "name": "Bar",
-      }
-    }
-  />
   <div
-    className="spacer-top panel bg-muted"
+    className="boxed-group-inner"
   >
-    <span
-      className="text-middle spacer-right"
-    >
-      my_account.set_notifications_for
-      :
-    </span>
-    <AsyncSelect
-      autoload={false}
-      cache={false}
-      loadOptions={[Function]}
-      minimumInput={2}
-      name="new_project"
-      onChange={[Function]}
-      optionRenderer={[Function]}
-      placeholder="my_account.search_project"
-      style={
+    <Connect(ProjectNotifications)
+      key="foo"
+      project={
+        Object {
+          "key": "foo",
+          "name": "Foo",
+        }
+      }
+    />
+    <Connect(ProjectNotifications)
+      key="bar"
+      project={
         Object {
-          "width": "300px",
+          "key": "bar",
+          "name": "Bar",
         }
       }
     />
+    <div
+      className="spacer-top panel bg-muted"
+    >
+      <span
+        className="text-middle spacer-right"
+      >
+        my_account.set_notifications_for
+        :
+      </span>
+      <AsyncSelect
+        autoload={false}
+        cache={false}
+        loadOptions={[Function]}
+        minimumInput={2}
+        name="new_project"
+        onChange={[Function]}
+        optionRenderer={[Function]}
+        placeholder="my_account.search_project"
+        style={
+          Object {
+            "width": "300px",
+          }
+        }
+      />
+    </div>
   </div>
 </section>
 `;
 
 exports[`should render projects 2`] = `
-<section>
-  <h2
-    className="spacer-bottom"
-  >
+<section
+  className="boxed-group"
+>
+  <h2>
     my_profile.per_project_notifications.title
   </h2>
-  <Connect(ProjectNotifications)
-    key="foo"
-    project={
-      Object {
-        "key": "foo",
-        "name": "Foo",
-      }
-    }
-  />
-  <Connect(ProjectNotifications)
-    key="bar"
-    project={
-      Object {
-        "key": "bar",
-        "name": "Bar",
-      }
-    }
-  />
-  <Connect(ProjectNotifications)
-    key="qux"
-    project={
-      Object {
-        "key": "qux",
-        "name": "Qux",
-      }
-    }
-  />
   <div
-    className="spacer-top panel bg-muted"
+    className="boxed-group-inner"
   >
-    <span
-      className="text-middle spacer-right"
-    >
-      my_account.set_notifications_for
-      :
-    </span>
-    <AsyncSelect
-      autoload={false}
-      cache={false}
-      loadOptions={[Function]}
-      minimumInput={2}
-      name="new_project"
-      onChange={[Function]}
-      optionRenderer={[Function]}
-      placeholder="my_account.search_project"
-      style={
+    <Connect(ProjectNotifications)
+      key="foo"
+      project={
+        Object {
+          "key": "foo",
+          "name": "Foo",
+        }
+      }
+    />
+    <Connect(ProjectNotifications)
+      key="bar"
+      project={
+        Object {
+          "key": "bar",
+          "name": "Bar",
+        }
+      }
+    />
+    <Connect(ProjectNotifications)
+      key="qux"
+      project={
         Object {
-          "width": "300px",
+          "key": "qux",
+          "name": "Qux",
         }
       }
     />
+    <div
+      className="spacer-top panel bg-muted"
+    >
+      <span
+        className="text-middle spacer-right"
+      >
+        my_account.set_notifications_for
+        :
+      </span>
+      <AsyncSelect
+        autoload={false}
+        cache={false}
+        loadOptions={[Function]}
+        minimumInput={2}
+        name="new_project"
+        onChange={[Function]}
+        optionRenderer={[Function]}
+        placeholder="my_account.search_project"
+        style={
+          Object {
+            "width": "300px",
+          }
+        }
+      />
+    </div>
   </div>
 </section>
 `;
 
 exports[`should render projects 3`] = `
-<section>
-  <h2
-    className="spacer-bottom"
-  >
+<section
+  className="boxed-group"
+>
+  <h2>
     my_profile.per_project_notifications.title
   </h2>
-  <Connect(ProjectNotifications)
-    key="foo"
-    project={
-      Object {
-        "key": "foo",
-        "name": "Foo",
-      }
-    }
-  />
-  <Connect(ProjectNotifications)
-    key="bar"
-    project={
-      Object {
-        "key": "bar",
-        "name": "Bar",
-      }
-    }
-  />
-  <Connect(ProjectNotifications)
-    key="qux"
-    project={
-      Object {
-        "key": "qux",
-        "name": "Qux",
-      }
-    }
-  />
   <div
-    className="spacer-top panel bg-muted"
+    className="boxed-group-inner"
   >
-    <span
-      className="text-middle spacer-right"
-    >
-      my_account.set_notifications_for
-      :
-    </span>
-    <AsyncSelect
-      autoload={false}
-      cache={false}
-      loadOptions={[Function]}
-      minimumInput={2}
-      name="new_project"
-      onChange={[Function]}
-      optionRenderer={[Function]}
-      placeholder="my_account.search_project"
-      style={
+    <Connect(ProjectNotifications)
+      key="foo"
+      project={
         Object {
-          "width": "300px",
+          "key": "foo",
+          "name": "Foo",
         }
       }
     />
+    <Connect(ProjectNotifications)
+      key="bar"
+      project={
+        Object {
+          "key": "bar",
+          "name": "Bar",
+        }
+      }
+    />
+    <Connect(ProjectNotifications)
+      key="qux"
+      project={
+        Object {
+          "key": "qux",
+          "name": "Qux",
+        }
+      }
+    />
+    <div
+      className="spacer-top panel bg-muted"
+    >
+      <span
+        className="text-middle spacer-right"
+      >
+        my_account.set_notifications_for
+        :
+      </span>
+      <AsyncSelect
+        autoload={false}
+        cache={false}
+        loadOptions={[Function]}
+        minimumInput={2}
+        name="new_project"
+        onChange={[Function]}
+        optionRenderer={[Function]}
+        placeholder="my_account.search_project"
+        style={
+          Object {
+            "width": "300px",
+          }
+        }
+      />
+    </div>
   </div>
 </section>
 `;
diff --git a/server/sonar-web/src/main/js/apps/account/organizations/OrganizationsList.tsx b/server/sonar-web/src/main/js/apps/account/organizations/OrganizationsList.tsx
index 5b0b8ccc367..42273f32553 100644
--- a/server/sonar-web/src/main/js/apps/account/organizations/OrganizationsList.tsx
+++ b/server/sonar-web/src/main/js/apps/account/organizations/OrganizationsList.tsx
@@ -21,12 +21,17 @@ import * as React from 'react';
 import { sortBy } from 'lodash';
 import OrganizationCard from './OrganizationCard';
 import { Organization } from '../../../app/types';
+import { translate } from '../../../helpers/l10n';
 
 interface Props {
   organizations: Organization[];
 }
 
 export default function OrganizationsList({ organizations }: Props) {
+  if (organizations.length === 0) {
+    return <div>{translate('my_account.organizations.no_results')}</div>;
+  }
+
   return (
     <ul className="account-projects-list">
       {sortBy(organizations, organization => organization.name.toLocaleLowerCase()).map(
diff --git a/server/sonar-web/src/main/js/apps/account/organizations/UserOrganizations.tsx b/server/sonar-web/src/main/js/apps/account/organizations/UserOrganizations.tsx
index e6f34fbd8e2..d63555b1574 100644
--- a/server/sonar-web/src/main/js/apps/account/organizations/UserOrganizations.tsx
+++ b/server/sonar-web/src/main/js/apps/account/organizations/UserOrganizations.tsx
@@ -87,29 +87,22 @@ class UserOrganizations extends React.PureComponent<Props, State> {
       <div className="account-body account-container">
         <Helmet title={translate('my_account.organizations')} />
 
-        <header className="page-header">
-          <h2 className="page-title">{translate('my_account.organizations')}</h2>
+        <div className="boxed-group">
           {canCreateOrganizations && (
-            <div className="page-actions">
-              <button onClick={this.handleCreateClick}>{translate('create')}</button>
+            <div className="clearfix">
+              <div className="boxed-group-actions">
+                <button onClick={this.handleCreateClick}>{translate('create')}</button>
+              </div>
             </div>
           )}
-          {this.props.organizations.length > 0 ? (
-            <div className="page-description">
-              {translate('my_account.organizations.description')}
-            </div>
-          ) : (
-            <div className="page-description">
-              {translate('my_account.organizations.no_results')}
-            </div>
-          )}
-        </header>
-
-        {this.state.loading ? (
-          <i className="spinner" />
-        ) : (
-          <OrganizationsList organizations={this.props.organizations} />
-        )}
+          <div className="boxed-group-inner">
+            {this.state.loading ? (
+              <i className="spinner" />
+            ) : (
+              <OrganizationsList organizations={this.props.organizations} />
+            )}
+          </div>
+        </div>
 
         {this.state.createOrganization && (
           <CreateOrganizationForm
diff --git a/server/sonar-web/src/main/js/apps/account/profile/Profile.js b/server/sonar-web/src/main/js/apps/account/profile/Profile.js
index 4996bfcd124..464f549d5bd 100644
--- a/server/sonar-web/src/main/js/apps/account/profile/Profile.js
+++ b/server/sonar-web/src/main/js/apps/account/profile/Profile.js
@@ -45,29 +45,31 @@ function Profile(props /*: Props */) {
 
   return (
     <div className="account-body account-container">
-      <div className="spacer-bottom">
-        {translate('login')}: <strong id="login">{user.login}</strong>
-      </div>
+      <div className="boxed-group boxed-group-inner">
+        <div className="spacer-bottom">
+          {translate('login')}: <strong id="login">{user.login}</strong>
+        </div>
+
+        {!user.local &&
+          user.externalProvider !== 'sonarqube' && (
+            <div id="identity-provider" className="spacer-bottom">
+              <UserExternalIdentity user={user} />
+            </div>
+          )}
 
-      {!user.local &&
-        user.externalProvider !== 'sonarqube' && (
-          <div id="identity-provider" className="spacer-bottom">
-            <UserExternalIdentity user={user} />
+        {!!user.email && (
+          <div className="spacer-bottom">
+            {translate('my_profile.email')}: <strong id="email">{user.email}</strong>
           </div>
         )}
 
-      {!!user.email && (
-        <div className="spacer-bottom">
-          {translate('my_profile.email')}: <strong id="email">{user.email}</strong>
-        </div>
-      )}
+        {!customOrganizations && <hr className="account-separator" />}
+        {!customOrganizations && <UserGroups groups={user.groups} />}
 
-      {!customOrganizations && <hr className="account-separator" />}
-      {!customOrganizations && <UserGroups groups={user.groups} />}
+        <hr />
 
-      <hr className="account-separator" />
-
-      <UserScmAccounts user={user} scmAccounts={user.scmAccounts} />
+        <UserScmAccounts user={user} scmAccounts={user.scmAccounts} />
+      </div>
     </div>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/account/templates/account-tokens.hbs b/server/sonar-web/src/main/js/apps/account/templates/account-tokens.hbs
index 2c8da3e0297..65bbf91e160 100644
--- a/server/sonar-web/src/main/js/apps/account/templates/account-tokens.hbs
+++ b/server/sonar-web/src/main/js/apps/account/templates/account-tokens.hbs
@@ -1,77 +1,81 @@
-<h2 class="spacer-bottom">{{t 'users.tokens'}}</h2>
+<div class="boxed-group">
+  <h2>{{t 'users.tokens'}}</h2>
 
-<div class="big-spacer-bottom big-spacer-right markdown">
-  <p>{{t 'my_account.tokens_description'}}</p>
-</div>
+<div class="boxed-group-inner">
+  <div class="big-spacer-bottom big-spacer-right markdown">
+    <p>{{t 'my_account.tokens_description'}}</p>
+  </div>
 
-{{#notNull tokens}}
-  <table class="data">
-    <thead>
-    <tr>
-      <th>{{t 'name'}}</th>
-      <th class="text-right">{{t 'created'}}</th>
-      <th>&nbsp;</th>
-    </tr>
-    </thead>
-    <tbody>
-    {{#each tokens}}
-      <tr>
-        <td>
-          <div title="{{name}}">
-            {{limitString name}}
-          </div>
-        </td>
-        <td class="thin nowrap text-right">
-          {{d createdAt}}
-        </td>
-        <td class="thin nowrap text-right">
-          <div class="big-spacer-left">
-            <form class="js-revoke-token-form" data-token="{{name}}">
-              {{#if deleting}}
-                <button class="button-red active input-small">{{t 'users.tokens.sure'}}</button>
-              {{else}}
-                <button class="button-red input-small">{{t 'users.tokens.revoke'}}</button>
-              {{/if}}
-            </form>
-          </div>
-        </td>
-      </tr>
-    {{else}}
+  {{#notNull tokens}}
+    <table class="data">
+      <thead>
       <tr>
-        <td colspan="3">
-          <span class="note">{{t 'users.no_tokens'}}</span>
-        </td>
+        <th>{{t 'name'}}</th>
+        <th class="text-right">{{t 'created'}}</th>
+        <th>&nbsp;</th>
       </tr>
-    {{/each}}
-    </tbody>
-  </table>
-{{/notNull}}
+      </thead>
+      <tbody>
+      {{#each tokens}}
+        <tr>
+          <td>
+            <div title="{{name}}">
+              {{limitString name}}
+            </div>
+          </td>
+          <td class="thin nowrap text-right">
+            {{d createdAt}}
+          </td>
+          <td class="thin nowrap text-right">
+            <div class="big-spacer-left">
+              <form class="js-revoke-token-form" data-token="{{name}}">
+                {{#if deleting}}
+                  <button class="button-red active input-small">{{t 'users.tokens.sure'}}</button>
+                {{else}}
+                  <button class="button-red input-small">{{t 'users.tokens.revoke'}}</button>
+                {{/if}}
+              </form>
+            </div>
+          </td>
+        </tr>
+      {{else}}
+        <tr>
+          <td colspan="3">
+            <span class="note">{{t 'users.no_tokens'}}</span>
+          </td>
+        </tr>
+      {{/each}}
+      </tbody>
+    </table>
+  {{/notNull}}
 
-{{#each errors}}
-  <div class="alert alert-danger">{{msg}}</div>
-{{/each}}
+  {{#each errors}}
+    <div class="alert alert-danger">{{msg}}</div>
+  {{/each}}
 
-<form class="js-generate-token-form spacer-top panel bg-muted">
-  <label>{{t 'users.generate_new_token'}}:</label>
-  <input type="text" required maxlength="100" placeholder="{{t 'users.enter_token_name'}}">
-  <button>{{t 'users.generate'}}</button>
-</form>
+  <form class="js-generate-token-form spacer-top panel bg-muted">
+    <label>{{t 'users.generate_new_token'}}:</label>
+    <input type="text" required maxlength="100" placeholder="{{t 'users.enter_token_name'}}">
+    <button>{{t 'users.generate'}}</button>
+  </form>
 
-{{#if newToken}}
-  <div class="panel panel-white big-spacer-top">
-    <div class="alert alert-warning">
-      {{tp 'users.tokens.new_token_created' newToken.name}}
-    </div>
+  {{#if newToken}}
+    <div class="panel panel-white big-spacer-top">
+      <div class="alert alert-warning">
+        {{tp 'users.tokens.new_token_created' newToken.name}}
+      </div>
 
-    <table class="data">
-      <tr>
-        <td class="thin">
-          <button class="js-copy-to-clipboard" data-clipboard-text="{{newToken.token}}">{{t 'copy'}}</button>
-        </td>
-        <td class="nowrap">
-          <div class="monospaced text-success">{{newToken.token}}</div>
-        </td>
-      </tr>
-    </table>
-  </div>
-{{/if}}
+      <table class="data">
+        <tr>
+          <td class="thin">
+            <button class="js-copy-to-clipboard" data-clipboard-text="{{newToken.token}}">{{t 'copy'}}</button>
+          </td>
+          <td class="nowrap">
+            <div class="monospaced text-success">{{newToken.token}}</div>
+          </td>
+        </tr>
+      </table>
+    </div>
+  {{/if}}
+</div>
+</div>
diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/Tasks.js b/server/sonar-web/src/main/js/apps/background-tasks/components/Tasks.js
index 0f0f843a1f5..56f9d0508db 100644
--- a/server/sonar-web/src/main/js/apps/background-tasks/components/Tasks.js
+++ b/server/sonar-web/src/main/js/apps/background-tasks/components/Tasks.js
@@ -49,34 +49,36 @@ export default class Tasks extends React.PureComponent {
     });
 
     return (
-      <table className={className}>
-        <thead>
-          <tr>
-            <th>{translate('background_tasks.table.status')}</th>
-            <th>{translate('background_tasks.table.task')}</th>
-            <th>{translate('background_tasks.table.id')}</th>
-            <th>&nbsp;</th>
-            <th className="text-right">{translate('background_tasks.table.submitted')}</th>
-            <th className="text-right">{translate('background_tasks.table.started')}</th>
-            <th className="text-right">{translate('background_tasks.table.finished')}</th>
-            <th className="text-right">{translate('background_tasks.table.duration')}</th>
-            <th>&nbsp;</th>
-          </tr>
-        </thead>
-        <tbody>
-          {tasks.map((task, index, tasks) => (
-            <Task
-              key={task.id}
-              task={task}
-              tasks={tasks}
-              component={component}
-              onCancelTask={onCancelTask}
-              onFilterTask={onFilterTask}
-              previousTask={index > 0 ? tasks[index - 1] : undefined}
-            />
-          ))}
-        </tbody>
-      </table>
+      <div className="boxed-group boxed-group-inner">
+        <table className={className}>
+          <thead>
+            <tr>
+              <th>{translate('background_tasks.table.status')}</th>
+              <th>{translate('background_tasks.table.task')}</th>
+              <th>{translate('background_tasks.table.id')}</th>
+              <th>&nbsp;</th>
+              <th className="text-right">{translate('background_tasks.table.submitted')}</th>
+              <th className="text-right">{translate('background_tasks.table.started')}</th>
+              <th className="text-right">{translate('background_tasks.table.finished')}</th>
+              <th className="text-right">{translate('background_tasks.table.duration')}</th>
+              <th>&nbsp;</th>
+            </tr>
+          </thead>
+          <tbody>
+            {tasks.map((task, index, tasks) => (
+              <Task
+                key={task.id}
+                task={task}
+                tasks={tasks}
+                component={component}
+                onCancelTask={onCancelTask}
+                onFilterTask={onFilterTask}
+                previousTask={index > 0 ? tasks[index - 1] : undefined}
+              />
+            ))}
+          </tbody>
+        </table>
+      </div>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/apps/code/components/App.tsx b/server/sonar-web/src/main/js/apps/code/components/App.tsx
index 77110f20481..0a5f41af961 100644
--- a/server/sonar-web/src/main/js/apps/code/components/App.tsx
+++ b/server/sonar-web/src/main/js/apps/code/components/App.tsx
@@ -200,7 +200,9 @@ export default class App extends React.PureComponent<Props, State> {
 
     const shouldShowBreadcrumbs = breadcrumbs.length > 1;
 
-    const componentsClassName = classNames('spacer-top', { 'new-loading': loading });
+    const componentsClassName = classNames('boxed-group', 'boxed-group-inner', 'spacer-top', {
+      'new-loading': loading
+    });
 
     return (
       <div className="page page-limited">
diff --git a/server/sonar-web/src/main/js/apps/code/components/Search.tsx b/server/sonar-web/src/main/js/apps/code/components/Search.tsx
index 14539241c9a..fba3a124f5d 100644
--- a/server/sonar-web/src/main/js/apps/code/components/Search.tsx
+++ b/server/sonar-web/src/main/js/apps/code/components/Search.tsx
@@ -182,12 +182,14 @@ export default class Search extends React.PureComponent<Props, State> {
         {loading && <i className="spinner spacer-left" />}
 
         {results != null && (
-          <Components
-            branch={this.props.branch}
-            components={results}
-            rootComponent={component}
-            selected={selected}
-          />
+          <div className="boxed-group boxed-group-inner spacer-top">
+            <Components
+              branch={this.props.branch}
+              components={results}
+              rootComponent={component}
+              selected={selected}
+            />
+          </div>
         )}
       </div>
     );
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/CodingRulesAppContainer.js b/server/sonar-web/src/main/js/apps/coding-rules/components/CodingRulesAppContainer.js
index 7b8eb343c90..1c578244c01 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/CodingRulesAppContainer.js
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/CodingRulesAppContainer.js
@@ -44,6 +44,9 @@ class CodingRulesAppContainer extends React.PureComponent {
 */
 
   componentDidMount() {
+    // $FlowFixMe
+    document.body.classList.add('white-page');
+
     if (this.props.appState.organizationsEnabled && !this.props.params.organizationKey) {
       // redirect to organization-level rules page
       this.props.router.replace(
@@ -62,6 +65,9 @@ class CodingRulesAppContainer extends React.PureComponent {
   }
 
   componentWillUnmount() {
+    // $FlowFixMe
+    document.body.classList.remove('white-page');
+
     if (this.stop) {
       this.stop();
     }
diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/App.js b/server/sonar-web/src/main/js/apps/component-measures/components/App.js
index 84bd294f9e9..7611ea8b4c8 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/App.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/App.js
@@ -74,6 +74,8 @@ export default class App extends React.PureComponent {
 
   componentDidMount() {
     this.mounted = true;
+    // $FlowFixMe
+    document.body.classList.add('white-page');
     this.props.fetchMetrics();
     this.fetchMeasures(this.props);
     key.setScope('measures-files');
@@ -95,6 +97,8 @@ export default class App extends React.PureComponent {
 
   componentWillUnmount() {
     this.mounted = false;
+    // $FlowFixMe
+    document.body.classList.remove('white-page');
     key.deleteScope('measures-files');
     const footer = document.getElementById('footer');
     if (footer) {
diff --git a/server/sonar-web/src/main/js/apps/custom-measures/templates/custom-measures-list.hbs b/server/sonar-web/src/main/js/apps/custom-measures/templates/custom-measures-list.hbs
index 20ca1491fa3..97c513248eb 100644
--- a/server/sonar-web/src/main/js/apps/custom-measures/templates/custom-measures-list.hbs
+++ b/server/sonar-web/src/main/js/apps/custom-measures/templates/custom-measures-list.hbs
@@ -1,12 +1,14 @@
-<table class="data zebra">
-  <thead>
-  <tr>
-    <th>{{t 'custom_measures.metric'}}</th>
-    <th>{{t 'value'}}</th>
-    <th>{{t 'description'}}</th>
-    <th>{{t 'date'}}</th>
-    <th>&nbsp;</th>
-  </tr>
-  </thead>
-  <tbody></tbody>
-</table>
+<div class="boxed-group boxed-group-inner">
+  <table class="data zebra">
+    <thead>
+    <tr>
+      <th>{{t 'custom_measures.metric'}}</th>
+      <th>{{t 'value'}}</th>
+      <th>{{t 'description'}}</th>
+      <th>{{t 'date'}}</th>
+      <th>&nbsp;</th>
+    </tr>
+    </thead>
+    <tbody></tbody>
+  </table>
+</div>
diff --git a/server/sonar-web/src/main/js/apps/groups/templates/groups-list.hbs b/server/sonar-web/src/main/js/apps/groups/templates/groups-list.hbs
index b96143e7caa..ac23f3c1f65 100644
--- a/server/sonar-web/src/main/js/apps/groups/templates/groups-list.hbs
+++ b/server/sonar-web/src/main/js/apps/groups/templates/groups-list.hbs
@@ -1,4 +1,4 @@
-<div>
+<div class="boxed-group boxed-group-inner">
   {{#isNull organization}}
     <div class="panel panel-vertical js-anyone">
       <div class="display-inline-block text-top width-20">
diff --git a/server/sonar-web/src/main/js/apps/groups/templates/groups-search.hbs b/server/sonar-web/src/main/js/apps/groups/templates/groups-search.hbs
index e0d8614362f..ecf034da48e 100644
--- a/server/sonar-web/src/main/js/apps/groups/templates/groups-search.hbs
+++ b/server/sonar-web/src/main/js/apps/groups/templates/groups-search.hbs
@@ -1,4 +1,4 @@
-<div class="panel panel-vertical bordered-bottom spacer-bottom">
+<div class="big-spacer-bottom">
   <form id="groups-search-form" class="search-box">
     <input id="groups-search-query" class="search-box-input" type="text" name="q" placeholder="{{t 'search.search_by_name'}}" maxlength="100">
     <svg class="search-box-magnifier" width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
diff --git a/server/sonar-web/src/main/js/apps/issues/components/App.js b/server/sonar-web/src/main/js/apps/issues/components/App.js
index cc68fbb41c9..c13b7a9b0ff 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/App.js
+++ b/server/sonar-web/src/main/js/apps/issues/components/App.js
@@ -151,6 +151,9 @@ export default class App extends React.PureComponent {
       return;
     }
 
+    // $FlowFixMe
+    document.body.classList.add('white-page');
+
     const footer = document.getElementById('footer');
     if (footer) {
       footer.classList.add('page-footer-with-sidebar');
@@ -206,6 +209,9 @@ export default class App extends React.PureComponent {
   componentWillUnmount() {
     this.detachShortcuts();
 
+    // $FlowFixMe
+    document.body.classList.remove('white-page');
+
     const footer = document.getElementById('footer');
     if (footer) {
       footer.classList.remove('page-footer-with-sidebar');
diff --git a/server/sonar-web/src/main/js/apps/issues/components/PageActions.js b/server/sonar-web/src/main/js/apps/issues/components/PageActions.js
index 2aaca8517e8..b800d271f3f 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/PageActions.js
+++ b/server/sonar-web/src/main/js/apps/issues/components/PageActions.js
@@ -22,6 +22,7 @@ import React from 'react';
 import IssuesCounter from './IssuesCounter';
 import ReloadButton from './ReloadButton';
 /*:: import type { Paging } from '../utils'; */
+import { HomePageType } from '../../../app/types';
 import DeferredSpinner from '../../../components/common/DeferredSpinner';
 import HomePageSelect from '../../../components/controls/HomePageSelect';
 import { translate } from '../../../helpers/l10n';
@@ -74,7 +75,10 @@ export default class PageActions extends React.PureComponent {
         </div>
 
         {this.props.canSetHome && (
-          <HomePageSelect className="huge-spacer-left" currentPage={{ type: 'my-issues' }} />
+          <HomePageSelect
+            className="huge-spacer-left"
+            currentPage={{ type: HomePageType.MyIssues }}
+          />
         )}
       </div>
     );
diff --git a/server/sonar-web/src/main/js/apps/marketplace/PluginsList.tsx b/server/sonar-web/src/main/js/apps/marketplace/PluginsList.tsx
index 48924aba04e..c41ac4bf516 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/PluginsList.tsx
+++ b/server/sonar-web/src/main/js/apps/marketplace/PluginsList.tsx
@@ -79,7 +79,7 @@ export default class PluginsList extends React.PureComponent<Props> {
 
   render() {
     return (
-      <div id="marketplace-plugins">
+      <div className="boxed-group boxed-group-inner" id="marketplace-plugins">
         <ul>
           {this.props.plugins.map(plugin => (
             <li key={plugin.key} className="panel panel-vertical">
diff --git a/server/sonar-web/src/main/js/apps/marketplace/Search.tsx b/server/sonar-web/src/main/js/apps/marketplace/Search.tsx
index 1eaef17728e..c114ebb6643 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/Search.tsx
+++ b/server/sonar-web/src/main/js/apps/marketplace/Search.tsx
@@ -48,7 +48,7 @@ export default class Search extends React.PureComponent<Props> {
       }
     ];
     return (
-      <div id="marketplace-search" className="panel panel-vertical bordered-bottom spacer-bottom">
+      <div id="marketplace-search" className="big-spacer-bottom">
         <div className="display-inline-block text-top nowrap abs-width-150 spacer-right">
           <RadioToggle
             name="marketplace-filter"
diff --git a/server/sonar-web/src/main/js/apps/marketplace/style.css b/server/sonar-web/src/main/js/apps/marketplace/style.css
index b435f1c3367..35aee754fed 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/style.css
+++ b/server/sonar-web/src/main/js/apps/marketplace/style.css
@@ -12,7 +12,6 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  background-color: #f3f3f3;
   margin-left: 8px;
   margin-right: 8px;
 }
diff --git a/server/sonar-web/src/main/js/apps/metrics/templates/metrics-layout.hbs b/server/sonar-web/src/main/js/apps/metrics/templates/metrics-layout.hbs
index 9aeeeede6b3..179ee3ed067 100644
--- a/server/sonar-web/src/main/js/apps/metrics/templates/metrics-layout.hbs
+++ b/server/sonar-web/src/main/js/apps/metrics/templates/metrics-layout.hbs
@@ -1,5 +1,5 @@
 <div class="page page-limited">
   <div id="metrics-header"></div>
-  <div id="metrics-list"></div>
+  <div id="metrics-list" class="boxed-group boxed-group-inner"></div>
   <div id="metrics-list-footer"></div>
 </div>
diff --git a/server/sonar-web/src/main/js/apps/organizations/components/MembersList.js b/server/sonar-web/src/main/js/apps/organizations/components/MembersList.js
index c40344c98bd..af7bf261a15 100644
--- a/server/sonar-web/src/main/js/apps/organizations/components/MembersList.js
+++ b/server/sonar-web/src/main/js/apps/organizations/components/MembersList.js
@@ -38,20 +38,22 @@ export default class MembersList extends React.PureComponent {
 
   render() {
     return (
-      <table className="data zebra">
-        <tbody>
-          {this.props.members.map(member => (
-            <MembersListItem
-              key={member.login}
-              member={member}
-              organizationGroups={this.props.organizationGroups}
-              organization={this.props.organization}
-              removeMember={this.props.removeMember}
-              updateMemberGroups={this.props.updateMemberGroups}
-            />
-          ))}
-        </tbody>
-      </table>
+      <div className="boxed-group boxed-group-inner">
+        <table className="data zebra">
+          <tbody>
+            {this.props.members.map(member => (
+              <MembersListItem
+                key={member.login}
+                member={member}
+                organizationGroups={this.props.organizationGroups}
+                organization={this.props.organization}
+                removeMember={this.props.removeMember}
+                updateMemberGroups={this.props.updateMemberGroups}
+              />
+            ))}
+          </tbody>
+        </table>
+      </div>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/apps/organizations/components/OrganizationEdit.js b/server/sonar-web/src/main/js/apps/organizations/components/OrganizationEdit.js
index 5f7a3c867ef..92ceb30e062 100644
--- a/server/sonar-web/src/main/js/apps/organizations/components/OrganizationEdit.js
+++ b/server/sonar-web/src/main/js/apps/organizations/components/OrganizationEdit.js
@@ -107,87 +107,89 @@ class OrganizationEdit extends React.PureComponent {
           <h1 className="page-title">{title}</h1>
         </header>
 
-        <form onSubmit={this.handleSubmit}>
-          <div className="modal-field">
-            <label htmlFor="organization-name">
-              {translate('organization.name')}
-              <em className="mandatory">*</em>
-            </label>
-            <input
-              id="organization-name"
-              name="name"
-              required={true}
-              type="text"
-              maxLength="64"
-              value={this.state.name}
-              disabled={this.state.loading}
-              onChange={e => this.setState({ name: e.target.value })}
-            />
-            <div className="modal-field-description">
-              {translate('organization.name.description')}
-            </div>
-          </div>
-          <div className="modal-field">
-            <label htmlFor="organization-avatar">{translate('organization.avatar')}</label>
-            <input
-              id="organization-avatar"
-              name="avatar"
-              type="text"
-              maxLength="256"
-              value={this.state.avatar}
-              disabled={this.state.loading}
-              onChange={this.handleAvatarInputChange}
-            />
-            <div className="modal-field-description">
-              {translate('organization.avatar.description')}
+        <div className="boxed-group boxed-group-inner">
+          <form onSubmit={this.handleSubmit}>
+            <div className="modal-field">
+              <label htmlFor="organization-name">
+                {translate('organization.name')}
+                <em className="mandatory">*</em>
+              </label>
+              <input
+                id="organization-name"
+                name="name"
+                required={true}
+                type="text"
+                maxLength="64"
+                value={this.state.name}
+                disabled={this.state.loading}
+                onChange={e => this.setState({ name: e.target.value })}
+              />
+              <div className="modal-field-description">
+                {translate('organization.name.description')}
+              </div>
             </div>
-            {!!this.state.avatarImage && (
-              <div className="spacer-top spacer-bottom">
-                <div className="little-spacer-bottom">
-                  {translate('organization.avatar.preview')}
-                  {':'}
+            <div className="modal-field">
+              <label htmlFor="organization-avatar">{translate('organization.avatar')}</label>
+              <input
+                id="organization-avatar"
+                name="avatar"
+                type="text"
+                maxLength="256"
+                value={this.state.avatar}
+                disabled={this.state.loading}
+                onChange={this.handleAvatarInputChange}
+              />
+              <div className="modal-field-description">
+                {translate('organization.avatar.description')}
+              </div>
+              {!!this.state.avatarImage && (
+                <div className="spacer-top spacer-bottom">
+                  <div className="little-spacer-bottom">
+                    {translate('organization.avatar.preview')}
+                    {':'}
+                  </div>
+                  <img src={this.state.avatarImage} alt="" height={30} />
                 </div>
-                <img src={this.state.avatarImage} alt="" height={30} />
+              )}
+            </div>
+            <div className="modal-field">
+              <label htmlFor="organization-description">{translate('description')}</label>
+              <textarea
+                id="organization-description"
+                name="description"
+                rows="3"
+                maxLength="256"
+                value={this.state.description}
+                disabled={this.state.loading}
+                onChange={e => this.setState({ description: e.target.value })}
+              />
+              <div className="modal-field-description">
+                {translate('organization.description.description')}
+              </div>
+            </div>
+            <div className="modal-field">
+              <label htmlFor="organization-url">{translate('organization.url')}</label>
+              <input
+                id="organization-url"
+                name="url"
+                type="text"
+                maxLength="256"
+                value={this.state.url}
+                disabled={this.state.loading}
+                onChange={e => this.setState({ url: e.target.value })}
+              />
+              <div className="modal-field-description">
+                {translate('organization.url.description')}
               </div>
-            )}
-          </div>
-          <div className="modal-field">
-            <label htmlFor="organization-description">{translate('description')}</label>
-            <textarea
-              id="organization-description"
-              name="description"
-              rows="3"
-              maxLength="256"
-              value={this.state.description}
-              disabled={this.state.loading}
-              onChange={e => this.setState({ description: e.target.value })}
-            />
-            <div className="modal-field-description">
-              {translate('organization.description.description')}
             </div>
-          </div>
-          <div className="modal-field">
-            <label htmlFor="organization-url">{translate('organization.url')}</label>
-            <input
-              id="organization-url"
-              name="url"
-              type="text"
-              maxLength="256"
-              value={this.state.url}
-              disabled={this.state.loading}
-              onChange={e => this.setState({ url: e.target.value })}
-            />
-            <div className="modal-field-description">
-              {translate('organization.url.description')}
+            <div className="modal-field">
+              <button type="submit" disabled={this.state.loading}>
+                {translate('save')}
+              </button>
+              {this.state.loading && <i className="spinner spacer-left" />}
             </div>
-          </div>
-          <div className="modal-field">
-            <button type="submit" disabled={this.state.loading}>
-              {translate('save')}
-            </button>
-            {this.state.loading && <i className="spinner spacer-left" />}
-          </div>
-        </form>
+          </form>
+        </div>
       </div>
     );
   }
diff --git a/server/sonar-web/src/main/js/apps/organizations/components/__tests__/__snapshots__/MembersList-test.js.snap b/server/sonar-web/src/main/js/apps/organizations/components/__tests__/__snapshots__/MembersList-test.js.snap
index 4bc29637672..fc8f227d95e 100644
--- a/server/sonar-web/src/main/js/apps/organizations/components/__tests__/__snapshots__/MembersList-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/organizations/components/__tests__/__snapshots__/MembersList-test.js.snap
@@ -1,44 +1,48 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render a list of members of an organization 1`] = `
-<table
-  className="data zebra"
+<div
+  className="boxed-group boxed-group-inner"
 >
-  <tbody>
-    <MembersListItem
-      key="admin"
-      member={
-        Object {
-          "avatar": "",
-          "groupCount": 3,
-          "login": "admin",
-          "name": "Admin Istrator",
+  <table
+    className="data zebra"
+  >
+    <tbody>
+      <MembersListItem
+        key="admin"
+        member={
+          Object {
+            "avatar": "",
+            "groupCount": 3,
+            "login": "admin",
+            "name": "Admin Istrator",
+          }
         }
-      }
-      organization={
-        Object {
-          "key": "foo",
-          "name": "Foo",
+        organization={
+          Object {
+            "key": "foo",
+            "name": "Foo",
+          }
         }
-      }
-    />
-    <MembersListItem
-      key="john"
-      member={
-        Object {
-          "avatar": "7daf6c79d4802916d83f6266e24850af",
-          "groupCount": 1,
-          "login": "john",
-          "name": "John Doe",
+      />
+      <MembersListItem
+        key="john"
+        member={
+          Object {
+            "avatar": "7daf6c79d4802916d83f6266e24850af",
+            "groupCount": 1,
+            "login": "john",
+            "name": "John Doe",
+          }
         }
-      }
-      organization={
-        Object {
-          "key": "foo",
-          "name": "Foo",
+        organization={
+          Object {
+            "key": "foo",
+            "name": "Foo",
+          }
         }
-      }
-    />
-  </tbody>
-</table>
+      />
+    </tbody>
+  </table>
+</div>
 `;
diff --git a/server/sonar-web/src/main/js/apps/organizations/components/__tests__/__snapshots__/OrganizationEdit-test.js.snap b/server/sonar-web/src/main/js/apps/organizations/components/__tests__/__snapshots__/OrganizationEdit-test.js.snap
index 9dc712473f2..9c18fd59ac8 100644
--- a/server/sonar-web/src/main/js/apps/organizations/components/__tests__/__snapshots__/OrganizationEdit-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/organizations/components/__tests__/__snapshots__/OrganizationEdit-test.js.snap
@@ -18,118 +18,122 @@ exports[`smoke test 1`] = `
       organization.edit
     </h1>
   </header>
-  <form
-    onSubmit={[Function]}
+  <div
+    className="boxed-group boxed-group-inner"
   >
-    <div
-      className="modal-field"
+    <form
+      onSubmit={[Function]}
     >
-      <label
-        htmlFor="organization-name"
+      <div
+        className="modal-field"
       >
-        organization.name
-        <em
-          className="mandatory"
+        <label
+          htmlFor="organization-name"
+        >
+          organization.name
+          <em
+            className="mandatory"
+          >
+            *
+          </em>
+        </label>
+        <input
+          disabled={false}
+          id="organization-name"
+          maxLength="64"
+          name="name"
+          onChange={[Function]}
+          required={true}
+          type="text"
+          value="Foo"
+        />
+        <div
+          className="modal-field-description"
         >
-          *
-        </em>
-      </label>
-      <input
-        disabled={false}
-        id="organization-name"
-        maxLength="64"
-        name="name"
-        onChange={[Function]}
-        required={true}
-        type="text"
-        value="Foo"
-      />
+          organization.name.description
+        </div>
+      </div>
       <div
-        className="modal-field-description"
+        className="modal-field"
       >
-        organization.name.description
+        <label
+          htmlFor="organization-avatar"
+        >
+          organization.avatar
+        </label>
+        <input
+          disabled={false}
+          id="organization-avatar"
+          maxLength="256"
+          name="avatar"
+          onChange={[Function]}
+          type="text"
+          value=""
+        />
+        <div
+          className="modal-field-description"
+        >
+          organization.avatar.description
+        </div>
       </div>
-    </div>
-    <div
-      className="modal-field"
-    >
-      <label
-        htmlFor="organization-avatar"
-      >
-        organization.avatar
-      </label>
-      <input
-        disabled={false}
-        id="organization-avatar"
-        maxLength="256"
-        name="avatar"
-        onChange={[Function]}
-        type="text"
-        value=""
-      />
       <div
-        className="modal-field-description"
+        className="modal-field"
       >
-        organization.avatar.description
+        <label
+          htmlFor="organization-description"
+        >
+          description
+        </label>
+        <textarea
+          disabled={false}
+          id="organization-description"
+          maxLength="256"
+          name="description"
+          onChange={[Function]}
+          rows="3"
+          value=""
+        />
+        <div
+          className="modal-field-description"
+        >
+          organization.description.description
+        </div>
       </div>
-    </div>
-    <div
-      className="modal-field"
-    >
-      <label
-        htmlFor="organization-description"
-      >
-        description
-      </label>
-      <textarea
-        disabled={false}
-        id="organization-description"
-        maxLength="256"
-        name="description"
-        onChange={[Function]}
-        rows="3"
-        value=""
-      />
       <div
-        className="modal-field-description"
+        className="modal-field"
       >
-        organization.description.description
+        <label
+          htmlFor="organization-url"
+        >
+          organization.url
+        </label>
+        <input
+          disabled={false}
+          id="organization-url"
+          maxLength="256"
+          name="url"
+          onChange={[Function]}
+          type="text"
+          value=""
+        />
+        <div
+          className="modal-field-description"
+        >
+          organization.url.description
+        </div>
       </div>
-    </div>
-    <div
-      className="modal-field"
-    >
-      <label
-        htmlFor="organization-url"
-      >
-        organization.url
-      </label>
-      <input
-        disabled={false}
-        id="organization-url"
-        maxLength="256"
-        name="url"
-        onChange={[Function]}
-        type="text"
-        value=""
-      />
       <div
-        className="modal-field-description"
+        className="modal-field"
       >
-        organization.url.description
+        <button
+          disabled={false}
+          type="submit"
+        >
+          save
+        </button>
       </div>
-    </div>
-    <div
-      className="modal-field"
-    >
-      <button
-        disabled={false}
-        type="submit"
-      >
-        save
-      </button>
-    </div>
-  </form>
+    </form>
+  </div>
 </div>
 `;
 
@@ -151,133 +155,137 @@ exports[`smoke test 2`] = `
       organization.edit
     </h1>
   </header>
-  <form
-    onSubmit={[Function]}
+  <div
+    className="boxed-group boxed-group-inner"
   >
-    <div
-      className="modal-field"
+    <form
+      onSubmit={[Function]}
     >
-      <label
-        htmlFor="organization-name"
-      >
-        organization.name
-        <em
-          className="mandatory"
-        >
-          *
-        </em>
-      </label>
-      <input
-        disabled={false}
-        id="organization-name"
-        maxLength="64"
-        name="name"
-        onChange={[Function]}
-        required={true}
-        type="text"
-        value="New Foo"
-      />
       <div
-        className="modal-field-description"
+        className="modal-field"
       >
-        organization.name.description
+        <label
+          htmlFor="organization-name"
+        >
+          organization.name
+          <em
+            className="mandatory"
+          >
+            *
+          </em>
+        </label>
+        <input
+          disabled={false}
+          id="organization-name"
+          maxLength="64"
+          name="name"
+          onChange={[Function]}
+          required={true}
+          type="text"
+          value="New Foo"
+        />
+        <div
+          className="modal-field-description"
+        >
+          organization.name.description
+        </div>
       </div>
-    </div>
-    <div
-      className="modal-field"
-    >
-      <label
-        htmlFor="organization-avatar"
-      >
-        organization.avatar
-      </label>
-      <input
-        disabled={false}
-        id="organization-avatar"
-        maxLength="256"
-        name="avatar"
-        onChange={[Function]}
-        type="text"
-        value="foo-avatar"
-      />
       <div
-        className="modal-field-description"
+        className="modal-field"
       >
-        organization.avatar.description
+        <label
+          htmlFor="organization-avatar"
+        >
+          organization.avatar
+        </label>
+        <input
+          disabled={false}
+          id="organization-avatar"
+          maxLength="256"
+          name="avatar"
+          onChange={[Function]}
+          type="text"
+          value="foo-avatar"
+        />
+        <div
+          className="modal-field-description"
+        >
+          organization.avatar.description
+        </div>
+        <div
+          className="spacer-top spacer-bottom"
+        >
+          <div
+            className="little-spacer-bottom"
+          >
+            organization.avatar.preview
+            :
+          </div>
+          <img
+            alt=""
+            height={30}
+            src="foo-avatar-image"
+          />
+        </div>
       </div>
       <div
-        className="spacer-top spacer-bottom"
+        className="modal-field"
       >
+        <label
+          htmlFor="organization-description"
+        >
+          description
+        </label>
+        <textarea
+          disabled={false}
+          id="organization-description"
+          maxLength="256"
+          name="description"
+          onChange={[Function]}
+          rows="3"
+          value="foo-description"
+        />
         <div
-          className="little-spacer-bottom"
+          className="modal-field-description"
         >
-          organization.avatar.preview
-          :
+          organization.description.description
         </div>
-        <img
-          alt=""
-          height={30}
-          src="foo-avatar-image"
-        />
       </div>
-    </div>
-    <div
-      className="modal-field"
-    >
-      <label
-        htmlFor="organization-description"
-      >
-        description
-      </label>
-      <textarea
-        disabled={false}
-        id="organization-description"
-        maxLength="256"
-        name="description"
-        onChange={[Function]}
-        rows="3"
-        value="foo-description"
-      />
       <div
-        className="modal-field-description"
+        className="modal-field"
       >
-        organization.description.description
+        <label
+          htmlFor="organization-url"
+        >
+          organization.url
+        </label>
+        <input
+          disabled={false}
+          id="organization-url"
+          maxLength="256"
+          name="url"
+          onChange={[Function]}
+          type="text"
+          value="foo-url"
+        />
+        <div
+          className="modal-field-description"
+        >
+          organization.url.description
+        </div>
       </div>
-    </div>
-    <div
-      className="modal-field"
-    >
-      <label
-        htmlFor="organization-url"
-      >
-        organization.url
-      </label>
-      <input
-        disabled={false}
-        id="organization-url"
-        maxLength="256"
-        name="url"
-        onChange={[Function]}
-        type="text"
-        value="foo-url"
-      />
       <div
-        className="modal-field-description"
+        className="modal-field"
       >
-        organization.url.description
+        <button
+          disabled={false}
+          type="submit"
+        >
+          save
+        </button>
       </div>
-    </div>
-    <div
-      className="modal-field"
-    >
-      <button
-        disabled={false}
-        type="submit"
-      >
-        save
-      </button>
-    </div>
-  </form>
+    </form>
+  </div>
 </div>
 `;
 
@@ -299,135 +307,139 @@ exports[`smoke test 3`] = `
       organization.edit
     </h1>
   </header>
-  <form
-    onSubmit={[Function]}
+  <div
+    className="boxed-group boxed-group-inner"
   >
-    <div
-      className="modal-field"
+    <form
+      onSubmit={[Function]}
     >
-      <label
-        htmlFor="organization-name"
-      >
-        organization.name
-        <em
-          className="mandatory"
-        >
-          *
-        </em>
-      </label>
-      <input
-        disabled={true}
-        id="organization-name"
-        maxLength="64"
-        name="name"
-        onChange={[Function]}
-        required={true}
-        type="text"
-        value="New Foo"
-      />
       <div
-        className="modal-field-description"
+        className="modal-field"
       >
-        organization.name.description
+        <label
+          htmlFor="organization-name"
+        >
+          organization.name
+          <em
+            className="mandatory"
+          >
+            *
+          </em>
+        </label>
+        <input
+          disabled={true}
+          id="organization-name"
+          maxLength="64"
+          name="name"
+          onChange={[Function]}
+          required={true}
+          type="text"
+          value="New Foo"
+        />
+        <div
+          className="modal-field-description"
+        >
+          organization.name.description
+        </div>
       </div>
-    </div>
-    <div
-      className="modal-field"
-    >
-      <label
-        htmlFor="organization-avatar"
-      >
-        organization.avatar
-      </label>
-      <input
-        disabled={true}
-        id="organization-avatar"
-        maxLength="256"
-        name="avatar"
-        onChange={[Function]}
-        type="text"
-        value="foo-avatar"
-      />
       <div
-        className="modal-field-description"
+        className="modal-field"
       >
-        organization.avatar.description
+        <label
+          htmlFor="organization-avatar"
+        >
+          organization.avatar
+        </label>
+        <input
+          disabled={true}
+          id="organization-avatar"
+          maxLength="256"
+          name="avatar"
+          onChange={[Function]}
+          type="text"
+          value="foo-avatar"
+        />
+        <div
+          className="modal-field-description"
+        >
+          organization.avatar.description
+        </div>
+        <div
+          className="spacer-top spacer-bottom"
+        >
+          <div
+            className="little-spacer-bottom"
+          >
+            organization.avatar.preview
+            :
+          </div>
+          <img
+            alt=""
+            height={30}
+            src="foo-avatar-image"
+          />
+        </div>
       </div>
       <div
-        className="spacer-top spacer-bottom"
+        className="modal-field"
       >
+        <label
+          htmlFor="organization-description"
+        >
+          description
+        </label>
+        <textarea
+          disabled={true}
+          id="organization-description"
+          maxLength="256"
+          name="description"
+          onChange={[Function]}
+          rows="3"
+          value="foo-description"
+        />
         <div
-          className="little-spacer-bottom"
+          className="modal-field-description"
         >
-          organization.avatar.preview
-          :
+          organization.description.description
         </div>
-        <img
-          alt=""
-          height={30}
-          src="foo-avatar-image"
-        />
       </div>
-    </div>
-    <div
-      className="modal-field"
-    >
-      <label
-        htmlFor="organization-description"
-      >
-        description
-      </label>
-      <textarea
-        disabled={true}
-        id="organization-description"
-        maxLength="256"
-        name="description"
-        onChange={[Function]}
-        rows="3"
-        value="foo-description"
-      />
       <div
-        className="modal-field-description"
+        className="modal-field"
       >
-        organization.description.description
+        <label
+          htmlFor="organization-url"
+        >
+          organization.url
+        </label>
+        <input
+          disabled={true}
+          id="organization-url"
+          maxLength="256"
+          name="url"
+          onChange={[Function]}
+          type="text"
+          value="foo-url"
+        />
+        <div
+          className="modal-field-description"
+        >
+          organization.url.description
+        </div>
       </div>
-    </div>
-    <div
-      className="modal-field"
-    >
-      <label
-        htmlFor="organization-url"
-      >
-        organization.url
-      </label>
-      <input
-        disabled={true}
-        id="organization-url"
-        maxLength="256"
-        name="url"
-        onChange={[Function]}
-        type="text"
-        value="foo-url"
-      />
       <div
-        className="modal-field-description"
+        className="modal-field"
       >
-        organization.url.description
+        <button
+          disabled={true}
+          type="submit"
+        >
+          save
+        </button>
+        <i
+          className="spinner spacer-left"
+        />
       </div>
-    </div>
-    <div
-      className="modal-field"
-    >
-      <button
-        disabled={true}
-        type="submit"
-      >
-        save
-      </button>
-      <i
-        className="spinner spacer-left"
-      />
-    </div>
-  </form>
+    </form>
+  </div>
 </div>
 `;
diff --git a/server/sonar-web/src/main/js/apps/organizations/navigation/OrganizationNavigationMeta.tsx b/server/sonar-web/src/main/js/apps/organizations/navigation/OrganizationNavigationMeta.tsx
index 077cc4a67ee..eb49059477f 100644
--- a/server/sonar-web/src/main/js/apps/organizations/navigation/OrganizationNavigationMeta.tsx
+++ b/server/sonar-web/src/main/js/apps/organizations/navigation/OrganizationNavigationMeta.tsx
@@ -18,15 +18,21 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import { Organization } from '../../../app/types';
+import { connect } from 'react-redux';
+import { Organization, HomePageType } from '../../../app/types';
 import HomePageSelect from '../../../components/controls/HomePageSelect';
 import { translate } from '../../../helpers/l10n';
+import { getGlobalSettingValue } from '../../../store/rootReducer';
 
-interface Props {
+interface StateProps {
+  onSonarCloud: boolean;
+}
+
+interface Props extends StateProps {
   organization: Organization;
 }
 
-export default function OrganizationNavigationMeta({ organization }: Props) {
+export function OrganizationNavigationMeta({ onSonarCloud, organization }: Props) {
   return (
     <div className="navbar-context-meta">
       {organization.url != null && (
@@ -41,9 +47,23 @@ export default function OrganizationNavigationMeta({ organization }: Props) {
       <div className="text-muted">
         <strong>{translate('organization.key')}:</strong> {organization.key}
       </div>
-      <div className="navbar-context-meta-secondary">
-        <HomePageSelect currentPage={{ type: 'organization', key: organization.key }} />
-      </div>
+      {onSonarCloud && (
+        <div className="navbar-context-meta-secondary">
+          <HomePageSelect
+            currentPage={{ type: HomePageType.Organization, parameter: organization.key }}
+          />
+        </div>
+      )}
     </div>
   );
 }
+
+const mapStateToProps = (state: any): StateProps => {
+  const sonarCloudSetting = getGlobalSettingValue(state, 'sonar.sonarcloud.enabled');
+
+  return {
+    onSonarCloud: Boolean(sonarCloudSetting && sonarCloudSetting.value === 'true')
+  };
+};
+
+export default connect(mapStateToProps)(OrganizationNavigationMeta);
diff --git a/server/sonar-web/src/main/js/apps/organizations/navigation/__tests__/OrganizationNavigationMeta-test.tsx b/server/sonar-web/src/main/js/apps/organizations/navigation/__tests__/OrganizationNavigationMeta-test.tsx
index 5b69f2c4853..ef2d8fca1dd 100644
--- a/server/sonar-web/src/main/js/apps/organizations/navigation/__tests__/OrganizationNavigationMeta-test.tsx
+++ b/server/sonar-web/src/main/js/apps/organizations/navigation/__tests__/OrganizationNavigationMeta-test.tsx
@@ -19,13 +19,14 @@
  */
 import * as React from 'react';
 import { shallow } from 'enzyme';
-import OrganizationNavigationMeta from '../OrganizationNavigationMeta';
+import { OrganizationNavigationMeta } from '../OrganizationNavigationMeta';
 import { Visibility } from '../../../../app/types';
 
 it('renders', () => {
   expect(
     shallow(
       <OrganizationNavigationMeta
+        onSonarCloud={true}
         organization={{
           key: 'foo',
           name: 'Foo',
diff --git a/server/sonar-web/src/main/js/apps/organizations/navigation/__tests__/__snapshots__/OrganizationNavigation-test.tsx.snap b/server/sonar-web/src/main/js/apps/organizations/navigation/__tests__/__snapshots__/OrganizationNavigation-test.tsx.snap
index eb04cc431fe..07512698807 100644
--- a/server/sonar-web/src/main/js/apps/organizations/navigation/__tests__/__snapshots__/OrganizationNavigation-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/organizations/navigation/__tests__/__snapshots__/OrganizationNavigation-test.tsx.snap
@@ -14,7 +14,7 @@ exports[`render 1`] = `
       }
     }
   />
-  <OrganizationNavigationMeta
+  <Connect(OrganizationNavigationMeta)
     organization={
       Object {
         "key": "foo",
diff --git a/server/sonar-web/src/main/js/apps/organizations/navigation/__tests__/__snapshots__/OrganizationNavigationMeta-test.tsx.snap b/server/sonar-web/src/main/js/apps/organizations/navigation/__tests__/__snapshots__/OrganizationNavigationMeta-test.tsx.snap
index bdd7594127b..207f8fe1faf 100644
--- a/server/sonar-web/src/main/js/apps/organizations/navigation/__tests__/__snapshots__/OrganizationNavigationMeta-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/organizations/navigation/__tests__/__snapshots__/OrganizationNavigationMeta-test.tsx.snap
@@ -20,8 +20,8 @@ exports[`renders 1`] = `
     <Connect(HomePageSelect)
       currentPage={
         Object {
-          "key": "foo",
-          "type": "organization",
+          "parameter": "foo",
+          "type": "ORGANIZATION",
         }
       }
     />
diff --git a/server/sonar-web/src/main/js/apps/overview/components/OverviewApp.js b/server/sonar-web/src/main/js/apps/overview/components/OverviewApp.js
index d5cb1b15caf..16d88755c47 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/OverviewApp.js
+++ b/server/sonar-web/src/main/js/apps/overview/components/OverviewApp.js
@@ -68,10 +68,6 @@ export default class OverviewApp extends React.PureComponent {
 
   componentDidMount() {
     this.mounted = true;
-    const domElement = document.querySelector('html');
-    if (domElement) {
-      domElement.classList.add('dashboard-page');
-    }
     this.loadMeasures().then(this.loadHistory);
   }
 
@@ -86,10 +82,6 @@ export default class OverviewApp extends React.PureComponent {
 
   componentWillUnmount() {
     this.mounted = false;
-    const domElement = document.querySelector('html');
-    if (domElement) {
-      domElement.classList.remove('dashboard-page');
-    }
   }
 
   loadMeasures() {
diff --git a/server/sonar-web/src/main/js/apps/permission-templates/components/List.js b/server/sonar-web/src/main/js/apps/permission-templates/components/List.js
index 9448e9d5797..97182a9b41c 100644
--- a/server/sonar-web/src/main/js/apps/permission-templates/components/List.js
+++ b/server/sonar-web/src/main/js/apps/permission-templates/components/List.js
@@ -44,10 +44,12 @@ export default class List extends React.PureComponent {
     ));
 
     return (
-      <table id="permission-templates" className="data zebra permissions-table">
-        <ListHeader organization={this.props.organization} permissions={this.props.permissions} />
-        <tbody>{permissionTemplates}</tbody>
-      </table>
+      <div className="boxed-group boxed-group-inner">
+        <table id="permission-templates" className="data zebra permissions-table">
+          <ListHeader organization={this.props.organization} permissions={this.props.permissions} />
+          <tbody>{permissionTemplates}</tbody>
+        </table>
+      </div>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/apps/permissions/shared/components/HoldersList.tsx b/server/sonar-web/src/main/js/apps/permissions/shared/components/HoldersList.tsx
index 189351ba346..798e2156ceb 100644
--- a/server/sonar-web/src/main/js/apps/permissions/shared/components/HoldersList.tsx
+++ b/server/sonar-web/src/main/js/apps/permissions/shared/components/HoldersList.tsx
@@ -92,14 +92,16 @@ export default class HoldersList extends React.PureComponent<Props> {
     ));
 
     return (
-      <table className="data zebra permissions-table">
-        {this.renderTableHeader()}
-        <tbody>
-          {users.length === 0 && groups.length === 0 && this.renderEmpty()}
-          {users}
-          {groups}
-        </tbody>
-      </table>
+      <div className="boxed-group boxed-group-inner">
+        <table className="data zebra permissions-table">
+          {this.renderTableHeader()}
+          <tbody>
+            {users.length === 0 && groups.length === 0 && this.renderEmpty()}
+            {users}
+            {groups}
+          </tbody>
+        </table>
+      </div>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/apps/portfolio/components/App.tsx b/server/sonar-web/src/main/js/apps/portfolio/components/App.tsx
index 9f1ee5f2a76..f4074fa61a1 100644
--- a/server/sonar-web/src/main/js/apps/portfolio/components/App.tsx
+++ b/server/sonar-web/src/main/js/apps/portfolio/components/App.tsx
@@ -50,10 +50,6 @@ export default class App extends React.PureComponent<Props, State> {
 
   componentDidMount() {
     this.mounted = true;
-    const html = document.querySelector('html');
-    if (html) {
-      html.classList.add('dashboard-page');
-    }
     this.fetchData();
   }
 
@@ -65,10 +61,6 @@ export default class App extends React.PureComponent<Props, State> {
 
   componentWillUnmount() {
     this.mounted = false;
-    const html = document.querySelector('html');
-    if (html) {
-      html.classList.remove('dashboard-page');
-    }
   }
 
   fetchData() {
diff --git a/server/sonar-web/src/main/js/apps/project-admin/key/Key.js b/server/sonar-web/src/main/js/apps/project-admin/key/Key.js
index e94839f6b2e..0288b2e9fb5 100644
--- a/server/sonar-web/src/main/js/apps/project-admin/key/Key.js
+++ b/server/sonar-web/src/main/js/apps/project-admin/key/Key.js
@@ -101,7 +101,7 @@ class Key extends React.PureComponent {
         )}
 
         {hasModules && (
-          <div>
+          <div className="boxed-group boxed-group-inner">
             <div className="big-spacer-bottom">
               <ul className="tabs">
                 <li>
diff --git a/server/sonar-web/src/main/js/apps/project-admin/links/Table.js b/server/sonar-web/src/main/js/apps/project-admin/links/Table.js
index 580413d4d1f..453c93ad44a 100644
--- a/server/sonar-web/src/main/js/apps/project-admin/links/Table.js
+++ b/server/sonar-web/src/main/js/apps/project-admin/links/Table.js
@@ -54,10 +54,12 @@ export default class Table extends React.PureComponent {
     ));
 
     return (
-      <table id="project-links" className="data zebra">
-        {this.renderHeader()}
-        <tbody>{linkRows}</tbody>
-      </table>
+      <div className="boxed-group boxed-group-inner">
+        <table id="project-links" className="data zebra">
+          {this.renderHeader()}
+          <tbody>{linkRows}</tbody>
+        </table>
+      </div>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAppContainer.js b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAppContainer.js
index 080842999d8..70c931e1cf7 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAppContainer.js
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAppContainer.js
@@ -94,8 +94,6 @@ export default class ProjectActivityAppContainer extends React.PureComponent {
 
   componentDidMount() {
     this.mounted = true;
-    const elem = document.querySelector('html');
-    elem && elem.classList.add('dashboard-page');
     if (this.shouldRedirect()) {
       const newQuery = { ...this.state.query, graph: getGraph() };
       if (isCustomGraph(newQuery.graph)) {
@@ -129,8 +127,6 @@ export default class ProjectActivityAppContainer extends React.PureComponent {
 
   componentWillUnmount() {
     this.mounted = false;
-    const elem = document.querySelector('html');
-    elem && elem.classList.remove('dashboard-page');
   }
 
   addCustomEvent = (analysis /*: string */, name /*: string */, category /*: ?string */) =>
diff --git a/server/sonar-web/src/main/js/apps/projectBranches/components/App.tsx b/server/sonar-web/src/main/js/apps/projectBranches/components/App.tsx
index 19092afe655..f11038f2b18 100644
--- a/server/sonar-web/src/main/js/apps/projectBranches/components/App.tsx
+++ b/server/sonar-web/src/main/js/apps/projectBranches/components/App.tsx
@@ -119,26 +119,30 @@ export default class App extends React.PureComponent<Props, State> {
           {this.renderBranchLifeTime()}
         </header>
 
-        <table className="data zebra zebra-hover">
-          <thead>
-            <tr>
-              <th>{translate('branch')}</th>
-              <th className="thin nowrap text-right">{translate('status')}</th>
-              <th className="thin nowrap text-right">{translate('branches.last_analysis_date')}</th>
-              <th className="thin nowrap text-right">{translate('actions')}</th>
-            </tr>
-          </thead>
-          <tbody>
-            {sortBranchesAsTree(branches).map(branch => (
-              <BranchRow
-                branch={branch}
-                component={component.key}
-                key={branch.name}
-                onChange={onBranchesChange}
-              />
-            ))}
-          </tbody>
-        </table>
+        <div className="boxed-group boxed-group-inner">
+          <table className="data zebra zebra-hover">
+            <thead>
+              <tr>
+                <th>{translate('branch')}</th>
+                <th className="thin nowrap text-right">{translate('status')}</th>
+                <th className="thin nowrap text-right">
+                  {translate('branches.last_analysis_date')}
+                </th>
+                <th className="thin nowrap text-right">{translate('actions')}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {sortBranchesAsTree(branches).map(branch => (
+                <BranchRow
+                  branch={branch}
+                  component={component.key}
+                  key={branch.name}
+                  onChange={onBranchesChange}
+                />
+              ))}
+            </tbody>
+          </table>
+        </div>
       </div>
     );
   }
diff --git a/server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/__snapshots__/App-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/__snapshots__/App-test.tsx.snap
index 4914db6ffce..e9d41bf777e 100644
--- a/server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/__snapshots__/App-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/__snapshots__/App-test.tsx.snap
@@ -41,69 +41,73 @@ exports[`renders sorted list of branches 1`] = `
       />
     </p>
   </header>
-  <table
-    className="data zebra zebra-hover"
+  <div
+    className="boxed-group boxed-group-inner"
   >
-    <thead>
-      <tr>
-        <th>
-          branch
-        </th>
-        <th
-          className="thin nowrap text-right"
-        >
-          status
-        </th>
-        <th
-          className="thin nowrap text-right"
-        >
-          branches.last_analysis_date
-        </th>
-        <th
-          className="thin nowrap text-right"
-        >
-          actions
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <BranchRow
-        branch={
-          Object {
-            "isMain": true,
-            "name": "master",
+    <table
+      className="data zebra zebra-hover"
+    >
+      <thead>
+        <tr>
+          <th>
+            branch
+          </th>
+          <th
+            className="thin nowrap text-right"
+          >
+            status
+          </th>
+          <th
+            className="thin nowrap text-right"
+          >
+            branches.last_analysis_date
+          </th>
+          <th
+            className="thin nowrap text-right"
+          >
+            actions
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <BranchRow
+          branch={
+            Object {
+              "isMain": true,
+              "name": "master",
+            }
           }
-        }
-        component="foo"
-        key="master"
-        onChange={[Function]}
-      />
-      <BranchRow
-        branch={
-          Object {
-            "isMain": false,
-            "mergeBranch": "master",
-            "name": "branch-1.0",
-            "type": "SHORT",
+          component="foo"
+          key="master"
+          onChange={[Function]}
+        />
+        <BranchRow
+          branch={
+            Object {
+              "isMain": false,
+              "mergeBranch": "master",
+              "name": "branch-1.0",
+              "type": "SHORT",
+            }
           }
-        }
-        component="foo"
-        key="branch-1.0"
-        onChange={[Function]}
-      />
-      <BranchRow
-        branch={
-          Object {
-            "isMain": false,
-            "name": "branch-1.0",
-            "type": "LONG",
+          component="foo"
+          key="branch-1.0"
+          onChange={[Function]}
+        />
+        <BranchRow
+          branch={
+            Object {
+              "isMain": false,
+              "name": "branch-1.0",
+              "type": "LONG",
+            }
           }
-        }
-        component="foo"
-        key="branch-1.0"
-        onChange={[Function]}
-      />
-    </tbody>
-  </table>
+          component="foo"
+          key="branch-1.0"
+          onChange={[Function]}
+        />
+      </tbody>
+    </table>
+  </div>
 </div>
 `;
diff --git a/server/sonar-web/src/main/js/apps/projectQualityProfiles/Table.tsx b/server/sonar-web/src/main/js/apps/projectQualityProfiles/Table.tsx
index 88f51601856..1e6374406ec 100644
--- a/server/sonar-web/src/main/js/apps/projectQualityProfiles/Table.tsx
+++ b/server/sonar-web/src/main/js/apps/projectQualityProfiles/Table.tsx
@@ -44,16 +44,18 @@ export default function Table(props: Props) {
   ));
 
   return (
-    <table className="data zebra">
-      <thead>
-        <tr>
-          <th className="thin nowrap">{translate('language')}</th>
-          <th className="thin nowrap">{translate('quality_profile')}</th>
-          {/* keep one empty cell for the spinner */}
-          <th>&nbsp;</th>
-        </tr>
-      </thead>
-      <tbody>{profileRows}</tbody>
-    </table>
+    <div className="boxed-group boxed-group-inner">
+      <table className="data zebra">
+        <thead>
+          <tr>
+            <th className="thin nowrap">{translate('language')}</th>
+            <th className="thin nowrap">{translate('quality_profile')}</th>
+            {/* keep one empty cell for the spinner */}
+            <th>&nbsp;</th>
+          </tr>
+        </thead>
+        <tbody>{profileRows}</tbody>
+      </table>
+    </div>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/projectQualityProfiles/__tests__/__snapshots__/Table-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectQualityProfiles/__tests__/__snapshots__/Table-test.tsx.snap
index 5ac9cea89da..b77fae2826b 100644
--- a/server/sonar-web/src/main/js/apps/projectQualityProfiles/__tests__/__snapshots__/Table-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projectQualityProfiles/__tests__/__snapshots__/Table-test.tsx.snap
@@ -1,32 +1,65 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders 1`] = `
-<table
-  className="data zebra"
+<div
+  className="boxed-group boxed-group-inner"
 >
-  <thead>
-    <tr>
-      <th
-        className="thin nowrap"
-      >
-        language
-      </th>
-      <th
-        className="thin nowrap"
-      >
-        quality_profile
-      </th>
-      <th>
-         
-      </th>
-    </tr>
-  </thead>
-  <tbody>
-    <ProfileRow
-      key="java"
-      onChangeProfile={[Function]}
-      possibleProfiles={
-        Array [
+  <table
+    className="data zebra"
+  >
+    <thead>
+      <tr>
+        <th
+          className="thin nowrap"
+        >
+          language
+        </th>
+        <th
+          className="thin nowrap"
+        >
+          quality_profile
+        </th>
+        <th>
+           
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <ProfileRow
+        key="java"
+        onChangeProfile={[Function]}
+        possibleProfiles={
+          Array [
+            Object {
+              "activeDeprecatedRuleCount": 0,
+              "activeRuleCount": 17,
+              "key": "foo-java",
+              "language": "java",
+              "languageName": "java",
+              "name": "foo-java",
+              "organization": "org",
+            },
+            Object {
+              "activeDeprecatedRuleCount": 0,
+              "activeRuleCount": 17,
+              "key": "bar-java",
+              "language": "java",
+              "languageName": "java",
+              "name": "bar-java",
+              "organization": "org",
+            },
+            Object {
+              "activeDeprecatedRuleCount": 0,
+              "activeRuleCount": 17,
+              "key": "baz-java",
+              "language": "java",
+              "languageName": "java",
+              "name": "baz-java",
+              "organization": "org",
+            },
+          ]
+        }
+        profile={
           Object {
             "activeDeprecatedRuleCount": 0,
             "activeRuleCount": 17,
@@ -35,44 +68,26 @@ exports[`renders 1`] = `
             "languageName": "java",
             "name": "foo-java",
             "organization": "org",
-          },
-          Object {
-            "activeDeprecatedRuleCount": 0,
-            "activeRuleCount": 17,
-            "key": "bar-java",
-            "language": "java",
-            "languageName": "java",
-            "name": "bar-java",
-            "organization": "org",
-          },
-          Object {
-            "activeDeprecatedRuleCount": 0,
-            "activeRuleCount": 17,
-            "key": "baz-java",
-            "language": "java",
-            "languageName": "java",
-            "name": "baz-java",
-            "organization": "org",
-          },
-        ]
-      }
-      profile={
-        Object {
-          "activeDeprecatedRuleCount": 0,
-          "activeRuleCount": 17,
-          "key": "foo-java",
-          "language": "java",
-          "languageName": "java",
-          "name": "foo-java",
-          "organization": "org",
+          }
+        }
+      />
+      <ProfileRow
+        key="js"
+        onChangeProfile={[Function]}
+        possibleProfiles={
+          Array [
+            Object {
+              "activeDeprecatedRuleCount": 0,
+              "activeRuleCount": 17,
+              "key": "foo-js",
+              "language": "js",
+              "languageName": "js",
+              "name": "foo-js",
+              "organization": "org",
+            },
+          ]
         }
-      }
-    />
-    <ProfileRow
-      key="js"
-      onChangeProfile={[Function]}
-      possibleProfiles={
-        Array [
+        profile={
           Object {
             "activeDeprecatedRuleCount": 0,
             "activeRuleCount": 17,
@@ -81,21 +96,10 @@ exports[`renders 1`] = `
             "languageName": "js",
             "name": "foo-js",
             "organization": "org",
-          },
-        ]
-      }
-      profile={
-        Object {
-          "activeDeprecatedRuleCount": 0,
-          "activeRuleCount": 17,
-          "key": "foo-js",
-          "language": "js",
-          "languageName": "js",
-          "name": "foo-js",
-          "organization": "org",
+          }
         }
-      }
-    />
-  </tbody>
-</table>
+      />
+    </tbody>
+  </table>
+</div>
 `;
diff --git a/server/sonar-web/src/main/js/apps/projects/components/AllProjects.tsx b/server/sonar-web/src/main/js/apps/projects/components/AllProjects.tsx
index 15dc8f4e7ca..b8c83faa629 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/AllProjects.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/AllProjects.tsx
@@ -70,11 +70,6 @@ export default class AllProjects extends React.PureComponent<Props, State> {
   componentDidMount() {
     this.mounted = true;
 
-    const html = document.querySelector('html');
-    if (html) {
-      html.classList.add('dashboard-page');
-    }
-
     if (this.props.isFavorite && !isLoggedIn(this.props.currentUser)) {
       handleRequiredAuthentication();
       return;
@@ -95,11 +90,6 @@ export default class AllProjects extends React.PureComponent<Props, State> {
   componentWillUnmount() {
     this.mounted = false;
 
-    const html = document.querySelector('html');
-    if (html) {
-      html.classList.remove('dashboard-page');
-    }
-
     const footer = document.getElementById('footer');
     if (footer) {
       footer.classList.remove('page-footer-with-sidebar');
diff --git a/server/sonar-web/src/main/js/apps/projects/components/PageHeader.tsx b/server/sonar-web/src/main/js/apps/projects/components/PageHeader.tsx
index 3f347339ad0..0b7666c9816 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/PageHeader.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/PageHeader.tsx
@@ -23,7 +23,7 @@ import SearchFilterContainer from '../filters/SearchFilterContainer';
 import Tooltip from '../../../components/controls/Tooltip';
 import PerspectiveSelect from './PerspectiveSelect';
 import ProjectsSortingSelect from './ProjectsSortingSelect';
-import { CurrentUser, isLoggedIn } from '../../../app/types';
+import { CurrentUser, isLoggedIn, HomePageType } from '../../../app/types';
 import HomePageSelect from '../../../components/controls/HomePageSelect';
 import { translate } from '../../../helpers/l10n';
 import { RawQuery } from '../../../helpers/query';
@@ -101,12 +101,12 @@ export default function PageHeader(props: Props) {
         )}
       </div>
 
-      {props.onSonarCloud &&
-        isLoggedIn(currentUser) &&
-        props.isFavorite &&
-        !props.organization && (
-          <HomePageSelect className="huge-spacer-left" currentPage={{ type: 'my-projects' }} />
-        )}
+      {props.isFavorite && (
+        <HomePageSelect
+          className="huge-spacer-left"
+          currentPage={{ type: HomePageType.MyProjects }}
+        />
+      )}
     </header>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeak.tsx b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeak.tsx
index 8a5b4f6d216..3c79acd0113 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeak.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeak.tsx
@@ -49,6 +49,7 @@ export default function ProjectCardLeak({ organization, project }: Props) {
             className="spacer-right"
             component={project.key}
             favorite={project.isFavorite}
+            qualifier="TRK"
           />
         )}
         <h2 className="project-card-name">
diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardOverall.tsx b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardOverall.tsx
index d8ecbe86f66..79926daf027 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardOverall.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardOverall.tsx
@@ -48,6 +48,7 @@ export default function ProjectCardOverall({ organization, project }: Props) {
             className="spacer-right"
             component={project.key}
             favorite={project.isFavorite}
+            qualifier="TRK"
           />
         )}
         <h2 className="project-card-name">
diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/Projects.tsx b/server/sonar-web/src/main/js/apps/projectsManagement/Projects.tsx
index d3399685066..81a0bb7102f 100644
--- a/server/sonar-web/src/main/js/apps/projectsManagement/Projects.tsx
+++ b/server/sonar-web/src/main/js/apps/projectsManagement/Projects.tsx
@@ -50,32 +50,34 @@ export default class Projects extends React.PureComponent<Props> {
 
   render() {
     return (
-      <table
-        className={classNames('data', 'zebra', { 'new-loading': !this.props.ready })}
-        id="projects-management-page-projects">
-        <thead>
-          <tr>
-            <th />
-            <th>{translate('name')}</th>
-            <th />
-            <th>{translate('key')}</th>
-            <th className="thin nowrap text-right">{translate('last_analysis')}</th>
-            <th />
-          </tr>
-        </thead>
-        <tbody>
-          {this.props.projects.map(project => (
-            <ProjectRow
-              currentUser={this.props.currentUser}
-              key={project.key}
-              onApplyTemplate={this.handleApplyTemplate}
-              onProjectCheck={this.onProjectCheck}
-              project={project}
-              selected={this.props.selection.includes(project.key)}
-            />
-          ))}
-        </tbody>
-      </table>
+      <div className="boxed-group boxed-group-inner">
+        <table
+          className={classNames('data', 'zebra', { 'new-loading': !this.props.ready })}
+          id="projects-management-page-projects">
+          <thead>
+            <tr>
+              <th />
+              <th>{translate('name')}</th>
+              <th />
+              <th>{translate('key')}</th>
+              <th className="thin nowrap text-right">{translate('last_analysis')}</th>
+              <th />
+            </tr>
+          </thead>
+          <tbody>
+            {this.props.projects.map(project => (
+              <ProjectRow
+                currentUser={this.props.currentUser}
+                key={project.key}
+                onApplyTemplate={this.handleApplyTemplate}
+                onProjectCheck={this.onProjectCheck}
+                project={project}
+                selected={this.props.selection.includes(project.key)}
+              />
+            ))}
+          </tbody>
+        </table>
+      </div>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/Projects-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/Projects-test.tsx.snap
index 7a3728a28ad..1503fed2c4e 100644
--- a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/Projects-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/Projects-test.tsx.snap
@@ -1,67 +1,71 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders list of projects 1`] = `
-<table
-  className="data zebra new-loading"
-  id="projects-management-page-projects"
+<div
+  className="boxed-group boxed-group-inner"
 >
-  <thead>
-    <tr>
-      <th />
-      <th>
-        name
-      </th>
-      <th />
-      <th>
-        key
-      </th>
-      <th
-        className="thin nowrap text-right"
-      >
-        last_analysis
-      </th>
-      <th />
-    </tr>
-  </thead>
-  <tbody>
-    <ProjectRow
-      currentUser={
-        Object {
-          "login": "foo",
+  <table
+    className="data zebra new-loading"
+    id="projects-management-page-projects"
+  >
+    <thead>
+      <tr>
+        <th />
+        <th>
+          name
+        </th>
+        <th />
+        <th>
+          key
+        </th>
+        <th
+          className="thin nowrap text-right"
+        >
+          last_analysis
+        </th>
+        <th />
+      </tr>
+    </thead>
+    <tbody>
+      <ProjectRow
+        currentUser={
+          Object {
+            "login": "foo",
+          }
         }
-      }
-      key="a"
-      onApplyTemplate={[Function]}
-      onProjectCheck={[Function]}
-      project={
-        Object {
-          "key": "a",
-          "name": "A",
-          "qualifier": "TRK",
-          "visibility": "public",
+        key="a"
+        onApplyTemplate={[Function]}
+        onProjectCheck={[Function]}
+        project={
+          Object {
+            "key": "a",
+            "name": "A",
+            "qualifier": "TRK",
+            "visibility": "public",
+          }
         }
-      }
-      selected={true}
-    />
-    <ProjectRow
-      currentUser={
-        Object {
-          "login": "foo",
+        selected={true}
+      />
+      <ProjectRow
+        currentUser={
+          Object {
+            "login": "foo",
+          }
         }
-      }
-      key="b"
-      onApplyTemplate={[Function]}
-      onProjectCheck={[Function]}
-      project={
-        Object {
-          "key": "b",
-          "name": "B",
-          "qualifier": "TRK",
-          "visibility": "public",
+        key="b"
+        onApplyTemplate={[Function]}
+        onProjectCheck={[Function]}
+        project={
+          Object {
+            "key": "b",
+            "name": "B",
+            "qualifier": "TRK",
+            "visibility": "public",
+          }
         }
-      }
-      selected={false}
-    />
-  </tbody>
-</table>
+        selected={false}
+      />
+    </tbody>
+  </table>
+</div>
 `;
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatesApp.js b/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatesApp.js
index 0ec8d28794d..4386f8cca8c 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatesApp.js
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatesApp.js
@@ -37,6 +37,8 @@ export default class QualityGatesApp extends Component {
 
   componentDidMount() {
     this.fetchQualityGates();
+    // $FlowFixMe
+    document.body.classList.add('white-page');
     const footer = document.getElementById('footer');
     if (footer) {
       footer.classList.add('page-footer-with-sidebar');
@@ -44,6 +46,8 @@ export default class QualityGatesApp extends Component {
   }
 
   componentWillUnmount() {
+    // $FlowFixMe
+    document.body.classList.remove('white-page');
     const footer = document.getElementById('footer');
     if (footer) {
       footer.classList.remove('page-footer-with-sidebar');
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/components/App.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/components/App.tsx
index 8f8f056be4e..fda9bb7ed26 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/components/App.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/components/App.tsx
@@ -43,13 +43,6 @@ export default class App extends React.PureComponent<Props, State> {
   mounted: boolean;
   state: State = { loading: true };
 
-  componentWillMount() {
-    const html = document.querySelector('html');
-    if (html) {
-      html.classList.add('dashboard-page');
-    }
-  }
-
   componentDidMount() {
     this.mounted = true;
     this.loadData();
@@ -57,10 +50,6 @@ export default class App extends React.PureComponent<Props, State> {
 
   componentWillUnmount() {
     this.mounted = false;
-    const html = document.querySelector('html');
-    if (html) {
-      html.classList.remove('dashboard-page');
-    }
   }
 
   fetchProfiles() {
diff --git a/server/sonar-web/src/main/js/apps/settings/components/App.js b/server/sonar-web/src/main/js/apps/settings/components/App.js
index 7df88bb9fb7..a2c05ac3e3f 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/App.js
+++ b/server/sonar-web/src/main/js/apps/settings/components/App.js
@@ -47,10 +47,6 @@ export default class App extends React.PureComponent {
   state /*: State */ = { loaded: false };
 
   componentDidMount() {
-    const html = document.querySelector('html');
-    if (html) {
-      html.classList.add('dashboard-page');
-    }
     const componentKey = this.props.component ? this.props.component.key : null;
     this.props.fetchSettings(componentKey).then(() => this.setState({ loaded: true }));
   }
@@ -62,13 +58,6 @@ export default class App extends React.PureComponent {
     }
   }
 
-  componentWillUnmount() {
-    const html = document.querySelector('html');
-    if (html) {
-      html.classList.remove('dashboard-page');
-    }
-  }
-
   render() {
     if (!this.state.loaded) {
       return null;
diff --git a/server/sonar-web/src/main/js/apps/users/UsersList.tsx b/server/sonar-web/src/main/js/apps/users/UsersList.tsx
index a81a9441af3..9609acd0a9b 100644
--- a/server/sonar-web/src/main/js/apps/users/UsersList.tsx
+++ b/server/sonar-web/src/main/js/apps/users/UsersList.tsx
@@ -38,31 +38,33 @@ export default function UsersList({
   users
 }: Props) {
   return (
-    <table id="users-list" className="data zebra">
-      <thead>
-        <tr>
-          <th />
-          <th className="nowrap" />
-          <th className="nowrap">{translate('my_profile.scm_accounts')}</th>
-          {!organizationsEnabled && <th className="nowrap">{translate('my_profile.groups')}</th>}
-          <th className="nowrap">{translate('users.tokens')}</th>
-          <th className="nowrap">&nbsp;</th>
-        </tr>
-      </thead>
-      <tbody>
-        {users.map(user => (
-          <UserListItem
-            identityProvider={identityProviders.find(
-              provider => user.externalProvider === provider.key
-            )}
-            isCurrentUser={currentUser.isLoggedIn && currentUser.login === user.login}
-            key={user.login}
-            onUpdateUsers={onUpdateUsers}
-            organizationsEnabled={organizationsEnabled}
-            user={user}
-          />
-        ))}
-      </tbody>
-    </table>
+    <div className="boxed-group boxed-group-inner">
+      <table id="users-list" className="data zebra">
+        <thead>
+          <tr>
+            <th />
+            <th className="nowrap" />
+            <th className="nowrap">{translate('my_profile.scm_accounts')}</th>
+            {!organizationsEnabled && <th className="nowrap">{translate('my_profile.groups')}</th>}
+            <th className="nowrap">{translate('users.tokens')}</th>
+            <th className="nowrap">&nbsp;</th>
+          </tr>
+        </thead>
+        <tbody>
+          {users.map(user => (
+            <UserListItem
+              identityProvider={identityProviders.find(
+                provider => user.externalProvider === provider.key
+              )}
+              isCurrentUser={currentUser.isLoggedIn && currentUser.login === user.login}
+              key={user.login}
+              onUpdateUsers={onUpdateUsers}
+              organizationsEnabled={organizationsEnabled}
+              user={user}
+            />
+          ))}
+        </tbody>
+      </table>
+    </div>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/users/__tests__/__snapshots__/UsersList.tsx.snap b/server/sonar-web/src/main/js/apps/users/__tests__/__snapshots__/UsersList.tsx.snap
index 4b732ab0f36..64c13cf48e9 100644
--- a/server/sonar-web/src/main/js/apps/users/__tests__/__snapshots__/UsersList.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/users/__tests__/__snapshots__/UsersList.tsx.snap
@@ -1,64 +1,68 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render correctly 1`] = `
-<table
-  className="data zebra"
-  id="users-list"
+<div
+  className="boxed-group boxed-group-inner"
 >
-  <thead>
-    <tr>
-      <th />
-      <th
-        className="nowrap"
-      />
-      <th
-        className="nowrap"
-      >
-        my_profile.scm_accounts
-      </th>
-      <th
-        className="nowrap"
-      >
-        users.tokens
-      </th>
-      <th
-        className="nowrap"
-      >
-         
-      </th>
-    </tr>
-  </thead>
-  <tbody>
-    <UserListItem
-      isCurrentUser={true}
-      key="luke"
-      onUpdateUsers={[Function]}
-      organizationsEnabled={true}
-      user={
-        Object {
-          "active": true,
-          "local": false,
-          "login": "luke",
-          "name": "Luke",
-          "scmAccounts": Array [],
+  <table
+    className="data zebra"
+    id="users-list"
+  >
+    <thead>
+      <tr>
+        <th />
+        <th
+          className="nowrap"
+        />
+        <th
+          className="nowrap"
+        >
+          my_profile.scm_accounts
+        </th>
+        <th
+          className="nowrap"
+        >
+          users.tokens
+        </th>
+        <th
+          className="nowrap"
+        >
+           
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <UserListItem
+        isCurrentUser={true}
+        key="luke"
+        onUpdateUsers={[Function]}
+        organizationsEnabled={true}
+        user={
+          Object {
+            "active": true,
+            "local": false,
+            "login": "luke",
+            "name": "Luke",
+            "scmAccounts": Array [],
+          }
         }
-      }
-    />
-    <UserListItem
-      isCurrentUser={false}
-      key="obi"
-      onUpdateUsers={[Function]}
-      organizationsEnabled={true}
-      user={
-        Object {
-          "active": true,
-          "local": false,
-          "login": "obi",
-          "name": "One",
-          "scmAccounts": Array [],
+      />
+      <UserListItem
+        isCurrentUser={false}
+        key="obi"
+        onUpdateUsers={[Function]}
+        organizationsEnabled={true}
+        user={
+          Object {
+            "active": true,
+            "local": false,
+            "login": "obi",
+            "name": "One",
+            "scmAccounts": Array [],
+          }
         }
-      }
-    />
-  </tbody>
-</table>
+      />
+    </tbody>
+  </table>
+</div>
 `;
diff --git a/server/sonar-web/src/main/js/apps/web-api/components/Action.tsx b/server/sonar-web/src/main/js/apps/web-api/components/Action.tsx
index f0b5eed39e6..5126f39b525 100644
--- a/server/sonar-web/src/main/js/apps/web-api/components/Action.tsx
+++ b/server/sonar-web/src/main/js/apps/web-api/components/Action.tsx
@@ -120,7 +120,7 @@ export default class Action extends React.PureComponent<Props, State> {
       );
     }
 
-    return <hr />;
+    return null;
   }
 
   render() {
@@ -130,8 +130,8 @@ export default class Action extends React.PureComponent<Props, State> {
     const actionKey = getActionKey(domain.path, action.key);
 
     return (
-      <div id={actionKey} className="web-api-action">
-        <header className="web-api-action-header">
+      <div id={actionKey} className="boxed-group">
+        <header className="web-api-action-header boxed-group-header">
           <Link
             to={{ pathname: '/web_api/' + actionKey }}
             className="spacer-right link-no-underline">
@@ -161,26 +161,28 @@ export default class Action extends React.PureComponent<Props, State> {
           )}
         </header>
 
-        <div
-          className="web-api-action-description markdown"
-          dangerouslySetInnerHTML={{ __html: action.description }}
-        />
+        <div className="boxed-group-inner">
+          <div
+            className="web-api-action-description markdown"
+            dangerouslySetInnerHTML={{ __html: action.description }}
+          />
 
-        {this.renderTabs()}
+          {this.renderTabs()}
 
-        {showParams &&
-          action.params && (
-            <Params
-              params={action.params}
-              showDeprecated={this.props.showDeprecated}
-              showInternal={this.props.showInternal}
-            />
-          )}
+          {showParams &&
+            action.params && (
+              <Params
+                params={action.params}
+                showDeprecated={this.props.showDeprecated}
+                showInternal={this.props.showInternal}
+              />
+            )}
 
-        {showResponse &&
-          action.hasResponseExample && <ResponseExample domain={domain} action={action} />}
+          {showResponse &&
+            action.hasResponseExample && <ResponseExample domain={domain} action={action} />}
 
-        {showChangelog && <ActionChangelog changelog={action.changelog} />}
+          {showChangelog && <ActionChangelog changelog={action.changelog} />}
+        </div>
       </div>
     );
   }
diff --git a/server/sonar-web/src/main/js/apps/web-api/components/__tests__/__snapshots__/Action-test.tsx.snap b/server/sonar-web/src/main/js/apps/web-api/components/__tests__/__snapshots__/Action-test.tsx.snap
index 02cc7f1b708..ac543cd86e3 100644
--- a/server/sonar-web/src/main/js/apps/web-api/components/__tests__/__snapshots__/Action-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/web-api/components/__tests__/__snapshots__/Action-test.tsx.snap
@@ -91,11 +91,11 @@ exports[`should display the response example 1`] = `
 
 exports[`should render correctly 1`] = `
 <div
-  className="web-api-action"
+  className="boxed-group"
   id="foo/foo"
 >
   <header
-    className="web-api-action-header"
+    className="web-api-action-header boxed-group-header"
   >
     <Link
       className="spacer-right link-no-underline"
@@ -118,43 +118,47 @@ exports[`should render correctly 1`] = `
     </h3>
   </header>
   <div
-    className="web-api-action-description markdown"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "Foo Desc",
-      }
-    }
-  />
-  <ul
-    className="web-api-action-actions tabs"
+    className="boxed-group-inner"
   >
-    <li>
-      <a
-        className=""
-        href="#"
-        onClick={[Function]}
-      >
-        api_documentation.parameters
-      </a>
-    </li>
-    <li>
-      <a
-        className=""
-        href="#"
-        onClick={[Function]}
-      >
-        api_documentation.response_example
-      </a>
-    </li>
-    <li>
-      <a
-        className=""
-        href="#"
-        onClick={[Function]}
-      >
-        api_documentation.changelog
-      </a>
-    </li>
-  </ul>
+    <div
+      className="web-api-action-description markdown"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "Foo Desc",
+        }
+      }
+    />
+    <ul
+      className="web-api-action-actions tabs"
+    >
+      <li>
+        <a
+          className=""
+          href="#"
+          onClick={[Function]}
+        >
+          api_documentation.parameters
+        </a>
+      </li>
+      <li>
+        <a
+          className=""
+          href="#"
+          onClick={[Function]}
+        >
+          api_documentation.response_example
+        </a>
+      </li>
+      <li>
+        <a
+          className=""
+          href="#"
+          onClick={[Function]}
+        >
+          api_documentation.changelog
+        </a>
+      </li>
+    </ul>
+  </div>
 </div>
 `;
diff --git a/server/sonar-web/src/main/js/apps/web-api/styles/web-api.css b/server/sonar-web/src/main/js/apps/web-api/styles/web-api.css
index c99b781ab07..ea4ec21da9d 100644
--- a/server/sonar-web/src/main/js/apps/web-api/styles/web-api.css
+++ b/server/sonar-web/src/main/js/apps/web-api/styles/web-api.css
@@ -26,10 +26,7 @@
 }
 
 .web-api-domain-actions {
-}
-
-.web-api-action {
-  padding-top: 30px;
+  margin-top: calc(2 * var(--gridSize));
 }
 
 .web-api-action-title {