diff --git a/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap b/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap
index 5399a7450cbdb4207f2d0b1f3ce37d736558d45a..6a487b21e1ed33a10a1e4786cac1c50a0fb4eadd 100644
--- a/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap
+++ b/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap
@@ -16,15 +16,16 @@ exports[`KonnectorViewerList component should be rendered correctly 1`] = `
   <KonnectorViewerList>
     <StyledCard
       className="connection-card"
+      fluidType={0}
       key="0"
       onClick={[Function]}
     >
       <WithStyles(WithStyles(ForwardRef(CardActionArea)))
-        className="connection-card"
+        className="connection-card electricity"
         onClick={[Function]}
       >
         <WithStyles(ForwardRef(CardActionArea))
-          className="connection-card"
+          className="connection-card electricity"
           classes={
             Object {
               "root": "WithStyles(ForwardRef(CardActionArea))-root-1",
@@ -33,7 +34,7 @@ exports[`KonnectorViewerList component should be rendered correctly 1`] = `
           onClick={[Function]}
         >
           <ForwardRef(CardActionArea)
-            className="connection-card"
+            className="connection-card electricity"
             classes={
               Object {
                 "focusHighlight": "MuiCardActionArea-focusHighlight",
@@ -44,12 +45,12 @@ exports[`KonnectorViewerList component should be rendered correctly 1`] = `
             onClick={[Function]}
           >
             <WithStyles(ForwardRef(ButtonBase))
-              className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card"
+              className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card electricity"
               focusVisibleClassName="Mui-focusVisible"
               onClick={[Function]}
             >
               <ForwardRef(ButtonBase)
-                className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card"
+                className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card electricity"
                 classes={
                   Object {
                     "disabled": "Mui-disabled",
@@ -61,7 +62,7 @@ exports[`KonnectorViewerList component should be rendered correctly 1`] = `
                 onClick={[Function]}
               >
                 <button
-                  className="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card"
+                  className="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card electricity"
                   disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -168,15 +169,16 @@ exports[`KonnectorViewerList component should be rendered correctly 1`] = `
     </StyledCard>
     <StyledCard
       className="connection-card"
+      fluidType={1}
       key="1"
       onClick={[Function]}
     >
       <WithStyles(WithStyles(ForwardRef(CardActionArea)))
-        className="connection-card"
+        className="connection-card water"
         onClick={[Function]}
       >
         <WithStyles(ForwardRef(CardActionArea))
-          className="connection-card"
+          className="connection-card water"
           classes={
             Object {
               "root": "WithStyles(ForwardRef(CardActionArea))-root-1",
@@ -185,7 +187,7 @@ exports[`KonnectorViewerList component should be rendered correctly 1`] = `
           onClick={[Function]}
         >
           <ForwardRef(CardActionArea)
-            className="connection-card"
+            className="connection-card water"
             classes={
               Object {
                 "focusHighlight": "MuiCardActionArea-focusHighlight",
@@ -196,12 +198,12 @@ exports[`KonnectorViewerList component should be rendered correctly 1`] = `
             onClick={[Function]}
           >
             <WithStyles(ForwardRef(ButtonBase))
-              className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card"
+              className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card water"
               focusVisibleClassName="Mui-focusVisible"
               onClick={[Function]}
             >
               <ForwardRef(ButtonBase)
-                className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card"
+                className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card water"
                 classes={
                   Object {
                     "disabled": "Mui-disabled",
@@ -213,7 +215,7 @@ exports[`KonnectorViewerList component should be rendered correctly 1`] = `
                 onClick={[Function]}
               >
                 <button
-                  className="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card"
+                  className="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card water"
                   disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -320,15 +322,16 @@ exports[`KonnectorViewerList component should be rendered correctly 1`] = `
     </StyledCard>
     <StyledCard
       className="connection-card"
+      fluidType={2}
       key="2"
       onClick={[Function]}
     >
       <WithStyles(WithStyles(ForwardRef(CardActionArea)))
-        className="connection-card"
+        className="connection-card gas"
         onClick={[Function]}
       >
         <WithStyles(ForwardRef(CardActionArea))
-          className="connection-card"
+          className="connection-card gas"
           classes={
             Object {
               "root": "WithStyles(ForwardRef(CardActionArea))-root-1",
@@ -337,7 +340,7 @@ exports[`KonnectorViewerList component should be rendered correctly 1`] = `
           onClick={[Function]}
         >
           <ForwardRef(CardActionArea)
-            className="connection-card"
+            className="connection-card gas"
             classes={
               Object {
                 "focusHighlight": "MuiCardActionArea-focusHighlight",
@@ -348,12 +351,12 @@ exports[`KonnectorViewerList component should be rendered correctly 1`] = `
             onClick={[Function]}
           >
             <WithStyles(ForwardRef(ButtonBase))
-              className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card"
+              className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card gas"
               focusVisibleClassName="Mui-focusVisible"
               onClick={[Function]}
             >
               <ForwardRef(ButtonBase)
-                className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card"
+                className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card gas"
                 classes={
                   Object {
                     "disabled": "Mui-disabled",
@@ -365,7 +368,7 @@ exports[`KonnectorViewerList component should be rendered correctly 1`] = `
                 onClick={[Function]}
               >
                 <button
-                  className="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card"
+                  className="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card gas"
                   disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}