diff --git a/src/components/svgCard.svelte b/src/components/svgCard.svelte
index 75b1d08..4b92d0d 100644
--- a/src/components/svgCard.svelte
+++ b/src/components/svgCard.svelte
@@ -52,7 +52,7 @@
       alt={svgInfo.title}
     />
     <div class="mb-3 flex flex-col items-center justify-center">
-      <p class="truncate text-[15px] font-medium">{svgInfo.title}</p>
+      <p class="truncate text-[15px] font-medium text-balance text-center">{svgInfo.title}</p>
       <a
         href={`/directory/${svgInfo.category.toLowerCase()}`}
         class="text-sm lowercase text-neutral-500 hover:underline">{svgInfo.category}</a
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 14d2c7d..171c7b3 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -16,5 +16,13 @@ module.exports = {
       }
     }
   },
-  plugins: []
+  plugins: [
+    ({ addUtilities }) => {
+      addUtilities({
+        '.text-balance': {
+          'text-wrap': 'balance'
+        }
+      });
+    }
+  ]
 };