diff --git a/src/pages/setting/personality/List.tsx b/src/pages/setting/personality/List.tsx
index 68309ba..9760d96 100644
--- a/src/pages/setting/personality/List.tsx
+++ b/src/pages/setting/personality/List.tsx
@@ -44,7 +44,7 @@ const List: FC = () => {
                 </Link>
             </div>
 
-            <div className='mt-9 flex flex-wrap gap-10'>
+            <div className='mt-9 flex flex-col lg:flex-row flex-wrap lg:gap-10 gap-5'>
                 {
                     data?.data?.templates?.map((item: TemplateResponseType) => {
                         return (
diff --git a/src/pages/setting/personality/components/Templete.tsx b/src/pages/setting/personality/components/Templete.tsx
index 7c5d2c9..be4f47f 100644
--- a/src/pages/setting/personality/components/Templete.tsx
+++ b/src/pages/setting/personality/components/Templete.tsx
@@ -51,7 +51,7 @@ const Templete: FC<{
 
     return (
         <>
-            <div key={item.id} className='flex-1 max-w-[25%] min-w-[20%] w-full bg-white rounded-3xl p-4'>
+            <div key={item.id} className='flex-1 lg:max-w-[25%] min-w-[20%] w-full bg-white rounded-3xl p-4'>
                 <div className='h-[140px] bg-gray-200 rounded-3xl'>
                     <img src={item.thumbnailUrl} alt={item.name} className='w-full h-full object-contain' />
                 </div>