diff --git a/src/thsf/static/css/planning.css b/src/thsf/static/css/planning.css
index 18bb2d2..c6ade5b 100644
--- a/src/thsf/static/css/planning.css
+++ b/src/thsf/static/css/planning.css
@@ -1,11 +1,25 @@
-.slot {
-  display: flex;
-  flex: 1;
-  justify-content: center;
-  text-align: center;
-  flex-direction: row;
-  margin: 0.3em 0;
-  width: 21em;
+@media screen and (min-width: 45em) {
+  .slot {
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    text-align: center;
+    flex-direction: row;
+    margin: 0.3em 0;
+    width: 20em;
+  }
+}
+
+@media screen and (max-width: 44em) {
+  .slot {
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    text-align: center;
+    flex-direction: row;
+    margin: 0.3em 0;
+    width: 21em;
+  }
 }
 
 .slot_info,
diff --git a/src/thsf/static/css/wrappers.css b/src/thsf/static/css/wrappers.css
index 1d2c514..9775296 100644
--- a/src/thsf/static/css/wrappers.css
+++ b/src/thsf/static/css/wrappers.css
@@ -29,9 +29,9 @@
     flex-direction: row;
     justify-content: center;
     align-items: center;
-    gap: 2em;
+    gap: 1.4em;
     background-color: var(--main-bg-color);
-    width: 100vw;
+    width: 40em;
     transform: translateZ(2);
   }
   .content {
@@ -70,15 +70,7 @@
     width: 21em;
     /* background-color: green; */
   }
-  .center_wrapper {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    width: 21em;
-    /* background-color: blue; */
-  }
+  .center_wrapper ,
   .header_wrapper {
     display: flex;
     flex-direction: column;