diff --git a/src/app/[name]/cart/page.tsx b/src/app/[name]/cart/page.tsx
index faed11d..c73c94f 100644
--- a/src/app/[name]/cart/page.tsx
+++ b/src/app/[name]/cart/page.tsx
@@ -4,25 +4,41 @@ import Button from '@/components/button/PrimaryButton';
 import { ScrollArea } from '@/components/ui/scrollarea';
 import { useReceiptStore } from '@/zustand/receiptStore';
 import { motion } from 'framer-motion';
-import { Trash } from 'iconsax-react';
+import { ArrowLeft, Trash } from 'iconsax-react';
 import { PlusIcon, MinusIcon } from 'lucide-react';
+import { useRouter } from 'next/navigation';
 import React from 'react'
 
 type Props = object
 
 const CartIndex = ({ }: Props) => {
+  const router = useRouter();
   const quantity = useReceiptStore(state => state.items[0]?.quantity || 0);
   const increment = useReceiptStore(state => state.increment);
   const decrement = useReceiptStore(state => state.decrement);
 
 
   return (
-    <div className='absolute top-0 left-0 bg-container bottom-0 p-4 pb-0 right-0 z-[100] h-full gap-4'>
-      <h1 className='text-lg'>سبد خرید</h1>
+    <div className='absolute top-0 left-0 bg-container bottom-0 flex flex-col px-4 pt-10 right-0 z-[100] h-full'>
+      <h1 className='text-lg flex justify-between items-center pb-10'>
+        <Trash
+                        className='cursor-pointer'
+                        size='24'
+                        color='currentColor'
+                        onClick={() => { router.back() }}
+                    />
+        سبد خرید
+        <ArrowLeft
+                        className='cursor-pointer'
+                        size='24'
+                        color='currentColor'
+                        onClick={() => { router.back() }}
+                    />
+      </h1>
 
-      <ScrollArea scrollHideDelay={0} className='flex flex-col h-full pt-4' dir='rtl'>
+      <div className='flex overflow-y-auto noscrollbar flex-col h-full py-4 ' dir='rtl'>
 
-        <ul className="flex-1 pb-10">
+        <ul className="pb-10 flex-1">
           <li className=''>
             <div className='grid grid-cols-2 justify-between'>
               <div className='text-sm'>کباب چوبی ژیوان (سیخ چوبی)</div>
@@ -88,14 +104,14 @@ const CartIndex = ({ }: Props) => {
           </div>
         </div>
 
-        <div className='grid grid-cols-2 pt-4 pb-10'>
+        <div className='grid grid-cols-2 pt-4'>
           <div className='grid grid-rows-2'>
             <div className='text-xs'>جمع خرید:</div>
             <div className="text-sm font-medium">560.000 تومان</div>
           </div>
           <Button>مشاهده فاکتور و پرداخت</Button>
         </div>
-      </ScrollArea>
+      </div>
 
     </div>
   )