diff --git a/src/components/Konnector/KonnectorViewerList.tsx b/src/components/Konnector/KonnectorViewerList.tsx
index d0fe22ec7a36535d2e0124a0f58ef8584861119e..58fc207425d78446bcb6801b2abe404adc0423bb 100644
--- a/src/components/Konnector/KonnectorViewerList.tsx
+++ b/src/components/Konnector/KonnectorViewerList.tsx
@@ -19,7 +19,7 @@ const KonnectorViewerList = () => {
   }
 
   return (
-    <>
+    <div className="konnectorsList">
       {fluidStatus.map((fluidStatusItem: FluidStatus, key: number) => (
         <StyledCard
           key={key}
@@ -41,7 +41,7 @@ const KonnectorViewerList = () => {
           </div>
         </StyledCard>
       ))}
-    </>
+    </div>
   )
 }
 
diff --git a/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap b/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap
index 6a487b21e1ed33a10a1e4786cac1c50a0fb4eadd..6295440273087145768e2ea94b73c7b30703bec5 100644
--- a/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap
+++ b/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap
@@ -14,465 +14,469 @@ exports[`KonnectorViewerList component should be rendered correctly 1`] = `
   }
 >
   <KonnectorViewerList>
-    <StyledCard
-      className="connection-card"
-      fluidType={0}
-      key="0"
-      onClick={[Function]}
+    <div
+      className="konnectorsList"
     >
-      <WithStyles(WithStyles(ForwardRef(CardActionArea)))
-        className="connection-card electricity"
+      <StyledCard
+        className="connection-card"
+        fluidType={0}
+        key="0"
         onClick={[Function]}
       >
-        <WithStyles(ForwardRef(CardActionArea))
+        <WithStyles(WithStyles(ForwardRef(CardActionArea)))
           className="connection-card electricity"
-          classes={
-            Object {
-              "root": "WithStyles(ForwardRef(CardActionArea))-root-1",
-            }
-          }
           onClick={[Function]}
         >
-          <ForwardRef(CardActionArea)
+          <WithStyles(ForwardRef(CardActionArea))
             className="connection-card electricity"
             classes={
               Object {
-                "focusHighlight": "MuiCardActionArea-focusHighlight",
-                "focusVisible": "Mui-focusVisible",
-                "root": "MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1",
+                "root": "WithStyles(ForwardRef(CardActionArea))-root-1",
               }
             }
             onClick={[Function]}
           >
-            <WithStyles(ForwardRef(ButtonBase))
-              className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card electricity"
-              focusVisibleClassName="Mui-focusVisible"
+            <ForwardRef(CardActionArea)
+              className="connection-card electricity"
+              classes={
+                Object {
+                  "focusHighlight": "MuiCardActionArea-focusHighlight",
+                  "focusVisible": "Mui-focusVisible",
+                  "root": "MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1",
+                }
+              }
               onClick={[Function]}
             >
-              <ForwardRef(ButtonBase)
+              <WithStyles(ForwardRef(ButtonBase))
                 className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card electricity"
-                classes={
-                  Object {
-                    "disabled": "Mui-disabled",
-                    "focusVisible": "Mui-focusVisible",
-                    "root": "MuiButtonBase-root",
-                  }
-                }
                 focusVisibleClassName="Mui-focusVisible"
                 onClick={[Function]}
               >
-                <button
-                  className="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card electricity"
-                  disabled={false}
-                  onBlur={[Function]}
+                <ForwardRef(ButtonBase)
+                  className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card electricity"
+                  classes={
+                    Object {
+                      "disabled": "Mui-disabled",
+                      "focusVisible": "Mui-focusVisible",
+                      "root": "MuiButtonBase-root",
+                    }
+                  }
+                  focusVisibleClassName="Mui-focusVisible"
                   onClick={[Function]}
-                  onDragLeave={[Function]}
-                  onFocus={[Function]}
-                  onKeyDown={[Function]}
-                  onKeyUp={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseLeave={[Function]}
-                  onMouseUp={[Function]}
-                  onTouchEnd={[Function]}
-                  onTouchMove={[Function]}
-                  onTouchStart={[Function]}
-                  tabIndex={0}
-                  type="button"
                 >
-                  <WithStyles(WithStyles(ForwardRef(CardContent)))>
-                    <WithStyles(ForwardRef(CardContent))
-                      classes={
-                        Object {
-                          "root": "WithStyles(ForwardRef(CardContent))-root-2",
-                        }
-                      }
-                    >
-                      <ForwardRef(CardContent)
+                  <button
+                    className="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card electricity"
+                    disabled={false}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onDragLeave={[Function]}
+                    onFocus={[Function]}
+                    onKeyDown={[Function]}
+                    onKeyUp={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseLeave={[Function]}
+                    onMouseUp={[Function]}
+                    onTouchEnd={[Function]}
+                    onTouchMove={[Function]}
+                    onTouchStart={[Function]}
+                    tabIndex={0}
+                    type="button"
+                  >
+                    <WithStyles(WithStyles(ForwardRef(CardContent)))>
+                      <WithStyles(ForwardRef(CardContent))
                         classes={
                           Object {
-                            "root": "MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2",
+                            "root": "WithStyles(ForwardRef(CardContent))-root-2",
                           }
                         }
                       >
-                        <div
-                          className="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
+                        <ForwardRef(CardContent)
+                          classes={
+                            Object {
+                              "root": "MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2",
+                            }
+                          }
                         >
-                          <Icon
-                            icon="test-file-stub"
-                            size={36}
-                            spin={false}
+                          <div
+                            className="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
                           >
-                            <Component
-                              className="styles__icon___23x3R"
-                              height={36}
-                              style={Object {}}
-                              width={36}
+                            <Icon
+                              icon="test-file-stub"
+                              size={36}
+                              spin={false}
                             >
-                              <svg
+                              <Component
                                 className="styles__icon___23x3R"
                                 height={36}
                                 style={Object {}}
                                 width={36}
                               >
-                                <use
-                                  xlinkHref="#test-file-stub"
-                                />
-                              </svg>
-                            </Component>
-                          </Icon>
-                          <div
-                            className="konnector-title text-18-bold electricity"
-                          >
-                            konnector_options.label_connect_to_electricity
+                                <svg
+                                  className="styles__icon___23x3R"
+                                  height={36}
+                                  style={Object {}}
+                                  width={36}
+                                >
+                                  <use
+                                    xlinkHref="#test-file-stub"
+                                  />
+                                </svg>
+                              </Component>
+                            </Icon>
+                            <div
+                              className="konnector-title text-18-bold electricity"
+                            >
+                              konnector_options.label_connect_to_electricity
+                            </div>
                           </div>
-                        </div>
-                      </ForwardRef(CardContent)>
-                    </WithStyles(ForwardRef(CardContent))>
-                  </WithStyles(WithStyles(ForwardRef(CardContent)))>
-                  <span
-                    className="MuiCardActionArea-focusHighlight"
-                  />
-                  <WithStyles(memo)
-                    center={false}
-                  >
-                    <ForwardRef(TouchRipple)
+                        </ForwardRef(CardContent)>
+                      </WithStyles(ForwardRef(CardContent))>
+                    </WithStyles(WithStyles(ForwardRef(CardContent)))>
+                    <span
+                      className="MuiCardActionArea-focusHighlight"
+                    />
+                    <WithStyles(memo)
                       center={false}
-                      classes={
-                        Object {
-                          "child": "MuiTouchRipple-child",
-                          "childLeaving": "MuiTouchRipple-childLeaving",
-                          "childPulsate": "MuiTouchRipple-childPulsate",
-                          "ripple": "MuiTouchRipple-ripple",
-                          "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                          "rippleVisible": "MuiTouchRipple-rippleVisible",
-                          "root": "MuiTouchRipple-root",
-                        }
-                      }
                     >
-                      <span
-                        className="MuiTouchRipple-root"
+                      <ForwardRef(TouchRipple)
+                        center={false}
+                        classes={
+                          Object {
+                            "child": "MuiTouchRipple-child",
+                            "childLeaving": "MuiTouchRipple-childLeaving",
+                            "childPulsate": "MuiTouchRipple-childPulsate",
+                            "ripple": "MuiTouchRipple-ripple",
+                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+                            "rippleVisible": "MuiTouchRipple-rippleVisible",
+                            "root": "MuiTouchRipple-root",
+                          }
+                        }
                       >
-                        <TransitionGroup
-                          childFactory={[Function]}
-                          component={null}
-                          exit={true}
-                        />
-                      </span>
-                    </ForwardRef(TouchRipple)>
-                  </WithStyles(memo)>
-                </button>
-              </ForwardRef(ButtonBase)>
-            </WithStyles(ForwardRef(ButtonBase))>
-          </ForwardRef(CardActionArea)>
-        </WithStyles(ForwardRef(CardActionArea))>
-      </WithStyles(WithStyles(ForwardRef(CardActionArea)))>
-    </StyledCard>
-    <StyledCard
-      className="connection-card"
-      fluidType={1}
-      key="1"
-      onClick={[Function]}
-    >
-      <WithStyles(WithStyles(ForwardRef(CardActionArea)))
-        className="connection-card water"
+                        <span
+                          className="MuiTouchRipple-root"
+                        >
+                          <TransitionGroup
+                            childFactory={[Function]}
+                            component={null}
+                            exit={true}
+                          />
+                        </span>
+                      </ForwardRef(TouchRipple)>
+                    </WithStyles(memo)>
+                  </button>
+                </ForwardRef(ButtonBase)>
+              </WithStyles(ForwardRef(ButtonBase))>
+            </ForwardRef(CardActionArea)>
+          </WithStyles(ForwardRef(CardActionArea))>
+        </WithStyles(WithStyles(ForwardRef(CardActionArea)))>
+      </StyledCard>
+      <StyledCard
+        className="connection-card"
+        fluidType={1}
+        key="1"
         onClick={[Function]}
       >
-        <WithStyles(ForwardRef(CardActionArea))
+        <WithStyles(WithStyles(ForwardRef(CardActionArea)))
           className="connection-card water"
-          classes={
-            Object {
-              "root": "WithStyles(ForwardRef(CardActionArea))-root-1",
-            }
-          }
           onClick={[Function]}
         >
-          <ForwardRef(CardActionArea)
+          <WithStyles(ForwardRef(CardActionArea))
             className="connection-card water"
             classes={
               Object {
-                "focusHighlight": "MuiCardActionArea-focusHighlight",
-                "focusVisible": "Mui-focusVisible",
-                "root": "MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1",
+                "root": "WithStyles(ForwardRef(CardActionArea))-root-1",
               }
             }
             onClick={[Function]}
           >
-            <WithStyles(ForwardRef(ButtonBase))
-              className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card water"
-              focusVisibleClassName="Mui-focusVisible"
+            <ForwardRef(CardActionArea)
+              className="connection-card water"
+              classes={
+                Object {
+                  "focusHighlight": "MuiCardActionArea-focusHighlight",
+                  "focusVisible": "Mui-focusVisible",
+                  "root": "MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1",
+                }
+              }
               onClick={[Function]}
             >
-              <ForwardRef(ButtonBase)
+              <WithStyles(ForwardRef(ButtonBase))
                 className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card water"
-                classes={
-                  Object {
-                    "disabled": "Mui-disabled",
-                    "focusVisible": "Mui-focusVisible",
-                    "root": "MuiButtonBase-root",
-                  }
-                }
                 focusVisibleClassName="Mui-focusVisible"
                 onClick={[Function]}
               >
-                <button
-                  className="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card water"
-                  disabled={false}
-                  onBlur={[Function]}
+                <ForwardRef(ButtonBase)
+                  className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card water"
+                  classes={
+                    Object {
+                      "disabled": "Mui-disabled",
+                      "focusVisible": "Mui-focusVisible",
+                      "root": "MuiButtonBase-root",
+                    }
+                  }
+                  focusVisibleClassName="Mui-focusVisible"
                   onClick={[Function]}
-                  onDragLeave={[Function]}
-                  onFocus={[Function]}
-                  onKeyDown={[Function]}
-                  onKeyUp={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseLeave={[Function]}
-                  onMouseUp={[Function]}
-                  onTouchEnd={[Function]}
-                  onTouchMove={[Function]}
-                  onTouchStart={[Function]}
-                  tabIndex={0}
-                  type="button"
                 >
-                  <WithStyles(WithStyles(ForwardRef(CardContent)))>
-                    <WithStyles(ForwardRef(CardContent))
-                      classes={
-                        Object {
-                          "root": "WithStyles(ForwardRef(CardContent))-root-2",
-                        }
-                      }
-                    >
-                      <ForwardRef(CardContent)
+                  <button
+                    className="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card water"
+                    disabled={false}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onDragLeave={[Function]}
+                    onFocus={[Function]}
+                    onKeyDown={[Function]}
+                    onKeyUp={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseLeave={[Function]}
+                    onMouseUp={[Function]}
+                    onTouchEnd={[Function]}
+                    onTouchMove={[Function]}
+                    onTouchStart={[Function]}
+                    tabIndex={0}
+                    type="button"
+                  >
+                    <WithStyles(WithStyles(ForwardRef(CardContent)))>
+                      <WithStyles(ForwardRef(CardContent))
                         classes={
                           Object {
-                            "root": "MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2",
+                            "root": "WithStyles(ForwardRef(CardContent))-root-2",
                           }
                         }
                       >
-                        <div
-                          className="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
+                        <ForwardRef(CardContent)
+                          classes={
+                            Object {
+                              "root": "MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2",
+                            }
+                          }
                         >
-                          <Icon
-                            icon="test-file-stub"
-                            size={36}
-                            spin={false}
+                          <div
+                            className="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
                           >
-                            <Component
-                              className="styles__icon___23x3R"
-                              height={36}
-                              style={Object {}}
-                              width={36}
+                            <Icon
+                              icon="test-file-stub"
+                              size={36}
+                              spin={false}
                             >
-                              <svg
+                              <Component
                                 className="styles__icon___23x3R"
                                 height={36}
                                 style={Object {}}
                                 width={36}
                               >
-                                <use
-                                  xlinkHref="#test-file-stub"
-                                />
-                              </svg>
-                            </Component>
-                          </Icon>
-                          <div
-                            className="konnector-title text-18-bold water"
-                          >
-                            konnector_options.label_connect_to_water
+                                <svg
+                                  className="styles__icon___23x3R"
+                                  height={36}
+                                  style={Object {}}
+                                  width={36}
+                                >
+                                  <use
+                                    xlinkHref="#test-file-stub"
+                                  />
+                                </svg>
+                              </Component>
+                            </Icon>
+                            <div
+                              className="konnector-title text-18-bold water"
+                            >
+                              konnector_options.label_connect_to_water
+                            </div>
                           </div>
-                        </div>
-                      </ForwardRef(CardContent)>
-                    </WithStyles(ForwardRef(CardContent))>
-                  </WithStyles(WithStyles(ForwardRef(CardContent)))>
-                  <span
-                    className="MuiCardActionArea-focusHighlight"
-                  />
-                  <WithStyles(memo)
-                    center={false}
-                  >
-                    <ForwardRef(TouchRipple)
+                        </ForwardRef(CardContent)>
+                      </WithStyles(ForwardRef(CardContent))>
+                    </WithStyles(WithStyles(ForwardRef(CardContent)))>
+                    <span
+                      className="MuiCardActionArea-focusHighlight"
+                    />
+                    <WithStyles(memo)
                       center={false}
-                      classes={
-                        Object {
-                          "child": "MuiTouchRipple-child",
-                          "childLeaving": "MuiTouchRipple-childLeaving",
-                          "childPulsate": "MuiTouchRipple-childPulsate",
-                          "ripple": "MuiTouchRipple-ripple",
-                          "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                          "rippleVisible": "MuiTouchRipple-rippleVisible",
-                          "root": "MuiTouchRipple-root",
-                        }
-                      }
                     >
-                      <span
-                        className="MuiTouchRipple-root"
+                      <ForwardRef(TouchRipple)
+                        center={false}
+                        classes={
+                          Object {
+                            "child": "MuiTouchRipple-child",
+                            "childLeaving": "MuiTouchRipple-childLeaving",
+                            "childPulsate": "MuiTouchRipple-childPulsate",
+                            "ripple": "MuiTouchRipple-ripple",
+                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+                            "rippleVisible": "MuiTouchRipple-rippleVisible",
+                            "root": "MuiTouchRipple-root",
+                          }
+                        }
                       >
-                        <TransitionGroup
-                          childFactory={[Function]}
-                          component={null}
-                          exit={true}
-                        />
-                      </span>
-                    </ForwardRef(TouchRipple)>
-                  </WithStyles(memo)>
-                </button>
-              </ForwardRef(ButtonBase)>
-            </WithStyles(ForwardRef(ButtonBase))>
-          </ForwardRef(CardActionArea)>
-        </WithStyles(ForwardRef(CardActionArea))>
-      </WithStyles(WithStyles(ForwardRef(CardActionArea)))>
-    </StyledCard>
-    <StyledCard
-      className="connection-card"
-      fluidType={2}
-      key="2"
-      onClick={[Function]}
-    >
-      <WithStyles(WithStyles(ForwardRef(CardActionArea)))
-        className="connection-card gas"
+                        <span
+                          className="MuiTouchRipple-root"
+                        >
+                          <TransitionGroup
+                            childFactory={[Function]}
+                            component={null}
+                            exit={true}
+                          />
+                        </span>
+                      </ForwardRef(TouchRipple)>
+                    </WithStyles(memo)>
+                  </button>
+                </ForwardRef(ButtonBase)>
+              </WithStyles(ForwardRef(ButtonBase))>
+            </ForwardRef(CardActionArea)>
+          </WithStyles(ForwardRef(CardActionArea))>
+        </WithStyles(WithStyles(ForwardRef(CardActionArea)))>
+      </StyledCard>
+      <StyledCard
+        className="connection-card"
+        fluidType={2}
+        key="2"
         onClick={[Function]}
       >
-        <WithStyles(ForwardRef(CardActionArea))
+        <WithStyles(WithStyles(ForwardRef(CardActionArea)))
           className="connection-card gas"
-          classes={
-            Object {
-              "root": "WithStyles(ForwardRef(CardActionArea))-root-1",
-            }
-          }
           onClick={[Function]}
         >
-          <ForwardRef(CardActionArea)
+          <WithStyles(ForwardRef(CardActionArea))
             className="connection-card gas"
             classes={
               Object {
-                "focusHighlight": "MuiCardActionArea-focusHighlight",
-                "focusVisible": "Mui-focusVisible",
-                "root": "MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1",
+                "root": "WithStyles(ForwardRef(CardActionArea))-root-1",
               }
             }
             onClick={[Function]}
           >
-            <WithStyles(ForwardRef(ButtonBase))
-              className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card gas"
-              focusVisibleClassName="Mui-focusVisible"
+            <ForwardRef(CardActionArea)
+              className="connection-card gas"
+              classes={
+                Object {
+                  "focusHighlight": "MuiCardActionArea-focusHighlight",
+                  "focusVisible": "Mui-focusVisible",
+                  "root": "MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1",
+                }
+              }
               onClick={[Function]}
             >
-              <ForwardRef(ButtonBase)
+              <WithStyles(ForwardRef(ButtonBase))
                 className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card gas"
-                classes={
-                  Object {
-                    "disabled": "Mui-disabled",
-                    "focusVisible": "Mui-focusVisible",
-                    "root": "MuiButtonBase-root",
-                  }
-                }
                 focusVisibleClassName="Mui-focusVisible"
                 onClick={[Function]}
               >
-                <button
-                  className="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card gas"
-                  disabled={false}
-                  onBlur={[Function]}
+                <ForwardRef(ButtonBase)
+                  className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card gas"
+                  classes={
+                    Object {
+                      "disabled": "Mui-disabled",
+                      "focusVisible": "Mui-focusVisible",
+                      "root": "MuiButtonBase-root",
+                    }
+                  }
+                  focusVisibleClassName="Mui-focusVisible"
                   onClick={[Function]}
-                  onDragLeave={[Function]}
-                  onFocus={[Function]}
-                  onKeyDown={[Function]}
-                  onKeyUp={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseLeave={[Function]}
-                  onMouseUp={[Function]}
-                  onTouchEnd={[Function]}
-                  onTouchMove={[Function]}
-                  onTouchStart={[Function]}
-                  tabIndex={0}
-                  type="button"
                 >
-                  <WithStyles(WithStyles(ForwardRef(CardContent)))>
-                    <WithStyles(ForwardRef(CardContent))
-                      classes={
-                        Object {
-                          "root": "WithStyles(ForwardRef(CardContent))-root-2",
-                        }
-                      }
-                    >
-                      <ForwardRef(CardContent)
+                  <button
+                    className="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card gas"
+                    disabled={false}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onDragLeave={[Function]}
+                    onFocus={[Function]}
+                    onKeyDown={[Function]}
+                    onKeyUp={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseLeave={[Function]}
+                    onMouseUp={[Function]}
+                    onTouchEnd={[Function]}
+                    onTouchMove={[Function]}
+                    onTouchStart={[Function]}
+                    tabIndex={0}
+                    type="button"
+                  >
+                    <WithStyles(WithStyles(ForwardRef(CardContent)))>
+                      <WithStyles(ForwardRef(CardContent))
                         classes={
                           Object {
-                            "root": "MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2",
+                            "root": "WithStyles(ForwardRef(CardContent))-root-2",
                           }
                         }
                       >
-                        <div
-                          className="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
+                        <ForwardRef(CardContent)
+                          classes={
+                            Object {
+                              "root": "MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2",
+                            }
+                          }
                         >
-                          <Icon
-                            icon="test-file-stub"
-                            size={36}
-                            spin={false}
+                          <div
+                            className="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
                           >
-                            <Component
-                              className="styles__icon___23x3R"
-                              height={36}
-                              style={Object {}}
-                              width={36}
+                            <Icon
+                              icon="test-file-stub"
+                              size={36}
+                              spin={false}
                             >
-                              <svg
+                              <Component
                                 className="styles__icon___23x3R"
                                 height={36}
                                 style={Object {}}
                                 width={36}
                               >
-                                <use
-                                  xlinkHref="#test-file-stub"
-                                />
-                              </svg>
-                            </Component>
-                          </Icon>
-                          <div
-                            className="konnector-title text-18-bold gas"
-                          >
-                            konnector_options.label_connect_to_gas
+                                <svg
+                                  className="styles__icon___23x3R"
+                                  height={36}
+                                  style={Object {}}
+                                  width={36}
+                                >
+                                  <use
+                                    xlinkHref="#test-file-stub"
+                                  />
+                                </svg>
+                              </Component>
+                            </Icon>
+                            <div
+                              className="konnector-title text-18-bold gas"
+                            >
+                              konnector_options.label_connect_to_gas
+                            </div>
                           </div>
-                        </div>
-                      </ForwardRef(CardContent)>
-                    </WithStyles(ForwardRef(CardContent))>
-                  </WithStyles(WithStyles(ForwardRef(CardContent)))>
-                  <span
-                    className="MuiCardActionArea-focusHighlight"
-                  />
-                  <WithStyles(memo)
-                    center={false}
-                  >
-                    <ForwardRef(TouchRipple)
+                        </ForwardRef(CardContent)>
+                      </WithStyles(ForwardRef(CardContent))>
+                    </WithStyles(WithStyles(ForwardRef(CardContent)))>
+                    <span
+                      className="MuiCardActionArea-focusHighlight"
+                    />
+                    <WithStyles(memo)
                       center={false}
-                      classes={
-                        Object {
-                          "child": "MuiTouchRipple-child",
-                          "childLeaving": "MuiTouchRipple-childLeaving",
-                          "childPulsate": "MuiTouchRipple-childPulsate",
-                          "ripple": "MuiTouchRipple-ripple",
-                          "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                          "rippleVisible": "MuiTouchRipple-rippleVisible",
-                          "root": "MuiTouchRipple-root",
-                        }
-                      }
                     >
-                      <span
-                        className="MuiTouchRipple-root"
+                      <ForwardRef(TouchRipple)
+                        center={false}
+                        classes={
+                          Object {
+                            "child": "MuiTouchRipple-child",
+                            "childLeaving": "MuiTouchRipple-childLeaving",
+                            "childPulsate": "MuiTouchRipple-childPulsate",
+                            "ripple": "MuiTouchRipple-ripple",
+                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+                            "rippleVisible": "MuiTouchRipple-rippleVisible",
+                            "root": "MuiTouchRipple-root",
+                          }
+                        }
                       >
-                        <TransitionGroup
-                          childFactory={[Function]}
-                          component={null}
-                          exit={true}
-                        />
-                      </span>
-                    </ForwardRef(TouchRipple)>
-                  </WithStyles(memo)>
-                </button>
-              </ForwardRef(ButtonBase)>
-            </WithStyles(ForwardRef(ButtonBase))>
-          </ForwardRef(CardActionArea)>
-        </WithStyles(ForwardRef(CardActionArea))>
-      </WithStyles(WithStyles(ForwardRef(CardActionArea)))>
-    </StyledCard>
+                        <span
+                          className="MuiTouchRipple-root"
+                        >
+                          <TransitionGroup
+                            childFactory={[Function]}
+                            component={null}
+                            exit={true}
+                          />
+                        </span>
+                      </ForwardRef(TouchRipple)>
+                    </WithStyles(memo)>
+                  </button>
+                </ForwardRef(ButtonBase)>
+              </WithStyles(ForwardRef(ButtonBase))>
+            </ForwardRef(CardActionArea)>
+          </WithStyles(ForwardRef(CardActionArea))>
+        </WithStyles(WithStyles(ForwardRef(CardActionArea)))>
+      </StyledCard>
+    </div>
   </KonnectorViewerList>
 </Provider>
 `;
diff --git a/src/components/Konnector/konnectorViewerList.scss b/src/components/Konnector/konnectorViewerList.scss
index 4005432f3ca26f473d1689fdc87837cbcd3cb251..bb94bfef8f16e23af9058dbccff1244f001fa293 100644
--- a/src/components/Konnector/konnectorViewerList.scss
+++ b/src/components/Konnector/konnectorViewerList.scss
@@ -1,16 +1,21 @@
 @import 'src/styles/base/color';
 @import 'src/styles/base/breakpoint';
 
-button.connection-card {
-  height: 80px;
-  margin-bottom: 1rem;
-  &.electricity {
-    border: 1px solid var(--elecColor40);
-  }
-  &.gas {
-    border: 1px solid var(--gasColor40);
-  }
-  &.water {
-    border: 1px solid var(--waterColor40);
+.konnectorsList {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding-top: 1rem;
+  button.connection-card {
+    height: 80px;
+    &.electricity {
+      border: 1px solid var(--elecColor40);
+    }
+    &.gas {
+      border: 1px solid var(--gasColor40);
+    }
+    &.water {
+      border: 1px solid var(--waterColor40);
+    }
   }
 }