diff --git a/src/components/home/MainComponent.jsx b/src/components/home/MainComponent.jsx
index 1926378..71a67dd 100644
--- a/src/components/home/MainComponent.jsx
+++ b/src/components/home/MainComponent.jsx
@@ -25,11 +25,11 @@ const MainComponent = () => {
 
     return (
         <div className="container">
-            <div className='card h-100 p-0 radius-12'>
-                <div className='card-body p-3 p-lg-5 p-lg-40'>
+            <div className='mt-5'>
+                <div className=''>
                     <div className='row gy-3 gx-3 gx-lg-5 gy-lg-5 justify-content-center'>
-                        <div className='col-xxl-4 col-lg-4 col-sm-6 '>
-                            <div className='card p-3 shadow-2 radius-8 h-100 bg-theme border border-white'>
+                        <div className='col-xxl-3 col-lg-4 col-sm-6 '>
+                            <div className='card p-3 shadow-2 radius-8 h-100 border border-white'>
                                 <div className='card-body text-center p-0'>
                                     <div className='d-flex flex-wrap align-items-center justify-content-center gap-1 mb-8'>
                                         <span className='mb-0 w-200-px h-200-px'>
@@ -44,8 +44,8 @@ const MainComponent = () => {
                                 </div>
                             </div>
                         </div>
-                        <div className='col-xxl-4 col-lg-4 col-sm-6 '>
-                            <div className='card p-3 shadow-2 radius-8 h-100 bg-theme border border-white'>
+                        <div className='col-xxl-3 col-lg-4 col-sm-6 '>
+                            <div className='card p-3 shadow-2 radius-8 h-100 border border-white'>
                                 <div className='card-body text-center p-0'>
                                     <div className='d-flex flex-wrap align-items-center justify-content-center gap-1 mb-8'>
                                         <span className='mb-0 w-200-px h-200-px'>
@@ -60,8 +60,8 @@ const MainComponent = () => {
                                 </div>
                             </div>
                         </div>
-                        <div className='col-xxl-4 col-lg-4 col-sm-6'>
-                            <div className='card p-3 shadow-2 radius-8 h-100 bg-theme border border-white'>
+                        <div className='col-xxl-3 col-lg-4 col-sm-6'>
+                            <div className='card p-3 shadow-2 radius-8 h-100 border border-white'>
                                 <div className='card-body text-center p-0'>
                                     <div className='d-flex flex-wrap align-items-center justify-content-center gap-1 mb-8'>
                                         <span className='mb-0 w-200-px h-200-px '>
@@ -76,8 +76,8 @@ const MainComponent = () => {
                                 </div>
                             </div>
                         </div>
-                        <div className='col-xxl-4 col-lg-4 col-sm-6'>
-                            <div className='card p-3 shadow-2 radius-8 h-100 bg-theme border border-white'>
+                        <div className='col-xxl-3 col-lg-4 col-sm-6'>
+                            <div className='card p-3 shadow-2 radius-8 h-100 border border-white'>
                                 <Link href={`/waiter/table-order`} className="cursor-pointer" >
                                     <div className='card-body text-center p-0'>
                                         <div className='d-flex flex-wrap align-items-center justify-content-center gap-1 mb-8'>
@@ -94,8 +94,8 @@ const MainComponent = () => {
                                 </Link>
                             </div>
                         </div>
-                        <div className='col-xxl-4 col-lg-4 col-sm-6'>
-                            <div className='card p-3 shadow-2 radius-8 h-100 bg-theme border border-white'>
+                        <div className='col-xxl-3 col-lg-4 col-sm-6'>
+                            <div className='card p-3 shadow-2 radius-8 h-100 border border-white'>
                                 <div className='card-body text-center p-0'>
                                     <div className='d-flex flex-wrap align-items-center justify-content-center gap-1 mb-8'>
                                         <span className='mb-0 w-200-px h-00-px '>
@@ -110,8 +110,8 @@ const MainComponent = () => {
                                 </div>
                             </div>
                         </div>
-                        <div className='col-xxl-4 col-lg-4 col-sm-6'>
-                            <div className='card p-3 shadow-2 radius-8 h-100 bg-theme border border-white'>
+                        <div className='col-xxl-3 col-lg-4 col-sm-6'>
+                            <div className='card p-3 shadow-2 radius-8 h-100 border border-white'>
                                 <div className='card-body text-center p-0'>
                                     <div className='d-flex flex-wrap align-items-center justify-content-center gap-1 mb-8'>
                                         <span className='mb-0 w-200-px h-200-px'>
diff --git a/src/components/home/ReservationMainComponent.jsx b/src/components/home/ReservationMainComponent.jsx
index e200440..fac641d 100644
--- a/src/components/home/ReservationMainComponent.jsx
+++ b/src/components/home/ReservationMainComponent.jsx
@@ -28,13 +28,13 @@ const AdminDashBoardMain = () => {
             <div className=' h-100 p-0 radius-12'>
                 <div className=' p-3 p-lg-5 p-lg-40'>
                     <div className='row gy-3 gx-3 gx-lg-5 gy-lg-5 justify-content-center'>
-                        <div className="col-xxl-4 col-lg-4 col-sm-6 cursor-pointer">
+                        <div className="col-xxl-3 col-lg-4 col-sm-6 cursor-pointer">
                             <div className={`card p-3 shadow-2 radius-8 h-100  border border-white`}>
                                 <div className="card-body text-center p-0">
                                     <Link
                                         href={`/admin/day-reservation-table?restaurantbranch=${restaruntBranch}`}
                                     >
-                                        <div style={{ width: "300px", height: "300px" }}>
+                                        <div style={{ width: "200px", height: "200px" }}>
                                             <img src="/assets/images/day.webp" alt="reservation icon" />
                                         </div>
 
@@ -43,13 +43,13 @@ const AdminDashBoardMain = () => {
                                 </div>
                             </div>
                         </div>
-                        <div className="col-xxl-4 col-lg-4 col-sm-6 cursor-pointer">
+                        <div className="col-xxl-3 col-lg-4 col-sm-6 cursor-pointer">
                             <div className={`card p-3 shadow-2 radius-8 h-100 border border-white`}>
                                 <div className="card-body text-center p-0">
                                     <Link
                                         href={`/admin/date-reservation-table?restaurantbranch=${restaruntBranch}`}
                                     >
-                                        <div style={{ width: "300px", height: "300px" }}>
+                                        <div style={{ width: "200px", height: "200px" }}>
                                             <img src="/assets/images/date.webp" alt="reservation icon" />
                                         </div>
 
@@ -58,13 +58,13 @@ const AdminDashBoardMain = () => {
                                 </div>
                             </div>
                         </div>
-                        <div className="col-xxl-4 col-lg-4 col-sm-6 cursor-pointer">
+                        <div className="col-xxl-3 col-lg-4 col-sm-6 cursor-pointer">
                             <div className={`card p-3 shadow-2 radius-8 h-100  border border-white`}>
                                 <div className="card-body text-center p-0">
                                     <Link
                                         href={`/admin/reserved-users?restaurantbranch=${restaruntBranch}`}
                                     >
-                                        <div style={{ width: "300px", height: "300px" }}>
+                                        <div style={{ width: "200px", height: "200px" }}>
                                             <img src="/assets/images/reserved.webp" alt="reservation icon" />
                                         </div>
 
@@ -73,13 +73,13 @@ const AdminDashBoardMain = () => {
                                 </div>
                             </div>
                         </div>
-                        <div className="col-xxl-4 col-lg-4 col-sm-6 cursor-pointer">
+                        <div className="col-xxl-3 col-lg-4 col-sm-6 cursor-pointer">
                             <div className={`card p-3 shadow-2 radius-8 h-100  border border-white`}>
                                 <div className="card-body text-center p-0">
                                     <Link
                                         href={`/admin/floor-plan?restaurantbranch=${restaruntBranch}`}
                                     >
-                                        <div style={{ width: "300px", height: "300px" }}>
+                                        <div style={{ width: "200px", height: "200px" }}>
                                             <img src="/assets/images/plan.webp" alt="reservation icon" />
                                         </div>
 
@@ -88,13 +88,13 @@ const AdminDashBoardMain = () => {
                                 </div>
                             </div>
                         </div>
-                        <div className="col-xxl-4 col-lg-4 col-sm-6 cursor-pointer">
+                        <div className="col-xxl-3 col-lg-4 col-sm-6 cursor-pointer">
                             <div className={`card p-3 shadow-2 radius-8 h-100  border border-white`}>
                                 <div className="card-body text-center p-0">
                                     <Link
                                         href={`/admin/pos/dashboard`}
                                     >
-                                        <div style={{ width: "300px", height: "300px" }}>
+                                        <div style={{ width: "200px", height: "200px" }}>
                                             <img src="/assets/images/plan.webp" alt="reservation icon" />
                                         </div>