diff --git a/src/Planner.test.tsx b/src/Planner.test.tsx
index f73d045..a4a1b3e 100644
--- a/src/Planner.test.tsx
+++ b/src/Planner.test.tsx
@@ -104,9 +104,9 @@ describe("Planner", () => {
   it("renders the calendar without errors when no courses are added", () => {
     renderPlanner();
 
-    // react-big-calendar renders day headers: Mon, Tue, Wed, Thu, Fri
-    expect(screen.getByText("Mon")).toBeInTheDocument();
-    expect(screen.getByText("Fri")).toBeInTheDocument();
+    // react-big-calendar renders day headers and time-picker labels: Mon, Tue, Wed, Thu, Fri
+    expect(screen.getAllByText("Mon").length).toBeGreaterThanOrEqual(1);
+    expect(screen.getAllByText("Fri").length).toBeGreaterThanOrEqual(1);
   });
 
   it("renders time pickers for 5 weekdays", () => {
diff --git a/src/Planner.tsx b/src/Planner.tsx
index 24a6b05..22fc895 100644
--- a/src/Planner.tsx
+++ b/src/Planner.tsx
@@ -76,34 +76,92 @@ function Planner() {
 
   return (
     <div>
-      <div className="time-controls">
+      <div
+        className="time-controls"
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "stretch",
+          gap: 8,
+          padding: "12px 0",
+        }}
+      >
         {[0, 1, 2, 3, 4].map((idx) => {
+          const dayLabels = ["Mon", "Tue", "Wed", "Thu", "Fri"];
           return (
-            <div className="time-picker" key={idx}>
-              <Flatpickr
-                data-enable-time
-                options={{
-                  dateFormat: "H:i",
-                  enableTime: true,
-                  noCalendar: true,
-                }}
-                value={state.availableTimes[idx][0]}
-                onChange={([day]) => {
-                  state.updateAvailableTimes(idx, true, day);
-                }}
-              />
-              <Flatpickr
-                data-enable-time
-                options={{
-                  dateFormat: "H:i",
-                  enableTime: true,
-                  noCalendar: true,
+            <div
+              className="time-picker"
+              key={idx}
+              style={{
+                display: "flex",
+                flex: 1,
+                minWidth: 0,
+                flexDirection: "column",
+                alignItems: "center",
+                gap: 4,
+              }}
+            >
+              <span
+                style={{
+                  fontSize: "0.7rem",
+                  fontWeight: 600,
+                  textTransform: "uppercase",
+                  letterSpacing: "0.05em",
+                  color: "#737373",
+                  userSelect: "none",
                 }}
-                value={state.availableTimes[idx][1]}
-                onChange={([day]) => {
-                  state.updateAvailableTimes(idx, false, day);
+              >
+                {dayLabels[idx]}
+              </span>
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  gap: 2,
+                  width: "100%",
                 }}
-              />
+              >
+                <Flatpickr
+                  className="time-input"
+                  aria-label={`${dayLabels[idx]} start time`}
+                  data-enable-time
+                  options={{
+                    dateFormat: "H:i",
+                    enableTime: true,
+                    noCalendar: true,
+                  }}
+                  value={state.availableTimes[idx][0]}
+                  onChange={([day]) => {
+                    state.updateAvailableTimes(idx, true, day);
+                  }}
+                />
+                <span
+                  aria-hidden="true"
+                  style={{
+                    fontSize: "0.6rem",
+                    color: "#a3a3a3",
+                    lineHeight: 1,
+                    userSelect: "none",
+                  }}
+                >
+                  to
+                </span>
+                <Flatpickr
+                  className="time-input"
+                  aria-label={`${dayLabels[idx]} end time`}
+                  data-enable-time
+                  options={{
+                    dateFormat: "H:i",
+                    enableTime: true,
+                    noCalendar: true,
+                  }}
+                  value={state.availableTimes[idx][1]}
+                  onChange={([day]) => {
+                    state.updateAvailableTimes(idx, false, day);
+                  }}
+                />
+              </div>
             </div>
           );
         })}
diff --git a/src/css/planner.css b/src/css/planner.css
index 57818a1..4736717 100644
--- a/src/css/planner.css
+++ b/src/css/planner.css
@@ -6,46 +6,55 @@
   border-bottom: none;
 }
 
-.time-picker {
-  display: flex;
-  flex-direction: column;
-  row-gap: 8px;
-  max-width: 4rem;
+/* ── Time Controls Container (margins set here for mobile overrides) ── */
+.time-controls {
+  margin-left: 65px;
+  margin-right: 20px;
 }
 
-.time-picker > input {
+/* ── Time Input Styling ── */
+input.time-input {
+  width: 100%;
+  max-width: 4.5rem;
+  padding: 4px 6px;
   text-align: center;
+  font-size: 0.8rem;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  color: #262626;
+  background-color: #fafafa;
+  border: 1px solid #e5e5e5;
+  border-radius: 6px;
+  outline: none;
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease,
+    background-color 0.15s ease;
+  cursor: pointer;
 }
 
-.flatpickr-input {
-  border: 1px solid lightgrey;
-  border-radius: 4px;
+input.time-input:hover {
+  border-color: #d4d4d4;
+  background-color: #fff;
 }
 
-.time-controls {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-around;
-  margin-left: 65px;
-  margin-right: 20px;
-  padding-top: 5px;
-  padding-bottom: 5px;
+input.time-input:focus,
+input.time-input.active {
+  border-color: #f97316;
+  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.15);
+  background-color: #fff;
 }
 
-/* Mobile: tighten calendar controls */
+/* ── Mobile: tighten time controls and inputs ── */
 @media (max-width: 767px) {
   .time-controls {
     margin-left: 10px;
     margin-right: 10px;
   }
 
-  .time-picker {
+  input.time-input {
     max-width: 3.5rem;
-    row-gap: 4px;
-  }
-
-  .flatpickr-input {
-    font-size: 0.75rem;
-    padding: 2px 4px;
+    font-size: 0.7rem;
+    padding: 3px 4px;
   }
 }