diff --git a/packages/vuetify/src/components/VTimePicker/VTimePickerControls.sass b/packages/vuetify/src/components/VTimePicker/VTimePickerControls.sass
index 6533f48326c..2451fe69832 100644
--- a/packages/vuetify/src/components/VTimePicker/VTimePickerControls.sass
+++ b/packages/vuetify/src/components/VTimePicker/VTimePickerControls.sass
@@ -45,6 +45,18 @@
         height: $time-picker-controls-seconds-btn-height
         font-size: $time-picker-controls-btn-font
 
+    &--density-compact
+      .v-time-picker-controls__time__separator
+        font-size: 16px
+        font-weight: bold
+        height: 24px
+
+    &--density-comfortable
+      .v-time-picker-controls__time__separator
+        font-size: 18px
+        font-weight: bold
+        height: 28px
+
   .v-time-picker-controls__ampm
     margin-left: 12px
     align-self: flex-end
diff --git a/packages/vuetify/src/components/VTimePicker/VTimePickerControls.tsx b/packages/vuetify/src/components/VTimePicker/VTimePickerControls.tsx
index 464e90a6498..4967fa2b1a5 100644
--- a/packages/vuetify/src/components/VTimePicker/VTimePickerControls.tsx
+++ b/packages/vuetify/src/components/VTimePicker/VTimePickerControls.tsx
@@ -6,6 +6,7 @@ import { pad } from './util'
 import { VBtn } from '@/components/VBtn'
 
 // Composables
+import { makeDensityProps, useDensity } from '@/composables/density'
 import { useLocale } from '@/composables/locale'
 
 // Utilities
@@ -28,6 +29,7 @@ export const makeVTimePickerControlsProps = propsFactory({
   useSeconds: Boolean,
   value: Number,
   viewMode: String as PropType<VTimePickerViewMode>,
+  ...makeDensityProps(),
 }, 'VTimePickerControls')
 
 export const VTimePickerControls = genericComponent()({
@@ -42,6 +44,7 @@ export const VTimePickerControls = genericComponent()({
 
   setup (props, { emit, slots }) {
     const { t } = useLocale()
+    const { densityClasses } = useDensity(props)
 
     useRender(() => {
       let hour = props.hour
@@ -51,10 +54,12 @@ export const VTimePickerControls = genericComponent()({
       return (
         <div class="v-time-picker-controls">
           <div
-            class={{
+            class={[{
               'v-time-picker-controls__time': true,
               'v-time-picker-controls__time--with-seconds': props.useSeconds,
-            }}
+            },
+            densityClasses.value,
+            ]}
           >
             <VBtn
               active={ props.viewMode === 'hour' }