diff --git a/packages/core/src/components/TimePicker/TimeOptionList/TimeOptionList.styled.tsx b/packages/core/src/components/TimePicker/TimeOptionList/TimeOptionList.styled.tsx
index 108cc93bf..608b2d3e6 100644
--- a/packages/core/src/components/TimePicker/TimeOptionList/TimeOptionList.styled.tsx
+++ b/packages/core/src/components/TimePicker/TimeOptionList/TimeOptionList.styled.tsx
@@ -36,6 +36,9 @@ const getFontStyle = (style: 'selectedOption' | 'nonSelectedOption') => css`
     line-height: ${({ theme }) => theme.timePicker[style].lineHeight};
     letter-spacing: ${({ theme }) => theme.timePicker[style].LetterSpacing};
     color: ${({ theme }) => theme.timePicker[style].color};
+    &:hover {
+        color: ${({ theme }) => theme.timePicker[style].hoverColor};
+    }
 `;
 
 export const TimeItem = styled('li')<{ isSelected?: boolean }>`
diff --git a/packages/core/src/components/TimePicker/TimePicker.tsx b/packages/core/src/components/TimePicker/TimePicker.tsx
index 8af24a313..6881d1ae5 100644
--- a/packages/core/src/components/TimePicker/TimePicker.tsx
+++ b/packages/core/src/components/TimePicker/TimePicker.tsx
@@ -9,7 +9,6 @@ import { TimePickerProps } from './types';
 const Component: FC<TimePickerProps> = memo(
     forwardRef((props, ref) => {
         const [textFieldKey, setTextfieldKey] = useState(0);
-        const isMobile = navigator?.userAgent?.indexOf('Mobi') > -1;
         const wrapperRef = useRef<HTMLDivElement>(null);
         const inputRef = useCombinedRefs<HTMLInputElement>(ref, useRef(null));
         const id = props.id || props.label?.toLowerCase().replace(/\s/g, '') || 'medly-timepicker';
@@ -39,7 +38,7 @@ const Component: FC<TimePickerProps> = memo(
                     key={textFieldKey.toString()}
                     {...restProps}
                 />
-                {!disabled && !isMobile && (
+                {!disabled && (
                     <TimePickerPopup
                         key={value.toString()}
                         value={value}
diff --git a/packages/core/src/components/TimePicker/TimePickerPopup/TimePickerPopup.tsx b/packages/core/src/components/TimePicker/TimePickerPopup/TimePickerPopup.tsx
index e075aab1b..99857e6b1 100644
--- a/packages/core/src/components/TimePicker/TimePickerPopup/TimePickerPopup.tsx
+++ b/packages/core/src/components/TimePicker/TimePickerPopup/TimePickerPopup.tsx
@@ -35,7 +35,7 @@ export const Component: FC<TimePickerPopupProps> = ({ value, onChange, onReset,
     };
 
     useEffect(() => {
-        if (value) {
+        if (!!value) {
             const time = value.split(':');
             const hour = Number(time[0]);
             const minutes = Number(time[1]);
diff --git a/packages/core/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap b/packages/core/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap
index f5bd5f44e..461de40cd 100644
--- a/packages/core/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap
+++ b/packages/core/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap
@@ -677,6 +677,10 @@ exports[`TimePicker should render properly 1`] = `
   color: #546A7F;
 }
 
+.c19:hover {
+  color: #546A7F;
+}
+
 .c19:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -709,6 +713,10 @@ exports[`TimePicker should render properly 1`] = `
   color: #3872D2;
 }
 
+.c20:hover {
+  color: #3872D2;
+}
+
 .c20:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
diff --git a/packages/theme/src/core/timePicker/index.ts b/packages/theme/src/core/timePicker/index.ts
index 9571207c5..11844f1cd 100644
--- a/packages/theme/src/core/timePicker/index.ts
+++ b/packages/theme/src/core/timePicker/index.ts
@@ -14,11 +14,13 @@ const timePickerTheme: TimePickerTheme = {
         ...variants.body1,
         fontWeight: 'Medium',
         color: colors.blue[500],
+        hoverColor: colors.blue[500],
         backgroundColor: colors.grey[100]
     },
     nonSelectedOption: {
         ...variants.body2,
-        color: colors.grey[700]
+        color: colors.grey[700],
+        hoverColor: colors.grey[700]
     }
 };
 
diff --git a/packages/theme/src/core/timePicker/types.ts b/packages/theme/src/core/timePicker/types.ts
index dbf299b9c..105c2382c 100644
--- a/packages/theme/src/core/timePicker/types.ts
+++ b/packages/theme/src/core/timePicker/types.ts
@@ -18,6 +18,7 @@ export interface TimePickerTheme {
         lineHeight: string;
         letterSpacing: string;
         backgroundColor: string;
+        hoverColor: string;
     };
     nonSelectedOption: {
         color: string;
@@ -25,5 +26,6 @@ export interface TimePickerTheme {
         fontWeight: FontWeights;
         lineHeight: string;
         letterSpacing: string;
+        hoverColor: string;
     };
 }