diff --git a/src/components/DateFilter/index.tsx b/src/components/DateFilter/index.tsx
index 240b24e4..4d18c666 100644
--- a/src/components/DateFilter/index.tsx
+++ b/src/components/DateFilter/index.tsx
@@ -286,7 +286,6 @@ const DateFilter: React.FC<PropsWithChildren> = () => {
     setDate(selectedDays.start);
     inputRef.current?.blur();
     setCalendarOpen(false);
-    // setButtonActive(false);
   }, [selectedDays, startTime, endTime, filterDate]);
 
   const handleStartTimeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -325,7 +324,7 @@ const DateFilter: React.FC<PropsWithChildren> = () => {
         </OutsideContainer>
 
         {calendarOpen && (
-          <CalendarContainer onMouseDown={e => e.preventDefault()}>
+          <CalendarContainer>
             <CalendarHeader>
               <strong>
                 <h3>Date Filter</h3>
@@ -392,6 +391,7 @@ const DateFilter: React.FC<PropsWithChildren> = () => {
                 <TimeSelector>
                   <label>Start Time:</label>
                   <TimeInput
+                    style={{ WebkitAppearance: 'none' }}
                     type="time"
                     id="start-time"
                     value={startTime}
diff --git a/src/components/DateFilter/styles.ts b/src/components/DateFilter/styles.ts
index 6e791627..47ef7ab2 100644
--- a/src/components/DateFilter/styles.ts
+++ b/src/components/DateFilter/styles.ts
@@ -149,7 +149,8 @@ export const TimeInput = styled.input`
   border: 1px solid ${props => props.theme.gray700};
   ${props => props.theme.dark && `color-scheme: dark;`}
   border-radius: 0.25rem;
-  width: 7rem;
+  min-width: 4rem;
+  max-width: 5.2rem;
 `;
 
 export const CalendarContainer = styled.div`