diff --git a/web/src/api/buster_rest/collections/queryRequests.ts b/web/src/api/buster_rest/collections/queryRequests.ts
index 1e1e689c3..af1f23a50 100644
--- a/web/src/api/buster_rest/collections/queryRequests.ts
+++ b/web/src/api/buster_rest/collections/queryRequests.ts
@@ -135,7 +135,7 @@ export const useShareCollection = () => {
       const queryKey = collectionQueryKeys.collectionsGetCollection(id).queryKey;
       queryClient.setQueryData(queryKey, (previousData) => {
         return create(previousData!, (draft: BusterCollection) => {
-          draft.individual_permissions?.push(...params);
+          draft.individual_permissions = [...params, ...(draft.individual_permissions || [])];
         });
       });
     },
diff --git a/web/src/api/buster_rest/dashboards/queryRequests.ts b/web/src/api/buster_rest/dashboards/queryRequests.ts
index 5919886e5..a6d83047e 100644
--- a/web/src/api/buster_rest/dashboards/queryRequests.ts
+++ b/web/src/api/buster_rest/dashboards/queryRequests.ts
@@ -320,7 +320,10 @@ export const useShareDashboard = () => {
       const queryKey = dashboardQueryKeys.dashboardGetDashboard(variables.id).queryKey;
       queryClient.setQueryData(queryKey, (previousData) => {
         return create(previousData!, (draft) => {
-          draft.individual_permissions?.push(...variables.params);
+          draft.individual_permissions = [
+            ...variables.params,
+            ...(draft.individual_permissions || [])
+          ];
         });
       });
     },
diff --git a/web/src/api/buster_rest/metrics/queryRequests.ts b/web/src/api/buster_rest/metrics/queryRequests.ts
index 357b71e91..4932ef632 100644
--- a/web/src/api/buster_rest/metrics/queryRequests.ts
+++ b/web/src/api/buster_rest/metrics/queryRequests.ts
@@ -312,7 +312,10 @@ export const useShareMetric = () => {
       const queryKey = metricsQueryKeys.metricsGetMetric(variables.id).queryKey;
       queryClient.setQueryData(queryKey, (previousData: IBusterMetric | undefined) => {
         return create(previousData!, (draft: IBusterMetric) => {
-          draft.individual_permissions?.push(...variables.params);
+          draft.individual_permissions = [
+            ...variables.params,
+            ...(draft.individual_permissions || [])
+          ];
         });
       });
     },
diff --git a/web/src/components/ui/date/DatePicker.tsx b/web/src/components/ui/date/DatePicker.tsx
index beab092f3..8ad9a2f09 100644
--- a/web/src/components/ui/date/DatePicker.tsx
+++ b/web/src/components/ui/date/DatePicker.tsx
@@ -42,10 +42,11 @@ function DatePickerComponent({
           variant={'ghost'}
           prefix={<CalendarIcon />}
           suffix={
-            clearable && (
+            clearable &&
+            selected && (
               <div
                 onClick={onClickCancel}
-                className="hover:bg-gray-light/20 hover:text-default! flex items-center justify-center rounded-sm p-0.5 text-xs opacity-30 transition-opacity duration-200 group-hover:opacity-100">
+                className="hover:bg-gray-light/20 hover:text-default! -mr-1 flex items-center justify-center rounded-sm p-1 text-xs opacity-30 transition-opacity duration-200 group-hover:opacity-100">
                 <Xmark />
               </div>
             )
@@ -65,7 +66,7 @@ function DatePickerComponent({
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-auto p-0">
-        <Calendar mode="single" selected={selected} onSelect={onSelect} initialFocus />
+        <Calendar {...props} mode="single" selected={selected} onSelect={onSelect} initialFocus />
       </PopoverContent>
     </Popover>
   );