diff --git a/client/src/components/kb/FeaturedList/FeaturedList.css b/client/src/components/kb/FeaturedList/FeaturedList.css
index aeba6720..6a6257ca 100644
--- a/client/src/components/kb/FeaturedList/FeaturedList.css
+++ b/client/src/components/kb/FeaturedList/FeaturedList.css
@@ -1,8 +1,7 @@
 .items-list {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, 12rem);
-  justify-content: space-between;
-  grid-gap: 1rem;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
   padding-top: 0.5rem;
 }
 .featured-article-card {
@@ -13,7 +12,7 @@
   text-align: center;
   width: 18rem;
   height: 10rem;
-  padding: 0.5rem 0.3rem;
+  padding: 0.5rem 1rem;
   margin-right: 1.5rem;
   margin-bottom: 1.25rem;
   cursor: pointer;
@@ -34,7 +33,8 @@
   width: 20rem;
   height: 18rem;
   padding: 0.5rem;
-  margin-right: 1rem;
+  margin-right: 1.5rem;
+  margin-bottom: 1.25rem;
   cursor: pointer;
   border: 1px solid #e5e7eb;
   border-radius: 8px;
diff --git a/client/src/components/kb/FeaturedList/FeaturedPageCard.tsx b/client/src/components/kb/FeaturedList/FeaturedPageCard.tsx
index 584ae4e0..0ff91f7f 100644
--- a/client/src/components/kb/FeaturedList/FeaturedPageCard.tsx
+++ b/client/src/components/kb/FeaturedList/FeaturedPageCard.tsx
@@ -38,11 +38,11 @@ const FeaturedPageCard = ({
           <Icon name="trash" size="small" />
         </div>
       )}
-      <div className="flex flex-col">
-        <p className="text-lg font-semibold flex-wrap">
-          {truncateString(page.page.title, 50)}
+      <div className="flex flex-col px-4">
+        <p className="text-lg font-semibold flex-wrap line-clamp-2">
+          {page.page.title}
         </p>
-        <p className="text-sm flex-wrap">{truncateString(page.page.description, 100)}</p>
+        <p className="text-sm flex-wrap my-1 line-clamp-3">{page.page.description}</p>
       </div>
       <ConfirmDeleteFeaturedModal
         open={showDeleteModal}