diff --git a/src/app/[name]/(Main)/[id]/page.tsx b/src/app/[name]/(Main)/[id]/page.tsx
index 4e6b2e9..99583d9 100644
--- a/src/app/[name]/(Main)/[id]/page.tsx
+++ b/src/app/[name]/(Main)/[id]/page.tsx
@@ -18,10 +18,10 @@ function FoodPage({ }: Props) {
     const price = 0; // TODO: Replace with actual price if needed
 
     return (
-        <div className='w-full -translate-y-2 pt-6'>
-            <div className="relative w-full rounded-2xl overflow-hidden">
+        <div className='lg:absolute lg:top-1/2 not-lg:max-w-lg not-lg:place-self-center lg:-translate-y-1/2 xl:right-[285px] lg:left-5 lg:right-4 lg:bottom-4 not-lg:w-full not-md:-translate-y-2 pt-6 flex flex-col lg:grid grid-cols-2'>
+            <div className="relative w-full h-full not-lg:bg-container rounded-2xl overflow-hidden lg:rounded-r-none lg:order-1">
                 <Image
-                    className='w-full'
+                    className='w-full object-cover h-full'
                     src={'/assets/images/food-preview-hq.png'}
                     alt='Food image'
                     height={100}
@@ -39,7 +39,7 @@ function FoodPage({ }: Props) {
                 </div>
             </div>
 
-            <div className="relative px-6 pt-6 pb-7.5 bg-white w-full rounded-3xl overflow-hidden -translate-y-6">
+            <div className="relative px-6 pt-6 pb-7.5 lg:flex lg:flex-col lg:justify-center bg-white w-full rounded-3xl overflow-hidden not-lg:-translate-y-6 lg:rounded-l-none">
                 <div className="w-full inline-flex justify-between items-center">
                     <h5 className="text-base font-bold">
                         کباب چوبی مخصوص