diff --git a/frontend/src/components/CardDetailsPage.tsx b/frontend/src/components/CardDetailsPage.tsx
index e7d54beded..d62266fc2e 100644
--- a/frontend/src/components/CardDetailsPage.tsx
+++ b/frontend/src/components/CardDetailsPage.tsx
@@ -3,6 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { DetailsCardProps } from 'types/card'
 import { capitalize } from 'utils/capitalize'
 import { formatDate } from 'utils/dateFormatter'
+import { pluralize } from 'utils/pluralize'
 import { getSocialIcon } from 'utils/urlIconMappings'
 import ChapterMap from 'components/ChapterMap'
 import InfoBlock from 'components/InfoBlock'
@@ -88,7 +89,7 @@ const DetailsCard = ({
         )}
         <TopContributors contributors={topContributors} maxInitialDisplay={6} />
         {(type === 'project' || type === 'repository') && (
-          <>
+          <div className="grid-cols-2 gap-4 lg:grid">
             <ItemCardList
               title="Recent Issues"
               data={recentIssues}
@@ -99,7 +100,9 @@ const DetailsCard = ({
                   {item?.commentsCount ? (
                     <>
                       <FontAwesomeIcon icon={faFileCode} className="ml-4 mr-2 h-4 w-4" />
-                      <span>{item.commentsCount} comments</span>
+                      <span>
+                        {item.commentsCount} {pluralize(item.commentsCount, 'comment')}
+                      </span>
                     </>
                   ) : null}
                 </div>
@@ -117,7 +120,7 @@ const DetailsCard = ({
                 </div>
               )}
             />
-          </>
+          </div>
         )}
         {type === 'project' && repositories.length > 0 && (
           <SecondaryCard title="Repositories" className="mt-6">