diff --git a/example/src/App.tsx b/example/src/App.tsx
index 370d856f..570ec782 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -175,17 +175,6 @@ function App() {
             },
           ]}
         >
-          {/*<View style={styles.switchContainer}>*/}
-          {/*  <Text style={[styles.switchLabel, { ...theme.fonts.medium }]}>*/}
-          {/*    Dark mode (does not wo*/}
-          {/*  </Text>*/}
-          {/*  <View style={styles.switchSpace} />*/}
-          {/*  <Switch value={dark} onValueChange={onToggleDarkMode} />*/}
-          {/*</View>*/}
-          {/*<Enter />*/}
-          {/*<Enter />*/}
-          {/*<Enter />*/}
-          {/*<Enter />*/}
           <View>
             <Row>
               <Label>Input</Label>
@@ -432,7 +421,6 @@ const styles = StyleSheet.create({
     marginTop: 12,
     padding: 24,
     alignSelf: 'center',
-    // flex: 1,
   },
   contentInline: {
     padding: 0,
@@ -466,8 +454,6 @@ const styles = StyleSheet.create({
     left: 12,
     right: 12,
     bottom: 12,
-    // borderTopRightRadius: 20,
-    // borderBottomRightRadius: 20,
     backgroundColor: '#fff',
     overflow: 'hidden',
     shadowColor: '#000',
diff --git a/src/Time/AmPmSwitcher.tsx b/src/Time/AmPmSwitcher.tsx
index 4613fcdb..2b662ecd 100644
--- a/src/Time/AmPmSwitcher.tsx
+++ b/src/Time/AmPmSwitcher.tsx
@@ -3,24 +3,28 @@ import { View, StyleSheet } from 'react-native'
 import { MD2Theme, Text, TouchableRipple, useTheme } from 'react-native-paper'
 import { useMemo } from 'react'
 import Color from 'color'
-import { useSwitchColors } from './timeUtils'
+import { inputTypes, PossibleInputTypes, useSwitchColors } from './timeUtils'
 import { DisplayModeContext } from './TimePicker'
 
 export default function AmPmSwitcher({
   onChange,
   hours,
+  inputType,
 }: {
   hours: number
   onChange: (newHours: number) => any
+  inputType: PossibleInputTypes
 }) {
   const { setMode, mode } = React.useContext(DisplayModeContext)
   const theme = useTheme()
   const backgroundColor = useMemo<string>(() => {
-    if (theme.dark) {
-      return Color(theme.colors.surface).lighten(1.2).hex()
+    if (theme.isV3) {
+      return theme.colors.outline
     }
     return Color(
-      theme.isV3 ? theme.colors.inverseOnSurface : theme.colors.surface
+      theme.dark
+        ? Color(theme.colors.surface).lighten(1.2).hex()
+        : theme.colors.surface
     )
       .darken(0.1)
       .hex()
@@ -31,9 +35,12 @@ export default function AmPmSwitcher({
     <View
       style={[
         styles.root,
+        // eslint-disable-next-line react-native/no-inline-styles
         {
           borderColor: backgroundColor,
-          borderRadius: theme.roundness,
+          borderRadius: theme.roundness * 2,
+          height: inputType === inputTypes.keyboard ? 72 : 80,
+          marginBottom: inputType === 'keyboard' ? 24 : 0,
         },
       ]}
     >
@@ -79,7 +86,7 @@ function SwitchButton({
   const { backgroundColor, color } = useSwitchColors(selected)
 
   let textFont = theme?.isV3
-    ? theme.fonts.bodyMedium
+    ? theme.fonts.titleMedium
     : (theme as any as MD2Theme).fonts.medium
 
   return (
@@ -114,14 +121,13 @@ function SwitchButton({
 
 const styles = StyleSheet.create({
   root: {
-    width: 50,
-    height: 80,
+    width: 52,
     borderWidth: 1,
     overflow: 'hidden',
   },
   switchSeparator: {
     height: 1,
-    width: 48,
+    width: 52,
   },
   switchButton: {
     flex: 1,
diff --git a/src/Time/AnalogClock.tsx b/src/Time/AnalogClock.tsx
index 31cb8d66..ca4618fc 100644
--- a/src/Time/AnalogClock.tsx
+++ b/src/Time/AnalogClock.tsx
@@ -127,10 +127,10 @@ function AnalogClock({
       style={[
         styles.clock,
         {
-          backgroundColor: theme.dark
+          backgroundColor: theme.isV3
+            ? theme.colors.surfaceVariant
+            : theme.dark
             ? Color(theme.colors.surface).lighten(1.4).hex()
-            : theme.isV3
-            ? Color(theme.colors.outline).lighten(0.9).hex()
             : Color(theme.colors.surface).darken(0.1).hex(),
         },
       ]}
@@ -145,7 +145,15 @@ function AnalogClock({
             transform: [
               { rotate: -90 + pointerNumber * degreesPerNumber + 'deg' },
               {
-                translateX: circleSize / 4 - 4 - dynamicSize / 2,
+                translateX:
+                  circleSize / 4 -
+                  (focused === clockTypes.hours &&
+                  pointerNumber >= 0 &&
+                  pointerNumber < 13
+                    ? 0
+                    : 4) +
+                  (focused === clockTypes.minutes ? 4 : 0) -
+                  dynamicSize / 2,
               },
             ],
             width: circleSize / 2 - 4 - dynamicSize,
@@ -194,16 +202,15 @@ const styles = StyleSheet.create({
   },
   center: { justifyContent: 'center', alignItems: 'center' },
   endPoint: {
-    borderRadius: 15,
-    height: 30,
-    width: 30,
+    borderRadius: 24,
+    height: 48,
+    width: 48,
     position: 'absolute',
     right: 0,
-    bottom: -14,
+    bottom: -23,
   },
   line: {
     position: 'absolute',
-    marginBottom: -1,
     height: 2,
     borderRadius: 4,
   },
diff --git a/src/Time/AnalogClockHours.tsx b/src/Time/AnalogClockHours.tsx
index 2e29068b..a95e4d31 100644
--- a/src/Time/AnalogClockHours.tsx
+++ b/src/Time/AnalogClockHours.tsx
@@ -33,7 +33,11 @@ function AnalogClockHours({
         >
           <View style={styles.outerHourInner}>
             {/* Display 00 instead of 12 for AM hours */}
-            <Text style={hours === i + 1 ? { color } : null} selectable={false}>
+            <Text
+              style={hours === i + 1 ? { color } : null}
+              variant="bodyLarge"
+              selectable={false}
+            >
               {mode === 'AM' && !is24Hour && i + 1 === 12 ? '00' : i + 1}
             </Text>
           </View>
@@ -56,11 +60,11 @@ function AnalogClockHours({
                 <Text
                   selectable={false}
                   style={[
-                    styles.innerHourText,
                     i + 13 === hours || (i + 13 === 24 && hours === 0)
                       ? { color }
                       : null,
                   ]}
+                  variant="bodyLarge"
                 >
                   {i + 13 === 24 ? '00' : i + 13}
                 </Text>
@@ -78,27 +82,25 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     zIndex: 20,
-    width: 50,
-    height: 50,
-    marginLeft: -25,
-    marginTop: -25,
-
-    borderRadius: 25,
+    width: 48,
+    height: 48,
+    marginLeft: -24,
+    marginTop: -24,
+    borderRadius: 24,
   },
-  outerHourInner: { borderRadius: 25 },
+  outerHourInner: { borderRadius: 24 },
   innerHourRoot: {
     position: 'absolute',
     zIndex: 20,
     justifyContent: 'center',
     alignItems: 'center',
-    width: 40,
-    height: 40,
-    marginLeft: -20,
-    marginTop: -20,
-    borderRadius: 20,
+    width: 48,
+    height: 48,
+    marginLeft: -24,
+    marginTop: -24,
+    borderRadius: 24,
   },
-  innerHourInner: { borderRadius: 20 },
-  innerHourText: { fontSize: 13 },
+  innerHourInner: { borderRadius: 24 },
 })
 
 function getHourNumbers(
diff --git a/src/Time/AnalogClockMinutes.tsx b/src/Time/AnalogClockMinutes.tsx
index 42304ead..211a8766 100644
--- a/src/Time/AnalogClockMinutes.tsx
+++ b/src/Time/AnalogClockMinutes.tsx
@@ -33,6 +33,7 @@ function AnalogClockMinutes({ minutes }: { minutes: number }) {
               <Text
                 style={isCurrent ? { color } : undefined}
                 selectable={false}
+                variant="bodyLarge"
               >
                 {isZero ? '00' : currentMinutes}
               </Text>
@@ -50,14 +51,13 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     zIndex: 20,
-    width: 50,
-    height: 50,
-    marginLeft: -25,
-    marginTop: -25,
-
-    borderRadius: 25,
+    width: 48,
+    height: 48,
+    marginLeft: -24,
+    marginTop: -24,
+    borderRadius: 24,
   },
-  outerHourInner: { borderRadius: 25 },
+  outerHourInner: { borderRadius: 24 },
   innerHourRoot: {
     position: 'absolute',
     zIndex: 20,
diff --git a/src/Time/TimeInput.tsx b/src/Time/TimeInput.tsx
index 25f8a814..96b2f4d7 100644
--- a/src/Time/TimeInput.tsx
+++ b/src/Time/TimeInput.tsx
@@ -1,5 +1,11 @@
 import * as React from 'react'
-import { View, TextInput, TextInputProps, StyleSheet } from 'react-native'
+import {
+  View,
+  TextInput,
+  TextInputProps,
+  StyleSheet,
+  Platform,
+} from 'react-native'
 import { useTheme, TouchableRipple } from 'react-native-paper'
 
 import Color from 'color'
@@ -68,10 +74,17 @@ function TimeInput(
         ref={ref}
         style={[
           styles.input,
+          // eslint-disable-next-line react-native/no-inline-styles
           {
             color,
             backgroundColor,
-            borderRadius: theme.roundness,
+            borderRadius: theme.roundness * 2,
+            borderColor:
+              theme.isV3 && highlighted
+                ? theme.colors.onPrimaryContainer
+                : undefined,
+            borderWidth: theme.isV3 && highlighted ? 2 : 0,
+            height: inputType === inputTypes.keyboard ? 72 : 80,
           },
         ]}
         value={formattedValue}
@@ -89,11 +102,14 @@ function TimeInput(
             StyleSheet.absoluteFill,
             styles.buttonOverlay,
             {
-              // backgroundColor: 'blue',
               borderRadius: theme.roundness,
             },
           ]}
-          rippleColor={Color(theme.colors.primary).fade(0.7).hex()}
+          rippleColor={
+            Platform.OS !== 'ios'
+              ? Color(theme.colors.onSurface).fade(0.7).hex()
+              : undefined
+          }
           onPress={() => onPress(clockType)}
           borderless={true}
         >
@@ -107,11 +123,10 @@ function TimeInput(
 const styles = StyleSheet.create({
   root: { position: 'relative', height: 80, width: 96 },
   input: {
-    fontSize: 50,
+    fontSize: 57,
     textAlign: 'center',
     textAlignVertical: 'center',
     width: 96,
-    height: 80,
   },
   buttonOverlay: { overflow: 'hidden' },
 })
diff --git a/src/Time/TimeInputs.tsx b/src/Time/TimeInputs.tsx
index 4f5760a4..69721e48 100644
--- a/src/Time/TimeInputs.tsx
+++ b/src/Time/TimeInputs.tsx
@@ -1,6 +1,3 @@
-// @typescript-eslint/no-unused-vars
-// WORK IN PROGRESS
-
 import * as React from 'react'
 import {
   View,
@@ -8,7 +5,7 @@ import {
   useWindowDimensions,
   TextInput as TextInputNative,
 } from 'react-native'
-import { MD2Theme, useTheme } from 'react-native-paper'
+import { MD2Theme, Text, useTheme } from 'react-native-paper'
 
 import {
   clockTypes,
@@ -78,41 +75,56 @@ function TimeInputs({
         isLandscape && styles.inputContainerLandscape,
       ]}
     >
-      <TimeInput
-        ref={startInput}
-        placeholder={'00'}
-        value={toHourInputFormat(hours, is24Hour)}
-        clockType={clockTypes.hours}
-        pressed={focused === clockTypes.hours}
-        onPress={onFocusInput}
-        inputType={inputType}
-        selectionColor={
-          theme.dark
-            ? Color(theme.colors.primary).darken(0.2).hex()
-            : theme.colors.primary
-        }
-        returnKeyType={'next'}
-        onSubmitEditing={onSubmitStartInput}
-        blurOnSubmit={false}
-        onChanged={(newHoursFromInput) => {
-          let newHours = toHourOutputFormat(newHoursFromInput, hours, is24Hour)
-          if (newHoursFromInput > 24) {
-            newHours = 24
+      <View style={styles.column}>
+        <TimeInput
+          ref={startInput}
+          placeholder={'00'}
+          value={toHourInputFormat(hours, is24Hour)}
+          clockType={clockTypes.hours}
+          pressed={focused === clockTypes.hours}
+          onPress={onFocusInput}
+          inputType={inputType}
+          selectionColor={
+            theme.dark
+              ? Color(theme.colors.primary).darken(0.2).hex()
+              : theme.colors.primary
           }
-          onChange({
-            hours: newHours,
-            minutes,
-          })
-        }}
-      />
-      <View style={styles.hoursAndMinutesSeparator}>
+          returnKeyType={'next'}
+          onSubmitEditing={onSubmitStartInput}
+          blurOnSubmit={false}
+          onChanged={(newHoursFromInput) => {
+            let newHours = toHourOutputFormat(
+              newHoursFromInput,
+              hours,
+              is24Hour
+            )
+            if (newHoursFromInput > 24) {
+              newHours = 24
+            }
+            onChange({
+              hours: newHours,
+              minutes,
+            })
+          }}
+        />
+        {inputType === 'keyboard' ? (
+          <Text variant="bodySmall">Hour</Text>
+        ) : null}
+      </View>
+      <View
+        style={[
+          styles.hoursAndMinutesSeparator,
+          // eslint-disable-next-line react-native/no-inline-styles
+          { marginBottom: inputType === 'keyboard' ? 24 : 0 },
+        ]}
+      >
         <View style={styles.spaceDot} />
         <View
           style={[
             styles.dot,
             {
               backgroundColor: theme?.isV3
-                ? theme.colors.onBackground
+                ? theme.colors.onSurface
                 : (theme as any as MD2Theme).colors.text,
             },
           ]}
@@ -123,42 +135,51 @@ function TimeInputs({
             styles.dot,
             {
               backgroundColor: theme?.isV3
-                ? theme.colors.onBackground
+                ? theme.colors.onSurface
                 : (theme as any as MD2Theme).colors.text,
             },
           ]}
         />
         <View style={styles.spaceDot} />
       </View>
-      <TimeInput
-        ref={endInput}
-        placeholder={'00'}
-        value={minutes}
-        clockType={clockTypes.minutes}
-        pressed={focused === clockTypes.minutes}
-        onPress={onFocusInput}
-        inputType={inputType}
-        selectionColor={
-          theme.dark
-            ? Color(theme.colors.primary).darken(0.2).hex()
-            : theme.colors.primary
-        }
-        onSubmitEditing={onSubmitEndInput}
-        onChanged={(newMinutesFromInput) => {
-          let newMinutes = newMinutesFromInput
-          if (newMinutesFromInput > 59) {
-            newMinutes = 59
+      <View style={styles.column}>
+        <TimeInput
+          ref={endInput}
+          placeholder={'00'}
+          value={minutes}
+          clockType={clockTypes.minutes}
+          pressed={focused === clockTypes.minutes}
+          onPress={onFocusInput}
+          inputType={inputType}
+          selectionColor={
+            theme.dark
+              ? Color(theme.colors.primary).darken(0.2).hex()
+              : theme.colors.primary
           }
-          onChange({
-            hours,
-            minutes: newMinutes,
-          })
-        }}
-      />
+          onSubmitEditing={onSubmitEndInput}
+          onChanged={(newMinutesFromInput) => {
+            let newMinutes = newMinutesFromInput
+            if (newMinutesFromInput > 59) {
+              newMinutes = 59
+            }
+            onChange({
+              hours,
+              minutes: newMinutes,
+            })
+          }}
+        />
+        {inputType === 'keyboard' ? (
+          <Text variant="bodySmall">Minute</Text>
+        ) : null}
+      </View>
       {!is24Hour && (
         <>
           <View style={styles.spaceBetweenInputsAndSwitcher} />
-          <AmPmSwitcher hours={hours} onChange={onChangeHours} />
+          <AmPmSwitcher
+            hours={hours}
+            onChange={onChangeHours}
+            inputType={inputType}
+          />
         </>
       )}
     </View>
@@ -166,6 +187,9 @@ function TimeInputs({
 }
 
 const styles = StyleSheet.create({
+  column: {
+    flexDirection: 'column',
+  },
   spaceBetweenInputsAndSwitcher: { width: 12 },
   inputContainer: {
     flexDirection: 'row',
diff --git a/src/Time/TimePicker.tsx b/src/Time/TimePicker.tsx
index 7f67583f..d1804b18 100644
--- a/src/Time/TimePicker.tsx
+++ b/src/Time/TimePicker.tsx
@@ -84,7 +84,24 @@ function TimePicker({
     <DisplayModeContext.Provider
       value={{ mode: displayMode, setMode: setDisplayMode }}
     >
-      <View style={isLandscape ? styles.rootLandscape : styles.rootPortrait}>
+      <View
+        style={
+          isLandscape
+            ? [
+                styles.rootLandscape,
+                {
+                  width:
+                    24 * 3 +
+                    96 * 2 +
+                    52 +
+                    (inputType === inputTypes.picker
+                      ? circleSize
+                      : -circleSize),
+                },
+              ]
+            : styles.rootPortrait
+        }
+      >
         <TimeInputs
           inputType={inputType}
           hours={hours}
@@ -115,7 +132,6 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    width: 24 * 3 + 96 * 2 + 52 + circleSize,
   },
   rootPortrait: {
     alignItems: 'center',
diff --git a/src/Time/TimePickerModal.tsx b/src/Time/TimePickerModal.tsx
index e3a1bb47..609dd1a3 100644
--- a/src/Time/TimePickerModal.tsx
+++ b/src/Time/TimePickerModal.tsx
@@ -27,7 +27,13 @@ import {
   reverseInputTypes,
 } from './timeUtils'
 
-const supportedOrientations: any[] = [
+const supportedOrientations: (
+  | 'portrait'
+  | 'portrait-upside-down'
+  | 'landscape'
+  | 'landscape-left'
+  | 'landscape-right'
+)[] = [
   'portrait',
   'portrait-upside-down',
   'landscape',
@@ -67,9 +73,10 @@ export function TimePickerModal({
   const theme = useTheme()
 
   let textFont
+  let labelText = label
 
   if (theme.isV3) {
-    textFont = theme.fonts.bodyMedium
+    textFont = theme.fonts.labelMedium
   } else {
     textFont = (theme as any as MD2Theme)?.fonts.medium
   }
@@ -85,6 +92,10 @@ export function TimePickerModal({
     getMinutes(minutes)
   )
 
+  if (inputType === inputTypes.keyboard && !label) {
+    labelText = 'Enter time'
+  }
+
   React.useEffect(() => {
     setLocalHours(getHours(hours))
   }, [setLocalHours, hours])
@@ -120,7 +131,6 @@ export function TimePickerModal({
       onRequestClose={onDismiss}
       presentationStyle="overFullScreen"
       supportedOrientations={supportedOrientations}
-      //@ts-ignore
       statusBarTranslucent={true}
     >
       <>
@@ -133,7 +143,6 @@ export function TimePickerModal({
             ]}
           />
         </TouchableWithoutFeedback>
-
         <View
           style={[StyleSheet.absoluteFill, styles.modalRoot]}
           pointerEvents="box-none"
@@ -146,10 +155,17 @@ export function TimePickerModal({
               style={[
                 styles.modalContent,
                 {
-                  backgroundColor: theme.dark
-                    ? overlay(10, theme.colors.surface)
-                    : theme.colors.surface,
-                  borderRadius: theme.roundness,
+                  backgroundColor:
+                    theme.dark && theme.isV3
+                      ? theme.colors.elevation.level3
+                      : theme.isV3
+                      ? theme.colors.surface
+                      : theme.dark
+                      ? overlay(10, theme.colors.surface)
+                      : theme.colors.surface,
+                  borderRadius: theme.isV3
+                    ? theme.roundness * 6
+                    : theme.roundness,
                 },
               ]}
             >
@@ -160,12 +176,12 @@ export function TimePickerModal({
                     {
                       ...textFont,
                       color: theme?.isV3
-                        ? theme.colors.onBackground
+                        ? theme.colors.onSurfaceVariant
                         : (theme as any as MD2Theme).colors.text,
                     },
                   ]}
                 >
-                  {uppercase ? label.toUpperCase() : label}
+                  {uppercase ? labelText.toUpperCase() : labelText}
                 </Text>
               </View>
               <View style={styles.timePickerContainer}>
@@ -242,21 +258,26 @@ const styles = StyleSheet.create({
     },
     shadowOpacity: 0.34,
     shadowRadius: 6.27,
-    elevation: 10,
+    elevation: 3,
     minWidth: 287,
+    paddingVertical: 8,
   },
   labelContainer: {
-    height: 28,
     justifyContent: 'flex-end',
     paddingLeft: 24,
     paddingRight: 24,
-    marginTop: 8,
+    paddingTop: 16,
   },
   label: {
     letterSpacing: 1,
     fontSize: 13,
   },
-  timePickerContainer: { padding: 24 },
+  timePickerContainer: {
+    paddingLeft: 24,
+    paddingTop: 20,
+    paddingBottom: 16,
+    paddingRight: 24,
+  },
   bottom: {
     flexDirection: 'row',
     alignItems: 'center',
diff --git a/src/Time/timeUtils.ts b/src/Time/timeUtils.ts
index 1ea000c8..d5761fc2 100644
--- a/src/Time/timeUtils.ts
+++ b/src/Time/timeUtils.ts
@@ -2,8 +2,7 @@ import * as React from 'react'
 import Color from 'color'
 import { MD2Theme, useTheme } from 'react-native-paper'
 
-// 250? when bigger?
-export const circleSize = 215
+export const circleSize = 256
 
 export type PossibleHourTypes = 'am' | 'pm'
 export type HourTypeMap = {
@@ -161,10 +160,9 @@ export function useSwitchColors(highlighted: boolean) {
   const backgroundColor = React.useMemo<string>(() => {
     if (theme.dark) {
       if (highlighted) {
-        return Color(theme.colors.primary).hex()
-      }
-      if (theme.isV3) {
-        return Color(theme.colors.surface).lighten(1.4).hex()
+        return theme.isV3
+          ? theme.colors.tertiaryContainer
+          : Color(theme.colors.primary).hex()
       }
       return theme.colors.backdrop
     }
@@ -181,10 +179,12 @@ export function useSwitchColors(highlighted: boolean) {
 
   const color = React.useMemo<string>(() => {
     if (highlighted && !theme.dark) {
-      return theme.colors.primary
+      return theme.isV3 ? theme.colors.onSurfaceVariant : theme.colors.primary
     }
     if (highlighted && theme.dark) {
-      return theme.colors.background
+      return theme.isV3
+        ? theme.colors.onTertiaryContainer
+        : theme.colors.background
     }
     if (theme.isV3) {
       return theme.colors.onSurfaceVariant
@@ -201,33 +201,39 @@ export function useInputColors(highlighted: boolean) {
   const backgroundColor = React.useMemo<string>(() => {
     if (theme.dark) {
       if (highlighted) {
-        return Color(theme.colors.primary).hex()
+        return theme.isV3
+          ? theme.colors.primaryContainer
+          : Color(theme.colors.primary).hex()
       }
-      return Color(theme.colors.surface).lighten(1.4).hex()
+      return theme.isV3
+        ? theme.colors.surfaceVariant
+        : Color(theme.colors.surface).lighten(1.4).hex()
     }
 
     if (highlighted) {
       if (theme.isV3) {
-        return Color(theme.colors.primaryContainer).hex()
+        return theme.colors.secondaryContainer
       }
       return Color(theme.colors.primary).lighten(1).hex()
     }
     if (theme.isV3) {
-      return Color(theme.colors.outline).lighten(0.9).hex()
+      return theme.colors.surfaceVariant
     }
     return Color(theme.colors.surface).darken(0.1).hex()
   }, [highlighted, theme])
 
   const color = React.useMemo<string>(() => {
-    if (highlighted && !theme.dark) {
-      return theme.colors.primary
-    }
     if (theme.isV3) {
       if (!highlighted) {
-        return theme.colors.onBackground
+        return theme.isV3 ? theme.colors.onSurface : theme.colors.onBackground
       }
-      return theme.colors.background
+      return theme.isV3
+        ? theme.colors.onPrimaryContainer
+        : theme.colors.onBackground
     } else {
+      if (highlighted && !theme.dark) {
+        return theme.colors.primary
+      }
       return (theme as any as MD2Theme).colors.text
     }
   }, [highlighted, theme])
diff --git a/src/__tests__/Date/DatePickerInput.test.tsx b/src/__tests__/Date/DatePickerInput.test.tsx
index 17430567..d1983998 100644
--- a/src/__tests__/Date/DatePickerInput.test.tsx
+++ b/src/__tests__/Date/DatePickerInput.test.tsx
@@ -8,7 +8,7 @@ it('renders DatePickerInput', () => {
     .create(
       <DatePickerInput
         locale={'en'}
-        value={undefined}
+        value={new Date('12/26/2022')}
         onChange={() => null}
         inputMode="start"
         autoComplete={'birthdate-full'}
diff --git a/src/__tests__/Date/DatePickerInputWithoutModa.test.tsx b/src/__tests__/Date/DatePickerInputWithoutModal.test.tsx
similarity index 92%
rename from src/__tests__/Date/DatePickerInputWithoutModa.test.tsx
rename to src/__tests__/Date/DatePickerInputWithoutModal.test.tsx
index 94889536..f3b9084b 100644
--- a/src/__tests__/Date/DatePickerInputWithoutModa.test.tsx
+++ b/src/__tests__/Date/DatePickerInputWithoutModal.test.tsx
@@ -8,7 +8,7 @@ it('renders DatePickerInput', () => {
     .create(
       <DatePickerInputWithoutModal
         locale={'en'}
-        value={undefined}
+        value={new Date('12/26/2022')}
         onChange={() => null}
         inputMode="start"
         autoComplete={'birthdate-full'}
diff --git a/src/__tests__/Date/__snapshots__/DatePickerInput.test.tsx.snap b/src/__tests__/Date/__snapshots__/DatePickerInput.test.tsx.snap
index cb406dbe..2c746544 100644
--- a/src/__tests__/Date/__snapshots__/DatePickerInput.test.tsx.snap
+++ b/src/__tests__/Date/__snapshots__/DatePickerInput.test.tsx.snap
@@ -210,7 +210,7 @@ exports[`renders DatePickerInput 1`] = `
             }
             testID="text-input-flat"
             underlineColorAndroid="transparent"
-            value="12/24/2022"
+            value="12/26/2022"
           />
         </View>
       </View>
diff --git a/src/__tests__/Date/__snapshots__/DatePickerInputWithoutModa.test.tsx.snap b/src/__tests__/Date/__snapshots__/DatePickerInputWithoutModal.test.tsx.snap
similarity index 99%
rename from src/__tests__/Date/__snapshots__/DatePickerInputWithoutModa.test.tsx.snap
rename to src/__tests__/Date/__snapshots__/DatePickerInputWithoutModal.test.tsx.snap
index 9ed16efa..e3990ba7 100644
--- a/src/__tests__/Date/__snapshots__/DatePickerInputWithoutModa.test.tsx.snap
+++ b/src/__tests__/Date/__snapshots__/DatePickerInputWithoutModal.test.tsx.snap
@@ -209,7 +209,7 @@ exports[`renders DatePickerInput 1`] = `
           }
           testID="text-input-flat"
           underlineColorAndroid="transparent"
-          value="12/24/2022"
+          value="12/26/2022"
         />
       </View>
     </View>
diff --git a/src/__tests__/Time/AmPmSwitcher.test.tsx b/src/__tests__/Time/AmPmSwitcher.test.tsx
index ff0b7e51..de7c6f3d 100644
--- a/src/__tests__/Time/AmPmSwitcher.test.tsx
+++ b/src/__tests__/Time/AmPmSwitcher.test.tsx
@@ -1,11 +1,18 @@
 import * as React from 'react'
 
 import renderer from 'react-test-renderer'
+import { inputTypes } from '../../Time/timeUtils'
 import AmPmSwitcher from '../../Time/AmPmSwitcher'
 
 it('renders AmPmSwitcher', () => {
   const tree = renderer
-    .create(<AmPmSwitcher hours={12} onChange={() => null} />)
+    .create(
+      <AmPmSwitcher
+        hours={12}
+        onChange={() => null}
+        inputType={inputTypes.keyboard}
+      />
+    )
     .toJSON()
 
   expect(tree).toMatchSnapshot()
diff --git a/src/__tests__/Time/__snapshots__/AmPmSwitcher.test.tsx.snap b/src/__tests__/Time/__snapshots__/AmPmSwitcher.test.tsx.snap
index 24895008..df461441 100644
--- a/src/__tests__/Time/__snapshots__/AmPmSwitcher.test.tsx.snap
+++ b/src/__tests__/Time/__snapshots__/AmPmSwitcher.test.tsx.snap
@@ -6,13 +6,14 @@ exports[`renders AmPmSwitcher 1`] = `
     [
       {
         "borderWidth": 1,
-        "height": 80,
         "overflow": "hidden",
-        "width": 50,
+        "width": 52,
       },
       {
-        "borderColor": "#E0D2E0",
-        "borderRadius": 4,
+        "borderColor": "rgba(121, 116, 126, 1)",
+        "borderRadius": 8,
+        "height": 72,
+        "marginBottom": 24,
       },
     ]
   }
@@ -86,12 +87,12 @@ exports[`renders AmPmSwitcher 1`] = `
             },
             [
               {
-                "color": "rgba(103, 80, 164, 1)",
+                "color": "rgba(73, 69, 79, 1)",
                 "fontFamily": "System",
-                "fontSize": 14,
-                "fontWeight": "400",
-                "letterSpacing": 0.25,
-                "lineHeight": 20,
+                "fontSize": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0.15,
+                "lineHeight": 24,
               },
             ],
           ]
@@ -106,10 +107,10 @@ exports[`renders AmPmSwitcher 1`] = `
       [
         {
           "height": 1,
-          "width": 48,
+          "width": 52,
         },
         {
-          "backgroundColor": "#E0D2E0",
+          "backgroundColor": "rgba(121, 116, 126, 1)",
         },
       ]
     }
@@ -180,10 +181,10 @@ exports[`renders AmPmSwitcher 1`] = `
               {
                 "color": "rgba(73, 69, 79, 1)",
                 "fontFamily": "System",
-                "fontSize": 14,
-                "fontWeight": "400",
-                "letterSpacing": 0.25,
-                "lineHeight": 20,
+                "fontSize": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0.15,
+                "lineHeight": 24,
               },
             ],
           ]
diff --git a/src/__tests__/Time/__snapshots__/AnalogClock.test.tsx.snap b/src/__tests__/Time/__snapshots__/AnalogClock.test.tsx.snap
index 755aed7d..b885b7f9 100644
--- a/src/__tests__/Time/__snapshots__/AnalogClock.test.tsx.snap
+++ b/src/__tests__/Time/__snapshots__/AnalogClock.test.tsx.snap
@@ -19,14 +19,14 @@ exports[`renders AnalogClock 1`] = `
     [
       {
         "alignItems": "center",
-        "borderRadius": 107.5,
-        "height": 215,
+        "borderRadius": 128,
+        "height": 256,
         "justifyContent": "center",
         "position": "relative",
-        "width": 215,
+        "width": 256,
       },
       {
-        "backgroundColor": "#E6E5E7",
+        "backgroundColor": "rgba(231, 224, 236, 1)",
       },
     ]
   }
@@ -38,7 +38,6 @@ exports[`renders AnalogClock 1`] = `
         {
           "borderRadius": 4,
           "height": 2,
-          "marginBottom": -1,
           "position": "absolute",
         },
         {
@@ -48,10 +47,10 @@ exports[`renders AnalogClock 1`] = `
               "rotate": "270deg",
             },
             {
-              "translateX": 49.75,
+              "translateX": 64,
             },
           ],
-          "width": 103.5,
+          "width": 124,
         },
       ]
     }
@@ -60,12 +59,12 @@ exports[`renders AnalogClock 1`] = `
       style={
         [
           {
-            "borderRadius": 15,
-            "bottom": -14,
-            "height": 30,
+            "borderRadius": 24,
+            "bottom": -23,
+            "height": 48,
             "position": "absolute",
             "right": 0,
-            "width": 30,
+            "width": 48,
           },
           {
             "backgroundColor": "rgba(103, 80, 164, 1)",
@@ -143,18 +142,18 @@ exports[`renders AnalogClock 1`] = `
           [
             {
               "alignItems": "center",
-              "borderRadius": 25,
-              "height": 50,
+              "borderRadius": 24,
+              "height": 48,
               "justifyContent": "center",
-              "marginLeft": -25,
-              "marginTop": -25,
+              "marginLeft": -24,
+              "marginTop": -24,
               "position": "absolute",
-              "width": 50,
+              "width": 48,
               "zIndex": 20,
             },
             {
-              "left": 151,
-              "top": 33,
+              "left": 179,
+              "top": 39,
             },
           ]
         }
@@ -162,7 +161,7 @@ exports[`renders AnalogClock 1`] = `
         <View
           style={
             {
-              "borderRadius": 25,
+              "borderRadius": 24,
             }
           }
         >
@@ -170,14 +169,16 @@ exports[`renders AnalogClock 1`] = `
             selectable={false}
             style={
               [
-                {
-                  "textAlign": "left",
-                },
                 {
                   "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
+                  "fontSize": 16,
                   "fontWeight": "400",
-                  "letterSpacing": 0,
+                  "letterSpacing": 0.15,
+                  "lineHeight": 24,
+                },
+                {
+                  "textAlign": "left",
                 },
                 {
                   "writingDirection": "ltr",
@@ -196,18 +197,18 @@ exports[`renders AnalogClock 1`] = `
           [
             {
               "alignItems": "center",
-              "borderRadius": 25,
-              "height": 50,
+              "borderRadius": 24,
+              "height": 48,
               "justifyContent": "center",
-              "marginLeft": -25,
-              "marginTop": -25,
+              "marginLeft": -24,
+              "marginTop": -24,
               "position": "absolute",
-              "width": 50,
+              "width": 48,
               "zIndex": 20,
             },
             {
-              "left": 182,
-              "top": 65,
+              "left": 217,
+              "top": 77,
             },
           ]
         }
@@ -215,7 +216,7 @@ exports[`renders AnalogClock 1`] = `
         <View
           style={
             {
-              "borderRadius": 25,
+              "borderRadius": 24,
             }
           }
         >
@@ -223,14 +224,16 @@ exports[`renders AnalogClock 1`] = `
             selectable={false}
             style={
               [
-                {
-                  "textAlign": "left",
-                },
                 {
                   "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
+                  "fontSize": 16,
                   "fontWeight": "400",
-                  "letterSpacing": 0,
+                  "letterSpacing": 0.15,
+                  "lineHeight": 24,
+                },
+                {
+                  "textAlign": "left",
                 },
                 {
                   "writingDirection": "ltr",
@@ -249,18 +252,18 @@ exports[`renders AnalogClock 1`] = `
           [
             {
               "alignItems": "center",
-              "borderRadius": 25,
-              "height": 50,
+              "borderRadius": 24,
+              "height": 48,
               "justifyContent": "center",
-              "marginLeft": -25,
-              "marginTop": -25,
+              "marginLeft": -24,
+              "marginTop": -24,
               "position": "absolute",
-              "width": 50,
+              "width": 48,
               "zIndex": 20,
             },
             {
-              "left": 194,
-              "top": 107,
+              "left": 230,
+              "top": 128,
             },
           ]
         }
@@ -268,7 +271,7 @@ exports[`renders AnalogClock 1`] = `
         <View
           style={
             {
-              "borderRadius": 25,
+              "borderRadius": 24,
             }
           }
         >
@@ -276,14 +279,16 @@ exports[`renders AnalogClock 1`] = `
             selectable={false}
             style={
               [
-                {
-                  "textAlign": "left",
-                },
                 {
                   "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
+                  "fontSize": 16,
                   "fontWeight": "400",
-                  "letterSpacing": 0,
+                  "letterSpacing": 0.15,
+                  "lineHeight": 24,
+                },
+                {
+                  "textAlign": "left",
                 },
                 {
                   "writingDirection": "ltr",
@@ -302,18 +307,18 @@ exports[`renders AnalogClock 1`] = `
           [
             {
               "alignItems": "center",
-              "borderRadius": 25,
-              "height": 50,
+              "borderRadius": 24,
+              "height": 48,
               "justifyContent": "center",
-              "marginLeft": -25,
-              "marginTop": -25,
+              "marginLeft": -24,
+              "marginTop": -24,
               "position": "absolute",
-              "width": 50,
+              "width": 48,
               "zIndex": 20,
             },
             {
-              "left": 182,
-              "top": 150,
+              "left": 217,
+              "top": 179,
             },
           ]
         }
@@ -321,7 +326,7 @@ exports[`renders AnalogClock 1`] = `
         <View
           style={
             {
-              "borderRadius": 25,
+              "borderRadius": 24,
             }
           }
         >
@@ -329,14 +334,16 @@ exports[`renders AnalogClock 1`] = `
             selectable={false}
             style={
               [
-                {
-                  "textAlign": "left",
-                },
                 {
                   "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
+                  "fontSize": 16,
                   "fontWeight": "400",
-                  "letterSpacing": 0,
+                  "letterSpacing": 0.15,
+                  "lineHeight": 24,
+                },
+                {
+                  "textAlign": "left",
                 },
                 {
                   "writingDirection": "ltr",
@@ -355,18 +362,18 @@ exports[`renders AnalogClock 1`] = `
           [
             {
               "alignItems": "center",
-              "borderRadius": 25,
-              "height": 50,
+              "borderRadius": 24,
+              "height": 48,
               "justifyContent": "center",
-              "marginLeft": -25,
-              "marginTop": -25,
+              "marginLeft": -24,
+              "marginTop": -24,
               "position": "absolute",
-              "width": 50,
+              "width": 48,
               "zIndex": 20,
             },
             {
-              "left": 151,
-              "top": 182,
+              "left": 179,
+              "top": 217,
             },
           ]
         }
@@ -374,7 +381,7 @@ exports[`renders AnalogClock 1`] = `
         <View
           style={
             {
-              "borderRadius": 25,
+              "borderRadius": 24,
             }
           }
         >
@@ -382,14 +389,16 @@ exports[`renders AnalogClock 1`] = `
             selectable={false}
             style={
               [
-                {
-                  "textAlign": "left",
-                },
                 {
                   "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
+                  "fontSize": 16,
                   "fontWeight": "400",
-                  "letterSpacing": 0,
+                  "letterSpacing": 0.15,
+                  "lineHeight": 24,
+                },
+                {
+                  "textAlign": "left",
                 },
                 {
                   "writingDirection": "ltr",
@@ -408,18 +417,18 @@ exports[`renders AnalogClock 1`] = `
           [
             {
               "alignItems": "center",
-              "borderRadius": 25,
-              "height": 50,
+              "borderRadius": 24,
+              "height": 48,
               "justifyContent": "center",
-              "marginLeft": -25,
-              "marginTop": -25,
+              "marginLeft": -24,
+              "marginTop": -24,
               "position": "absolute",
-              "width": 50,
+              "width": 48,
               "zIndex": 20,
             },
             {
-              "left": 108,
-              "top": 194,
+              "left": 128,
+              "top": 230,
             },
           ]
         }
@@ -427,7 +436,7 @@ exports[`renders AnalogClock 1`] = `
         <View
           style={
             {
-              "borderRadius": 25,
+              "borderRadius": 24,
             }
           }
         >
@@ -435,14 +444,16 @@ exports[`renders AnalogClock 1`] = `
             selectable={false}
             style={
               [
-                {
-                  "textAlign": "left",
-                },
                 {
                   "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
+                  "fontSize": 16,
                   "fontWeight": "400",
-                  "letterSpacing": 0,
+                  "letterSpacing": 0.15,
+                  "lineHeight": 24,
+                },
+                {
+                  "textAlign": "left",
                 },
                 {
                   "writingDirection": "ltr",
@@ -461,18 +472,18 @@ exports[`renders AnalogClock 1`] = `
           [
             {
               "alignItems": "center",
-              "borderRadius": 25,
-              "height": 50,
+              "borderRadius": 24,
+              "height": 48,
               "justifyContent": "center",
-              "marginLeft": -25,
-              "marginTop": -25,
+              "marginLeft": -24,
+              "marginTop": -24,
               "position": "absolute",
-              "width": 50,
+              "width": 48,
               "zIndex": 20,
             },
             {
-              "left": 65,
-              "top": 182,
+              "left": 77,
+              "top": 217,
             },
           ]
         }
@@ -480,7 +491,7 @@ exports[`renders AnalogClock 1`] = `
         <View
           style={
             {
-              "borderRadius": 25,
+              "borderRadius": 24,
             }
           }
         >
@@ -488,14 +499,16 @@ exports[`renders AnalogClock 1`] = `
             selectable={false}
             style={
               [
-                {
-                  "textAlign": "left",
-                },
                 {
                   "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
+                  "fontSize": 16,
                   "fontWeight": "400",
-                  "letterSpacing": 0,
+                  "letterSpacing": 0.15,
+                  "lineHeight": 24,
+                },
+                {
+                  "textAlign": "left",
                 },
                 {
                   "writingDirection": "ltr",
@@ -514,18 +527,18 @@ exports[`renders AnalogClock 1`] = `
           [
             {
               "alignItems": "center",
-              "borderRadius": 25,
-              "height": 50,
+              "borderRadius": 24,
+              "height": 48,
               "justifyContent": "center",
-              "marginLeft": -25,
-              "marginTop": -25,
+              "marginLeft": -24,
+              "marginTop": -24,
               "position": "absolute",
-              "width": 50,
+              "width": 48,
               "zIndex": 20,
             },
             {
-              "left": 33,
-              "top": 151,
+              "left": 39,
+              "top": 179,
             },
           ]
         }
@@ -533,7 +546,7 @@ exports[`renders AnalogClock 1`] = `
         <View
           style={
             {
-              "borderRadius": 25,
+              "borderRadius": 24,
             }
           }
         >
@@ -541,14 +554,16 @@ exports[`renders AnalogClock 1`] = `
             selectable={false}
             style={
               [
-                {
-                  "textAlign": "left",
-                },
                 {
                   "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
+                  "fontSize": 16,
                   "fontWeight": "400",
-                  "letterSpacing": 0,
+                  "letterSpacing": 0.15,
+                  "lineHeight": 24,
+                },
+                {
+                  "textAlign": "left",
                 },
                 {
                   "writingDirection": "ltr",
@@ -567,18 +582,18 @@ exports[`renders AnalogClock 1`] = `
           [
             {
               "alignItems": "center",
-              "borderRadius": 25,
-              "height": 50,
+              "borderRadius": 24,
+              "height": 48,
               "justifyContent": "center",
-              "marginLeft": -25,
-              "marginTop": -25,
+              "marginLeft": -24,
+              "marginTop": -24,
               "position": "absolute",
-              "width": 50,
+              "width": 48,
               "zIndex": 20,
             },
             {
-              "left": 22,
-              "top": 108,
+              "left": 26,
+              "top": 128,
             },
           ]
         }
@@ -586,7 +601,7 @@ exports[`renders AnalogClock 1`] = `
         <View
           style={
             {
-              "borderRadius": 25,
+              "borderRadius": 24,
             }
           }
         >
@@ -594,14 +609,16 @@ exports[`renders AnalogClock 1`] = `
             selectable={false}
             style={
               [
-                {
-                  "textAlign": "left",
-                },
                 {
                   "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
+                  "fontSize": 16,
                   "fontWeight": "400",
-                  "letterSpacing": 0,
+                  "letterSpacing": 0.15,
+                  "lineHeight": 24,
+                },
+                {
+                  "textAlign": "left",
                 },
                 {
                   "writingDirection": "ltr",
@@ -620,18 +637,18 @@ exports[`renders AnalogClock 1`] = `
           [
             {
               "alignItems": "center",
-              "borderRadius": 25,
-              "height": 50,
+              "borderRadius": 24,
+              "height": 48,
               "justifyContent": "center",
-              "marginLeft": -25,
-              "marginTop": -25,
+              "marginLeft": -24,
+              "marginTop": -24,
               "position": "absolute",
-              "width": 50,
+              "width": 48,
               "zIndex": 20,
             },
             {
-              "left": 33,
-              "top": 65,
+              "left": 39,
+              "top": 77,
             },
           ]
         }
@@ -639,7 +656,7 @@ exports[`renders AnalogClock 1`] = `
         <View
           style={
             {
-              "borderRadius": 25,
+              "borderRadius": 24,
             }
           }
         >
@@ -647,14 +664,16 @@ exports[`renders AnalogClock 1`] = `
             selectable={false}
             style={
               [
-                {
-                  "textAlign": "left",
-                },
                 {
                   "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
+                  "fontSize": 16,
                   "fontWeight": "400",
-                  "letterSpacing": 0,
+                  "letterSpacing": 0.15,
+                  "lineHeight": 24,
+                },
+                {
+                  "textAlign": "left",
                 },
                 {
                   "writingDirection": "ltr",
@@ -673,18 +692,18 @@ exports[`renders AnalogClock 1`] = `
           [
             {
               "alignItems": "center",
-              "borderRadius": 25,
-              "height": 50,
+              "borderRadius": 24,
+              "height": 48,
               "justifyContent": "center",
-              "marginLeft": -25,
-              "marginTop": -25,
+              "marginLeft": -24,
+              "marginTop": -24,
               "position": "absolute",
-              "width": 50,
+              "width": 48,
               "zIndex": 20,
             },
             {
-              "left": 64,
-              "top": 33,
+              "left": 77,
+              "top": 39,
             },
           ]
         }
@@ -692,7 +711,7 @@ exports[`renders AnalogClock 1`] = `
         <View
           style={
             {
-              "borderRadius": 25,
+              "borderRadius": 24,
             }
           }
         >
@@ -700,14 +719,16 @@ exports[`renders AnalogClock 1`] = `
             selectable={false}
             style={
               [
-                {
-                  "textAlign": "left",
-                },
                 {
                   "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
+                  "fontSize": 16,
                   "fontWeight": "400",
-                  "letterSpacing": 0,
+                  "letterSpacing": 0.15,
+                  "lineHeight": 24,
+                },
+                {
+                  "textAlign": "left",
                 },
                 {
                   "writingDirection": "ltr",
@@ -726,18 +747,18 @@ exports[`renders AnalogClock 1`] = `
           [
             {
               "alignItems": "center",
-              "borderRadius": 25,
-              "height": 50,
+              "borderRadius": 24,
+              "height": 48,
               "justifyContent": "center",
-              "marginLeft": -25,
-              "marginTop": -25,
+              "marginLeft": -24,
+              "marginTop": -24,
               "position": "absolute",
-              "width": 50,
+              "width": 48,
               "zIndex": 20,
             },
             {
-              "left": 107,
-              "top": 22,
+              "left": 128,
+              "top": 26,
             },
           ]
         }
@@ -745,7 +766,7 @@ exports[`renders AnalogClock 1`] = `
         <View
           style={
             {
-              "borderRadius": 25,
+              "borderRadius": 24,
             }
           }
         >
@@ -753,20 +774,22 @@ exports[`renders AnalogClock 1`] = `
             selectable={false}
             style={
               [
-                {
-                  "textAlign": "left",
-                },
                 {
                   "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
+                  "fontSize": 16,
                   "fontWeight": "400",
-                  "letterSpacing": 0,
+                  "letterSpacing": 0.15,
+                  "lineHeight": 24,
+                },
+                {
+                  "textAlign": "left",
                 },
                 {
                   "writingDirection": "ltr",
                 },
                 {
-                  "color": "#fff",
+                  "color": "rgba(255, 255, 255, 1)",
                 },
               ]
             }
@@ -801,18 +824,18 @@ exports[`renders AnalogClock 1`] = `
           [
             {
               "alignItems": "center",
-              "borderRadius": 25,
-              "height": 50,
+              "borderRadius": 24,
+              "height": 48,
               "justifyContent": "center",
-              "marginLeft": -25,
-              "marginTop": -25,
+              "marginLeft": -24,
+              "marginTop": -24,
               "position": "absolute",
-              "width": 50,
+              "width": 48,
               "zIndex": 20,
             },
             {
-              "left": 108,
-              "top": 22,
+              "left": 128,
+              "top": 26,
             },
           ]
         }
@@ -820,7 +843,7 @@ exports[`renders AnalogClock 1`] = `
         <View
           style={
             {
-              "borderRadius": 25,
+              "borderRadius": 24,
             }
           }
         >
@@ -828,14 +851,16 @@ exports[`renders AnalogClock 1`] = `
             selectable={false}
             style={
               [
-                {
-                  "textAlign": "left",
-                },
                 {
                   "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
+                  "fontSize": 16,
                   "fontWeight": "400",
-                  "letterSpacing": 0,
+                  "letterSpacing": 0.15,
+                  "lineHeight": 24,
+                },
+                {
+                  "textAlign": "left",
                 },
                 {
                   "writingDirection": "ltr",
@@ -854,18 +879,18 @@ exports[`renders AnalogClock 1`] = `
           [
             {
               "alignItems": "center",
-              "borderRadius": 25,
-              "height": 50,
+              "borderRadius": 24,
+              "height": 48,
               "justifyContent": "center",
-              "marginLeft": -25,
-              "marginTop": -25,
+              "marginLeft": -24,
+              "marginTop": -24,
               "position": "absolute",
-              "width": 50,
+              "width": 48,
               "zIndex": 20,
             },
             {
-              "left": 151,
-              "top": 33,
+              "left": 179,
+              "top": 39,
             },
           ]
         }
@@ -873,7 +898,7 @@ exports[`renders AnalogClock 1`] = `
         <View
           style={
             {
-              "borderRadius": 25,
+              "borderRadius": 24,
             }
           }
         >
@@ -881,14 +906,16 @@ exports[`renders AnalogClock 1`] = `
             selectable={false}
             style={
               [
-                {
-                  "textAlign": "left",
-                },
                 {
                   "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
+                  "fontSize": 16,
                   "fontWeight": "400",
-                  "letterSpacing": 0,
+                  "letterSpacing": 0.15,
+                  "lineHeight": 24,
+                },
+                {
+                  "textAlign": "left",
                 },
                 {
                   "writingDirection": "ltr",
@@ -907,18 +934,18 @@ exports[`renders AnalogClock 1`] = `
           [
             {
               "alignItems": "center",
-              "borderRadius": 25,
-              "height": 50,
+              "borderRadius": 24,
+              "height": 48,
               "justifyContent": "center",
-              "marginLeft": -25,
-              "marginTop": -25,
+              "marginLeft": -24,
+              "marginTop": -24,
               "position": "absolute",
-              "width": 50,
+              "width": 48,
               "zIndex": 20,
             },
             {
-              "left": 182,
-              "top": 65,
+              "left": 217,
+              "top": 77,
             },
           ]
         }
@@ -926,7 +953,7 @@ exports[`renders AnalogClock 1`] = `
         <View
           style={
             {
-              "borderRadius": 25,
+              "borderRadius": 24,
             }
           }
         >
@@ -934,14 +961,16 @@ exports[`renders AnalogClock 1`] = `
             selectable={false}
             style={
               [
-                {
-                  "textAlign": "left",
-                },
                 {
                   "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
+                  "fontSize": 16,
                   "fontWeight": "400",
-                  "letterSpacing": 0,
+                  "letterSpacing": 0.15,
+                  "lineHeight": 24,
+                },
+                {
+                  "textAlign": "left",
                 },
                 {
                   "writingDirection": "ltr",
@@ -960,18 +989,18 @@ exports[`renders AnalogClock 1`] = `
           [
             {
               "alignItems": "center",
-              "borderRadius": 25,
-              "height": 50,
+              "borderRadius": 24,
+              "height": 48,
               "justifyContent": "center",
-              "marginLeft": -25,
-              "marginTop": -25,
+              "marginLeft": -24,
+              "marginTop": -24,
               "position": "absolute",
-              "width": 50,
+              "width": 48,
               "zIndex": 20,
             },
             {
-              "left": 194,
-              "top": 107,
+              "left": 230,
+              "top": 128,
             },
           ]
         }
@@ -979,7 +1008,7 @@ exports[`renders AnalogClock 1`] = `
         <View
           style={
             {
-              "borderRadius": 25,
+              "borderRadius": 24,
             }
           }
         >
@@ -987,14 +1016,16 @@ exports[`renders AnalogClock 1`] = `
             selectable={false}
             style={
               [
-                {
-                  "textAlign": "left",
-                },
                 {
                   "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
+                  "fontSize": 16,
                   "fontWeight": "400",
-                  "letterSpacing": 0,
+                  "letterSpacing": 0.15,
+                  "lineHeight": 24,
+                },
+                {
+                  "textAlign": "left",
                 },
                 {
                   "writingDirection": "ltr",
@@ -1013,18 +1044,18 @@ exports[`renders AnalogClock 1`] = `
           [
             {
               "alignItems": "center",
-              "borderRadius": 25,
-              "height": 50,
+              "borderRadius": 24,
+              "height": 48,
               "justifyContent": "center",
-              "marginLeft": -25,
-              "marginTop": -25,
+              "marginLeft": -24,
+              "marginTop": -24,
               "position": "absolute",
-              "width": 50,
+              "width": 48,
               "zIndex": 20,
             },
             {
-              "left": 182,
-              "top": 150,
+              "left": 217,
+              "top": 179,
             },
           ]
         }
@@ -1032,7 +1063,7 @@ exports[`renders AnalogClock 1`] = `
         <View
           style={
             {
-              "borderRadius": 25,
+              "borderRadius": 24,
             }
           }
         >
@@ -1040,14 +1071,16 @@ exports[`renders AnalogClock 1`] = `
             selectable={false}
             style={
               [
-                {
-                  "textAlign": "left",
-                },
                 {
                   "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
+                  "fontSize": 16,
                   "fontWeight": "400",
-                  "letterSpacing": 0,
+                  "letterSpacing": 0.15,
+                  "lineHeight": 24,
+                },
+                {
+                  "textAlign": "left",
                 },
                 {
                   "writingDirection": "ltr",
@@ -1066,18 +1099,18 @@ exports[`renders AnalogClock 1`] = `
           [
             {
               "alignItems": "center",
-              "borderRadius": 25,
-              "height": 50,
+              "borderRadius": 24,
+              "height": 48,
               "justifyContent": "center",
-              "marginLeft": -25,
-              "marginTop": -25,
+              "marginLeft": -24,
+              "marginTop": -24,
               "position": "absolute",
-              "width": 50,
+              "width": 48,
               "zIndex": 20,
             },
             {
-              "left": 151,
-              "top": 182,
+              "left": 179,
+              "top": 217,
             },
           ]
         }
@@ -1085,7 +1118,7 @@ exports[`renders AnalogClock 1`] = `
         <View
           style={
             {
-              "borderRadius": 25,
+              "borderRadius": 24,
             }
           }
         >
@@ -1093,14 +1126,16 @@ exports[`renders AnalogClock 1`] = `
             selectable={false}
             style={
               [
-                {
-                  "textAlign": "left",
-                },
                 {
                   "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
+                  "fontSize": 16,
                   "fontWeight": "400",
-                  "letterSpacing": 0,
+                  "letterSpacing": 0.15,
+                  "lineHeight": 24,
+                },
+                {
+                  "textAlign": "left",
                 },
                 {
                   "writingDirection": "ltr",
@@ -1119,18 +1154,18 @@ exports[`renders AnalogClock 1`] = `
           [
             {
               "alignItems": "center",
-              "borderRadius": 25,
-              "height": 50,
+              "borderRadius": 24,
+              "height": 48,
               "justifyContent": "center",
-              "marginLeft": -25,
-              "marginTop": -25,
+              "marginLeft": -24,
+              "marginTop": -24,
               "position": "absolute",
-              "width": 50,
+              "width": 48,
               "zIndex": 20,
             },
             {
-              "left": 108,
-              "top": 194,
+              "left": 128,
+              "top": 230,
             },
           ]
         }
@@ -1138,7 +1173,7 @@ exports[`renders AnalogClock 1`] = `
         <View
           style={
             {
-              "borderRadius": 25,
+              "borderRadius": 24,
             }
           }
         >
@@ -1146,20 +1181,22 @@ exports[`renders AnalogClock 1`] = `
             selectable={false}
             style={
               [
-                {
-                  "textAlign": "left",
-                },
                 {
                   "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
+                  "fontSize": 16,
                   "fontWeight": "400",
-                  "letterSpacing": 0,
+                  "letterSpacing": 0.15,
+                  "lineHeight": 24,
+                },
+                {
+                  "textAlign": "left",
                 },
                 {
                   "writingDirection": "ltr",
                 },
                 {
-                  "color": "#fff",
+                  "color": "rgba(255, 255, 255, 1)",
                 },
               ]
             }
@@ -1174,18 +1211,18 @@ exports[`renders AnalogClock 1`] = `
           [
             {
               "alignItems": "center",
-              "borderRadius": 25,
-              "height": 50,
+              "borderRadius": 24,
+              "height": 48,
               "justifyContent": "center",
-              "marginLeft": -25,
-              "marginTop": -25,
+              "marginLeft": -24,
+              "marginTop": -24,
               "position": "absolute",
-              "width": 50,
+              "width": 48,
               "zIndex": 20,
             },
             {
-              "left": 65,
-              "top": 182,
+              "left": 77,
+              "top": 217,
             },
           ]
         }
@@ -1193,7 +1230,7 @@ exports[`renders AnalogClock 1`] = `
         <View
           style={
             {
-              "borderRadius": 25,
+              "borderRadius": 24,
             }
           }
         >
@@ -1201,14 +1238,16 @@ exports[`renders AnalogClock 1`] = `
             selectable={false}
             style={
               [
-                {
-                  "textAlign": "left",
-                },
                 {
                   "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
+                  "fontSize": 16,
                   "fontWeight": "400",
-                  "letterSpacing": 0,
+                  "letterSpacing": 0.15,
+                  "lineHeight": 24,
+                },
+                {
+                  "textAlign": "left",
                 },
                 {
                   "writingDirection": "ltr",
@@ -1227,18 +1266,18 @@ exports[`renders AnalogClock 1`] = `
           [
             {
               "alignItems": "center",
-              "borderRadius": 25,
-              "height": 50,
+              "borderRadius": 24,
+              "height": 48,
               "justifyContent": "center",
-              "marginLeft": -25,
-              "marginTop": -25,
+              "marginLeft": -24,
+              "marginTop": -24,
               "position": "absolute",
-              "width": 50,
+              "width": 48,
               "zIndex": 20,
             },
             {
-              "left": 33,
-              "top": 151,
+              "left": 39,
+              "top": 179,
             },
           ]
         }
@@ -1246,7 +1285,7 @@ exports[`renders AnalogClock 1`] = `
         <View
           style={
             {
-              "borderRadius": 25,
+              "borderRadius": 24,
             }
           }
         >
@@ -1254,14 +1293,16 @@ exports[`renders AnalogClock 1`] = `
             selectable={false}
             style={
               [
-                {
-                  "textAlign": "left",
-                },
                 {
                   "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
+                  "fontSize": 16,
                   "fontWeight": "400",
-                  "letterSpacing": 0,
+                  "letterSpacing": 0.15,
+                  "lineHeight": 24,
+                },
+                {
+                  "textAlign": "left",
                 },
                 {
                   "writingDirection": "ltr",
@@ -1280,18 +1321,18 @@ exports[`renders AnalogClock 1`] = `
           [
             {
               "alignItems": "center",
-              "borderRadius": 25,
-              "height": 50,
+              "borderRadius": 24,
+              "height": 48,
               "justifyContent": "center",
-              "marginLeft": -25,
-              "marginTop": -25,
+              "marginLeft": -24,
+              "marginTop": -24,
               "position": "absolute",
-              "width": 50,
+              "width": 48,
               "zIndex": 20,
             },
             {
-              "left": 22,
-              "top": 108,
+              "left": 26,
+              "top": 128,
             },
           ]
         }
@@ -1299,7 +1340,7 @@ exports[`renders AnalogClock 1`] = `
         <View
           style={
             {
-              "borderRadius": 25,
+              "borderRadius": 24,
             }
           }
         >
@@ -1307,14 +1348,16 @@ exports[`renders AnalogClock 1`] = `
             selectable={false}
             style={
               [
-                {
-                  "textAlign": "left",
-                },
                 {
                   "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
+                  "fontSize": 16,
                   "fontWeight": "400",
-                  "letterSpacing": 0,
+                  "letterSpacing": 0.15,
+                  "lineHeight": 24,
+                },
+                {
+                  "textAlign": "left",
                 },
                 {
                   "writingDirection": "ltr",
@@ -1333,18 +1376,18 @@ exports[`renders AnalogClock 1`] = `
           [
             {
               "alignItems": "center",
-              "borderRadius": 25,
-              "height": 50,
+              "borderRadius": 24,
+              "height": 48,
               "justifyContent": "center",
-              "marginLeft": -25,
-              "marginTop": -25,
+              "marginLeft": -24,
+              "marginTop": -24,
               "position": "absolute",
-              "width": 50,
+              "width": 48,
               "zIndex": 20,
             },
             {
-              "left": 33,
-              "top": 65,
+              "left": 39,
+              "top": 77,
             },
           ]
         }
@@ -1352,7 +1395,7 @@ exports[`renders AnalogClock 1`] = `
         <View
           style={
             {
-              "borderRadius": 25,
+              "borderRadius": 24,
             }
           }
         >
@@ -1360,14 +1403,16 @@ exports[`renders AnalogClock 1`] = `
             selectable={false}
             style={
               [
-                {
-                  "textAlign": "left",
-                },
                 {
                   "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
+                  "fontSize": 16,
                   "fontWeight": "400",
-                  "letterSpacing": 0,
+                  "letterSpacing": 0.15,
+                  "lineHeight": 24,
+                },
+                {
+                  "textAlign": "left",
                 },
                 {
                   "writingDirection": "ltr",
@@ -1386,18 +1431,18 @@ exports[`renders AnalogClock 1`] = `
           [
             {
               "alignItems": "center",
-              "borderRadius": 25,
-              "height": 50,
+              "borderRadius": 24,
+              "height": 48,
               "justifyContent": "center",
-              "marginLeft": -25,
-              "marginTop": -25,
+              "marginLeft": -24,
+              "marginTop": -24,
               "position": "absolute",
-              "width": 50,
+              "width": 48,
               "zIndex": 20,
             },
             {
-              "left": 64,
-              "top": 33,
+              "left": 77,
+              "top": 39,
             },
           ]
         }
@@ -1405,7 +1450,7 @@ exports[`renders AnalogClock 1`] = `
         <View
           style={
             {
-              "borderRadius": 25,
+              "borderRadius": 24,
             }
           }
         >
@@ -1413,14 +1458,16 @@ exports[`renders AnalogClock 1`] = `
             selectable={false}
             style={
               [
-                {
-                  "textAlign": "left",
-                },
                 {
                   "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
+                  "fontSize": 16,
                   "fontWeight": "400",
-                  "letterSpacing": 0,
+                  "letterSpacing": 0.15,
+                  "lineHeight": 24,
+                },
+                {
+                  "textAlign": "left",
                 },
                 {
                   "writingDirection": "ltr",
diff --git a/src/__tests__/Time/__snapshots__/AnalogClockHours.test.tsx.snap b/src/__tests__/Time/__snapshots__/AnalogClockHours.test.tsx.snap
index 816db3ee..59473a63 100644
--- a/src/__tests__/Time/__snapshots__/AnalogClockHours.test.tsx.snap
+++ b/src/__tests__/Time/__snapshots__/AnalogClockHours.test.tsx.snap
@@ -8,18 +8,18 @@ exports[`renders AnalogClockHours 1`] = `
       [
         {
           "alignItems": "center",
-          "borderRadius": 25,
-          "height": 50,
+          "borderRadius": 24,
+          "height": 48,
           "justifyContent": "center",
-          "marginLeft": -25,
-          "marginTop": -25,
+          "marginLeft": -24,
+          "marginTop": -24,
           "position": "absolute",
-          "width": 50,
+          "width": 48,
           "zIndex": 20,
         },
         {
-          "left": 151,
-          "top": 33,
+          "left": 179,
+          "top": 39,
         },
       ]
     }
@@ -27,7 +27,7 @@ exports[`renders AnalogClockHours 1`] = `
     <View
       style={
         {
-          "borderRadius": 25,
+          "borderRadius": 24,
         }
       }
     >
@@ -35,14 +35,16 @@ exports[`renders AnalogClockHours 1`] = `
         selectable={false}
         style={
           [
-            {
-              "textAlign": "left",
-            },
             {
               "color": "rgba(28, 27, 31, 1)",
               "fontFamily": "System",
+              "fontSize": 16,
               "fontWeight": "400",
-              "letterSpacing": 0,
+              "letterSpacing": 0.15,
+              "lineHeight": 24,
+            },
+            {
+              "textAlign": "left",
             },
             {
               "writingDirection": "ltr",
@@ -61,18 +63,18 @@ exports[`renders AnalogClockHours 1`] = `
       [
         {
           "alignItems": "center",
-          "borderRadius": 25,
-          "height": 50,
+          "borderRadius": 24,
+          "height": 48,
           "justifyContent": "center",
-          "marginLeft": -25,
-          "marginTop": -25,
+          "marginLeft": -24,
+          "marginTop": -24,
           "position": "absolute",
-          "width": 50,
+          "width": 48,
           "zIndex": 20,
         },
         {
-          "left": 182,
-          "top": 65,
+          "left": 217,
+          "top": 77,
         },
       ]
     }
@@ -80,7 +82,7 @@ exports[`renders AnalogClockHours 1`] = `
     <View
       style={
         {
-          "borderRadius": 25,
+          "borderRadius": 24,
         }
       }
     >
@@ -88,14 +90,16 @@ exports[`renders AnalogClockHours 1`] = `
         selectable={false}
         style={
           [
-            {
-              "textAlign": "left",
-            },
             {
               "color": "rgba(28, 27, 31, 1)",
               "fontFamily": "System",
+              "fontSize": 16,
               "fontWeight": "400",
-              "letterSpacing": 0,
+              "letterSpacing": 0.15,
+              "lineHeight": 24,
+            },
+            {
+              "textAlign": "left",
             },
             {
               "writingDirection": "ltr",
@@ -114,18 +118,18 @@ exports[`renders AnalogClockHours 1`] = `
       [
         {
           "alignItems": "center",
-          "borderRadius": 25,
-          "height": 50,
+          "borderRadius": 24,
+          "height": 48,
           "justifyContent": "center",
-          "marginLeft": -25,
-          "marginTop": -25,
+          "marginLeft": -24,
+          "marginTop": -24,
           "position": "absolute",
-          "width": 50,
+          "width": 48,
           "zIndex": 20,
         },
         {
-          "left": 194,
-          "top": 107,
+          "left": 230,
+          "top": 128,
         },
       ]
     }
@@ -133,7 +137,7 @@ exports[`renders AnalogClockHours 1`] = `
     <View
       style={
         {
-          "borderRadius": 25,
+          "borderRadius": 24,
         }
       }
     >
@@ -141,14 +145,16 @@ exports[`renders AnalogClockHours 1`] = `
         selectable={false}
         style={
           [
-            {
-              "textAlign": "left",
-            },
             {
               "color": "rgba(28, 27, 31, 1)",
               "fontFamily": "System",
+              "fontSize": 16,
               "fontWeight": "400",
-              "letterSpacing": 0,
+              "letterSpacing": 0.15,
+              "lineHeight": 24,
+            },
+            {
+              "textAlign": "left",
             },
             {
               "writingDirection": "ltr",
@@ -167,18 +173,18 @@ exports[`renders AnalogClockHours 1`] = `
       [
         {
           "alignItems": "center",
-          "borderRadius": 25,
-          "height": 50,
+          "borderRadius": 24,
+          "height": 48,
           "justifyContent": "center",
-          "marginLeft": -25,
-          "marginTop": -25,
+          "marginLeft": -24,
+          "marginTop": -24,
           "position": "absolute",
-          "width": 50,
+          "width": 48,
           "zIndex": 20,
         },
         {
-          "left": 182,
-          "top": 150,
+          "left": 217,
+          "top": 179,
         },
       ]
     }
@@ -186,7 +192,7 @@ exports[`renders AnalogClockHours 1`] = `
     <View
       style={
         {
-          "borderRadius": 25,
+          "borderRadius": 24,
         }
       }
     >
@@ -194,14 +200,16 @@ exports[`renders AnalogClockHours 1`] = `
         selectable={false}
         style={
           [
-            {
-              "textAlign": "left",
-            },
             {
               "color": "rgba(28, 27, 31, 1)",
               "fontFamily": "System",
+              "fontSize": 16,
               "fontWeight": "400",
-              "letterSpacing": 0,
+              "letterSpacing": 0.15,
+              "lineHeight": 24,
+            },
+            {
+              "textAlign": "left",
             },
             {
               "writingDirection": "ltr",
@@ -220,18 +228,18 @@ exports[`renders AnalogClockHours 1`] = `
       [
         {
           "alignItems": "center",
-          "borderRadius": 25,
-          "height": 50,
+          "borderRadius": 24,
+          "height": 48,
           "justifyContent": "center",
-          "marginLeft": -25,
-          "marginTop": -25,
+          "marginLeft": -24,
+          "marginTop": -24,
           "position": "absolute",
-          "width": 50,
+          "width": 48,
           "zIndex": 20,
         },
         {
-          "left": 151,
-          "top": 182,
+          "left": 179,
+          "top": 217,
         },
       ]
     }
@@ -239,7 +247,7 @@ exports[`renders AnalogClockHours 1`] = `
     <View
       style={
         {
-          "borderRadius": 25,
+          "borderRadius": 24,
         }
       }
     >
@@ -247,14 +255,16 @@ exports[`renders AnalogClockHours 1`] = `
         selectable={false}
         style={
           [
-            {
-              "textAlign": "left",
-            },
             {
               "color": "rgba(28, 27, 31, 1)",
               "fontFamily": "System",
+              "fontSize": 16,
               "fontWeight": "400",
-              "letterSpacing": 0,
+              "letterSpacing": 0.15,
+              "lineHeight": 24,
+            },
+            {
+              "textAlign": "left",
             },
             {
               "writingDirection": "ltr",
@@ -273,18 +283,18 @@ exports[`renders AnalogClockHours 1`] = `
       [
         {
           "alignItems": "center",
-          "borderRadius": 25,
-          "height": 50,
+          "borderRadius": 24,
+          "height": 48,
           "justifyContent": "center",
-          "marginLeft": -25,
-          "marginTop": -25,
+          "marginLeft": -24,
+          "marginTop": -24,
           "position": "absolute",
-          "width": 50,
+          "width": 48,
           "zIndex": 20,
         },
         {
-          "left": 108,
-          "top": 194,
+          "left": 128,
+          "top": 230,
         },
       ]
     }
@@ -292,7 +302,7 @@ exports[`renders AnalogClockHours 1`] = `
     <View
       style={
         {
-          "borderRadius": 25,
+          "borderRadius": 24,
         }
       }
     >
@@ -300,14 +310,16 @@ exports[`renders AnalogClockHours 1`] = `
         selectable={false}
         style={
           [
-            {
-              "textAlign": "left",
-            },
             {
               "color": "rgba(28, 27, 31, 1)",
               "fontFamily": "System",
+              "fontSize": 16,
               "fontWeight": "400",
-              "letterSpacing": 0,
+              "letterSpacing": 0.15,
+              "lineHeight": 24,
+            },
+            {
+              "textAlign": "left",
             },
             {
               "writingDirection": "ltr",
@@ -326,18 +338,18 @@ exports[`renders AnalogClockHours 1`] = `
       [
         {
           "alignItems": "center",
-          "borderRadius": 25,
-          "height": 50,
+          "borderRadius": 24,
+          "height": 48,
           "justifyContent": "center",
-          "marginLeft": -25,
-          "marginTop": -25,
+          "marginLeft": -24,
+          "marginTop": -24,
           "position": "absolute",
-          "width": 50,
+          "width": 48,
           "zIndex": 20,
         },
         {
-          "left": 65,
-          "top": 182,
+          "left": 77,
+          "top": 217,
         },
       ]
     }
@@ -345,7 +357,7 @@ exports[`renders AnalogClockHours 1`] = `
     <View
       style={
         {
-          "borderRadius": 25,
+          "borderRadius": 24,
         }
       }
     >
@@ -353,14 +365,16 @@ exports[`renders AnalogClockHours 1`] = `
         selectable={false}
         style={
           [
-            {
-              "textAlign": "left",
-            },
             {
               "color": "rgba(28, 27, 31, 1)",
               "fontFamily": "System",
+              "fontSize": 16,
               "fontWeight": "400",
-              "letterSpacing": 0,
+              "letterSpacing": 0.15,
+              "lineHeight": 24,
+            },
+            {
+              "textAlign": "left",
             },
             {
               "writingDirection": "ltr",
@@ -379,18 +393,18 @@ exports[`renders AnalogClockHours 1`] = `
       [
         {
           "alignItems": "center",
-          "borderRadius": 25,
-          "height": 50,
+          "borderRadius": 24,
+          "height": 48,
           "justifyContent": "center",
-          "marginLeft": -25,
-          "marginTop": -25,
+          "marginLeft": -24,
+          "marginTop": -24,
           "position": "absolute",
-          "width": 50,
+          "width": 48,
           "zIndex": 20,
         },
         {
-          "left": 33,
-          "top": 151,
+          "left": 39,
+          "top": 179,
         },
       ]
     }
@@ -398,7 +412,7 @@ exports[`renders AnalogClockHours 1`] = `
     <View
       style={
         {
-          "borderRadius": 25,
+          "borderRadius": 24,
         }
       }
     >
@@ -406,14 +420,16 @@ exports[`renders AnalogClockHours 1`] = `
         selectable={false}
         style={
           [
-            {
-              "textAlign": "left",
-            },
             {
               "color": "rgba(28, 27, 31, 1)",
               "fontFamily": "System",
+              "fontSize": 16,
               "fontWeight": "400",
-              "letterSpacing": 0,
+              "letterSpacing": 0.15,
+              "lineHeight": 24,
+            },
+            {
+              "textAlign": "left",
             },
             {
               "writingDirection": "ltr",
@@ -432,18 +448,18 @@ exports[`renders AnalogClockHours 1`] = `
       [
         {
           "alignItems": "center",
-          "borderRadius": 25,
-          "height": 50,
+          "borderRadius": 24,
+          "height": 48,
           "justifyContent": "center",
-          "marginLeft": -25,
-          "marginTop": -25,
+          "marginLeft": -24,
+          "marginTop": -24,
           "position": "absolute",
-          "width": 50,
+          "width": 48,
           "zIndex": 20,
         },
         {
-          "left": 22,
-          "top": 108,
+          "left": 26,
+          "top": 128,
         },
       ]
     }
@@ -451,7 +467,7 @@ exports[`renders AnalogClockHours 1`] = `
     <View
       style={
         {
-          "borderRadius": 25,
+          "borderRadius": 24,
         }
       }
     >
@@ -459,14 +475,16 @@ exports[`renders AnalogClockHours 1`] = `
         selectable={false}
         style={
           [
-            {
-              "textAlign": "left",
-            },
             {
               "color": "rgba(28, 27, 31, 1)",
               "fontFamily": "System",
+              "fontSize": 16,
               "fontWeight": "400",
-              "letterSpacing": 0,
+              "letterSpacing": 0.15,
+              "lineHeight": 24,
+            },
+            {
+              "textAlign": "left",
             },
             {
               "writingDirection": "ltr",
@@ -485,18 +503,18 @@ exports[`renders AnalogClockHours 1`] = `
       [
         {
           "alignItems": "center",
-          "borderRadius": 25,
-          "height": 50,
+          "borderRadius": 24,
+          "height": 48,
           "justifyContent": "center",
-          "marginLeft": -25,
-          "marginTop": -25,
+          "marginLeft": -24,
+          "marginTop": -24,
           "position": "absolute",
-          "width": 50,
+          "width": 48,
           "zIndex": 20,
         },
         {
-          "left": 33,
-          "top": 65,
+          "left": 39,
+          "top": 77,
         },
       ]
     }
@@ -504,7 +522,7 @@ exports[`renders AnalogClockHours 1`] = `
     <View
       style={
         {
-          "borderRadius": 25,
+          "borderRadius": 24,
         }
       }
     >
@@ -512,14 +530,16 @@ exports[`renders AnalogClockHours 1`] = `
         selectable={false}
         style={
           [
-            {
-              "textAlign": "left",
-            },
             {
               "color": "rgba(28, 27, 31, 1)",
               "fontFamily": "System",
+              "fontSize": 16,
               "fontWeight": "400",
-              "letterSpacing": 0,
+              "letterSpacing": 0.15,
+              "lineHeight": 24,
+            },
+            {
+              "textAlign": "left",
             },
             {
               "writingDirection": "ltr",
@@ -538,18 +558,18 @@ exports[`renders AnalogClockHours 1`] = `
       [
         {
           "alignItems": "center",
-          "borderRadius": 25,
-          "height": 50,
+          "borderRadius": 24,
+          "height": 48,
           "justifyContent": "center",
-          "marginLeft": -25,
-          "marginTop": -25,
+          "marginLeft": -24,
+          "marginTop": -24,
           "position": "absolute",
-          "width": 50,
+          "width": 48,
           "zIndex": 20,
         },
         {
-          "left": 64,
-          "top": 33,
+          "left": 77,
+          "top": 39,
         },
       ]
     }
@@ -557,7 +577,7 @@ exports[`renders AnalogClockHours 1`] = `
     <View
       style={
         {
-          "borderRadius": 25,
+          "borderRadius": 24,
         }
       }
     >
@@ -565,14 +585,16 @@ exports[`renders AnalogClockHours 1`] = `
         selectable={false}
         style={
           [
-            {
-              "textAlign": "left",
-            },
             {
               "color": "rgba(28, 27, 31, 1)",
               "fontFamily": "System",
+              "fontSize": 16,
               "fontWeight": "400",
-              "letterSpacing": 0,
+              "letterSpacing": 0.15,
+              "lineHeight": 24,
+            },
+            {
+              "textAlign": "left",
             },
             {
               "writingDirection": "ltr",
@@ -591,18 +613,18 @@ exports[`renders AnalogClockHours 1`] = `
       [
         {
           "alignItems": "center",
-          "borderRadius": 25,
-          "height": 50,
+          "borderRadius": 24,
+          "height": 48,
           "justifyContent": "center",
-          "marginLeft": -25,
-          "marginTop": -25,
+          "marginLeft": -24,
+          "marginTop": -24,
           "position": "absolute",
-          "width": 50,
+          "width": 48,
           "zIndex": 20,
         },
         {
-          "left": 107,
-          "top": 22,
+          "left": 128,
+          "top": 26,
         },
       ]
     }
@@ -610,7 +632,7 @@ exports[`renders AnalogClockHours 1`] = `
     <View
       style={
         {
-          "borderRadius": 25,
+          "borderRadius": 24,
         }
       }
     >
@@ -618,20 +640,22 @@ exports[`renders AnalogClockHours 1`] = `
         selectable={false}
         style={
           [
-            {
-              "textAlign": "left",
-            },
             {
               "color": "rgba(28, 27, 31, 1)",
               "fontFamily": "System",
+              "fontSize": 16,
               "fontWeight": "400",
-              "letterSpacing": 0,
+              "letterSpacing": 0.15,
+              "lineHeight": 24,
+            },
+            {
+              "textAlign": "left",
             },
             {
               "writingDirection": "ltr",
             },
             {
-              "color": "#fff",
+              "color": "rgba(255, 255, 255, 1)",
             },
           ]
         }
@@ -646,18 +670,18 @@ exports[`renders AnalogClockHours 1`] = `
       [
         {
           "alignItems": "center",
-          "borderRadius": 20,
-          "height": 40,
+          "borderRadius": 24,
+          "height": 48,
           "justifyContent": "center",
-          "marginLeft": -20,
-          "marginTop": -20,
+          "marginLeft": -24,
+          "marginTop": -24,
           "position": "absolute",
-          "width": 40,
+          "width": 48,
           "zIndex": 20,
         },
         {
-          "left": 134,
-          "top": 61,
+          "left": 160,
+          "top": 73,
         },
       ]
     }
@@ -665,7 +689,7 @@ exports[`renders AnalogClockHours 1`] = `
     <View
       style={
         {
-          "borderRadius": 20,
+          "borderRadius": 24,
         }
       }
     >
@@ -673,22 +697,21 @@ exports[`renders AnalogClockHours 1`] = `
         selectable={false}
         style={
           [
-            {
-              "textAlign": "left",
-            },
             {
               "color": "rgba(28, 27, 31, 1)",
               "fontFamily": "System",
+              "fontSize": 16,
               "fontWeight": "400",
-              "letterSpacing": 0,
+              "letterSpacing": 0.15,
+              "lineHeight": 24,
+            },
+            {
+              "textAlign": "left",
             },
             {
               "writingDirection": "ltr",
             },
             [
-              {
-                "fontSize": 13,
-              },
               null,
             ],
           ]
@@ -704,18 +727,18 @@ exports[`renders AnalogClockHours 1`] = `
       [
         {
           "alignItems": "center",
-          "borderRadius": 20,
-          "height": 40,
+          "borderRadius": 24,
+          "height": 48,
           "justifyContent": "center",
-          "marginLeft": -20,
-          "marginTop": -20,
+          "marginLeft": -24,
+          "marginTop": -24,
           "position": "absolute",
-          "width": 40,
+          "width": 48,
           "zIndex": 20,
         },
         {
-          "left": 154,
-          "top": 81,
+          "left": 183,
+          "top": 96,
         },
       ]
     }
@@ -723,7 +746,7 @@ exports[`renders AnalogClockHours 1`] = `
     <View
       style={
         {
-          "borderRadius": 20,
+          "borderRadius": 24,
         }
       }
     >
@@ -731,22 +754,21 @@ exports[`renders AnalogClockHours 1`] = `
         selectable={false}
         style={
           [
-            {
-              "textAlign": "left",
-            },
             {
               "color": "rgba(28, 27, 31, 1)",
               "fontFamily": "System",
+              "fontSize": 16,
               "fontWeight": "400",
-              "letterSpacing": 0,
+              "letterSpacing": 0.15,
+              "lineHeight": 24,
+            },
+            {
+              "textAlign": "left",
             },
             {
               "writingDirection": "ltr",
             },
             [
-              {
-                "fontSize": 13,
-              },
               null,
             ],
           ]
@@ -762,18 +784,18 @@ exports[`renders AnalogClockHours 1`] = `
       [
         {
           "alignItems": "center",
-          "borderRadius": 20,
-          "height": 40,
+          "borderRadius": 24,
+          "height": 48,
           "justifyContent": "center",
-          "marginLeft": -20,
-          "marginTop": -20,
+          "marginLeft": -24,
+          "marginTop": -24,
           "position": "absolute",
-          "width": 40,
+          "width": 48,
           "zIndex": 20,
         },
         {
-          "left": 161,
-          "top": 107,
+          "left": 192,
+          "top": 128,
         },
       ]
     }
@@ -781,7 +803,7 @@ exports[`renders AnalogClockHours 1`] = `
     <View
       style={
         {
-          "borderRadius": 20,
+          "borderRadius": 24,
         }
       }
     >
@@ -789,22 +811,21 @@ exports[`renders AnalogClockHours 1`] = `
         selectable={false}
         style={
           [
-            {
-              "textAlign": "left",
-            },
             {
               "color": "rgba(28, 27, 31, 1)",
               "fontFamily": "System",
+              "fontSize": 16,
               "fontWeight": "400",
-              "letterSpacing": 0,
+              "letterSpacing": 0.15,
+              "lineHeight": 24,
+            },
+            {
+              "textAlign": "left",
             },
             {
               "writingDirection": "ltr",
             },
             [
-              {
-                "fontSize": 13,
-              },
               null,
             ],
           ]
@@ -820,18 +841,18 @@ exports[`renders AnalogClockHours 1`] = `
       [
         {
           "alignItems": "center",
-          "borderRadius": 20,
-          "height": 40,
+          "borderRadius": 24,
+          "height": 48,
           "justifyContent": "center",
-          "marginLeft": -20,
-          "marginTop": -20,
+          "marginLeft": -24,
+          "marginTop": -24,
           "position": "absolute",
-          "width": 40,
+          "width": 48,
           "zIndex": 20,
         },
         {
-          "left": 154,
-          "top": 134,
+          "left": 183,
+          "top": 160,
         },
       ]
     }
@@ -839,7 +860,7 @@ exports[`renders AnalogClockHours 1`] = `
     <View
       style={
         {
-          "borderRadius": 20,
+          "borderRadius": 24,
         }
       }
     >
@@ -847,22 +868,21 @@ exports[`renders AnalogClockHours 1`] = `
         selectable={false}
         style={
           [
-            {
-              "textAlign": "left",
-            },
             {
               "color": "rgba(28, 27, 31, 1)",
               "fontFamily": "System",
+              "fontSize": 16,
               "fontWeight": "400",
-              "letterSpacing": 0,
+              "letterSpacing": 0.15,
+              "lineHeight": 24,
+            },
+            {
+              "textAlign": "left",
             },
             {
               "writingDirection": "ltr",
             },
             [
-              {
-                "fontSize": 13,
-              },
               null,
             ],
           ]
@@ -878,18 +898,18 @@ exports[`renders AnalogClockHours 1`] = `
       [
         {
           "alignItems": "center",
-          "borderRadius": 20,
-          "height": 40,
+          "borderRadius": 24,
+          "height": 48,
           "justifyContent": "center",
-          "marginLeft": -20,
-          "marginTop": -20,
+          "marginLeft": -24,
+          "marginTop": -24,
           "position": "absolute",
-          "width": 40,
+          "width": 48,
           "zIndex": 20,
         },
         {
-          "left": 134,
-          "top": 154,
+          "left": 160,
+          "top": 183,
         },
       ]
     }
@@ -897,7 +917,7 @@ exports[`renders AnalogClockHours 1`] = `
     <View
       style={
         {
-          "borderRadius": 20,
+          "borderRadius": 24,
         }
       }
     >
@@ -905,22 +925,21 @@ exports[`renders AnalogClockHours 1`] = `
         selectable={false}
         style={
           [
-            {
-              "textAlign": "left",
-            },
             {
               "color": "rgba(28, 27, 31, 1)",
               "fontFamily": "System",
+              "fontSize": 16,
               "fontWeight": "400",
-              "letterSpacing": 0,
+              "letterSpacing": 0.15,
+              "lineHeight": 24,
+            },
+            {
+              "textAlign": "left",
             },
             {
               "writingDirection": "ltr",
             },
             [
-              {
-                "fontSize": 13,
-              },
               null,
             ],
           ]
@@ -936,18 +955,18 @@ exports[`renders AnalogClockHours 1`] = `
       [
         {
           "alignItems": "center",
-          "borderRadius": 20,
-          "height": 40,
+          "borderRadius": 24,
+          "height": 48,
           "justifyContent": "center",
-          "marginLeft": -20,
-          "marginTop": -20,
+          "marginLeft": -24,
+          "marginTop": -24,
           "position": "absolute",
-          "width": 40,
+          "width": 48,
           "zIndex": 20,
         },
         {
-          "left": 108,
-          "top": 161,
+          "left": 128,
+          "top": 192,
         },
       ]
     }
@@ -955,7 +974,7 @@ exports[`renders AnalogClockHours 1`] = `
     <View
       style={
         {
-          "borderRadius": 20,
+          "borderRadius": 24,
         }
       }
     >
@@ -963,22 +982,21 @@ exports[`renders AnalogClockHours 1`] = `
         selectable={false}
         style={
           [
-            {
-              "textAlign": "left",
-            },
             {
               "color": "rgba(28, 27, 31, 1)",
               "fontFamily": "System",
+              "fontSize": 16,
               "fontWeight": "400",
-              "letterSpacing": 0,
+              "letterSpacing": 0.15,
+              "lineHeight": 24,
+            },
+            {
+              "textAlign": "left",
             },
             {
               "writingDirection": "ltr",
             },
             [
-              {
-                "fontSize": 13,
-              },
               null,
             ],
           ]
@@ -994,18 +1012,18 @@ exports[`renders AnalogClockHours 1`] = `
       [
         {
           "alignItems": "center",
-          "borderRadius": 20,
-          "height": 40,
+          "borderRadius": 24,
+          "height": 48,
           "justifyContent": "center",
-          "marginLeft": -20,
-          "marginTop": -20,
+          "marginLeft": -24,
+          "marginTop": -24,
           "position": "absolute",
-          "width": 40,
+          "width": 48,
           "zIndex": 20,
         },
         {
-          "left": 81,
-          "top": 154,
+          "left": 96,
+          "top": 183,
         },
       ]
     }
@@ -1013,7 +1031,7 @@ exports[`renders AnalogClockHours 1`] = `
     <View
       style={
         {
-          "borderRadius": 20,
+          "borderRadius": 24,
         }
       }
     >
@@ -1021,22 +1039,21 @@ exports[`renders AnalogClockHours 1`] = `
         selectable={false}
         style={
           [
-            {
-              "textAlign": "left",
-            },
             {
               "color": "rgba(28, 27, 31, 1)",
               "fontFamily": "System",
+              "fontSize": 16,
               "fontWeight": "400",
-              "letterSpacing": 0,
+              "letterSpacing": 0.15,
+              "lineHeight": 24,
+            },
+            {
+              "textAlign": "left",
             },
             {
               "writingDirection": "ltr",
             },
             [
-              {
-                "fontSize": 13,
-              },
               null,
             ],
           ]
@@ -1052,18 +1069,18 @@ exports[`renders AnalogClockHours 1`] = `
       [
         {
           "alignItems": "center",
-          "borderRadius": 20,
-          "height": 40,
+          "borderRadius": 24,
+          "height": 48,
           "justifyContent": "center",
-          "marginLeft": -20,
-          "marginTop": -20,
+          "marginLeft": -24,
+          "marginTop": -24,
           "position": "absolute",
-          "width": 40,
+          "width": 48,
           "zIndex": 20,
         },
         {
-          "left": 61,
-          "top": 134,
+          "left": 73,
+          "top": 160,
         },
       ]
     }
@@ -1071,7 +1088,7 @@ exports[`renders AnalogClockHours 1`] = `
     <View
       style={
         {
-          "borderRadius": 20,
+          "borderRadius": 24,
         }
       }
     >
@@ -1079,22 +1096,21 @@ exports[`renders AnalogClockHours 1`] = `
         selectable={false}
         style={
           [
-            {
-              "textAlign": "left",
-            },
             {
               "color": "rgba(28, 27, 31, 1)",
               "fontFamily": "System",
+              "fontSize": 16,
               "fontWeight": "400",
-              "letterSpacing": 0,
+              "letterSpacing": 0.15,
+              "lineHeight": 24,
+            },
+            {
+              "textAlign": "left",
             },
             {
               "writingDirection": "ltr",
             },
             [
-              {
-                "fontSize": 13,
-              },
               null,
             ],
           ]
@@ -1110,18 +1126,18 @@ exports[`renders AnalogClockHours 1`] = `
       [
         {
           "alignItems": "center",
-          "borderRadius": 20,
-          "height": 40,
+          "borderRadius": 24,
+          "height": 48,
           "justifyContent": "center",
-          "marginLeft": -20,
-          "marginTop": -20,
+          "marginLeft": -24,
+          "marginTop": -24,
           "position": "absolute",
-          "width": 40,
+          "width": 48,
           "zIndex": 20,
         },
         {
-          "left": 54,
-          "top": 108,
+          "left": 64,
+          "top": 128,
         },
       ]
     }
@@ -1129,7 +1145,7 @@ exports[`renders AnalogClockHours 1`] = `
     <View
       style={
         {
-          "borderRadius": 20,
+          "borderRadius": 24,
         }
       }
     >
@@ -1137,22 +1153,21 @@ exports[`renders AnalogClockHours 1`] = `
         selectable={false}
         style={
           [
-            {
-              "textAlign": "left",
-            },
             {
               "color": "rgba(28, 27, 31, 1)",
               "fontFamily": "System",
+              "fontSize": 16,
               "fontWeight": "400",
-              "letterSpacing": 0,
+              "letterSpacing": 0.15,
+              "lineHeight": 24,
+            },
+            {
+              "textAlign": "left",
             },
             {
               "writingDirection": "ltr",
             },
             [
-              {
-                "fontSize": 13,
-              },
               null,
             ],
           ]
@@ -1168,18 +1183,18 @@ exports[`renders AnalogClockHours 1`] = `
       [
         {
           "alignItems": "center",
-          "borderRadius": 20,
-          "height": 40,
+          "borderRadius": 24,
+          "height": 48,
           "justifyContent": "center",
-          "marginLeft": -20,
-          "marginTop": -20,
+          "marginLeft": -24,
+          "marginTop": -24,
           "position": "absolute",
-          "width": 40,
+          "width": 48,
           "zIndex": 20,
         },
         {
-          "left": 61,
-          "top": 81,
+          "left": 73,
+          "top": 96,
         },
       ]
     }
@@ -1187,7 +1202,7 @@ exports[`renders AnalogClockHours 1`] = `
     <View
       style={
         {
-          "borderRadius": 20,
+          "borderRadius": 24,
         }
       }
     >
@@ -1195,22 +1210,21 @@ exports[`renders AnalogClockHours 1`] = `
         selectable={false}
         style={
           [
-            {
-              "textAlign": "left",
-            },
             {
               "color": "rgba(28, 27, 31, 1)",
               "fontFamily": "System",
+              "fontSize": 16,
               "fontWeight": "400",
-              "letterSpacing": 0,
+              "letterSpacing": 0.15,
+              "lineHeight": 24,
+            },
+            {
+              "textAlign": "left",
             },
             {
               "writingDirection": "ltr",
             },
             [
-              {
-                "fontSize": 13,
-              },
               null,
             ],
           ]
@@ -1226,18 +1240,18 @@ exports[`renders AnalogClockHours 1`] = `
       [
         {
           "alignItems": "center",
-          "borderRadius": 20,
-          "height": 40,
+          "borderRadius": 24,
+          "height": 48,
           "justifyContent": "center",
-          "marginLeft": -20,
-          "marginTop": -20,
+          "marginLeft": -24,
+          "marginTop": -24,
           "position": "absolute",
-          "width": 40,
+          "width": 48,
           "zIndex": 20,
         },
         {
-          "left": 81,
-          "top": 61,
+          "left": 96,
+          "top": 73,
         },
       ]
     }
@@ -1245,7 +1259,7 @@ exports[`renders AnalogClockHours 1`] = `
     <View
       style={
         {
-          "borderRadius": 20,
+          "borderRadius": 24,
         }
       }
     >
@@ -1253,22 +1267,21 @@ exports[`renders AnalogClockHours 1`] = `
         selectable={false}
         style={
           [
-            {
-              "textAlign": "left",
-            },
             {
               "color": "rgba(28, 27, 31, 1)",
               "fontFamily": "System",
+              "fontSize": 16,
               "fontWeight": "400",
-              "letterSpacing": 0,
+              "letterSpacing": 0.15,
+              "lineHeight": 24,
+            },
+            {
+              "textAlign": "left",
             },
             {
               "writingDirection": "ltr",
             },
             [
-              {
-                "fontSize": 13,
-              },
               null,
             ],
           ]
@@ -1284,18 +1297,18 @@ exports[`renders AnalogClockHours 1`] = `
       [
         {
           "alignItems": "center",
-          "borderRadius": 20,
-          "height": 40,
+          "borderRadius": 24,
+          "height": 48,
           "justifyContent": "center",
-          "marginLeft": -20,
-          "marginTop": -20,
+          "marginLeft": -24,
+          "marginTop": -24,
           "position": "absolute",
-          "width": 40,
+          "width": 48,
           "zIndex": 20,
         },
         {
-          "left": 107,
-          "top": 54,
+          "left": 128,
+          "top": 64,
         },
       ]
     }
@@ -1303,7 +1316,7 @@ exports[`renders AnalogClockHours 1`] = `
     <View
       style={
         {
-          "borderRadius": 20,
+          "borderRadius": 24,
         }
       }
     >
@@ -1311,22 +1324,21 @@ exports[`renders AnalogClockHours 1`] = `
         selectable={false}
         style={
           [
-            {
-              "textAlign": "left",
-            },
             {
               "color": "rgba(28, 27, 31, 1)",
               "fontFamily": "System",
+              "fontSize": 16,
               "fontWeight": "400",
-              "letterSpacing": 0,
+              "letterSpacing": 0.15,
+              "lineHeight": 24,
+            },
+            {
+              "textAlign": "left",
             },
             {
               "writingDirection": "ltr",
             },
             [
-              {
-                "fontSize": 13,
-              },
               null,
             ],
           ]
diff --git a/src/__tests__/Time/__snapshots__/AnalogClockMinutes.test.tsx.snap b/src/__tests__/Time/__snapshots__/AnalogClockMinutes.test.tsx.snap
index f37756e0..a91adb7a 100644
--- a/src/__tests__/Time/__snapshots__/AnalogClockMinutes.test.tsx.snap
+++ b/src/__tests__/Time/__snapshots__/AnalogClockMinutes.test.tsx.snap
@@ -8,18 +8,18 @@ exports[`renders AnalogClockMinutes 1`] = `
       [
         {
           "alignItems": "center",
-          "borderRadius": 25,
-          "height": 50,
+          "borderRadius": 24,
+          "height": 48,
           "justifyContent": "center",
-          "marginLeft": -25,
-          "marginTop": -25,
+          "marginLeft": -24,
+          "marginTop": -24,
           "position": "absolute",
-          "width": 50,
+          "width": 48,
           "zIndex": 20,
         },
         {
-          "left": 108,
-          "top": 22,
+          "left": 128,
+          "top": 26,
         },
       ]
     }
@@ -27,7 +27,7 @@ exports[`renders AnalogClockMinutes 1`] = `
     <View
       style={
         {
-          "borderRadius": 25,
+          "borderRadius": 24,
         }
       }
     >
@@ -35,14 +35,16 @@ exports[`renders AnalogClockMinutes 1`] = `
         selectable={false}
         style={
           [
-            {
-              "textAlign": "left",
-            },
             {
               "color": "rgba(28, 27, 31, 1)",
               "fontFamily": "System",
+              "fontSize": 16,
               "fontWeight": "400",
-              "letterSpacing": 0,
+              "letterSpacing": 0.15,
+              "lineHeight": 24,
+            },
+            {
+              "textAlign": "left",
             },
             {
               "writingDirection": "ltr",
@@ -61,18 +63,18 @@ exports[`renders AnalogClockMinutes 1`] = `
       [
         {
           "alignItems": "center",
-          "borderRadius": 25,
-          "height": 50,
+          "borderRadius": 24,
+          "height": 48,
           "justifyContent": "center",
-          "marginLeft": -25,
-          "marginTop": -25,
+          "marginLeft": -24,
+          "marginTop": -24,
           "position": "absolute",
-          "width": 50,
+          "width": 48,
           "zIndex": 20,
         },
         {
-          "left": 151,
-          "top": 33,
+          "left": 179,
+          "top": 39,
         },
       ]
     }
@@ -80,7 +82,7 @@ exports[`renders AnalogClockMinutes 1`] = `
     <View
       style={
         {
-          "borderRadius": 25,
+          "borderRadius": 24,
         }
       }
     >
@@ -88,14 +90,16 @@ exports[`renders AnalogClockMinutes 1`] = `
         selectable={false}
         style={
           [
-            {
-              "textAlign": "left",
-            },
             {
               "color": "rgba(28, 27, 31, 1)",
               "fontFamily": "System",
+              "fontSize": 16,
               "fontWeight": "400",
-              "letterSpacing": 0,
+              "letterSpacing": 0.15,
+              "lineHeight": 24,
+            },
+            {
+              "textAlign": "left",
             },
             {
               "writingDirection": "ltr",
@@ -114,18 +118,18 @@ exports[`renders AnalogClockMinutes 1`] = `
       [
         {
           "alignItems": "center",
-          "borderRadius": 25,
-          "height": 50,
+          "borderRadius": 24,
+          "height": 48,
           "justifyContent": "center",
-          "marginLeft": -25,
-          "marginTop": -25,
+          "marginLeft": -24,
+          "marginTop": -24,
           "position": "absolute",
-          "width": 50,
+          "width": 48,
           "zIndex": 20,
         },
         {
-          "left": 182,
-          "top": 65,
+          "left": 217,
+          "top": 77,
         },
       ]
     }
@@ -133,7 +137,7 @@ exports[`renders AnalogClockMinutes 1`] = `
     <View
       style={
         {
-          "borderRadius": 25,
+          "borderRadius": 24,
         }
       }
     >
@@ -141,14 +145,16 @@ exports[`renders AnalogClockMinutes 1`] = `
         selectable={false}
         style={
           [
-            {
-              "textAlign": "left",
-            },
             {
               "color": "rgba(28, 27, 31, 1)",
               "fontFamily": "System",
+              "fontSize": 16,
               "fontWeight": "400",
-              "letterSpacing": 0,
+              "letterSpacing": 0.15,
+              "lineHeight": 24,
+            },
+            {
+              "textAlign": "left",
             },
             {
               "writingDirection": "ltr",
@@ -167,18 +173,18 @@ exports[`renders AnalogClockMinutes 1`] = `
       [
         {
           "alignItems": "center",
-          "borderRadius": 25,
-          "height": 50,
+          "borderRadius": 24,
+          "height": 48,
           "justifyContent": "center",
-          "marginLeft": -25,
-          "marginTop": -25,
+          "marginLeft": -24,
+          "marginTop": -24,
           "position": "absolute",
-          "width": 50,
+          "width": 48,
           "zIndex": 20,
         },
         {
-          "left": 194,
-          "top": 107,
+          "left": 230,
+          "top": 128,
         },
       ]
     }
@@ -186,7 +192,7 @@ exports[`renders AnalogClockMinutes 1`] = `
     <View
       style={
         {
-          "borderRadius": 25,
+          "borderRadius": 24,
         }
       }
     >
@@ -194,14 +200,16 @@ exports[`renders AnalogClockMinutes 1`] = `
         selectable={false}
         style={
           [
-            {
-              "textAlign": "left",
-            },
             {
               "color": "rgba(28, 27, 31, 1)",
               "fontFamily": "System",
+              "fontSize": 16,
               "fontWeight": "400",
-              "letterSpacing": 0,
+              "letterSpacing": 0.15,
+              "lineHeight": 24,
+            },
+            {
+              "textAlign": "left",
             },
             {
               "writingDirection": "ltr",
@@ -220,18 +228,18 @@ exports[`renders AnalogClockMinutes 1`] = `
       [
         {
           "alignItems": "center",
-          "borderRadius": 25,
-          "height": 50,
+          "borderRadius": 24,
+          "height": 48,
           "justifyContent": "center",
-          "marginLeft": -25,
-          "marginTop": -25,
+          "marginLeft": -24,
+          "marginTop": -24,
           "position": "absolute",
-          "width": 50,
+          "width": 48,
           "zIndex": 20,
         },
         {
-          "left": 182,
-          "top": 150,
+          "left": 217,
+          "top": 179,
         },
       ]
     }
@@ -239,7 +247,7 @@ exports[`renders AnalogClockMinutes 1`] = `
     <View
       style={
         {
-          "borderRadius": 25,
+          "borderRadius": 24,
         }
       }
     >
@@ -247,14 +255,16 @@ exports[`renders AnalogClockMinutes 1`] = `
         selectable={false}
         style={
           [
-            {
-              "textAlign": "left",
-            },
             {
               "color": "rgba(28, 27, 31, 1)",
               "fontFamily": "System",
+              "fontSize": 16,
               "fontWeight": "400",
-              "letterSpacing": 0,
+              "letterSpacing": 0.15,
+              "lineHeight": 24,
+            },
+            {
+              "textAlign": "left",
             },
             {
               "writingDirection": "ltr",
@@ -273,18 +283,18 @@ exports[`renders AnalogClockMinutes 1`] = `
       [
         {
           "alignItems": "center",
-          "borderRadius": 25,
-          "height": 50,
+          "borderRadius": 24,
+          "height": 48,
           "justifyContent": "center",
-          "marginLeft": -25,
-          "marginTop": -25,
+          "marginLeft": -24,
+          "marginTop": -24,
           "position": "absolute",
-          "width": 50,
+          "width": 48,
           "zIndex": 20,
         },
         {
-          "left": 151,
-          "top": 182,
+          "left": 179,
+          "top": 217,
         },
       ]
     }
@@ -292,7 +302,7 @@ exports[`renders AnalogClockMinutes 1`] = `
     <View
       style={
         {
-          "borderRadius": 25,
+          "borderRadius": 24,
         }
       }
     >
@@ -300,14 +310,16 @@ exports[`renders AnalogClockMinutes 1`] = `
         selectable={false}
         style={
           [
-            {
-              "textAlign": "left",
-            },
             {
               "color": "rgba(28, 27, 31, 1)",
               "fontFamily": "System",
+              "fontSize": 16,
               "fontWeight": "400",
-              "letterSpacing": 0,
+              "letterSpacing": 0.15,
+              "lineHeight": 24,
+            },
+            {
+              "textAlign": "left",
             },
             {
               "writingDirection": "ltr",
@@ -326,18 +338,18 @@ exports[`renders AnalogClockMinutes 1`] = `
       [
         {
           "alignItems": "center",
-          "borderRadius": 25,
-          "height": 50,
+          "borderRadius": 24,
+          "height": 48,
           "justifyContent": "center",
-          "marginLeft": -25,
-          "marginTop": -25,
+          "marginLeft": -24,
+          "marginTop": -24,
           "position": "absolute",
-          "width": 50,
+          "width": 48,
           "zIndex": 20,
         },
         {
-          "left": 108,
-          "top": 194,
+          "left": 128,
+          "top": 230,
         },
       ]
     }
@@ -345,7 +357,7 @@ exports[`renders AnalogClockMinutes 1`] = `
     <View
       style={
         {
-          "borderRadius": 25,
+          "borderRadius": 24,
         }
       }
     >
@@ -353,14 +365,16 @@ exports[`renders AnalogClockMinutes 1`] = `
         selectable={false}
         style={
           [
-            {
-              "textAlign": "left",
-            },
             {
               "color": "rgba(28, 27, 31, 1)",
               "fontFamily": "System",
+              "fontSize": 16,
               "fontWeight": "400",
-              "letterSpacing": 0,
+              "letterSpacing": 0.15,
+              "lineHeight": 24,
+            },
+            {
+              "textAlign": "left",
             },
             {
               "writingDirection": "ltr",
@@ -379,18 +393,18 @@ exports[`renders AnalogClockMinutes 1`] = `
       [
         {
           "alignItems": "center",
-          "borderRadius": 25,
-          "height": 50,
+          "borderRadius": 24,
+          "height": 48,
           "justifyContent": "center",
-          "marginLeft": -25,
-          "marginTop": -25,
+          "marginLeft": -24,
+          "marginTop": -24,
           "position": "absolute",
-          "width": 50,
+          "width": 48,
           "zIndex": 20,
         },
         {
-          "left": 65,
-          "top": 182,
+          "left": 77,
+          "top": 217,
         },
       ]
     }
@@ -398,7 +412,7 @@ exports[`renders AnalogClockMinutes 1`] = `
     <View
       style={
         {
-          "borderRadius": 25,
+          "borderRadius": 24,
         }
       }
     >
@@ -406,14 +420,16 @@ exports[`renders AnalogClockMinutes 1`] = `
         selectable={false}
         style={
           [
-            {
-              "textAlign": "left",
-            },
             {
               "color": "rgba(28, 27, 31, 1)",
               "fontFamily": "System",
+              "fontSize": 16,
               "fontWeight": "400",
-              "letterSpacing": 0,
+              "letterSpacing": 0.15,
+              "lineHeight": 24,
+            },
+            {
+              "textAlign": "left",
             },
             {
               "writingDirection": "ltr",
@@ -432,18 +448,18 @@ exports[`renders AnalogClockMinutes 1`] = `
       [
         {
           "alignItems": "center",
-          "borderRadius": 25,
-          "height": 50,
+          "borderRadius": 24,
+          "height": 48,
           "justifyContent": "center",
-          "marginLeft": -25,
-          "marginTop": -25,
+          "marginLeft": -24,
+          "marginTop": -24,
           "position": "absolute",
-          "width": 50,
+          "width": 48,
           "zIndex": 20,
         },
         {
-          "left": 33,
-          "top": 151,
+          "left": 39,
+          "top": 179,
         },
       ]
     }
@@ -451,7 +467,7 @@ exports[`renders AnalogClockMinutes 1`] = `
     <View
       style={
         {
-          "borderRadius": 25,
+          "borderRadius": 24,
         }
       }
     >
@@ -459,14 +475,16 @@ exports[`renders AnalogClockMinutes 1`] = `
         selectable={false}
         style={
           [
-            {
-              "textAlign": "left",
-            },
             {
               "color": "rgba(28, 27, 31, 1)",
               "fontFamily": "System",
+              "fontSize": 16,
               "fontWeight": "400",
-              "letterSpacing": 0,
+              "letterSpacing": 0.15,
+              "lineHeight": 24,
+            },
+            {
+              "textAlign": "left",
             },
             {
               "writingDirection": "ltr",
@@ -485,18 +503,18 @@ exports[`renders AnalogClockMinutes 1`] = `
       [
         {
           "alignItems": "center",
-          "borderRadius": 25,
-          "height": 50,
+          "borderRadius": 24,
+          "height": 48,
           "justifyContent": "center",
-          "marginLeft": -25,
-          "marginTop": -25,
+          "marginLeft": -24,
+          "marginTop": -24,
           "position": "absolute",
-          "width": 50,
+          "width": 48,
           "zIndex": 20,
         },
         {
-          "left": 22,
-          "top": 108,
+          "left": 26,
+          "top": 128,
         },
       ]
     }
@@ -504,7 +522,7 @@ exports[`renders AnalogClockMinutes 1`] = `
     <View
       style={
         {
-          "borderRadius": 25,
+          "borderRadius": 24,
         }
       }
     >
@@ -512,20 +530,22 @@ exports[`renders AnalogClockMinutes 1`] = `
         selectable={false}
         style={
           [
-            {
-              "textAlign": "left",
-            },
             {
               "color": "rgba(28, 27, 31, 1)",
               "fontFamily": "System",
+              "fontSize": 16,
               "fontWeight": "400",
-              "letterSpacing": 0,
+              "letterSpacing": 0.15,
+              "lineHeight": 24,
+            },
+            {
+              "textAlign": "left",
             },
             {
               "writingDirection": "ltr",
             },
             {
-              "color": "#fff",
+              "color": "rgba(255, 255, 255, 1)",
             },
           ]
         }
@@ -540,18 +560,18 @@ exports[`renders AnalogClockMinutes 1`] = `
       [
         {
           "alignItems": "center",
-          "borderRadius": 25,
-          "height": 50,
+          "borderRadius": 24,
+          "height": 48,
           "justifyContent": "center",
-          "marginLeft": -25,
-          "marginTop": -25,
+          "marginLeft": -24,
+          "marginTop": -24,
           "position": "absolute",
-          "width": 50,
+          "width": 48,
           "zIndex": 20,
         },
         {
-          "left": 33,
-          "top": 65,
+          "left": 39,
+          "top": 77,
         },
       ]
     }
@@ -559,7 +579,7 @@ exports[`renders AnalogClockMinutes 1`] = `
     <View
       style={
         {
-          "borderRadius": 25,
+          "borderRadius": 24,
         }
       }
     >
@@ -567,14 +587,16 @@ exports[`renders AnalogClockMinutes 1`] = `
         selectable={false}
         style={
           [
-            {
-              "textAlign": "left",
-            },
             {
               "color": "rgba(28, 27, 31, 1)",
               "fontFamily": "System",
+              "fontSize": 16,
               "fontWeight": "400",
-              "letterSpacing": 0,
+              "letterSpacing": 0.15,
+              "lineHeight": 24,
+            },
+            {
+              "textAlign": "left",
             },
             {
               "writingDirection": "ltr",
@@ -593,18 +615,18 @@ exports[`renders AnalogClockMinutes 1`] = `
       [
         {
           "alignItems": "center",
-          "borderRadius": 25,
-          "height": 50,
+          "borderRadius": 24,
+          "height": 48,
           "justifyContent": "center",
-          "marginLeft": -25,
-          "marginTop": -25,
+          "marginLeft": -24,
+          "marginTop": -24,
           "position": "absolute",
-          "width": 50,
+          "width": 48,
           "zIndex": 20,
         },
         {
-          "left": 64,
-          "top": 33,
+          "left": 77,
+          "top": 39,
         },
       ]
     }
@@ -612,7 +634,7 @@ exports[`renders AnalogClockMinutes 1`] = `
     <View
       style={
         {
-          "borderRadius": 25,
+          "borderRadius": 24,
         }
       }
     >
@@ -620,14 +642,16 @@ exports[`renders AnalogClockMinutes 1`] = `
         selectable={false}
         style={
           [
-            {
-              "textAlign": "left",
-            },
             {
               "color": "rgba(28, 27, 31, 1)",
               "fontFamily": "System",
+              "fontSize": 16,
               "fontWeight": "400",
-              "letterSpacing": 0,
+              "letterSpacing": 0.15,
+              "lineHeight": 24,
+            },
+            {
+              "textAlign": "left",
             },
             {
               "writingDirection": "ltr",
diff --git a/src/__tests__/Time/__snapshots__/TimeInput.test.tsx.snap b/src/__tests__/Time/__snapshots__/TimeInput.test.tsx.snap
index 84985a88..4ec88cca 100644
--- a/src/__tests__/Time/__snapshots__/TimeInput.test.tsx.snap
+++ b/src/__tests__/Time/__snapshots__/TimeInput.test.tsx.snap
@@ -20,16 +20,18 @@ exports[`renders TimeInput 1`] = `
     style={
       [
         {
-          "fontSize": 50,
-          "height": 80,
+          "fontSize": 57,
           "textAlign": "center",
           "textAlignVertical": "center",
           "width": 96,
         },
         {
-          "backgroundColor": "#EADDFF",
-          "borderRadius": 4,
-          "color": "rgba(103, 80, 164, 1)",
+          "backgroundColor": "rgba(232, 222, 248, 1)",
+          "borderColor": "rgba(33, 0, 93, 1)",
+          "borderRadius": 8,
+          "borderWidth": 2,
+          "color": "rgba(33, 0, 93, 1)",
+          "height": 80,
         },
       ]
     }
diff --git a/src/__tests__/Time/__snapshots__/TimeInputs.test.tsx.snap b/src/__tests__/Time/__snapshots__/TimeInputs.test.tsx.snap
index cc90c3d4..17c42666 100644
--- a/src/__tests__/Time/__snapshots__/TimeInputs.test.tsx.snap
+++ b/src/__tests__/Time/__snapshots__/TimeInputs.test.tsx.snap
@@ -15,50 +15,88 @@ exports[`renders TimeInputs 1`] = `
   <View
     style={
       {
-        "height": 80,
-        "position": "relative",
-        "width": 96,
+        "flexDirection": "column",
       }
     }
   >
-    <TextInput
-      blurOnSubmit={false}
-      keyboardAppearance="default"
-      keyboardType="number-pad"
-      maxLength={2}
-      onBlur={[Function]}
-      onChangeText={[Function]}
-      onFocus={[Function]}
-      onSubmitEditing={[Function]}
-      placeholder="00"
-      returnKeyType="next"
-      selectionColor="rgba(103, 80, 164, 1)"
+    <View
+      style={
+        {
+          "height": 80,
+          "position": "relative",
+          "width": 96,
+        }
+      }
+    >
+      <TextInput
+        blurOnSubmit={false}
+        keyboardAppearance="default"
+        keyboardType="number-pad"
+        maxLength={2}
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        onSubmitEditing={[Function]}
+        placeholder="00"
+        returnKeyType="next"
+        selectionColor="rgba(103, 80, 164, 1)"
+        style={
+          [
+            {
+              "fontSize": 57,
+              "textAlign": "center",
+              "textAlignVertical": "center",
+              "width": 96,
+            },
+            {
+              "backgroundColor": "rgba(231, 224, 236, 1)",
+              "borderColor": undefined,
+              "borderRadius": 8,
+              "borderWidth": 0,
+              "color": "rgba(28, 27, 31, 1)",
+              "height": 72,
+            },
+          ]
+        }
+        value="12"
+      />
+    </View>
+    <Text
       style={
         [
           {
-            "fontSize": 50,
-            "height": 80,
-            "textAlign": "center",
-            "textAlignVertical": "center",
-            "width": 96,
+            "color": "rgba(28, 27, 31, 1)",
+            "fontFamily": "System",
+            "fontSize": 12,
+            "fontWeight": "400",
+            "letterSpacing": 0.4,
+            "lineHeight": 16,
+          },
+          {
+            "textAlign": "left",
           },
           {
-            "backgroundColor": "#E6E5E7",
-            "borderRadius": 4,
-            "color": "rgba(28, 27, 31, 1)",
+            "writingDirection": "ltr",
           },
+          undefined,
         ]
       }
-      value="12"
-    />
+    >
+      Hour
+    </Text>
   </View>
   <View
     style={
-      {
-        "alignItems": "center",
-        "fontSize": 65,
-        "width": 24,
-      }
+      [
+        {
+          "alignItems": "center",
+          "fontSize": 65,
+          "width": 24,
+        },
+        {
+          "marginBottom": 24,
+        },
+      ]
     }
   >
     <View
@@ -114,40 +152,73 @@ exports[`renders TimeInputs 1`] = `
   <View
     style={
       {
-        "height": 80,
-        "position": "relative",
-        "width": 96,
+        "flexDirection": "column",
       }
     }
   >
-    <TextInput
-      keyboardAppearance="default"
-      keyboardType="number-pad"
-      maxLength={2}
-      onBlur={[Function]}
-      onChangeText={[Function]}
-      onFocus={[Function]}
-      onSubmitEditing={[Function]}
-      placeholder="00"
-      selectionColor="rgba(103, 80, 164, 1)"
+    <View
+      style={
+        {
+          "height": 80,
+          "position": "relative",
+          "width": 96,
+        }
+      }
+    >
+      <TextInput
+        keyboardAppearance="default"
+        keyboardType="number-pad"
+        maxLength={2}
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        onSubmitEditing={[Function]}
+        placeholder="00"
+        selectionColor="rgba(103, 80, 164, 1)"
+        style={
+          [
+            {
+              "fontSize": 57,
+              "textAlign": "center",
+              "textAlignVertical": "center",
+              "width": 96,
+            },
+            {
+              "backgroundColor": "rgba(231, 224, 236, 1)",
+              "borderColor": undefined,
+              "borderRadius": 8,
+              "borderWidth": 0,
+              "color": "rgba(28, 27, 31, 1)",
+              "height": 72,
+            },
+          ]
+        }
+        value="45"
+      />
+    </View>
+    <Text
       style={
         [
           {
-            "fontSize": 50,
-            "height": 80,
-            "textAlign": "center",
-            "textAlignVertical": "center",
-            "width": 96,
+            "color": "rgba(28, 27, 31, 1)",
+            "fontFamily": "System",
+            "fontSize": 12,
+            "fontWeight": "400",
+            "letterSpacing": 0.4,
+            "lineHeight": 16,
           },
           {
-            "backgroundColor": "#E6E5E7",
-            "borderRadius": 4,
-            "color": "rgba(28, 27, 31, 1)",
+            "textAlign": "left",
           },
+          {
+            "writingDirection": "ltr",
+          },
+          undefined,
         ]
       }
-      value="45"
-    />
+    >
+      Minute
+    </Text>
   </View>
 </View>
 `;
diff --git a/src/__tests__/Time/__snapshots__/TimePicker.test.tsx.snap b/src/__tests__/Time/__snapshots__/TimePicker.test.tsx.snap
index 60ba7a5e..c39bc492 100644
--- a/src/__tests__/Time/__snapshots__/TimePicker.test.tsx.snap
+++ b/src/__tests__/Time/__snapshots__/TimePicker.test.tsx.snap
@@ -23,50 +23,88 @@ exports[`renders TimePicker 1`] = `
     <View
       style={
         {
-          "height": 80,
-          "position": "relative",
-          "width": 96,
+          "flexDirection": "column",
         }
       }
     >
-      <TextInput
-        blurOnSubmit={false}
-        keyboardAppearance="default"
-        keyboardType="number-pad"
-        maxLength={2}
-        onBlur={[Function]}
-        onChangeText={[Function]}
-        onFocus={[Function]}
-        onSubmitEditing={[Function]}
-        placeholder="00"
-        returnKeyType="next"
-        selectionColor="rgba(103, 80, 164, 1)"
+      <View
+        style={
+          {
+            "height": 80,
+            "position": "relative",
+            "width": 96,
+          }
+        }
+      >
+        <TextInput
+          blurOnSubmit={false}
+          keyboardAppearance="default"
+          keyboardType="number-pad"
+          maxLength={2}
+          onBlur={[Function]}
+          onChangeText={[Function]}
+          onFocus={[Function]}
+          onSubmitEditing={[Function]}
+          placeholder="00"
+          returnKeyType="next"
+          selectionColor="rgba(103, 80, 164, 1)"
+          style={
+            [
+              {
+                "fontSize": 57,
+                "textAlign": "center",
+                "textAlignVertical": "center",
+                "width": 96,
+              },
+              {
+                "backgroundColor": "rgba(231, 224, 236, 1)",
+                "borderColor": undefined,
+                "borderRadius": 8,
+                "borderWidth": 0,
+                "color": "rgba(28, 27, 31, 1)",
+                "height": 72,
+              },
+            ]
+          }
+          value="06"
+        />
+      </View>
+      <Text
         style={
           [
             {
-              "fontSize": 50,
-              "height": 80,
-              "textAlign": "center",
-              "textAlignVertical": "center",
-              "width": 96,
+              "color": "rgba(28, 27, 31, 1)",
+              "fontFamily": "System",
+              "fontSize": 12,
+              "fontWeight": "400",
+              "letterSpacing": 0.4,
+              "lineHeight": 16,
+            },
+            {
+              "textAlign": "left",
             },
             {
-              "backgroundColor": "#E6E5E7",
-              "borderRadius": 4,
-              "color": "rgba(28, 27, 31, 1)",
+              "writingDirection": "ltr",
             },
+            undefined,
           ]
         }
-        value="06"
-      />
+      >
+        Hour
+      </Text>
     </View>
     <View
       style={
-        {
-          "alignItems": "center",
-          "fontSize": 65,
-          "width": 24,
-        }
+        [
+          {
+            "alignItems": "center",
+            "fontSize": 65,
+            "width": 24,
+          },
+          {
+            "marginBottom": 24,
+          },
+        ]
       }
     >
       <View
@@ -122,40 +160,73 @@ exports[`renders TimePicker 1`] = `
     <View
       style={
         {
-          "height": 80,
-          "position": "relative",
-          "width": 96,
+          "flexDirection": "column",
         }
       }
     >
-      <TextInput
-        keyboardAppearance="default"
-        keyboardType="number-pad"
-        maxLength={2}
-        onBlur={[Function]}
-        onChangeText={[Function]}
-        onFocus={[Function]}
-        onSubmitEditing={[Function]}
-        placeholder="00"
-        selectionColor="rgba(103, 80, 164, 1)"
+      <View
+        style={
+          {
+            "height": 80,
+            "position": "relative",
+            "width": 96,
+          }
+        }
+      >
+        <TextInput
+          keyboardAppearance="default"
+          keyboardType="number-pad"
+          maxLength={2}
+          onBlur={[Function]}
+          onChangeText={[Function]}
+          onFocus={[Function]}
+          onSubmitEditing={[Function]}
+          placeholder="00"
+          selectionColor="rgba(103, 80, 164, 1)"
+          style={
+            [
+              {
+                "fontSize": 57,
+                "textAlign": "center",
+                "textAlignVertical": "center",
+                "width": 96,
+              },
+              {
+                "backgroundColor": "rgba(231, 224, 236, 1)",
+                "borderColor": undefined,
+                "borderRadius": 8,
+                "borderWidth": 0,
+                "color": "rgba(28, 27, 31, 1)",
+                "height": 72,
+              },
+            ]
+          }
+          value="30"
+        />
+      </View>
+      <Text
         style={
           [
             {
-              "fontSize": 50,
-              "height": 80,
-              "textAlign": "center",
-              "textAlignVertical": "center",
-              "width": 96,
+              "color": "rgba(28, 27, 31, 1)",
+              "fontFamily": "System",
+              "fontSize": 12,
+              "fontWeight": "400",
+              "letterSpacing": 0.4,
+              "lineHeight": 16,
+            },
+            {
+              "textAlign": "left",
             },
             {
-              "backgroundColor": "#E6E5E7",
-              "borderRadius": 4,
-              "color": "rgba(28, 27, 31, 1)",
+              "writingDirection": "ltr",
             },
+            undefined,
           ]
         }
-        value="30"
-      />
+      >
+        Minute
+      </Text>
     </View>
     <View
       style={
@@ -169,13 +240,14 @@ exports[`renders TimePicker 1`] = `
         [
           {
             "borderWidth": 1,
-            "height": 80,
             "overflow": "hidden",
-            "width": 50,
+            "width": 52,
           },
           {
-            "borderColor": "#E0D2E0",
-            "borderRadius": 4,
+            "borderColor": "rgba(121, 116, 126, 1)",
+            "borderRadius": 8,
+            "height": 72,
+            "marginBottom": 24,
           },
         ]
       }
@@ -246,10 +318,10 @@ exports[`renders TimePicker 1`] = `
                   {
                     "color": "rgba(73, 69, 79, 1)",
                     "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "400",
-                    "letterSpacing": 0.25,
-                    "lineHeight": 20,
+                    "fontSize": 16,
+                    "fontWeight": "500",
+                    "letterSpacing": 0.15,
+                    "lineHeight": 24,
                   },
                 ],
               ]
@@ -264,10 +336,10 @@ exports[`renders TimePicker 1`] = `
           [
             {
               "height": 1,
-              "width": 48,
+              "width": 52,
             },
             {
-              "backgroundColor": "#E0D2E0",
+              "backgroundColor": "rgba(121, 116, 126, 1)",
             },
           ]
         }
@@ -341,12 +413,12 @@ exports[`renders TimePicker 1`] = `
                 },
                 [
                   {
-                    "color": "rgba(103, 80, 164, 1)",
+                    "color": "rgba(73, 69, 79, 1)",
                     "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "400",
-                    "letterSpacing": 0.25,
-                    "lineHeight": 20,
+                    "fontSize": 16,
+                    "fontWeight": "500",
+                    "letterSpacing": 0.15,
+                    "lineHeight": 24,
                   },
                 ],
               ]
diff --git a/src/utils.ts b/src/utils.ts
index ab7d380e..69adf757 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -39,6 +39,15 @@ export function useHeaderTextColor() {
 export function useTextColorOnPrimary() {
   const theme = useTheme()
   const isDark = !Color(theme.colors.primary).isLight()
+
+  if (theme.isV3) {
+    if (isDark && theme.dark) {
+      return theme.colors.onSurface
+    } else {
+      return theme.colors.onPrimary
+    }
+  }
+
   return isDark ? '#fff' : '#000'
 }