diff --git a/src/renderer/src/pages/profile/profile-content/badges-box.scss b/src/renderer/src/pages/profile/profile-content/badges-box.scss
index 01720b75..1c53050d 100644
--- a/src/renderer/src/pages/profile/profile-content/badges-box.scss
+++ b/src/renderer/src/pages/profile/profile-content/badges-box.scss
@@ -75,6 +75,14 @@
     margin: 0;
   }
 
+  &__view-all-container {
+    background-color: globals.$background-color;
+    padding-top: calc(globals.$spacing-unit * 2);
+    margin-top: calc(globals.$spacing-unit * 2);
+    display: flex;
+    justify-content: flex-start;
+  }
+
   &__view-all {
     background: none;
     border: none;
diff --git a/src/renderer/src/pages/profile/profile-content/badges-box.tsx b/src/renderer/src/pages/profile/profile-content/badges-box.tsx
index 5b35ad3a..b898be2a 100644
--- a/src/renderer/src/pages/profile/profile-content/badges-box.tsx
+++ b/src/renderer/src/pages/profile/profile-content/badges-box.tsx
@@ -28,15 +28,6 @@ export function BadgesBox() {
               {numberFormatter.format(userProfile.badges.length)}
             </span>
           </div>
-          {hasMoreBadges && (
-            <button
-              type="button"
-              className="badges-box__view-all"
-              onClick={() => setShowAllBadgesModal(true)}
-            >
-              {t("view_all")}
-            </button>
-          )}
         </div>
 
         <div className="badges-box__box">
@@ -66,6 +57,17 @@ export function BadgesBox() {
               );
             })}
           </div>
+          {hasMoreBadges && (
+            <div className="badges-box__view-all-container">
+              <button
+                type="button"
+                className="badges-box__view-all"
+                onClick={() => setShowAllBadgesModal(true)}
+              >
+                {t("view_all")}
+              </button>
+            </div>
+          )}
         </div>
       </div>