diff --git a/consoles/my-joy-instances/src/components/__tests__/__snapshots__/menu.spec.js.snap b/consoles/my-joy-instances/src/components/__tests__/__snapshots__/menu.spec.js.snap
index f86182a6..16944213 100644
--- a/consoles/my-joy-instances/src/components/__tests__/__snapshots__/menu.spec.js.snap
+++ b/consoles/my-joy-instances/src/components/__tests__/__snapshots__/menu.spec.js.snap
@@ -36,7 +36,7 @@ exports[`renders <Menu links /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
 }
 
 .c4 {
@@ -113,10 +113,24 @@ exports[`renders <Menu links /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
diff --git a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/list.spec.js.snap b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/list.spec.js.snap
index 917ca89f..90a13f9c 100644
--- a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/list.spec.js.snap
+++ b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/list.spec.js.snap
@@ -94,7 +94,6 @@ exports[`renders <InstanceList /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -483,14 +482,14 @@ exports[`renders <InstanceList /> without throwing 1`] = `
   margin: 0 0.1875rem;
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c12 {
     width: 10rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c13 {
     width: 8.125rem;
     display: table-cell;
@@ -812,7 +811,6 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -1201,14 +1199,14 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
   margin: 0 0.1875rem;
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c12 {
     width: 10rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c13 {
     width: 8.125rem;
     display: table-cell;
@@ -1530,7 +1528,6 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -1919,14 +1916,14 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
   margin: 0 0.1875rem;
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c12 {
     width: 10rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c13 {
     width: 8.125rem;
     display: table-cell;
@@ -2248,7 +2245,6 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -2637,14 +2633,14 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
   margin: 0 0.1875rem;
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c12 {
     width: 10rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c13 {
     width: 8.125rem;
     display: table-cell;
@@ -2966,7 +2962,6 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -3355,14 +3350,14 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
   margin: 0 0.1875rem;
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c12 {
     width: 10rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c13 {
     width: 8.125rem;
     display: table-cell;
@@ -3684,7 +3679,6 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -4073,14 +4067,14 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
   margin: 0 0.1875rem;
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c12 {
     width: 10rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c13 {
     width: 8.125rem;
     display: table-cell;
@@ -4452,7 +4446,6 @@ exports[`renders <Item /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -4679,14 +4672,14 @@ exports[`renders <Item /> without throwing 1`] = `
   height: 3rem;
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c13 {
     width: 10rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c14 {
     width: 8.125rem;
     display: table-cell;
@@ -4980,7 +4973,6 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -5207,14 +5199,14 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   height: 3rem;
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c13 {
     width: 10rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c14 {
     width: 8.125rem;
     display: table-cell;
@@ -5510,7 +5502,6 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -5737,14 +5728,14 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
   height: 3rem;
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c13 {
     width: 10rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c14 {
     width: 8.125rem;
     display: table-cell;
@@ -6027,7 +6018,6 @@ exports[`renders <Item mutating /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -6252,14 +6242,14 @@ exports[`renders <Item mutating /> without throwing 1`] = `
   display: block;
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c16 {
     width: 10rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c17 {
     width: 8.125rem;
     display: table-cell;
diff --git a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap
index 87127132..a16b497d 100644
--- a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap
+++ b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap
@@ -75,7 +75,6 @@ Array [
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -360,7 +359,7 @@ Array [
   border-bottom-width: 0.0625rem;
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c12 {
     width: 10rem;
     display: table-cell;
@@ -914,7 +913,6 @@ exports[`renders <Item /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -1088,7 +1086,7 @@ exports[`renders <Item /> without throwing 1`] = `
   border-bottom-width: 0.0625rem;
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c9 {
     width: 10rem;
     display: table-cell;
@@ -1309,7 +1307,6 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -1483,7 +1480,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   border-bottom-width: 0.0625rem;
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c9 {
     width: 10rem;
     display: table-cell;
@@ -1905,7 +1902,6 @@ Array [
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -2190,7 +2186,7 @@ Array [
   border-bottom-width: 0.0625rem;
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c12 {
     width: 10rem;
     display: table-cell;
@@ -2718,7 +2714,6 @@ Array [
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -3003,7 +2998,7 @@ Array [
   border-bottom-width: 0.0625rem;
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c12 {
     width: 10rem;
     display: table-cell;
@@ -3531,7 +3526,6 @@ Array [
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -3816,7 +3810,7 @@ Array [
   border-bottom-width: 0.0625rem;
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c12 {
     width: 10rem;
     display: table-cell;
@@ -4344,7 +4338,6 @@ Array [
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -4629,7 +4622,7 @@ Array [
   border-bottom-width: 0.0625rem;
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c12 {
     width: 10rem;
     display: table-cell;
@@ -5157,7 +5150,6 @@ Array [
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -5442,7 +5434,7 @@ Array [
   border-bottom-width: 0.0625rem;
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c12 {
     width: 10rem;
     display: table-cell;
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/cns.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/cns.spec.js.snap
index 2e29a055..408d5a29 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/cns.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/cns.spec.js.snap
@@ -204,7 +204,7 @@ exports[`renders <Cns /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -630,10 +630,24 @@ exports[`renders <Cns /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -946,7 +960,7 @@ exports[`renders <Cns disabled /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -1198,10 +1212,24 @@ exports[`renders <Cns disabled /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -1559,7 +1587,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -2141,10 +2169,24 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -3153,7 +3195,7 @@ exports[`renders <Cns loading /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -3262,10 +3304,24 @@ exports[`renders <Cns loading /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -3559,7 +3615,7 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -3897,10 +3953,24 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -4333,7 +4403,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -5023,10 +5093,24 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -6169,7 +6253,7 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -6632,10 +6716,24 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -7100,7 +7198,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -7582,10 +7680,24 @@ exports[`renders <Cns services /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -8003,7 +8115,7 @@ exports[`renders <Cns services hostnames /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -8255,10 +8367,24 @@ exports[`renders <Cns services hostnames /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/firewall.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/firewall.spec.js.snap
index a5bfac82..eee77a53 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/firewall.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/firewall.spec.js.snap
@@ -121,7 +121,7 @@ Array [
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -224,7 +224,6 @@ Array [
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -380,10 +379,24 @@ Array [
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -853,7 +866,7 @@ Array [
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -956,7 +969,6 @@ Array [
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -1112,10 +1124,24 @@ Array [
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -1645,7 +1671,7 @@ Array [
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -1748,7 +1774,6 @@ Array [
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -1904,10 +1929,24 @@ Array [
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -2377,7 +2416,7 @@ Array [
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -2480,7 +2519,6 @@ Array [
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -2636,10 +2674,24 @@ Array [
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -3153,7 +3205,7 @@ Array [
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -3197,10 +3249,24 @@ Array [
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -3371,7 +3437,7 @@ Array [
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -3415,10 +3481,24 @@ Array [
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -3609,7 +3689,7 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -3749,7 +3829,6 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -3905,10 +3984,24 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -4402,7 +4495,7 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -4542,7 +4635,6 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -4698,10 +4790,24 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -5184,7 +5290,7 @@ Array [
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -5226,7 +5332,6 @@ Array [
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -5373,10 +5478,24 @@ Array [
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -5580,7 +5699,7 @@ Array [
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -5622,7 +5741,6 @@ Array [
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -5769,10 +5887,24 @@ Array [
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -6027,7 +6159,7 @@ Array [
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -6187,7 +6319,6 @@ Array [
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -6401,10 +6532,24 @@ Array [
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -6916,7 +7061,7 @@ Array [
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -6958,7 +7103,6 @@ Array [
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -7105,10 +7249,24 @@ Array [
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -7312,7 +7470,7 @@ Array [
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -7354,7 +7512,6 @@ Array [
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -7501,10 +7658,24 @@ Array [
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -7759,7 +7930,7 @@ Array [
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -7919,7 +8090,6 @@ Array [
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -8133,10 +8303,24 @@ Array [
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
index 80a5da75..4000daa0 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
@@ -157,7 +157,7 @@ exports[`renders <List /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -268,7 +268,6 @@ exports[`renders <List /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -683,21 +682,35 @@ exports[`renders <List /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
+  }
+}
+
+@media only screen and (min-width:37.4375rem) {
   .c25 {
     width: 10rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c26 {
     width: 8.125rem;
     display: table-cell;
@@ -1096,7 +1109,7 @@ exports[`renders <List error /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -1244,7 +1257,6 @@ exports[`renders <List error /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -1659,21 +1671,35 @@ exports[`renders <List error /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
+  }
+}
+
+@media only screen and (min-width:37.4375rem) {
   .c32 {
     width: 10rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c33 {
     width: 8.125rem;
     display: table-cell;
@@ -2130,7 +2156,7 @@ exports[`renders <List instances /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -2231,7 +2257,6 @@ exports[`renders <List instances /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -2841,35 +2866,49 @@ exports[`renders <List instances /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
+  }
+}
+
+@media only screen and (min-width:37.4375rem) {
   .c25 {
     width: 10rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c26 {
     width: 8.125rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c34 {
     width: 10rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c35 {
     width: 8.125rem;
     display: table-cell;
@@ -4239,14 +4278,14 @@ exports[`renders <List instances selected /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
 .c51 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
 }
 
 .c3 {
@@ -4396,7 +4435,6 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -5042,42 +5080,70 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
+  }
+}
+
+@media only screen and (max-width:37.4375rem) {
   .c51 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c51 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c51 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
+  }
+}
+
+@media only screen and (min-width:37.4375rem) {
   .c25 {
     width: 10rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c26 {
     width: 8.125rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c34 {
     width: 10rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c35 {
     width: 8.125rem;
     display: table-cell;
@@ -5661,7 +5727,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
         >
           <span
             name="react-responsive-mock"
-            query="only screen and (max-width: 47.9375rem)"
+            query="only screen and (max-width: 37.4375rem)"
           >
             <button
               className="c54 c13 c55 c56"
@@ -5692,7 +5758,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
           </span>
           <span
             name="react-responsive-mock"
-            query="only screen and (min-width: 48rem)"
+            query="only screen and (min-width: 37.5rem)"
           >
             <button
               className="c57 c13 c55 c56"
@@ -5726,7 +5792,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
           </span>
           <span
             name="react-responsive-mock"
-            query="only screen and (max-width: 47.9375rem)"
+            query="only screen and (max-width: 37.4375rem)"
           >
             <button
               className="c54 c13 c55 c56"
@@ -5757,7 +5823,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
           </span>
           <span
             name="react-responsive-mock"
-            query="only screen and (min-width: 48rem)"
+            query="only screen and (min-width: 37.5rem)"
           >
             <button
               className="c57 c13 c55 c56"
@@ -5791,7 +5857,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
           </span>
           <span
             name="react-responsive-mock"
-            query="only screen and (max-width: 47.9375rem)"
+            query="only screen and (max-width: 37.4375rem)"
           >
             <button
               className="c54 c13 c55 c56"
@@ -5838,7 +5904,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
           </span>
           <span
             name="react-responsive-mock"
-            query="only screen and (min-width: 48rem)"
+            query="only screen and (min-width: 37.5rem)"
           >
             <button
               className="c57 c13 c55 c56"
@@ -5892,7 +5958,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
         >
           <span
             name="react-responsive-mock"
-            query="only screen and (max-width: 47.9375rem)"
+            query="only screen and (max-width: 37.4375rem)"
           >
             <button
               className="c59 c13 c55 c56"
@@ -5923,7 +5989,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
           </span>
           <span
             name="react-responsive-mock"
-            query="only screen and (min-width: 48rem)"
+            query="only screen and (min-width: 37.5rem)"
           >
             <button
               className="c60 c13 c55 c56"
@@ -6763,14 +6829,14 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
 .c51 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
 }
 
 .c3 {
@@ -6920,7 +6986,6 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -7566,42 +7631,70 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
+  }
+}
+
+@media only screen and (max-width:37.4375rem) {
   .c51 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c51 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c51 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
+  }
+}
+
+@media only screen and (min-width:37.4375rem) {
   .c25 {
     width: 10rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c26 {
     width: 8.125rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c34 {
     width: 10rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c35 {
     width: 8.125rem;
     display: table-cell;
@@ -8185,7 +8278,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
         >
           <span
             name="react-responsive-mock"
-            query="only screen and (max-width: 47.9375rem)"
+            query="only screen and (max-width: 37.4375rem)"
           >
             <button
               className="c54 c13 c55 c56"
@@ -8216,7 +8309,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
           </span>
           <span
             name="react-responsive-mock"
-            query="only screen and (min-width: 48rem)"
+            query="only screen and (min-width: 37.5rem)"
           >
             <button
               className="c57 c13 c55 c56"
@@ -8250,7 +8343,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
           </span>
           <span
             name="react-responsive-mock"
-            query="only screen and (max-width: 47.9375rem)"
+            query="only screen and (max-width: 37.4375rem)"
           >
             <button
               className="c54 c13 c55 c56"
@@ -8281,7 +8374,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
           </span>
           <span
             name="react-responsive-mock"
-            query="only screen and (min-width: 48rem)"
+            query="only screen and (min-width: 37.5rem)"
           >
             <button
               className="c57 c13 c55 c56"
@@ -8315,7 +8408,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
           </span>
           <span
             name="react-responsive-mock"
-            query="only screen and (max-width: 47.9375rem)"
+            query="only screen and (max-width: 37.4375rem)"
           >
             <button
               className="c54 c13 c55 c56"
@@ -8362,7 +8455,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
           </span>
           <span
             name="react-responsive-mock"
-            query="only screen and (min-width: 48rem)"
+            query="only screen and (min-width: 37.5rem)"
           >
             <button
               className="c57 c13 c55 c56"
@@ -8416,7 +8509,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
         >
           <span
             name="react-responsive-mock"
-            query="only screen and (max-width: 47.9375rem)"
+            query="only screen and (max-width: 37.4375rem)"
           >
             <button
               className="c59 c13 c55 c56"
@@ -8447,7 +8540,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
           </span>
           <span
             name="react-responsive-mock"
-            query="only screen and (min-width: 48rem)"
+            query="only screen and (min-width: 37.5rem)"
           >
             <button
               className="c60 c13 c55 c56"
@@ -9484,14 +9577,14 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
 .c51 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
 }
 
 .c3 {
@@ -9641,7 +9734,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -10287,42 +10379,70 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
+  }
+}
+
+@media only screen and (max-width:37.4375rem) {
   .c51 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c51 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c51 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
+  }
+}
+
+@media only screen and (min-width:37.4375rem) {
   .c25 {
     width: 10rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c26 {
     width: 8.125rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c34 {
     width: 10rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c35 {
     width: 8.125rem;
     display: table-cell;
@@ -10906,7 +11026,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
         >
           <span
             name="react-responsive-mock"
-            query="only screen and (max-width: 47.9375rem)"
+            query="only screen and (max-width: 37.4375rem)"
           >
             <button
               className="c54 c13 c55 c56"
@@ -10937,7 +11057,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
           </span>
           <span
             name="react-responsive-mock"
-            query="only screen and (min-width: 48rem)"
+            query="only screen and (min-width: 37.5rem)"
           >
             <button
               className="c57 c13 c55 c56"
@@ -10971,7 +11091,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
           </span>
           <span
             name="react-responsive-mock"
-            query="only screen and (max-width: 47.9375rem)"
+            query="only screen and (max-width: 37.4375rem)"
           >
             <button
               className="c58 c13 c55 c56"
@@ -11002,7 +11122,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
           </span>
           <span
             name="react-responsive-mock"
-            query="only screen and (min-width: 48rem)"
+            query="only screen and (min-width: 37.5rem)"
           >
             <button
               className="c59 c13 c55 c56"
@@ -11036,7 +11156,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
           </span>
           <span
             name="react-responsive-mock"
-            query="only screen and (max-width: 47.9375rem)"
+            query="only screen and (max-width: 37.4375rem)"
           >
             <button
               className="c58 c13 c55 c56"
@@ -11083,7 +11203,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
           </span>
           <span
             name="react-responsive-mock"
-            query="only screen and (min-width: 48rem)"
+            query="only screen and (min-width: 37.5rem)"
           >
             <button
               className="c59 c13 c55 c56"
@@ -11137,7 +11257,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
         >
           <span
             name="react-responsive-mock"
-            query="only screen and (max-width: 47.9375rem)"
+            query="only screen and (max-width: 37.4375rem)"
           >
             <button
               className="c61 c13 c55 c56"
@@ -11168,7 +11288,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
           </span>
           <span
             name="react-responsive-mock"
-            query="only screen and (min-width: 48rem)"
+            query="only screen and (min-width: 37.5rem)"
           >
             <button
               className="c62 c13 c55 c56"
@@ -11401,7 +11521,7 @@ exports[`renders <List loading /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -11572,10 +11692,24 @@ exports[`renders <List loading /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
index d949324a..bf2abaac 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
@@ -163,7 +163,7 @@ exports[`renders <Metadata /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -324,10 +324,24 @@ exports[`renders <Metadata /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -947,7 +961,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -1448,10 +1462,24 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -1917,7 +1945,7 @@ exports[`renders <Metadata error /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -2115,10 +2143,24 @@ exports[`renders <Metadata error /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -2472,7 +2514,7 @@ exports[`renders <Metadata loading /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -2635,10 +2677,24 @@ exports[`renders <Metadata loading /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -3471,7 +3527,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -3987,10 +4043,24 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap
index d6f0c596..120c2af3 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap
@@ -57,7 +57,7 @@ exports[`renders <Networks /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -172,10 +172,24 @@ exports[`renders <Networks /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -514,7 +528,7 @@ exports[`renders <Networks error /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -603,10 +617,24 @@ exports[`renders <Networks error /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -775,7 +803,7 @@ exports[`renders <Networks loading /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -827,10 +855,24 @@ exports[`renders <Networks loading /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -989,7 +1031,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -1341,10 +1383,24 @@ exports[`renders <Networks networks /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
index 82177a76..7246f9e5 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
@@ -163,7 +163,7 @@ exports[`renders <Tags /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -337,10 +337,24 @@ exports[`renders <Tags /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -964,7 +978,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -1430,10 +1444,24 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -1872,7 +1900,7 @@ exports[`renders <Tags editable /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -2046,10 +2074,24 @@ exports[`renders <Tags editable /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -2695,7 +2737,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -3172,10 +3214,24 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -4100,7 +4156,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -4577,10 +4633,24 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -5056,7 +5126,7 @@ exports[`renders <Tags error /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -5230,10 +5300,24 @@ exports[`renders <Tags error /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -5543,7 +5627,7 @@ exports[`renders <Tags loading /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -5706,10 +5790,24 @@ exports[`renders <Tags loading /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -5980,7 +6078,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -6190,10 +6288,24 @@ exports[`renders <Tags tags /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
diff --git a/consoles/my-joy-instances/src/containers/navigation/__tests__/__snapshots__/breadcrumb.spec.js.snap b/consoles/my-joy-instances/src/containers/navigation/__tests__/__snapshots__/breadcrumb.spec.js.snap
index b0eb8528..e5386bb2 100644
--- a/consoles/my-joy-instances/src/containers/navigation/__tests__/__snapshots__/breadcrumb.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/navigation/__tests__/__snapshots__/breadcrumb.spec.js.snap
@@ -64,7 +64,7 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
 .c4 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
 }
 
 .c10 {
@@ -138,10 +138,24 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c4 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c4 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c4 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -302,7 +316,7 @@ exports[`renders <Breadcrumb match /> without throwing 1`] = `
 .c4 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
 }
 
 .c10 {
@@ -376,10 +390,24 @@ exports[`renders <Breadcrumb match /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c4 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c4 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c4 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }