diff --git a/ui/desktop/app/components/credentials-panel/index.hbs b/ui/desktop/app/components/credentials-panel/index.hbs
index 0a5df3ed4..28d8b9b85 100644
--- a/ui/desktop/app/components/credentials-panel/index.hbs
+++ b/ui/desktop/app/components/credentials-panel/index.hbs
@@ -48,16 +48,20 @@
   {{else}}
     <div class='credential-panel-body'>
       <div class='credential-header'>
-        <div class='credential-name hds-typography-display-200'>
+        <Hds::Text::Display class='credential-name' @weight='semibold'>
           {{#if credential.source.name}}
             {{credential.source.name}}
           {{else}}
             {{credential.source.id}}
           {{/if}}
-        </div>
-        <div class='hds-typography-body-100'>
+        </Hds::Text::Display>
+        <Hds::Text::Body
+          class='credential-description'
+          @size='100'
+          @weight='semibold'
+        >
           {{credential.source.description}}
-        </div>
+        </Hds::Text::Body>
       </div>
 
       <ul class='credential-secret'>
diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss
index a9526680c..7471bda60 100644
--- a/ui/desktop/app/styles/app.scss
+++ b/ui/desktop/app/styles/app.scss
@@ -479,8 +479,9 @@
   }
 }
 
-.credential-name {
-  font-weight: var(--token-typography-font-weight-semibold);
+.credential-name,
+.credential-description {
+  overflow-wrap: break-word;
 }
 
 .raw-credential-panel-body {