diff --git a/.vscode/settings.json b/.vscode/settings.json
index 93b185d14..3ae8e3cd7 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,6 +1,4 @@
 {
-  "rubyLsp.rubyVersionManager": {
-    "identifier": "auto"
-  },
+  "rubyLsp.rubyVersionManager": "auto",
   "rubyLsp.formatter": "rubocop",
 }
diff --git a/app/assets/builds/.keep b/app/assets/builds/.keep
new file mode 100644
index 000000000..e69de29bb
diff --git a/app/assets/stylesheets/config/_generator.scss b/app/assets/stylesheets/config/_generator.scss
index d33fedd74..4ae2b277d 100644
--- a/app/assets/stylesheets/config/_generator.scss
+++ b/app/assets/stylesheets/config/_generator.scss
@@ -161,13 +161,7 @@
       '3': repeat(3, minmax(0, 1fr)),
       '4': repeat(4, minmax(0, 1fr)),
       '5': repeat(5, minmax(0, 1fr)),
-      '6': repeat(6, minmax(0, 1fr)),
-      '7': repeat(7, minmax(0, 1fr)),
-      '8': repeat(8, minmax(0, 1fr)),
-      '9': repeat(9, minmax(0, 1fr)),
-      '10': repeat(10, minmax(0, 1fr)),
-      '11': repeat(11, minmax(0, 1fr)),
-      '12': repeat(12, minmax(0, 1fr))
+      '6': repeat(6, minmax(0, 1fr))
     ),
     (),
     true
diff --git a/app/controllers/stories_controller.rb b/app/controllers/stories_controller.rb
index 937abbd47..18c9cd208 100644
--- a/app/controllers/stories_controller.rb
+++ b/app/controllers/stories_controller.rb
@@ -207,7 +207,16 @@ class StoriesController < ApplicationController
 
     assign_user_github_repositories
 
-    @grouped_badges = @user.badge_achievements.order(id: :desc).includes(:badge).group_by(&:badge_id)
+    # @badges_limit is here and is set to 6 because it determines how many badges we will display
+    # on Profile sidebar widget. If user has more badges, we hide them and let them be revealed
+    # by clicking "See more" button (because we want to save space etc..). But why 6 exactly?
+    # To make that widget look good:
+    #   - On desktop it will have 3 rows, each row with 2 badges.
+    #   - On mobile it will have 2 rows, each row with 3 badges.
+    # So it's always 6. If we make it higher or lower number, we would have to sacrifice UI:
+    #   - Let's say it's `4`. On mobile it would display two rows: 1st with 3 badges and
+    # 2nd with 1 badge (!) <-- and that would look off.
+    @badges_limit = 6
     @profile = @user.profile.decorate
     @is_user_flagged = Reaction.where(user_id: session_current_user_id, reactable: @user).any?
 
diff --git a/app/views/users/_badges_area.html.erb b/app/views/users/_badges_area.html.erb
index 5bb4d06d5..c317bd185 100644
--- a/app/views/users/_badges_area.html.erb
+++ b/app/views/users/_badges_area.html.erb
@@ -1,22 +1,19 @@
 <div class="crayons-card crayons-card--secondary">
-  <% if defined?(show_heading) ? show_heading : true %>
-    <header class="crayons-card__header">
-      <h3 class="crayons-subtitle-3"><%= t("views.badges.heading") %></h3>
-    </header>
-  <% end %>
+  <header class="crayons-card__header">
+    <h3 class="crayons-subtitle-3"><%= t("views.badges.heading") %></h3>
+  </header>
 
   <div class="crayons-card__body">
-    <% grid_class ||= "grid-cols-3 s:grid-cols-4 m:grid-cols-2" %>
-    <div class="grid gap-4 <%= grid_class %> align-center items-center js-profile-badges">
-      <% grouped_badges.each_with_index do |(badge_id, badge_achievements), i| %>
+    <div class="grid gap-4 grid-cols-3 s:grid-cols-4 m:grid-cols-2 align-center items-center js-profile-badges">
+      <% achievements.group_by(&:badge_id).each_with_index do |(badge_id, badge_achievements), i| %>
       <% achievement = badge_achievements.first %>
         <div role="button" onclick="window.Forem.showModal({size: 'medium', showHeader: false, contentSelector: '#badge-<%= achievement.badge_id %>', overlay: true})"
            title="<%= achievement.badge_title %>"
            class="js-profile-badge <% if i >= limit %>hidden<% end %> relative">
           <img src="<%= optimized_image_url(achievement.badge_image_url, width: 180) %>"
                alt="<%= achievement.badge_title %>"
