diff --git a/crabfit-frontend/src/components/TimeRangeField/TimeRangeField.tsx b/crabfit-frontend/src/components/TimeRangeField/TimeRangeField.tsx
index dfb0695..cefb27a 100644
--- a/crabfit-frontend/src/components/TimeRangeField/TimeRangeField.tsx
+++ b/crabfit-frontend/src/components/TimeRangeField/TimeRangeField.tsx
@@ -64,7 +64,7 @@ const times = {
   	'21',
   	'22',
   	'23',
-  	'0',
+  	'24',
   ],
 };
 
@@ -124,6 +124,7 @@ const TimeRangeField = ({
 				<Handle
 					value={start}
 					label={times[timeFormat][start]}
+          extraPadding={end - start === 1 ? 'padding-right: 20px;' : (start - end === 1 ? 'padding-left: 20px;' : '')}
 					onMouseDown={() => {
 						document.addEventListener('mousemove', handleMouseMove);
 						isStartMoving.current = true;
@@ -146,6 +147,7 @@ const TimeRangeField = ({
 				<Handle
 					value={end}
 					label={times[timeFormat][end]}
+          extraPadding={end - start === 1 ? 'padding-left: 20px;' : (start - end === 1 ? 'padding-right: 20px;' : '')}
 					onMouseDown={() => {
 						document.addEventListener('mousemove', handleMouseMove);
 						isEndMoving.current = true;
diff --git a/crabfit-frontend/src/components/TimeRangeField/timeRangeFieldStyle.ts b/crabfit-frontend/src/components/TimeRangeField/timeRangeFieldStyle.ts
index 1abe59c..63812bf 100644
--- a/crabfit-frontend/src/components/TimeRangeField/timeRangeFieldStyle.ts
+++ b/crabfit-frontend/src/components/TimeRangeField/timeRangeFieldStyle.ts
@@ -60,6 +60,7 @@ export const Handle = styled.div`
 		text-align: center;
 		left: 50%;
 		transform: translateX(-50%);
+    ${props => props.extraPadding}
 	}
 `;