diff --git a/apps/server/AliasVault.Client/Main/Components/Credentials/CredentialCard.razor b/apps/server/AliasVault.Client/Main/Components/Credentials/CredentialCard.razor
index cc82065a4..4f246cf60 100644
--- a/apps/server/AliasVault.Client/Main/Components/Credentials/CredentialCard.razor
+++ b/apps/server/AliasVault.Client/Main/Components/Credentials/CredentialCard.razor
@@ -1,11 +1,11 @@
 @inject NavigationManager NavigationManager
 
-<div @onclick="ShowDetails" class="credential-card p-4 space-y-2 bg-white border border-gray-200 rounded-lg shadow-sm dark:border-gray-700
+<div @onclick="ShowDetails" class="credential-card overflow-hidden p-4 space-y-2 bg-white border border-gray-200 rounded-lg shadow-sm dark:border-gray-700
  dark:bg-gray-800 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200">
     <div class="px-4 py-2 text-gray-400 rounded text-center flex flex-col items-center">
         <DisplayFavicon FaviconBytes="@Obj.Logo" Padding="true"></DisplayFavicon>
-        <div class="text-gray-900 dark:text-gray-100">@GetServiceName()</div>
-        <div class="text-gray-500 dark:text-gray-400">@GetDisplayText()</div>
+        <div class="text-gray-900 dark:text-gray-100 break-words w-full">@GetServiceName()</div>
+        <div class="text-gray-500 dark:text-gray-400 break-words w-full text-sm">@GetDisplayText()</div>
     </div>
 </div>
 
@@ -36,13 +36,11 @@
             returnValue = Obj.Email;
         }
 
-        // Trim the return value to max. 27 characters.
-        return returnValue.Length > 27 ? returnValue[..24] + "..." : returnValue;
+        return returnValue;
     }
 
-
     /// <summary>
-    /// Get the service name for a credential, trimming it to maximum length so it doesn't overflow the UI.
+    /// Get the service name for a credential.
     /// </summary>
     private string GetServiceName()
     {
@@ -53,7 +51,7 @@
             returnValue = Obj.Service;
         }
 
-        return returnValue.Length > 27 ? returnValue[..24] + "..." : returnValue;
+        return returnValue;
     }
 
     /// <summary>
diff --git a/apps/server/AliasVault.Client/wwwroot/css/tailwind.css b/apps/server/AliasVault.Client/wwwroot/css/tailwind.css
index e0e439711..0b6c1659c 100644
--- a/apps/server/AliasVault.Client/wwwroot/css/tailwind.css
+++ b/apps/server/AliasVault.Client/wwwroot/css/tailwind.css
@@ -1309,6 +1309,10 @@ video {
   white-space: nowrap;
 }
 
+.break-words {
+  overflow-wrap: break-word;
+}
+
 .break-all {
   word-break: break-all;
 }