diff --git a/src/Interivew Booking/InterviewBooking.css b/src/Interivew Booking/InterviewBooking.css
index 0d0c67b..2a9df75 100644
--- a/src/Interivew Booking/InterviewBooking.css	
+++ b/src/Interivew Booking/InterviewBooking.css	
@@ -113,6 +113,12 @@
 	margin: var(--TimeSlotSideMarginTopBottom);
 }
 
+#InterivewNoDateSelected {
+	display: flex;
+	height: 241.633px;
+	align-items: center;
+}
+
 #interviewLoading {
 	display: flex;
 	align-items: center;
@@ -164,3 +170,31 @@ p {
 #InterviewDialog p {
 	margin: 0px;
 }
+
+/* phone layout */
+@media only screen and (max-width: 800px) {
+	#InterviewForm {
+		flex-direction: column;
+	}
+	#InterviewForm div {
+		align-self: center;
+	}
+
+	#TimeSlotSelector {
+		flex-direction: column;
+	}
+
+	.TimeSlot {
+		align-self: center;
+
+		/* padding-bottom: 2svh; */
+	}
+
+	#InterivewNoDateSelected {
+		height: auto;
+	}
+
+	#MainForm form {
+		width: 90%;
+	}
+}
diff --git a/src/Interivew Booking/TimeDateSelector.jsx b/src/Interivew Booking/TimeDateSelector.jsx
index c17621c..ce09866 100644
--- a/src/Interivew Booking/TimeDateSelector.jsx	
+++ b/src/Interivew Booking/TimeDateSelector.jsx	
@@ -120,12 +120,7 @@ export default function TimeDateSelector({
 						{!selectedDate ? (
 							<>
 								<p>Available Time Slots:</p>
-								<div
-									style={{
-										height: "241.633px",
-										display: "flex",
-										alignItems: "center",
-									}}>
+								<div id="InterivewNoDateSelected">
 									<p>Please select the a date to see time slots.</p>
 								</div>
 							</>