diff --git a/src/components/atoms/HexagonBase.tsx b/src/components/atoms/HexagonBase.tsx
new file mode 100644
index 0000000..32d4cc4
--- /dev/null
+++ b/src/components/atoms/HexagonBase.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+
+type HexagonBaseProps = {
+  rounded?: boolean;
+} & React.ComponentPropsWithoutRef<"div">;
+
+export const HexagonBase: React.FunctionComponent<HexagonBaseProps> = (
+  props
+) => {
+  const { rounded = false, ...otherProps } = props;
+
+  // FIXME: Display the Verida Badges correctly in a rounded hexagonal shape and get rid of the 'rounded' prop
+
+  return (
+    <div
+      {...otherProps}
+      style={{
+        clipPath: rounded
+          ? "path('M154.466 13.0153C149.97 5.26921 141.674 0.5 132.698 0.5L61.3019 0.5C52.326 0.5 44.0299 5.26921 39.5341 13.0153L3.88118 74.4438C-0.627062 82.2113 -0.627061 91.7887 3.88118 99.5562L39.5341 160.985C44.0299 168.731 52.326 173.5 61.3019 173.5H132.698C141.674 173.5 149.97 168.731 154.466 160.985L190.119 99.5562C194.627 91.7887 194.627 82.2113 190.119 74.4438L154.466 13.0153Z')"
+          : "polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)",
+        // For some reason the tailwind aspect-ratio class was not working, so put it in style
+        aspectRatio: rounded ? "10/8.969072" : "10/8.66025",
+      }}
+    ></div>
+  );
+};
diff --git a/src/components/atoms/index.ts b/src/components/atoms/index.ts
index 218f194..0f101fd 100644
--- a/src/components/atoms/index.ts
+++ b/src/components/atoms/index.ts
@@ -7,6 +7,7 @@ export * from "./ButtonLink";
 export * from "./ButtonLinkBase";
 export * from "./ChainIconContainer";
 export * from "./Chip";
+export * from "./HexagonBase";
 export * from "./Icon";
 export * from "./IconButton";
 export * from "./IconButtonLink";
diff --git a/src/components/molecules/BadgeCard.tsx b/src/components/molecules/BadgeCard.tsx
deleted file mode 100644
index 9a5f14d..0000000
--- a/src/components/molecules/BadgeCard.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from "react";
-import { Collectible } from "lib/types";
-import { AssetMedia } from "components/atoms";
-
-type BadgeCardProps = {
-  badge: Collectible;
-  variant?: "standard" | "compact";
-} & Omit<React.ComponentPropsWithoutRef<"div">, "children">;
-
-/** Render a card displaying a badge  */
-export const BadgeCard: React.FC<BadgeCardProps> = (props) => {
-  const { badge, variant = "standard", ...otherProps } = props;
-
-  return (
-    <div {...otherProps}>
-      <div className="flex flex-col items-center space-y-2">
-        <AssetMedia
-          src={badge.media}
-          aspect="aspect-auto"
-          alt={badge.tokenLabel}
-          radius={variant === "compact" ? "rounded-lg" : "rounded-xl"}
-        />
-      </div>
-    </div>
-  );
-};
diff --git a/src/components/molecules/BadgeMosaicItem.tsx b/src/components/molecules/BadgeMosaicItem.tsx
new file mode 100644
index 0000000..867f336
--- /dev/null
+++ b/src/components/molecules/BadgeMosaicItem.tsx
@@ -0,0 +1,38 @@
+import { HexagonBase } from "components/atoms";
+import { Badge } from "lib/types";
+import React from "react";
+import { Link } from "react-router-dom";
+
+type HexagonProps = {
+  badge: Badge;
+  to: string;
+  disableShadow?: boolean;
+} & Omit<React.ComponentPropsWithoutRef<"li">, "className">;
+
+export const BadgeMosaicItem: React.FunctionComponent<HexagonProps> = (
+  props
+) => {
+  const { badge, to, disableShadow = false, ...otherProps } = props;
+
+  return (
+    <li
+      {...otherProps}
+      className="relative w-[calc(4/3_*_100%)] -translate-x-[calc(1/8_*_100%)] odd:-translate-y-1/2"
+    >
+      <HexagonBase className="flex items-center justify-center">
+        <Link to={to} className="h-full w-full">
+          <img
+            src={badge.media}
+            alt={badge.tokenLabel}
+            className="h-full w-full object-cover"
+          />
+        </Link>
+      </HexagonBase>
+      {!disableShadow && (
+        <div className="absolute inset-0 -z-10 w-full blur-lg">
+          <HexagonBase className="w-full bg-badge-purple" />
+        </div>
+      )}
+    </li>
+  );
+};
diff --git a/src/components/molecules/index.ts b/src/components/molecules/index.ts
index 8e2f8f7..154956d 100644
--- a/src/components/molecules/index.ts
+++ b/src/components/molecules/index.ts
@@ -1,7 +1,7 @@
 export * from "./AssetDetailsPropertyItem";
 export * from "./AssetDetailsPropertyList";
 export * from "./AssetPriceChip";
