diff --git a/app/components/Comments/Comments.Comment.tsx b/app/components/Comments/Comments.Comment.tsx
index c99adf7..50710bc 100644
--- a/app/components/Comments/Comments.Comment.tsx
+++ b/app/components/Comments/Comments.Comment.tsx
@@ -30,9 +30,9 @@ export const CommentsComment = (props: {
   }, []);
 
   return (
-    <article className="p-6 text-base bg-white rounded-lg dark:bg-gray-900">
+    <article className="p-6 text-sm bg-white rounded-lg sm:text-base dark:bg-gray-900">
       <footer className="flex items-center justify-between mb-2">
-        <div className="flex items-center">
+        <div className="flex flex-col items-start gap-1 sm:items-center sm:flex-row">
           <p className="inline-flex items-center mr-3 text-sm font-semibold text-gray-900 dark:text-white">
             <img
               className="w-6 h-6 mr-2 rounded-full"
diff --git a/app/components/Comments/Comments.Main.tsx b/app/components/Comments/Comments.Main.tsx
index a38eb79..3009db0 100644
--- a/app/components/Comments/Comments.Main.tsx
+++ b/app/components/Comments/Comments.Main.tsx
@@ -7,7 +7,7 @@ export const CommentsMain = (props: {
 }) => {
   return (
     <Card className="antialiased">
-      <div className="max-w-2xl px-4 mx-auto">
+      <div className="w-full">
         <div className="flex items-center justify-between mb-6">
           <div className="flex flex-col gap-1">
             <h2 className="text-lg font-bold text-gray-900 lg:text-2xl dark:text-white">
@@ -18,8 +18,7 @@ export const CommentsMain = (props: {
             </p>
           </div>
           <Button
-            size={"sm"}
-            className="text-gray-500 border border-gray-600 rounded-full hover:bg-black hover:text-white hover:border-black dark:text-gray-400 dark:border-gray-500"
+            className="px-2 py-1 text-xs text-gray-500 border border-gray-600 rounded-full hover:bg-black hover:text-white hover:border-black dark:text-gray-400 dark:border-gray-500"
             color="inline"
           >
             Показать все