diff --git a/nifi-registry-core/nifi-registry-web-ui/pom.xml b/nifi-registry-core/nifi-registry-web-ui/pom.xml
index 866b698..337fa6f 100644
--- a/nifi-registry-core/nifi-registry-web-ui/pom.xml
+++ b/nifi-registry-core/nifi-registry-web-ui/pom.xml
@@ -156,11 +156,11 @@
                                     <filtering>false</filtering>
                                     <includes>
                                         <!-- roboto -->
-                                        <include>roboto-fontface/fonts/roboto-slab/Roboto-Slab-Regular.ttf</include>
-                                        <include>roboto-fontface/fonts/roboto/Roboto-Regular.ttf</include>
-                                        <include>roboto-fontface/fonts/roboto/Roboto-Medium.ttf</include>
-                                        <include>roboto-fontface/fonts/roboto/Roboto-Light.ttf</include>
-                                        <include>roboto-fontface/fonts/roboto/Roboto-Bold.ttf</include>
+                                        <include>roboto-fontface/fonts/roboto-slab/Roboto-Slab-Regular.woff2</include>
+                                        <include>roboto-fontface/fonts/roboto/Roboto-Regular.woff2</include>
+                                        <include>roboto-fontface/fonts/roboto/Roboto-Medium.woff2</include>
+                                        <include>roboto-fontface/fonts/roboto/Roboto-Light.woff2</include>
+                                        <include>roboto-fontface/fonts/roboto/Roboto-Bold.woff2</include>
                                         <include>roboto-fontface/LICENSE*</include>
                                         <!-- covalent -->
                                         <include>@covalent/core/common/platform.css</include>
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/.stylelintrc.js b/nifi-registry-core/nifi-registry-web-ui/src/main/.stylelintrc.js
index 9d2d729..c07fe3d 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/.stylelintrc.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/.stylelintrc.js
@@ -24,7 +24,7 @@
         }],
         "declaration-empty-line-before": null,
         "selector-type-no-unknown": [true, {
-            "ignoreTypes": ["/mat-/", "/flow-designer-/", "/fds-/"]
+            "ignoreTypes": ["/mat-/", "/flow-designer-/", "/fds-/", "/td-/"]
         }],
         "font-family-no-missing-generic-family-keyword": null
     }
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/package-lock.json b/nifi-registry-core/nifi-registry-web-ui/src/main/package-lock.json
index 27e8dd6..070dce6 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/package-lock.json
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/package-lock.json
@@ -14,104 +14,168 @@
   "//": "See the License for the specific language governing permissions and",
   "//": "limitations under the License.",
   "name": "nifi-registry",
-  "version": "0.0.1",
+  "version": "0.0.5-SNAPSHOT",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
     "@angular/animations": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-5.2.0.tgz",
-      "integrity": "sha512-JLR42YHiJppO4ruAkFxgbzghUDtHkXHkKPM8udd2qyt16T7e1OX7EEOrrmldUu59CC56tZnJ/32p4SrYmxyBSA==",
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-8.1.1.tgz",
+      "integrity": "sha512-9P9Yyf2/IUMs0MR4CfthBaMdizbTh8dDSLJHhMw1PjxPQ3c6mn74uY46NyxcJnCxII9oA2pnnV/O+10JFUFKMw==",
       "requires": {
-        "tslib": "1.8.0"
+        "tslib": "1.10.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.10.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
+          "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
+        }
       }
     },
     "@angular/cdk": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-5.2.0.tgz",
-      "integrity": "sha1-Q2j2dJ6RXNzHXTJa4z/bP4WogQg=",
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-8.1.0.tgz",
+      "integrity": "sha512-CKZTtLWNSSM+DmZS5IHhhh+Tb3+N3/WnINq55yQrupk0hIsfyssMTBp6GHogE9btfo9+73B5fSK+VNj6VuD/Qw==",
       "requires": {
+        "parse5": "5.1.0",
         "tslib": "1.8.0"
       }
     },
     "@angular/common": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@angular/common/-/common-5.2.0.tgz",
-      "integrity": "sha512-yMFn2isC7/XOs56/2Kzzbb1AASHiwipAPOVFtKe7TdZQClO8fJXwCnk326rzr615+CG0eSBNQWeiFGyWN2riBA==",
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/@angular/common/-/common-8.1.1.tgz",
+      "integrity": "sha512-kgLtexfPhAyNFlwJHKBkpwKyt/19pfULIJWJpUahFqXdYE3LkRNMJQqgfz7DCNpAQxG7B6u4ocq1j2Hx206kxw==",
       "requires": {
-        "tslib": "1.8.0"
+        "tslib": "1.10.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.10.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
+          "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
+        }
       }
     },
     "@angular/compiler": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-5.2.0.tgz",
-      "integrity": "sha512-RfYa4ESgjGX0T0ob/Xz00IF7nd2xZkoyRy6oKgL82q42uzB3xZUDMrFNgeGxAUs3H22IkL46/5SSPOMOTMZ0NA==",
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-8.1.1.tgz",
+      "integrity": "sha512-wz8Mc45EGax5RKRYYqgXI8lr1d0w+f9BDbHui7b3hQtKM5Mj1QxLXiSOYX0dt3lG4VzrxpO0Xku5tS3D4T1xxQ==",
       "requires": {
-        "tslib": "1.8.0"
+        "tslib": "1.10.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.10.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
+          "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
+        }
       }
     },
     "@angular/core": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@angular/core/-/core-5.2.0.tgz",
-      "integrity": "sha512-s2ne45DguNUubhC1YgybGECC4Tyx3G4EZCntUiRMDWWkmKXSK+6dgHMesyDo8R5Oat8VfN4Anf8l3JHS1He8kg==",
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/@angular/core/-/core-8.1.1.tgz",
+      "integrity": "sha512-B6x8IZeu0Qm2H13leEcNzsx0pGKHMvowziurvDnm7W97MaVrYrgbelNsnly4wNX91FzdBtSVXqbe3jijAD9kjA==",
       "requires": {
-        "tslib": "1.8.0"
+        "tslib": "1.10.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.10.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
+          "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
+        }
       }
     },
     "@angular/flex-layout": {
-      "version": "5.0.0-beta.14",
-      "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-5.0.0-beta.14.tgz",
-      "integrity": "sha512-/fsOqXFUKdCmzzZx0bZ0HCYwcV+BSbVuIgOhaCrZKHj2rqiWKKPgj1ErU3HMT68bBBGag0u0skTdLGtrBorRIA==",
+      "version": "8.0.0-beta.26",
+      "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-8.0.0-beta.26.tgz",
+      "integrity": "sha512-lXDLlMSNQhidW0grvisIsj/3gqLuYyN2MvABuRYybnFTc233sXGZuOAaulqq663LA0/DP/GNcz6a+A4ZAAlmPA==",
       "requires": {
         "tslib": "1.8.0"
       }
     },
     "@angular/forms": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-5.2.0.tgz",
-      "integrity": "sha512-g1/SF9lY0ZwzJ0w4NXbFsTGGEuUdgtaZny8DmkaqtmA7idby3FW398X0tv25KQfVYKtL+p9Jp1Y8EI0CvrIsvw==",
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-8.1.1.tgz",
+      "integrity": "sha512-jz05UIiIY2Zz/nEveL4Pm9mVCAd5O6JwVDWTHKQ64nKYIN9Nepzgb0ASeOBEZA4qP82KTGJtUm2AN4L7fXN6Pw==",
       "requires": {
-        "tslib": "1.8.0"
+        "tslib": "1.10.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.10.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
+          "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
+        }
       }
     },
     "@angular/http": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@angular/http/-/http-5.2.0.tgz",
-      "integrity": "sha512-V5Cl24dP3rCXTTQvDc0TIKoWqBRAa0DWAQbtr7iuDAt5a1vPGdKz5K1sEiiV6ziwX6gzjiwHjUvL+B+WbIUrQA==",
+      "version": "8.0.0-beta.10",
+      "resolved": "https://registry.npmjs.org/@angular/http/-/http-8.0.0-beta.10.tgz",
+      "integrity": "sha512-NV2TGnrpivJvOa4/1O/GQfFocPSib4NUieh2umNpJYa2CYjyYfgWpmh+0wDqh23ThPPxRufywZQkkSeb+X9PRA==",
       "requires": {
-        "tslib": "1.8.0"
+        "tslib": "1.9.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz",
+          "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ=="
+        }
       }
     },
     "@angular/material": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@angular/material/-/material-5.2.0.tgz",
-      "integrity": "sha1-hZnjFJ1ISH4+kulB+p3FUXbjoM8=",
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-8.1.1.tgz",
+      "integrity": "sha512-45aaxKuLTrthzhAhG2+OY86wafuRBteZcRjDG7rKZ3Cc3KteUp5QwAi+QbhHzs4O3WXLWTAmuLYJelRqRqqw7g==",
       "requires": {
         "tslib": "1.8.0"
       }
     },
     "@angular/platform-browser": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-5.2.0.tgz",
-      "integrity": "sha512-c6cR15MfopPwGZ097HdRuAi9+R9BhA3bRRFpP2HmrSSB/BW4ZNovUYwB2QUMSYbd9s0lYTtnavqGm6DKcyF2QA==",
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-8.1.1.tgz",
+      "integrity": "sha512-uP9UIhi9NYTEbfvNj4misBspXkItFopA2pRk083AhHEhOKs79WvMI15w5H5ziIFeH+4UiCvyKrSnPfcjP+Yrvg==",
       "requires": {
-        "tslib": "1.8.0"
+        "tslib": "1.10.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.10.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
+          "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
+        }
       }
     },
     "@angular/platform-browser-dynamic": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-5.2.0.tgz",
-      "integrity": "sha512-xG1eNoi8sm4Jcly2y98r5mqYVe3XV8sUJCtOhvGBYtvt4dKEQ5tOns6fWQ0nUbl6Vv3Y0xgGUS1JCtfut3DuaQ==",
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-8.1.1.tgz",
+      "integrity": "sha512-yUazvP4IBNgXjbzo+NKmu7lVYrrplAN3HSkgYszXwd9uvWLtk1CtXER5hSJE5ZE3Lawoh7PU5hOfMYbqtdAbwg==",
       "requires": {
-        "tslib": "1.8.0"
+        "tslib": "1.10.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.10.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
+          "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
+        }
       }
     },
     "@angular/router": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@angular/router/-/router-5.2.0.tgz",
-      "integrity": "sha512-VXDXtp2A1GQEUEhXg0ZzqHdTUERLgDSo3/Mmpzt+dgLMKlXDSCykcm4gINwE5VQLGD1zQvDFCCRv3seGRNfrqA==",
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/@angular/router/-/router-8.1.1.tgz",
+      "integrity": "sha512-UTL/TjokRUd3hdePBrj1ITmBGq+EcVNz3D18lFi96461ZLQeXSbbf3vjQfL6SE53E4+hfKKR7/tOqQOgb5br7A==",
       "requires": {
-        "tslib": "1.8.0"
+        "tslib": "1.10.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.10.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
+          "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
+        }
       }
     },
     "@babel/code-frame": {
@@ -1097,11 +1161,18 @@
       }
     },
     "@covalent/core": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@covalent/core/-/core-1.0.0.tgz",
-      "integrity": "sha512-qUGL6CtyHNa3ttKGrvuQY0lJyQR9Dxp04vP0vrXmYrKapVbfYZ82qwJ2+PrX1EcWAQ6b/B2giFe0Q83ePin04g==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@covalent/core/-/core-2.1.0.tgz",
+      "integrity": "sha512-I3/VL76E198y8O2vWXci7uLEfBEB9dO8uZWwaJN3RFlSuS/HCzc/NUrElJ9aRwgmTm8KLQgJheVbg/CRQbn2Ug==",
       "requires": {
-        "tslib": "1.8.0"
+        "tslib": "1.10.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.10.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
+          "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
+        }
       }
     },
     "@mrmlnc/readdir-enhanced": {
@@ -1115,9 +1186,9 @@
       }
     },
     "@nifi-fds/core": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/@nifi-fds/core/-/core-0.1.0.tgz",
-      "integrity": "sha512-aUoXOjhgQBZSxmzpBeYupIGvtw+J7Os+6n3q9JS22vcr7uVh588UMb1STKH1nVPRtDgkiU9ooGuXp9hkSCnC0w=="
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@nifi-fds/core/-/core-0.2.0.tgz",
+      "integrity": "sha512-6yadtM2ahtkeFnuYN+D6M0qB81y2F3uBAC6ZovXe1c1lSocXSuJCoFJq9NRW6KFFqYAQnOyZi1+hA1Kw2+UfXg=="
     },
     "@nodelib/fs.stat": {
       "version": "1.1.3",
@@ -5785,12 +5856,12 @@
               "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.6.tgz",
               "integrity": "sha1-j5A0HmilPMySh4jaz80Rs265t44=",
               "requires": {
-                "core-util-is": "~1.0.0",
-                "inherits": "~2.0.1",
-                "isarray": "~1.0.0",
-                "process-nextick-args": "~1.0.6",
-                "string_decoder": "~0.10.x",
-                "util-deprecate": "~1.0.1"
+                "core-util-is": "1.0.2",
+                "inherits": "2.0.3",
+                "isarray": "1.0.0",
+                "process-nextick-args": "1.0.7",
+                "string_decoder": "0.10.31",
+                "util-deprecate": "1.0.2"
               }
             },
             "string_decoder": {
@@ -5869,7 +5940,7 @@
               "dev": true,
               "optional": true,
               "requires": {
-                "yallist": "3.0.0"
+                "yallist": "3.0.3"
               }
             }
           }
@@ -5922,9 +5993,9 @@
               "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.1.tgz",
               "integrity": "sha1-ySEptvHX9SrPmvQkom44ZKBc6wo=",
               "requires": {
-                "code-point-at": "1.0.0",
+                "code-point-at": "1.1.0",
                 "is-fullwidth-code-point": "1.0.0",
-                "strip-ansi": "3.0.0"
+                "strip-ansi": "3.0.1"
               }
             },
             "wide-align": {
@@ -5943,7 +6014,7 @@
           "requires": {
             "fs.realpath": "1.0.0",
             "inflight": "1.0.4",
-            "inherits": "2",
+            "inherits": "2.0.3",
             "minimatch": "3.0.4",
             "once": "1.3.0",
             "path-is-absolute": "1.0.0"
@@ -5955,7 +6026,7 @@
               "integrity": "sha1-bLtFIevVHODsCpNr/XZX736bFyo=",
               "requires": {
                 "once": "1.3.0",
-                "wrappy": "1"
+                "wrappy": "1.0.2"
               }
             },
             "once": {
@@ -5978,7 +6049,7 @@
           "version": "0.4.24",
           "bundled": true,
           "requires": {
-            "safer-buffer": ">= 2.1.2 < 3"
+            "safer-buffer": "2.1.2"
           }
         },
         "ignore-walk": {
@@ -5992,8 +6063,8 @@
           "version": "1.0.6",
           "bundled": true,
           "requires": {
-            "once": "1.3.0",
-            "wrappy": "1"
+            "once": "1.4.0",
+            "wrappy": "1.0.2"
           }
         },
         "inherits": {
@@ -6039,7 +6110,7 @@
               "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.7.tgz",
               "integrity": "sha1-Pv/DxQ4ABTH7cg6v+A8K6O8jz1k=",
               "requires": {
-                "balanced-match": "0.4.1",
+                "balanced-match": "0.4.2",
                 "concat-map": "0.0.1"
               }
             }
@@ -6055,14 +6126,14 @@
           "bundled": true,
           "requires": {
             "safe-buffer": "5.1.2",
-            "yallist": "3.0.0"
+            "yallist": "3.0.3"
           }
         },
         "minizlib": {
           "version": "1.2.1",
           "bundled": true,
           "requires": {
-            "minipass": "2.2.1"
+            "minipass": "2.3.5"
           }
         },
         "mkdirp": {
@@ -6089,8 +6160,8 @@
           "version": "2.3.0",
           "bundled": true,
           "requires": {
-            "debug": "4.1.0",
-            "iconv-lite": "0.4.4",
+            "debug": "4.1.1",
+            "iconv-lite": "0.4.24",
             "sax": "1.2.4"
           }
         },
@@ -6109,7 +6180,7 @@
             "rc": "1.2.7",
             "rimraf": "2.6.1",
             "semver": "5.3.0",
-            "tar": "4"
+            "tar": "4.4.8"
           },
           "dependencies": {
             "debug": {
@@ -6157,8 +6228,8 @@
               "dev": true,
               "optional": true,
               "requires": {
-                "debug": "2.1.2",
-                "iconv-lite": "0.4.4",
+                "debug": "2.6.9",
+                "iconv-lite": "0.4.24",
                 "sax": "1.2.4"
               }
             },
@@ -6169,8 +6240,8 @@
               "dev": true,
               "optional": true,
               "requires": {
-                "ignore-walk": "3.0.0",
-                "npm-bundled": "1.0.1"
+                "ignore-walk": "3.0.1",
+                "npm-bundled": "1.0.6"
               }
             },
             "npmlog": {
@@ -6180,10 +6251,10 @@
               "dev": true,
               "optional": true,
               "requires": {
-                "are-we-there-yet": "~1.1.2",
-                "console-control-strings": "~1.1.0",
-                "gauge": "~2.7.1",
-                "set-blocking": "~2.0.0"
+                "are-we-there-yet": "1.1.5",
+                "console-control-strings": "1.1.0",
+                "gauge": "2.7.4",
+                "set-blocking": "2.0.0"
               }
             },
             "rc": {
@@ -6194,9 +6265,9 @@
               "optional": true,
               "requires": {
                 "deep-extend": "0.5.1",
-                "ini": "~1.3.0",
+                "ini": "1.3.5",
                 "minimist": "1.2.0",
-                "strip-json-comments": "~2.0.1"
+                "strip-json-comments": "2.0.1"
               }
             },
             "rimraf": {
@@ -6206,7 +6277,7 @@
               "dev": true,
               "optional": true,
               "requires": {
-                "glob": "7.0.5"
+                "glob": "7.1.3"
               }
             },
             "semver": {
@@ -6224,7 +6295,7 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "abbrev": "1",
+            "abbrev": "1.1.1",
             "osenv": "0.1.4"
           },
           "dependencies": {
@@ -6235,8 +6306,8 @@
               "dev": true,
               "optional": true,
               "requires": {
-                "os-homedir": "1.0.0",
-                "os-tmpdir": "1.0.0"
+                "os-homedir": "1.0.2",
+                "os-tmpdir": "1.0.2"
               }
             }
           }
@@ -6250,17 +6321,17 @@
           "bundled": true,
           "requires": {
             "ignore-walk": "3.0.1",
-            "npm-bundled": "1.0.1"
+            "npm-bundled": "1.0.6"
           }
         },
         "npmlog": {
           "version": "4.1.2",
           "bundled": true,
           "requires": {
-            "are-we-there-yet": "~1.1.2",
-            "console-control-strings": "~1.1.0",
-            "gauge": "~2.7.3",
-            "set-blocking": "~2.0.0"
+            "are-we-there-yet": "1.1.5",
+            "console-control-strings": "1.1.0",
+            "gauge": "2.7.4",
+            "set-blocking": "2.0.0"
           }
         },
         "number-is-nan": {
@@ -6275,7 +6346,7 @@
           "version": "1.4.0",
           "bundled": true,
           "requires": {
-            "wrappy": "1"
+            "wrappy": "1.0.2"
           }
         },
         "os-homedir": {
@@ -6290,8 +6361,8 @@
           "version": "0.1.5",
           "bundled": true,
           "requires": {
-            "os-homedir": "1.0.0",
-            "os-tmpdir": "1.0.0"
+            "os-homedir": "1.0.2",
+            "os-tmpdir": "1.0.2"
           }
         },
         "path-is-absolute": {
@@ -6307,9 +6378,9 @@
           "bundled": true,
           "requires": {
             "deep-extend": "0.6.0",
-            "ini": "~1.3.0",
+            "ini": "1.3.5",
             "minimist": "1.2.0",
-            "strip-json-comments": "~2.0.1"
+            "strip-json-comments": "2.0.1"
           },
           "dependencies": {
             "minimist": {
@@ -6322,13 +6393,13 @@
           "version": "2.3.6",
           "bundled": true,
           "requires": {
-            "core-util-is": "~1.0.0",
-            "inherits": "~2.0.3",
-            "isarray": "~1.0.0",
-            "process-nextick-args": "~2.0.0",
-            "safe-buffer": "~5.1.1",
-            "string_decoder": "~1.1.1",
-            "util-deprecate": "~1.0.1"
+            "core-util-is": "1.0.2",
+            "inherits": "2.0.3",
+            "isarray": "1.0.0",
+            "process-nextick-args": "2.0.0",
+            "safe-buffer": "5.1.2",
+            "string_decoder": "1.1.1",
+            "util-deprecate": "1.0.2"
           }
         },
         "rimraf": {
@@ -6366,16 +6437,16 @@
           "version": "1.0.2",
           "bundled": true,
           "requires": {
-            "code-point-at": "1.0.0",
+            "code-point-at": "1.1.0",
             "is-fullwidth-code-point": "1.0.0",
-            "strip-ansi": "3.0.0"
+            "strip-ansi": "3.0.1"
           }
         },
         "string_decoder": {
           "version": "1.1.1",
           "bundled": true,
           "requires": {
-            "safe-buffer": "~5.1.0"
+            "safe-buffer": "5.1.2"
           }
         },
         "strip-ansi": {
@@ -6418,7 +6489,7 @@
               "dev": true,
               "requires": {
                 "safe-buffer": "5.1.2",
-                "yallist": "3.0.0"
+                "yallist": "3.0.2"
               }
             },
             "minizlib": {
@@ -6428,7 +6499,7 @@
               "dev": true,
               "optional": true,
               "requires": {
-                "minipass": "2.2.1"
+                "minipass": "2.3.4"
               }
             },
             "mkdirp": {
@@ -6457,7 +6528,7 @@
           "version": "1.1.3",
           "bundled": true,
           "requires": {
-            "string-width": "1.0.2 || 2"
+            "string-width": "1.0.2"
           }
         },
         "wrappy": {
@@ -10857,6 +10928,12 @@
       "integrity": "sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=",
       "dev": true
     },
+    "parse5": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.0.tgz",
+      "integrity": "sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ==",
+      "optional": true
+    },
     "parseqs": {
       "version": "0.0.5",
       "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.5.tgz",
@@ -12618,9 +12695,9 @@
       }
     },
     "roboto-fontface": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/roboto-fontface/-/roboto-fontface-0.9.0.tgz",
