diff --git a/components/automate-ui/src/app/pages/+compliance/+reporting/reporting-searchbar/reporting-searchbar.component.html b/components/automate-ui/src/app/pages/+compliance/+reporting/reporting-searchbar/reporting-searchbar.component.html
index 6373d074c52..239bbe43e63 100644
--- a/components/automate-ui/src/app/pages/+compliance/+reporting/reporting-searchbar/reporting-searchbar.component.html
+++ b/components/automate-ui/src/app/pages/+compliance/+reporting/reporting-searchbar/reporting-searchbar.component.html
@@ -70,7 +70,7 @@
       <chef-icon>date_range</chef-icon>
       <span>{{ date | datetime: CHEF_SHORT_DATE }}</span>
     </chef-button>
-    <chef-dropdown [attr.visible]="calendarVisible">
+    <chef-dropdown class="calendar-dropdown" [attr.visible]="calendarVisible">
       <chef-click-outside omit="calendar-btn" (clickOutside)="hideCalendar()">
         <chef-calendar
           [selected]="date.toISOString()"
diff --git a/components/automate-ui/src/app/pages/+compliance/+reporting/reporting-searchbar/reporting-searchbar.component.scss b/components/automate-ui/src/app/pages/+compliance/+reporting/reporting-searchbar/reporting-searchbar.component.scss
index a0703b91b2d..0ecae65cbd7 100644
--- a/components/automate-ui/src/app/pages/+compliance/+reporting/reporting-searchbar/reporting-searchbar.component.scss
+++ b/components/automate-ui/src/app/pages/+compliance/+reporting/reporting-searchbar/reporting-searchbar.component.scss
@@ -44,10 +44,11 @@
       }
     }
 
-    chef-dropdown {
+    .calendar-dropdown {
       top: 100%;
       right: 0;
       padding: 0.5em;
+      z-index: 1;
     }
   }
 }