diff --git a/tournaments/static/tournaments/css/style.css b/tournaments/static/tournaments/css/style.css
index 7a08d87..202669b 100644
--- a/tournaments/static/tournaments/css/style.css
+++ b/tournaments/static/tournaments/css/style.css
@@ -152,6 +152,11 @@ tr {
     font-weight: 600;
 }
 
+@media (max-width: 80em) {
+    font-size: 0.8em;
+    padding: 0px;
+}
+
 .large_button {
     font-size: 16px;
     display: inline-block;
@@ -547,6 +552,17 @@ h-margin {
     padding: 5px 0px;
 }
 
+@media print, screen and (min-width: 80em) {
+    .table-row-4-colums {
+        display: grid;
+        grid-template-columns: 1px auto 50px 160px 180px;
+        /* first column is a hack */
+        align-items: center;
+        /* Vertically center the content within each column */
+        padding: 5px 0px;
+    }
+}
+
 .table-row-3-colums-ranks {
     display: grid;
     grid-template-columns: 80px 1fr auto;
@@ -565,23 +581,34 @@ h-margin {
     padding: 5px 0px;
 }
 
+/* Summons */
 .table-row-3-colums-summons {
-    display: grid;
-    grid-template-columns: 1px auto 180px 120px;
-    /* first column is a hack */
+    display: flex;
     align-items: center;
-    /* Vertically center the content within each column */
+}
+
+.summons-left,
+.summons-right {
+    flex: 1;
     padding: 5px 0px;
 }
 
-@media print, screen and (min-width: 80em) {
-    .table-row-4-colums {
-        display: grid;
-        grid-template-columns: 1px auto 50px 160px 180px;
-        /* first column is a hack */
-        align-items: center;
-        /* Vertically center the content within each column */
-        padding: 5px 0px;
+@media (min-width: 80em) {
+    .summons-right {
+        display: flex;
+        gap: 20px;
+    }
+
+    .summon-cell {
+        flex: 1;
+    }
+}
+
+@media (max-width: 80em) {
+    .summons-right {
+        text-align: center;
+        display: flex;
+        flex-direction: column;
     }
 }
 
@@ -629,23 +656,6 @@ h-margin {
     }
 }
 
-.wrap {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    height: 100vh;
-    /*the height will need to be customized*/
-    width: 50px;
-}
-
-#xrow {
-    background: #000;
-    color: #fff;
-    height: 50px;
-    width: 50px;
-    margin-left: 10px;
-}
-
 .flex {
     display: flex;
     align-items: center;
diff --git a/tournaments/templates/tournaments/summon_row.html b/tournaments/templates/tournaments/summon_row.html
index f899d57..86139c9 100644
--- a/tournaments/templates/tournaments/summon_row.html
+++ b/tournaments/templates/tournaments/summon_row.html
@@ -2,17 +2,23 @@
 
         <div class="table-row-3-colums-summons">
 
-            <div class="table-cell table-cell-large semibold">
-                {% for name in summon.names %}
-                <div>{{ name }}</div>
-                {% endfor %}
+            <div class="summons-left">
+                <div class="semibold">
+                    {% for name in summon.names %}
+                    <div>{{ name }}</div>
+                    {% endfor %}
+                </div>
             </div>
-
-            <div class="table-cell left">
-                <div class="table-cell large">{{ summon.formatted_date }}</div>
-                <div class="table-cell">{{ summon.court }}</div>
+            <div class="summons-right">
+                <div class="summon-cell">
+                    <div class="large">{{ summon.formatted_date }}</div>
+                    <div class="">{{ summon.court }}</div>
+                </div>
+                <div class="summon-cell">
+                    <div class="mybox center">{{ summon.stage }}</div>
+                </div>
             </div>
-            <div class="table-cell right"><div class="mybox center">{{ summon.stage }}</div></div>
+
         </div>
 
         {% if not forloop.last %}
diff --git a/tournaments/templates/tournaments/summons.html b/tournaments/templates/tournaments/summons.html
index a763a15..0c35f8c 100644
--- a/tournaments/templates/tournaments/summons.html
+++ b/tournaments/templates/tournaments/summons.html
@@ -16,7 +16,7 @@
 
         <div class="grid-x padding-bottom">
 
-            <div class="cell medium-6 large-6 my-block">
+            <div class="cell large-6 my-block">
                 <div class="bubble">
                     {% if tournament.summon_count_display %}
                     <label class="title">{{ tournament.summon_count_display }}</label>