diff --git a/frontend/css/sass/stats.scss b/frontend/css/sass/stats.scss
index 338578f3ca..e38d8649b5 100644
--- a/frontend/css/sass/stats.scss
+++ b/frontend/css/sass/stats.scss
@@ -1,8 +1,8 @@
 @use "sass:map";
 
 .user-stats-card {
-  margin-top: 20px;
   padding: 0 20px;
+  min-height: 400px;
 }
 
 .stats-full-width-graph {
diff --git a/frontend/js/src/user/stats/UserReports.tsx b/frontend/js/src/user/stats/UserReports.tsx
index c50192e0b4..fd0895244e 100644
--- a/frontend/js/src/user/stats/UserReports.tsx
+++ b/frontend/js/src/user/stats/UserReports.tsx
@@ -1,16 +1,23 @@
 import * as React from "react";
 
 import {
+  faBorderAll,
   faGlobe,
   faInfoCircle,
   faUser,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useLoaderData, useNavigate, useSearchParams } from "react-router";
+import {
+  Link,
+  useLoaderData,
+  useNavigate,
+  useSearchParams,
+} from "react-router";
 import { Helmet } from "react-helmet";
 
 import Tooltip from "react-tooltip";
 import NiceModal from "@ebay/nice-modal-react";
+import { Card } from "react-bootstrap";
 import Pill from "../../components/Pill";
 import UserListeningActivity from "./components/UserListeningActivity";
 import UserTopEntity from "./components/UserTopEntity";
@@ -38,7 +45,7 @@ export default function UserReports() {
   const { user = undefined } = props ?? {};
 
   // Context
-  const { currentUser } = React.useContext(GlobalAppContext);
+  const { currentUser, APIService } = React.useContext(GlobalAppContext);
 
   // Router
   const navigate = useNavigate();
@@ -81,6 +88,16 @@ export default function UserReports() {
     </button>
   );
 
+  const encodedUserOrCurrentUserName = user?.name
+    ? encodeURIComponent(user.name)
+    : encodeURIComponent(currentUser.name);
+  let albumStatsUrl = "";
+  if (user) {
+    albumStatsUrl = `/user/${encodeURIComponent(user.name)}/stats`;
+  } else {
+    albumStatsUrl = `/statistics`;
+  }
+  albumStatsUrl += `/top-albums/?range=${range}`;
   return (
     <div data-testid="User Reports">
       <Helmet>
@@ -108,11 +125,7 @@ export default function UserReports() {
               type="button"
               onClick={() => {
                 navigate(
-                  `/user/${
-                    user?.name
-                      ? encodeURIComponent(user.name)
-                      : encodeURIComponent(currentUser.name)
-                  }/stats/?range=${range}`
+                  `/user/${encodedUserOrCurrentUserName}/stats/?range=${range}`
                 );
               }}
               className={`pill secondary ${user ? "active" : ""}`}
@@ -134,7 +147,35 @@ export default function UserReports() {
       </div>
       <section id="listening-activity">
         {statsExplanationModalButton}
-        <UserListeningActivity range={range} user={user} />
+        <div className="row d-flex">
+          <div className="col-md-8">
+            <UserListeningActivity range={range} user={user} />
+          </div>
+          <div className="col-md-4 flex">
+            <Card className="flex-center" data-testid="top-release-group">
+              <object
+                className="p-4 m-auto"
+                width="100%"
+                style={{
+                  maxWidth: "600px",
+                  width: "-webkit-fill-available",
+                }}
+                aria-label="Album cover grid"
+                data={`${APIService.APIBaseURI}/art/grid-stats/${encodedUserOrCurrentUserName}/${range}/5/1/600`}
+              />
+              <Link
+                to="/explore/art-creator/"
+                className="mb-4 btn btn-info"
+                style={
+                  { "--bs-btn-border-radius": "0.5rem" } as React.CSSProperties
+                }
+              >
+                Visualize & share{" "}
+                <FontAwesomeIcon icon={faBorderAll} size="lg" />
+              </Link>
+            </Card>
+          </div>
+        </div>
       </section>
       <section id="top-entity">
         {statsExplanationModalButton}
@@ -153,6 +194,20 @@ export default function UserReports() {
               entity="release-group"
               user={user}
               terminology="album"
+              extraButtons={[
+                <Link
+                  to="/explore/art-creator/"
+                  className="btn btn-info"
+                  style={
+                    {
+                      "--bs-btn-border-radius": "0.5rem",
+                    } as React.CSSProperties
+                  }
+                >
+                  Visualize & share{" "}
+                  <FontAwesomeIcon icon={faBorderAll} size="lg" />
+                </Link>,
+              ]}
             />
           </div>
           <div className="col-md-4">
diff --git a/frontend/js/src/user/stats/components/UserArtistActivity.tsx b/frontend/js/src/user/stats/components/UserArtistActivity.tsx
index 51a80822de..94d97208ed 100644
--- a/frontend/js/src/user/stats/components/UserArtistActivity.tsx
+++ b/frontend/js/src/user/stats/components/UserArtistActivity.tsx
@@ -5,6 +5,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { useQuery } from "@tanstack/react-query";
 import { useNavigate, Link } from "react-router";
+import { useMediaQuery } from "react-responsive";
 import Card from "../../../components/Card";
 import Loader from "../../../components/Loader";
 import GlobalAppContext from "../../../utils/GlobalAppContext";
@@ -50,6 +51,7 @@ function CustomTooltip({
 export default function UserArtistActivity(props: UserArtistActivityProps) {
   const { APIService } = React.useContext(GlobalAppContext);
   const navigate = useNavigate();
+  const isMobile = useMediaQuery({ maxWidth: 767 });
 
   // Props
   const { user, range } = props;
@@ -190,7 +192,12 @@ export default function UserArtistActivity(props: UserArtistActivityProps) {
                     )
                   )}
                   indexBy="label"
-                  margin={{ top: 20, right: 80, bottom: 100, left: 120 }}
+                  margin={{
+                    top: 20,
+                    right: isMobile ? 0 : 80,
+                    bottom: 100,
+                    left: isMobile ? 20 : 120,
+                  }}
                   padding={0.2}
                   layout="vertical"
                   colors={{ scheme: "nivo" }}
diff --git a/frontend/js/src/user/stats/components/UserListeningActivity.tsx b/frontend/js/src/user/stats/components/UserListeningActivity.tsx
index 6133c979ec..eb38762be2 100644
--- a/frontend/js/src/user/stats/components/UserListeningActivity.tsx
+++ b/frontend/js/src/user/stats/components/UserListeningActivity.tsx
@@ -432,11 +432,7 @@ export default function UserListeningActivity(
   const formattedAvgListens = new Intl.NumberFormat().format(avgListens);
 
   return (
-    <Card
-      className="user-stats-card"
-      style={{ marginTop: 20, minHeight: 400 }}
-      data-testid="listening-activity"
-    >
+    <Card className="user-stats-card" data-testid="listening-activity">
       <div className="d-flex align-items-baseline">
         <h3 className="capitalize-bold">Listening Activity</h3>
         <a
diff --git a/frontend/js/src/user/stats/components/UserTopEntity.tsx b/frontend/js/src/user/stats/components/UserTopEntity.tsx
index ef3719af3b..121e59fb41 100644
--- a/frontend/js/src/user/stats/components/UserTopEntity.tsx
+++ b/frontend/js/src/user/stats/components/UserTopEntity.tsx
@@ -17,6 +17,9 @@ export type UserTopEntityProps = {
   entity: Entity;
   user?: ListenBrainzUser;
   terminology: string;
+  contentCssClassName?: string;
+  numberOfEntities?: number;
+  extraButtons?: JSX.Element[];
 };
 
 export type UserTopEntityState = {
@@ -29,7 +32,15 @@ export type UserTopEntityState = {
 export default function UserTopEntity(props: UserTopEntityProps) {
   const { APIService } = React.useContext(GlobalAppContext);
 
-  const { range, entity, user, terminology } = props;
+  const {
+    range,
+    entity,
+    user,
+    terminology,
+    contentCssClassName,
+    numberOfEntities = 10,
+    extraButtons,
+  } = props;
 
   // Loader Data
   const { data: loaderData, isLoading: loading } = useQuery({
@@ -41,7 +52,7 @@ export default function UserTopEntity(props: UserTopEntityProps) {
           entity,
           range,
           0,
-          10
+          numberOfEntities
         );
         return {
           data: queryData,
@@ -74,7 +85,7 @@ export default function UserTopEntity(props: UserTopEntityProps) {
   const entityTextOnCard = `${terminology}s`;
   if (hasError) {
     return (
-      <Card className="mt-4" data-testid="error-message">
+      <Card data-testid="error-message">
         <h3 className="capitalize-bold text-center">Top {entityTextOnCard}</h3>
         <div className="text-center">
           <FontAwesomeIcon icon={faExclamationCircle as IconProp} />{" "}
@@ -85,10 +96,14 @@ export default function UserTopEntity(props: UserTopEntityProps) {
   }
 
   return (
-    <Card className="mt-4" data-testid={`top-${entity}`}>
+    <Card className="flex-grow-1" data-testid={`top-${entity}`}>
       <h3 className="capitalize-bold text-center">Top {entityTextOnCard}</h3>
       <Loader isLoading={loading}>
-        <div style={{ padding: "1em" }} data-testid={`top-${entity}-list`}>
+        <div
+          style={{ padding: "1em" }}
+          data-testid={`top-${entity}-list`}
+          className={contentCssClassName}
+        >
           {entity === "artist" &&
             Object.keys(data).length > 0 &&
             (data as UserArtistsResponse).payload.artists.map(
@@ -274,10 +289,11 @@ export default function UserTopEntity(props: UserTopEntityProps) {
               }
             )}
         </div>
-        <div className="mb-4 text-center">
+        <div className="mb-4 d-flex gap-2 flex-wrap justify-content-around">
           <Link to={statsUrl} className="btn btn-outline-info">
             View more…
           </Link>
+          {extraButtons}
         </div>
       </Loader>
     </Card>
diff --git a/listenbrainz/webserver/templates/art/svg-templates/designer-top-10-alt.svg b/listenbrainz/webserver/templates/art/svg-templates/designer-top-10-alt.svg
index 6b5af35f4e..f67511ec07 100644
--- a/listenbrainz/webserver/templates/art/svg-templates/designer-top-10-alt.svg
+++ b/listenbrainz/webserver/templates/art/svg-templates/designer-top-10-alt.svg
@@ -10,7 +10,9 @@
      viewBox="0 0 924 924"
      xmlns:dc="http://purl.org/dc/elements/1.1/"
      height="{{ height }}"
-     width="{{ width }}">
+     width="{{ width }}"
+     preserveAspectRatio="xMinYMin meet"
+>
   <title>Top 10 releases {{ metadata["time_range"] }} for {{ metadata["user_name"] }}&#xA;</title>
   <desc>
       {%- for release in releases[:10] -%}
diff --git a/listenbrainz/webserver/templates/art/svg-templates/designer-top-10.svg b/listenbrainz/webserver/templates/art/svg-templates/designer-top-10.svg
index 8786cfb038..d3449f85bd 100644
--- a/listenbrainz/webserver/templates/art/svg-templates/designer-top-10.svg
+++ b/listenbrainz/webserver/templates/art/svg-templates/designer-top-10.svg
@@ -10,7 +10,9 @@
      viewBox="0 0 924 924"
      xmlns:dc="http://purl.org/dc/elements/1.1/"
      height="{{ height }}"
-     width="{{ width }}">
+     width="{{ width }}"
+     preserveAspectRatio="xMinYMin meet"
+>
   <title>Top 10 releases {{ metadata["time_range"] }} for {{ metadata["user_name"] }}&#xA;</title>
   <desc>
       {%- for release in releases[:10] -%}
diff --git a/listenbrainz/webserver/templates/art/svg-templates/designer-top-5.svg b/listenbrainz/webserver/templates/art/svg-templates/designer-top-5.svg
index 1e29e9eba2..80487e6bd4 100644
--- a/listenbrainz/webserver/templates/art/svg-templates/designer-top-5.svg
+++ b/listenbrainz/webserver/templates/art/svg-templates/designer-top-5.svg
@@ -10,7 +10,9 @@
      viewBox="0 0 924 924"
      xmlns:dc="http://purl.org/dc/elements/1.1/"
      height="{{ height }}"
-     width="{{ width }}">
+     width="{{ width }}"
+     preserveAspectRatio="xMinYMin meet"
+>
   <title>Top 5 artists {{ metadata["time_range"] }} for {{ metadata["user_name"] }}&#xA;</title>
   <desc>
    {%- for artist in artists[:5] -%}
diff --git a/listenbrainz/webserver/templates/art/svg-templates/lps-on-the-floor.svg b/listenbrainz/webserver/templates/art/svg-templates/lps-on-the-floor.svg
index b37afcda9e..4a6fcf331e 100644
--- a/listenbrainz/webserver/templates/art/svg-templates/lps-on-the-floor.svg
+++ b/listenbrainz/webserver/templates/art/svg-templates/lps-on-the-floor.svg
@@ -25,7 +25,9 @@
      xmlns="http://www.w3.org/2000/svg"
      role="img"
      width="{{ width }}" height="{{ height }}"
-     viewBox="0 0 {{ width }} {{ height }}">
+     viewBox="0 0 {{ width }} {{ height }}"
+     preserveAspectRatio="xMinYMin meet"
+>
     <title>Top 5 releases {{ metadata["time_range"] }} for {{ metadata["user_name"] }}&#xA;</title>
     <desc>
         {%- for release in releases[:5] -%}
diff --git a/listenbrainz/webserver/templates/art/svg-templates/simple-grid.svg b/listenbrainz/webserver/templates/art/svg-templates/simple-grid.svg
index 18f953d581..dc290ca2e4 100644
--- a/listenbrainz/webserver/templates/art/svg-templates/simple-grid.svg
+++ b/listenbrainz/webserver/templates/art/svg-templates/simple-grid.svg
@@ -6,7 +6,9 @@
      role="img"
      viewBox="0 0 {{ width }} {{ height }}"
      width="{{ width }}"
-     height="{{ height }}">
+     height="{{ height }}"
+     preserveAspectRatio="xMinYMin meet"
+>
 
      {% if title is defined %}
           <title>{{ title }}</title>