-      "integrity": "sha512-+G6+JXJWrXU98gUidXWgF1U+T7r21aiyqSWi5ZiZ/TBAWssw/t6DWM8piqNqaLqcO78DVJwfwHzlz8PuCMg0/Q=="
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/roboto-fontface/-/roboto-fontface-0.10.0.tgz",
+      "integrity": "sha512-OlwfYEgA2RdboZohpldlvJ1xngOins5d7ejqnIBWr9KaMxsnBqotpptRXTyfNRLnFpqzX6sTDt+X+a+6udnU8g=="
     },
     "run-async": {
       "version": "2.3.0",
@@ -12647,17 +12724,17 @@
       }
     },
     "rxjs": {
-      "version": "5.5.6",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.5.6.tgz",
-      "integrity": "sha512-v4Q5HDC0FHAQ7zcBX7T2IL6O5ltl1a2GX4ENjPXg6SjDY69Cmx9v4113C99a4wGF16ClPv5Z8mghuYorVkg/kg==",
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.2.tgz",
+      "integrity": "sha512-HUb7j3kvb7p7eCUHE3FqjoDsC1xfZQ4AHFWfTKSpZ+sAhhz5X1WX0ZuUqWbzB2QhSLp3DoLUG+hMdEDKqWo2Zg==",
       "requires": {
-        "symbol-observable": "1.0.1"
+        "tslib": "1.10.0"
       },
       "dependencies": {
-        "symbol-observable": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.0.1.tgz",
-          "integrity": "sha1-g0D8RwLDEi310iKI+IKD9RPT/dQ="
+        "tslib": {
+          "version": "1.10.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
+          "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
         }
       }
     },
@@ -14378,16 +14455,6 @@
       "integrity": "sha512-LO95GIW16x69LuND1nuuwM4pjgFGupg7pZ/4lU86AmchPKrhk0o2tpMU2unXRrqo81iAFe1YJ0nAGEVwsrZAgg==",
       "dev": true
     },
-    "systemjs": {
-      "version": "0.21.3",
-      "resolved": "https://registry.npmjs.org/systemjs/-/systemjs-0.21.3.tgz",
-      "integrity": "sha512-1x0kczVnT83fq/nE3ysXra9EEhOKv4+cMS95YkexWY8128J2VL8rk/nTWZig8qoY4/ZKZwZQWOECPx3XgAjjiA=="
-    },
-    "systemjs-plugin-text": {
-      "version": "0.0.11",
-      "resolved": "https://registry.npmjs.org/systemjs-plugin-text/-/systemjs-plugin-text-0.0.11.tgz",
-      "integrity": "sha1-hSwlTENq40JYyAYnq3KkkODVx8A="
-    },
     "table": {
       "version": "5.2.3",
       "resolved": "https://registry.npmjs.org/table/-/table-5.2.3.tgz",
@@ -16323,9 +16390,9 @@
       }
     },
     "zone.js": {
-      "version": "0.8.26",
-      "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.8.26.tgz",
-      "integrity": "sha512-W9Nj+UmBJG251wkCacIkETgra4QgBo/vgoEkb4a2uoLzpQG7qF9nzwoLXWU5xj3Fg2mxGvEDh47mg24vXccYjA=="
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.9.0.tgz",
+      "integrity": "sha512-EfygvVnLxPSCMSgJ4h7SoY+XNr7ybdwvvwEQ70lvMFl9coNnciXSyWi8Kg6znK1ubyUSffkCKvleSQpLuUKw0Q=="
     }
   }
 }
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/package.json b/nifi-registry-core/nifi-registry-web-ui/src/main/package.json
index 810a560..37ef7a7 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/package.json
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/package.json
@@ -14,7 +14,7 @@
   "//": "See the License for the specific language governing permissions and",
   "//": "limitations under the License.",
   "name": "nifi-registry",
