diff --git a/src/features/badges/components/badge-showcase-skeleton.tsx b/src/features/badges/components/badge-showcase-skeleton.tsx
index 3a08d4d..9bd972d 100644
--- a/src/features/badges/components/badge-showcase-skeleton.tsx
+++ b/src/features/badges/components/badge-showcase-skeleton.tsx
@@ -1,45 +1,45 @@
-import { Box, Card, Skeleton, Text } from "@mantine/core";
+import { Box, Skeleton, Text } from "@mantine/core";
 
 const BadgeShowcaseSkeleton = () => {
   return (
     <Box mb="lg">
-      <Card
-        withBorder
-        radius="md"
-        p={0}
+      <Box
+        px="md"
         style={{
-          overflow: 'hidden',
+          maxHeight: '220px',
+          overflowY: 'auto',
+          overflowX: 'hidden',
+          width: '100%',
         }}
       >
         <Box
-          p="md"
-          style={{
-            background: 'light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-6))',
-            borderBottom: '1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4))',
-          }}
-        >
-          <Text size="sm" fw={600} tt="uppercase" c="dimmed" style={{ letterSpacing: '0.5px' }}>
-            Badges
-          </Text>
-        </Box>
-
-        <Box
-          p="md"
           style={{
             display: 'grid',
-            gridTemplateColumns: 'repeat(auto-fill, minmax(110px, 1fr))',
-            gap: 'var(--mantine-spacing-sm)',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(85px, 1fr))',
+            gap: 'var(--mantine-spacing-md)',
+            paddingBottom: 'var(--mantine-spacing-sm)',
+            width: '100%',
           }}
         >
           {[1, 2, 3, 4, 5, 6].map((i) => (
-            <Skeleton
+            <Box
               key={i}
-              height={70}
-              radius="md"
-            />
+              style={{
+                aspectRatio: '1',
+                position: 'relative',
+              }}
+            >
+              <Skeleton
+                height="100%"
+                radius="12px"
+                style={{
+                  aspectRatio: '1',
+                }}
+              />
+            </Box>
           ))}
         </Box>
-      </Card>
+      </Box>
     </Box>
   );
 };