-export * from "./BadgeCard";
+export * from "./BadgeMosaicItem";
 export * from "./ChainIcon";
 export * from "./CollectibleCard";
 export * from "./CopyToClipboardButton";
diff --git a/src/components/organisms/BadgeGrid.tsx b/src/components/organisms/BadgeGrid.tsx
deleted file mode 100644
index 5277362..0000000
--- a/src/components/organisms/BadgeGrid.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { BadgeCard } from "components/molecules";
-import { Badge } from "lib/types";
-import React from "react";
-import { Link } from "react-router-dom";
-
-type BadgeGridProps = {
-  badges: Badge[];
-} & React.ComponentPropsWithoutRef<"div">;
-
-export const BadgeGrid: React.FC<BadgeGridProps> = (props) => {
-  const { badges, ...containerProps } = props;
-  return (
-    <div {...containerProps}>
-      <ul className="grid grid-cols-2 gap-x-2 gap-y-4 sm:grid-cols-3 lg:grid-cols-4">
-        {badges.map((badge) => (
-          <li
-            key={`${badge.chainId}/${badge.contractAddress}/${badge.tokenId}`}
-          >
-            <Link
-              to={`${badge.chainId}/${badge.contractAddress}/${badge.tokenId}`}
-            >
-              <BadgeCard variant="standard" badge={badge} />
-            </Link>
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-};
diff --git a/src/components/organisms/BadgeMosaic.tsx b/src/components/organisms/BadgeMosaic.tsx
new file mode 100644
index 0000000..aedd5ac
--- /dev/null
+++ b/src/components/organisms/BadgeMosaic.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import { Badge } from "lib/types";
+import { BadgeMosaicItem } from "components/molecules";
+
+type BadgeMosaicProps = {
+  badges: Badge[];
+} & React.ComponentPropsWithoutRef<"div">;
+
+export const BadgeMosaic: React.FunctionComponent<BadgeMosaicProps> = (
+  props
+) => {
+  const { badges, ...containerProps } = props;
+
+  // For n columns:
+  //   grid width = (3 * n) / (3 * n + 1) * 100%
+  //   grid margin-top = sqrt(3) / (3 * n + 1) * 100%
+  return (
+    <div {...containerProps}>
+      <ul className="mx-auto mt-[calc(1.73205/7_*_100%)] grid w-[calc(6/7_*_100%)] grid-cols-2 sm:mt-[calc(1.73205/13_*_100%)] sm:w-[calc(12/13_*_100%)] sm:grid-cols-4">
+        {badges.map((badge) => (
+          <BadgeMosaicItem
+            key={`${badge.chainId}/${badge.contractAddress}/${badge.tokenId}`}
+            badge={badge}
+            to={`${badge.chainId}/${badge.contractAddress}/${badge.tokenId}`}
+          />
+        ))}
+      </ul>
+    </div>
+  );
+};
diff --git a/src/components/organisms/BadgesSection.tsx b/src/components/organisms/BadgesSection.tsx
index d09a517..4f95262 100644
--- a/src/components/organisms/BadgesSection.tsx
+++ b/src/components/organisms/BadgesSection.tsx
@@ -1,9 +1,9 @@
 import React, { useCallback } from "react";
 import { useIntl } from "react-intl";
-import { BadgeCard, ProfileSectionWrapper } from "components/molecules";
+import { BadgeMosaicItem, ProfileSectionWrapper } from "components/molecules";
 import { Badge } from "lib/types";
-import { Button } from "components/atoms";
-import { Link, useNavigate } from "react-router-dom";
+import { Button, HexagonBase } from "components/atoms";
+import { useNavigate } from "react-router-dom";
 import { MAX_BADGES_IN_PROFILE_SECTION } from "lib/constants";
 
 type BadgesSectionProps = {
@@ -54,30 +54,48 @@ export const BadgesSection: React.FC<BadgesSectionProps> = ({ badges }) => {
       title={sectionTitle}
       badgeValue={badges.length}
       onClickMore={handleClickMore}
+      style={{ marginBottom: "-1rem" }}
     >
-      <ul className="grid snap-x snap-mandatory auto-cols-[160px] gap-2 overflow-x-auto max-sm:grid-flow-col sm:grid-cols-4">
-        {truncatedBadgeList.map((badge) => (
-          <li
-            key={`${badge.chainId}/${badge.contractAddress}/${badge.tokenId}`}
-            className="snap-start transition-all"
+      <div className="overflow-x-auto">
+        <div className="min-w-[664px] pb-4">
+          <ul
+            className={`mx-auto mt-[calc(1.73205/13_*_100%)] grid w-[calc(12/13_*_100%)] sm:mt-[calc(1.73205/13_*_100%)] sm:grid-cols-4 ${
+              hasMore
+                ? "grid-cols-[repeat(5,_calc(3/13_*_664px))]"
+                : "grid-cols-4"
+            }`}
           >
-            <Link
-              to={`badges/${badge.chainId}/${badge.contractAddress}/${badge.tokenId}`}
-            >
-              <BadgeCard variant="standard" badge={badge} />
-            </Link>
-          </li>
-        ))}
-        {hasMore && (
-          <li
-            key="showAllButton"
-            className="aspect-square snap-start transition-all sm:hidden"
-          >
-            {showAllButton}
-          </li>
-        )}
-      </ul>
-      {hasMore && <div className="mt-4 max-sm:hidden">{showAllButton}</div>}
+            {truncatedBadgeList.map((badge) => (
+              <BadgeMosaicItem
+                key={`${badge.chainId}/${badge.contractAddress}/${badge.tokenId}`}
+                badge={badge}
+                to={`badges/${badge.chainId}/${badge.contractAddress}/${badge.tokenId}`}
+                disableShadow // FIXME: Enable shadow under tiles by fixing edges underlapping
+              />
+            ))}
+            {/* FIXME: Use rounded hexagonal shape, see HexagonBase */}
+            {hasMore && (
+              <>
+                <li
+                  key="placeholder"
+                  className="relative col-start-5 col-end-5 row-start-1 row-end-1 w-[calc(4/3_*_100%)] -translate-x-[calc(1/8_*_100%)] -translate-y-1/2 sm:hidden"
+                >
+                  <HexagonBase className="w-full"></HexagonBase>
+                </li>
+                <li
+                  key="showAllButton"
+                  className="relative w-[calc(4/3_*_100%)] -translate-x-[calc(1/8_*_100%)] -translate-y-1/2 sm:hidden"
+                >
+                  <HexagonBase rounded className="w-full">
+                    {showAllButton}
+                  </HexagonBase>
+                </li>
+              </>
+            )}
+          </ul>
+        </div>
+        {hasMore && <div className="my-4 max-sm:hidden">{showAllButton}</div>}
+      </div>
     </ProfileSectionWrapper>
   );
 };
diff --git a/src/components/organisms/CollectiblesSection.tsx b/src/components/organisms/CollectiblesSection.tsx
index c6aedae..259f8d4 100644
--- a/src/components/organisms/CollectiblesSection.tsx
+++ b/src/components/organisms/CollectiblesSection.tsx
@@ -56,14 +56,14 @@ export const CollectiblesSection: React.FC<CollectiblesSectionProps> = (
     </Button>
   );
 
-  // TODO: Handle click on collectible when collectible page implemented
   return (
     <ProfileSectionWrapper
       title={sectionTitle}
       badgeValue={collectibles.length}
       onClickMore={handleClickMore}
+      style={{ marginBottom: "-1rem" }}
     >
-      <ul className="grid snap-x snap-mandatory auto-cols-[160px] gap-2 overflow-x-auto max-sm:grid-flow-col sm:grid-cols-4">
+      <ul className="grid snap-x snap-mandatory auto-cols-[160px] gap-2 overflow-x-auto pb-4 max-sm:grid-flow-col sm:grid-cols-4">
         {truncatedCollectiblesList.map((collectible) => (
           <li
             key={`${collectible.chainId}/${collectible.contractAddress}/${collectible.tokenId}`}
@@ -85,7 +85,7 @@ export const CollectiblesSection: React.FC<CollectiblesSectionProps> = (
           </li>
         )}
       </ul>
-      {hasMore && <div className="mt-4 max-sm:hidden">{showAllButton}</div>}
+      {hasMore && <div className="my-4 max-sm:hidden">{showAllButton}</div>}
     </ProfileSectionWrapper>
   );
 };
diff --git a/src/components/organisms/index.ts b/src/components/organisms/index.ts
index 2143f36..b382912 100644
--- a/src/components/organisms/index.ts
+++ b/src/components/organisms/index.ts
@@ -1,6 +1,6 @@
 export * from "./AssetDetailsMainInfo";
 export * from "./BadgeDetailsProperties";
-export * from "./BadgeGrid";
+export * from "./BadgeMosaic";
 export * from "./BadgesSection";
 export * from "./CollectibleDetailsProperties";
 export * from "./CollectibleGrid";
diff --git a/src/components/pages/BadgeListView.tsx b/src/components/pages/BadgeListView.tsx
index 194b7ed..3ea14aa 100644
--- a/src/components/pages/BadgeListView.tsx
+++ b/src/components/pages/BadgeListView.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { PageWrapper, RedirectionCard } from "components/molecules";
-import { BadgeGrid } from "components/organisms";
+import { BadgeMosaic } from "components/organisms";
 import { useBadges, useProfileData } from "lib/hooks";
 import { useIntl } from "react-intl";
 import { useParams } from "react-router-dom";
@@ -47,7 +47,7 @@ export const BadgeListView: React.FunctionComponent = () => {
   return (
     <PageWrapper title={pageTitle} badgeValue={badges?.length}>
       {badges?.length ? (
-        <BadgeGrid className="pt-2" badges={badges} />
+        <BadgeMosaic className="pt-2" badges={badges} />
       ) : (
         <RedirectionCard
           redirectPath={redirectPath}
diff --git a/src/mock/data-ryan.ts b/src/mock/data-ryan.ts
index 2a8359f..0efc617 100644
--- a/src/mock/data-ryan.ts
+++ b/src/mock/data-ryan.ts
@@ -17,10 +17,8 @@ import nftThorchain78Image from "./images/ryan/nft-thorchain-78.png";
 import nftLens85835Image from "./images/ryan/nft-lens-85835.png";
 import nftArbitrum426456Image from "./images/ryan/nft-arbitrum-426456.png";
 import nftZerion5Image from "./images/ryan/nft-zerion-5.png";
-import twitterAccountBadge from "./images/badges/twitter-account.png";
-import discordAccountBadge from "./images/badges/discord-account.png";
-import facebookAccountBadge from "./images/badges/facebook-account.png";
-import veridaIdentityBadge from "./images/badges/verida-identity.png";
+import facebookAccountBadge from "./images/badges/facebook-account-badge.png";
+import twitterAccountBadge from "./images/badges/twitter-account-badge.png";
 
 export const identityInfo: IdentityInfo = {
   did: "did:vda:0x4F984180236a323d90346e36D848792b26b4049E",
@@ -214,7 +212,7 @@ export const badges: Badge[] = [
     tokenLabel: "Verida Identity",
     description: "",
     ownerAddress: "0x378e4BCb49EE4B270A4808EA1Fc39B26BD89336E",
-    media: veridaIdentityBadge,
+    media: facebookAccountBadge,
     proofLabel: "Verida Identity",
     proofValue: "ryan",
   },
@@ -226,7 +224,7 @@ export const badges: Badge[] = [
     tokenLabel: "Discord Account",
     description: "",
     ownerAddress: "0x378e4BCb49EE4B270A4808EA1Fc39B26BD89336E",
-    media: discordAccountBadge,
+    media: twitterAccountBadge,
     proofLabel: "Discord Account",
     proofValue: "ryan#7622",
   },
@@ -242,4 +240,100 @@ export const badges: Badge[] = [
     proofLabel: "Facebook Account",
     proofValue: "@RyanJKris",
   },
+  {
+    chainId: Chains.POLYGON,
+    contractAddress: "0xa7d8d9ef8D8Ce8992Df33D8b8CF4Aebabd5bD270",
+    tokenId: "twitter-account-2",
+    collectionLabel: "Verida Badges",
+    tokenLabel: "Twitter Account",
+    description: "",
+    ownerAddress: "0x378e4BCb49EE4B270A4808EA1Fc39B26BD89336E",
+    media: twitterAccountBadge,
+    proofLabel: "Twitter Account",
+    proofValue: "@RyanJKris",
+  },
+  {
+    chainId: Chains.POLYGON,
+    contractAddress: "0xa7d8d9ef8D8Ce8992Df33D8b8CF4Aebabd5bD271",
+    tokenId: "verida-identity-2",
+    collectionLabel: "Verida Badges",
+    tokenLabel: "Verida Identity",
+    description: "",
+    ownerAddress: "0x378e4BCb49EE4B270A4808EA1Fc39B26BD89336E",
+    media: facebookAccountBadge,
+    proofLabel: "Verida Identity",
+    proofValue: "ryan",
+  },
+  {
+    chainId: Chains.POLYGON,
+    contractAddress: "0xa7d8d9ef8D8Ce8992Df33D8b8CF4Aebabd5bD272",
+    tokenId: "discord-account-2",
+    collectionLabel: "Verida Badges",
+    tokenLabel: "Discord Account",
+    description: "",
+    ownerAddress: "0x378e4BCb49EE4B270A4808EA1Fc39B26BD89336E",
+    media: twitterAccountBadge,
+    proofLabel: "Discord Account",
+    proofValue: "ryan#7622",
+  },
+  {
+    chainId: Chains.POLYGON,
+    contractAddress: "0xa7d8d9ef8D8Ce8992Df33D8b8CF4Aebabd5bD273",
+    tokenId: "facebook-account-2",
+    collectionLabel: "Verida Badges",
+    tokenLabel: "Facebook Account",
+    description: "",
+    ownerAddress: "0x378e4BCb49EE4B270A4808EA1Fc39B26BD89336E",
+    media: facebookAccountBadge,
+    proofLabel: "Facebook Account",
+    proofValue: "@RyanJKris",
+  },
+  {
+    chainId: Chains.POLYGON,
+    contractAddress: "0xa7d8d9ef8D8Ce8992Df33D8b8CF4Aebabd5bD270",
+    tokenId: "twitter-account-3",
+    collectionLabel: "Verida Badges",
+    tokenLabel: "Twitter Account",
+    description: "",
+    ownerAddress: "0x378e4BCb49EE4B270A4808EA1Fc39B26BD89336E",
+    media: twitterAccountBadge,
+    proofLabel: "Twitter Account",
+    proofValue: "@RyanJKris",
+  },
+  {
+    chainId: Chains.POLYGON,
+    contractAddress: "0xa7d8d9ef8D8Ce8992Df33D8b8CF4Aebabd5bD271",
+    tokenId: "verida-identity-3",
+    collectionLabel: "Verida Badges",
+    tokenLabel: "Verida Identity",
+    description: "",
+    ownerAddress: "0x378e4BCb49EE4B270A4808EA1Fc39B26BD89336E",
+    media: facebookAccountBadge,
+    proofLabel: "Verida Identity",
+    proofValue: "ryan",
+  },
+  {
+    chainId: Chains.POLYGON,
+    contractAddress: "0xa7d8d9ef8D8Ce8992Df33D8b8CF4Aebabd5bD272",
+    tokenId: "discord-account-3",
+    collectionLabel: "Verida Badges",
+    tokenLabel: "Discord Account",
+    description: "",
+    ownerAddress: "0x378e4BCb49EE4B270A4808EA1Fc39B26BD89336E",
+    media: twitterAccountBadge,
+    proofLabel: "Discord Account",
+    proofValue: "ryan#7622",
+  },
+  {
+    chainId: Chains.POLYGON,
+    contractAddress: "0xa7d8d9ef8D8Ce8992Df33D8b8CF4Aebabd5bD273",
+    tokenId: "facebook-account-3",
+    collectionLabel: "Verida Badges",
+    tokenLabel: "Facebook Account",
+    description: "",
+    ownerAddress: "0x378e4BCb49EE4B270A4808EA1Fc39B26BD89336E",
+    media: facebookAccountBadge,
+    proofLabel: "Facebook Account",
+    proofValue: "@RyanJKris",
+  },
 ];
diff --git a/src/mock/images/badges/discord-account.png b/src/mock/images/badges/discord-account.png
deleted file mode 100644
index 4b9c768..0000000
Binary files a/src/mock/images/badges/discord-account.png and /dev/null differ
diff --git a/src/mock/images/badges/facebook-account-badge.png b/src/mock/images/badges/facebook-account-badge.png
new file mode 100644
index 0000000..44725b1
Binary files /dev/null and b/src/mock/images/badges/facebook-account-badge.png differ
diff --git a/src/mock/images/badges/facebook-account.png b/src/mock/images/badges/facebook-account.png
deleted file mode 100644
index a394849..0000000
Binary files a/src/mock/images/badges/facebook-account.png and /dev/null differ
diff --git a/src/mock/images/badges/twitter-account-badge.png b/src/mock/images/badges/twitter-account-badge.png
new file mode 100644
index 0000000..2e65b48
Binary files /dev/null and b/src/mock/images/badges/twitter-account-badge.png differ
diff --git a/src/mock/images/badges/twitter-account.png b/src/mock/images/badges/twitter-account.png
deleted file mode 100644
index 51070d9..0000000
Binary files a/src/mock/images/badges/twitter-account.png and /dev/null differ
diff --git a/src/mock/images/badges/verida-identity.png b/src/mock/images/badges/verida-identity.png
deleted file mode 100644
index 74bc689..0000000
Binary files a/src/mock/images/badges/verida-identity.png and /dev/null differ
diff --git a/tailwind.config.js b/tailwind.config.js
index 55295fb..51e8482 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -16,6 +16,7 @@ module.exports = {
       "error": "#CE4B46",
       "green": "#13ce66",
       "gray-light": "#9D9D9D",
+      "badge-purple": "#7703D1",
       "verida-blue": "#37D5C7",
       "verida-purple": "#5354D1",
     },