-               class="mx-auto w-75 h-auto align-middle"
-               style="object-fit: contain; cursor: pointer; width: 100%; aspect-ratio: 1 / 1; max-width: 80px;"
+               class="mx-auto max-w-75 h-auto align-middle"
+               style="object-fit: contain; cursor: pointer; width: 100%; aspect-ratio: 1 / 1;"
                loading="lazy" />
           <% if badge_achievements.length > 1 %><div class="badge-indicator" title="<%= t("views.badges.indicator", user: @user.name, number: badge_achievements.length) %>"><%= badge_achievements.length %></div><% end %>
         </div>
@@ -27,9 +24,9 @@
       <% end %>
     </div>
 
-    <% if limit > 1 && grouped_badges.size > limit %>
+    <% if limit > 1 && count > limit %>
       <button type="button"
-              class="crayons-btn crayons-btn--ghost-brand crayons-btn--s w-100 mt-3 js-profile-badges-trigger">
+              class="crayons-btn crayons-btn--ghost-brand crayons-btn--s w-100 js-profile-badges-trigger">
         <%= t("views.badges.all", count: count) %>
       </button>
     <% end %>
diff --git a/app/views/users/_sidebar.html.erb b/app/views/users/_sidebar.html.erb
index 2dd3a858d..450b19ec8 100644
--- a/app/views/users/_sidebar.html.erb
+++ b/app/views/users/_sidebar.html.erb
@@ -1,14 +1,5 @@
 <div class="m:gap-4 hidden m:grid js-user-info">
   <% cache "user-profile-sidebar-additional-#{@user.id}-#{@user.github_repos_updated_at}-#{@user.badge_achievements_count}-#{@user.organization_info_updated_at}", expires_in: 2.days do %>
-    <% if @user.badge_achievements_count.positive? && @user.badge_achievements_count <= 6 %>
-      <%= render partial: "users/badges_area", locals: {
-            grouped_badges: @grouped_badges,
-            count: @user.badge_achievements_count,
-            limit: 6,
-            show_heading: true,
-            grid_class: "grid-cols-3 s:grid-cols-4 m:grid-cols-2"
-          } %>
-    <% end %>
     <% if @user.organizations.present? %>
       <div class="crayons-card crayons-card--secondary crayons-layout__content">
         <header class="crayons-card__header">
@@ -31,6 +22,13 @@
 
     <%= render partial: "users/github_repositories_area", locals: { repositories: repositories } %>
 
+    <% if @user.badge_achievements_count.positive? %>
+      <%= render partial: "users/badges_area", locals: {
+            achievements: @user.badge_achievements.order(id: :desc).includes(:badge),
+            count: @user.badge_achievements_count,
+            limit: @badges_limit
+          } %>
+    <% end %>
   <% end %>
 
   <% cache "user-profile-sidebar-profile-details-#{@user.id}-#{@user.profile_updated_at}", expires_in: 10.days do %>
diff --git a/app/views/users/show.html.erb b/app/views/users/show.html.erb
index 07ab1943e..0edaa5e14 100644
--- a/app/views/users/show.html.erb
+++ b/app/views/users/show.html.erb
@@ -123,20 +123,9 @@
 
         <%= render "users/metadata" %>
 
-        <% if @user.badge_achievements_count >= 7 %>
-          <%= render partial: "users/badges_area", locals: {
-                grouped_badges: @grouped_badges,
-                count: @user.badge_achievements_count,
-                limit: 12,
-                show_heading: false,
-                grid_class: "grid-cols-#{[@user.badge_achievements_count, 6].min} s:grid-cols-#{[@user.badge_achievements_count, 8].min} m:grid-cols-#{[@user.badge_achievements_count, 12].min}"
-              } %>
-        <% end %>
-
-        <div class="p-3 block m:hidden js-user-info-trigger-wrapper">
-          <button type="button" class="m-3 crayons-btn crayons-btn--outlined w-100 js-user-info-trigger"><%= t("views.users.more", user: @user.username) %></button>
+        <div class="p-3 pt-0 block m:hidden js-user-info-trigger-wrapper">
+          <button type="button" class="crayons-btn crayons-btn--outlined w-100 js-user-info-trigger"><%= t("views.users.more", user: @user.username) %></button>
         </div>
-
       </header>
     </div>
   </div>
