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 c85186f8..823b5e93 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
@@ -1048,7 +1048,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
 }
 
 .c17 {
-  padding: 1.875rem;
+  padding: 1.125rem;
 }
 
 .c6 {
@@ -1403,6 +1403,12 @@ exports[`renders <Networks networks /> without throwing 1`] = `
   font-weight: 200;
 }
 
+@media (min-width:46.0625em) {
+  .c17 {
+    padding: 1.875rem;
+  }
+}
+
 @media only screen and (min-width:48em) {
   .c1 {
     width: 46rem;
@@ -1655,139 +1661,285 @@ exports[`renders <Networks networks /> without throwing 1`] = `
                     </div>
                   </div>
                 </div>
-                <div
-                  className="c19"
+                <span
+                  name="react-responsive-mock"
+                  query="only screen and (min-width: 37.5rem)"
                 >
                   <div
-                    className="c20"
+                    className="c19"
                   >
                     <div
-                      className="c21"
+                      className="c20"
                     >
                       <div
-                        className="c20"
+                        className="c21"
                       >
                         <div
-                          className="c22"
+                          className="c20"
                         >
-                          <svg
-                            height="17"
-                            style={
-                              Object {
-                                "transform": "rotate(0deg)",
-                              }
-                            }
-                            version="1.1"
-                            viewBox="0 0 17 17"
-                            width="17"
-                            xmlns="http://www.w3.org/2000/svg"
-                            xmlnsXlink="http://www.w3.org/1999/xlink"
+                          <div
+                            className="c22"
                           >
-                            <g
-                              transform="translate(-1105 974)"
+                            <svg
+                              height="17"
+                              style={
+                                Object {
+                                  "transform": "rotate(0deg)",
+                                }
+                              }
+                              version="1.1"
+                              viewBox="0 0 17 17"
+                              width="17"
+                              xmlns="http://www.w3.org/2000/svg"
+                              xmlnsXlink="http://www.w3.org/1999/xlink"
                             >
-                              <g>
-                                <g>
-                                  <use
-                                    fill="rgb(73, 73, 73)"
-                                    transform="translate(1105 -974)"
-                                    xlinkHref="#c"
-                                  />
-                                </g>
-                                <g>
-                                  <use
-                                    fill="rgb(73, 73, 73)"
-                                    transform="translate(1111 -974)"
-                                    xlinkHref="#c"
-                                  />
-                                </g>
-                                <g>
-                                  <use
-                                    fill="rgb(73, 73, 73)"
-                                    transform="translate(1117 -974)"
-                                    xlinkHref="#c"
-                                  />
-                                </g>
-                                <g>
-                                  <use
-                                    fill="rgb(73, 73, 73)"
-                                    transform="translate(1105 -968)"
-                                    xlinkHref="#c"
-                                  />
-                                </g>
+                              <g
+                                transform="translate(-1105 974)"
+                              >
                                 <g>
                                   <g>
                                     <use
                                       fill="rgb(73, 73, 73)"
-                                      transform="translate(1111 -968)"
-                                      xlinkHref="#d"
+                                      transform="translate(1105 -974)"
+                                      xlinkHref="#c"
                                     />
                                   </g>
-                                </g>
-                                <g>
                                   <g>
                                     <use
                                       fill="rgb(73, 73, 73)"
-                                      transform="translate(1117 -968)"
-                                      xlinkHref="#d"
+                                      transform="translate(1111 -974)"
+                                      xlinkHref="#c"
                                     />
                                   </g>
-                                </g>
-                                <g>
                                   <g>
                                     <use
                                       fill="rgb(73, 73, 73)"
-                                      transform="translate(1105 -962)"
-                                      xlinkHref="#d"
+                                      transform="translate(1117 -974)"
+                                      xlinkHref="#c"
                                     />
                                   </g>
-                                </g>
-                                <g>
                                   <g>
                                     <use
                                       fill="rgb(73, 73, 73)"
-                                      transform="translate(1111 -962)"
-                                      xlinkHref="#d"
+                                      transform="translate(1105 -968)"
+                                      xlinkHref="#c"
                                     />
                                   </g>
-                                </g>
-                                <g>
                                   <g>
-                                    <use
-                                      fill="rgb(73, 73, 73)"
-                                      transform="translate(1117 -962)"
-                                      xlinkHref="#d"
-                                    />
+                                    <g>
+                                      <use
+                                        fill="rgb(73, 73, 73)"
+                                        transform="translate(1111 -968)"
+                                        xlinkHref="#d"
+                                      />
+                                    </g>
+                                  </g>
+                                  <g>
+                                    <g>
+                                      <use
+                                        fill="rgb(73, 73, 73)"
+                                        transform="translate(1117 -968)"
+                                        xlinkHref="#d"
+                                      />
+                                    </g>
+                                  </g>
+                                  <g>
+                                    <g>
+                                      <use
+                                        fill="rgb(73, 73, 73)"
+                                        transform="translate(1105 -962)"
+                                        xlinkHref="#d"
+                                      />
+                                    </g>
+                                  </g>
+                                  <g>
+                                    <g>
+                                      <use
+                                        fill="rgb(73, 73, 73)"
+                                        transform="translate(1111 -962)"
+                                        xlinkHref="#d"
+                                      />
+                                    </g>
+                                  </g>
+                                  <g>
+                                    <g>
+                                      <use
+                                        fill="rgb(73, 73, 73)"
+                                        transform="translate(1117 -962)"
+                                        xlinkHref="#d"
+                                      />
+                                    </g>
                                   </g>
                                 </g>
                               </g>
-                            </g>
-                            <defs>
-                              <path
-                                d="M 2.5 5C 3.88071 5 5 3.88071 5 2.5C 5 1.11929 3.88071 0 2.5 0C 1.11929 0 0 1.11929 0 2.5C 0 3.88071 1.11929 5 2.5 5Z"
-                                id="c"
-                              />
-                              <path
-                                d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
-                                id="d"
-                              />
-                            </defs>
-                          </svg>
+                              <defs>
+                                <path
+                                  d="M 2.5 5C 3.88071 5 5 3.88071 5 2.5C 5 1.11929 3.88071 0 2.5 0C 1.11929 0 0 1.11929 0 2.5C 0 3.88071 1.11929 5 2.5 5Z"
+                                  id="c"
+                                />
+                                <path
+                                  d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
+                                  id="d"
+                                />
+                              </defs>
+                            </svg>
+                          </div>
+                        </div>
+                        <div
+                          className="c20"
+                        >
+                          <p
+                            className="c6"
+                          >
+                            2 instances
+                          </p>
                         </div>
                       </div>
+                    </div>
+                  </div>
+                </span>
+              </div>
+              <span
+                name="react-responsive-mock"
+                query="only screen and (max-width: 37.4375rem)"
+              >
+                <div
+                  className="c18"
+                >
+                  <div
+                    className="c19"
+                  >
+                    <div
+                      className="c20"
+                    >
                       <div
-                        className="c20"
+                        className="c21"
                       >
-                        <p
-                          className="c6"
+                        <div
+                          className="c20"
                         >
-                          2 instances
-                        </p>
+                          <div
+                            className="c22"
+                          >
+                            <svg
+                              height="17"
+                              style={
+                                Object {
+                                  "transform": "rotate(0deg)",
+                                }
+                              }
+                              version="1.1"
+                              viewBox="0 0 17 17"
+                              width="17"
+                              xmlns="http://www.w3.org/2000/svg"
+                              xmlnsXlink="http://www.w3.org/1999/xlink"
+                            >
+                              <g
+                                transform="translate(-1105 974)"
+                              >
+                                <g>
+                                  <g>
+                                    <use
+                                      fill="rgb(73, 73, 73)"
+                                      transform="translate(1105 -974)"
+                                      xlinkHref="#c"
+                                    />
+                                  </g>
+                                  <g>
+                                    <use
+                                      fill="rgb(73, 73, 73)"
+                                      transform="translate(1111 -974)"
+                                      xlinkHref="#c"
+                                    />
+                                  </g>
+                                  <g>
+                                    <use
+                                      fill="rgb(73, 73, 73)"
+                                      transform="translate(1117 -974)"
+                                      xlinkHref="#c"
+                                    />
+                                  </g>
+                                  <g>
+                                    <use
+                                      fill="rgb(73, 73, 73)"
+                                      transform="translate(1105 -968)"
+                                      xlinkHref="#c"
+                                    />
+                                  </g>
+                                  <g>
+                                    <g>
+                                      <use
+                                        fill="rgb(73, 73, 73)"
+                                        transform="translate(1111 -968)"
+                                        xlinkHref="#d"
+                                      />
+                                    </g>
+                                  </g>
+                                  <g>
+                                    <g>
+                                      <use
+                                        fill="rgb(73, 73, 73)"
+                                        transform="translate(1117 -968)"
+                                        xlinkHref="#d"
+                                      />
+                                    </g>
+                                  </g>
+                                  <g>
+                                    <g>
+                                      <use
+                                        fill="rgb(73, 73, 73)"
+                                        transform="translate(1105 -962)"
+                                        xlinkHref="#d"
+                                      />
+                                    </g>
+                                  </g>
+                                  <g>
+                                    <g>
+                                      <use
+                                        fill="rgb(73, 73, 73)"
+                                        transform="translate(1111 -962)"
+                                        xlinkHref="#d"
+                                      />
+                                    </g>
+                                  </g>
+                                  <g>
+                                    <g>
+                                      <use
+                                        fill="rgb(73, 73, 73)"
+                                        transform="translate(1117 -962)"
+                                        xlinkHref="#d"
+                                      />
+                                    </g>
+                                  </g>
+                                </g>
+                              </g>
+                              <defs>
+                                <path
+                                  d="M 2.5 5C 3.88071 5 5 3.88071 5 2.5C 5 1.11929 3.88071 0 2.5 0C 1.11929 0 0 1.11929 0 2.5C 0 3.88071 1.11929 5 2.5 5Z"
+                                  id="c"
+                                />
+                                <path
+                                  d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
+                                  id="d"
+                                />
+                              </defs>
+                            </svg>
+                          </div>
+                        </div>
+                        <div
+                          className="c20"
+                        >
+                          <p
+                            className="c6"
+                          >
+                            2 instances
+                          </p>
+                        </div>
                       </div>
                     </div>
                   </div>
                 </div>
-              </div>
+              </span>
               <div
                 className="c23"
               >
@@ -2042,7 +2194,15 @@ exports[`renders <Networks networks /> without throwing 1`] = `
                     </div>
                   </div>
                 </div>
+                <span
+                  name="react-responsive-mock"
+                  query="only screen and (min-width: 37.5rem)"
+                />
               </div>
+              <span
+                name="react-responsive-mock"
+                query="only screen and (max-width: 37.4375rem)"
+              />
             </div>
           </div>
         </div>
diff --git a/packages/resource-widgets/src/__tests__/__snapshots__/network.spec.js.snap b/packages/resource-widgets/src/__tests__/__snapshots__/network.spec.js.snap
index d89c0146..c552052d 100644
--- a/packages/resource-widgets/src/__tests__/__snapshots__/network.spec.js.snap
+++ b/packages/resource-widgets/src/__tests__/__snapshots__/network.spec.js.snap
@@ -48,7 +48,7 @@ exports[`renders <Network /> without throwing 1`] = `
 }
 
 .c18 {
-  padding: 1.875rem;
+  padding: 1.125rem;
 }
 
 .c19 {
@@ -452,6 +452,12 @@ exports[`renders <Network /> without throwing 1`] = `
   }
 }
 
+@media (min-width:46.0625em) {
+  .c18 {
+    padding: 1.875rem;
+  }
+}
+
 <div
   className="c0"
 >
@@ -958,7 +964,7 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
 }
 
 .c18 {
-  padding: 1.875rem;
+  padding: 1.125rem;
 }
 
 .c21 {
@@ -1362,6 +1368,12 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
   }
 }
 
+@media (min-width:46.0625em) {
+  .c18 {
+    padding: 1.875rem;
+  }
+}
+
 <div
   className="c0"
 >
@@ -1881,7 +1893,7 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
 }
 
 .c18 {
-  padding: 1.875rem;
+  padding: 1.125rem;
 }
 
 .c21 {
@@ -2285,6 +2297,12 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
   }
 }
 
+@media (min-width:46.0625em) {
+  .c18 {
+    padding: 1.875rem;
+  }
+}
+
 <div
   className="c0"
 >
@@ -2808,7 +2826,7 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
 }
 
 .c18 {
-  padding: 1.875rem;
+  padding: 1.125rem;
 }
 
 .c29 {
@@ -3258,6 +3276,12 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
   }
 }
 
+@media (min-width:46.0625em) {
+  .c18 {
+    padding: 1.875rem;
+  }
+}
+
 <div
   className="c0"
 >
@@ -3437,138 +3461,6 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
                   </div>
                 </div>
               </div>
-              <div
-                className="c22"
-              >
-                <div
-                  className="c23"
-                >
-                  <div
-                    className="c24"
-                  >
-                    <div
-                      className="c23"
-                    >
-                      <div
-                        className="c25"
-                      >
-                        <svg
-                          height="17"
-                          style={
-                            Object {
-                              "transform": "rotate(0deg)",
-                            }
-                          }
-                          version="1.1"
-                          viewBox="0 0 17 17"
-                          width="17"
-                          xmlns="http://www.w3.org/2000/svg"
-                          xmlnsXlink="http://www.w3.org/1999/xlink"
-                        >
-                          <g
-                            transform="translate(-1105 974)"
-                          >
-                            <g>
-                              <g>
-                                <use
-                                  fill="rgb(73, 73, 73)"
-                                  transform="translate(1105 -974)"
-                                  xlinkHref="#c"
-                                />
-                              </g>
-                              <g>
-                                <use
-                                  fill="rgb(73, 73, 73)"
-                                  transform="translate(1111 -974)"
-                                  xlinkHref="#c"
-                                />
-                              </g>
-                              <g>
-                                <use
-                                  fill="rgb(73, 73, 73)"
-                                  transform="translate(1117 -974)"
-                                  xlinkHref="#c"
-                                />
-                              </g>
-                              <g>
-                                <use
-                                  fill="rgb(73, 73, 73)"
-                                  transform="translate(1105 -968)"
-                                  xlinkHref="#c"
-                                />
-                              </g>
-                              <g>
-                                <g>
-                                  <use
-                                    fill="rgb(73, 73, 73)"
-                                    transform="translate(1111 -968)"
-                                    xlinkHref="#d"
-                                  />
-                                </g>
-                              </g>
-                              <g>
-                                <g>
-                                  <use
-                                    fill="rgb(73, 73, 73)"
-                                    transform="translate(1117 -968)"
-                                    xlinkHref="#d"
-                                  />
-                                </g>
-                              </g>
-                              <g>
-                                <g>
-                                  <use
-                                    fill="rgb(73, 73, 73)"
-                                    transform="translate(1105 -962)"
-                                    xlinkHref="#d"
-                                  />
-                                </g>
-                              </g>
-                              <g>
-                                <g>
-                                  <use
-                                    fill="rgb(73, 73, 73)"
-                                    transform="translate(1111 -962)"
-                                    xlinkHref="#d"
-                                  />
-                                </g>
-                              </g>
-                              <g>
-                                <g>
-                                  <use
-                                    fill="rgb(73, 73, 73)"
-                                    transform="translate(1117 -962)"
-                                    xlinkHref="#d"
-                                  />
-                                </g>
-                              </g>
-                            </g>
-                          </g>
-                          <defs>
-                            <path
-                              d="M 2.5 5C 3.88071 5 5 3.88071 5 2.5C 5 1.11929 3.88071 0 2.5 0C 1.11929 0 0 1.11929 0 2.5C 0 3.88071 1.11929 5 2.5 5Z"
-                              id="c"
-                            />
-                            <path
-                              d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
-                              id="d"
-                            />
-                          </defs>
-                        </svg>
-                      </div>
-                    </div>
-                    <div
-                      className="c23"
-                    >
-                      <p
-                        className="c20"
-                      >
-                        0 instances
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              </div>
             </div>
             <div
               className="c26"
@@ -3965,7 +3857,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   margin-bottom: 0.75rem;
 }
 
-.c33 {
+.c34 {
   margin-top: 0.1875rem;
 }
 
@@ -3975,7 +3867,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
 }
 
 .c18 {
-  padding: 1.875rem;
+  padding: 1.125rem;
 }
 
 .c27 {
@@ -4118,7 +4010,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   font-size: 0.9375rem;
 }
 
-.c32 {
+.c33 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -4399,7 +4291,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c34 {
+.c35 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -4423,62 +4315,62 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c34:focus {
+.c35:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c34::-webkit-input-placeholder {
+.c35::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c34::-moz-placeholder {
+.c35::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c34:-ms-input-placeholder {
+.c35:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c34:invalid {
+.c35:invalid {
   box-shadow: none;
 }
 
-.c34:disabled {
+.c35:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c34:disabled::-webkit-input-placeholder {
+.c35:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c34:disabled::-moz-placeholder {
+.c35:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c34:disabled:-ms-input-placeholder {
+.c35:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c34:disabled {
+.c35:disabled {
   color: rgb(73,73,73);
 }
 
-.c34:disabled::-webkit-input-placeholder {
+.c35:disabled::-webkit-input-placeholder {
   color: rgb(73,73,73);
 }
 
-.c34:disabled::-moz-placeholder {
+.c35:disabled::-moz-placeholder {
   color: rgb(73,73,73);
 }
 
-.c34:disabled:-ms-input-placeholder {
+.c35:disabled:-ms-input-placeholder {
   color: rgb(73,73,73);
 }
 
-.c31 {
+.c32 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
@@ -4488,6 +4380,10 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   background-color: #f7f7f7;
 }
 
+.c31 {
+  width: 100%;
+}
+
 @media only screen and (min-width:0em) {
   .c1 {
     -webkit-flex-basis: 100%;
@@ -4506,6 +4402,12 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   }
 }
 
+@media (min-width:46.0625em) {
+  .c18 {
+    padding: 1.875rem;
+  }
+}
+
 <div
   className="c0"
 >
@@ -4685,138 +4587,6 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
                   </div>
                 </div>
               </div>
-              <div
-                className="c22"
-              >
-                <div
-                  className="c23"
-                >
-                  <div
-                    className="c24"
-                  >
-                    <div
-                      className="c23"
-                    >
-                      <div
-                        className="c25"
-                      >
-                        <svg
-                          height="17"
-                          style={
-                            Object {
-                              "transform": "rotate(0deg)",
-                            }
-                          }
-                          version="1.1"
-                          viewBox="0 0 17 17"
-                          width="17"
-                          xmlns="http://www.w3.org/2000/svg"
-                          xmlnsXlink="http://www.w3.org/1999/xlink"
-                        >
-                          <g
-                            transform="translate(-1105 974)"
-                          >
-                            <g>
-                              <g>
-                                <use
-                                  fill="rgb(73, 73, 73)"
-                                  transform="translate(1105 -974)"
-                                  xlinkHref="#c"
-                                />
-                              </g>
-                              <g>
-                                <use
-                                  fill="rgb(73, 73, 73)"
-                                  transform="translate(1111 -974)"
-                                  xlinkHref="#c"
-                                />
-                              </g>
-                              <g>
-                                <use
-                                  fill="rgb(73, 73, 73)"
-                                  transform="translate(1117 -974)"
-                                  xlinkHref="#c"
-                                />
-                              </g>
-                              <g>
-                                <use
-                                  fill="rgb(73, 73, 73)"
-                                  transform="translate(1105 -968)"
-                                  xlinkHref="#c"
-                                />
-                              </g>
-                              <g>
-                                <g>
-                                  <use
-                                    fill="rgb(73, 73, 73)"
-                                    transform="translate(1111 -968)"
-                                    xlinkHref="#d"
-                                  />
-                                </g>
-                              </g>
-                              <g>
-                                <g>
-                                  <use
-                                    fill="rgb(73, 73, 73)"
-                                    transform="translate(1117 -968)"
-                                    xlinkHref="#d"
-                                  />
-                                </g>
-                              </g>
-                              <g>
-                                <g>
-                                  <use
-                                    fill="rgb(73, 73, 73)"
-                                    transform="translate(1105 -962)"
-                                    xlinkHref="#d"
-                                  />
-                                </g>
-                              </g>
-                              <g>
-                                <g>
-                                  <use
-                                    fill="rgb(73, 73, 73)"
-                                    transform="translate(1111 -962)"
-                                    xlinkHref="#d"
-                                  />
-                                </g>
-                              </g>
-                              <g>
-                                <g>
-                                  <use
-                                    fill="rgb(73, 73, 73)"
-                                    transform="translate(1117 -962)"
-                                    xlinkHref="#d"
-                                  />
-                                </g>
-                              </g>
-                            </g>
-                          </g>
-                          <defs>
-                            <path
-                              d="M 2.5 5C 3.88071 5 5 3.88071 5 2.5C 5 1.11929 3.88071 0 2.5 0C 1.11929 0 0 1.11929 0 2.5C 0 3.88071 1.11929 5 2.5 5Z"
-                              id="c"
-                            />
-                            <path
-                              d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
-                              id="d"
-                            />
-                          </defs>
-                        </svg>
-                      </div>
-                    </div>
-                    <div
-                      className="c23"
-                    >
-                      <p
-                        className="c20"
-                      >
-                        0 instances
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              </div>
             </div>
             <div
               className="c26"
@@ -4888,22 +4658,22 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
                           className="c30"
                         >
                           <div
-                            className="c8"
+                            className="c31 c8"
                             name="id"
                             role="group"
                             style={undefined}
                           >
                             <label
-                              className="c31 c32"
+                              className="c32 c33"
                               htmlFor="x"
                             >
                               ID
                             </label>
                             <div
-                              className="c33"
+                              className="c34"
                             >
                               <input
-                                className="c34"
+                                className="c35"
                                 disabled={false}
                                 id="x"
                                 onBlur={null}
@@ -4917,22 +4687,22 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
                         className="c23"
                       >
                         <div
-                          className="c8"
+                          className="c31 c8"
                           name="subnet"
                           role="group"
                           style={undefined}
                         >
                           <label
-                            className="c31 c32"
+                            className="c32 c33"
                             htmlFor="y"
                           >
                             Subnet
                           </label>
                           <div
-                            className="c33"
+                            className="c34"
                           >
                             <input
-                              className="c34"
+                              className="c35"
                               disabled={false}
                               id="y"
                               onBlur={null}
@@ -4945,22 +4715,22 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
                         className="c23"
                       >
                         <div
-                          className="c8"
+                          className="c31 c8"
                           name="ip-range"
                           role="group"
                           style={undefined}
                         >
                           <label
-                            className="c31 c32"
+                            className="c32 c33"
                             htmlFor="z"
                           >
                             IP range
                           </label>
                           <div
-                            className="c33"
+                            className="c34"
                           >
                             <input
-                              className="c34"
+                              className="c35"
                               disabled={false}
                               id="z"
                               onBlur={null}
@@ -5313,7 +5083,7 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
 }
 
 .c18 {
-  padding: 1.875rem;
+  padding: 1.125rem;
 }
 
 .c21 {
@@ -5717,6 +5487,12 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
   }
 }
 
+@media (min-width:46.0625em) {
+  .c18 {
+    padding: 1.875rem;
+  }
+}
+
 <div
   className="c0"
 >
diff --git a/packages/resource-widgets/src/network/index.js b/packages/resource-widgets/src/network/index.js
index 4405035a..59b5ba5a 100644
--- a/packages/resource-widgets/src/network/index.js
+++ b/packages/resource-widgets/src/network/index.js
@@ -29,9 +29,12 @@ import {
   DataCenterIcon,
   PublicIcon,
   PrivateIcon,
-  ArrowIcon
+  ArrowIcon,
+  QueryBreakpoints
 } from 'joyent-ui-toolkit';
 
+const { SmallOnly, Medium } = QueryBreakpoints;
+
 const Box = styled.div`
   display: inline-block;
   background-color: ${props => props.theme.white};
@@ -46,6 +49,10 @@ const CardHeader = styled(BaseCardHeader)`
   `};
 `;
 
+const ResponsiveFormGroup = styled(FormGroup)`
+  width: 100%;
+`;
+
 export const Collapsed = ({ name, fabric, ...network }) => (
   <Margin inline right={3} top={3}>
     <Box>
@@ -138,7 +145,7 @@ export const Expanded = ({
             </CardHeaderMeta>
           </CardHeader>
           <CardOutlet>
-            <Padding all={5}>
+            <Padding all={{ mobile: 3, tablet: 5 }}>
               {description && (
                 <Margin bottom={3}>
                   <P>{description}</P>
@@ -175,25 +182,49 @@ export const Expanded = ({
                     </Flex>
                   </FlexItem>
                 </Margin>
-                {fabric ? (
-                  <Margin right={5}>
-                    <FlexItem>
-                      <Flex alignCenter>
-                        <FlexItem>
-                          <Margin right={1}>
-                            <InstanceCountIcon />
-                          </Margin>
-                        </FlexItem>
-                        <FlexItem>
-                          <P>{`${machines.length} instance${
-                            machines.length === 1 ? '' : 's'
-                          }`}</P>
-                        </FlexItem>
-                      </Flex>
-                    </FlexItem>
-                  </Margin>
-                ) : null}
+                <Medium>
+                  {fabric ? (
+                    <Margin right={5}>
+                      <FlexItem>
+                        <Flex alignCenter>
+                          <FlexItem>
+                            <Margin right={1}>
+                              <InstanceCountIcon />
+                            </Margin>
+                          </FlexItem>
+                          <FlexItem>
+                            <P>{`${machines.length} instance${
+                              machines.length === 1 ? '' : 's'
+                            }`}</P>
+                          </FlexItem>
+                        </Flex>
+                      </FlexItem>
+                    </Margin>
+                  ) : null}
+                </Medium>
               </Flex>
+              <SmallOnly>
+                {fabric ? (
+                  <Flex>
+                    <Margin right={5}>
+                      <FlexItem>
+                        <Flex alignCenter>
+                          <FlexItem>
+                            <Margin right={1}>
+                              <InstanceCountIcon />
+                            </Margin>
+                          </FlexItem>
+                          <FlexItem>
+                            <P>{`${machines.length} instance${
+                              machines.length === 1 ? '' : 's'
+                            }`}</P>
+                          </FlexItem>
+                        </Flex>
+                      </FlexItem>
+                    </Margin>
+                  </Flex>
+                ) : null}
+              </SmallOnly>
               {fabric ? (
                 <Fragment>
                   <Margin top={3}>
@@ -235,7 +266,7 @@ export const Expanded = ({
                               ) : null}
                               <FlexItem>
                                 <Margin bottom={2}>
-                                  <FormGroup name="id">
+                                  <ResponsiveFormGroup name="id">
                                     <FormLabel>ID</FormLabel>
                                     <Margin top={0.5}>
                                       <Input
@@ -246,11 +277,11 @@ export const Expanded = ({
                                         value={id}
                                       />
                                     </Margin>
-                                  </FormGroup>
+                                  </ResponsiveFormGroup>
                                 </Margin>
                               </FlexItem>
                               <FlexItem>
-                                <FormGroup name="subnet">
+                                <ResponsiveFormGroup name="subnet">
                                   <FormLabel>Subnet</FormLabel>
                                   <Margin top={0.5}>
                                     <Input
@@ -261,10 +292,10 @@ export const Expanded = ({
                                       value={subnet}
                                     />
                                   </Margin>
-                                </FormGroup>
+                                </ResponsiveFormGroup>
                               </FlexItem>
                               <FlexItem>
-                                <FormGroup name="ip-range">
+                                <ResponsiveFormGroup name="ip-range">
                                   <FormLabel>IP range</FormLabel>
                                   <Margin top={0.5}>
                                     <Input
@@ -275,7 +306,7 @@ export const Expanded = ({
                                       value={`${provision_start_ip} - ${provision_end_ip}`}
                                     />
                                   </Margin>
-                                </FormGroup>
+                                </ResponsiveFormGroup>
                               </FlexItem>
                             </Flex>
                           </Padding>