diff --git a/app/Http/Controllers/DocumentController.php b/app/Http/Controllers/DocumentController.php
index 34b1490..081c7fe 100644
--- a/app/Http/Controllers/DocumentController.php
+++ b/app/Http/Controllers/DocumentController.php
@@ -22,6 +22,7 @@ class DocumentController extends Controller
         } else {
             $query->orderBy('created_at');
         }
+
         if ($request->q != null || $request->q != '') {
             $query->where(function ($query) use ($request) {
                 $query->where('no_doc', 'like', '%'.$request->q.'%')
@@ -252,9 +253,9 @@ class DocumentController extends Controller
         foreach ($request->shares as $share) {
             $user = User::where('email', $share['share_to'])->first();
             if ($user != null) {
-                $doc->shares()->create(['user_id' => $user->id, 'share_to' => $share['share_to']]);
+                $doc->shares()->updateOrCreate(['user_id' => $user->id, 'share_to' => $share['share_to']]);
             } else {
-                $doc->shares()->create(['share_to' => $share['share_to']]);
+                $doc->shares()->updateOrCreate(['share_to' => $share['share_to']]);
             }
             // TODO: plase send email here
         }
diff --git a/resources/js/Pages/Dashboard.jsx b/resources/js/Pages/Dashboard.jsx
index b7ac41e..f0d4e2c 100644
--- a/resources/js/Pages/Dashboard.jsx
+++ b/resources/js/Pages/Dashboard.jsx
@@ -13,6 +13,8 @@ export default function Dashboard(props) {
     const calenderEvents = events.map(e => { return {title: `${e.document.no_doc} - ${e.document.pic_name}`, date: e.date} }) 
 
     const handleDateClick = (arg) => { // bind with an arrow function
+        // apa yang harus di handle: tampilkan saja modal yang ada event pada date ini kemudian bisa tambah reminder atau hapus reminder pada data ini,
+        // untuk tambah reminder pilih form doc id saja kemudian tambah , untuk delete cukup confirm kemudian hilang
         alert(arg.dateStr)
       }
 
@@ -50,7 +52,7 @@ export default function Dashboard(props) {
                     </div>
                 </div>
             </div>
-            <div className='bg-base-100 mx-8 mt-4 p-2 md:p-4 lg:p-8'>
+            <div className='bg-base-100 mx-2 md:mx-8 mt-4 p-2 md:p-4 lg:p-8 h-auto'>
                 <FullCalendar
                     plugins={[ dayGridPlugin, interactionPlugin ]}
                     initialView="dayGridMonth"
diff --git a/resources/js/Pages/Document/Detail.jsx b/resources/js/Pages/Document/Detail.jsx
index 804ab3d..0cc3c56 100644
--- a/resources/js/Pages/Document/Detail.jsx
+++ b/resources/js/Pages/Document/Detail.jsx
@@ -159,7 +159,7 @@ export default function FormDocument(props) {
                                 </div>
                                 <div className="grid grid-cols-2 md:grid-cols-4 gap-1 mt-4">
                                     {doc.reminders.map((reminder, index) => (
-                                        <div className='card text-center shadow-md pt-2 pb-4 px-2' key={index}> 
+                                        <div className='card text-center shadow-md pt-2 pb-2 px-2 bg-blue-300' key={index}> 
                                             <div>
                                                 {reminder.date} 
                                             </div>
diff --git a/resources/js/Pages/Document/Form.jsx b/resources/js/Pages/Document/Form.jsx
index 4069c79..358bb1b 100644
--- a/resources/js/Pages/Document/Form.jsx
+++ b/resources/js/Pages/Document/Form.jsx
@@ -282,15 +282,15 @@ export default function FormDocument(props) {
                                 </div>
                                 <div className="grid grid-cols-2 md:grid-cols-4 gap-1 mt-4">
                                     {reminders.map((reminder, index) => (
-                                        <div className='card text-center shadow-md pt-2 pb-4 px-2' key={index}> 
-                                            <div className="card-actions justify-end">
+                                        <div className='card text-center shadow-md pt-2 pb-2 px-2 bg-blue-300' key={index}> 
+                                            <div className='flex'>
+                                                <div  className='flex-1'>
+                                                    {reminder} 
+                                                </div>
                                                 <div className="btn btn-square btn-error btn-xs" onClick={() => handleRemoveReminder(index)}>
                                                     <IconCross/>
                                                 </div>
                                             </div>
-                                            <div>
-                                                {reminder} 
-                                            </div>
                                         </div>
                                     ))}
                                 </div>