diff --git a/src/components/ServiceItem.tsx b/src/components/ServiceItem.tsx
index 8034b9b..1089902 100644
--- a/src/components/ServiceItem.tsx
+++ b/src/components/ServiceItem.tsx
@@ -93,10 +93,10 @@ const ServiceItem: FC<Props> = (props: Props) => {
             }
 
 
-            <div className='mt-4 flex-1 flex gap-2 items-end'>
-                <Link target={props.isLinkPanel && !props.isDisabled ? '_blank' : ''} to={props.isDisabled ? '#' : props.isLinkPanel ? item.link : Pages.services.detail + item.slug}>
+            <div className='mt-4 flex-1 flex sm:flex-row flex-col gap-2 items-end'>
+                <Link className='sm:w-fit w-full' target={props.isLinkPanel && !props.isDisabled ? '_blank' : ''} to={props.isDisabled ? '#' : props.isLinkPanel ? item.link : Pages.services.detail + item.slug}>
                     <Button
-                        className='h-8 w-fit px-2 text-xs text-black bg-description bg-opacity-20 rounded-xl'
+                        className='h-8 sm:w-fit w-full px-2 text-xs text-black bg-description bg-opacity-20 rounded-xl'
                     >
                         <div className='flex gap-2 whitespace-nowrap'>
                             {
@@ -112,9 +112,9 @@ const ServiceItem: FC<Props> = (props: Props) => {
 
                 {
                     props.subscriptionId &&
-                    <Link to={Pages.services.detail + item.slug + '?id=' + props.subscriptionId}>
+                    <Link className='sm:w-fit w-full' to={Pages.services.detail + item.slug + '?id=' + props.subscriptionId}>
                         <Button
-                            className='h-8 w-fit px-2 text-xs text-black bg-description bg-opacity-20 rounded-xl'
+                            className='h-8 sm:w-fit px-2 text-xs text-black bg-description bg-opacity-20 rounded-xl'
                         >
                             <div className='flex gap-2 whitespace-nowrap'>
                                 {t('service.extend')}