diff --git a/cypress/e2e/seededFlows/profileFlows/userProfile.spec.js b/cypress/e2e/seededFlows/profileFlows/userProfile.spec.js
index 29c2c52c4..d8b64e813 100644
--- a/cypress/e2e/seededFlows/profileFlows/userProfile.spec.js
+++ b/cypress/e2e/seededFlows/profileFlows/userProfile.spec.js
@@ -19,7 +19,7 @@ describe('User Profile', () => {
 
         cy.get('.js-user-info').contains('Organizations').should('be.visible');
 
-        cy.get('.js-profile-badges').should('be.visible');
+        cy.get('.js-user-info').contains('Badges').should('be.visible');
 
         cy.get('.js-user-info')
           .contains('posts published')
@@ -35,25 +35,25 @@ describe('User Profile', () => {
   });
 
   describe('toggle profile badges', () => {
-    it('should show 12 badges by default if there are more than 12', () => {
+    it('should show 6 badges by default if there are more than 6', () => {
       cy.get('.js-profile-badges')
         .findAllByRole('button')
-        .should('have.length', 12);
+        .should('have.length', 6);
     });
 
     it('should show a button to show all the badges if there are more than 6', () => {
       cy.findByRole('button', {
-        name: 'Show all 13 badges',
+        name: 'Show all 7 badges',
       }).should('be.visible');
     });
 
-    it('should show 13 badges when the button is clicked', () => {
+    it('should show 7 badges when the button is clicked', () => {
       cy.findByRole('button', {
-        name: 'Show all 13 badges',
+        name: 'Show all 7 badges',
       }).click();
       cy.get('.js-profile-badges')
         .findAllByRole('button')
-        .should('have.length', 13);
+        .should('have.length', 7);
     });
   });
 });
diff --git a/package.json b/package.json
index 274b98952..3701d51fe 100644
--- a/package.json
+++ b/package.json
@@ -98,6 +98,7 @@
     "lint-staged": "^13.3.0",
     "markdown-loader": "^7.0.0",
     "mocha-junit-reporter": "^2.2.1",
+    "prettier": "^2.8.8",
     "sass": "1.54.0",
     "sass-loader": "^13.3.3",
     "storybook-addon-jsx": "^7.3.14",
diff --git a/spec/support/seeds/seeds_e2e.rb b/spec/support/seeds/seeds_e2e.rb
index 3039f60a1..8047ac23d 100644
--- a/spec/support/seeds/seeds_e2e.rb
+++ b/spec/support/seeds/seeds_e2e.rb
@@ -1014,7 +1014,7 @@ end
 ##############################################################################
 
 seeder.create_if_none(Badge) do
-  13.times do |t|
+  7.times do |t|
     Badge.create!(
       title: "#{Faker::Lorem.word} #{rand(100)} #{t}",
       description: "#{Faker::Lorem.sentence} #{rand(100)}",
diff --git a/spec/views/users/main_feed_spec.rb b/spec/views/users/main_feed_spec.rb
index f0758fa0d..cc62d5dc1 100644
--- a/spec/views/users/main_feed_spec.rb
+++ b/spec/views/users/main_feed_spec.rb
@@ -9,6 +9,7 @@ RSpec.describe "users/show" do
       allow(view).to receive(:feed_style_preference).and_return("basic")
     end
     assign(:user, user)
+    assign(:badges_limit, 6)
     assign(:stories, [])
     assign(:comments, [])
     assign(:pinned_stories, [])
diff --git a/yarn.lock b/yarn.lock
index 5892aa537..0a53253b6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9290,6 +9290,7 @@ __metadata:
     postcss-preset-env: "npm:^7.8.2"
     postscribe: "npm:^2.0.8"
     preact: "npm:^10.20.2"
+    prettier: "npm:^2.8.8"
     prop-types: "npm:^15.8.1"
     rails-erb-loader: "npm:^5.5.2"
     react-colorful: "npm:^5.6.1"
@@ -17616,6 +17617,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prettier@npm:^2.8.8":
+  version: 2.8.8
+  resolution: "prettier@npm:2.8.8"
+  bin:
+    prettier: bin-prettier.js
+  checksum: 10c0/463ea8f9a0946cd5b828d8cf27bd8b567345cf02f56562d5ecde198b91f47a76b7ac9eae0facd247ace70e927143af6135e8cf411986b8cb8478784a4d6d724a
+  languageName: node
+  linkType: hard
+
 "pretty-bytes@npm:^5.6.0":
   version: 5.6.0
   resolution: "pretty-bytes@npm:5.6.0"