diff --git a/app/assets/javascripts/pages/users/activity_calendar.js b/app/assets/javascripts/pages/users/activity_calendar.js
index 13bba06d425bbf111d9417c949d613da9d0a28c9..dbb0fe585791f777f5dc827e5c1deb246730b375 100644
--- a/app/assets/javascripts/pages/users/activity_calendar.js
+++ b/app/assets/javascripts/pages/users/activity_calendar.js
@@ -72,7 +72,7 @@ export default class ActivityCalendar {
     this.clickDay = this.clickDay.bind(this);
     this.currentSelectedDate = '';
     this.daySpace = 1;
-    this.daySize = 15;
+    this.daySize = 14;
     this.daySizeWithSpace = this.daySize + this.daySpace * 2;
     this.monthNames = [
       __('Jan'),
@@ -131,7 +131,6 @@ export default class ActivityCalendar {
     this.renderDays();
     this.renderMonths();
     this.renderDayTitles();
-    this.renderKey();
   }
 
   // Add extra padding for the last month label if it is also the last column
@@ -257,25 +256,6 @@ export default class ActivityCalendar {
       .text((date) => this.monthNames[date.month]);
   }
 
-  renderKey() {
-    this.svg
-      .append('g')
-      .attr('transform', `translate(18, ${this.daySizeWithSpace * 8 + 16})`)
-      .selectAll('rect')
-      .data(CONTRIB_LEGENDS)
-      .enter()
-      .append('rect')
-      .attr('width', this.daySize)
-      .attr('height', this.daySize)
-      .attr('x', (_, i) => this.daySizeWithSpace * i)
-      .attr('y', 0)
-      .attr('data-level', (_, i) => i)
-      .attr('class', 'user-contrib-cell has-tooltip contrib-legend')
-      .attr('title', (x) => x.title)
-      .attr('data-container', 'body')
-      .attr('data-html', true);
-  }
-
   clickDay(stamp) {
     if (this.currentSelectedDate !== stamp.date) {
       this.currentSelectedDate = stamp.date;
diff --git a/app/assets/javascripts/pages/users/show/index.js b/app/assets/javascripts/pages/users/show/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..dbb5e29c689ce16b49f530ce039c180ac2c7e2bb
--- /dev/null
+++ b/app/assets/javascripts/pages/users/show/index.js
@@ -0,0 +1,3 @@
+import initReadMore from '~/read_more';
+
+initReadMore();
diff --git a/app/assets/javascripts/pages/users/user_overview_block.js b/app/assets/javascripts/pages/users/user_overview_block.js
index 8d2d66d812e840fb74b96b23220c2d6eb875b19c..48c5e9a6c12d9ef262d17e9fee1274c7383c7845 100644
--- a/app/assets/javascripts/pages/users/user_overview_block.js
+++ b/app/assets/javascripts/pages/users/user_overview_block.js
@@ -16,7 +16,12 @@ export default class UserOverviewBlock {
 
   loadData() {
     const containerEl = document.querySelector(this.container);
-    const loadingEl = containerEl.querySelector(`.loading`);
+
+    if (!containerEl) {
+      return;
+    }
+
+    const loadingEl = containerEl.querySelector('.loading');
 
     loadingEl.classList.remove('hide');
 
diff --git a/app/assets/javascripts/pages/users/user_tabs.js b/app/assets/javascripts/pages/users/user_tabs.js
index 79eb3902116f3683688d7de46c44d6a55c338201..b5acc39e8df25fd9e8bab51751a0f3cf071c8244 100644
--- a/app/assets/javascripts/pages/users/user_tabs.js
+++ b/app/assets/javascripts/pages/users/user_tabs.js
@@ -67,17 +67,32 @@ import UserOverviewBlock from './user_overview_block';
 const CALENDAR_TEMPLATE = `
   <div class="calendar">
     <div class="js-contrib-calendar"></div>
-    <div class="calendar-hint"></div>
+    <div class="calendar-legend">
+      <svg width="76px" height="16px">
+        <g>
+          <rect width="13" height="13" x="0" y="0" data-level="0" class="user-contrib-cell has-tooltip contrib-legend" title="${__(
+            'No contributions',
+          )}" data-container="body" data-html="true"></rect>
+          <rect width="13" height="13" x="15" y="0" data-level="1" class="user-contrib-cell has-tooltip contrib-legend" title="${__(
+            '1-9 contributions',
+          )}" data-container="body" data-html="true"></rect>
+          <rect width="13" height="13" x="30" y="0" data-level="2" class="user-contrib-cell has-tooltip contrib-legend" title="${__(
+            '10-19 contributions',
+          )}" data-container="body" data-html="true"></rect>
+          <rect width="13" height="13" x="45" y="0" data-level="3" class="user-contrib-cell has-tooltip contrib-legend" title="${__(
+            '20-29 contributions',
+          )}" data-container="body" data-html="true"></rect>
+          <rect width="13" height="13" x="60" y="0" data-level="4" class="user-contrib-cell has-tooltip contrib-legend" title="${__(
+            '30+ contributions',
+          )}" data-container="body" data-html="true"></rect>
+        </g>
+      </svg>
+    </div>
+    <div class="calendar-hint gl-font-sm gl-text-secondary"></div>
   </div>
 `;
 
-const CALENDAR_PERIOD_6_MONTHS = 6;
 const CALENDAR_PERIOD_12_MONTHS = 12;
-/* computation based on
- * width = (group + 1) * this.daySizeWithSpace + this.getExtraWidthPadding(group);
- * (see activity_calendar.js)
- */
-const OVERVIEW_CALENDAR_BREAKPOINT = 918;
 
 export default class UserTabs {
   constructor({ defaultAction, action, parentEl }) {
@@ -197,10 +212,11 @@ export default class UserTabs {
     this.loadActivityCalendar();
 
     UserTabs.renderMostRecentBlocks('#js-overview .activities-block', {
-      requestParams: { limit: 15 },
+      requestParams: { limit: 10 },
     });
+
     UserTabs.renderMostRecentBlocks('#js-overview .projects-block', {
-      requestParams: { limit: 10, skip_pagination: true, skip_namespace: true, compact_mode: true },
+      requestParams: { limit: 3, skip_pagination: true, skip_namespace: true, card_mode: true },
     });
 
     this.loaded.overview = true;
@@ -240,7 +256,7 @@ export default class UserTabs {
   }
 
   static renderActivityCalendar(data, $calendarWrap) {
-    const monthsAgo = UserTabs.getVisibleCalendarPeriod($calendarWrap);
+    const monthsAgo = UserTabs.getVisibleCalendarPeriod();
     const calendarActivitiesPath = $calendarWrap.data('calendarActivitiesPath');
     const utcOffset = $calendarWrap.data('utcOffset');
     const calendarHint = __('Issues, merge requests, pushes, and comments.');
@@ -259,6 +275,10 @@ export default class UserTabs {
       firstDayOfWeek: gon.first_day_of_week,
       monthsAgo,
     });
+
+    // Scroll to end
+    const calendarContainer = document.querySelector('.js-contrib-calendar');
+    calendarContainer.scrollLeft = calendarContainer.scrollWidth;
   }
 
   toggleLoading(status) {
@@ -283,10 +303,7 @@ export default class UserTabs {
     return this.$parentEl.find('.nav-links a.active').data('action');
   }
 
-  static getVisibleCalendarPeriod($calendarWrap) {
-    const width = $calendarWrap.width();
-    return width < OVERVIEW_CALENDAR_BREAKPOINT
-      ? CALENDAR_PERIOD_6_MONTHS
-      : CALENDAR_PERIOD_12_MONTHS;
+  static getVisibleCalendarPeriod() {
+    return CALENDAR_PERIOD_12_MONTHS;
   }
 }
diff --git a/app/assets/javascripts/profile/components/activity_calendar.vue b/app/assets/javascripts/profile/components/activity_calendar.vue
index d359b478d35c0523851b6549f0c947e233a86301..afb4ed943e79fc14c7c6a0a1cb416d8b27348d63 100644
--- a/app/assets/javascripts/profile/components/activity_calendar.vue
+++ b/app/assets/javascripts/profile/components/activity_calendar.vue
@@ -78,8 +78,8 @@ export default {
 </script>
 
 <template>
-  <div v-if="showCalendar" ref="calendarContainer">
-    <gl-loading-icon v-if="isLoading" size="md" />
+  <div v-if="showCalendar" ref="calendarContainer" class="gl-mt-5 gl-pb-5 gl-border-b">
+    <gl-loading-icon v-if="isLoading" size="sm" />
     <gl-alert
       v-else-if="hasError"
       :title="$options.i18n.errorAlertTitle"
@@ -88,13 +88,11 @@ export default {
       :primary-button-text="$options.i18n.retry"
       @primaryAction="renderActivityCalendar"
     />
-    <div v-else class="gl-text-center">
-      <div class="gl-display-inline-block gl-relative">
-        <div ref="calendarSvgContainer"></div>
-        <p class="gl-absolute gl-right-0 gl-bottom-0 gl-mb-0 gl-font-sm">
-          {{ $options.i18n.calendarHint }}
-        </p>
-      </div>
+    <div v-else class="gl-display-inline-block gl-relative gl-w-full">
+      <div ref="calendarSvgContainer"></div>
+      <p class="gl-absolute gl-right-0 gl-bottom-0 gl-mb-0 gl-font-sm gl-text-secondary">
+        {{ $options.i18n.calendarHint }}
+      </p>
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/profile/components/overview_tab.vue b/app/assets/javascripts/profile/components/overview_tab.vue
index 8cfa3fb3eea188ed45158038df5dacf477b274ec..148bdbc43b124d539e7df95e3833de102222cbe7 100644
--- a/app/assets/javascripts/profile/components/overview_tab.vue
+++ b/app/assets/javascripts/profile/components/overview_tab.vue
@@ -40,7 +40,7 @@ export default {
 
     try {
       const { data: events } = await axios.get(this.userActivityPath, {
-        params: { limit: 10 },
+        params: { limit: 5 },
       });
       this.events = events;
     } catch (error) {
@@ -54,19 +54,19 @@ export default {
 
 <template>
   <gl-tab :title="$options.i18n.title">
-    <activity-calendar />
-    <div class="gl-mx-n5 gl-display-flex gl-flex-wrap">
-      <div class="gl-px-5 gl-w-full gl-lg-w-half" data-testid="activity-section">
+    <div class="gl-mt-5 gl-display-flex gl-flex-wrap">
+      <div class="gl-w-full" data-testid="activity-section">
         <div
           class="gl-display-flex gl-align-items-center gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid"
         >
           <h4 class="gl-flex-grow-1">{{ $options.i18n.activity }}</h4>
           <gl-link href="">{{ $options.i18n.viewAll }}</gl-link>
         </div>
+        <activity-calendar />
         <gl-loading-icon v-if="eventsLoading" class="gl-mt-5" size="md" />
         <contribution-events v-else :events="events" />
       </div>
-      <div class="gl-px-5 gl-w-full gl-lg-w-half" data-testid="personal-projects-section">
+      <div class="gl-w-full" data-testid="personal-projects-section">
         <div
           class="gl-display-flex gl-align-items-center gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid"
         >
diff --git a/app/assets/javascripts/profile/components/profile_tabs.vue b/app/assets/javascripts/profile/components/profile_tabs.vue
index e24167eb4fa713defd1aec55ef1791a64495357a..a15794ac07d517454862c2b0efa53dbf364f3d16 100644
--- a/app/assets/javascripts/profile/components/profile_tabs.vue
+++ b/app/assets/javascripts/profile/components/profile_tabs.vue
@@ -81,7 +81,7 @@ export default {
   },
   async mounted() {
     try {
-      const response = await getUserProjects(this.userId, { per_page: 10 });
+      const response = await getUserProjects(this.userId, { per_page: 3 });
       this.personalProjects = convertObjectPropsToCamelCase(response.data, { deep: true }).map(
         (project) => {
           // This API does not return the `visibility` key if user is signed out.
diff --git a/app/assets/javascripts/profile/components/user_achievements.vue b/app/assets/javascripts/profile/components/user_achievements.vue
index 7ce6b61c4aca7ca73334202aeba0d051e7ead561..2a5e9175fa284faea0515c0e493e90a3f8f00c31 100644
--- a/app/assets/javascripts/profile/components/user_achievements.vue
+++ b/app/assets/javascripts/profile/components/user_achievements.vue
@@ -67,12 +67,16 @@ export default {
   i18n: {
     awardedBy: s__('Achievements|Awarded %{timeAgo} by %{namespace}'),
     awardedByUnknownNamespace: s__('Achievements|Awarded %{timeAgo} by a private namespace'),
+    achievementsLabel: s__('Achievements|Achievements'),
   },
 };
 </script>
 
 <template>
-  <div class="gl-mb-3">
+  <div v-if="userAchievements && userAchievements.length > 0">
+    <h3 class="h5 gl-mb-2">
+      {{ $options.i18n.achievementsLabel }}
+    </h3>
     <div
       v-for="userAchievement in userAchievements"
       :key="userAchievement.id"
@@ -85,7 +89,7 @@ export default {
         :size="32"
         tabindex="0"
         shape="rect"
-        class="gl-mx-2 gl-p-1 gl-border-none"
+        class="gl-mr-2 gl-p-1 gl-border-none"
       />
       <br />
       <gl-badge v-if="showCountBadge(userAchievement.count)" variant="info" size="sm">{{
diff --git a/app/assets/javascripts/read_more.js b/app/assets/javascripts/read_more.js
index 692f375bb940bcb2abc7b30c6f74dfec23e94ce4..e6289f7f32b63af63bb8dbf243a55348d549606f 100644
--- a/app/assets/javascripts/read_more.js
+++ b/app/assets/javascripts/read_more.js
@@ -16,6 +16,8 @@
  * </div>
  * <button class="js-read-more-trigger">Read more</button>
  *
+ * If data-height is present it will use it to determine if the button should be shown or not.
+ *
  */
 export default function initReadMore(triggerSelector = '.js-read-more-trigger') {
   const triggerEls = document.querySelectorAll(triggerSelector);
@@ -29,6 +31,11 @@ export default function initReadMore(triggerSelector = '.js-read-more-trigger')
       return;
     }
 
+    if (targetEl?.getAttribute('data-height') > targetEl.clientHeight) {
+      triggerEl.remove();
+      return;
+    }
+
     triggerEl.addEventListener(
       'click',
       () => {
diff --git a/app/assets/javascripts/users/profile/actions/components/user_actions_app.vue b/app/assets/javascripts/users/profile/actions/components/user_actions_app.vue
index f994cad6881b618133afc6795e179ab3dffa54e0..dbaf5ed814218217c34ad1a009b47c0b567871ef 100644
--- a/app/assets/javascripts/users/profile/actions/components/user_actions_app.vue
+++ b/app/assets/javascripts/users/profile/actions/components/user_actions_app.vue
@@ -1,10 +1,11 @@
 <script>
-import { GlDisclosureDropdown } from '@gitlab/ui';
+import { GlButton, GlDisclosureDropdown } from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';
 import AbuseCategorySelector from '~/abuse_reports/components/abuse_category_selector.vue';
 
 export default {
   components: {
+    GlButton,
     GlDisclosureDropdown,
     AbuseCategorySelector,
   },
@@ -73,6 +74,7 @@ export default {
     },
   },
   i18n: {
+    userActions: s__('UserProfile|User Actions'),
     userId: s__('UserProfile|Copy user ID: %{id}'),
     userIdCopied: s__('UserProfile|User ID copied to clipboard'),
     rssSubscribe: s__('UserProfile|Subscribe'),
@@ -83,13 +85,17 @@ export default {
 
 <template>
   <span>
-    <gl-disclosure-dropdown
-      data-testid="user-profile-actions"
-      icon="ellipsis_v"
-      category="tertiary"
-      no-caret
-      :items="dropdownItems"
-    />
+    <gl-disclosure-dropdown data-testid="user-profile-actions" no-caret :items="dropdownItems">
+      <template #toggle>
+        <gl-button
+          class="gl-new-dropdown-toggle gl-new-dropdown-icon-only gl-new-dropdown-toggle-no-caret"
+          category="tertiary"
+          icon="ellipsis_v"
+          :aria-label="$options.i18n.userActions"
+          :title="$options.i18n.userActions"
+        />
+      </template>
+    </gl-disclosure-dropdown>
     <abuse-category-selector
       v-if="reportedUserId"
       :reported-user-id="reportedUserId"
diff --git a/app/assets/stylesheets/page_bundles/profile.scss b/app/assets/stylesheets/page_bundles/profile.scss
index 2c08db048fd28a8d12127468145af5dff15c45d3..52c447f0e42a96412a72c62065977a499a99860c 100644
--- a/app/assets/stylesheets/page_bundles/profile.scss
+++ b/app/assets/stylesheets/page_bundles/profile.scss
@@ -29,97 +29,27 @@
   }
 }
 
-.calendar-block {
-  padding-left: 0;
-  padding-right: 0;
-  border-top: 0;
+.calendar-legend,
+.calendar-hint {
+  position: relative;
+  z-index: 1;
+  direction: ltr;
+  margin-top: -36px;
+}
 
-  @media (min-width: map-get($grid-breakpoints, sm)) and (max-width: map-get($grid-breakpoints, sm)) {
-    overflow-x: auto;
-  }
+.calendar-legend {
+  float: left;
 }
 
 .calendar-hint {
-  font-size: 12px;
-  direction: ltr;
-  margin-top: -23px;
   float: right;
 }
 
-.cover-block {
-  text-align: center;
-  background: var(--gray-50, $gray-light);
-  padding-top: 44px;
-  position: relative;
-
-  .avatar-holder {
-    .avatar,
-    .identicon {
-      margin: 0 auto;
-      float: none;
-    }
-
-    .identicon {
-      border-radius: 50%;
-    }
-  }
-
-  .cover-title {
-    color: var(--gl-text-color, $gl-text-color);
-    font-size: 23px;
-
-    h1 {
-      color: var(--gl-text-color, $gl-text-color);
-      margin-bottom: 6px;
-      font-size: 23px;
-    }
-
-    .visibility-icon {
-      display: inline-block;
-      margin-left: 5px;
-      font-size: 18px;
-      color: color('gray');
-    }
-
-    p {
-      padding: 0 $gl-padding;
-      color: var(--gl-text-color, $gl-text-color);
-    }
-  }
-
-  .cover-controls {
-    @include media-breakpoint-up(sm) {
-      position: absolute;
-      top: 1rem;
-      right: 1.25rem;
-    }
-
-    &.left {
-      @include media-breakpoint-up(sm) {
-        left: 1.25rem;
-        right: auto;
-      }
-    }
-  }
-
-  &.user-cover-block {
-    padding: 24px 0 0;
-
-    .nav-links {
-      width: 100%;
-      float: none;
-
-      &.scrolling-tabs {
-        float: none;
-      }
-    }
-
-    li:first-child {
-      margin-left: auto;
-    }
-
-    li:last-child {
-      margin-right: auto;
+.user-profile-image {
+  .gl-avatar {
+    @include media-breakpoint-up(md) {
+      height: 7.5rem;
+      width: 7.5rem;
     }
   }
 }
@@ -140,12 +70,36 @@
   max-width: 600px;
 }
 
-.user-calendar {
-  text-align: center;
-  min-height: 172px;
+.profile-readme-wrapper {
+  $height: 22rem;
+  $scrim: 2rem;
+  $readme-bar-height: 2.5rem;
+
+  .profile-readme:not(.is-expanded) {
+    max-height: $height;
+
+    // only appears when size is > $height.
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: calc(#{$height} - #{$scrim} - #{$readme-bar-height});
+      height: $scrim;
+      background: linear-gradient(180deg, transparent, $white);
+
+      .gl-dark & {
+        background: linear-gradient(180deg, transparent, $black);
+      }
+    }
+  }
 
-  .calendar {
-    display: inline-block;
+  // only appears when size is > $height.
+  .read-more-bar {
+    bottom: 1px;
+    left: 1px;
+    right: 1px;
   }
 }
 
@@ -158,20 +112,27 @@
 }
 
 .user-contrib-text {
-  font-size: 12px;
+  font-size: 11px;
   fill: $calendar-user-contrib-text;
 }
 
 .user-profile {
-  .profile-header {
-    margin: 0 $gl-padding;
-
-    &.with-no-profile-tabs {
-      margin-bottom: $gl-padding-24;
+  @include media-breakpoint-up(lg) {
+    .profile-header {
+      position: sticky;
+      top: $calc-application-header-height;
+      height: $calc-application-viewport-height;
+      margin-bottom: $content-wrapper-padding;
     }
+  }
+
+  .cover-controls {
+    position: absolute;
+    top: calc(#{$calc-application-header-height} + #{$gl-padding-24});
+    right: $gl-padding-8;
 
-    .avatar-holder {
-      margin: 0 auto 10px;
+    @include media-breakpoint-up(lg) {
+      position: static;
     }
   }
 
@@ -201,17 +162,7 @@
     }
   }
 
-  .projects-block {
-    @include media-breakpoint-up(lg) {
-      margin-left: 5px;
-    }
-  }
-
   @include media-breakpoint-down(xs) {
-    .cover-block {
-      padding-top: 20px;
-    }
-
     .user-profile-nav {
       a {
         margin-right: 0;
@@ -274,3 +225,25 @@
     border: 0;
   }
 }
+
+.user-profile {
+  @include media-breakpoint-up(lg) {
+    display: grid;
+    grid-template-columns: minmax(240px, 1fr) 3fr;
+    gap: 3rem;
+  }
+}
+
+.user-profile-sidebar {
+  z-index: 2;
+}
+
+.user-profile-sidebar,
+.user-profile-content {
+  min-width: 1px; // grid overflow fix
+}
+
+.js-contrib-calendar {
+  // make contrib calendar scrollable
+  overflow-x: auto;
+}
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 8e0fab04ab29d5875087b87cc1d95193f2a4cb0e..bd95035bf5caaba4215924cfedfd50b4e79bd82b 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -1136,8 +1136,10 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
 }
 
 .user-activity-content {
+  @include gl-relative;
+
   &::before {
-    @include vertical-line(80px, 25px);
+    @include vertical-line(30px, 10px);
     background: var(--gray-50, $gray-50);
   }
 
diff --git a/app/controllers/users_controller.rb b/app/controllers/users_controller.rb
index 88a8851607b21a886cc053569f8d2ac7211d567b..0d8a14acbd0c721f2ab70020f2456d4fdbbd5dae 100644
--- a/app/controllers/users_controller.rb
+++ b/app/controllers/users_controller.rb
@@ -143,13 +143,14 @@ def present_projects
     skip_pagination = Gitlab::Utils.to_boolean(params[:skip_pagination])
     skip_namespace = Gitlab::Utils.to_boolean(params[:skip_namespace])
     compact_mode = Gitlab::Utils.to_boolean(params[:compact_mode])
+    card_mode = Gitlab::Utils.to_boolean(params[:card_mode])
 
     respond_to do |format|
       format.html { render 'show' }
       format.json do
         projects = yield
 
-        pager_json("shared/projects/_list", projects.count, projects: projects, skip_pagination: skip_pagination, skip_namespace: skip_namespace, compact_mode: compact_mode)
+        pager_json("shared/projects/_list", projects.count, projects: projects, skip_pagination: skip_pagination, skip_namespace: skip_namespace, compact_mode: compact_mode, card_mode: card_mode)
       end
     end
   end
diff --git a/app/views/shared/projects/_list.html.haml b/app/views/shared/projects/_list.html.haml
index 74c325383a1a770acc4eabbd7a9446c4cf472e38..572b5e1754549bb3c64b5088300d46aae1122e85 100644
--- a/app/views/shared/projects/_list.html.haml
+++ b/app/views/shared/projects/_list.html.haml
@@ -10,7 +10,8 @@
 - remote = false unless local_assigns[:remote] == true
 - skip_pagination = false unless local_assigns[:skip_pagination] == true
 - compact_mode = false unless local_assigns[:compact_mode] == true
-- css_classes = "#{'compact' if compact_mode} #{'explore' if explore_projects_tab?}"
+- card_mode = false unless local_assigns[:card_mode] == true
+- css_classes = "#{'compact' if compact_mode} #{'gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row gl-gap-4 gl-overflow-x-auto' if card_mode} #{'explore' if explore_projects_tab?}"
 - contributed_projects_current_user_empty_message_header = s_('UserProfile|Explore public groups to find projects to contribute to.')
 - contributed_projects_visitor_empty_message = s_('UserProfile|This user hasn\'t contributed to any projects')
 - starred_projects_illustration_path = 'illustrations/empty-state/empty-projects-starred-md.svg'
@@ -33,14 +34,25 @@
     - load_pipeline_status(projects) if pipeline_status
     - load_max_project_member_accesses(projects) # Prime cache used in shared/projects/project view rendered below
     - load_catalog_resources(projects)
-    %ul.projects-list.gl-text-secondary.gl-w-full.gl-my-2{ class: css_classes }
-      - projects.each_with_index do |project, i|
-        - css_class = (i >= projects_limit) || project.pending_delete? ? 'hide' : nil
-        = render "shared/projects/project", project: project, skip_namespace: skip_namespace,
-          avatar: avatar, stars: stars, css_class: css_class, use_creator_avatar: use_creator_avatar,
-          forks: able_to_see_forks_count?(project, user), show_last_commit_as_description: show_last_commit_as_description,
-          user: user, merge_requests: able_to_see_merge_requests?(project, user), issues: able_to_see_issues?(project, user),
-          pipeline_status: pipeline_status, compact_mode: compact_mode
+
+    - if card_mode
+      .projects-list.gl-text-secondary.gl-w-full{ class: css_classes }
+        - projects.each_with_index do |project, i|
+          - css_class = (i >= projects_limit) || project.pending_delete? ? 'hide' : nil
+          = render "shared/projects/project-card", project: project, skip_namespace: skip_namespace,
+            avatar: avatar, stars: stars, css_class: css_class, use_creator_avatar: use_creator_avatar,
+            forks: able_to_see_forks_count?(project, user), show_last_commit_as_description: show_last_commit_as_description,
+            user: user, merge_requests: able_to_see_merge_requests?(project, user), issues: able_to_see_issues?(project, user),
+            pipeline_status: pipeline_status, compact_mode: compact_mode
+    - else
+      %ul.projects-list.gl-text-secondary.gl-w-full.gl-my-2{ class: css_classes }
+        - projects.each_with_index do |project, i|
+          - css_class = (i >= projects_limit) || project.pending_delete? ? 'hide' : nil
+          = render "shared/projects/project", project: project, skip_namespace: skip_namespace,
+            avatar: avatar, stars: stars, css_class: css_class, use_creator_avatar: use_creator_avatar,
+            forks: able_to_see_forks_count?(project, user), show_last_commit_as_description: show_last_commit_as_description,
+            user: user, merge_requests: able_to_see_merge_requests?(project, user), issues: able_to_see_issues?(project, user),
+            pipeline_status: pipeline_status, compact_mode: compact_mode
     = paginate_collection(projects, remote: remote) unless skip_pagination
   - else
     - if @contributed_projects
diff --git a/app/views/shared/projects/_project-card.html.haml b/app/views/shared/projects/_project-card.html.haml
new file mode 100644
index 0000000000000000000000000000000000000000..84a8365c973b3c35447326f8102b14fa421e0745
--- /dev/null
+++ b/app/views/shared/projects/_project-card.html.haml
@@ -0,0 +1,113 @@
+- avatar = true unless local_assigns[:avatar] == false
+- stars = true unless local_assigns[:stars] == false
+- forks = true unless local_assigns[:forks] == false
+- merge_requests = true unless local_assigns[:merge_requests] == false
+- issues = true unless local_assigns[:issues] == false
+- pipeline_status = true unless local_assigns[:pipeline_status] == false
+- skip_namespace = false unless local_assigns[:skip_namespace] == true
+- access = max_project_member_access(project)
+- compact_mode = false unless local_assigns[:compact_mode] == true
+- show_last_commit_as_description = false unless local_assigns[:show_last_commit_as_description] == true && can_show_last_commit_in_list?(project)
+- css_class = "gl-sm-display-flex gl-align-items-center gl-vertical-align-middle!" if project.description.blank? && !show_last_commit_as_description
+- updated_tooltip = time_ago_with_tooltip(project.last_activity_date)
+- show_pipeline_status_icon = pipeline_status && can?(current_user, :read_cross_project) && project.pipeline_status.has_status? && can?(current_user, :read_build, project)
+- last_pipeline = last_pipeline_from_status_cache(project) if show_pipeline_status_icon
+- css_controls_class = "with-pipeline-status" if show_pipeline_status_icon && last_pipeline.present?
+- css_metadata_classes = "gl-display-flex gl-align-items-center gl-ml-0! gl-reset-color! icon-wrapper has-tooltip"
+
+= render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card gl-justify-content-space-between gl-flex-basis-third gl-flex-grow-1 gl-mt-0' }, header_options: { class: 'gl-new-card-header gl-flex-grow-1 gl-align-items-flex-start gl-justify-content-start gl-border-b-0' }, body_options: { class: 'gl-new-card-body gl-px-5 gl-py-4' }) do |c|
+  - c.with_header do
+    - if avatar
+      = link_to project_path(project), class: dom_class(project) do
+        - if project.creator && use_creator_avatar
+          = render Pajamas::AvatarComponent.new(project.creator, size: 48, alt: '', class: 'gl-mr-5')
+        - else
+          = render Pajamas::AvatarComponent.new(project, size: 48, alt: '', class: 'gl-mr-5')
+
+    .gl-display-flex.gl-flex-wrap.gl-pt-2
+      %h2.gl-font-base.gl-line-height-20.gl-my-0.gl-flex-basis-full
+        = link_to project_path(project), class: 'text-plain gl-mr-3 js-prefetch-document', title: project.name do
+          %span.namespace-name.gl-font-weight-normal
+            - if project.namespace && !skip_namespace
+              = project.namespace.human_name
+              \/
+          %span.project-name<
+            = project.name
+
+      = visibility_level_content(project, css_class: 'gl-mr-3')
+
+      - if project.catalog_resource
+        = render partial: 'shared/ci_catalog_badge', locals: { href: project_ci_catalog_resource_path(project, project.catalog_resource) }
+
+      - if explore_projects_tab? && project_license_name(project)
+        %span.gl-display-inline-flex.gl-align-items-center.gl-mr-3
+          = sprite_icon('scale', size: 14, css_class: 'gl-mr-2')
+          = project_license_name(project)
+
+      - if !explore_projects_tab? && access&.nonzero?
+        -# haml-lint:disable UnnecessaryStringOutput
+        = ' ' # prevent haml from eating the space between elements
+        %span.user-access-role.gl-display-block.gl-m-0{ data: { testid: 'user-role-content' } }= localized_project_human_access(access)
+
+      - if !explore_projects_tab?
+        = render_if_exists 'compliance_management/compliance_framework/compliance_framework_badge', project: project, additional_classes: 'gl-ml-3!'
+  - c.with_body do
+    .project-details.gl-pr-9.gl-sm-pr-0.gl-w-full.gl-display-flex.gl-flex-direction-column{ data: { testid: 'project-content', qa_project_name: project.name } }
+      - if show_last_commit_as_description
+        .description.gl-display-none.gl-sm-display-block.gl-overflow-hidden.gl-mr-3.gl-mt-2.gl-font-sm
+          = link_to_markdown(project.commit.title, project_commit_path(project, project.commit), class: "commit-row-message")
+      - elsif project.description.present?
+        .description.gl-display-none.gl-sm-display-block.gl-overflow-hidden.gl-mr-3.gl-mt-2.gl-font-sm
+          = markdown_field(project, :description)
+
+      - if project.topics.any?
+        .gl-mt-2
+          = render "shared/projects/topics", project: project.present(current_user: current_user)
+
+      = render_if_exists 'shared/projects/removed', project: project
+
+      .gl-display-flex.gl-mt-3{ class: "#{css_class} gl-sm-display-none!" }
+        .controls.gl-display-flex.gl-align-items-center
+          - if show_pipeline_status_icon && last_pipeline.present?
+            - pipeline_path = pipelines_project_commit_path(project.pipeline_status.project, project.pipeline_status.sha, ref: project.pipeline_status.ref)
+            %span.icon-wrapper.pipeline-status
+              = render 'ci/status/icon', status: last_pipeline.detailed_status(current_user), tooltip_placement: 'top', path: pipeline_path
+
+          = render_if_exists 'shared/projects/archived', project: project
+          - if stars
+            = link_to project_starrers_path(project), class: "#{css_metadata_classes} stars", title: _('Stars'), data: { container: 'body', placement: 'top' } do
+              = sprite_icon('star-o', size: 14, css_class: 'gl-mr-2')
+              = badge_count(project.star_count)
+        .updated-note.gl-font-sm.gl-ml-3.gl-sm-ml-0
+          %span
+            = _('Updated')
+            = updated_tooltip
+
+    .project-controls.gl-display-flex.gl-flex-direction-column.gl-align-items-flex-start.gl-w-full{ data: { testid: 'project_controls'} }
+      .controls.gl-display-flex.gl-align-items-center.gl-gap-4.gl-mb-2{ class: "#{css_controls_class} gl-pr-0!" }
+        - if show_pipeline_status_icon && last_pipeline.present?
+          - pipeline_path = pipelines_project_commit_path(project.pipeline_status.project, project.pipeline_status.sha, ref: project.pipeline_status.ref)
+          %span.icon-wrapper.pipeline-status
+            = render 'ci/status/icon', status: last_pipeline.detailed_status(current_user), tooltip_placement: 'top', path: pipeline_path
+
+        = render_if_exists 'shared/projects/archived', project: project
+        - if stars
+          = link_to project_starrers_path(project), class: "#{css_metadata_classes} stars", title: _('Stars'), data: { container: 'body', placement: 'top' } do
+            = sprite_icon('star-o', size: 14, css_class: 'gl-mr-2')
+            = badge_count(project.star_count)
+        - if show_count?(disabled: !forks, compact_mode: compact_mode)
+          = link_to project_forks_path(project), class: "#{css_metadata_classes} forks", title: _('Forks'), data: { container: 'body', placement: 'top' } do
+            = sprite_icon('fork', size: 14, css_class: 'gl-mr-2')
+            = badge_count(project.forks_count)
+        - if show_count?(disabled: !merge_requests, compact_mode: compact_mode)
+          = link_to project_merge_requests_path(project), class: "#{css_metadata_classes} merge-requests", title: _('Merge requests'), data: { container: 'body', placement: 'top' } do
+            = sprite_icon('git-merge', size: 14, css_class: 'gl-mr-2')
+            = badge_count(project.open_merge_requests_count)
+        - if show_count?(disabled: !issues, compact_mode: compact_mode)
+          = link_to project_issues_path(project), class: "#{css_metadata_classes} issues", title: _('Issues'), data: { container: 'body', placement: 'top' } do
+            = sprite_icon('issues', size: 14, css_class: 'gl-mr-2')
+            = badge_count(project.open_issues_count)
+      .updated-note.gl-font-sm.gl-white-space-nowrap.gl-justify-content-start
+        %span
+          = _('Updated')
+          = updated_tooltip
diff --git a/app/views/users/_follow_user.html.haml b/app/views/users/_follow_user.html.haml
index 71f8a462cbf7bf881bb45f4a4ade286e7a9be948..953e74c1f27c1698471f8e9f7229991c3f122869 100644
--- a/app/views/users/_follow_user.html.haml
+++ b/app/views/users/_follow_user.html.haml
@@ -1,11 +1,9 @@
-- link_classes = "flex-grow-1 gl-display-inline-block"
-
 - if current_user&.following_users_allowed?(@user)
   - if current_user.following?(@user)
-    = form_tag user_unfollow_path(@user, :json), class: link_classes do
-      = render Pajamas::ButtonComponent.new(type: :submit, button_options: { class: 'gl-w-full', data: { track_action: 'click_button', track_label: 'unfollow_from_profile' } }) do
+    = form_tag user_unfollow_path(@user, :json) do
+      = render Pajamas::ButtonComponent.new(type: :submit, button_options: { data: { track_action: 'click_button', track_label: 'unfollow_from_profile' } }) do
         = _('Unfollow')
   - else
-    = form_tag user_follow_path(@user, :json), class: link_classes do
-      = render Pajamas::ButtonComponent.new(variant: :confirm, type: :submit, button_options: { class: 'gl-w-full', data: { testid: 'follow-user-link', track_action: 'click_button', track_label: 'follow_from_profile' } }) do
+    = form_tag user_follow_path(@user, :json) do
+      = render Pajamas::ButtonComponent.new(variant: :confirm, type: :submit, button_options: { data: { testid: 'follow-user-link', track_action: 'click_button', track_label: 'follow_from_profile' } }) do
         = _('Follow')
diff --git a/app/views/users/_overview.html.haml b/app/views/users/_overview.html.haml
index 597e7c37388590afe81ee7095d8f319724ea54eb..67fb6514478abbec4e862625272e5ce2696ab71d 100644
--- a/app/views/users/_overview.html.haml
+++ b/app/views/users/_overview.html.haml
@@ -1,16 +1,25 @@
-- activity_pane_class = Feature.enabled?(:security_auto_fix) && @user.bot? ? "col-12" : "col-md-12 col-lg-6 gl-align-self-start"
+- if can?(current_user, :read_cross_project)
+  .gl-align-self-start
+    .activities-block
+      .user-calendar.gl-border.light.gl-rounded-base.gl-px-3.gl-pt-4.gl-mb-5{ data: { calendar_path: user_calendar_path(@user, :json), calendar_activities_path: user_calendar_activities_path, utc_offset: local_timezone_instance(@user.timezone).now.utc_offset } }
+        = gl_loading_icon(size: 'md', css_class: 'gl-my-8')
+        .user-calendar-error.invisible
+          = _('There was an error loading users activity calendar.')
+          %a.js-retry-load{ href: '#' }
+            = s_('UserProfile|Retry')
 
-.row.d-none.d-sm-flex
-  .col-12.calendar-block.gl-my-3
-    .user-calendar.light{ data: { calendar_path: user_calendar_path(@user, :json), calendar_activities_path: user_calendar_activities_path, utc_offset: local_timezone_instance(@user.timezone).now.utc_offset } }
-      = gl_loading_icon(size: 'md', css_class: 'gl-my-8')
-      .user-calendar-error.invisible
-        = _('There was an error loading users activity calendar.')
-        %a.js-retry-load{ href: '#' }
-          = s_('UserProfile|Retry')
-- if @user.user_readme&.rich_viewer
-  .row.justify-content-center
-    .col-12.col-md-10.col-lg-8.gl-my-6
+      .gl-display-flex.gl-align-items-baseline
+        %h4.gl-font-lg.gl-flex-grow-1
+          = Feature.enabled?(:security_auto_fix) && @user.bot? ? s_('UserProfile|Bot activity') : s_('UserProfile|Activity')
+        = link_to s_('UserProfile|View all'), user_activity_path, class: "hide js-view-all"
+
+      .user-calendar-activities
+      .overview-content-list.user-activity-content.gl-mb-5{ data: { href: user_activity_path, testid: 'user-activity-content' } }
+        = gl_loading_icon(size: 'md', css_class: 'loading')
+
+- if can?(current_user, :read_cross_project) && @user.user_readme&.rich_viewer
+  .profile-readme-wrapper.gl-relative.gl-overflow-hidden.gl-mb-5{ data: { height: 320 } }
+    .profile-readme.read-more-container.gl-relative.justify-content-center.gl-border.gl-rounded-base.gl-py-5.gl-px-6.gl-overflow-hidden
       .gl-display-flex
         %ol.breadcrumb.gl-breadcrumb-list.gl-mb-4
           %li.gl-breadcrumb-item
@@ -20,29 +29,19 @@
             = link_to @user.user_readme.path, @user.user_project.readme_url
         - if current_user == @user
           .gl-ml-auto
-            = link_to _('Edit'), edit_blob_path(@user.user_project, @user.user_project.default_branch, @user.user_readme.path)
+            = link_to _('Edit file'), edit_blob_path(@user.user_project, @user.user_project.default_branch, @user.user_readme.path)
       = render 'projects/blob/viewer', viewer: @user.user_readme.rich_viewer, load_async: false
-.row
-  .col-12.user-calendar-activities
-.row
-  %div{ class: activity_pane_class }
-    - if can?(current_user, :read_cross_project)
-      .activities-block
-        .gl-mt-5
-          .gl-display-flex.gl-align-items-center.gl-border-b-1.gl-border-b-gray-100.gl-border-b-solid
-            %h4.gl-flex-grow-1
-              = Feature.enabled?(:security_auto_fix) && @user.bot? ? s_('UserProfile|Bot activity') : s_('UserProfile|Activity')
-            = link_to s_('UserProfile|View all'), user_activity_path, class: "hide js-view-all"
-          .overview-content-list.user-activity-content{ data: { href: user_activity_path, testid: 'user-activity-content' } }
-            = gl_loading_icon(size: 'md', css_class: 'loading')
+    .js-read-more-trigger.read-more-bar.gl-h-8.gl-absolute.gl-bottom-0.gl-z-index-2.gl-bg-white.gl-px-6.gl-rounded-bottom-base
+      = render Pajamas::ButtonComponent.new(variant: :link, button_options: { class: 'gl-mt-4 gl-ml-n1', 'aria-label': _("Expand Readme") }) do
+        = sprite_icon('chevron-down', size: 14, css_class: 'gl-mr-1 gl-mb-n1')
+        = _("Read more")
 
-  - unless Feature.enabled?(:security_auto_fix) && @user.bot?
-    .col-md-12.col-lg-6
-      .projects-block
-        .gl-mt-5
-          .gl-display-flex.gl-align-items-center.gl-border-b-1.gl-border-b-gray-100.gl-border-b-solid
-            %h4.gl-flex-grow-1
-              = s_('UserProfile|Personal projects')
-            = link_to s_('UserProfile|View all'), user_projects_path, class: "hide js-view-all"
-          .overview-content-list{ data: { href: user_projects_path } }
-            = gl_loading_icon(size: 'md', css_class: 'loading')
+- unless Feature.enabled?(:security_auto_fix) && @user.bot?
+  - if @user.personal_projects.any?
+    .projects-block
+      .gl-display-flex.gl-align-items-baseline
+        %h4.gl-font-lg.gl-flex-grow-1
+          = s_('UserProfile|Personal projects')
+        = link_to s_('UserProfile|View all'), user_projects_path, class: "hide js-view-all"
+      .overview-content-list{ data: { href: user_projects_path } }
+        = gl_loading_icon(size: 'md', css_class: 'loading')
diff --git a/app/views/users/_profile_basic_info.html.haml b/app/views/users/_profile_basic_info.html.haml
deleted file mode 100644
index 7dd131dbe2c7dac958fcc22585f284d24b9ab48e..0000000000000000000000000000000000000000
--- a/app/views/users/_profile_basic_info.html.haml
+++ /dev/null
@@ -1,6 +0,0 @@
-.gl-text-gray-900
-  = render 'middle_dot_divider', stacking: true do
-    @#{@user.username}
-  - if can?(current_user, :read_user_profile, @user)
-    = render 'middle_dot_divider', stacking: true do
-      = s_('Member since %{date}') % { date: l(@user.created_at.to_date, format: :long) }
diff --git a/app/views/users/_view_user_in_admin_area.html.haml b/app/views/users/_view_user_in_admin_area.html.haml
index 36b3c33d8ab3624a74653057e35a5e6604be1d3a..c8265ac9a9aeaf1ff4a167066e326b4c33f50363 100644
--- a/app/views/users/_view_user_in_admin_area.html.haml
+++ b/app/views/users/_view_user_in_admin_area.html.haml
@@ -1,4 +1,4 @@
 - if current_user && current_user.admin?
   = render Pajamas::ButtonComponent.new(href: [:admin, @user],
     icon: 'user',
-    button_options: { class: 'gl-flex-grow-1 has-tooltip', title: s_('UserProfile|View user in admin area'), data: { toggle: 'tooltip', placement: 'bottom', container: 'body' } })
+    button_options: { class: 'has-tooltip', title: s_('UserProfile|View user in admin area'), data: { toggle: 'tooltip', placement: 'bottom', container: 'body' } })
diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml
index e23555428aa272df53de5bf0230183f88743924e..762f3961851f836ce6ada79305d2043d3c6b4d1a 100644
--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
@@ -14,105 +14,112 @@
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, user_url(@user, format: :atom), title: "#{@user.name} activity")
 
-.user-profile
-  .cover-block.user-cover-block.gl-border-t.gl-border-b.gl-mt-n1
-    %div{ class: container_class }
-      .cover-controls.gl-display-flex.gl-gap-3.gl-pb-4
-        = render 'users/follow_user'
-        -# The following edit button is mutually exclusive to the follow user button, they won't be shown together
-        - if @user == current_user
-          = render Pajamas::ButtonComponent.new(href: profile_path,
-            button_options: { class: 'gl-flex-grow-1', title: s_('UserProfile|Edit profile') }) do
-            = s_("UserProfile|Edit profile")
-        = render 'users/view_gpg_keys'
-        = render 'users/view_user_in_admin_area'
-        .js-user-profile-actions{ data: user_profile_actions_data(@user) }
+%div{ class: container_class }
+  .user-profile
+    .user-profile-sidebar
+      .profile-header.gl-py-6.gl-overflow-y-auto.gl-sm-pr-4{ class: [('with-no-profile-tabs' if profile_tabs.empty?)] }
 
-      .profile-header{ class: [('with-no-profile-tabs' if profile_tabs.empty?), ('gl-mb-4!' if show_super_sidebar?)] }
-        .gl-display-inline-block.gl-mx-8.gl-vertical-align-top
-          .avatar-holder
-            = link_to avatar_icon_for_user(@user, 400, current_user: current_user), target: '_blank', rel: 'noopener noreferrer' do
-              = render Pajamas::AvatarComponent.new(@user, alt: "", size: 96, avatar_options: { itemprop: "image" })
-          - if @user.achievements_enabled && Ability.allowed?(current_user, :read_user_profile, @user)
-            #js-user-achievements{ data: { root_url: root_url, user_id: @user.id } }
-        .gl-display-inline-block.gl-vertical-align-top.gl-text-left.gl-max-w-80
+        = link_to avatar_icon_for_user(@user, 400, current_user: current_user), class: "user-profile-image", target: '_blank', rel: 'noopener noreferrer', alt: 'View large avatar' do
+          = render Pajamas::AvatarComponent.new(@user, alt: "", size: 96, avatar_options: { itemprop: "image" })
+
+        .gl-vertical-align-top.gl-text-left.gl-max-w-80.gl-overflow-wrap-anywhere
           - if @user.blocked? || !@user.confirmed?
             .user-info
-              %h1.cover-title.gl-my-0
+              %h1.gl-font-size-h1.gl-line-height-1.gl-mb-1
                 = user_display_name(@user)
-            = render "users/profile_basic_info"
+              %h2.gl-font-size-h2.gl-text-gray-600.gl-font-weight-normal.gl-mt-0
+                @#{@user.username}
+
           - else
             .user-info
-              %h1.cover-title.gl-my-0{ itemprop: 'name' }
+              %h1.gl-font-size-h1.gl-line-height-1.gl-mb-1{ itemprop: 'name' }
                 = @user.name
-                - if @user.pronouns.present?
-                  %span.gl-font-base.gl-text-gray-500.gl-vertical-align-middle
-                    = "(#{@user.pronouns})"
-                - if @user.status&.busy?
-                  = render Pajamas::BadgeComponent.new(s_('UserProfile|Busy'), size: 'sm', variant: 'warning', class: 'gl-vertical-align-middle')
-
-              - if @user.pronunciation.present?
-                .gl-align-items-center
-                  %p.gl-mb-4.gl-text-gray-500= s_("UserProfile|Pronounced as: %{pronunciation}") % { pronunciation: @user.pronunciation }
-
-              - if @user.status&.customized?
-                .cover-status.gl-display-inline-flex.gl-align-items-baseline.gl-mb-3
-                  = emoji_icon(@user.status.emoji, class: 'gl-mr-2')
-                  = markdown_field(@user.status, :message)
-              = render "users/profile_basic_info"
-              - user_local_time = local_time(@user.timezone)
-              - if @user.location.present? || user_local_time.present? || work_information(@user).present?
-                .gl-text-gray-900
+              %h2.gl-font-size-h2.gl-text-gray-600.gl-font-weight-normal.gl-mt-0
+                @#{@user.username}
+
+              .gl-display-flex.gl-gap-4.gl-flex-direction-column
+                - if @user.pronouns.present? || @user.pronunciation.present?
+                  .gl-font-sm
+                    - if @user.pronunciation.present?
+                      %p.gl-mb-0
+                        = s_("UserProfile|Pronounced as: %{pronunciation}") % { pronunciation: @user.pronunciation }
+                    - if @user.pronouns.present?
+                      %p.gl-mb-0
+                        = s_("UserProfile|Pronouns: %{pronouns}") % { pronouns: @user.pronouns }
+
+                - if @user.status&.customized? || @user.status&.busy?
+                  .cover-status.gl-font-sm.gl-border-l.gl-border-3.gl-px-3.gl-py-2.gl-bg-gray-10.gl-display-flex.gl-flex-direction-column.gl-gap-2
+                    - if @user.status&.busy?
+                      %div
+                        = render Pajamas::BadgeComponent.new(s_('UserProfile|Busy'), size: 'sm', variant: 'warning', class: 'gl-vertical-align-middle')
+                    - if @user.status&.customized?
+                      .gl-display-inline-flex.gl-gap-3.gl-align-items-baseline
+                        = emoji_icon(@user.status.emoji)
+                        = markdown_field(@user.status, :message)
+
+                - if @user.bio.present? && @user.confirmed? && !@user.blocked?
+                  %p.profile-user-bio.gl-mb-0
+                    = @user.bio
+
+                - if @user.achievements_enabled && Ability.allowed?(current_user, :read_user_profile, @user)
+                  #js-user-achievements{ data: { root_url: root_url, user_id: @user.id } }
+
+                - user_local_time = local_time(@user.timezone)
+                %div{ itemprop: 'address', itemscope: true, itemtype: 'https://schema.org/PostalAddress' }
+                  %h3.h5.gl-mb-2= s_('UserProfile|Info')
+                  - if work_information(@user).present?
+                    .gl-mb-2
+                      = sprite_icon('work', css_class: 'fgray')
+                      %span.gl-ml-1
+                        = work_information(@user, with_schema_markup: true)
                   - if @user.location.present?
-                    = render 'middle_dot_divider', stacking: true, itemprop: 'address', itemscope: true, itemtype: 'https://schema.org/PostalAddress' do
+                    .gl-mb-2
                       = sprite_icon('location', css_class: 'fgray')
-                      %span{ itemprop: 'addressLocality' }
+                      %span.gl-ml-1{ itemprop: 'addressLocality' }
                         = @user.location
                   - if user_local_time.present?
-                    = render 'middle_dot_divider', stacking: true, data: { testid: 'user-local-time' } do
+                    .gl-mb-2{ data: { testid: 'user-local-time' } }
                       = sprite_icon('clock', css_class: 'fgray')
-                      %span
+                      %span.gl-ml-1
                         = user_local_time
-                  - if work_information(@user).present?
-                    = render 'middle_dot_divider', stacking: true do
-                      = sprite_icon('work', css_class: 'fgray')
-                      %span
-                        = work_information(@user, with_schema_markup: true)
-              .gl-text-gray-900
-                - if @user.skype.present?
-                  = render 'middle_dot_divider' do
-                    = link_to "skype:#{@user.skype}", class: 'gl-hover-text-decoration-none', title: "Skype" do
-                      = sprite_icon('skype', css_class: 'skype-icon')
-                - if @user.linkedin.present?
-                  = render 'middle_dot_divider' do
-                    = link_to linkedin_url(@user), class: 'gl-hover-text-decoration-none', title: "LinkedIn", target: '_blank', rel: 'noopener noreferrer nofollow' do
-                      = sprite_icon('linkedin', css_class: 'linkedin-icon')
-                - if @user.twitter.present?
-                  = render 'middle_dot_divider', breakpoint: 'sm' do
-                    = link_to twitter_url(@user), class: 'gl-hover-text-decoration-none', title: "Twitter", target: '_blank', rel: 'noopener noreferrer nofollow' do
-                      = sprite_icon('twitter', css_class: 'twitter-icon')
-                - if @user.discord.present?
-                  = render 'middle_dot_divider', breakpoint: 'sm' do
-                    = link_to discord_url(@user), class: 'gl-hover-text-decoration-none', title: "Discord", target: '_blank', rel: 'noopener noreferrer nofollow' do
-                      = sprite_icon('discord', css_class: 'discord-icon')
-                - if Feature.enabled?(:mastodon_social_ui, @user) && @user.mastodon.present?
-                  = render 'middle_dot_divider', breakpoint: 'sm' do
-                    = link_to mastodon_url(@user), class: 'gl-hover-text-decoration-none', title: "Mastodon", target: '_blank', rel: 'noopener noreferrer nofollow' do
-                      = sprite_icon('mastodon', css_class: 'mastodon-icon')
-                - if @user.website_url.present?
-                  = render 'middle_dot_divider', stacking: true do
-                    - if Feature.enabled?(:security_auto_fix) && @user.bot?
-                      = sprite_icon('question-o', css_class: 'gl-text-blue-500')
-                    = link_to @user.short_website_url, @user.full_website_url, target: '_blank', rel: 'me noopener noreferrer nofollow', itemprop: 'url'
-                - if display_public_email?(@user)
-                  = render 'middle_dot_divider', stacking: true do
-                    = link_to @user.public_email, "mailto:#{@user.public_email}", itemprop: 'email'
-
-              -# Ensure this stays indented one level less than the social links
-              -# See https://gitlab.com/gitlab-org/gitlab/-/merge_requests/118314
-              - if @user.bio.present? && @user.confirmed? && !@user.blocked?
-                %p.profile-user-bio.gl-mb-3
-                  = @user.bio
+                  = sprite_icon('calendar', css_class: 'fgray')
+                  %span.gl-ml-1= s_('Member since %{date}') % { date: l(@user.created_at.to_date, format: :long) }
+
+                .gl-text-gray-900
+                  - if @user.website_url.present? || display_public_email?(@user) || @user.skype.present? || @user.linkedin.present? || @user.twitter.present? || (Feature.enabled?(:mastodon_social_ui, @user) && @user.mastodon.present?) || @user.discord.present?
+                    %h3.h5.gl-mb-2= s_('UserProfile|Contact')
+                  - if @user.website_url.present?
+                    .gl-mb-2
+                      - if Feature.enabled?(:security_auto_fix) && @user.bot?
+                        = sprite_icon('question-o', css_class: 'gl-text-blue-500')
+                      = sprite_icon('earth', css_class: 'fgray')
+                      = link_to @user.short_website_url, @user.full_website_url, class: 'gl-text-gray-900 gl-ml-1', target: '_blank', rel: 'me noopener noreferrer nofollow', itemprop: 'url'
+                  - if display_public_email?(@user)
+                    .gl-mb-2
+                      = sprite_icon('mail', css_class: 'fgray')
+                      = link_to @user.public_email, "mailto:#{@user.public_email}", class: 'gl-text-gray-900 gl-ml-1', itemprop: 'email'
+                  - if @user.skype.present?
+                    .gl-mb-2
+                      = sprite_icon('skype', css_class: 'fgray')
+                      = link_to @user.skype, "skype:#{@user.skype}", class: 'gl-text-gray-900 gl-ml-1', title: "Skype"
+                  - if @user.linkedin.present?
+                    .gl-mb-2
+                      = sprite_icon('linkedin', css_class: 'fgray')
+                      = link_to @user.linkedin, linkedin_url(@user), class: 'gl-text-gray-900 gl-ml-1', title: "LinkedIn", target: '_blank', rel: 'noopener noreferrer nofollow'
+                  - if @user.twitter.present?
+                    .gl-mb-2
+                      = sprite_icon('twitter', css_class: 'fgray')
+                      = link_to @user.twitter, twitter_url(@user), class: 'gl-text-gray-900 gl-ml-1', title: "Twitter", target: '_blank', rel: 'noopener noreferrer nofollow'
+                  - if Feature.enabled?(:mastodon_social_ui, @user) && @user.mastodon.present?
+                    .gl-mb-2
+                      = sprite_icon('mastodon', css_class: 'fgray')
+                      = link_to @user.mastodon, mastodon_url(@user), class: 'gl-text-gray-900 gl-ml-1', title: "Mastodon", target: '_blank', rel: 'noopener noreferrer nofollow'
+                  - if @user.discord.present?
+                    .gl-mb-2
+                      = sprite_icon('discord', css_class: 'fgray')
+                      = link_to @user.discord, discord_url(@user), class: 'gl-text-gray-900 gl-ml-1', title: "Discord", target: '_blank', rel: 'noopener noreferrer nofollow'
+
+
 
       -# TODO: Remove this with the removal of the old navigation.
       -# See https://gitlab.com/groups/gitlab-org/-/epics/11875.
@@ -146,7 +153,7 @@
                     = s_('UserProfile|Personal projects')
               - if profile_tab?(:starred)
                 %li.js-starred-tab
-                  = link_to user_starred_projects_path, data: { target: 'div#starred', action: 'starred', toggle: 'tab', endpoint: user_starred_projects_path(format: :json) } do
+                  = link_to user_starred_projects_path, data: { target: 'div#starred', action: 'starred', toggle: 'tab', endpoint: user_starred_projects_path(format: :json), card_mode: true } do
                     = s_('UserProfile|Starred projects')
               - if profile_tab?(:snippets)
                 %li.js-snippets-tab
@@ -159,67 +166,76 @@
                     = gl_badge_tag @user.followers.count, size: :sm
               - if profile_tab?(:following)
                 %li.js-following-tab
-                  = link_to user_following_path, data: { target: 'div#following', action: 'following', toggle: 'tab', endpoint: user_following_path(format: :json) } do
+                  = link_to user_following_path, data: { target: 'div#following', action: 'following', toggle: 'tab', endpoint: user_following_path(format: :json), qa_selector: 'following_tab' } do
                     = s_('UserProfile|Following')
                     = gl_badge_tag @user.followees.count, size: :sm
-    - if !profile_tabs.empty? && Feature.enabled?(:profile_tabs_vue, current_user)
-      #js-profile-tabs{ data: user_profile_tabs_app_data(@user) }
-  %div{ class: container_class }
-    - unless Feature.enabled?(:profile_tabs_vue, current_user)
-      .tab-content
-        - if profile_tab?(:overview)
-          #js-overview.tab-pane
-            = render "users/overview"
-
-        - if profile_tab?(:activity)
-          #activity.tab-pane
-            .row
-              .col-12
-                .flash-container
-                - if can?(current_user, :read_cross_project)
-                  %h4.prepend-top-20
-                    = s_('UserProfile|Most Recent Activity')
-                  .content_list.user-activity-content{ data: { href: user_activity_path } }
-                  .loading
-                    = gl_loading_icon(size: 'md')
-        - unless @user.bot?
-          - if profile_tab?(:groups)
-            #groups.tab-pane
-              -# This tab is always loaded via AJAX
-
-          - if profile_tab?(:contributed)
-            #contributed.tab-pane
-              -# This tab is always loaded via AJAX
-
-          - if profile_tab?(:projects)
-            #projects.tab-pane
-              -# This tab is always loaded via AJAX
-
-          - if profile_tab?(:starred)
-            #starred.tab-pane
-              -# This tab is always loaded via AJAX
-
-          - if profile_tab?(:snippets)
-            #snippets.tab-pane
-              -# This tab is always loaded via AJAX
-
-          - if profile_tab?(:followers)
-            #followers.tab-pane
-              -# This tab is always loaded via AJAX
-
-          - if profile_tab?(:following)
-            #following.tab-pane
-              -# This tab is always loaded via AJAX
-
-      .loading.hide
-        .gl-spinner.gl-spinner-md
-
-    - if profile_tabs.empty?
-      .svg-content
-        = image_tag 'illustrations/profile_private_mode.svg'
-      .text-content.text-center
-        %h4
-          - if @user.blocked?
-            = s_('UserProfile|This user is blocked')
-          - else
-            = s_('UserProfile|This user has a private profile')
+
+    .user-profile-content.gl-pt-6
+      .cover-controls.gl-display-flex.gl-gap-3.gl-mb-4.gl-md-justify-content-end
+        = render 'users/follow_user'
+        -# The following edit button is mutually exclusive to the follow user button, they won't be shown together
+        - if @user == current_user
+          = render Pajamas::ButtonComponent.new(href: profile_path,
+            button_options: { title: s_('UserProfile|Edit profile') }) do
+            = s_("UserProfile|Edit profile")
+        = render 'users/view_gpg_keys'
+        = render 'users/view_user_in_admin_area'
+        .js-user-profile-actions{ data: user_profile_actions_data(@user) }
+      - if !profile_tabs.empty? && Feature.enabled?(:profile_tabs_vue, current_user)
+        #js-profile-tabs{ data: user_profile_tabs_app_data(@user) }
+      - unless Feature.enabled?(:profile_tabs_vue, current_user)
+        .tab-content.gl-overflow-hidden
+          - if profile_tab?(:overview)
+            #js-overview.tab-pane
+              = render "users/overview"
+
+          - if profile_tab?(:activity)
+            #activity.tab-pane
+              .flash-container
+              - if can?(current_user, :read_cross_project)
+                %h4.gl-mt-0
+                  = s_('UserProfile|Most Recent Activity')
+                .content_list.user-activity-content{ data: { href: user_activity_path } }
+                .loading
+                  = gl_loading_icon(size: 'md')
+          - unless @user.bot?
+            - if profile_tab?(:groups)
+              #groups.tab-pane
+                -# This tab is always loaded via AJAX
+
+            - if profile_tab?(:contributed)
+              #contributed.tab-pane
+                -# This tab is always loaded via AJAX
+
+            - if profile_tab?(:projects)
+              #projects.tab-pane
+                -# This tab is always loaded via AJAX
+
+            - if profile_tab?(:starred)
+              #starred.tab-pane
+                -# This tab is always loaded via AJAX
+
+            - if profile_tab?(:snippets)
+              #snippets.tab-pane
+                -# This tab is always loaded via AJAX
+
+            - if profile_tab?(:followers)
+              #followers.tab-pane
+                -# This tab is always loaded via AJAX
+
+            - if profile_tab?(:following)
+              #following.tab-pane
+                -# This tab is always loaded via AJAX
+
+        .loading.hide
+          .gl-spinner.gl-spinner-md
+
+      - if profile_tabs.empty?
+        .svg-content
+          = image_tag 'illustrations/profile_private_mode.svg'
+        .text-content.text-center
+          %h4
+            - if @user.blocked?
+              = s_('UserProfile|This user is blocked')
+            - else
+              = s_('UserProfile|This user has a private profile')
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 7a488a1cdb9702e2ec7441f6c67e1de5568c73be..c231f98af77e9076b703ab8459445306e3938c34 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -2676,6 +2676,9 @@ msgstr ""
 msgid "Achievements|%{namespace_link} awarded you the %{bold_start}%{achievement_name}%{bold_end} achievement!"
 msgstr ""
 
+msgid "Achievements|Achievements"
+msgstr ""
+
 msgid "Achievements|Awarded %{timeAgo} by %{namespace}"
 msgstr ""
 
@@ -18013,6 +18016,9 @@ msgstr ""
 msgid "Edit environment"
 msgstr ""
 
+msgid "Edit file"
+msgstr ""
+
 msgid "Edit files in the editor and commit changes here"
 msgstr ""
 
@@ -19751,6 +19757,9 @@ msgstr ""
 msgid "Expand AI-generated summary"
 msgstr ""
 
+msgid "Expand Readme"
+msgstr ""
+
 msgid "Expand all"
 msgstr ""
 
@@ -52254,6 +52263,9 @@ msgstr ""
 msgid "UserProfile|Busy"
 msgstr ""
 
+msgid "UserProfile|Contact"
+msgstr ""
+
 msgid "UserProfile|Contributed projects"
 msgstr ""
 
@@ -52284,6 +52296,9 @@ msgstr ""
 msgid "UserProfile|Groups are the best way to manage projects and members."
 msgstr ""
 
+msgid "UserProfile|Info"
+msgstr ""
+
 msgid "UserProfile|Join or create a group to start contributing by commenting on issues or submitting merge requests!"
 msgstr ""
 
@@ -52302,6 +52317,9 @@ msgstr ""
 msgid "UserProfile|Pronounced as: %{pronunciation}"
 msgstr ""
 
+msgid "UserProfile|Pronouns: %{pronouns}"
+msgstr ""
+
 msgid "UserProfile|Retry"
 msgstr ""
 
@@ -52356,6 +52374,9 @@ msgstr ""
 msgid "UserProfile|Unconfirmed user"
 msgstr ""
 
+msgid "UserProfile|User Actions"
+msgstr ""
+
 msgid "UserProfile|User ID copied to clipboard"
 msgstr ""
 
diff --git a/spec/features/profiles/user_visits_profile_spec.rb b/spec/features/profiles/user_visits_profile_spec.rb
index 37a19ecadb8a7cbc6402f0275dd4fec29d756d2a..675c68da22fe18a99cc22c55b65ab7b53ef98b07 100644
--- a/spec/features/profiles/user_visits_profile_spec.rb
+++ b/spec/features/profiles/user_visits_profile_spec.rb
@@ -48,7 +48,7 @@
       it 'shows expected content', :js do
         visit(user_path(user))
 
-        page.within ".cover-block" do
+        page.within ".user-info" do
           expect(page).to have_content user.name
           expect(page).to have_content user.username
         end
diff --git a/spec/features/users/overview_spec.rb b/spec/features/users/overview_spec.rb
index 1da61ecb86861d4296d74308fe57ca18092ecbe8..48d0cf1d9d35a944f55ae7dbb7135fdb23a319a5 100644
--- a/spec/features/users/overview_spec.rb
+++ b/spec/features/users/overview_spec.rb
@@ -60,15 +60,15 @@ def push_code_contribution
       end
     end
 
-    describe 'user has 15 activities' do
+    describe 'user has 10 activities' do
       before do
-        16.times { push_code_contribution }
+        11.times { push_code_contribution }
       end
 
       include_context 'visit overview tab'
 
-      it 'displays 15 entries in the list of activities' do
-        expect(find('#js-overview')).to have_selector('.event-item', count: 15)
+      it 'displays 10 entries in the list of activities' do
+        expect(find('#js-overview')).to have_selector('.event-item', count: 10)
       end
 
       it 'shows a link to the activity list' do
@@ -89,17 +89,11 @@ def push_code_contribution
     describe 'user has no personal projects' do
       include_context 'visit overview tab'
 
-      it 'shows an empty project list with an info message' do
-        page.within('.projects-block') do
-          expect(page).to have_selector('.loading', visible: false)
-          expect(page).to have_content('You haven\'t created any personal projects.')
-          expect(page).not_to have_selector('.project-row')
+      it 'does not show the projects block' do
+        page.within('.user-profile-content') do
+          expect(page).not_to have_selector('.projects-block')
         end
       end
-
-      it 'does not show a link to the project list' do
-        expect(find('#js-overview .projects-block')).to have_selector('.js-view-all', visible: false)
-      end
     end
 
     describe 'user has a personal project' do
@@ -111,7 +105,7 @@ def push_code_contribution
 
       it 'shows one entry in the list of projects' do
         page.within('.projects-block') do
-          expect(page).to have_selector('.project-row', count: 1)
+          expect(page).to have_selector('.gl-card', count: 1)
         end
       end
 
@@ -119,9 +113,9 @@ def push_code_contribution
         expect(find('#js-overview .projects-block')).to have_selector('.js-view-all', visible: true)
       end
 
-      it 'shows projects in "compact mode"' do
+      it 'shows projects in "card mode"' do
         page.within('#js-overview .projects-block') do
-          expect(find('.js-projects-list-holder')).to have_selector('.compact')
+          expect(find('.js-projects-list-holder')).to have_css('.gl-card')
         end
       end
     end
@@ -135,9 +129,9 @@ def push_code_contribution
 
       include_context 'visit overview tab'
 
-      it 'shows max. ten entries in the list of projects' do
+      it 'shows max. 3 entries in the list of projects' do
         page.within('.projects-block') do
-          expect(page).to have_selector('.project-row', count: 10)
+          expect(page).to have_selector('.gl-card', count: 3)
         end
       end
 
@@ -315,7 +309,7 @@ def push_code_contribution
       end
 
       it 'shows projects panel' do
-        expect(page).to have_selector('.projects-block')
+        expect(page).not_to have_selector('.projects-block')
       end
     end
   end
diff --git a/spec/features/users/rss_spec.rb b/spec/features/users/rss_spec.rb
index 730c31df899f8ed454d604000f4c790d03787b4d..5fcaee0211d529f1d29177be605e636f5050bd09 100644
--- a/spec/features/users/rss_spec.rb
+++ b/spec/features/users/rss_spec.rb
@@ -13,7 +13,7 @@
     end
 
     it 'shows the RSS link with overflow menu', :js do
-      page.within('.user-cover-block') do
+      page.within('.user-profile-content') do
         find_by_testid('base-dropdown-toggle').click
       end
 
@@ -27,7 +27,7 @@
     end
 
     it 'has an RSS without a feed token', :js do
-      page.within('.user-cover-block') do
+      page.within('.user-profile-content') do
         find_by_testid('base-dropdown-toggle').click
       end
 
diff --git a/spec/features/users/show_spec.rb b/spec/features/users/show_spec.rb
index 2821e8286a45f38f14904966a5586ef5060f6113..212a34df02723b83e4e90c526cd2ea725aff540b 100644
--- a/spec/features/users/show_spec.rb
+++ b/spec/features/users/show_spec.rb
@@ -12,7 +12,7 @@
   it 'shows copy user id action in the dropdown', :js do
     subject
 
-    page.within('.user-cover-block') do
+    page.within('.cover-controls') do
       find_by_testid('base-dropdown-toggle').click
     end
 
@@ -96,6 +96,22 @@
       end
     end
 
+    context 'join date' do
+      let_it_be(:location) { 'San Francisco, CA' }
+
+      context 'it shows a date' do
+        let_it_be(:user) { create(:user, location: location) }
+
+        it 'renders the join date' do
+          user.update!(created_at: Time.new(2020, 6, 21, 9, 22, 20, "UTC"))
+          subject
+
+          expect(page).to have_content("Member since June 21, 2020")
+          expect(page).not_to have_content("09:22")
+        end
+      end
+    end
+
     context 'location' do
       let_it_be(:location) { 'San Francisco, CA' }
 
@@ -305,7 +321,7 @@
     end
 
     it 'shows user name as blocked' do
-      expect(page).to have_css(".cover-title", text: 'Blocked user')
+      expect(page).to have_css(".user-info", text: 'Blocked user')
     end
 
     it 'shows no additional fields' do
@@ -343,7 +359,7 @@
       end
 
       it 'shows user name as unconfirmed' do
-        expect(page).to have_css(".cover-title", text: 'Unconfirmed user')
+        expect(page).to have_css(".user-info", text: 'Unconfirmed user')
       end
 
       it 'shows no tab' do
@@ -393,7 +409,7 @@
 
     subject
 
-    expect(page).to have_content("(they/them)")
+    expect(page).to have_content("Pronouns: they/them")
   end
 
   it 'shows the pronunctiation of the user if there was one' do
diff --git a/spec/views/users/_profile_basic_info.html.haml_spec.rb b/spec/views/users/_profile_basic_info.html.haml_spec.rb
deleted file mode 100644
index 142403cb2b5f0b810e94c32bde28a9d272319902..0000000000000000000000000000000000000000
--- a/spec/views/users/_profile_basic_info.html.haml_spec.rb
+++ /dev/null
@@ -1,21 +0,0 @@
-# frozen_string_literal: true
-
-require 'spec_helper'
-
-RSpec.describe 'users/_profile_basic_info', feature_category: :user_profile do
-  let_it_be(:template) { 'users/profile_basic_info' }
-  let_it_be(:user) { build_stubbed(:user) }
-
-  before do
-    assign(:user, user)
-  end
-
-  it 'renders the join date' do
-    user.created_at = Time.new(2020, 6, 21, 9, 22, 20, "UTC")
-
-    render(template)
-
-    expect(rendered).to include("Member since June 21, 2020")
-    expect(rendered).not_to include("09:22")
-  end
-end