diff --git a/src/components/timetableComponents/Timetable.tsx b/src/components/timetableComponents/Timetable.tsx
index 07620c36..aa2b904e 100644
--- a/src/components/timetableComponents/Timetable.tsx
+++ b/src/components/timetableComponents/Timetable.tsx
@@ -20,16 +20,20 @@ function Timetable({ timeSlots, availableDates, children, bottomItem }: Timetabl
     <>
       <TimetableWrapper>
         <SlotTitle timeSlots={timeSlots} />
-        <TableWrapper>
+        <TableWithDateWrapper>
           <DateTitle availableDates={availableDates} />
-          <Table>
+          <TableWrapper>
             {availableDates.map((date) => {
               const dateKey = Object.values(date).join('/');
-              return <Column key={dateKey}>{children({ date: dateKey, timeSlots })}</Column>;
+              return (
+                <ColumnWrapper key={dateKey}>
+                  {children({ date: dateKey, timeSlots })}
+                </ColumnWrapper>
+              );
             })}
-            {emptyDates && emptyDates.map((value) => <EmptyColumn key={value} />)}
-          </Table>
-        </TableWrapper>
+            {emptyDates && emptyDates.map((value) => <EmptyColumnWrapper key={value} />)}
+          </TableWrapper>
+        </TableWithDateWrapper>
       </TimetableWrapper>
       {bottomItem}
     </>
@@ -43,26 +47,26 @@ const TimetableWrapper = styled.div`
   gap: 0.75rem;
 `;
 
-const TableWrapper = styled.div`
+const TableWithDateWrapper = styled.div`
   display: flex;
   flex-direction: column;
   gap: 0.8rem;
 `;
 
-const Table = styled.div`
+const TableWrapper = styled.div`
   display: flex;
   border-bottom: 1px solid ${({ theme }) => theme.colors.grey7};
   border-left: 1px solid ${({ theme }) => theme.colors.grey7};
 `;
 
-const Column = styled.div`
+const ColumnWrapper = styled.div`
   display: flex;
   flex-direction: column;
 
   border-right: 1px solid ${({ theme }) => theme.colors.grey7};
 `;
 
-const EmptyColumn = styled.div`
+const EmptyColumnWrapper = styled.div`
   display: flex;
   flex-direction: column;
   border-top: 1px solid ${({ theme }) => theme.colors.grey7};
diff --git a/src/pages/selectSchedule/components/SelectScheduleTable.tsx b/src/pages/selectSchedule/components/SelectScheduleTable.tsx
index fdb8c261..4134e8bc 100644
--- a/src/pages/selectSchedule/components/SelectScheduleTable.tsx
+++ b/src/pages/selectSchedule/components/SelectScheduleTable.tsx
@@ -18,7 +18,7 @@ function SelectScheduleTable({ timeSlots, availableDates }: TimetableStructure)
 
   const { scheduleStep } = useScheduleStepContext();
 
-  const stepSlots: StepSlotsType = {
+  const stepColumns: StepSlotsType = {
     selectTimeSlot: ({ date, timeSlots }: ColumnStructure) => (
       <SelectionColumn date={date} timeSlots={timeSlots} />
     ),
@@ -26,7 +26,7 @@ function SelectScheduleTable({ timeSlots, availableDates }: TimetableStructure)
       <PriorityColumn date={date} timeSlots={timeSlots} />
     ),
   };
-  const stepSlot = stepSlots[scheduleStep];
+  const stepColumn = stepColumns[scheduleStep];
 
   const bottomItems: StepbottomItemsType = {
     selectTimeSlot: <TimeSlotCta />,
@@ -49,7 +49,7 @@ function SelectScheduleTable({ timeSlots, availableDates }: TimetableStructure)
       }}
     >
       <Timetable timeSlots={timeSlots} availableDates={availableDates} bottomItem={bottomItem}>
-        {stepSlot}
+        {stepColumn}
       </Timetable>
     </SelectContext.Provider>
   );