diff --git a/lib/modules/artist/artist_card.dart b/lib/modules/artist/artist_card.dart
index add2608d..57c955c7 100644
--- a/lib/modules/artist/artist_card.dart
+++ b/lib/modules/artist/artist_card.dart
@@ -1,14 +1,13 @@
 import 'package:auto_size_text/auto_size_text.dart';
-import 'package:flutter/material.dart';
+
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:skeletonizer/skeletonizer.dart';
+import 'package:shadcn_flutter/shadcn_flutter.dart';
 
 import 'package:spotify/spotify.dart';
 import 'package:spotube/components/image/universal_image.dart';
 import 'package:spotube/extensions/context.dart';
 import 'package:spotube/extensions/image.dart';
-import 'package:spotube/hooks/utils/use_breakpoint_value.dart';
-import 'package:spotube/hooks/utils/use_brightness_value.dart';
+
 import 'package:spotube/pages/artist/artist.dart';
 import 'package:spotube/provider/blacklist_provider.dart';
 import 'package:spotube/utils/service_utils.dart';
@@ -33,98 +32,50 @@ class ArtistCard extends HookConsumerWidget {
       ),
     );
 
-    final radius = BorderRadius.circular(15);
-
-    final double size = useBreakpointValue<double>(
-      xs: 130,
-      sm: 130,
-      md: 150,
-      others: 170,
-    );
-
-    return Container(
-      width: size,
-      margin: const EdgeInsets.symmetric(vertical: 5),
-      child: Material(
-        shadowColor: theme.colorScheme.surface,
-        color: Color.lerp(
-          theme.colorScheme.surfaceContainerHighest,
-          theme.colorScheme.surface,
-          useBrightnessValue(.9, .7),
-        ),
-        elevation: 3,
-        shape: RoundedRectangleBorder(
-          borderRadius: radius,
-          side: isBlackListed == true
-              ? const BorderSide(
-                  color: Colors.red,
-                  width: 2,
-                )
-              : BorderSide.none,
-        ),
-        child: InkWell(
-            onTap: () {
-              ServiceUtils.pushNamed(
-                context,
-                ArtistPage.name,
-                pathParameters: {
-                  "id": artist.id!,
-                },
-              );
+    return SizedBox(
+      width: 180,
+      child: Button.card(
+        onPressed: () {
+          ServiceUtils.pushNamed(
+            context,
+            ArtistPage.name,
+            pathParameters: {
+              "id": artist.id!,
             },
-            borderRadius: radius,
-            child: Padding(
-              padding: const EdgeInsets.all(12),
-              child: Column(
-                children: [
-                  Stack(
-                    children: [
-                      ConstrainedBox(
-                        constraints: BoxConstraints(
-                          maxHeight: size,
-                        ),
-                        child: CircleAvatar(
-                          backgroundImage: backgroundImage,
-                          radius: size / 2,
-                        ),
-                      ),
-                      Positioned(
-                        right: 0,
-                        child: Container(
-                          padding: const EdgeInsets.symmetric(
-                            horizontal: 10,
-                            vertical: 5,
-                          ),
-                          decoration: BoxDecoration(
-                              color: Colors.blue,
-                              borderRadius: BorderRadius.circular(50)),
-                          child: Skeleton.ignore(
-                            child: Text(
-                              context.l10n.artist,
-                              style: const TextStyle(
-                                color: Colors.white,
-                                fontSize: 12,
-                                fontWeight: FontWeight.bold,
-                              ),
-                            ),
-                          ),
-                        ),
-                      ),
-                    ],
-                  ),
-                  const SizedBox(height: 10),
-                  AutoSizeText(
-                    artist.name!,
-                    maxLines: 1,
-                    textAlign: TextAlign.center,
-                    overflow: TextOverflow.ellipsis,
-                    style: theme.textTheme.bodyMedium?.copyWith(
-                      fontWeight: FontWeight.bold,
-                    ),
+          );
+        },
+        child: Column(
+          children: [
+            Avatar(
+              initials: artist.name!.trim()[0].toUpperCase(),
+              provider: backgroundImage,
+              size: 130,
+            ),
+            const Gap(10),
+            AutoSizeText(
+              artist.name!,
+              maxLines: 2,
+              textAlign: TextAlign.center,
+              overflow: TextOverflow.ellipsis,
+              style: theme.typography.bold,
+            ),
+            const Spacer(),
+            Row(
+              mainAxisAlignment: MainAxisAlignment.end,
+              children: [
+                if (isBlackListed == true) ...[
+                  DestructiveBadge(
+                    child: Text(context.l10n.blacklisted.toUpperCase()),
                   ),
+                  const Gap(5),
                 ],
-              ),
-            )),
+                SecondaryBadge(
+                  child: Text(context.l10n.artist.toUpperCase()),
+                )
+              ],
+            )
+          ],
+        ),
       ),
     );
   }