diff --git a/src/features/badges/components/badge-showcase.tsx b/src/features/badges/components/badge-showcase.tsx
index f49264c..14c23b5 100644
--- a/src/features/badges/components/badge-showcase.tsx
+++ b/src/features/badges/components/badge-showcase.tsx
@@ -88,18 +88,13 @@ const BadgeShowcase = ({ playerId }: BadgeShowcaseProps) => {
 
   return (
     <Box mb="lg">
-      <Box mb="sm" px="md">
-        <Text size="sm" fw={600} tt="uppercase" c="dimmed" style={{ letterSpacing: '0.5px' }}>
-          Badges
-        </Text>
-      </Box>
-
       <Box
         px="md"
         style={{
-          maxHeight: '200px',
+          maxHeight: '220px',
           overflowY: 'auto',
           overflowX: 'hidden',
+          width: '100%',
         }}
       >
         <Box
@@ -108,13 +103,13 @@ const BadgeShowcase = ({ playerId }: BadgeShowcaseProps) => {
             gridTemplateColumns: 'repeat(auto-fill, minmax(85px, 1fr))',
             gap: 'var(--mantine-spacing-md)',
             paddingBottom: 'var(--mantine-spacing-sm)',
+            width: '100%',
           }}
         >
           {badgesToDisplay.map((display) => {
-            const isStackableBadge = display.badge.criteria?.tournament_wins !== undefined ||
-                                     display.badge.criteria?.placement !== undefined;
+            const isStackableBadge = ['winner_badge', 'silver_medal_badge', 'bronze_medal_badge'].includes(display.badge.key);
             const stackCount = display.earned && isStackableBadge
-              ? Math.floor((display.progress?.progress || 0) / getTargetProgress(display.badge))
+              ? (display.progress?.progress || 0)
               : 1;
             const showStack = stackCount > 1;
 
@@ -133,32 +128,32 @@ const BadgeShowcase = ({ playerId }: BadgeShowcaseProps) => {
                         {[...Array(Math.min(stackCount - 1, 2))].map((_, i) => (
                           <Box
                             key={i}
-                            style={(theme) => ({
+                            style={{
                               aspectRatio: '1',
                               borderRadius: '12px',
-                              background: `linear-gradient(135deg, ${theme.colors[theme.primaryColor][5]} 0%, ${theme.colors[theme.primaryColor][7]} 100%)`,
-                              border: `2px solid ${theme.colors[theme.primaryColor][6]}`,
+                              background: 'transparent',
+                              border: '2px solid var(--mantine-primary-color-5)',
                               position: 'absolute',
                               top: `${(i + 1) * 3}px`,
                               left: `${(i + 1) * 3}px`,
                               right: `-${(i + 1) * 3}px`,
                               bottom: `-${(i + 1) * 3}px`,
-                              opacity: 0.6 - (i * 0.2),
+                              opacity: 0.4 - (i * 0.15),
                               zIndex: -(i + 1),
-                            })}
+                            }}
                           />
                         ))}
                       </>
                     )}
 
                     <Box
-                      style={(theme) => ({
+                      style={{
                         aspectRatio: '1',
                         borderRadius: '12px',
-                        background: display.earned
-                          ? `linear-gradient(135deg, ${theme.colors[theme.primaryColor][5]} 0%, ${theme.colors[theme.primaryColor][7]} 100%)`
-                          : 'light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-6))',
-                        border: `2px solid ${display.earned ? theme.colors[theme.primaryColor][6] : 'light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4))'}`,
+                        background: 'light-dark(var(--mantine-color-white), var(--mantine-color-dark-7))',
+                        border: display.earned
+                          ? '2px solid var(--mantine-primary-color-6)'
+                          : '2px dashed var(--mantine-primary-color-4)',
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'center',
@@ -167,46 +162,33 @@ const BadgeShowcase = ({ playerId }: BadgeShowcaseProps) => {
                         padding: 'var(--mantine-spacing-xs)',
                         position: 'relative',
                         boxShadow: display.earned
-                          ? `0 2px 8px ${theme.colors[theme.primaryColor][6]}30`
-                          : '0 1px 3px rgba(0, 0, 0, 0.1)',
-                        opacity: display.earned ? 1 : 0.5,
+                          ? '0 0 0 1px color-mix(in srgb, var(--mantine-primary-color-6) 20%, transparent)'
+                          : 'none',
+                        opacity: display.earned ? 1 : 0.4,
                         zIndex: 1,
-                        ':hover': {
-                          transform: 'translateY(-2px)',
-                          boxShadow: display.earned
-                            ? `0 4px 12px ${theme.colors[theme.primaryColor][6]}40`
-                            : '0 2px 6px rgba(0, 0, 0, 0.15)',
-                        },
-                      })}
+                      }}
                     >
                       {display.earned ? (
                         <MedalIcon
                           size={32}
                           weight="fill"
-                          style={{
-                            color: 'white',
-                            filter: 'drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))',
-                          }}
+                          color="var(--mantine-primary-color-6)"
                         />
                       ) : (
                         <LockKeyIcon
                           size={28}
                           weight="regular"
-                          style={{
-                            color: 'var(--mantine-color-dimmed)',
-                          }}
+                          color="var(--mantine-color-dimmed)"
                         />
                       )}
 
                       {showStack && (
                         <Box
-                          style={(theme) => ({
+                          style={{
                             position: 'absolute',
                             top: '4px',
                             right: '4px',
-                            background: theme.colors[theme.primaryColor][8],
-                            color: 'white',
-                            borderRadius: '50%',
+                            color: 'var(--mantine-primary-color-6)',
                             width: '20px',
                             height: '20px',
                             display: 'flex',
@@ -214,11 +196,9 @@ const BadgeShowcase = ({ playerId }: BadgeShowcaseProps) => {
                             justifyContent: 'center',
                             fontSize: '10px',
                             fontWeight: 700,
-                            border: '2px solid white',
-                            boxShadow: '0 1px 3px rgba(0, 0, 0, 0.3)',
-                          })}
+                          }}
                         >
-                          {stackCount}
+                          x{stackCount}
                         </Box>
                       )}
 
@@ -226,10 +206,9 @@ const BadgeShowcase = ({ playerId }: BadgeShowcaseProps) => {
                         size="xs"
                         fw={display.earned ? 600 : 500}
                         ta="center"
-                        c={display.earned ? 'white' : 'dimmed'}
+                        c={display.earned ? undefined : 'dimmed'}
                         style={{
                           lineHeight: 1.2,
-                          textShadow: display.earned ? '0 1px 2px rgba(0, 0, 0, 0.3)' : 'none',
                         }}
                       >
                         {display.badge.name}
diff --git a/src/features/players/components/profile/index.tsx b/src/features/players/components/profile/index.tsx
index 9ae7a9b..33c397d 100644
--- a/src/features/players/components/profile/index.tsx
+++ b/src/features/players/components/profile/index.tsx
@@ -1,4 +1,4 @@
-import { Box } from "@mantine/core";
+import { Box, Stack, Text, Divider } from "@mantine/core";
 import { Suspense } from "react";
 import Header from "./header";
 import SwipeableTabs from "@/components/swipeable-tabs";
@@ -21,14 +21,19 @@ const Profile = ({ id }: ProfileProps) => {
   const tabs = [
     {
       label: "Overview",
-      content: (
-        <>
+      content: <>
+        <Stack px="md">
+          <Text size="md" fw={700}>Badges</Text>
           <Suspense fallback={<BadgeShowcaseSkeleton />}>
             <BadgeShowcase playerId={id} />
           </Suspense>
+        </Stack>
+        <Divider my="md" />
+        <Stack>
+          <Text px="md" size="md" fw={700}>Statistics</Text>
           <StatsOverview statsData={stats} isLoading={statsLoading} />
-        </>
-      ),
+        </Stack>
+      </>,
     },
     {
       label: "Matches",