diff --git a/apps/comments-ui/src/components/content/ContentTitle.js b/apps/comments-ui/src/components/content/ContentTitle.js
index 2ad249af58..f94d441f7f 100644
--- a/apps/comments-ui/src/components/content/ContentTitle.js
+++ b/apps/comments-ui/src/components/content/ContentTitle.js
@@ -31,7 +31,7 @@ const ContentTitle = ({title, showCount, count}) => {
     }
 
     return (
-        <div className="mb-10 flex w-full items-baseline justify-between font-sans">
+        <div className="mb-8 flex w-full items-baseline justify-between font-sans">
             <h2 className="text-[2.8rem] font-bold tracking-tight dark:text-[rgba(255,255,255,0.85)]">
                 <Title title={title}/>
             </h2>
diff --git a/apps/comments-ui/src/components/content/Pagination.js b/apps/comments-ui/src/components/content/Pagination.js
index 1bdf2340db..5d0977536e 100644
--- a/apps/comments-ui/src/components/content/Pagination.js
+++ b/apps/comments-ui/src/components/content/Pagination.js
@@ -20,8 +20,7 @@ const Pagination = (props) => {
 
     return (
         <button className="group mb-10 flex w-full items-center px-0 pt-0 pb-2 text-left font-sans text-md font-semibold text-neutral-700 dark:text-white " onClick={loadMore}>
-            <span className="mr-4 whitespace-nowrap">↑ Show {left} previous {left === 1 ? 'comment' : 'comments'}</span>
-            <span className="mt-[3px] inline-block h-[3px] w-full rounded bg-neutral-100 transition-[background-color] duration-200 ease-out group-hover:bg-neutral-200 dark:bg-[rgba(255,255,255,0.05)]" />
+            <span className="flex h-[39px] w-full items-center justify-center whitespace-nowrap rounded-[6px] bg-[rgb(229,229,229,0.4)] py-2 px-3 text-center font-sans text-sm font-semibold text-neutral-700 outline-0 transition-[opacity,background] duration-150 hover:bg-[rgb(229,229,229,0.7)] dark:bg-[rgba(255,255,255,0.08)] dark:text-neutral-100 dark:hover:bg-[rgba(255,255,255,0.1)]">↑ Show {left} previous {left === 1 ? 'comment' : 'comments'}</span>
         </button>
     );
 };
diff --git a/apps/comments-ui/src/components/content/RepliesPagination.js b/apps/comments-ui/src/components/content/RepliesPagination.js
index 34cad2d92b..14175db4ff 100644
--- a/apps/comments-ui/src/components/content/RepliesPagination.js
+++ b/apps/comments-ui/src/components/content/RepliesPagination.js
@@ -5,9 +5,11 @@ const RepliesPagination = (props) => {
     const count = props.count;
 
     return (
-        <button className="group my-10 flex w-full items-center text-left font-sans text-md font-semibold text-neutral-700 dark:text-white sm:mt-0" onClick={loadMore} data-testid="reply-pagination-button">
-            <span className="mr-4 whitespace-nowrap">↓ Show {count} more {count === 1 ? 'reply' : 'replies'}</span>
-        </button>
+        <div className="flex w-full items-center justify-start">
+            <button className="group ml-[48px] mb-10 flex w-auto items-center px-0 pt-0 pb-2 text-left font-sans text-md font-semibold text-neutral-700 dark:text-white sm:mb-12 " onClick={loadMore} data-testid="reply-pagination-button">
+                <span className="flex h-[39px] w-auto items-center justify-center whitespace-nowrap rounded-[6px] bg-[rgb(229,229,229,0.4)] py-2 px-4 text-center font-sans text-sm font-semibold text-neutral-700 outline-0 transition-[opacity,background] duration-150 hover:bg-[rgb(229,229,229,0.7)] dark:bg-[rgba(255,255,255,0.08)] dark:text-neutral-100 dark:hover:bg-[rgba(255,255,255,0.1)]">↓ Show {count} more {count === 1 ? 'reply' : 'replies'}</span>
+            </button>
+        </div>
     );
 };