diff --git a/src/app/slots/slots.tsx b/src/app/slots/slots.tsx
index 45c2196..cc8430f 100644
--- a/src/app/slots/slots.tsx
+++ b/src/app/slots/slots.tsx
@@ -177,15 +177,10 @@ export default function View() {
         )}
 
         {/* Timetable Section */}
-        <div className="mx-auto mt-12 mb-10 w-full max-w-[1000px]">
+        <div className="w-full mt-12 mb-10 px-4">
           <div className="overflow-x-auto">
-            <div className="min-w-[1000px] h-[480px]">
-              <TimeTable
-                slotNames={active.map(i => ({
-                  slotName: buttonTexts[i],
-                  showName: true,
-                }))}
-              />
+            <div className="min-w-[1000px]">
+              <TimeTable ... />
             </div>
           </div>
         </div>
diff --git a/src/components/ui/TimeTable.tsx b/src/components/ui/TimeTable.tsx
index cdb647a..bfa14d5 100644
--- a/src/components/ui/TimeTable.tsx
+++ b/src/components/ui/TimeTable.tsx
@@ -119,8 +119,12 @@ export default function TimeTable({ slotNames }: { slotNames: tableFacingSlot[]
 
   return (
     <div
-      className="grid bg-black relative w-full h-full p-[1px] select-none font-inter"
-      style={{ gridTemplateColumns, gridTemplateRows }}
+      className="grid bg-black relative w-full p-[1px] select-none font-inter"
+      style={{
+        gridTemplateColumns,
+        gridTemplateRows,
+        aspectRatio: `${totalColWeight} / ${totalRowWeight}`,
+      }}
     >
       {cells}
       <div