-  "version": "0.0.1",
+  "version": "0.0.5-SNAPSHOT",
   "description": "",
   "scripts": {
     "start": "npm run watch",
@@ -52,34 +52,32 @@
   "dependencies": {
     "querystring": "0.2.0",
     "reset-css": "4.0.1",
-    "rxjs": "5.5.6",
+    "rxjs": "6.5.2",
     "superagent": "3.8.3",
-    "systemjs": "0.21.3",
-    "systemjs-plugin-text": "0.0.11",
-    "zone.js": "0.8.26",
+    "zone.js": "0.9.0",
     "tslib": "1.8.0",
     "material-design-icons": "3.0.1",
     "jquery": "3.4.1",
-    "@angular/animations": "5.2.0",
-    "@angular/cdk": "5.2.0",
-    "@angular/common": "5.2.0",
-    "@angular/compiler": "5.2.0",
-    "@angular/core": "5.2.0",
-    "@angular/flex-layout": "5.0.0-beta.14",
-    "@angular/forms": "5.2.0",
-    "@angular/http": "5.2.0",
-    "@angular/material": "5.2.0",
-    "@angular/platform-browser": "5.2.0",
-    "@angular/platform-browser-dynamic": "5.2.0",
-    "@angular/router": "5.2.0",
+    "@angular/animations": "8.1.1",
+    "@angular/cdk": "8.1.0",
+    "@angular/common": "8.1.1",
+    "@angular/compiler": "8.1.1",
+    "@angular/core": "8.1.1",
+    "@angular/flex-layout": "8.0.0-beta.26",
+    "@angular/forms": "8.1.1",
+    "@angular/http": "8.0.0-beta.10",
+    "@angular/material": "8.1.1",
+    "@angular/platform-browser": "8.1.1",
+    "@angular/platform-browser-dynamic": "8.1.1",
+    "@angular/router": "8.1.1",
     "angular2-jwt": "0.2.3",
-    "@covalent/core": "1.0.0",
-    "@nifi-fds/core": "0.1.0",
+    "@covalent/core": "2.1.0",
+    "@nifi-fds/core": "0.2.0",
     "angular2-moment": "1.9.0",
     "font-awesome": "4.7.0",
     "moment": "2.22.1",
     "hammerjs": "2.0.8",
-    "roboto-fontface": "0.9.0"
+    "roboto-fontface": "0.10.0"
   },
   "devDependencies": {
     "@babel/core": "7.4.4",
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/systemjs-text-to-html-loader.js b/nifi-registry-core/nifi-registry-web-ui/src/main/systemjs-text-to-html-loader.js
deleted file mode 100644
index 0842730..0000000
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/systemjs-text-to-html-loader.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- * Removes inline systemjs-style loader syntax for html!text imports
- *
- *   require('./some-module.html!systemjs-plugin')  ->  require('./some-module.html')
- */
-module.exports = function (source) {
-    if (source.indexOf('.html')) {
-        const exp = new RegExp('require\\(([\'"])([^!\\s]*)!text\\1\\)', 'g');
-        source = source.replace(exp, `require($1$2$1)`);
-    }
-
-    return source;
-};
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/nf-registry-administration.spec.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/nf-registry-administration.spec.js
index d6e3d2a..21a0a71 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/nf-registry-administration.spec.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/nf-registry-administration.spec.js
@@ -17,7 +17,7 @@
 
 import { TestBed } from '@angular/core/testing';
 import initTestBed from 'nf-registry.testbed-factory';
-import { Observable } from 'rxjs';
+import { of } from 'rxjs';
 import NfRegistryApi from 'services/nf-registry.api';
 import NfRegistryService from 'services/nf-registry.service';
 
@@ -46,7 +46,7 @@
 
                 // Spy
                 spyOn(nfRegistryApi, 'getDroplets').and.callFake(function () {
-                }).and.returnValue(Observable.of([{
+                }).and.returnValue(of([{
                     'identifier': '2e04b4fb-9513-47bb-aa74-1ae34616bfdc',
                     'name': 'Flow #1',
                     'description': 'This is flow #1',
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-user-to-groups/nf-registry-add-user-to-groups.html b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-user-to-groups/nf-registry-add-user-to-groups.html
index 70e59ed..b2b6a81 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-user-to-groups/nf-registry-add-user-to-groups.html
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-user-to-groups/nf-registry-add-user-to-groups.html
@@ -17,7 +17,9 @@
 
 <div id="nifi-registry-admin-add-selected-users-to-group-dialog">
     <div class="pad-bottom-md" fxLayout="row" fxLayoutAlign="space-between center">
-        <span class="md-card-title">Add user to groups</span>
+        <mat-card-title class="ellipsis">
+            Add user to groups
+        </mat-card-title>
         <button mat-icon-button (click)="cancel()">
             <mat-icon color="primary">close</mat-icon>
         </button>
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-user-to-groups/nf-registry-add-user-to-groups.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-user-to-groups/nf-registry-add-user-to-groups.js
index 5c56830..0461bb0 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-user-to-groups/nf-registry-add-user-to-groups.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-user-to-groups/nf-registry-add-user-to-groups.js
@@ -15,10 +15,10 @@
  * limitations under the License.
  */
 
-import { TdDataTableService } from '@covalent/core';
+import { TdDataTableService } from '@covalent/core/data-table';
 import NfRegistryApi from 'services/nf-registry.api';
 import { Component } from '@angular/core';
-import { FdsSnackBarService } from '@flow-design-system/snackbars';
+import { FdsSnackBarService } from '@nifi-fds/core';
 import NfRegistryService from 'services/nf-registry.service';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
 import $ from 'jquery';
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-user-to-groups/nf-registry-add-user-to-groups.spec.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-user-to-groups/nf-registry-add-user-to-groups.spec.js
index 1714e5c..910cdfa 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-user-to-groups/nf-registry-add-user-to-groups.spec.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-user-to-groups/nf-registry-add-user-to-groups.spec.js
@@ -19,9 +19,9 @@
 import NfRegistryService from 'services/nf-registry.service';
 import NfRegistryAddUserToGroups
     from 'components/administration/users/dialogs/add-user-to-groups/nf-registry-add-user-to-groups';
-import { Observable } from 'rxjs';
-import { TdDataTableService } from '@covalent/core';
-import { FdsSnackBarService } from '@flow-design-system/snackbars';
+import { of } from 'rxjs';
+import { TdDataTableService } from '@covalent/core/data-table';
+import { FdsSnackBarService } from '@nifi-fds/core';
 
 describe('NfRegistryAddUserToGroups Component isolated unit tests', function () {
     var comp;
@@ -46,9 +46,9 @@
 
         // Spy
         spyOn(nfRegistryApi, 'getUserGroup').and.callFake(function () {
-        }).and.returnValue(Observable.of({identifier: 1, identity: 'Group 1'}));
+        }).and.returnValue(of({identifier: 1, identity: 'Group 1'}));
         spyOn(nfRegistryApi, 'updateUserGroup').and.callFake(function () {
-        }).and.returnValue(Observable.of({identifier: 1, identity: 'Group 1'}));
+        }).and.returnValue(of({identifier: 1, identity: 'Group 1'}));
         spyOn(comp.dialogRef, 'close');
         spyOn(comp.snackBarService, 'openCoaster');
         spyOn(comp, 'filterGroups').and.callThrough();
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-user/nf-registry-add-user.html b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-user/nf-registry-add-user.html
index 62eec9d..85114c1 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-user/nf-registry-add-user.html
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-user/nf-registry-add-user.html
@@ -17,16 +17,18 @@
 
 <div id="nifi-registry-admin-add-user-dialog">
     <div class="pad-bottom-md" fxLayout="row" fxLayoutAlign="space-between center">
-        <span class="md-card-title">Add User</span>
+        <mat-card-title class="ellipsis">
+            Add User
+        </mat-card-title>
         <button mat-icon-button (click)="cancel()">
             <mat-icon color="primary">close</mat-icon>
         </button>
     </div>
     <div fxLayout="column" fxLayoutAlign="space-between start" class="pad-bottom-md">
-        <div class="pad-bottom-md fill-available-width">
-            <mat-input-container floatPlaceholder="always" fxFlex>
+        <div class="fill-available-width">
+            <mat-form-field floatLabel="always" fxFlex>
                 <input #newUserInput matInput floatPlaceholder="always" placeholder="Identity/Username">
-            </mat-input-container>
+            </mat-form-field>
         </div>
         <mat-checkbox [(ngModel)]="keepDialogOpen">
             Keep this dialog open after adding user
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-user/nf-registry-add-user.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-user/nf-registry-add-user.js
index 9739798..e32d99d 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-user/nf-registry-add-user.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-user/nf-registry-add-user.js
@@ -19,7 +19,7 @@
 import NfRegistryService from 'services/nf-registry.service';
 import NfRegistryApi from 'services/nf-registry.api';
 import { MatDialogRef } from '@angular/material';
-import { FdsSnackBarService } from '@flow-design-system/snackbars';
+import { FdsSnackBarService } from '@nifi-fds/core';
 
 /**
  * NfRegistryAddUser constructor.
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-user/nf-registry-add-user.spec.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-user/nf-registry-add-user.spec.js
index e001eb0..c652ab5 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-user/nf-registry-add-user.spec.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-user/nf-registry-add-user.spec.js
@@ -18,7 +18,7 @@
 import NfRegistryApi from 'services/nf-registry.api';
 import NfRegistryService from 'services/nf-registry.service';
 import NfRegistryAddUser from 'components/administration/users/dialogs/add-user/nf-registry-add-user';
-import { Observable } from 'rxjs';
+import { of } from 'rxjs';
 
 describe('NfRegistryAddUser Component isolated unit tests', function () {
     var comp;
@@ -41,7 +41,7 @@
 
         // Spy
         spyOn(nfRegistryApi, 'addUser').and.callFake(function () {
-        }).and.returnValue(Observable.of([{
+        }).and.returnValue(of([{
             'identifier': '2e04b4fb-9513-47bb-aa74-1ae34616bfdc',
             'identity': 'New User #1'
         }]));
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-users-to-group/nf-registry-add-users-to-group.html b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-users-to-group/nf-registry-add-users-to-group.html
index 6f8670c..4a078ea 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-users-to-group/nf-registry-add-users-to-group.html
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-users-to-group/nf-registry-add-users-to-group.html
@@ -17,7 +17,9 @@
 
 <div id="nifi-registry-admin-add-selected-users-to-group-dialog">
     <div class="pad-bottom-md" fxLayout="row" fxLayoutAlign="space-between center">
-        <span class="md-card-title">Add users to group</span>
+        <mat-card-title class="ellipsis">
+            Add users to group
+        </mat-card-title>
         <button mat-icon-button (click)="cancel()">
             <mat-icon color="primary">close</mat-icon>
         </button>
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-users-to-group/nf-registry-add-users-to-group.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-users-to-group/nf-registry-add-users-to-group.js
index c6511fb..b40af3d 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-users-to-group/nf-registry-add-users-to-group.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-users-to-group/nf-registry-add-users-to-group.js
@@ -15,10 +15,10 @@
  * limitations under the License.
  */
 
-import { TdDataTableService} from '@covalent/core';
+import { TdDataTableService } from '@covalent/core/data-table';
 import NfRegistryApi from 'services/nf-registry.api';
 import { Component } from '@angular/core';
-import { FdsSnackBarService } from '@flow-design-system/snackbars';
+import { FdsSnackBarService } from '@nifi-fds/core';
 import NfRegistryService from 'services/nf-registry.service';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
 import $ from 'jquery';
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-users-to-group/nf-registry-add-users-to-group.spec.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-users-to-group/nf-registry-add-users-to-group.spec.js
index a8d176d..0126892 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-users-to-group/nf-registry-add-users-to-group.spec.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-users-to-group/nf-registry-add-users-to-group.spec.js
@@ -17,9 +17,9 @@
 
 import NfRegistryApi from 'services/nf-registry.api';
 import NfRegistryService from 'services/nf-registry.service';
-import { Observable } from 'rxjs';
-import { TdDataTableService } from '@covalent/core';
-import { FdsSnackBarService } from '@flow-design-system/snackbars';
+import { of } from 'rxjs';
+import { TdDataTableService } from '@covalent/core/data-table';
+import { FdsSnackBarService } from '@nifi-fds/core';
 import NfRegistryAddUsersToGroup from 'components/administration/users/dialogs/add-users-to-group/nf-registry-add-users-to-group';
 
 describe('NfRegistryAddUsersToGroup Component isolated unit tests', function () {
@@ -45,7 +45,7 @@
 
         // Spy
         spyOn(nfRegistryApi, 'updateUserGroup').and.callFake(function () {
-        }).and.returnValue(Observable.of({identifier: 1, identity: 'Group 1'}));
+        }).and.returnValue(of({identifier: 1, identity: 'Group 1'}));
         spyOn(comp.dialogRef, 'close');
         spyOn(comp.snackBarService, 'openCoaster');
         spyOn(comp, 'filterUsers').and.callThrough();
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/create-new-group/nf-registry-create-new-group.html b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/create-new-group/nf-registry-create-new-group.html
index d153651..cfa9f5f 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/create-new-group/nf-registry-create-new-group.html
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/create-new-group/nf-registry-create-new-group.html
@@ -17,16 +17,18 @@
 
 <div id="nifi-registry-admin-create-new-group-dialog">
     <div class="pad-bottom-md" fxLayout="row" fxLayoutAlign="space-between center">
-        <span class="md-card-title">Create New Group</span>
+        <mat-card-title class="ellipsis">
+            Create New Group
+        </mat-card-title>
         <button mat-icon-button (click)="cancel()">
             <mat-icon color="primary">close</mat-icon>
         </button>
     </div>
     <div fxLayout="column" fxLayoutAlign="space-between start" class="pad-bottom-md">
-        <div class="pad-bottom-md fill-available-width">
-            <mat-input-container floatPlaceholder="always" fxFlex>
+        <div class="fill-available-width">
+            <mat-form-field floatLabel="always" fxFlex>
                 <input #createNewGroupInput matInput floatPlaceholder="always" placeholder="Display Name">
-            </mat-input-container>
+            </mat-form-field>
         </div>
         <mat-checkbox [(ngModel)]="keepDialogOpen">
             Keep this dialog open after creating group
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/create-new-group/nf-registry-create-new-group.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/create-new-group/nf-registry-create-new-group.js
index e2239d0..52c1965 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/create-new-group/nf-registry-create-new-group.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/create-new-group/nf-registry-create-new-group.js
@@ -17,7 +17,7 @@
 
 import NfRegistryApi from 'services/nf-registry.api';
 import { Component, ViewChild } from '@angular/core';
-import { FdsSnackBarService } from '@flow-design-system/snackbars';
+import { FdsSnackBarService } from '@nifi-fds/core';
 import NfRegistryService from 'services/nf-registry.service';
 import { MatDialogRef } from '@angular/material';
 
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/create-new-group/nf-registry-create-new-group.spec.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/create-new-group/nf-registry-create-new-group.spec.js
index 8dbb08a..e1258f0 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/create-new-group/nf-registry-create-new-group.spec.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/create-new-group/nf-registry-create-new-group.spec.js
@@ -17,7 +17,7 @@
 
 import NfRegistryApi from 'services/nf-registry.api';
 import NfRegistryService from 'services/nf-registry.service';
-import { Observable } from 'rxjs';
+import { of } from 'rxjs';
 import NfRegistryCreateNewGroup from 'components/administration/users/dialogs/create-new-group/nf-registry-create-new-group';
 
 describe('NfRegistryCreateNewGroup Component isolated unit tests', function () {
@@ -40,7 +40,7 @@
 
         // Spy
         spyOn(nfRegistryApi, 'createNewGroup').and.callFake(function () {
-        }).and.returnValue(Observable.of([{
+        }).and.returnValue(of([{
             'identifier': '2e04b4fb-9513-47bb-aa74-1ae34616bfdc',
             'identity': 'New Group #1'
         }]));
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/nf-registry-users-administration.html b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/nf-registry-users-administration.html
index 5ba1a1b..8e742cf 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/nf-registry-users-administration.html
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/nf-registry-users-administration.html
@@ -17,7 +17,9 @@
 
 <div id="nifi-registry-users-administration-perspective" class="mat-elevation-z5">
     <div fxFlex class="pad-top-md pad-bottom-sm pad-left-md pad-right-md">
-        <span class="md-card-title">Authorized Users ({{nfRegistryService.users.length + nfRegistryService.groups.length}})</span>
+        <mat-card-title class="ellipsis">
+            Authorized Users ({{nfRegistryService.users.length + nfRegistryService.groups.length}})
+        </mat-card-title>
         <div flex class="push-right-sm" fxLayout="row" fxLayoutAlign="end center">
             <td-chips class="push-right-sm"
                       [items]="nfRegistryService.autoCompleteUsersAndGroups"
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/nf-registry-users-administration.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/nf-registry-users-administration.js
index eee0e30..6c001b7 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/nf-registry-users-administration.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/nf-registry-users-administration.js
@@ -15,17 +15,18 @@
  * limitations under the License.
  */
 
-import { FdsDialogService } from '@flow-design-system/dialogs';
+import { FdsDialogService } from '@nifi-fds/core';
 import { Component } from '@angular/core';
 import NfRegistryService from 'services/nf-registry.service';
 import { ActivatedRoute, Router } from '@angular/router';
 import NfRegistryApi from 'services/nf-registry.api';
 import { MatDialog } from '@angular/material';
-import { Observable } from 'rxjs';
 import nfRegistryAnimations from 'nf-registry.animations';
 import NfStorage from 'services/nf-storage.service';
 import NfRegistryCreateNewGroup from 'components/administration/users/dialogs/create-new-group/nf-registry-create-new-group';
 import NfRegistryAddUser from 'components/administration/users/dialogs/add-user/nf-registry-add-user';
+import { switchMap } from 'rxjs/operators';
+import { forkJoin } from 'rxjs';
 
 /**
  * NfRegistryUsersAdministration constructor.
@@ -60,13 +61,15 @@
         var self = this;
         this.nfRegistryService.inProgress = true;
         this.$subscription = this.route.params
-            .switchMap(function (params) {
-                self.nfRegistryService.adminPerspective = 'users';
-                return Observable.forkJoin(
-                    self.nfRegistryApi.getUsers(),
-                    self.nfRegistryApi.getUserGroups()
-                );
-            })
+            .pipe(
+                switchMap(function (params) {
+                    self.nfRegistryService.adminPerspective = 'users';
+                    return forkJoin(
+                        self.nfRegistryApi.getUsers(),
+                        self.nfRegistryApi.getUserGroups()
+                    );
+                })
+            )
             .subscribe(function (response) {
                 if (!response[0].status || response[0].status === 200) {
                     var users = response[0];
@@ -107,7 +110,8 @@
      */
     addUser: function () {
         this.dialog.open(NfRegistryAddUser, {
-            disableClose: true
+            disableClose: true,
+            width: '400px'
         });
     },
 
@@ -116,7 +120,8 @@
      */
     createNewGroup: function () {
         this.dialog.open(NfRegistryCreateNewGroup, {
-            disableClose: true
+            disableClose: true,
+            width: '400px'
         });
     },
 
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/nf-registry-users-adminstration.spec.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/nf-registry-users-adminstration.spec.js
index af72286..5105baf 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/nf-registry-users-adminstration.spec.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/nf-registry-users-adminstration.spec.js
@@ -17,7 +17,7 @@
 
 import { TestBed, fakeAsync, tick, async } from '@angular/core/testing';
 import initTestBed from 'nf-registry.testbed-factory';
-import { Observable } from 'rxjs';
+import { of } from 'rxjs';
 import NfRegistryApi from 'services/nf-registry.api';
 import NfRegistryService from 'services/nf-registry.service';
 import { ActivatedRoute } from '@angular/router';
@@ -37,7 +37,7 @@
             {
                 provide: ActivatedRoute,
                 useValue: {
-                    params: Observable.of({})
+                    params: of({})
                 }
             }
         ];
@@ -55,15 +55,15 @@
                 de = fixture.debugElement.query(ngPlatformBrowser.By.css('#nifi-registry-users-administration-perspective'));
 
                 // Spy
-                spyOn(nfRegistryApi, 'ticketExchange').and.callFake(function () {}).and.returnValue(Observable.of({}));
-                spyOn(nfRegistryApi, 'loadCurrentUser').and.callFake(function () {}).and.returnValue(Observable.of({}));
+                spyOn(nfRegistryApi, 'ticketExchange').and.callFake(function () {}).and.returnValue(of({}));
+                spyOn(nfRegistryApi, 'loadCurrentUser').and.callFake(function () {}).and.returnValue(of({}));
                 spyOn(nfRegistryApi, 'getUsers').and.callFake(function () {
-                }).and.returnValue(Observable.of([{
+                }).and.returnValue(of([{
                     'identifier': '2e04b4fb-9513-47bb-aa74-1ae34616bfdc',
                     'identity': 'User #1'
                 }]));
                 spyOn(nfRegistryApi, 'getUserGroups').and.callFake(function () {
-                }).and.returnValue(Observable.of([{
+                }).and.returnValue(of([{
                     'identifier': '5e04b4fb-9513-47bb-aa74-1ae34616bfdc',
                     'identity': 'Group #1'}]));
                 spyOn(nfRegistryService, 'filterUsersAndGroups');
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/sidenav/manage-group/nf-registry-manage-group.html b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/sidenav/manage-group/nf-registry-manage-group.html
index 31eade4..978010f 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/sidenav/manage-group/nf-registry-manage-group.html
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/sidenav/manage-group/nf-registry-manage-group.html
@@ -23,15 +23,15 @@
         </button>
     </div>
     <div class="sidenav-content">
-        <div class="pad-bottom-md pad-left-md pad-right-md" flex fxLayoutAlign="start center">
-            <mat-input-container flex>
+        <div class="pad-left-md pad-right-md" flex fxLayoutAlign="start center">
+            <mat-form-field floatLabel="always" flex>
                 <input #groupnameInput matInput
                        [disabled]="!nfRegistryService.currentUser.resourcePermissions.tenants.canWrite || !nfRegistryService.group.configurable"
                        placeholder="Identity/Group Name"
                        value="{{nfRegistryService.group.identity}}"
-                       [(ngModel)]="_groupname">
-            </mat-input-container>
-            <button [disabled]="nfRegistryService.group.identity === _groupname || !nfRegistryService.group.configurable"
+                       [(ngModel)]="groupname">
+            </mat-form-field>
+            <button [disabled]="nfRegistryService.group.identity === groupname || !nfRegistryService.group.configurable"
                     (click)="updateGroupName(groupnameInput.value)"
                     class="input-button"
                     color="fds-regular"
@@ -167,7 +167,9 @@
         <div *ngIf="manageGroupPerspective === 'membership'">
             <div *ngIf="nfRegistryService.group.users" class="pad-top-md pad-bottom-sm pad-left-md pad-right-md">
                 <div flex fxLayout="row" fxLayoutAlign="space-between center">
-                    <span class="md-card-title">Membership ({{nfRegistryService.group.users.length}})</span>
+                    <mat-card-title class="ellipsis">
+                        Membership ({{nfRegistryService.group.users.length}})
+                    </mat-card-title>
                     <button color="fds-secondary"
                             [disabled]="!nfRegistryService.currentUser.resourcePermissions.tenants.canWrite || !nfRegistryService.group.configurable"
                             mat-raised-button
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/sidenav/manage-group/nf-registry-manage-group.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/sidenav/manage-group/nf-registry-manage-group.js
index d41f6e0..4cdc60e 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/sidenav/manage-group/nf-registry-manage-group.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/sidenav/manage-group/nf-registry-manage-group.js
@@ -15,15 +15,15 @@
  * limitations under the License.
  */
 
-import { TdDataTableService } from '@covalent/core';
-import { FdsDialogService } from '@flow-design-system/dialogs';
-import { FdsSnackBarService } from '@flow-design-system/snackbars';
+import { TdDataTableService } from '@covalent/core/data-table';
+import { FdsDialogService, FdsSnackBarService } from '@nifi-fds/core';
 import { Component } from '@angular/core';
 import NfRegistryService from 'services/nf-registry.service';
 import { ActivatedRoute, Router } from '@angular/router';
 import NfRegistryApi from 'services/nf-registry.api';
 import { MatDialog } from '@angular/material';
 import NfRegistryAddUsersToGroup from 'components/administration/users/dialogs/add-users-to-group/nf-registry-add-users-to-group';
+import { switchMap } from 'rxjs/operators';
 
 /**
  * NfRegistryManageGroup constructor.
@@ -52,7 +52,8 @@
             label: 'Display Name',
             sortable: true,
             tooltip: 'Group name.',
-            width: 100
+            width: 100,
+            active: true
         }
     ];
 
@@ -77,15 +78,17 @@
         var self = this;
         // subscribe to the route params
         this.$subscription = self.route.params
-            .switchMap(function (params) {
-                return self.nfRegistryApi.getUserGroup(params['groupId']);
-            })
+            .pipe(
+                switchMap(function (params) {
+                    return self.nfRegistryApi.getUserGroup(params['groupId']);
+                })
+            )
             .subscribe(function (response) {
                 if (!response.status || response.status === 200) {
                     self.nfRegistryService.sidenav.open();
                     self.nfRegistryService.group = response;
                     self.groupname = response.identity;
-                    self.filterUsers();
+                    self.sortUsers(self.usersColumns.find(usersColumn => usersColumn.active === true));
                 } else if (response.status === 404) {
                     self.router.navigateByUrl('/nifi-registry/administration/users');
                 } else if (response.status === 409) {
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/sidenav/manage-group/nf-registry-manage-group.spec.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/sidenav/manage-group/nf-registry-manage-group.spec.js
index 0814755..7427ee4 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/sidenav/manage-group/nf-registry-manage-group.spec.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/sidenav/manage-group/nf-registry-manage-group.spec.js
@@ -15,14 +15,14 @@
  * limitations under the License.
  */
 
-import { TestBed, fakeAsync, tick } from '@angular/core/testing';
+import {TestBed, fakeAsync, tick} from '@angular/core/testing';
 import initTestBed from 'nf-registry.testbed-factory';
-import { Observable } from 'rxjs';
+import {of} from 'rxjs';
 import NfRegistryApi from 'services/nf-registry.api';
 import NfRegistryService from 'services/nf-registry.service';
 
 import NfRegistryManageGroup from 'components/administration/users/sidenav/manage-group/nf-registry-manage-group';
-import { ActivatedRoute } from '@angular/router';
+import {ActivatedRoute} from '@angular/router';
 
 describe('NfRegistryManageGroup Component', function () {
     let comp;
@@ -35,7 +35,7 @@
             {
                 provide: ActivatedRoute,
                 useValue: {
-                    params: Observable.of({groupId: '123'})
+                    params: of({groupId: '123'})
                 }
             }
         ];
@@ -124,9 +124,9 @@
 
                 //Spy
                 spyOn(nfRegistryApi, 'ticketExchange').and.callFake(function () {
-                }).and.returnValue(Observable.of({}));
+                }).and.returnValue(of({}));
                 spyOn(nfRegistryApi, 'loadCurrentUser').and.callFake(function () {
-                }).and.returnValue(Observable.of({}));
+                }).and.returnValue(of({}));
 
                 done();
             });
@@ -134,7 +134,7 @@
 
     it('should have a defined component', fakeAsync(function () {
         spyOn(nfRegistryApi, 'getUserGroup').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'Group #1',
             resourcePermissions: {
@@ -213,7 +213,7 @@
 
     it('should FAIL to get user by id and redirect to admin users perspective', fakeAsync(function () {
         spyOn(nfRegistryApi, 'getUserGroup').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             status: 404
         }));
         spyOn(comp.router, 'navigateByUrl').and.callFake(function () {
@@ -233,7 +233,7 @@
 
     it('should FAIL to get user by id and redirect to workflow perspective', fakeAsync(function () {
         spyOn(nfRegistryApi, 'getUserGroup').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             status: 409
         }));
         spyOn(comp.router, 'navigateByUrl').and.callFake(function () {
@@ -254,7 +254,7 @@
     it('should redirect to users perspective', fakeAsync(function () {
         // Spy
         spyOn(nfRegistryApi, 'getUserGroup').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'Group #1',
             resourcePermissions: {
@@ -337,12 +337,12 @@
     it('should toggle to create the manage bucket privileges for the current group', fakeAsync(function () {
         // Spy
         spyOn(nfRegistryApi, 'getPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             status: 404,
             userGroups: []
         }));
         spyOn(nfRegistryApi, 'postPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             userGroups: [
                 {
                     identifier: '123',
@@ -378,7 +378,7 @@
             ]
         }));
         spyOn(nfRegistryApi, 'getUserGroup').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'Group #1',
             resourcePermissions: {
@@ -467,11 +467,11 @@
     it('should toggle to update the manage bucket privileges for the current group', fakeAsync(function () {
         // Spy
         spyOn(nfRegistryApi, 'getPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             userGroups: []
         }));
         spyOn(nfRegistryApi, 'putPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             userGroups: [
                 {
                     identifier: '123',
@@ -507,7 +507,7 @@
             ]
         }));
         spyOn(nfRegistryApi, 'getUserGroup').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'Group #1',
             resourcePermissions: {
@@ -596,7 +596,7 @@
     it('should toggle to remove the manage bucket privileges for the current group', fakeAsync(function () {
         // Spy
         spyOn(nfRegistryApi, 'getPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             status: 400,
             userGroups: [
                 {
@@ -633,9 +633,9 @@
             ]
         }));
         spyOn(nfRegistryApi, 'putPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({}));
+        }).and.returnValue(of({}));
         spyOn(nfRegistryApi, 'getUserGroup').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'Group #1',
             resourcePermissions: {
@@ -724,12 +724,12 @@
     it('should toggle to create the manage proxy privileges for the current group', fakeAsync(function () {
         // Spy
         spyOn(nfRegistryApi, 'getPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             status: 404,
             userGroups: []
         }));
         spyOn(nfRegistryApi, 'postPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             userGroups: [
                 {
                     identifier: '123',
@@ -765,7 +765,7 @@
             ]
         }));
         spyOn(nfRegistryApi, 'getUserGroup').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'Group #1',
             resourcePermissions: {
@@ -854,11 +854,11 @@
     it('should toggle to update the manage proxy privileges for the current group', fakeAsync(function () {
         // Spy
         spyOn(nfRegistryApi, 'getPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             userGroups: []
         }));
         spyOn(nfRegistryApi, 'putPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             userGroups: [
                 {
                     identifier: '123',
@@ -894,7 +894,7 @@
             ]
         }));
         spyOn(nfRegistryApi, 'getUserGroup').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'Group #1',
             resourcePermissions: {
@@ -983,7 +983,7 @@
     it('should toggle to remove the manage proxy privileges for the current group', fakeAsync(function () {
         // Spy
         spyOn(nfRegistryApi, 'getPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             status: 400,
             userGroups: [
                 {
@@ -1020,9 +1020,9 @@
             ]
         }));
         spyOn(nfRegistryApi, 'putPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({}));
+        }).and.returnValue(of({}));
         spyOn(nfRegistryApi, 'getUserGroup').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'Group #1',
             resourcePermissions: {
@@ -1111,12 +1111,12 @@
     it('should toggle to create the manage policies privileges for the current group', fakeAsync(function () {
         // Spy
         spyOn(nfRegistryApi, 'getPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             status: 404,
             userGroups: []
         }));
         spyOn(nfRegistryApi, 'postPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             userGroups: [
                 {
                     identifier: '123',
@@ -1152,7 +1152,7 @@
             ]
         }));
         spyOn(nfRegistryApi, 'getUserGroup').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'Group #1',
             resourcePermissions: {
@@ -1241,11 +1241,11 @@
     it('should toggle to update the manage policies privileges for the current group', fakeAsync(function () {
         // Spy
         spyOn(nfRegistryApi, 'getPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             userGroups: []
         }));
         spyOn(nfRegistryApi, 'putPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             userGroups: [
                 {
                     identifier: '123',
@@ -1281,7 +1281,7 @@
             ]
         }));
         spyOn(nfRegistryApi, 'getUserGroup').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'Group #1',
             resourcePermissions: {
@@ -1370,7 +1370,7 @@
     it('should toggle to remove the manage policies privileges for the current group', fakeAsync(function () {
         // Spy
         spyOn(nfRegistryApi, 'getPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             status: 400,
             userGroups: [
                 {
@@ -1407,9 +1407,9 @@
             ]
         }));
         spyOn(nfRegistryApi, 'putPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({}));
+        }).and.returnValue(of({}));
         spyOn(nfRegistryApi, 'getUserGroup').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'Group #1',
             resourcePermissions: {
@@ -1498,12 +1498,12 @@
     it('should toggle to create the manage tenants privileges for the current group', fakeAsync(function () {
         // Spy
         spyOn(nfRegistryApi, 'getPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             status: 404,
             userGroups: []
         }));
         spyOn(nfRegistryApi, 'postPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             userGroups: [
                 {
                     identifier: '123',
@@ -1539,7 +1539,7 @@
             ]
         }));
         spyOn(nfRegistryApi, 'getUserGroup').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'Group #1',
             resourcePermissions: {
@@ -1628,11 +1628,11 @@
     it('should toggle to update the manage tenants privileges for the current group', fakeAsync(function () {
         // Spy
         spyOn(nfRegistryApi, 'getPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             userGroups: []
         }));
         spyOn(nfRegistryApi, 'putPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             userGroups: [
                 {
                     identifier: '123',
@@ -1668,7 +1668,7 @@
             ]
         }));
         spyOn(nfRegistryApi, 'getUserGroup').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'Group #1',
             resourcePermissions: {
@@ -1757,7 +1757,7 @@
     it('should toggle to remove the manage tenants privileges for the current group', fakeAsync(function () {
         // Spy
         spyOn(nfRegistryApi, 'getPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             status: 400,
             userGroups: [
                 {
@@ -1794,9 +1794,9 @@
             ]
         }));
         spyOn(nfRegistryApi, 'putPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({}));
+        }).and.returnValue(of({}));
         spyOn(nfRegistryApi, 'getUserGroup').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'Group #1',
             resourcePermissions: {
@@ -1889,12 +1889,12 @@
         spyOn(comp.dialog, 'open').and.callFake(function () {
             return {
                 afterClosed: function () {
-                    return Observable.of({});
+                    return of({});
                 }
             };
         });
         spyOn(nfRegistryApi, 'getUserGroup').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'Group #1',
             resourcePermissions: {
@@ -1980,7 +1980,7 @@
         spyOn(comp, 'filterUsers').and.callFake(function () {
         });
         spyOn(nfRegistryApi, 'getUserGroup').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'Group #1',
             resourcePermissions: {
@@ -2059,8 +2059,8 @@
         //assertions
         expect(column.active).toBe(true);
         const filterUsersCall = comp.filterUsers.calls.first();
-        expect(filterUsersCall.args[0]).toBeUndefined();
-        expect(filterUsersCall.args[1]).toBeUndefined();
+        expect(filterUsersCall.args[0]).toBe('identity');
+        expect(filterUsersCall.args[1]).toBe('ASC');
     }));
 
     it('should remove user from group', fakeAsync(function () {
@@ -2069,7 +2069,7 @@
         });
         spyOn(comp.snackBarService, 'openCoaster');
         spyOn(nfRegistryApi, 'getUserGroup').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'Group #1',
             resourcePermissions: {
@@ -2132,7 +2132,7 @@
             }]
         }));
         spyOn(nfRegistryApi, 'updateUserGroup').and.callFake(function () {
-        }).and.returnValue(Observable.of({}));
+        }).and.returnValue(of({}));
         spyOn(comp.router, 'navigateByUrl').and.callFake(function () {
         });
         // 1st change detection triggers ngOnInit
@@ -2166,13 +2166,13 @@
         spyOn(comp.dialogService, 'openConfirm').and.callFake(function () {
             return {
                 afterClosed: function () {
-                    return Observable.of(true);
+                    return of(true);
                 }
             };
         });
         spyOn(comp.snackBarService, 'openCoaster');
         spyOn(nfRegistryApi, 'getUserGroup').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'Group #1',
             resourcePermissions: {
@@ -2235,7 +2235,7 @@
             }]
         }));
         spyOn(nfRegistryApi, 'updateUserGroup').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'test',
             status: 200
@@ -2266,13 +2266,13 @@
         spyOn(comp.dialogService, 'openConfirm').and.callFake(function () {
             return {
                 afterClosed: function () {
-                    return Observable.of(true);
+                    return of(true);
                 }
             };
         });
         spyOn(comp.snackBarService, 'openCoaster');
         spyOn(nfRegistryApi, 'getUserGroup').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'Group #1',
             resourcePermissions: {
@@ -2335,7 +2335,7 @@
             }]
         }));
         spyOn(nfRegistryApi, 'updateUserGroup').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'test',
             status: 409
@@ -2364,7 +2364,7 @@
     it('should destroy the component', fakeAsync(function () {
         spyOn(nfRegistryService.sidenav, 'close');
         spyOn(nfRegistryApi, 'getUserGroup').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'Group #1',
             resourcePermissions: {
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/sidenav/manage-user/nf-registry-manage-user.html b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/sidenav/manage-user/nf-registry-manage-user.html
index 2b0a505..71adae2 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/sidenav/manage-user/nf-registry-manage-user.html
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/sidenav/manage-user/nf-registry-manage-user.html
@@ -23,16 +23,16 @@
         </button>
     </div>
     <div class="sidenav-content">
-        <div class="pad-bottom-md pad-left-md pad-right-md" flex fxLayoutAlign="start center">
-            <mat-input-container flex>
+        <div class="pad-left-md pad-right-md" flex fxLayoutAlign="start center">
+            <mat-form-field floatLabel="always" flex>
                 <input #usernameInput
                        matInput
                        [disabled]="!nfRegistryService.currentUser.resourcePermissions.tenants.canWrite || (nfRegistryService.currentUser.identity === nfRegistryService.user.identity) || !nfRegistryService.user.configurable"
                        placeholder="Identity/User Name"
                        value="{{nfRegistryService.user.identity}}"
-                       [(ngModel)]="_username">
-            </mat-input-container>
-            <button [disabled]="nfRegistryService.user.identity === _username || (nfRegistryService.currentUser.identity === nfRegistryService.user.identity) || !nfRegistryService.user.configurable"
+                       [(ngModel)]="username">
+            </mat-form-field>
+            <button [disabled]="nfRegistryService.user.identity === username || (nfRegistryService.currentUser.identity === nfRegistryService.user.identity) || !nfRegistryService.user.configurable"
                     (click)="updateUserName(usernameInput.value)"
                     data-automation-id="nf-registry-manage-user-save-side-nav"
                     class="input-button"
@@ -173,7 +173,9 @@
         <div *ngIf="manageUserPerspective === 'membership'">
             <div *ngIf="nfRegistryService.user.userGroups" class="pad-top-md pad-bottom-sm pad-left-md pad-right-md">
                 <div flex fxLayout="row" fxLayoutAlign="space-between center">
-                    <span class="md-card-title">Membership ({{nfRegistryService.user.userGroups.length}})</span>
+                    <mat-card-title class="ellipsis">
+                        Membership ({{nfRegistryService.user.userGroups.length}})
+                    </mat-card-title>
                     <button color="fds-secondary"
                             [disabled]="!nfRegistryService.currentUser.resourcePermissions.tenants.canWrite || canAddNonConfigurableUserToGroup()"
                             mat-raised-button
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/sidenav/manage-user/nf-registry-manage-user.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/sidenav/manage-user/nf-registry-manage-user.js
index 0c74799..4d064b5 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/sidenav/manage-user/nf-registry-manage-user.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/sidenav/manage-user/nf-registry-manage-user.js
@@ -15,15 +15,15 @@
  * limitations under the License.
  */
 
-import { TdDataTableService } from '@covalent/core';
-import { FdsDialogService } from '@flow-design-system/dialogs';
-import { FdsSnackBarService } from '@flow-design-system/snackbars';
+import { TdDataTableService } from '@covalent/core/data-table';
+import { FdsDialogService, FdsSnackBarService } from '@nifi-fds/core';
 import { Component } from '@angular/core';
 import NfRegistryService from 'services/nf-registry.service';
 import { ActivatedRoute, Router } from '@angular/router';
 import NfRegistryApi from 'services/nf-registry.api';
 import { MatDialog } from '@angular/material';
 import NfRegistryAddUserToGroups from 'components/administration/users/dialogs/add-user-to-groups/nf-registry-add-user-to-groups';
+import { switchMap } from 'rxjs/operators';
 
 /**
  * NfRegistryManageUser constructor.
@@ -52,7 +52,8 @@
             label: 'Display Name',
             sortable: true,
             tooltip: 'Group name.',
-            width: 100
+            width: 100,
+            active: true
         }
     ];
 
@@ -77,15 +78,17 @@
         var self = this;
         // subscribe to the route params
         this.$subscription = self.route.params
-            .switchMap(function (params) {
-                return self.nfRegistryApi.getUser(params['userId']);
-            })
+            .pipe(
+                switchMap(function (params) {
+                    return self.nfRegistryApi.getUser(params['userId']);
+                })
+            )
             .subscribe(function (response) {
                 if (!response.status || response.status === 200) {
                     self.nfRegistryService.sidenav.open();
                     self.nfRegistryService.user = response;
                     self.username = response.identity;
-                    self.filterGroups(this.sortBy, this.sortOrder);
+                    self.sortGroups(self.userGroupsColumns.find(userGroupsColumn => userGroupsColumn.active === true));
                 } else if (response.status === 404) {
                     self.router.navigateByUrl('/nifi-registry/administration/users');
                 } else if (response.status === 409) {
@@ -454,7 +457,8 @@
             data: {
                 user: this.nfRegistryService.user,
                 disableClose: true
-            }
+            },
+            width: '400px'
         }).afterClosed().subscribe(function () {
             self.nfRegistryApi.getUser(self.nfRegistryService.user.identifier)
                 .subscribe(function (response) {
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/sidenav/manage-user/nf-registry-manage-user.spec.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/sidenav/manage-user/nf-registry-manage-user.spec.js
index 23b46f5..49b42cc 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/sidenav/manage-user/nf-registry-manage-user.spec.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/sidenav/manage-user/nf-registry-manage-user.spec.js
@@ -17,7 +17,7 @@
 
 import { TestBed, fakeAsync, tick } from '@angular/core/testing';
 import initTestBed from 'nf-registry.testbed-factory';
-import { Observable } from 'rxjs';
+import { of } from 'rxjs';
 import NfRegistryApi from 'services/nf-registry.api';
 import NfRegistryService from 'services/nf-registry.service';
 import { ActivatedRoute } from '@angular/router';
@@ -35,7 +35,7 @@
             {
                 provide: ActivatedRoute,
                 useValue: {
-                    params: Observable.of({userId: '123'})
+                    params: of({userId: '123'})
                 }
             }
         ];
@@ -93,9 +93,9 @@
 
                 //Spy
                 spyOn(nfRegistryApi, 'ticketExchange').and.callFake(function () {
-                }).and.returnValue(Observable.of({}));
+                }).and.returnValue(of({}));
                 spyOn(nfRegistryApi, 'loadCurrentUser').and.callFake(function () {
-                }).and.returnValue(Observable.of({}));
+                }).and.returnValue(of({}));
 
                 done();
             });
@@ -103,7 +103,7 @@
 
     it('should have a defined component', fakeAsync(function () {
         spyOn(nfRegistryApi, 'getUser').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'User #1',
             resourcePermissions: {
@@ -151,7 +151,7 @@
 
     it('should FAIL to get user by id and redirect to admin users perspective', fakeAsync(function () {
         spyOn(nfRegistryApi, 'getUser').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             status: 404
         }));
         spyOn(comp.router, 'navigateByUrl').and.callFake(function () {
@@ -171,7 +171,7 @@
 
     it('should FAIL to get user by id and redirect to workflow perspective', fakeAsync(function () {
         spyOn(nfRegistryApi, 'getUser').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             status: 409
         }));
         spyOn(comp.router, 'navigateByUrl').and.callFake(function () {
@@ -192,7 +192,7 @@
     it('should redirect to users perspective', fakeAsync(function () {
         // Spy
         spyOn(nfRegistryApi, 'getUser').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'User #1',
             resourcePermissions: {
@@ -244,11 +244,11 @@
     it('should toggle to create the manage bucket privileges for the current user', fakeAsync(function () {
         // Spy
         spyOn(nfRegistryApi, 'getPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             status: 404
         }));
         spyOn(nfRegistryApi, 'postPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             users: [
                 {
                     identifier: '123',
@@ -284,7 +284,7 @@
             ]
         }));
         spyOn(nfRegistryApi, 'getUser').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'User #1',
             resourcePermissions: {
@@ -342,11 +342,11 @@
     it('should toggle to update the manage bucket privileges for the current user', fakeAsync(function () {
         // Spy
         spyOn(nfRegistryApi, 'getPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             users: []
         }));
         spyOn(nfRegistryApi, 'putPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             users: [
                 {
                     identifier: '123',
@@ -382,7 +382,7 @@
             ]
         }));
         spyOn(nfRegistryApi, 'getUser').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'User #1',
             resourcePermissions: {
@@ -440,7 +440,7 @@
     it('should toggle to remove the manage bucket privileges for the current user', fakeAsync(function () {
         // Spy
         spyOn(nfRegistryApi, 'getPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             status: 400,
             users: [
                 {
@@ -477,9 +477,9 @@
             ]
         }));
         spyOn(nfRegistryApi, 'putPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({}));
+        }).and.returnValue(of({}));
         spyOn(nfRegistryApi, 'getUser').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'User #1',
             resourcePermissions: {
@@ -537,11 +537,11 @@
     it('should toggle to create the manage proxy privileges for the current user', fakeAsync(function () {
         // Spy
         spyOn(nfRegistryApi, 'getPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             status: 404
         }));
         spyOn(nfRegistryApi, 'postPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             users: [
                 {
                     identifier: '123',
@@ -577,7 +577,7 @@
             ]
         }));
         spyOn(nfRegistryApi, 'getUser').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'User #1',
             resourcePermissions: {
@@ -635,11 +635,11 @@
     it('should toggle to update the manage proxy privileges for the current user', fakeAsync(function () {
         // Spy
         spyOn(nfRegistryApi, 'getPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             users: []
         }));
         spyOn(nfRegistryApi, 'putPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             users: [
                 {
                     identifier: '123',
@@ -675,7 +675,7 @@
             ]
         }));
         spyOn(nfRegistryApi, 'getUser').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'User #1',
             resourcePermissions: {
@@ -733,7 +733,7 @@
     it('should toggle to remove the manage proxy privileges for the current user', fakeAsync(function () {
         // Spy
         spyOn(nfRegistryApi, 'getPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             status: 400,
             users: [
                 {
@@ -770,9 +770,9 @@
             ]
         }));
         spyOn(nfRegistryApi, 'putPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({}));
+        }).and.returnValue(of({}));
         spyOn(nfRegistryApi, 'getUser').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'User #1',
             resourcePermissions: {
@@ -830,11 +830,11 @@
     it('should toggle to create the manage policies privileges for the current user', fakeAsync(function () {
         // Spy
         spyOn(nfRegistryApi, 'getPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             status: 404
         }));
         spyOn(nfRegistryApi, 'postPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             users: [
                 {
                     identifier: '123',
@@ -870,7 +870,7 @@
             ]
         }));
         spyOn(nfRegistryApi, 'getUser').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'User #1',
             resourcePermissions: {
@@ -928,11 +928,11 @@
     it('should toggle to update the manage policies privileges for the current user', fakeAsync(function () {
         // Spy
         spyOn(nfRegistryApi, 'getPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             users: []
         }));
         spyOn(nfRegistryApi, 'putPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             users: [
                 {
                     identifier: '123',
@@ -968,7 +968,7 @@
             ]
         }));
         spyOn(nfRegistryApi, 'getUser').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'User #1',
             resourcePermissions: {
@@ -1026,7 +1026,7 @@
     it('should toggle to remove the manage policies privileges for the current user', fakeAsync(function () {
         // Spy
         spyOn(nfRegistryApi, 'getPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             status: 400,
             users: [
                 {
@@ -1063,9 +1063,9 @@
             ]
         }));
         spyOn(nfRegistryApi, 'putPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({}));
+        }).and.returnValue(of({}));
         spyOn(nfRegistryApi, 'getUser').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'User #1',
             resourcePermissions: {
@@ -1123,11 +1123,11 @@
     it('should toggle to create the manage tenants privileges for the current user', fakeAsync(function () {
         // Spy
         spyOn(nfRegistryApi, 'getPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             status: 404
         }));
         spyOn(nfRegistryApi, 'postPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             users: [
                 {
                     identifier: '123',
@@ -1163,7 +1163,7 @@
             ]
         }));
         spyOn(nfRegistryApi, 'getUser').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'User #1',
             resourcePermissions: {
@@ -1221,11 +1221,11 @@
     it('should toggle to update the manage tenants privileges for the current user', fakeAsync(function () {
         // Spy
         spyOn(nfRegistryApi, 'getPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             users: []
         }));
         spyOn(nfRegistryApi, 'putPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             users: [
                 {
                     identifier: '123',
@@ -1261,7 +1261,7 @@
             ]
         }));
         spyOn(nfRegistryApi, 'getUser').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'User #1',
             resourcePermissions: {
@@ -1319,7 +1319,7 @@
     it('should toggle to remove the manage tenants privileges for the current user', fakeAsync(function () {
         // Spy
         spyOn(nfRegistryApi, 'getPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             status: 400,
             users: [
                 {
@@ -1356,9 +1356,9 @@
             ]
         }));
         spyOn(nfRegistryApi, 'putPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({}));
+        }).and.returnValue(of({}));
         spyOn(nfRegistryApi, 'getUser').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'User #1',
             resourcePermissions: {
@@ -1420,12 +1420,12 @@
         spyOn(comp.dialog, 'open').and.callFake(function () {
             return {
                 afterClosed: function () {
-                    return Observable.of({});
+                    return of({});
                 }
             };
         });
         spyOn(nfRegistryApi, 'getUser').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'User #1',
             resourcePermissions: {
@@ -1480,7 +1480,7 @@
         spyOn(comp, 'filterGroups').and.callFake(function () {
         });
         spyOn(nfRegistryApi, 'getUser').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'User #1',
             resourcePermissions: {
@@ -1533,8 +1533,8 @@
         //assertions
         expect(column.active).toBe(true);
         const filterGroupsCall = comp.filterGroups.calls.first();
-        expect(filterGroupsCall.args[0]).toBeUndefined();
-        expect(filterGroupsCall.args[1]).toBeUndefined();
+        expect(filterGroupsCall.args[0]).toBe('identity');
+        expect(filterGroupsCall.args[1]).toBe('ASC');
     }));
 
     it('should remove user from group', fakeAsync(function () {
@@ -1543,7 +1543,7 @@
         });
         spyOn(comp.snackBarService, 'openCoaster');
         spyOn(nfRegistryApi, 'getUser').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'User #1',
             resourcePermissions: {
@@ -1575,7 +1575,7 @@
             }
         }));
         spyOn(nfRegistryApi, 'getUserGroup').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             users: [{
                 identity: 'User #1'
             }],
@@ -1584,7 +1584,7 @@
             }]
         }));
         spyOn(nfRegistryApi, 'updateUserGroup').and.callFake(function () {
-        }).and.returnValue(Observable.of({}));
+        }).and.returnValue(of({}));
         spyOn(comp.router, 'navigateByUrl').and.callFake(function () {
         });
         // 1st change detection triggers ngOnInit
@@ -1619,13 +1619,13 @@
         spyOn(comp.dialogService, 'openConfirm').and.callFake(function () {
             return {
                 afterClosed: function () {
-                    return Observable.of(true);
+                    return of(true);
                 }
             };
         });
         spyOn(comp.snackBarService, 'openCoaster');
         spyOn(nfRegistryApi, 'getUser').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'User #1',
             resourcePermissions: {
@@ -1657,7 +1657,7 @@
             }
         }));
         spyOn(nfRegistryApi, 'updateUser').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'test',
             status: 200
@@ -1688,13 +1688,13 @@
         spyOn(comp.dialogService, 'openConfirm').and.callFake(function () {
             return {
                 afterClosed: function () {
-                    return Observable.of(true);
+                    return of(true);
                 }
             };
         });
         spyOn(comp.snackBarService, 'openCoaster');
         spyOn(nfRegistryApi, 'getUser').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'User #1',
             resourcePermissions: {
@@ -1726,7 +1726,7 @@
             }
         }));
         spyOn(nfRegistryApi, 'updateUser').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'test',
             status: 409
@@ -1755,7 +1755,7 @@
     it('should destroy the component', fakeAsync(function () {
         spyOn(nfRegistryService.sidenav, 'close');
         spyOn(nfRegistryApi, 'getUser').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             identity: 'User #1',
             resourcePermissions: {
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/add-policy-to-bucket/nf-registry-add-policy-to-bucket.html b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/add-policy-to-bucket/nf-registry-add-policy-to-bucket.html
index 8a2c7c5..c46ba7c 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/add-policy-to-bucket/nf-registry-add-policy-to-bucket.html
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/add-policy-to-bucket/nf-registry-add-policy-to-bucket.html
@@ -17,7 +17,9 @@
 
 <div id="nifi-registry-admin-create-bucket-dialog">
     <div class="pad-bottom-md" fxLayout="row" fxLayoutAlign="space-between center">
-        <span class="md-card-title">New Policy</span>
+        <mat-card-title class="ellipsis">
+            New Policy
+        </mat-card-title>
         <button mat-icon-button (click)="cancel()">
             <mat-icon color="primary">close</mat-icon>
         </button>
@@ -92,4 +94,4 @@
             Apply
         </button>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/add-policy-to-bucket/nf-registry-add-policy-to-bucket.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/add-policy-to-bucket/nf-registry-add-policy-to-bucket.js
index 09207db..a437b08 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/add-policy-to-bucket/nf-registry-add-policy-to-bucket.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/add-policy-to-bucket/nf-registry-add-policy-to-bucket.js
@@ -15,14 +15,15 @@
  * limitations under the License.
  */
 
-import { Observable } from 'rxjs';
 import { Component, ViewChild } from '@angular/core';
 import NfRegistryService from 'services/nf-registry.service';
 import NfRegistryApi from 'services/nf-registry.api';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
 import { ActivatedRoute } from '@angular/router';
-import { TdDataTableService } from '@covalent/core';
-import { FdsSnackBarService } from '@flow-design-system/snackbars';
+import { TdDataTableService } from '@covalent/core/data-table';
+import { FdsSnackBarService } from '@nifi-fds/core';
+import { switchMap } from 'rxjs/operators';
+import { forkJoin } from 'rxjs';
 
 /**
  * NfRegistryAddPolicyToBucket constructor.
@@ -64,12 +65,14 @@
     ngOnInit: function () {
         var self = this;
         this.route.params
-            .switchMap(function (params) {
-                return Observable.forkJoin(
-                    self.nfRegistryApi.getUsers(),
-                    self.nfRegistryApi.getUserGroups()
-                );
-            })
+            .pipe(
+                switchMap(function (params) {
+                    return forkJoin(
+                        self.nfRegistryApi.getUsers(),
+                        self.nfRegistryApi.getUserGroups()
+                    );
+                })
+            )
             .subscribe(function (response) {
                 self.users = response[0];
                 self.users = self.users.filter(function (user) {
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/create-bucket/nf-registry-create-bucket.html b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/create-bucket/nf-registry-create-bucket.html
index 19f7663..4ceba1a 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/create-bucket/nf-registry-create-bucket.html
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/create-bucket/nf-registry-create-bucket.html
@@ -17,16 +17,18 @@
 
 <div id="nifi-registry-admin-create-bucket-dialog">
     <div class="pad-bottom-md" fxLayout="row" fxLayoutAlign="space-between center">
-        <span class="md-card-title">New Bucket</span>
+        <mat-card-title class="ellipsis">
+            New Bucket
+        </mat-card-title>
         <button mat-icon-button (click)="cancel()">
             <mat-icon color="primary">close</mat-icon>
         </button>
     </div>
     <div fxLayout="column" fxLayoutAlign="space-between start" class="pad-bottom-md">
-        <div class="pad-bottom-md fill-available-width">
-            <mat-input-container floatPlaceholder="always" fxFlex>
+        <div class="fill-available-width">
+            <mat-form-field floatLabel="always" fxFlex>
                 <input #newBucketInput matInput floatPlaceholder="always" placeholder="Bucket Name">
-            </mat-input-container>
+            </mat-form-field>
         </div>
         <mat-checkbox #newBucketPublicReadCheckbox [disabled]="protocol === 'http:'" >
             Make publicly visible<i matTooltip="Allows read access to items in this bucket by unauthenticated users. Overrides any specific policies granting read access."
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/create-bucket/nf-registry-create-bucket.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/create-bucket/nf-registry-create-bucket.js
index f529285..e23c60f 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/create-bucket/nf-registry-create-bucket.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/create-bucket/nf-registry-create-bucket.js
@@ -19,7 +19,7 @@
 import NfRegistryService from 'services/nf-registry.service';
 import NfRegistryApi from 'services/nf-registry.api';
 import { MatDialogRef } from '@angular/material';
-import { FdsSnackBarService } from '@flow-design-system/snackbars';
+import { FdsSnackBarService } from '@nifi-fds/core';
 
 /**
  * NfRegistryCreateBucket constructor.
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/create-bucket/nf-registry-create-bucket.spec.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/create-bucket/nf-registry-create-bucket.spec.js
index 5b14455..dd62fa4 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/create-bucket/nf-registry-create-bucket.spec.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/create-bucket/nf-registry-create-bucket.spec.js
@@ -18,7 +18,7 @@
 import NfRegistryApi from 'services/nf-registry.api';
 import NfRegistryService from 'services/nf-registry.service';
 import NfRegistryCreateBucket from 'components/administration/workflow/dialogs/create-bucket/nf-registry-create-bucket';
-import { Observable } from 'rxjs';
+import { of } from 'rxjs';
 
 describe('NfRegistryCreateBucket Component isolated unit tests', function () {
     var comp;
@@ -39,7 +39,7 @@
 
         // Spy
         spyOn(nfRegistryApi, 'createBucket').and.callFake(function () {
-        }).and.returnValue(Observable.of({name: 'NewBucket'}));
+        }).and.returnValue(of({name: 'NewBucket'}));
         spyOn(nfRegistryService, 'filterBuckets');
         spyOn(comp.dialogRef, 'close');
     });
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/edit-bucket-policy/nf-registry-edit-bucket-policy.html b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/edit-bucket-policy/nf-registry-edit-bucket-policy.html
index 07302d0..8e4f3d0 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/edit-bucket-policy/nf-registry-edit-bucket-policy.html
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/edit-bucket-policy/nf-registry-edit-bucket-policy.html
@@ -17,15 +17,17 @@
 
 <div id="nifi-registry-admin-create-bucket-dialog">
     <div class="pad-bottom-md" fxLayout="row" fxLayoutAlign="space-between center">
-        <span class="md-card-title">Edit Policy</span>
+        <mat-card-title class="ellipsis">
+            Edit Policy
+        </mat-card-title>
         <button mat-icon-button (click)="cancel()">
             <mat-icon color="primary">close</mat-icon>
         </button>
     </div>
-    <div flex fxLayoutAlign="start center" class="pad-bottom-md">
-        <mat-input-container flex>
+    <div flex fxLayoutAlign="start center">
+        <mat-form-field floatLabel="always" flex>
             <input disabled value="{{userOrGroup.identity}}" #userOrGroupInput matInput placeholder="For This User/Group">
-        </mat-input-container>
+        </mat-form-field>
     </div>
     <div flex fxLayout="row" fxLayoutAlign="start center" class="pad-bottom-md">
         <mat-checkbox [(checked)]="readCheckbox.checked && writeCheckbox.checked && deleteCheckbox.checked" (change)="toggleAllPermissions($event)">
@@ -52,4 +54,4 @@
             Apply
         </button>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/edit-bucket-policy/nf-registry-edit-bucket-policy.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/edit-bucket-policy/nf-registry-edit-bucket-policy.js
index fb40da7..dfda7b9 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/edit-bucket-policy/nf-registry-edit-bucket-policy.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/edit-bucket-policy/nf-registry-edit-bucket-policy.js
@@ -15,12 +15,13 @@
  * limitations under the License.
  */
 
-import { Observable } from 'rxjs';
 import { Component, ViewChild } from '@angular/core';
 import NfRegistryService from 'services/nf-registry.service';
 import NfRegistryApi from 'services/nf-registry.api';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
 import { ActivatedRoute } from '@angular/router';
+import { switchMap } from 'rxjs/operators';
+import { forkJoin } from 'rxjs';
 
 /**
  * NfRegistryEditBucketPolicy constructor.
@@ -51,12 +52,14 @@
     ngOnInit: function () {
         var self = this;
         this.route.params
-            .switchMap(function (params) {
-                return Observable.forkJoin(
-                    self.nfRegistryApi.getUsers(),
-                    self.nfRegistryApi.getUserGroups()
-                );
-            })
+            .pipe(
+                switchMap(function (params) {
+                    return forkJoin(
+                        self.nfRegistryApi.getUsers(),
+                        self.nfRegistryApi.getUserGroups()
+                    );
+                })
+            )
             .subscribe(function (response) {
                 var users = response[0];
                 var groups = response[1];
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/nf-registry-workflow-administration.html b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/nf-registry-workflow-administration.html
index fa28b5b..222ad4a 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/nf-registry-workflow-administration.html
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/nf-registry-workflow-administration.html
@@ -16,7 +16,9 @@
 -->
 <div id="nifi-registry-workflow-administration-perspective-buckets-container" class="mat-elevation-z5">
     <div fxFlex class="pad-top-md pad-bottom-sm pad-left-md pad-right-md">
-        <span class="md-card-title">Buckets ({{nfRegistryService.buckets.length}})</span>
+        <mat-card-title class="ellipsis">
+            Buckets ({{nfRegistryService.buckets.length}})
+        </mat-card-title>
         <div flex class="push-right-sm" fxLayout="row" fxLayoutAlign="end center">
             <td-chips class="push-right-sm"
                       [items]="nfRegistryService.autoCompleteBuckets"
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/nf-registry-workflow-administration.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/nf-registry-workflow-administration.js
index c823c8c..e8db578 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/nf-registry-workflow-administration.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/nf-registry-workflow-administration.js
@@ -22,6 +22,7 @@
 import nfRegistryAnimations from 'nf-registry.animations';
 import { ActivatedRoute } from '@angular/router';
 import { MatDialog } from '@angular/material';
+import { switchMap } from 'rxjs/operators';
 
 /**
  * NfRegistryWorkflowAdministration constructor.
@@ -52,10 +53,12 @@
         var self = this;
         this.nfRegistryService.inProgress = true;
         this.$subscription = this.route.params
-            .switchMap(function (params) {
-                self.nfRegistryService.adminPerspective = 'workflow';
-                return self.nfRegistryApi.getBuckets();
-            })
+            .pipe(
+                switchMap(function (params) {
+                    self.nfRegistryService.adminPerspective = 'workflow';
+                    return self.nfRegistryApi.getBuckets();
+                })
+            )
             .subscribe(function (buckets) {
                 self.nfRegistryService.buckets = buckets;
                 self.nfRegistryService.filterBuckets();
@@ -79,7 +82,8 @@
      */
     createBucket: function () {
         this.dialog.open(NfRegistryCreateBucket, {
-            disableClose: true
+            disableClose: true,
+            width: '400px'
         });
     }
 };
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/nf-registry-workflow-administration.spec.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/nf-registry-workflow-administration.spec.js
index d8a1e52..c2554a6 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/nf-registry-workflow-administration.spec.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/nf-registry-workflow-administration.spec.js
@@ -17,7 +17,7 @@
 
 import { TestBed, fakeAsync, tick, async } from '@angular/core/testing';
 import initTestBed from 'nf-registry.testbed-factory';
-import { Observable } from 'rxjs';
+import { of } from 'rxjs';
 import NfRegistryApi from 'services/nf-registry.api';
 import NfRegistryService from 'services/nf-registry.service';
 import * as ngPlatformBrowser from '@angular/platform-browser';
@@ -36,7 +36,7 @@
             {
                 provide: ActivatedRoute,
                 useValue: {
-                    params: Observable.of({})
+                    params: of({})
                 }
             }
         ];
@@ -54,10 +54,10 @@
                 de = fixture.debugElement.query(ngPlatformBrowser.By.css('#nifi-registry-workflow-administration-perspective-buckets-container'));
 
                 // Spy
-                spyOn(nfRegistryApi, 'ticketExchange').and.callFake(function () {}).and.returnValue(Observable.of({}));
-                spyOn(nfRegistryApi, 'loadCurrentUser').and.callFake(function () {}).and.returnValue(Observable.of({}));
+                spyOn(nfRegistryApi, 'ticketExchange').and.callFake(function () {}).and.returnValue(of({}));
+                spyOn(nfRegistryApi, 'loadCurrentUser').and.callFake(function () {}).and.returnValue(of({}));
                 spyOn(nfRegistryApi, 'getBuckets').and.callFake(function () {
-                }).and.returnValue(Observable.of([{name: 'Bucket #1'}]));
+                }).and.returnValue(of([{name: 'Bucket #1'}]));
                 spyOn(nfRegistryService, 'filterBuckets');
 
                 done();
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/sidenav/manage-bucket/nf-registry-manage-bucket.html b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/sidenav/manage-bucket/nf-registry-manage-bucket.html
index 126aaa7..4486e35 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/sidenav/manage-bucket/nf-registry-manage-bucket.html
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/sidenav/manage-bucket/nf-registry-manage-bucket.html
@@ -17,14 +17,16 @@
 
 <div fxFill>
     <div fxLayout="row" fxLayoutAlign="space-between center" class="pad-top-sm pad-bottom-md pad-left-md pad-right-md">
-        <span class="md-card-title">{{nfRegistryService.bucket.name}}</span>
+        <mat-card-title class="ellipsis">
+            {{nfRegistryService.bucket.name}}
+        </mat-card-title>
         <button mat-icon-button data-automation-id="nf-registry-manage-bucket-close-side-nav" (click)="closeSideNav()">
             <mat-icon color="primary">close</mat-icon>
         </button>
     </div>
     <div class="sidenav-content">
         <div class="pad-left-md pad-right-md" flex fxLayoutAlign="start center">
-            <mat-input-container flex>
+            <mat-form-field floatLabel="always" flex>
                 <input #bucketnameInput
                        data-automation-id="nf-registry-manage-bucket-input-name"
                        matInput
@@ -32,7 +34,7 @@
                        placeholder="Identity/Bucket Name"
                        value="{{nfRegistryService.bucket.name}}"
                        [(ngModel)]="bucketname">
-            </mat-input-container>
+            </mat-form-field>
             <button [disabled]="nfRegistryService.bucket.name === bucketname"
                     (click)="updateBucketName(bucketnameInput.value)"
                     data-automation-id="nf-registry-manage-bucket-save-side-nav"
@@ -53,7 +55,9 @@
         </div>
         <div class="pad-top-md pad-left-md pad-right-md">
             <div class="pad-bottom-sm">
-                <span class="md-card-title">Bundle Settings</span>
+                <mat-card-title class="ellipsis">
+                    Bundle Settings
+                </mat-card-title>
             </div>
             <div>
                 <mat-checkbox #bundleRedeployCheckbox
@@ -66,7 +70,9 @@
         </div>
         <div *ngIf="!nfRegistryService.currentUser.anonymous || nfRegistryService.currentUser.resourcePermissions.policies.canRead" class="pad-top-md pad-left-md pad-right-md">
             <div flex fxLayout="row" fxLayoutAlign="space-between center">
-                <span class="md-card-title">Policies ({{userIdentitiesWithPolicies.length + groupIdentitiesWithPolicies.length}})</span>
+                <mat-card-title class="ellipsis">
+                    Policies ({{userIdentitiesWithPolicies.length + groupIdentitiesWithPolicies.length}})
+                </mat-card-title>
                 <button color="fds-secondary"
                         [disabled]="nfRegistryService.currentUser.anonymous || !canEditBucketPolicies() || !nfRegistryService.currentUser.resourcePermissions.tenants.canRead"
                         mat-raised-button
@@ -146,7 +152,9 @@
         </div>
         <div class="pad-top-md pad-left-md pad-right-md">
             <div class="pad-bottom-sm">
-                <span class="md-card-title">About</span>
+                <mat-card-title class="ellipsis">
+                    About
+                </mat-card-title>
             </div>
             <div>
                 <span class="field-header">Bucket Identifier</span>
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/sidenav/manage-bucket/nf-registry-manage-bucket.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/sidenav/manage-bucket/nf-registry-manage-bucket.js
index 367129c..c739c67 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/sidenav/manage-bucket/nf-registry-manage-bucket.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/sidenav/manage-bucket/nf-registry-manage-bucket.js
@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 
-import { Observable } from 'rxjs';
-import { TdDataTableService } from '@covalent/core';
-import { FdsDialogService } from '@flow-design-system/dialogs';
-import { FdsSnackBarService } from '@flow-design-system/snackbars';
+import { TdDataTableService } from '@covalent/core/data-table';
+import { FdsDialogService, FdsSnackBarService } from '@nifi-fds/core';
 import { Component } from '@angular/core';
 import NfRegistryService from 'services/nf-registry.service';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -26,6 +24,8 @@
 import { MatDialog } from '@angular/material';
 import NfRegistryAddPolicyToBucket from 'components/administration/workflow/dialogs/add-policy-to-bucket/nf-registry-add-policy-to-bucket';
 import NfRegistryEditBucketPolicy from 'components/administration/workflow/dialogs/edit-bucket-policy/nf-registry-edit-bucket-policy';
+import { switchMap } from 'rxjs/operators';
+import { forkJoin } from 'rxjs';
 
 /**
  * NfRegistryManageBucket constructor.
@@ -50,7 +50,8 @@
             label: 'Display Name',
             sortable: true,
             tooltip: 'User/Group name.',
-            width: 40
+            width: 40,
+            active: true
         },
         {
             name: 'permissions',
@@ -93,12 +94,14 @@
     ngOnInit: function () {
         var self = this;
         this.$subscription = this.route.params
-            .switchMap(function (params) {
-                return Observable.forkJoin(
-                    self.nfRegistryApi.getBucket(params['bucketId']),
-                    self.nfRegistryApi.getPolicies()
-                );
-            })
+            .pipe(
+                switchMap(function (params) {
+                    return forkJoin(
+                        self.nfRegistryApi.getBucket(params['bucketId']),
+                        self.nfRegistryApi.getPolicies()
+                    );
+                })
+            )
             .subscribe(function (response) {
                 if (!response[0].status || response[0].status === 200) {
                     self.nfRegistryService.sidenav.open();
@@ -125,7 +128,7 @@
                                     });
                                 }
                             });
-                            self.filterPolicies(this.sortBy, this.sortOrder);
+                            self.sortBuckets(self.bucketPoliciesColumns.find(bucketPoliciesColumn => bucketPoliciesColumn.active === true));
                         }
                     }
                 } else if (response[0].status === 404) {
@@ -198,7 +201,8 @@
             data: {
                 userOrGroup: userOrGroup,
                 disableClose: true
-            }
+            },
+            width: '400px'
         }).afterClosed().subscribe(function (dialogResult) {
             self.nfRegistryApi.getBucket(self.nfRegistryService.bucket.identifier)
                 .subscribe(function (response) {
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/sidenav/manage-bucket/nf-registry-manage-bucket.spec.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/sidenav/manage-bucket/nf-registry-manage-bucket.spec.js
index 48f2a9f..1a853f1 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/sidenav/manage-bucket/nf-registry-manage-bucket.spec.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/sidenav/manage-bucket/nf-registry-manage-bucket.spec.js
@@ -17,7 +17,7 @@
 
 import { TestBed, fakeAsync, tick } from '@angular/core/testing';
 import initTestBed from 'nf-registry.testbed-factory';
-import { Observable } from 'rxjs';
+import { of } from 'rxjs';
 import NfRegistryApi from 'services/nf-registry.api';
 import NfRegistryService from 'services/nf-registry.service';
 
@@ -35,7 +35,7 @@
             {
                 provide: ActivatedRoute,
                 useValue: {
-                    params: Observable.of({bucketId: '123'})
+                    params: of({bucketId: '123'})
                 }
             }
         ];
@@ -66,9 +66,9 @@
 
                 //Spy
                 spyOn(nfRegistryApi, 'ticketExchange').and.callFake(function () {
-                }).and.returnValue(Observable.of({}));
+                }).and.returnValue(of({}));
                 spyOn(nfRegistryApi, 'loadCurrentUser').and.callFake(function () {
-                }).and.returnValue(Observable.of({}));
+                }).and.returnValue(of({}));
                 spyOn(nfRegistryService, 'filterDroplets');
 
                 done();
@@ -77,12 +77,12 @@
 
     it('should have a defined component', fakeAsync(function () {
         spyOn(nfRegistryApi, 'getBucket').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             name: 'Bucket #1'
         }));
         spyOn(nfRegistryApi, 'getPolicies').and.callFake(function () {
-        }).and.returnValue(Observable.of([
+        }).and.returnValue(of([
             {
                 identifier: 'string',
                 resource: '/buckets/123',
@@ -114,11 +114,11 @@
 
     it('should FAIL to get bucket by id and redirect to workflow perspective', fakeAsync(function () {
         spyOn(nfRegistryApi, 'getBucket').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             status: 404
         }));
         spyOn(nfRegistryApi, 'getPolicies').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             status: 404
         }));
         spyOn(comp.router, 'navigateByUrl').and.callFake(function () {
@@ -139,12 +139,12 @@
     it('should redirect to workflow perspective', fakeAsync(function () {
         // Spy
         spyOn(nfRegistryApi, 'getBucket').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             name: 'Bucket #1'
         }));
         spyOn(nfRegistryApi, 'getPolicies').and.callFake(function () {
-        }).and.returnValue(Observable.of([
+        }).and.returnValue(of([
             {
                 identifier: 'string',
                 resource: '/buckets/123',
@@ -183,7 +183,7 @@
         spyOn(comp.dialog, 'open').and.callFake(function () {
             return {
                 afterClosed: function () {
-                    return Observable.of({
+                    return of({
                         userOrGroup: {
                             type: 'user'
                         }
@@ -193,12 +193,12 @@
         });
         spyOn(comp.snackBarService, 'openCoaster');
         spyOn(nfRegistryApi, 'getBucket').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             name: 'Bucket #1'
         }));
         spyOn(nfRegistryApi, 'getPolicies').and.callFake(function () {
-        }).and.returnValue(Observable.of([
+        }).and.returnValue(of([
             {
                 identifier: '123',
                 resource: '/buckets/123',
@@ -242,7 +242,7 @@
         spyOn(comp.dialog, 'open').and.callFake(function () {
             return {
                 afterClosed: function () {
-                    return Observable.of({
+                    return of({
                         userOrGroup: {
                             type: 'group'
                         }
@@ -252,12 +252,12 @@
         });
         spyOn(comp.snackBarService, 'openCoaster');
         spyOn(nfRegistryApi, 'getBucket').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             name: 'Bucket #1'
         }));
         spyOn(nfRegistryApi, 'getPolicies').and.callFake(function () {
-        }).and.returnValue(Observable.of([
+        }).and.returnValue(of([
             {
                 identifier: '123',
                 resource: '/buckets/123',
@@ -301,7 +301,7 @@
         spyOn(comp.dialog, 'open').and.callFake(function () {
             return {
                 afterClosed: function () {
-                    return Observable.of({
+                    return of({
                         userOrGroup: {
                             type: 'user'
                         }
@@ -311,12 +311,12 @@
         });
         spyOn(comp.snackBarService, 'openCoaster');
         spyOn(nfRegistryApi, 'getBucket').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             name: 'Bucket #1'
         }));
         spyOn(nfRegistryApi, 'getPolicies').and.callFake(function () {
-        }).and.returnValue(Observable.of([
+        }).and.returnValue(of([
             {
                 identifier: '123',
                 resource: '/buckets/123',
@@ -360,7 +360,7 @@
         spyOn(comp.dialog, 'open').and.callFake(function () {
             return {
                 afterClosed: function () {
-                    return Observable.of({
+                    return of({
                         userOrGroup: {
                             type: 'group'
                         }
@@ -370,12 +370,12 @@
         });
         spyOn(comp.snackBarService, 'openCoaster');
         spyOn(nfRegistryApi, 'getBucket').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             name: 'Bucket #1'
         }));
         spyOn(nfRegistryApi, 'getPolicies').and.callFake(function () {
-        }).and.returnValue(Observable.of([
+        }).and.returnValue(of([
             {
                 identifier: '123',
                 resource: '/buckets/123',
@@ -416,12 +416,12 @@
         spyOn(comp, 'filterPolicies').and.callFake(function () {
         });
         spyOn(nfRegistryApi, 'getBucket').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             name: 'Bucket #1'
         }));
         spyOn(nfRegistryApi, 'getPolicies').and.callFake(function () {
-        }).and.returnValue(Observable.of([
+        }).and.returnValue(of([
             {
                 identifier: 'string',
                 resource: '/buckets/123',
@@ -452,8 +452,8 @@
         //assertions
         expect(column.active).toBe(true);
         const filterPoliciesCall = comp.filterPolicies.calls.first();
-        expect(filterPoliciesCall.args[0]).toBeUndefined();
-        expect(filterPoliciesCall.args[1]).toBeUndefined();
+        expect(filterPoliciesCall.args[0]).toBe('identity');
+        expect(filterPoliciesCall.args[1]).toBe('ASC');
     }));
 
     it('should remove policy from bucket', fakeAsync(function () {
@@ -463,18 +463,18 @@
         spyOn(comp.dialogService, 'openConfirm').and.callFake(function () {
             return {
                 afterClosed: function () {
-                    return Observable.of(true);
+                    return of(true);
                 }
             };
         });
         spyOn(comp.snackBarService, 'openCoaster');
         spyOn(nfRegistryApi, 'getBucket').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             name: 'Bucket #1'
         }));
         spyOn(nfRegistryApi, 'getPolicies').and.callFake(function () {
-        }).and.returnValue(Observable.of([
+        }).and.returnValue(of([
             {
                 identifier: '456',
                 resource: '/buckets/123',
@@ -489,7 +489,7 @@
             }
         ]));
         spyOn(nfRegistryApi, 'getPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             users: [{
                 identity: 'User #1'
             }],
@@ -498,7 +498,7 @@
             }]
         }));
         spyOn(nfRegistryApi, 'putPolicyActionResource').and.callFake(function () {
-        }).and.returnValue(Observable.of({}));
+        }).and.returnValue(of({}));
         spyOn(comp.router, 'navigateByUrl').and.callFake(function () {
         });
         // 1st change detection triggers ngOnInit
@@ -535,18 +535,18 @@
         spyOn(comp.dialogService, 'openConfirm').and.callFake(function () {
             return {
                 afterClosed: function () {
-                    return Observable.of(true);
+                    return of(true);
                 }
             };
         });
         spyOn(comp.snackBarService, 'openCoaster');
         spyOn(nfRegistryApi, 'getBucket').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             name: 'Bucket #1'
         }));
         spyOn(nfRegistryApi, 'getPolicies').and.callFake(function () {
-        }).and.returnValue(Observable.of([
+        }).and.returnValue(of([
             {
                 identifier: '456',
                 resource: '/buckets/123',
@@ -561,7 +561,7 @@
             }
         ]));
         spyOn(nfRegistryApi, 'updateBucket').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             name: 'test',
             status: 200
@@ -592,18 +592,18 @@
         spyOn(comp.dialogService, 'openConfirm').and.callFake(function () {
             return {
                 afterClosed: function () {
-                    return Observable.of(true);
+                    return of(true);
                 }
             };
         });
         spyOn(comp.snackBarService, 'openCoaster');
         spyOn(nfRegistryApi, 'getBucket').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             name: 'Bucket #1'
         }));
         spyOn(nfRegistryApi, 'getPolicies').and.callFake(function () {
-        }).and.returnValue(Observable.of([
+        }).and.returnValue(of([
             {
                 identifier: '456',
                 resource: '/buckets/123',
@@ -618,7 +618,7 @@
             }
         ]));
         spyOn(nfRegistryApi, 'updateBucket').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             name: 'test',
             status: 409
@@ -649,18 +649,18 @@
         spyOn(comp.dialogService, 'openConfirm').and.callFake(function () {
             return {
                 afterClosed: function () {
-                    return Observable.of(true);
+                    return of(true);
                 }
             };
         });
         spyOn(comp.snackBarService, 'openCoaster');
         spyOn(nfRegistryApi, 'getBucket').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             name: 'Bucket #1'
         }));
         spyOn(nfRegistryApi, 'getPolicies').and.callFake(function () {
-        }).and.returnValue(Observable.of([
+        }).and.returnValue(of([
             {
                 identifier: '456',
                 resource: '/buckets/123',
@@ -675,7 +675,7 @@
             }
         ]));
         spyOn(nfRegistryApi, 'updateBucket').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             name: 'test',
             status: 400
@@ -704,12 +704,12 @@
     it('should destroy the component', fakeAsync(function () {
         spyOn(nfRegistryService.sidenav, 'close');
         spyOn(nfRegistryApi, 'getBucket').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '123',
             name: 'Bucket #1'
         }));
         spyOn(nfRegistryApi, 'getPolicies').and.callFake(function () {
-        }).and.returnValue(Observable.of([
+        }).and.returnValue(of([
             {
                 identifier: 'string',
                 resource: '/buckets/123',
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-bucket-grid-list-viewer.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-bucket-grid-list-viewer.js
index 7ef7459..dd0c9e5 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-bucket-grid-list-viewer.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-bucket-grid-list-viewer.js
@@ -14,13 +14,15 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import { Component } from '@angular/core';
-import { Observable } from 'rxjs';
 import NfRegistryService from 'services/nf-registry.service';
 import NfRegistryApi from 'services/nf-registry.api';
 import NfStorage from 'services/nf-storage.service';
 import { ActivatedRoute, Router } from '@angular/router';
 import nfRegistryAnimations from 'nf-registry.animations';
+import { switchMap } from 'rxjs/operators';
+import { forkJoin } from 'rxjs';
 
 /**
  * NfRegistryBucketGridListViewer constructor.
@@ -56,13 +58,15 @@
 
         // subscribe to the route params
         this.$subscription = this.route.params
-            .switchMap(function (params) {
-                return Observable.forkJoin(
-                    self.nfRegistryApi.getBuckets(),
-                    self.nfRegistryApi.getDroplets(params['bucketId']),
-                    self.nfRegistryApi.getBucket(params['bucketId'])
-                );
-            })
+            .pipe(
+                switchMap(function (params) {
+                    return forkJoin(
+                        self.nfRegistryApi.getBuckets(),
+                        self.nfRegistryApi.getDroplets(params['bucketId']),
+                        self.nfRegistryApi.getBucket(params['bucketId'])
+                    );
+                })
+            )
             .subscribe(function (response) {
                 if (!response[0].status || response[0].status === 200) {
                     var buckets = response[0];
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-bucket-grid-list-viewer.spec.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-bucket-grid-list-viewer.spec.js
index 2edcf74..55c7842 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-bucket-grid-list-viewer.spec.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-bucket-grid-list-viewer.spec.js
@@ -17,7 +17,7 @@
 
 import { TestBed, fakeAsync, tick } from '@angular/core/testing';
 import initTestBed from 'nf-registry.testbed-factory';
-import { Observable } from 'rxjs';
+import { of } from 'rxjs';
 import NfRegistryApi from 'services/nf-registry.api';
 import NfRegistryService from 'services/nf-registry.service';
 import { ActivatedRoute } from '@angular/router';
@@ -35,7 +35,7 @@
             {
                 provide: ActivatedRoute,
                 useValue: {
-                    params: Observable.of({bucketId: '2f7f9e54-dc09-4ceb-aa58-9fe581319cdc'})
+                    params: of({bucketId: '2f7f9e54-dc09-4ceb-aa58-9fe581319cdc'})
                 }
             }
         ];
@@ -55,8 +55,8 @@
                 nfRegistryService.explorerViewType = 'grid-list';
 
                 //Spy
-                spyOn(nfRegistryApi, 'ticketExchange').and.callFake(function () {}).and.returnValue(Observable.of({}));
-                spyOn(nfRegistryApi, 'loadCurrentUser').and.callFake(function () {}).and.returnValue(Observable.of({}));
+                spyOn(nfRegistryApi, 'ticketExchange').and.callFake(function () {}).and.returnValue(of({}));
+                spyOn(nfRegistryApi, 'loadCurrentUser').and.callFake(function () {}).and.returnValue(of({}));
                 spyOn(nfRegistryService, 'filterDroplets');
 
                 done();
@@ -65,17 +65,17 @@
 
     it('should have a defined component', fakeAsync(function () {
         spyOn(nfRegistryApi, 'getBuckets').and.callFake(function () {
-        }).and.returnValue(Observable.of([{
+        }).and.returnValue(of([{
             identifier: '2f7f9e54-dc09-4ceb-aa58-9fe581319cdc',
             name: 'Bucket #1'
         }]));
         spyOn(nfRegistryApi, 'getBucket').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '2f7f9e54-dc09-4ceb-aa58-9fe581319cdc',
             name: 'Bucket #1'
         }));
         spyOn(nfRegistryApi, 'getDroplets').and.callFake(function () {
-        }).and.returnValue(Observable.of([{
+        }).and.returnValue(of([{
             'identifier': '2e04b4fb-9513-47bb-aa74-1ae34616bfdc',
             'name': 'Flow #1',
             'description': 'This is flow #1',
@@ -120,15 +120,15 @@
 
     it('should FAIL to get buckets, get bucket, and get droplets and redirect to view all buckets', fakeAsync(function () {
         spyOn(nfRegistryApi, 'getBuckets').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             status: 404
         }));
         spyOn(nfRegistryApi, 'getBucket').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             status: 404
         }));
         spyOn(nfRegistryApi, 'getDroplets').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             status: 404
         }));
         spyOn(comp.router, 'navigateByUrl').and.callFake(function () {
@@ -148,17 +148,17 @@
 
     it('should destroy the component', fakeAsync(function () {
         spyOn(nfRegistryApi, 'getBuckets').and.callFake(function () {
-        }).and.returnValue(Observable.of([{
+        }).and.returnValue(of([{
             identifier: '2f7f9e54-dc09-4ceb-aa58-9fe581319cdc',
             name: 'Bucket #1'
         }]));
         spyOn(nfRegistryApi, 'getBucket').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '2f7f9e54-dc09-4ceb-aa58-9fe581319cdc',
             name: 'Bucket #1'
         }));
         spyOn(nfRegistryApi, 'getDroplets').and.callFake(function () {
-        }).and.returnValue(Observable.of([{
+        }).and.returnValue(of([{
             'identifier': '2e04b4fb-9513-47bb-aa74-1ae34616bfdc',
             'name': 'Flow #1',
             'description': 'This is flow #1',
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-droplet-grid-list-viewer.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-droplet-grid-list-viewer.js
index 6dbe655..1d68fb2 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-droplet-grid-list-viewer.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-droplet-grid-list-viewer.js
@@ -16,12 +16,13 @@
  */
 
 import { Component } from '@angular/core';
-import { Observable } from 'rxjs';
 import NfRegistryService from 'services/nf-registry.service';
 import NfRegistryApi from 'services/nf-registry.api';
 import NfStorage from 'services/nf-storage.service';
 import { ActivatedRoute, Router } from '@angular/router';
 import nfRegistryAnimations from 'nf-registry.animations';
+import { switchMap } from 'rxjs/operators';
+import { forkJoin } from 'rxjs';
 
 /**
  * NfRegistryDropletGridListViewer constructor.
@@ -54,14 +55,16 @@
 
         // subscribe to the route params
         this.$subscription = this.route.params
-            .switchMap(function (params) {
-                return Observable.forkJoin(
-                    self.nfRegistryApi.getDroplet(params['bucketId'], params['dropletType'], params['dropletId']),
-                    self.nfRegistryApi.getBucket(params['bucketId']),
-                    self.nfRegistryApi.getBuckets(),
-                    self.nfRegistryApi.getDroplets(params['bucketId'])
-                );
-            })
+            .pipe(
+                switchMap(function (params) {
+                    return forkJoin(
+                        self.nfRegistryApi.getDroplet(params['bucketId'], params['dropletType'], params['dropletId']),
+                        self.nfRegistryApi.getBucket(params['bucketId']),
+                        self.nfRegistryApi.getBuckets(),
+                        self.nfRegistryApi.getDroplets(params['bucketId'])
+                    );
+                })
+            )
             .subscribe(function (response) {
                 if (!response[0].status || response[0].status === 200) {
                     var droplet = response[0];
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-droplet-grid-list-viewer.spec.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-droplet-grid-list-viewer.spec.js
index 7bbfe3b..5d22c9c 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-droplet-grid-list-viewer.spec.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-droplet-grid-list-viewer.spec.js
@@ -17,7 +17,7 @@
 
 import { TestBed, fakeAsync, tick } from '@angular/core/testing';
 import initTestBed from 'nf-registry.testbed-factory';
-import { Observable } from 'rxjs';
+import { of } from 'rxjs';
 import NfRegistryApi from 'services/nf-registry.api';
 import NfRegistryService from 'services/nf-registry.service';
 import { ActivatedRoute } from '@angular/router';
@@ -35,7 +35,7 @@
             {
                 provide: ActivatedRoute,
                 useValue: {
-                    params: Observable.of({
+                    params: of({
                         bucketId: '2f7f9e54-dc09-4ceb-aa58-9fe581319cdc',
                         dropletId: '2e04b4fb-9513-47bb-aa74-1ae34616bfdc',
                         dropletType: 'flow'
@@ -60,8 +60,8 @@
                 nfRegistryService.explorerViewType = 'grid-list';
 
                 //Spy
-                spyOn(nfRegistryApi, 'ticketExchange').and.callFake(function () {}).and.returnValue(Observable.of({}));
-                spyOn(nfRegistryApi, 'loadCurrentUser').and.callFake(function () {}).and.returnValue(Observable.of({}));
+                spyOn(nfRegistryApi, 'ticketExchange').and.callFake(function () {}).and.returnValue(of({}));
+                spyOn(nfRegistryApi, 'loadCurrentUser').and.callFake(function () {}).and.returnValue(of({}));
                 spyOn(nfRegistryService, 'filterDroplets');
 
                 done();
@@ -70,7 +70,7 @@
 
     it('should have a defined component', fakeAsync(function () {
         spyOn(nfRegistryApi, 'getDroplet').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             'identifier': '2e04b4fb-9513-47bb-aa74-1ae34616bfdc',
             'name': 'Flow #1',
             'description': 'This is flow #1',
@@ -87,17 +87,17 @@
             }
         }));
         spyOn(nfRegistryApi, 'getBuckets').and.callFake(function () {
-        }).and.returnValue(Observable.of([{
+        }).and.returnValue(of([{
             identifier: '2f7f9e54-dc09-4ceb-aa58-9fe581319cdc',
             name: 'Bucket #1'
         }]));
         spyOn(nfRegistryApi, 'getBucket').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '2f7f9e54-dc09-4ceb-aa58-9fe581319cdc',
             name: 'Bucket #1'
         }));
         spyOn(nfRegistryApi, 'getDroplets').and.callFake(function () {
-        }).and.returnValue(Observable.of([{
+        }).and.returnValue(of([{
             'identifier': '2e04b4fb-9513-47bb-aa74-1ae34616bfdc',
             'name': 'Flow #1',
             'description': 'This is flow #1',
@@ -148,19 +148,19 @@
 
     it('should FAIL to get buckets, get bucket, get droplets, and get droplet and then redirect to view all buckets', fakeAsync(function () {
         spyOn(nfRegistryApi, 'getBuckets').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             status: 404
         }));
         spyOn(nfRegistryApi, 'getBucket').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             status: 404
         }));
         spyOn(nfRegistryApi, 'getDroplets').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             status: 404
         }));
         spyOn(nfRegistryApi, 'getDroplet').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             status: 404
         }));
         spyOn(comp.router, 'navigateByUrl').and.callFake(function () {
@@ -180,7 +180,7 @@
 
     it('should destroy the component', fakeAsync(function () {
         spyOn(nfRegistryApi, 'getDroplet').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             'identifier': '2e04b4fb-9513-47bb-aa74-1ae34616bfdc',
             'name': 'Flow #1',
             'description': 'This is flow #1',
@@ -197,17 +197,17 @@
             }
         }));
         spyOn(nfRegistryApi, 'getBuckets').and.callFake(function () {
-        }).and.returnValue(Observable.of([{
+        }).and.returnValue(of([{
             identifier: '2f7f9e54-dc09-4ceb-aa58-9fe581319cdc',
             name: 'Bucket #1'
         }]));
         spyOn(nfRegistryApi, 'getBucket').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             identifier: '2f7f9e54-dc09-4ceb-aa58-9fe581319cdc',
             name: 'Bucket #1'
         }));
         spyOn(nfRegistryApi, 'getDroplets').and.callFake(function () {
-        }).and.returnValue(Observable.of([{
+        }).and.returnValue(of([{
             'identifier': '2e04b4fb-9513-47bb-aa74-1ae34616bfdc',
             'name': 'Flow #1',
             'description': 'This is flow #1',
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-grid-list-viewer.html b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-grid-list-viewer.html
index fa41287..e0faa83 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-grid-list-viewer.html
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-grid-list-viewer.html
@@ -97,10 +97,10 @@
                                              *ngFor="let snapshotMeta of droplet.snapshotMetadata; let i = index"
                                              [active]="i === 0 ? true : false">
                                         <div fxLayout="column" fxLayoutAlign="space-between stretch">
-                                            <div *ngIf="snapshotMeta.comments" fxLayout="row" class="md-body-2">
+                                            <div *ngIf="snapshotMeta.comments" fxLayout="row" class="mat-body-2">
                                                 {{snapshotMeta.comments}}
                                             </div>
-                                            <div *ngIf="!snapshotMeta.comments" fxLayout="row" class="md-body-2">
+                                            <div *ngIf="!snapshotMeta.comments" fxLayout="row" class="mat-body-2">
                                                 No comments specified
                                             </div>
                                             <div fxLayout="row" class="mat-caption">
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-grid-list-viewer.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-grid-list-viewer.js
index 189961e..7af9538 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-grid-list-viewer.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-grid-list-viewer.js
@@ -16,12 +16,13 @@
  */
 
 import { Component } from '@angular/core';
-import { Observable } from 'rxjs';
 import NfRegistryService from 'services/nf-registry.service';
 import NfRegistryApi from 'services/nf-registry.api';
 import NfStorage from 'services/nf-storage.service';
 import { ActivatedRoute } from '@angular/router';
 import nfRegistryAnimations from 'nf-registry.animations';
+import { switchMap } from 'rxjs/operators';
+import { forkJoin } from 'rxjs';
 
 /**
  * NfRegistryGridListViewer constructor.
@@ -56,10 +57,14 @@
 
         // subscribe to the route params
         this.$subscription = this.route.params
-            .switchMap(function (params) {
-                return Observable.forkJoin(self.nfRegistryApi.getDroplets(),
-                    self.nfRegistryApi.getBuckets());
-            })
+            .pipe(
+                switchMap(function (params) {
+                    return forkJoin(
+                        self.nfRegistryApi.getDroplets(),
+                        self.nfRegistryApi.getBuckets()
+                    );
+                })
+            )
             .subscribe(function (response) {
                 var droplets = response[0];
                 var buckets = response[1];
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-grid-list-viewer.spec.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-grid-list-viewer.spec.js
index 3f7724b..117f635 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-grid-list-viewer.spec.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-grid-list-viewer.spec.js
@@ -17,7 +17,7 @@
 
 import { TestBed, fakeAsync, tick } from '@angular/core/testing';
 import initTestBed from 'nf-registry.testbed-factory';
-import { Observable } from 'rxjs';
+import { of } from 'rxjs';
 import NfRegistryApi from 'services/nf-registry.api';
 import NfRegistryService from 'services/nf-registry.service';
 import { ActivatedRoute } from '@angular/router';
@@ -35,7 +35,7 @@
             {
                 provide: ActivatedRoute,
                 useValue: {
-                    params: Observable.of({})
+                    params: of({})
                 }
             }
         ];
@@ -55,10 +55,10 @@
                 nfRegistryService.perspective = 'explorer';
 
                 // Spy
-                spyOn(nfRegistryApi, 'ticketExchange').and.callFake(function () {}).and.returnValue(Observable.of({}));
-                spyOn(nfRegistryApi, 'loadCurrentUser').and.callFake(function () {}).and.returnValue(Observable.of({}));
+                spyOn(nfRegistryApi, 'ticketExchange').and.callFake(function () {}).and.returnValue(of({}));
+                spyOn(nfRegistryApi, 'loadCurrentUser').and.callFake(function () {}).and.returnValue(of({}));
                 spyOn(nfRegistryApi, 'getBuckets').and.callFake(function () {
-                }).and.returnValue(Observable.of([{
+                }).and.returnValue(of([{
                     identifier: '2f7f9e54-dc09-4ceb-aa58-9fe581319cdc',
                     name: 'Bucket #1'
                 }]));
@@ -70,7 +70,7 @@
 
     it('should have a defined component', fakeAsync(function () {
         spyOn(nfRegistryApi, 'getDroplets').and.callFake(function () {
-        }).and.returnValue(Observable.of([{
+        }).and.returnValue(of([{
             'identifier': '2e04b4fb-9513-47bb-aa74-1ae34616bfdc',
             'name': 'Flow #1',
             'description': 'This is flow #1',
@@ -111,7 +111,7 @@
 
     it('should destroy the component', fakeAsync(function () {
         spyOn(nfRegistryApi, 'getDroplets').and.callFake(function () {
-        }).and.returnValue(Observable.of([{
+        }).and.returnValue(of([{
             'identifier': '2e04b4fb-9513-47bb-aa74-1ae34616bfdc',
             'name': 'Flow #1',
             'description': 'This is flow #1',
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/login/dialogs/nf-registry-user-login.html b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/login/dialogs/nf-registry-user-login.html
index 986e7b3..eee4614 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/login/dialogs/nf-registry-user-login.html
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/login/dialogs/nf-registry-user-login.html
@@ -17,21 +17,23 @@
 
 <div id="nifi-registry-user-login-dialog">
     <div class="pad-bottom-md" fxLayout="row" fxLayoutAlign="space-between center">
-        <span class="md-card-title">Log In</span>
+        <mat-card-title class="ellipsis">
+            Log In
+        </mat-card-title>
         <button mat-icon-button (click)="cancel()">
             <mat-icon color="primary">close</mat-icon>
         </button>
     </div>
     <div fxLayout="column" fxLayoutAlign="space-between start" class="pad-bottom-md">
-        <div class="pad-bottom-md fill-available-width">
-            <mat-input-container floatPlaceholder="always" fxFlex>
+        <div class="fill-available-width">
+            <mat-form-field floatLabel="always" fxFlex>
                 <input #usernameInput matInput floatPlaceholder="always" placeholder="Username">
-            </mat-input-container>
+            </mat-form-field>
         </div>
-        <div class="pad-bottom-md fill-available-width">
-            <mat-input-container floatPlaceholder="always" fxFlex>
+        <div class="fill-available-width">
+            <mat-form-field floatLabel="always" fxFlex>
                 <input #passwordInput type="password" matInput floatPlaceholder="always" placeholder="Password">
-            </mat-input-container>
+            </mat-form-field>
         </div>
     </div>
     <div fxLayout="row">
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/login/nf-registry-login.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/login/nf-registry-login.js
index eea633b..2ceec50 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/login/nf-registry-login.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/login/nf-registry-login.js
@@ -42,7 +42,8 @@
     ngOnInit: function () {
         this.nfRegistryService.perspective = 'login';
         this.dialog.open(NfUserLoginComponent, {
-            disableClose: true
+            disableClose: true,
+            width: '400px'
         });
     }
 };
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/page-not-found/nf-registry-page-not-found.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/page-not-found/nf-registry-page-not-found.js
index b6fe5d4..bc2e4d4 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/page-not-found/nf-registry-page-not-found.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/page-not-found/nf-registry-page-not-found.js
@@ -17,7 +17,7 @@
 import { Component } from '@angular/core';
 import NfRegistryService from 'services/nf-registry.service';
 import nfRegistryAnimations from 'nf-registry.animations';
-import { FdsDialogService } from '@flow-design-system/dialogs';
+import { FdsDialogService } from '@nifi-fds/core';
 import { Router } from '@angular/router';
 
 /**
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/nf-registry-bootstrap.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/nf-registry-bootstrap.js
index 2a0e771..a29ffba 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/nf-registry-bootstrap.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/nf-registry-bootstrap.js
@@ -19,13 +19,6 @@
 import 'zone.js';
 import 'hammerjs';
 
-// patch Observable with appropriate methods
-import 'rxjs/add/operator/switchMap';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/catch';
-import 'rxjs/add/observable/of';
-import 'rxjs/add/observable/forkJoin';
-
 import $ from 'jquery';
 import NfRegistryModule from 'nf-registry.module';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
@@ -40,7 +33,6 @@
 import '@covalent/core/common/styles/font/MaterialIcons-Regular.ttf';
 import 'images/registry-logo-web-app.svg';
 import 'images/registry-background-logo.svg';
-import 'locale/messages.es.xlf';
 
 // Comment out this line when developing to assert for unidirectional data flow
 enableProdMode();
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/nf-registry.html b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/nf-registry.html
index 9d1e849..9cb589c 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/nf-registry.html
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/nf-registry.html
@@ -17,7 +17,7 @@
 
 <mat-progress-spinner id="loading-spinner" *ngIf="nfRegistryService.inProgress" mode="indeterminate"></mat-progress-spinner>
 <mat-sidenav-container>
-    <mat-sidenav #sidenav mode="over" align="end" opened="false" disableClose="true">
+    <mat-sidenav #sidenav mode="over" position="end" opened="false" disableClose="true">
         <router-outlet name="sidenav"></router-outlet>
     </mat-sidenav>
     <div id="nf-registry-app-container">
@@ -83,9 +83,9 @@
                     routerLink="/nifi-registry/administration/workflow">
                 <i class="fa fa-wrench" aria-hidden="true"></i>
             </button>
-            <button matTooltip="Close settings" mat-ripple *ngIf="nfRegistryService.perspective === 'administration'" mat-mini-fab
+            <button color="primary" matTooltip="Close settings" mat-ripple *ngIf="nfRegistryService.perspective === 'administration'" mat-mini-fab
                     routerLink="/nifi-registry/explorer/{{(nfRegistryService.explorerViewType) ? nfRegistryService.explorerViewType : 'grid-list'}}">
-                <mat-icon color="primary">close</mat-icon>
+                <mat-icon>close</mat-icon>
             </button>
         </mat-toolbar>
         <div id="nf-registry-perspectives-container">
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/nf-registry.module.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/nf-registry.module.js
index b324e37..59c7262 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/nf-registry.module.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/nf-registry.module.js
@@ -20,7 +20,7 @@
 import { NgModule } from '@angular/core';
 
 import NfRegistryRoutes from 'nf-registry.routes';
-import fdsCore from '@flow-design-system/core';
+import { FdsCoreModule } from '@nifi-fds/core';
 import NfRegistry from 'nf-registry';
 import NfRegistryApi from 'services/nf-registry.api';
 import NfRegistryService from 'services/nf-registry.service';
@@ -64,7 +64,7 @@
     new NgModule({
         imports: [
             MomentModule,
-            fdsCore,
+            FdsCoreModule,
             HttpClientModule,
             NfRegistryRoutes
         ],
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/nf-registry.testbed-factory.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/nf-registry.testbed-factory.js
index 2265001..d71a858 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/nf-registry.testbed-factory.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/nf-registry.testbed-factory.js
@@ -20,14 +20,13 @@
     BrowserDynamicTestingModule,
     platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';
-import { Observable } from 'rxjs';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { MomentModule } from 'angular2-moment';
 
 import NfRegistryRoutes from 'nf-registry.routes';
 import { APP_BASE_HREF } from '@angular/common';
-import fdsCore from '@flow-design-system/core';
+import { FdsCoreModule } from '@nifi-fds/core';
 import NfRegistry from 'nf-registry';
 import NfRegistryApi from 'services/nf-registry.api';
 import NfRegistryService from 'services/nf-registry.service';
@@ -48,30 +47,6 @@
 import NfLoginComponent from 'components/login/nf-registry-login';
 import NfUserLoginComponent from 'components/login/dialogs/nf-registry-user-login';
 
-// rxjs Observable debugger;
-var debuggerOn = false;
-
-/* eslint-disable no-console */
-Observable.prototype.debug = function (message) {
-    return this.do(
-        function (next) {
-            if (debuggerOn) {
-                console.log(message, next);
-            }
-        },
-        function (err) {
-            if (debuggerOn) {
-                console.error('ERROR >>> ', message, err);
-            }
-        },
-        function () {
-            if (debuggerOn) {
-                console.log('Completed.');
-            }
-        }
-    );
-};
-
 const initTestBed = ({ providers } = { providers: [] }) => {
     TestBed.resetTestEnvironment();
 
@@ -85,7 +60,7 @@
             MomentModule,
             HttpClientModule,
             HttpClientTestingModule,
-            fdsCore,
+            FdsCoreModule,
             NfRegistryRoutes
         ],
         declarations: [
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/services/nf-registry.api.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/services/nf-registry.api.js
index 2d2da8e..0c088ea 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/services/nf-registry.api.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/services/nf-registry.api.js
@@ -17,8 +17,9 @@
 
 import NfStorage from 'services/nf-storage.service';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { FdsDialogService } from '@flow-design-system/dialogs';
-import { Observable } from 'rxjs';
+import { FdsDialogService } from '@nifi-fds/core';
+import { of } from 'rxjs';
+import { map, catchError } from 'rxjs/operators';
 
 var MILLIS_PER_SECOND = 1000;
 var headers = new Headers({'Content-Type': 'application/json'});
@@ -57,19 +58,20 @@
         var self = this;
         var url = '/nifi-registry-api/' + dropletUri;
         url += '/versions';
-        return this.http.get(url)
-            .map(function (response) {
+        return this.http.get(url).pipe(
+            map(function (response) {
                 return response;
-            })
-            .catch(function (error) {
+            }),
+            catchError(function (error) {
                 self.dialogService.openConfirm({
                     title: 'Error',
                     message: error.error,
                     acceptButton: 'Ok',
                     acceptButtonColor: 'fds-warn'
                 });
-                return Observable.of(error);
-            });
+                return of(error);
+            })
+        );
     },
 
     /**
@@ -83,19 +85,20 @@
     getDroplet: function (bucketId, dropletType, dropletId) {
         var self = this;
         var url = '/nifi-registry-api/buckets/' + bucketId + '/' + dropletType + '/' + dropletId;
-        return this.http.get(url)
-            .map(function (response) {
-                return response || {};
-            })
-            .catch(function (error) {
+        return this.http.get(url).pipe(
+            map(function (response) {
+                return response;
+            }),
+            catchError(function (error) {
                 self.dialogService.openConfirm({
                     title: 'Flow Not Found',
                     message: error.error,
                     acceptButton: 'Ok',
                     acceptButtonColor: 'fds-warn'
                 });
-                return Observable.of(error);
-            });
+                return of(error);
+            })
+        );
     },
 
     /**
@@ -112,13 +115,14 @@
         if (bucketId) {
             url += '/' + bucketId;
         }
-        return this.http.get(url)
-            .map(function (response) {
-                return response || [];
+        return this.http.get(url).pipe(
+            map(function (response) {
+                return response;
+            }),
+            catchError(function (error) {
+                return of(error);
             })
-            .catch(function (error) {
-                return Observable.of(error);
-            });
+        );
     },
 
     /**
@@ -134,19 +138,20 @@
      */
     deleteDroplet: function (dropletUri) {
         var self = this;
-        return this.http.delete('/nifi-registry-api/' + dropletUri, headers)
-            .map(function (response) {
+        return this.http.delete('/nifi-registry-api/' + dropletUri, headers).pipe(
+            map(function (response) {
                 return response;
-            })
-            .catch(function (error) {
+            }),
+            catchError(function (error) {
                 self.dialogService.openConfirm({
                     title: 'Error',
                     message: error.error,
                     acceptButton: 'Ok',
                     acceptButtonColor: 'fds-warn'
                 });
-                return Observable.of(error);
-            });
+                return of(error);
+            })
+        );
     },
 
     /**
@@ -157,19 +162,20 @@
      */
     createBucket: function (name, allowPublicRead) {
         var self = this;
-        return this.http.post('/nifi-registry-api/buckets', {'name': name, 'allowPublicRead': allowPublicRead}, headers)
-            .map(function (response) {
+        return this.http.post('/nifi-registry-api/buckets', {'name': name, 'allowPublicRead': allowPublicRead}, headers).pipe(
+            map(function (response) {
                 return response;
-            })
-            .catch(function (error) {
+            }),
+            catchError(function (error) {
                 self.dialogService.openConfirm({
                     title: 'Error',
                     message: error.error,
                     acceptButton: 'Ok',
                     acceptButtonColor: 'fds-warn'
                 });
-                return Observable.of(error);
-            });
+                return of(error);
+            })
+        );
     },
 
     /**
@@ -180,19 +186,20 @@
      */
     deleteBucket: function (bucketId) {
         var self = this;
-        return this.http.delete('/nifi-registry-api/buckets/' + bucketId, headers)
-            .map(function (response) {
+        return this.http.delete('/nifi-registry-api/buckets/' + bucketId, headers).pipe(
+            map(function (response) {
                 return response;
-            })
-            .catch(function (error) {
+            }),
+            catchError(function (error) {
                 self.dialogService.openConfirm({
                     title: 'Error',
                     message: error.error,
                     acceptButton: 'Ok',
                     acceptButtonColor: 'fds-warn'
                 });
-                return Observable.of(error);
-            });
+                return of(error);
+            })
+        );
     },
 
     /**
@@ -204,19 +211,20 @@
     getBucket: function (bucketId) {
         var self = this;
         var url = '/nifi-registry-api/buckets/' + bucketId;
-        return this.http.get(url)
-            .map(function (response) {
+        return this.http.get(url).pipe(
+            map(function (response) {
                 return response;
-            })
-            .catch(function (error) {
+            }),
+            catchError(function (error) {
                 self.dialogService.openConfirm({
                     title: 'Bucket Not Found',
                     message: error.error,
                     acceptButton: 'Ok',
                     acceptButtonColor: 'fds-warn'
                 });
-                return Observable.of(error);
-            });
+                return of(error);
+            })
+        );
     },
 
     /**
@@ -230,19 +238,20 @@
     getBuckets: function () {
         var self = this;
         var url = '/nifi-registry-api/buckets';
-        return this.http.get(url)
-            .map(function (response) {
+        return this.http.get(url).pipe(
+            map(function (response) {
                 return response;
-            })
-            .catch(function (error) {
+            }),
+            catchError(function (error) {
                 self.dialogService.openConfirm({
                     title: 'Buckets Not Found',
                     message: error.error,
                     acceptButton: 'Ok',
                     acceptButtonColor: 'fds-warn'
                 });
-                return Observable.of(error);
-            });
+                return of(error);
+            })
+        );
     },
 
     /**
@@ -252,13 +261,14 @@
      * @returns {*}
      */
     updateBucket: function (updatedBucket) {
-        return this.http.put('/nifi-registry-api/buckets/' + updatedBucket.identifier, updatedBucket, headers)
-            .map(function (response) {
+        return this.http.put('/nifi-registry-api/buckets/' + updatedBucket.identifier, updatedBucket, headers).pipe(
+            map(function (response) {
                 return response;
+            }),
+            catchError(function (error) {
+                return of(error);
             })
-            .catch(function (error) {
-                return Observable.of(error);
-            });
+        );
     },
 
     /**
@@ -269,19 +279,20 @@
      */
     getUser: function (userId) {
         var self = this;
-        return this.http.get('/nifi-registry-api/tenants/users/' + userId)
-            .map(function (response) {
+        return this.http.get('/nifi-registry-api/tenants/users/' + userId).pipe(
+            map(function (response) {
                 return response;
-            })
-            .catch(function (error) {
+            }),
+            catchError(function (error) {
                 self.dialogService.openConfirm({
                     title: 'User Not Found',
                     message: error.error,
                     acceptButton: 'Ok',
                     acceptButtonColor: 'fds-warn'
                 });
-                return Observable.of(error);
-            });
+                return of(error);
+            })
+        );
     },
 
     /**
@@ -321,19 +332,20 @@
                     canDelete: false
                 }
             }
-        }, headers)
-            .map(function (response) {
+        }, headers).pipe(
+            map(function (response) {
                 return response;
-            })
-            .catch(function (error) {
+            }),
+            catchError(function (error) {
                 self.dialogService.openConfirm({
                     title: 'Error',
                     message: error.error,
                     acceptButton: 'Ok',
                     acceptButtonColor: 'fds-warn'
                 });
-                return Observable.of(error);
-            });
+                return of(error);
+            })
+        );
     },
 
     /**
@@ -347,13 +359,14 @@
         return this.http.put('/nifi-registry-api/tenants/users/' + identifier, {
             'identifier': identifier,
             'identity': identity
-        }, headers)
-            .map(function (response) {
+        }, headers).pipe(
+            map(function (response) {
                 return response;
+            }),
+            catchError(function (error) {
+                return of(error);
             })
-            .catch(function (error) {
-                return Observable.of(error);
-            });
+        );
     },
 
     /**
@@ -363,19 +376,20 @@
      */
     getUsers: function () {
         var self = this;
-        return this.http.get('/nifi-registry-api/tenants/users')
-            .map(function (response) {
+        return this.http.get('/nifi-registry-api/tenants/users').pipe(
+            map(function (response) {
                 return response;
-            })
-            .catch(function (error) {
+            }),
+            catchError(function (error) {
                 self.dialogService.openConfirm({
                     title: 'Users Not Found',
                     message: error.error,
                     acceptButton: 'Ok',
                     acceptButtonColor: 'fds-warn'
                 });
-                return Observable.of(error);
-            });
+                return of(error);
+            })
+        );
     },
 
     /**
@@ -386,19 +400,20 @@
      */
     deleteUser: function (userId) {
         var self = this;
-        return this.http.delete('/nifi-registry-api/tenants/users/' + userId, headers)
-            .map(function (response) {
+        return this.http.delete('/nifi-registry-api/tenants/users/' + userId, headers).pipe(
+            map(function (response) {
                 return response;
-            })
-            .catch(function (error) {
+            }),
+            catchError(function (error) {
                 self.dialogService.openConfirm({
                     title: 'Error',
                     message: error.error,
                     acceptButton: 'Ok',
                     acceptButtonColor: 'fds-warn'
                 });
-                return Observable.of(error);
-            });
+                return of(error);
+            })
+        );
     },
 
     /**
@@ -408,19 +423,20 @@
      */
     getUserGroups: function () {
         var self = this;
-        return this.http.get('/nifi-registry-api/tenants/user-groups')
-            .map(function (response) {
+        return this.http.get('/nifi-registry-api/tenants/user-groups').pipe(
+            map(function (response) {
                 return response;
-            })
-            .catch(function (error) {
+            }),
+            catchError(function (error) {
                 self.dialogService.openConfirm({
                     title: 'Groups Not Found',
                     message: error.error,
                     acceptButton: 'Ok',
                     acceptButtonColor: 'fds-warn'
                 });
-                return Observable.of(error);
-            });
+                return of(error);
+            })
+        );
     },
 
     /**
@@ -431,19 +447,20 @@
      */
     getUserGroup: function (groupId) {
         var self = this;
-        return this.http.get('/nifi-registry-api/tenants/user-groups/' + groupId)
-            .map(function (response) {
+        return this.http.get('/nifi-registry-api/tenants/user-groups/' + groupId).pipe(
+            map(function (response) {
                 return response;
-            })
-            .catch(function (error) {
+            }),
+            catchError(function (error) {
                 self.dialogService.openConfirm({
                     title: 'Group Not Found',
                     message: error.error,
                     acceptButton: 'Ok',
                     acceptButtonColor: 'fds-warn'
                 });
-                return Observable.of(error);
-            });
+                return of(error);
+            })
+        );
     },
 
     /**
@@ -454,19 +471,20 @@
      */
     deleteUserGroup: function (userGroupId) {
         var self = this;
-        return this.http.delete('/nifi-registry-api/tenants/user-groups/' + userGroupId, headers)
-            .map(function (response) {
+        return this.http.delete('/nifi-registry-api/tenants/user-groups/' + userGroupId, headers).pipe(
+            map(function (response) {
                 return response;
-            })
-            .catch(function (error) {
+            }),
+            catchError(function (error) {
                 self.dialogService.openConfirm({
                     title: 'Error',
                     message: error.error,
                     acceptButton: 'Ok',
                     acceptButtonColor: 'fds-warn'
                 });
-                return Observable.of(error);
-            });
+                return of(error);
+            })
+        );
     },
 
     /**
@@ -483,19 +501,20 @@
             'identifier': identifier,
             'identity': identity,
             'users': users
-        }, headers)
-            .map(function (response) {
+        }, headers).pipe(
+            map(function (response) {
                 return response;
-            })
-            .catch(function (error) {
+            }),
+            catchError(function (error) {
                 self.dialogService.openConfirm({
                     title: 'Error',
                     message: error.error,
                     acceptButton: 'Ok',
                     acceptButtonColor: 'fds-warn'
                 });
-                return Observable.of(error);
-            });
+                return of(error);
+            })
+        );
     },
 
     /**
@@ -511,13 +530,14 @@
             'identifier': identifier,
             'identity': identity,
             'users': users
-        }, headers)
-            .map(function (response) {
+        }, headers).pipe(
+            map(function (response) {
                 return response;
+            }),
+            catchError(function (error) {
+                return of(error);
             })
-            .catch(function (error) {
-                return Observable.of(error);
-            });
+        );
     },
 
     /**
@@ -527,13 +547,14 @@
      */
     getPolicies: function () {
         var url = '/nifi-registry-api/policies';
-        return this.http.get(url)
-            .map(function (response) {
+        return this.http.get(url).pipe(
+            map(function (response) {
                 return response;
+            }),
+            catchError(function (error) {
+                return of(error);
             })
-            .catch(function (error) {
-                return Observable.of(error);
-            });
+        );
     },
 
     /**
@@ -545,13 +566,14 @@
      * @returns {*}
      */
     getResourcePoliciesById: function (action, resource, resourceId) {
-        return this.http.get('/nifi-registry-api/policies/' + action + resource + '/' + resourceId)
-            .map(function (response) {
+        return this.http.get('/nifi-registry-api/policies/' + action + resource + '/' + resourceId).pipe(
+            map(function (response) {
                 return response;
+            }),
+            catchError(function (error) {
+                return of(error);
             })
-            .catch(function (error) {
-                return Observable.of(error);
-            });
+        );
     },
 
     /**
@@ -562,13 +584,14 @@
      * @returns {*}
      */
     getPolicyActionResource: function (action, resource) {
-        return this.http.get('/nifi-registry-api/policies/' + action + resource)
-            .map(function (response) {
+        return this.http.get('/nifi-registry-api/policies/' + action + resource).pipe(
+            map(function (response) {
                 return response;
+            }),
+            catchError(function (error) {
+                return of(error);
             })
-            .catch(function (error) {
-                return Observable.of(error);
-            });
+        );
     },
 
     /**
@@ -589,19 +612,20 @@
             'action': action,
             'users': users,
             'userGroups': userGroups
-        }, headers)
-            .map(function (response) {
+        }, headers).pipe(
+            map(function (response) {
                 return response;
-            })
-            .catch(function (error) {
+            }),
+            catchError(function (error) {
                 self.dialogService.openConfirm({
                     title: 'Error',
                     message: error.error,
                     acceptButton: 'Ok',
                     acceptButtonColor: 'fds-warn'
                 });
-                return Observable.of(error);
-            });
+                return of(error);
+            })
+        );
     },
 
     /**
@@ -620,19 +644,20 @@
             'action': action,
             'users': users,
             'userGroups': userGroups
-        }, headers)
-            .map(function (response) {
+        }, headers).pipe(
+            map(function (response) {
                 return response;
-            })
-            .catch(function (error) {
+            }),
+            catchError(function (error) {
                 self.dialogService.openConfirm({
                     title: 'Error',
                     message: error.error,
                     acceptButton: 'Ok',
                     acceptButtonColor: 'fds-warn'
                 });
-                return Observable.of(error);
-            });
+                return of(error);
+            })
+        );
     },
 
     /**
@@ -655,8 +680,8 @@
             withCredentials: true,
             responseType: 'text'
         };
-        return this.http.post('/nifi-registry-api/access/token/login', null, options)
-            .map(function (jwt) {
+        return this.http.post('/nifi-registry-api/access/token/login', null, options).pipe(
+            map(function (jwt) {
                 // get the payload and store the token with the appropriate expiration
                 var token = self.nfStorage.getJwtPayload(jwt);
                 if (token) {
@@ -664,16 +689,17 @@
                     self.nfStorage.setItem('jwt', jwt, expiration);
                 }
                 return jwt;
-            })
-            .catch(function (error) {
+            }),
+            catchError(function (error) {
                 self.dialogService.openConfirm({
                     title: 'Error',
                     message: 'Please contact your System Administrator.',
                     acceptButton: 'Ok',
                     acceptButtonColor: 'fds-warn'
                 });
-                return Observable.of('');
-            });
+                return of('');
+            })
+        );
     },
 
     /**
@@ -684,10 +710,10 @@
     ticketExchange: function () {
         var self = this;
         if (this.nfStorage.hasItem('jwt')) {
-            return Observable.of(self.nfStorage.getItem('jwt'));
+            return of(self.nfStorage.getItem('jwt'));
         }
-        return this.http.post(config.urls.kerberos, null, {responseType: 'text'})
-            .map(function (jwt) {
+        return this.http.post(config.urls.kerberos, null, {responseType: 'text'}).pipe(
+            map(function (jwt) {
                 // get the payload and store the token with the appropriate expiration
                 var token = self.nfStorage.getJwtPayload(jwt);
                 if (token) {
@@ -695,10 +721,11 @@
                     self.nfStorage.setItem('jwt', jwt, expiration);
                 }
                 return jwt;
+            }),
+            catchError(function (error) {
+                return of('');
             })
-            .catch(function (error) {
-                return Observable.of('');
-            });
+        );
     },
 
     /**
@@ -708,12 +735,12 @@
      */
     loadCurrentUser: function () {
         // get the current user
-        return this.http.get(config.urls.currentUser)
-            .map(function (response) {
+        return this.http.get(config.urls.currentUser).pipe(
+            map(function (response) {
                 return response;
-            })
-            .catch(function (error) {
-                return Observable.of({
+            }),
+            catchError(function (error) {
+                return of({
                     error: error,
                     resourcePermissions: {
                         anyTopLevelResource: {
@@ -743,7 +770,8 @@
                         }
                     }
                 });
-            });
+            })
+        );
     },
 
     /**
@@ -752,14 +780,15 @@
      * @returns {*}
      */
     getRegistryConfig: function (action, resource) {
-        return this.http.get('/nifi-registry-api/config')
-            .map(function (response) {
+        return this.http.get('/nifi-registry-api/config').pipe(
+            map(function (response) {
                 return response;
-            })
-            .catch(function (error) {
+            }),
+            catchError(function (error) {
                 // If failed, return an empty object.
-                return Observable.of({});
-            });
+                return of({});
+            })
+        );
     }
 
 };
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/services/nf-registry.api.spec.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/services/nf-registry.api.spec.js
index adf88ff..9e6373b 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/services/nf-registry.api.spec.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/services/nf-registry.api.spec.js
@@ -25,7 +25,7 @@
     NfRegistryResourcesAuthGuard,
     NfRegistryWorkflowsAdministrationAuthGuard
 } from 'services/nf-registry.auth-guard.service';
-import { Observable } from 'rxjs';
+import { of } from 'rxjs';
 
 describe('NfRegistry API w/ Angular testing utils', function () {
     let nfRegistryApi;
@@ -207,7 +207,7 @@
         spyOn(nfRegistryApi.dialogService, 'openConfirm').and.callFake(function () {
             return {
                 afterClosed: function () {
-                    return Observable.of(true);
+                    return of(true);
                 }
             };
         });
@@ -501,7 +501,7 @@
         spyOn(nfRegistryApi.dialogService, 'openConfirm').and.callFake(function () {
             return {
                 afterClosed: function () {
-                    return Observable.of(true);
+                    return of(true);
                 }
             };
         });
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/services/nf-registry.auth-guard.service.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/services/nf-registry.auth-guard.service.js
index f003e80..8ac6d38 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/services/nf-registry.auth-guard.service.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/services/nf-registry.auth-guard.service.js
@@ -18,7 +18,7 @@
 import NfRegistryService from 'services/nf-registry.service';
 import NfStorage from 'services/nf-storage.service';
 import { Router } from '@angular/router';
-import { FdsDialogService } from '@flow-design-system/dialogs';
+import { FdsDialogService } from '@nifi-fds/core';
 import NfRegistryApi from 'services/nf-registry.api';
 
 /**
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/services/nf-registry.auth-guard.service.spec.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/services/nf-registry.auth-guard.service.spec.js
index e57af6f..e826fac 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/services/nf-registry.auth-guard.service.spec.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/services/nf-registry.auth-guard.service.spec.js
@@ -23,7 +23,7 @@
 } from 'services/nf-registry.auth-guard.service';
 import NfRegistryService from 'services/nf-registry.service';
 import NfStorage from 'services/nf-storage.service';
-import { Observable } from 'rxjs';
+import { of } from 'rxjs';
 
 describe('NfRegistry Auth Guard Service NfRegistryResourcesAuthGuard isolated unit tests', function () {
     var nfRegistryService;
@@ -54,13 +54,13 @@
         // Spy
         spyOn(router, 'navigateByUrl');
         spyOn(nfRegistryApi, 'ticketExchange').and.callFake(function () {
-        }).and.returnValue(Observable.of({}));
+        }).and.returnValue(of({}));
         spyOn(dialogService, 'openConfirm');
     });
 
     it('should navigate to test url (registry security not configured) ', function () {
         spyOn(nfRegistryApi, 'loadCurrentUser').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             anonymous: true
         }));
         spyOn(nfStorage, 'getItem').and.callFake(function () {
@@ -81,7 +81,7 @@
 
     it('should navigate to test url (registry security configured and we know who you are) ', function () {
         spyOn(nfRegistryApi, 'loadCurrentUser').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             anonymous: false
         }));
         spyOn(nfStorage, 'hasItem').and.callFake(function () {
@@ -101,7 +101,7 @@
 
     it('should navigate to login', function () {
         spyOn(nfRegistryApi, 'loadCurrentUser').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             anonymous: false
         }));
 
@@ -117,7 +117,7 @@
 
     it('should navigate to login (error loading current user)', function () {
         spyOn(nfRegistryApi, 'loadCurrentUser').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             error: {
                 status: 401
             }
@@ -165,13 +165,13 @@
         // Spy
         spyOn(router, 'navigateByUrl');
         spyOn(nfRegistryApi, 'ticketExchange').and.callFake(function () {
-        }).and.returnValue(Observable.of({}));
+        }).and.returnValue(of({}));
         spyOn(dialogService, 'openConfirm');
     });
 
     it('should navigate to base nifi-registry url', function () {
         spyOn(nfRegistryApi, 'loadCurrentUser').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             anonymous: true
         }));
         nfRegistryLoginAuthGuard = new NfRegistryLoginAuthGuard(nfRegistryService, nfRegistryApi, nfStorage, router);
@@ -187,7 +187,7 @@
 
     it('should navigate to test url', function () {
         spyOn(nfRegistryApi, 'loadCurrentUser').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             anonymous: false
         }));
         nfRegistryLoginAuthGuard = new NfRegistryLoginAuthGuard(nfRegistryService, nfRegistryApi, nfStorage, router);
@@ -231,13 +231,13 @@
         // Spy
         spyOn(router, 'navigateByUrl');
         spyOn(nfRegistryApi, 'ticketExchange').and.callFake(function () {
-        }).and.returnValue(Observable.of({}));
+        }).and.returnValue(of({}));
         spyOn(dialogService, 'openConfirm');
     });
 
     it('should navigate to login', function () {
         spyOn(nfRegistryApi, 'loadCurrentUser').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             error: {
                 status: 401
             }
@@ -255,7 +255,7 @@
 
     it('should deny access (registry security not configured) and navigate to administration workflow perspective', function () {
         spyOn(nfRegistryApi, 'loadCurrentUser').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             anonymous: true
         }));
         nfRegistryUsersAdministrationAuthGuard = new NfRegistryUsersAdministrationAuthGuard(nfRegistryService, nfRegistryApi, nfStorage, router, dialogService);
@@ -276,7 +276,7 @@
 
     it('should deny access (non-admin) and navigate to explorer perspective', function () {
         spyOn(nfRegistryApi, 'loadCurrentUser').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             anonymous: false,
             resourcePermissions: {
                 anyTopLevelResource: {
@@ -324,7 +324,7 @@
 
     it('should deny access (no tenants permissions) and navigate to explorer perspective', function () {
         spyOn(nfRegistryApi, 'loadCurrentUser').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             anonymous: false,
             resourcePermissions: {
                 anyTopLevelResource: {
@@ -372,7 +372,7 @@
 
     it('should deny access (no tenants permissions) and navigate to test url', function () {
         spyOn(nfRegistryApi, 'loadCurrentUser').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             anonymous: false,
             resourcePermissions: {
                 anyTopLevelResource: {
@@ -443,13 +443,13 @@
         // Spy
         spyOn(router, 'navigateByUrl');
         spyOn(nfRegistryApi, 'ticketExchange').and.callFake(function () {
-        }).and.returnValue(Observable.of({}));
+        }).and.returnValue(of({}));
         spyOn(dialogService, 'openConfirm');
     });
 
     it('should navigate to login', function () {
         spyOn(nfRegistryApi, 'loadCurrentUser').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             error: {
                 status: 401
             }
@@ -467,7 +467,7 @@
 
     it('should (registry security not configured) navigate to test url', function () {
         spyOn(nfRegistryApi, 'loadCurrentUser').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             anonymous: true
         }));
         nfRegistryWorkflowsAdministrationAuthGuard = new NfRegistryWorkflowsAdministrationAuthGuard(nfRegistryService, nfRegistryApi, nfStorage, router, dialogService);
@@ -483,7 +483,7 @@
 
     it('should deny access (non-admin) and navigate to explorer perspective', function () {
         spyOn(nfRegistryApi, 'loadCurrentUser').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             anonymous: false,
             resourcePermissions: {
                 anyTopLevelResource: {
@@ -531,7 +531,7 @@
 
     it('should deny access (no buckets permissions) and navigate to users administration perspective', function () {
         spyOn(nfRegistryApi, 'loadCurrentUser').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             anonymous: false,
             resourcePermissions: {
                 anyTopLevelResource: {
@@ -579,7 +579,7 @@
 
     it('should deny access (no tenants permissions) and navigate to test url', function () {
         spyOn(nfRegistryApi, 'loadCurrentUser').and.callFake(function () {
-        }).and.returnValue(Observable.of({
+        }).and.returnValue(of({
             anonymous: false,
             resourcePermissions: {
                 anyTopLevelResource: {
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/services/nf-registry.service.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/services/nf-registry.service.js
index 33c41cc..2c36402 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/services/nf-registry.service.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/services/nf-registry.service.js
@@ -15,10 +15,9 @@
  * limitations under the License.
  */
 
-import { TdDataTableService } from '@covalent/core';
+import { TdDataTableService } from '@covalent/core/data-table';
 import { Router } from '@angular/router';
-import { FdsDialogService } from '@flow-design-system/dialogs';
-import { FdsSnackBarService } from '@flow-design-system/snackbars';
+import { FdsDialogService, FdsSnackBarService } from '@nifi-fds/core';
 import NfRegistryApi from 'services/nf-registry.api.js';
 import NfStorage from 'services/nf-storage.service.js';
 
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/services/nf-registry.service.spec.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/services/nf-registry.service.spec.js
index 41e3b22..da2ffd7 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/services/nf-registry.service.spec.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/services/nf-registry.service.spec.js
@@ -17,11 +17,12 @@
 
 import { TestBed } from '@angular/core/testing';
 import initTestBed from 'nf-registry.testbed-factory';
-import { Observable } from 'rxjs';
+import { of } from 'rxjs';
 import NfRegistryApi from 'services/nf-registry.api';
 import NfRegistryService from 'services/nf-registry.service';
 import { Router } from '@angular/router';
-import fdsDialogsModule from '@flow-design-system/dialogs';
+import { FdsDialogService } from '@nifi-fds/core';
+
 
 describe('NfRegistry Service isolated unit tests', function () {
     let nfRegistryService;
@@ -669,9 +670,9 @@
                 spyOn(nfRegistryApi.http, 'post').and.callFake(function () {
                 });
                 spyOn(nfRegistryApi, 'ticketExchange').and.callFake(function () {
-                }).and.returnValue(Observable.of({}));
+                }).and.returnValue(of({}));
                 spyOn(nfRegistryApi, 'loadCurrentUser').and.callFake(function () {
-                }).and.returnValue(Observable.of({}));
+                }).and.returnValue(of({}));
 
                 done();
             });
@@ -680,7 +681,7 @@
     it('should retrieve the snapshot metadata for the given droplet.', function () {
         //Spy
         spyOn(nfRegistryApi, 'getDropletSnapshotMetadata').and.callFake(function () {
-        }).and.returnValue(Observable.of([{
+        }).and.returnValue(of([{
             version: 999
         }]));
 
@@ -706,11 +707,11 @@
         //Spy
         spyOn(nfRegistryService.dialogService, 'openConfirm').and.returnValue({
             afterClosed: function () {
-                return Observable.of(true);
+                return of(true);
             }
         });
         spyOn(nfRegistryApi, 'deleteDroplet').and.callFake(function () {
-        }).and.returnValue(Observable.of({identifier: '2e04b4fb-9513-47bb-aa74-1ae34616bfdc', link: null}));
+        }).and.returnValue(of({identifier: '2e04b4fb-9513-47bb-aa74-1ae34616bfdc', link: null}));
         spyOn(nfRegistryService, 'filterDroplets').and.callFake(function () {
         });
 
@@ -779,7 +780,7 @@
 
     it('should execute a `delete` action on a bucket.', function () {
         // from the root injector
-        const dialogService = TestBed.get(fdsDialogsModule.FdsDialogService);
+        const dialogService = TestBed.get(FdsDialogService);
 
         //Spy
         spyOn(nfRegistryService, 'filterBuckets').and.callFake(function () {
@@ -787,11 +788,11 @@
         spyOn(dialogService, 'openConfirm').and.callFake(function () {
         }).and.returnValue({
             afterClosed: function () {
-                return Observable.of(true);
+                return of(true);
             }
         });
         spyOn(nfRegistryApi, 'deleteBucket').and.callFake(function () {
-        }).and.returnValue(Observable.of({identifier: '2e04b4fb-9513-47bb-aa74-1ae34616bfdc', link: null}));
+        }).and.returnValue(of({identifier: '2e04b4fb-9513-47bb-aa74-1ae34616bfdc', link: null}));
 
         // object to be updated by the test
         const bucket = {identifier: '999'};
@@ -831,7 +832,7 @@
 
     it('should execute a `delete` action on a user.', function () {
         // from the root injector
-        const dialogService = TestBed.get(fdsDialogsModule.FdsDialogService);
+        const dialogService = TestBed.get(FdsDialogService);
 
         //Spy
         spyOn(nfRegistryService, 'filterUsersAndGroups').and.callFake(function () {
@@ -839,11 +840,11 @@
         spyOn(dialogService, 'openConfirm').and.callFake(function () {
         }).and.returnValue({
             afterClosed: function () {
-                return Observable.of(true);
+                return of(true);
             }
         });
         spyOn(nfRegistryApi, 'deleteUser').and.callFake(function () {
-        }).and.returnValue(Observable.of({identifier: '2e04b4fb-9513-47bb-aa74-1ae34616bfdc', link: null}));
+        }).and.returnValue(of({identifier: '2e04b4fb-9513-47bb-aa74-1ae34616bfdc', link: null}));
 
         // object to be updated by the test
         const user = {identifier: '999'};
@@ -883,7 +884,7 @@
 
     it('should execute a `delete` action on a group.', function () {
         // from the root injector
-        const dialogService = TestBed.get(fdsDialogsModule.FdsDialogService);
+        const dialogService = TestBed.get(FdsDialogService);
 
         //Spy
         spyOn(nfRegistryService, 'filterUsersAndGroups').and.callFake(function () {
@@ -891,11 +892,11 @@
         spyOn(dialogService, 'openConfirm').and.callFake(function () {
         }).and.returnValue({
             afterClosed: function () {
-                return Observable.of(true);
+                return of(true);
             }
         });
         spyOn(nfRegistryApi, 'deleteUserGroup').and.callFake(function () {
-        }).and.returnValue(Observable.of({identifier: '2e04b4fb-9513-47bb-aa74-1ae34616bfdc', link: null}));
+        }).and.returnValue(of({identifier: '2e04b4fb-9513-47bb-aa74-1ae34616bfdc', link: null}));
 
         // object to be updated by the test
         const group = {identifier: '999'};
@@ -1005,7 +1006,7 @@
 
     it('should delete all selected buckets.', function () {
         // from the root injector
-        const dialogService = TestBed.get(fdsDialogsModule.FdsDialogService);
+        const dialogService = TestBed.get(FdsDialogService);
 
         //Spy
         spyOn(nfRegistryService, 'filterBuckets').and.callFake(function () {
@@ -1015,11 +1016,11 @@
         spyOn(dialogService, 'openConfirm').and.callFake(function () {
         }).and.returnValue({
             afterClosed: function () {
-                return Observable.of(true);
+                return of(true);
             }
         });
         spyOn(nfRegistryApi, 'deleteBucket').and.callFake(function () {
-        }).and.returnValue(Observable.of({identifier: 999, link: null}));
+        }).and.returnValue(of({identifier: 999, link: null}));
 
         // object to be updated by the test
         const bucket = {identifier: 999, checked: true};
@@ -1045,7 +1046,7 @@
 
     it('should delete all selected users and groups.', function () {
         // from the root injector
-        const dialogService = TestBed.get(fdsDialogsModule.FdsDialogService);
+        const dialogService = TestBed.get(FdsDialogService);
 
         //Spy
         spyOn(nfRegistryService, 'filterUsersAndGroups').and.callFake(function () {
@@ -1055,13 +1056,13 @@
         spyOn(dialogService, 'openConfirm').and.callFake(function () {
         }).and.returnValue({
             afterClosed: function () {
-                return Observable.of(true);
+                return of(true);
             }
         });
         spyOn(nfRegistryApi, 'deleteUserGroup').and.callFake(function () {
-        }).and.returnValue(Observable.of({identifier: 999, link: null}));
+        }).and.returnValue(of({identifier: 999, link: null}));
         spyOn(nfRegistryApi, 'deleteUser').and.callFake(function () {
-        }).and.returnValue(Observable.of({identifier: 99, link: null}));
+        }).and.returnValue(of({identifier: 99, link: null}));
 
         // object to be updated by the test
         const group = {identifier: 999, checked: true};
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/template.dev.html b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/template.dev.html
index e3e30d9..33e76d1 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/template.dev.html
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/template.dev.html
@@ -23,8 +23,6 @@
     <meta charset='UTF-8'>
     <meta name='viewport' content='width=device-width, initial-scale=1'>
     <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'/>
-
-    <link rel="stylesheet" href="node_modules/@nifi-fds/core/common/styles/css/flow-design-system.min.css" type="text/css" />
     <!-- Styles will be injected here by webpack -->
 </head>
 <body>
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/template.html b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/template.html
index a500190..33e76d1 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/template.html
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/template.html
@@ -23,8 +23,6 @@
     <meta charset='UTF-8'>
     <meta name='viewport' content='width=device-width, initial-scale=1'>
     <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'/>
-
-    <link rel="stylesheet" href="nifi-registry/node_modules/@nifi-fds/core/common/styles/css/flow-design-system.min.css" type="text/css" />
     <!-- Styles will be injected here by webpack -->
 </head>
 <body>
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/theming/_structureElements.scss b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/theming/_structureElements.scss
index 3a9cd82..a7638ff 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/theming/_structureElements.scss
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/theming/_structureElements.scss
@@ -81,10 +81,6 @@
   color: white;
 }
 
-body[fds] .td-chip span {
-    font-size: 10px;
-}
-
 #nifi-registry-toolbar span,
 #nifi-registry-toolbar .link {
   color: $grey5;
@@ -151,19 +147,105 @@
   text-transform: uppercase;
 }
 
-body[fds] mat-form-field.td-chips-form-field.mat-input-container {
-  width: unset;
+// TODO: remove after NIFI-6495 is available in NiFi FDS 0.3.0
+body[fds] .mat-menu-panel {
+    min-height: 40px;
 }
 
-body[fds] .md-title {
-  font-weight: normal;
-  color: $grey3;
+// TODO: remove after NIFI-6535 is available in NiFi FDS 0.3.0
+fds-dialog-title {
+    font-size: 20px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.87);
 }
 
-body[fds] .md-subhead {
-  font-weight: lighter;
+// TODO: remove after NIFI-6535 is available in NiFi FDS 0.3.0
+body[fds] {
+    .mat-card-title {
+        font-weight: 400;
+        font-size: 20px;
+    }
 }
 
-body[fds] div .td-data-table {
-  display: flex;
+// TODO: remove after NIFI-6540 is available in NiFi FDS 0.3.0
+body[fds] td-chips .mat-form-field-label-wrapper::after {
+    content: '\f0b0';
+    display: inline-table;
+    font-family: FontAwesome;
+    float: right;
+    margin: 9px 10px 0 0;
+    color: #999;
+}
+
+// TODO: remove after NIFI-6540 is available in NiFi FDS 0.3.0
+body[fds] input.mat-input-element:not([disabled]),
+body[fds] textarea.mat-input-element:not([disabled]) {
+    background-color: unset !important;
+}
+
+// TODO: remove after NIFI-6540 is available in NiFi FDS 0.3.0
+body[fds] td-chips .mat-form-field-appearance-legacy .mat-form-field-infix {
+    padding: 0;
+    border-top: 0;
+}
+
+// TODO: remove after NIFI-6540 is available in NiFi FDS 0.3.0
+body[fds] td-chips .mat-form-field {
+    top: 12px;
+}
+
+// TODO: remove after NIFI-6540 is available in NiFi FDS 0.3.0
+body[fds] .mat-basic-chip {
+    margin: 17px 8px 0 0 !important;
+}
+
+// TODO: remove after NIFI-6540 is available in NiFi FDS 0.3.0
+body[fds] .mat-form-field-empty.mat-form-field-label {
+    top: 21px !important;
+    color: $grey3;
+    font-weight: 300;
+}
+
+// TODO: remove after NIFI-6541 is available in NiFi FDS 0.3.0
+body[fds] .td-expansion-label {
+    font-size: 20px;
+}
+
+// TODO: remove after NIFI-6544 is available in NiFi FDS 0.3.0
+body[fds] .mat-checkbox-layout .mat-checkbox-label {
+    line-height: 24px !important;
+}
+
+// TODO: remove after NIFI-6544 is available in NiFi FDS 0.3.0
+body[fds] .mat-checkbox-inner-container {
+    margin-right: 8px !important;
+}
+
+// TODO: remove after NIFI-6548 is available in NiFi FDS 0.3.0
+body[fds] .mat-raised-button,
+body[fds] .mat-button {
+    min-width: 88px;
+}
+
+// TODO: remove after NIFI-6549 is available in NiFi FDS 0.3.0
+body[fds] .mat-form-field .mat-form-field-label {
+    color: $grey3;
+    font-weight: 300;
+}
+
+// TODO: remove after NIFI-6547 is available in NiFi FDS 0.3.0
+body[fds] .tab-toggle-group > .mat-button-toggle-checked.mat-button-toggle-appearance-standard {
+    color: rgba(0, 0, 0, 0.54);
+}
+
+// TODO: remove after NIFI-6547 is available in NiFi FDS 0.3.0
+body[fds] .tab-toggle-group > .mat-button-toggle-appearance-standard {
+    color: rgba(0, 0, 0, 0.38);
+    background: transparent;
+    border-left: 0;
+}
+
+// TODO: remove after NIFI-6547 is available in NiFi FDS 0.3.0
+body[fds] .tab-toggle-group > .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
+    line-height: 38px;
 }
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/theming/components/administration/users/_structureElements.scss b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/theming/components/administration/users/_structureElements.scss
index ab211a8..376eb03 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/theming/components/administration/users/_structureElements.scss
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/theming/components/administration/users/_structureElements.scss
@@ -28,7 +28,7 @@
     overflow-y: auto;
     position: absolute;
     bottom: 30px;
-    top: 142px;
+    top: 132px;
     left: 24px;
     right: 24px;
     overflow-x: hidden;
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/theming/components/administration/workflow/_structureElements.scss b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/theming/components/administration/workflow/_structureElements.scss
index ff4c27a..cc132af 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/theming/components/administration/workflow/_structureElements.scss
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/theming/components/administration/workflow/_structureElements.scss
@@ -28,7 +28,7 @@
     overflow-y: auto;
     position: absolute;
     bottom: 30px;
-    top: 142px;
+    top: 132px;
     left: 24px;
     right: 24px;
     overflow-x: hidden;
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/theming/nf-registry.scss b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/theming/nf-registry.scss
index cdde491..37d9ea4 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/theming/nf-registry.scss
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/theming/nf-registry.scss
@@ -22,9 +22,9 @@
 // Path overrides
 $fa-font-path: './assets/fonts';
 $mat-font-url: './assets/fonts/';
+$fdsFontPath: './node_modules/roboto-fontface/fonts';
 
-@import '~@nifi-fds/core/common/styles/globalVars';
-@import '~@nifi-fds/core/theming/all-theme';
+@import '~@nifi-fds/core/common/styles/flow-design-system';
 @import '~@covalent/core/common/platform.scss';
 @import '~font-awesome/scss/font-awesome';
 @import 'structureElements';
@@ -36,8 +36,8 @@
 
 $primaryColor: $rose1; //$green2
 $primaryColorHover: $rose2; //$green3
-$accentColor: $blue7; //$orange1
-$accentColorHover: $grey4; //$orange2
+$accentColor: $blue-grey1; //$orange1
+$accentColorHover: $blue4; //$orange2
 
 // Include the base styles for Angular Material core. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webpack.alias.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webpack.alias.js
index 5558828..44a6681 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webpack.alias.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webpack.alias.js
@@ -18,18 +18,6 @@
 const path = require('path');
 
 module.exports = {
-    // Flow Design System
-    '@flow-design-system/core': path.resolve(__dirname, 'node_modules/@nifi-fds/core/flow-design-system.module.js'),
-    '@flow-design-system/dialogs': path.resolve(__dirname, 'node_modules/@nifi-fds/core/dialogs/fds-dialogs.module.js'),
-    '@flow-design-system/dialog-component': path.resolve(__dirname, 'node_modules/@nifi-fds/core/dialogs/fds-dialog.component.js'),
-    '@flow-design-system/dialog-service': path.resolve(__dirname, 'node_modules/@nifi-fds/core/dialogs/services/dialog.service.js'),
-    '@flow-design-system/confirm-dialog-component': path.resolve(__dirname, 'node_modules/@nifi-fds/core/dialogs/confirm-dialog/confirm-dialog.component.js'),
-    '@flow-design-system/snackbars': path.resolve(__dirname, 'node_modules/@nifi-fds/core/snackbars/fds-snackbars.module.js'),
-    '@flow-design-system/snackbar-component': path.resolve(__dirname, 'node_modules/@nifi-fds/core/snackbars/fds-snackbar.component.js'),
-    '@flow-design-system/snackbar-service': path.resolve(__dirname, 'node_modules/@nifi-fds/core/snackbars/services/snackbar.service.js'),
-    '@flow-design-system/coaster-component': path.resolve(__dirname, 'node_modules/@nifi-fds/core/snackbars/coaster/coaster.component.js'),
-    '@flow-design-system/common/storage-service': path.resolve(__dirname, 'node_modules/@nifi-fds/core/common/services/fds-storage.service.js'),
-
     // Nifi Registry app folders
     'components': path.resolve(__dirname, 'webapp/components'),
     'services': path.resolve(__dirname, 'webapp/services'),
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webpack.common.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webpack.common.js
index 242f864..5f04bce 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webpack.common.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webpack.common.js
@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 
-const webpack = require('webpack');
 const path = require('path');
 const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 const webpackAlias = require('./webpack.alias');
 const loaders = require('./webpack.loader');
@@ -35,6 +33,7 @@
         // SCSS files
         'nf-registry.style.min': [
             path.resolve(__dirname, 'webapp/theming/nf-registry.scss'),
+            path.resolve(__dirname, 'node_modules/@nifi-fds/core/common/styles/flow-design-system.scss')
         ]
     },
 
@@ -62,7 +61,8 @@
     // Change how modules are resolved
     resolve: {
         extensions: ['.ts', '.tsx', '.js'],
-        alias: webpackAlias
+        alias: webpackAlias,
+        symlinks: false
     },
 
     // Polyfill or mock certain Node.js globals and modules
@@ -73,7 +73,6 @@
     module: {
         rules: [
             loaders.ts,
-            loaders.nifiFds,
             loaders.js,
             loaders.html,
             loaders.scss,
@@ -84,13 +83,6 @@
     },
 
     plugins: [
-        // Automatically load modules instead of having to import or require them everywhere
-        // TODO: https://github.com/apache/nifi-fds/pull/12
-        new webpack.ProvidePlugin({
-            '$': 'jquery',
-            jQuery: 'jquery'
-        }),
-
         // Fix style only entry generating an extra js file
         new FixStyleOnlyEntriesPlugin()
     ]
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webpack.karma.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webpack.karma.js
index 135141f..bd4c555 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webpack.karma.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webpack.karma.js
@@ -31,7 +31,6 @@
     module: {
         rules: [
             loaders.tsDev,
-            loaders.nifiFds,
             loaders.jsDev,
             loaders.html,
             loaders.ignoreScss,
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webpack.loader.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webpack.loader.js
index a432abb..1d9bc7a 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webpack.loader.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webpack.loader.js
@@ -14,6 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 const path = require('path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
@@ -63,33 +64,11 @@
         ]
     },
 
-    nifiFds: {
-        /*
-        * Send all js files from @nifi-fds through a custom loader that replaces its usage of inline systemjs text loading
-        * of html files like:
-        *     require('./confirm-dialog.component.html!text')
-        *
-        * with normal require calls that are subsequently loaded via webpack's html-loader like:
-        *     require('./confirm-dialog.component.html')
-        */
-        test: /\.js$/,
-        include: [
-            path.resolve(__dirname, 'node_modules/@nifi-fds/core')
-        ],
-        use: [
-            {
-                loader: 'cache-loader'
-            },
-            {
-                loader: path.resolve(__dirname, 'systemjs-text-to-html-loader')
-            }
-        ]
-    },
-
     js: {
         test: /\.js$/,
         include: [
-            path.resolve(__dirname, 'webapp')
+            path.resolve(__dirname, 'webapp'),
+            path.resolve(__dirname, 'node_modules/@nifi-fds/core')
         ],
         use: [
             {
@@ -110,7 +89,8 @@
     jsDev: {
         test: /\.js$/,
         include: [
-            path.resolve(__dirname, 'webapp')
+            path.resolve(__dirname, 'webapp'),
+            path.resolve(__dirname, 'node_modules/@nifi-fds/core')
         ],
         // prevent these files/patterns from being included in the coverage report
         exclude: [
@@ -137,6 +117,7 @@
             }
         ]
     },
+
     html: {
         test: /\.html$/,
         include: [