diff --git a/awx/ui/.npmrc b/awx/ui/.npmrc
index c42da845..f7410ede 100644
--- a/awx/ui/.npmrc
+++ b/awx/ui/.npmrc
@@ -1 +1,7 @@
 engine-strict = true
+@ctrliq:registry=https://npm.pkg.github.com
+# - generate a new GitHub token (classic) with the read:packages scope (https://github.com/settings/tokens/new)
+# - copy the token and set it as an environment variable in your shell
+# export NPM_TOKEN=ghp_your_token_here
+# (you can also add it to your ~/.bashrc, ~/.zshrc, etc. if you want it to be persistent)
+//npm.pkg.github.com/:_authToken=${NPM_TOKEN}
\ No newline at end of file
diff --git a/awx/ui/config/webpack.config.js b/awx/ui/config/webpack.config.js
index 2ec0c72e..b6a1afdf 100644
--- a/awx/ui/config/webpack.config.js
+++ b/awx/ui/config/webpack.config.js
@@ -222,12 +222,13 @@ module.exports = function (webpackEnv) {
       publicPath: paths.publicUrlOrPath,
       // Point sourcemap entries to original disk location (format as URL on Windows)
       devtoolModuleFilenameTemplate: isEnvProduction
-        ? info =>
+        ? (info) =>
             path
               .relative(paths.appSrc, info.absoluteResourcePath)
               .replace(/\\/g, '/')
         : isEnvDevelopment &&
-          (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
+          ((info) =>
+            path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
     },
     cache: {
       type: 'filesystem',
@@ -237,7 +238,7 @@ module.exports = function (webpackEnv) {
       buildDependencies: {
         defaultWebpack: ['webpack/lib/'],
         config: [__filename],
-        tsconfig: [paths.appTsConfig, paths.appJsConfig].filter(f =>
+        tsconfig: [paths.appTsConfig, paths.appJsConfig].filter((f) =>
           fs.existsSync(f)
         ),
       },
@@ -307,8 +308,8 @@ module.exports = function (webpackEnv) {
       // `web` extension prefixes have been added for better support
       // for React Native Web.
       extensions: paths.moduleFileExtensions
-        .map(ext => `.${ext}`)
-        .filter(ext => useTypeScript || !ext.includes('ts')),
+        .map((ext) => `.${ext}`)
+        .filter((ext) => useTypeScript || !ext.includes('ts')),
       alias: {
         // Support React Native Web
         // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
@@ -419,7 +420,7 @@ module.exports = function (webpackEnv) {
                     },
                   ],
                 ],
-                
+
                 plugins: [
                   isEnvDevelopment &&
                     shouldUseReactRefresh &&
@@ -453,7 +454,7 @@ module.exports = function (webpackEnv) {
                 cacheDirectory: true,
                 // See #6846 for context on why cacheCompression is disabled
                 cacheCompression: false,
-                
+
                 // Babel sourcemaps are needed for debugging into node_modules
                 // code.  Without the options below, debuggers like VSCode
                 // show incorrect code and set breakpoints on the wrong lines.
@@ -543,6 +544,10 @@ module.exports = function (webpackEnv) {
                 'sass-loader'
               ),
             },
+            {
+              test: /\.(woff|woff2|eot|ttf|otf)$/i,
+              type: 'asset/resource',
+            },
             // "file" loader makes sure those assets get served by WebpackDevServer.
             // When you `import` an asset, you get its (virtual) filename.
             // In production, they would get copied to the `build` folder.
@@ -566,7 +571,7 @@ module.exports = function (webpackEnv) {
       {
         message: /source-map-loader/,
         module: /node_modules\/rrule/,
-      }
+      },
     ],
     plugins: [
       // Generates an `index.html` file with the <script> injected.
@@ -649,7 +654,7 @@ module.exports = function (webpackEnv) {
             return manifest;
           }, seed);
           const entrypointFiles = entrypoints.main.filter(
-            fileName => !fileName.endsWith('.map')
+            (fileName) => !fileName.endsWith('.map')
           );
 
           return {
diff --git a/awx/ui/config/webpackDevServer.config.js b/awx/ui/config/webpackDevServer.config.js
index 1350af23..9a3780d0 100644
--- a/awx/ui/config/webpackDevServer.config.js
+++ b/awx/ui/config/webpackDevServer.config.js
@@ -1,6 +1,7 @@
 'use strict';
 
 const fs = require('fs');
+const path = require('path');
 const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
 const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
 const ignoredFiles = require('react-dev-utils/ignoredFiles');
@@ -43,32 +44,39 @@ module.exports = function (proxy, allowedHost) {
     },
     // Enable gzip compression of generated files.
     compress: true,
-    static: {
-      // By default WebpackDevServer serves physical files from current directory
-      // in addition to all the virtual build products that it serves from memory.
-      // This is confusing because those files won’t automatically be available in
-      // production build folder unless we copy them. However, copying the whole
-      // project directory is dangerous because we may expose sensitive files.
-      // Instead, we establish a convention that only files in `public` directory
-      // get served. Our build script will copy `public` into the `build` folder.
-      // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
-      // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
-      // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
-      // Note that we only recommend to use `public` folder as an escape hatch
-      // for files like `favicon.ico`, `manifest.json`, and libraries that are
-      // for some reason broken when imported through webpack. If you just want to
-      // use an image, put it in `src` and `import` it from JavaScript instead.
-      directory: paths.appPublic,
-      publicPath: [paths.publicUrlOrPath],
-      // By default files from `contentBase` will not trigger a page reload.
-      watch: {
-        // Reportedly, this avoids CPU overload on some systems.
-        // https://github.com/facebook/create-react-app/issues/293
-        // src/node_modules is not ignored to support absolute imports
-        // https://github.com/facebook/create-react-app/issues/1065
-        ignored: ignoredFiles(paths.appSrc),
+    static: [
+      {
+        // By default WebpackDevServer serves physical files from current directory
+        // in addition to all the virtual build products that it serves from memory.
+        // This is confusing because those files won't automatically be available in
+        // production build folder unless we copy them. However, copying the whole
+        // project directory is dangerous because we may expose sensitive files.
+        // Instead, we establish a convention that only files in `public` directory
+        // get served. Our build script will copy `public` into the `build` folder.
+        // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
+        // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
+        // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
+        // Note that we only recommend to use `public` folder as an escape hatch
+        // for files like `favicon.ico`, `manifest.json`, and libraries that are
+        // for some reason broken when imported through webpack. If you just want to
+        // use an image, put it in `src` and `import` it from JavaScript instead.
+        directory: paths.appPublic,
+        publicPath: [paths.publicUrlOrPath],
+        // By default files from `contentBase` will not trigger a page reload.
+        watch: {
+          // Reportedly, this avoids CPU overload on some systems.
+          // https://github.com/facebook/create-react-app/issues/293
+          // src/node_modules is not ignored to support absolute imports
+          // https://github.com/facebook/create-react-app/issues/1065
+          ignored: ignoredFiles(paths.appSrc),
+        },
       },
-    },
+      {
+        // Serve quantic-fonts assets at /assets path
+        directory: path.resolve(__dirname, '../node_modules/@ctrliq/quantic-fonts/dist/assets'),
+        publicPath: '/assets',
+      },
+    ],
     client: {
       webSocketURL: {
         // Enable custom sockjs pathname for websocket connection to hot reloading server.
@@ -92,14 +100,19 @@ module.exports = function (proxy, allowedHost) {
     },
     server: {
       type: 'https', // Specify the server type as 'https'
-      ...getHttpsConfig()
+      ...getHttpsConfig(),
     },
     host,
     historyApiFallback: {
       // Paths with dots should still use the history fallback.
       // See https://github.com/facebook/create-react-app/issues/387.
-      disableDotRule: true,
+      disableDotRule: false,
       index: paths.publicUrlOrPath,
+      rewrites: [
+        // Exclude static assets from fallback to allow webpack to serve them
+        { from: /\.(woff|woff2|ttf|eot|otf)$/, to: (context) => context.parsedUrl.pathname },
+        { from: /\.(css|js|json|ico|png|jpg|jpeg|gif|svg)$/, to: (context) => context.parsedUrl.pathname },
+      ],
     },
     // `proxy` is run between `before` and `after` `webpack-dev-server` hooks
     proxy,
@@ -114,6 +127,13 @@ module.exports = function (proxy, allowedHost) {
         require(paths.proxySetup)(devServer.app);
       }
 
+      devServer.app.use((req, res, next) => {
+        if (/\.(woff2)(\?|$)/i.test(req.url)) {
+          res.setHeader('Content-Type', 'font/woff2');
+        }
+        next();
+      });
+
       // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
       devServer.app.use(redirectServedPath(paths.publicUrlOrPath));
 
diff --git a/awx/ui/package-lock.json b/awx/ui/package-lock.json
index 6ed9e8e3..84847414 100644
--- a/awx/ui/package-lock.json
+++ b/awx/ui/package-lock.json
@@ -6,6 +6,10 @@
     "": {
       "name": "ui",
       "dependencies": {
+        "@ctrliq/quantic-css": "^1.5.5",
+        "@ctrliq/quantic-fonts": "^1.18.5",
+        "@ctrliq/quantic-react": "^1.18.5",
+        "@ctrliq/quantic-tokens": "^1.18.5",
         "@lingui/react": "^5.4.0",
         "@patternfly/patternfly": "4.224.5",
         "@patternfly/react-core": "4.278.1",
@@ -2663,6 +2667,63 @@
         "postcss": "^8.2"
       }
     },
+    "node_modules/@ctrliq/quantic-components": {
+      "version": "1.18.5",
+      "resolved": "https://npm.pkg.github.com/download/@ctrliq/quantic-components/1.18.5/e179e610223c554ac2ada9b86f3995aec74e54e1",
+      "integrity": "sha512-USOjEGLKN4zZoo7ynLaDMgEs6I5tGv9oZdOU7zVPQ4gcfs712YSMjy2x5YAbLOXd96K/RSHIsVnakx2iHzdCFQ==",
+      "peer": true,
+      "dependencies": {
+        "@ctrliq/quantic-fonts": "*",
+        "@ctrliq/quantic-tokens": "*",
+        "@lit/context": "^1.1.5",
+        "lit": "^3.3.0",
+        "lucide-static": "^0.511.0"
+      }
+    },
+    "node_modules/@ctrliq/quantic-css": {
+      "version": "1.5.5",
+      "resolved": "https://npm.pkg.github.com/download/@ctrliq/quantic-css/1.5.5/3d6b48c3dbb40815cb7383f17f38617ffe183ea8",
+      "integrity": "sha512-SQvvp3vKMchFnFUxMgFj2OY8Wwv8mO0SkfWfANmsQOFpE5Lt3oW7cGeyHwVizCGv6CGoB5cfbb0yHnOeKaIcsQ==",
+      "license": "ISC",
+      "dependencies": {
+        "@ctrliq/quantic-tokens": "*"
+      }
+    },
+    "node_modules/@ctrliq/quantic-fonts": {
+      "version": "1.18.5",
+      "resolved": "https://npm.pkg.github.com/download/@ctrliq/quantic-fonts/1.18.5/4a16026c29eaeb7be6372e7bf0ba271a4d65e1e2",
+      "integrity": "sha512-OhKgpsyi9tAg+sqVUA8ieCU85vLda1Uf9G91IrghkBNYLvdPsN8xuQaomBJ4smSXCPQ/eVEz1CB7SytDzTb6yQ==",
+      "dependencies": {
+        "camelcase": "^8.0.0"
+      }
+    },
+    "node_modules/@ctrliq/quantic-fonts/node_modules/camelcase": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-8.0.0.tgz",
+      "integrity": "sha512-8WB3Jcas3swSvjIeA2yvCJ+Miyz5l1ZmB6HFb9R1317dt9LCQoswg/BGrmAmkWVEszSrrg4RwmO46qIm2OEnSA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@ctrliq/quantic-react": {
+      "version": "1.18.5",
+      "resolved": "https://npm.pkg.github.com/download/@ctrliq/quantic-react/1.18.5/7cd1b9ea96f279d875e45d3ce3c88287644d5849",
+      "integrity": "sha512-I8lQr6Zhhq95zyxp1HkE7HdebZ6x7mG4upgFV/p43RpwMAxMgqU/Gt7ujYsaveM3Xlp6z9XLSzv4JwgnXayaBA==",
+      "peerDependencies": {
+        "@ctrliq/quantic-components": "*",
+        "@ctrliq/quantic-tokens": "*",
+        "@lit/react": "^1.0.7"
+      }
+    },
+    "node_modules/@ctrliq/quantic-tokens": {
+      "version": "1.18.5",
+      "resolved": "https://npm.pkg.github.com/download/@ctrliq/quantic-tokens/1.18.5/d97a24e3b87498e26c035d2f882f816ffbb37c34",
+      "integrity": "sha512-QYKaXAipX719Q5WAlhVNQxRDHH+Gwgxx0gVCXeR/dKAozvIdcVdoJ5s3jtEBRNZNqzjcXW7YcdZxebmgigWscQ=="
+    },
     "node_modules/@emotion/is-prop-valid": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.3.1.tgz",
@@ -4460,6 +4521,43 @@
         }
       }
     },
+    "node_modules/@lit-labs/ssr-dom-shim": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.4.0.tgz",
+      "integrity": "sha512-ficsEARKnmmW5njugNYKipTm4SFnbik7CXtoencDZzmzo/dQ+2Q0bgkzJuoJP20Aj0F+izzJjOqsnkd6F/o1bw==",
+      "license": "BSD-3-Clause",
+      "peer": true
+    },
+    "node_modules/@lit/context": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@lit/context/-/context-1.1.6.tgz",
+      "integrity": "sha512-M26qDE6UkQbZA2mQ3RjJ3Gzd8TxP+/0obMgE5HfkfLhEEyYE3Bui4A5XHiGPjy0MUGAyxB3QgVuw2ciS0kHn6A==",
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "dependencies": {
+        "@lit/reactive-element": "^1.6.2 || ^2.1.0"
+      }
+    },
+    "node_modules/@lit/react": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@lit/react/-/react-1.0.8.tgz",
+      "integrity": "sha512-p2+YcF+JE67SRX3mMlJ1TKCSTsgyOVdAwd/nxp3NuV1+Cb6MWALbN6nT7Ld4tpmYofcE5kcaSY1YBB9erY+6fw==",
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "peerDependencies": {
+        "@types/react": "17 || 18 || 19"
+      }
+    },
+    "node_modules/@lit/reactive-element": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.1.1.tgz",
+      "integrity": "sha512-N+dm5PAYdQ8e6UlywyyrgI2t++wFGXfHx+dSJ1oBrg6FAxUj40jId++EaRm80MKX5JnlH1sBsyZ5h0bcZKemCg==",
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.4.0"
+      }
+    },
     "node_modules/@messageformat/parser": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/@messageformat/parser/-/parser-5.1.1.tgz",
@@ -5615,7 +5713,6 @@
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
       "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@types/ws": {
@@ -16630,6 +16727,40 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/lit": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-3.3.1.tgz",
+      "integrity": "sha512-Ksr/8L3PTapbdXJCk+EJVB78jDodUMaP54gD24W186zGRARvwrsPfS60wae/SSCTCNZVPd1chXqio1qHQmu4NA==",
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "dependencies": {
+        "@lit/reactive-element": "^2.1.0",
+        "lit-element": "^4.2.0",
+        "lit-html": "^3.3.0"
+      }
+    },
+    "node_modules/lit-element": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.2.1.tgz",
+      "integrity": "sha512-WGAWRGzirAgyphK2urmYOV72tlvnxw7YfyLDgQ+OZnM9vQQBQnumQ7jUJe6unEzwGU3ahFOjuz1iz1jjrpCPuw==",
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.4.0",
+        "@lit/reactive-element": "^2.1.0",
+        "lit-html": "^3.3.0"
+      }
+    },
+    "node_modules/lit-html": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.3.1.tgz",
+      "integrity": "sha512-S9hbyDu/vs1qNrithiNyeyv64c9yqiW9l+DBgI18fL+MTvOtWoFR0FWiyq1TxaYef5wNlpEmzlXoBlZEO+WjoA==",
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "dependencies": {
+        "@types/trusted-types": "^2.0.2"
+      }
+    },
     "node_modules/loader-runner": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
@@ -16795,6 +16926,13 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-static": {
+      "version": "0.511.0",
+      "resolved": "https://registry.npmjs.org/lucide-static/-/lucide-static-0.511.0.tgz",
+      "integrity": "sha512-/MWOjEyGZO84B16BeqbeleinbmeYxOBsbYDt/Yk6xGwMYwDm6dx43jKHMxGDqW9U84qWL13dNvVW0SMADhUSyg==",
+      "license": "ISC",
+      "peer": true
+    },
     "node_modules/luxon": {
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.7.1.tgz",
diff --git a/awx/ui/package.json b/awx/ui/package.json
index 5f9edc45..8632b7c1 100644
--- a/awx/ui/package.json
+++ b/awx/ui/package.json
@@ -6,6 +6,10 @@
     "node": ">=20.18.2"
   },
   "dependencies": {
+    "@ctrliq/quantic-css": "^1.5.5",
+    "@ctrliq/quantic-fonts": "^1.18.5",
+    "@ctrliq/quantic-react": "^1.18.5",
+    "@ctrliq/quantic-tokens": "^1.18.5",
     "@lingui/react": "^5.4.0",
     "@patternfly/patternfly": "4.224.5",
     "@patternfly/react-core": "4.278.1",
diff --git a/awx/ui/public/static/css/ascender_gradient.css b/awx/ui/public/static/css/ascender_gradient.css
deleted file mode 100644
index 044c908f..00000000
--- a/awx/ui/public/static/css/ascender_gradient.css
+++ /dev/null
@@ -1,23 +0,0 @@
-#page-sidebar {
-  background-image: radial-gradient(116.94% 41.63% at 5% 1.23%, rgb(38, 194, 140) 0%, rgb(2, 93, 133) 50.52%, rgb(1, 17, 23) 100%) !important;
-}
-
-.pf-c-nav__link:focus {
-  background-color: transparent !important;
-}
-
-.pf-c-nav__link:active {
-  background-color: transparent !important;
-}
-
-.pf-c-nav__link:hover {
-  background-color: rgba(51, 170, 51, .1) !important;
-}
-
-.pf-c-nav__link.pf-m-current {
-  background-color: rgba(51, 170, 51, .2) !important;
-}
-
-.pf-c-nav__link.pf-m-current::after {
-  border-color: rgba(51, 170, 51, .3) !important;
-}
diff --git a/awx/ui/public/static/media/AscenderAuto_icon_clr_S.png b/awx/ui/public/static/media/AscenderAuto_icon_clr_S.png
deleted file mode 100644
index cb6c58f0..00000000
Binary files a/awx/ui/public/static/media/AscenderAuto_icon_clr_S.png and /dev/null differ
diff --git a/awx/ui/public/static/media/Ascender_logo.svg b/awx/ui/public/static/media/Ascender_logo.svg
new file mode 100644
index 00000000..0b7feb16
--- /dev/null
+++ b/awx/ui/public/static/media/Ascender_logo.svg
@@ -0,0 +1,13 @@
+<svg width="489" height="123" viewBox="0 0 489 123" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M174.447 31.0121L152.478 90.8707H159.672L165.408 75.2886H191.655L197.392 90.8707H204.752L182.533 31.0121H174.447ZM178.465 39.48C178.53 39.6705 178.594 39.8643 178.654 40.0625L189.349 68.9827H167.629L178.241 40.0761C178.317 39.8867 178.392 39.6853 178.465 39.48Z" fill="#94979c"/>
+<path d="M226.864 68.2623L220.059 66.539C216.051 65.5554 214.019 63.6443 214.019 60.8599C214.019 56.9433 216.902 54.7861 222.135 54.7861C227.141 54.7861 230.1 57.2463 230.252 61.5357L230.272 62.0848H236.9L236.88 61.4964C236.623 53.7713 231.036 48.9727 222.299 48.9727C213.381 48.9727 207.39 53.7822 207.39 60.9412C207.39 66.6646 210.981 70.4654 218.063 72.2373L224.868 73.96C229.745 75.1593 230.744 77.1309 230.744 79.7221C230.744 83.6791 227.312 86.0416 221.562 86.0416C216.353 86.0416 213.117 83.4001 213.117 79.1479V78.5786H206.572V79.1479C206.572 86.8675 212.488 91.855 221.644 91.855C231.002 91.855 237.29 86.8806 237.29 79.4759C237.29 73.5255 234.074 70.0669 226.864 68.2623Z" fill="#94979c"/>
+<path d="M272.958 77.6686C271.476 82.506 266.897 85.6316 261.293 85.6316C253.574 85.6316 248.587 79.6746 248.587 70.455C248.587 61.2791 253.857 55.1142 261.702 55.1142C267.248 55.1142 271.527 58.2206 272.869 63.2213L272.983 63.6427H279.761L279.632 62.9669C278.018 54.4657 270.948 48.9727 261.619 48.9727C249.811 48.9727 241.877 57.6388 241.877 70.5369C241.877 83.2882 249.679 91.855 261.293 91.855C270.571 91.855 277.832 86.4029 279.791 77.9645L279.953 77.2663H273.081L272.958 77.6686Z" fill="#94979c"/>
+<path d="M315.396 78.2554C313.994 83.2418 309.99 85.8778 303.816 85.8778C295.842 85.8778 290.978 80.7429 290.403 71.7624H321.92V68.4048C321.92 56.7818 314.447 48.9727 303.325 48.9727C291.796 48.9727 283.745 57.8063 283.745 70.455C283.745 83.2549 291.777 91.855 303.734 91.855C313.265 91.855 319.718 87.13 321.903 78.5507L322.084 77.8405H315.513L315.396 78.2554ZM290.623 66.5226C291.77 59.2616 296.479 54.9504 303.325 54.9504C310.308 54.9504 314.885 59.4723 315.118 66.5226H290.623Z" fill="#94979c"/>
+<path d="M349.061 48.9727C343.597 48.9727 338.672 51.536 335.825 55.7621L335.144 50.0387H329.154V90.8708H335.945V69.5522C335.945 60.6142 340.48 55.2784 348.077 55.2784C355.012 55.2784 358.243 59.0847 358.243 67.2563V90.8708H365.034V66.0259C365.034 54.8696 359.511 48.9727 349.061 48.9727Z" fill="#94979c"/>
+<path d="M404.961 55.9962C401.975 51.4481 397.076 48.9726 390.945 48.9726C379.479 48.9726 371.775 57.6387 371.775 70.5369C371.775 83.2882 379.38 91.8549 390.698 91.8549C397.195 91.8549 402.295 89.1622 405.268 84.2205L405.738 90.8707H411.753V29.946H404.961V55.9962ZM404.88 70.3726C404.88 79.5922 399.699 85.5491 391.682 85.5491C383.764 85.5491 378.648 79.5922 378.648 70.3726C378.648 61.153 383.764 55.196 391.682 55.196C399.699 55.196 404.88 61.153 404.88 70.3726Z" fill="#94979c"/>
+<path d="M450.505 78.2559C449.104 83.2418 445.1 85.8778 438.926 85.8778C430.952 85.8778 426.089 80.7429 425.513 71.7624H457.031V68.4048C457.031 56.7818 449.557 48.9727 438.434 48.9727C426.906 48.9727 418.855 57.8063 418.855 70.455C418.855 83.2549 426.888 91.855 438.844 91.855C448.376 91.855 454.828 87.13 457.013 78.5507L457.194 77.8405H450.622L450.505 78.2559ZM425.734 66.5226C426.879 59.2616 431.588 54.9504 438.434 54.9504C445.418 54.9504 449.995 59.4723 450.229 66.5226H425.734Z" fill="#94979c"/>
+<path d="M481.877 49.137C477.104 49.137 473.117 51.1796 470.994 54.5901L470.691 50.0387H464.263V90.8708H471.055V67.6668C471.055 60.4396 475.528 55.7697 482.45 55.7697H486.132V49.6648L485.694 49.5611C484.197 49.209 483.085 49.137 481.877 49.137Z" fill="#94979c"/>
+<path d="M60.4251 9.78164C88.9188 9.78164 112.1 32.9823 112.1 61.5C112.1 90.0178 88.9188 113.218 60.4251 113.218C31.9314 113.218 8.75 90.0178 8.75 61.5C8.75 32.9823 31.9314 9.78164 60.4251 9.78164ZM60.4251 3.63135C28.4919 3.63135 2.60486 29.5402 2.60486 61.5C2.60486 93.4598 28.4919 119.369 60.4251 119.369C92.3583 119.369 118.245 93.4601 118.245 61.5C118.245 29.54 92.3584 3.63135 60.4251 3.63135Z" fill="#0B8759"/>
+<path d="M78.822 93.0924H45.8438L42.3002 86.9421H68.1378L50.9124 57.3111L30.2721 93.0924H23.1757L50.8928 45.0454L78.822 93.0924Z" fill="#0B8759"/>
+<path d="M72.0494 20.6539L58.0601 44.9051L61.6469 50.9893L72.069 32.9239L86.0265 56.9485H65.1599L68.7856 63.0988H89.5996L99.0577 79.3788L106.147 79.3466L72.0494 20.6539Z" fill="#0B8759"/>
+</svg>
diff --git a/awx/ui/public/static/media/apple-touch-icon.png b/awx/ui/public/static/media/apple-touch-icon.png
new file mode 100644
index 00000000..a3a7bd06
Binary files /dev/null and b/awx/ui/public/static/media/apple-touch-icon.png differ
diff --git a/awx/ui/public/static/media/favicon copy.svg b/awx/ui/public/static/media/favicon copy.svg
new file mode 100644
index 00000000..8b6c75dc
--- /dev/null
+++ b/awx/ui/public/static/media/favicon copy.svg	
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="49" height="49"><svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.8701 0.410156C38.1001 0.410156 48.8701 11.1802 48.8701 24.4102C48.87 37.6401 38.1001 48.4102 24.8701 48.4102C11.6402 48.4102 0.870217 37.6401 0.870117 24.4102C0.870117 11.1802 11.6401 0.410156 24.8701 0.410156ZM24.8701 3.16016C13.1501 3.16016 3.62012 12.6902 3.62012 24.4102C3.62022 36.1301 13.1502 45.6602 24.8701 45.6602C36.5901 45.6602 46.12 36.1301 46.1201 24.4102C46.1201 12.6902 36.5901 3.16016 24.8701 3.16016ZM31.6807 37.625H16.3301C15.5707 37.625 14.9551 37.0094 14.9551 36.25C14.9551 35.4906 15.5707 34.875 16.3301 34.875H26.8994L19.9141 22.8711L11.9404 36.6777C11.5606 37.3352 10.72 37.5603 10.0625 37.1807C9.40497 36.8009 9.17994 35.9603 9.55957 35.3027L19.9053 17.3887L31.6807 37.625ZM42.209 30.499L42.2734 30.624C42.561 31.2588 42.3263 32.0211 41.7109 32.3789C41.0955 32.7366 40.3175 32.5629 39.9082 31.999L39.8311 31.8809L35.9326 25.1748H27.9805C27.2211 25.1748 26.6055 24.5592 26.6055 23.7998C26.6056 23.0405 27.2211 22.4248 27.9805 22.4248H34.333L28.7031 12.7412L25.5605 18.1777L25.4844 18.2959C25.0765 18.8613 24.2982 19.037 23.6816 18.6807C23.0242 18.3006 22.7996 17.4592 23.1797 16.8018L28.6963 7.25879L42.209 30.499Z" fill="#12a66f"></path>
+</svg><style>@media (prefers-color-scheme: light) { :root { filter: none; } }
+@media (prefers-color-scheme: dark) { :root { filter: none; } }
+</style></svg>
\ No newline at end of file
diff --git a/awx/ui/public/static/media/favicon-96x96.png b/awx/ui/public/static/media/favicon-96x96.png
new file mode 100644
index 00000000..f40be861
Binary files /dev/null and b/awx/ui/public/static/media/favicon-96x96.png differ
diff --git a/awx/ui/public/static/media/favicon.ico b/awx/ui/public/static/media/favicon.ico
index 2f009cfa..8a1571b4 100644
Binary files a/awx/ui/public/static/media/favicon.ico and b/awx/ui/public/static/media/favicon.ico differ
diff --git a/awx/ui/public/static/media/favicon.svg b/awx/ui/public/static/media/favicon.svg
index 6d80915f..d5305293 100644
--- a/awx/ui/public/static/media/favicon.svg
+++ b/awx/ui/public/static/media/favicon.svg
@@ -1,232 +1,3 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
-<style type="text/css">
-	.st0{display:none;}
-	.st1{display:inline;fill:#ED1C24;}
-	.st2{fill:#42210B;}
-	.st3{fill:#FFFFFF;}
-	.st4{fill:#C69C6D;stroke:#8C6239;stroke-width:5;stroke-miterlimit:10;}
-	.st5{fill:#FFFFFF;stroke:#42210B;stroke-width:3;stroke-miterlimit:10;}
-	.st6{fill:#ED1C24;stroke:#8C6239;stroke-width:5;stroke-miterlimit:10;}
-	.st7{fill:#A67C52;}
-	.st8{fill:#ED1C24;}
-</style>
-<g class="st0">
-	<path class="st1" d="M319.8,169.3c1.5-14.2,13.7-27.2,29.9-31.9c-13.1,1.5-27.3-1.7-36-10c-8.7-8.3-10-21.9-1.4-30.1
-		c-12,6.7-28.1,8.1-41.4,3.4c-13.3-4.6-23.5-15.1-26.2-26.9c-2-8.8,0-17.9,2-26.7c-6.2,9.4-17.6,17.3-30.5,17.3
-		c-12.9,0.1-25.7-10.2-22.9-20.7c-5.5,7.8-11.4,15.9-21,20.2c-9.5,4.3-23.7,2.7-28.2-5.5c-1.6,10.8-7.5,22-19.1,27
-		c-9,3.9-21.5,2.2-28-3.8c5.7,11.4,4.3,25.3-4.1,35.6c-9.9,12.2-29.1,18.6-46.4,15.6c14.7,7.2,28.5,17.7,32.1,31.5
-		c3.7,13.8-7.1,30.7-24.1,31.7c13.6,3.1,28,7.4,35.6,17.2c7.6,9.8,2.9,26.4-11.1,28c12.8-2.6,27.4,3.9,31.9,14.2
-		c4.1,9.5-0.9,20.9-10.9,26.5c18.6-8.9,41-17.1,59.6-8.8c13.9,6.2,20.8,21.6,15.1,33.8c10.4-10.6,23-21.3,39.2-23.5
-		c12.8-1.8,27.5,4.6,31.9,14.1c-0.3-12.7,6.1-25.5,17.5-34c13.8-10.3,34.4-14,52-9.2c-11.1-7.8-14.9-22-8.9-33
-		c6-11,21.3-18,35.7-16.2C327.5,198.1,318.3,183.5,319.8,169.3z"/>
-</g>
-<g>
-	<g>
-		<g>
-			<path class="st2" d="M179.7,297.3c-10.1,3.2-20.3,6-30.6,8.4c-10.7,2.5-21.7,5-32.8,5.1C96,311.1,79.9,297.2,60,296.1
-				c-5.8-0.3-5.8,8.7,0,9c9.9,0.5,18.9,5.1,27.9,8.8c9.8,4,19.6,6.3,30.2,5.9c21.5-0.8,43.5-7.4,64-13.8
-				C187.6,304.3,185.2,295.6,179.7,297.3L179.7,297.3z"/>
-		</g>
-	</g>
-	<g>
-		<g>
-			<path class="st2" d="M322.2,194.8c17.9-8,36-18.5,44.3-37.2c4.2-9.3,6-19.2,7.2-29.3c1.5-11.7,2.5-23.4,3.7-35.2
-				c0.6-5.8-8.4-5.7-9,0c-1.1,10.3-2.1,20.6-3.3,30.9c-1.1,9.7-2.5,19.7-6.4,28.7c-7.5,17.5-24.6,26.8-41.2,34.2
-				C312.4,189.4,316.9,197.2,322.2,194.8L322.2,194.8z"/>
-		</g>
-	</g>
-	<g>
-		
-			<ellipse transform="matrix(0.5541 -0.8324 0.8324 0.5541 -219.4917 376.0051)" class="st2" cx="241.2" cy="392.9" rx="65.5" ry="33.7"/>
-	</g>
-	<g>
-		<g>
-			<path class="st3" d="M224.1,442.5c22-11.5,38.7-31,47.1-54.3c2-5.5-6.7-7.8-8.7-2.4c-7.6,21.1-23.1,38.5-43,48.9
-				C214.4,437.4,218.9,445.1,224.1,442.5L224.1,442.5z"/>
-		</g>
-	</g>
-	<g>
-		
-			<ellipse transform="matrix(0.9684 -0.2494 0.2494 0.9684 -66.4734 109.0276)" class="st2" cx="397" cy="316.8" rx="63.9" ry="32.9"/>
-	</g>
-	<g>
-		<g>
-			<path class="st3" d="M363.8,341.5c28.3,7,58.7-0.8,80.2-20.5c4.3-3.9-2.1-10.3-6.4-6.4c-19.1,17.5-46.4,24.4-71.5,18.2
-				C360.5,331.5,358.1,340.1,363.8,341.5L363.8,341.5z"/>
-		</g>
-	</g>
-	<path class="st4" d="M156.9,96c-25.4,4.5-32.9,20.2-45,46.9c-20.2,44.4,2,90.3,5.6,97.5c18.4,36.5,42.3,36.8,60,80.6
-		c8.6,21.2,4.6,25.2,13.1,37.5c20.4,29.2,63.7,36.1,91.9,33.8c40.3-3.3,91.5-28.8,108.8-82.5c17.1-53.2-6-112.1-41.2-131.2
-		c-25.3-13.7-44.9-0.5-71.2-20.6c-21.6-16.5-18.4-33.1-37.5-48.8C227.9,98.1,203.7,87.7,156.9,96z"/>
-	<ellipse transform="matrix(0.6622 -0.7494 0.7494 0.6622 65.2068 309.6339)" class="st2" cx="376" cy="82.5" rx="21" ry="15.5"/>
-	<g>
-		<g>
-			<path class="st3" d="M379.8,75.3c0.8,0.2-0.6-0.4-0.1-0.1c0.2,0.1,0.3,0.2,0.5,0.3c0.4,0.2-0.6-0.7-0.1-0.1
-				c0.1,0.1,0.7,0.8,0.2,0.2c-0.4-0.5,0,0,0.1,0.1c0.4,0.7,0,0.2,0-0.2c0,0.1,0.1,0.4,0.2,0.5c0.3,0.9-0.1-1,0-0.1
-				c0.1,2.3,2,4.6,4.5,4.5c2.3-0.1,4.6-2,4.5-4.5c-0.3-4.4-3-8.1-7.3-9.4c-2.2-0.7-5,0.8-5.5,3.1C376.1,72.2,377.4,74.5,379.8,75.3
-				L379.8,75.3z"/>
-		</g>
-	</g>
-	
-		<ellipse transform="matrix(0.9999 -1.433736e-02 1.433736e-02 0.9999 -4.303 0.8051)" class="st2" cx="54" cy="300.5" rx="21" ry="15.5"/>
-	<g>
-		<g>
-			<path class="st3" d="M52.2,297.5c1.1-0.3,1.4-0.4,2.5,0c0.8,0.3,1.3,0.7,2,1.7c1.5,1.9,4.8,1.6,6.4,0c1.9-1.9,1.5-4.4,0-6.4
-				c-3.1-3.9-8.6-5.4-13.3-4C44.3,290.5,46.7,299.2,52.2,297.5L52.2,297.5z"/>
-		</g>
-	</g>
-	<g>
-		<g>
-			<path class="st2" d="M149.3,108.8c4.9-10.8-1.3-24.2-12.9-26.9c-1.9-0.4-2.7,2.4-0.8,2.9c9.6,2.3,15.3,13.5,11.2,22.5
-				C145.9,109,148.5,110.5,149.3,108.8L149.3,108.8z"/>
-		</g>
-	</g>
-	<g>
-		<g>
-			<path class="st2" d="M141.2,112.3c2.4-9.4-5.4-19.3-15.2-19c-1.9,0.1-1.9,3.1,0,3c7.8-0.2,14.2,7.6,12.3,15.2
-				C137.8,113.4,140.7,114.2,141.2,112.3L141.2,112.3z"/>
-		</g>
-	</g>
-	<g>
-		<g>
-			<path class="st2" d="M132.6,118c-1.1-8.3-10.9-13.4-18.2-9.1c-1.7,1-0.2,3.6,1.5,2.6c5.2-3,12.9,0.4,13.7,6.5
-				C129.8,119.9,132.8,119.9,132.6,118L132.6,118z"/>
-		</g>
-	</g>
-	<path class="st5" d="M215.5,166.5l34-73c0,0,35,0,46,21c7.5,14.3,8,39,8,39L215.5,166.5z"/>
-	<path class="st5" d="M208.2,170.5l-79.5-12.7c0,0-19.6,29-8.4,49.9c7.6,14.2,27.8,28.5,27.8,28.5L208.2,170.5z"/>
-	<path class="st2" d="M210.5,164.5l33-74c0,0-2.5-5.5-8-7s-12,0-12,0L210.5,164.5z"/>
-	<path class="st2" d="M207.4,165.3l-73.1-35c0,0-5.6,2.4-7.2,7.8c-1.6,5.5-0.3,12-0.3,12L207.4,165.3z"/>
-	<path d="M215.5,166.5L234,127c0,0,17-6,25.5,7.5c8.6,13.6-3.5,25.5-3.5,25.5L215.5,166.5z"/>
-	<path d="M206.7,170.9l-29.6,32c0,0-18,0.5-22-14.9c-4-15.6,11.1-23.2,11.1-23.2L206.7,170.9z"/>
-	<g>
-		<g>
-			<path class="st3" d="M243.4,139.1c-0.6,0.2-0.7,0.3-0.4,0.2c0.3-0.1,0.2-0.1-0.5,0.1c0.7,0-0.3,0-0.4-0.1c0.1,0,0.3,0.1,0.4,0.1
-				c0.3,0.1,0.2,0-0.4-0.2c0,0,0.6,0.3,0.6,0.3c0.5,0.2-0.9-0.6-0.1-0.1c0.6,0.4-0.3-0.5-0.1-0.1c0.3,0.5-0.3-1-0.1-0.2
-				c0.2,0.8,0-1,0-0.1c0,2.4,2.1,4.6,4.5,4.5c2.5-0.1,4.5-2,4.5-4.5c0-3-1.6-5.7-4.1-7.3c-2.6-1.7-5.6-1.6-8.4-0.4
-				c-2.2,0.9-2.8,4.3-1.6,6.2C238.7,139.7,241,140.1,243.4,139.1L243.4,139.1z"/>
-		</g>
-	</g>
-	<g>
-		<g>
-			<path class="st3" d="M173.5,176.4c-0.5-0.3-0.1,0,0.2,0.1c-0.7-0.6,0.3,0.5,0.1,0c-0.3-0.5,0.4,0.8,0.1,0.2
-				c-0.4-0.8,0.2,0.2,0,0.1c0,0,0-0.6,0-0.6c-0.1,0.1-0.1,1,0,0.3c-0.1,0.2-0.1,0.3-0.2,0.5c0.2-0.3,0.2-0.4,0-0.1
-				c-0.2,0.2-0.2,0.3-0.1,0.1c0.2-0.2,0.1-0.2-0.3,0.2c1.9-1.4,3-4,1.6-6.2c-1.2-1.9-4.1-3.1-6.2-1.6c-2.4,1.7-4,4.3-3.9,7.4
-				c0.1,3,1.6,5.7,4.1,7.3c2,1.2,5,0.5,6.2-1.6C176.3,180.4,175.7,177.7,173.5,176.4L173.5,176.4z"/>
-		</g>
-	</g>
-	
-		<ellipse transform="matrix(0.862 -0.5069 0.5069 0.862 -88.3186 186.5516)" class="st6" cx="298.5" cy="255.5" rx="79.5" ry="68.5"/>
-	<g>
-		<g>
-			<path class="st7" d="M173.6,109.8c-2.1,2-3.9,4.6-3.6,7.6c0.3,3.5,2.8,6.6,6.6,6.7c6,0.2,11.5-7.7,8.2-13c-1-1.7-3.1-3.1-5.2-3
-				c-1.7,0.1-3.1,0.8-4.4,1.9c-2,1.8-2.8,5.2-1.9,7.7c2.4,6.6,11.8,5.9,13.8-0.7c0.7-2.5-0.9-5.6-3.5-6.2c-2.7-0.6-5.4,0.8-6.2,3.5
-				c0.6-2.1,3.1-2.6,4.6-1c0.8,0.9,1,1.8,0.8,2.8c0.2-0.5,0.1-0.4-0.1,0.3c-0.4,0.7-1,1.2-1.8,1.4c-0.9,0-1.8,0-2.7,0
-				c-1.8-0.6-2.5-1.6-2.3-3.1c-0.1-0.4-0.1-0.7,0.1-1c0.2-0.3,0.1-0.3-0.1,0.1c0.1-0.1,0.2-0.2,0.3-0.4c-0.2,0.3-0.5,0.5-0.7,0.8
-				c-0.1,0.1-0.2,0.2-0.3,0.3c-0.3,0.2-0.2,0.2,0.1-0.1c1.3,0.2,2.6,0.4,3.9,0.6c0.2,0.4,0.5,0.9,0.7,1.3c0.2,0.6-0.2,0.9-0.2,1.4
-				c0,0.4,0.4-0.5-0.1,0.1c0.3-0.4,0.6-0.7,1-1c1.9-1.8,2-5.3,0-7.1C178.7,107.9,175.6,107.8,173.6,109.8L173.6,109.8z"/>
-		</g>
-	</g>
-	<g>
-		<g>
-			<path class="st7" d="M151.2,248.6c-5.7,7,1.7,16.9,10,13.3c3.4-1.5,6.3-5,6.3-8.9c0-4.2-2.7-7.6-7-7.8c-3.1-0.1-5.8,3.3-4.8,6.3
-				c1.2,3.4,3.7,6.1,7.3,7c2.6,0.6,5.4-0.8,6.2-3.5c0.7-2.5-0.9-5.5-3.5-6.2c-1.7-0.4,0,0.1-0.2,0.1c-0.4,0-0.4-0.8-0.1-0.1
-				c-1.6,2.1-3.2,4.2-4.8,6.3c-2.4-0.1-2.8-1.1-3-2.6c0.1,0.7-0.1,0.2,0.1-0.1c0.7-0.9-0.5,0.5,0,0c-0.5,0.5-0.3,0.1-0.2,0.2
-				c0.1,0,0.6,0,0.7,0c0.4,0.1,0.5,0.4,0.8,0.6c0.2,0.3,0.2,0.2-0.1-0.2c0.1,0.1,0.1,0.3,0.2,0.4c0,1,0.1,1.1-0.7,2.1
-				c1.7-2.1,2-5,0-7.1C156.5,246.8,152.9,246.5,151.2,248.6L151.2,248.6z"/>
-		</g>
-	</g>
-	<g>
-		<g>
-			<path class="st7" d="M204.1,205.7c0.8,4.8,5.3,8.6,10.1,8.6c5.1,0,9.5-3.9,10.3-8.9c0.7-4.4-0.2-12.1-5.3-13.6
-				c-2.7-0.8-5.2,0.5-7,2.4c-1.1,1.2-1.5,1.7-3.1,1.2c0.7,2.8,1.5,5.6,2.2,8.4c0.2-0.2-0.5,0.2-0.5,0.2c6.3,1.4,8.9-8.2,2.7-9.6
-				c-3.5-0.8-6.6,0-9.3,2.4c-3,2.6-1.1,7.2,2.2,8.4c2.6,0.9,5.5,0.8,8-0.2c1.3-0.5,2.4-1.2,3.4-2.1c0.4-0.3,0.7-0.6,1-1
-				c0.2-0.3,0.4-0.5,0.6-0.7c0.4-0.4,0.3-0.4-0.5,0.3c-0.9,0-1.8,0-2.7,0c0.2,0.1,0.3,0.1,0.5,0.2c-0.7-0.4-1.5-0.9-2.2-1.3
-				c0.1,0.2,0.3,0.3,0.4,0.5c-0.4-0.7-0.9-1.5-1.3-2.2c0.4,1.2,0.8,2.5,1,3.7c0,0.4,0,0.8,0,1.2c0,0.5-0.5,0.9,0,0.4
-				c-0.8,0.6-0.9,0.2-1.1-0.9c-0.4-2.7-3.8-4.1-6.2-3.5C204.7,200.3,203.7,203,204.1,205.7L204.1,205.7z"/>
-		</g>
-	</g>
-	<g>
-		<g>
-			<path class="st7" d="M265.9,179.6c0.2,0.4,0.5,0.9,0.7,1.3c0.6,1.1,1.8,2,3,2.3c1.2,0.3,2.8,0.2,3.9-0.5c1.1-0.7,2-1.7,2.3-3
-				c0.3-1.4,0.1-2.6-0.5-3.9c-0.2-0.4-0.5-0.9-0.7-1.3c-0.6-1.1-1.8-2-3-2.3c-1.2-0.3-2.8-0.2-3.9,0.5c-1.1,0.7-2,1.7-2.3,3
-				C265.1,177.1,265.3,178.3,265.9,179.6L265.9,179.6z"/>
-		</g>
-	</g>
-	<g>
-		<g>
-			<path class="st7" d="M200.4,295.8c-6.1,1.6-8.1,8.6-5,13.7c2.8,4.7,9.1,7.2,14.3,5.4c4.9-1.7,7.8-7.1,6.3-12.2
-				c-0.8-2.7-2.7-4.8-5.3-5.8c-1.4-0.5-2.8-0.7-4.2-0.8c-0.1,0-0.9-0.1-0.9-0.1c0.2-0.4,1.2,2.5,0.9,0.7c0,0.9,0,1.8,0,2.7
-				c-0.1,0.1-0.1,0.1-0.2,0.2c3.1-5.6-5.5-10.7-8.6-5c-1.7,3-1.1,6.6,1.4,9c1.3,1.2,2.8,2,4.5,2.3c0.8,0.1,1.6,0.2,2.4,0.3
-				c0.4,0,0.7,0,1.1,0.1c0.2,0.1,0.1,0.1-0.2-0.1c0,0.1-0.6-0.5-0.6-0.5c-0.1-0.1-0.1-0.2,0-0.3c0.1-0.3,0.1-0.1-0.1,0.5
-				c-0.3-0.1,0.7-0.2-0.3-0.3c-0.9-0.1-1.1-0.6-1.8-0.9c0,0-0.2-0.3-0.3-0.3c0.3,0-0.8,1.2-0.8,1.2
-				C209.3,303.8,206.6,294.2,200.4,295.8L200.4,295.8z"/>
-		</g>
-	</g>
-	<g>
-		<g>
-			<path class="st7" d="M244.8,355.3c-4-6.2-11.2-2.3-12,3.9c-0.8,5.9,1.8,12,6.5,15.6c4.5,3.5,11.5,4.9,16.7,2.1
-				c6.4-3.3,5.4-9.8,4.9-15.9c-0.5-6.3-1.9-12-9.5-12.1c-5.1-0.1-13.1,0.2-14.5,6.4c-1.2,5.4,2.5,12.8,8.2,13.8
-				c6.2,1.1,11.2-5.5,7.8-11c-2.2-3.5-8.1-3.1-9.1,1.2c-1.1,4.4,0.5,8,4.1,10.6c5.2,3.8,10.2-4.8,5-8.6c0.2,0.2,0.4,0.5,0.5,0.7
-				c-3,0.4-6.1,0.8-9.1,1.2c-0.4-0.7,3.4-3.1,2.9-4.8c-0.8-2.6-1.7,1.4-1.9,1.1c0,0.1,5.2-0.1,5.6-0.4c0.7,0.1,0.8-0.1,0.2-0.6
-				c-0.4-0.7-0.5-0.8-0.4-0.3c-0.2,0.3,0.2,1.9,0.2,2.3c0.2,2,0.3,4,0.5,5.9c0.1,1.6,0.4,1.7-1.1,2c-1.3,0.2-2.9-0.3-4-0.9
-				c-1.4-0.8-2.5-2-3.1-3.5c-0.3-0.7-0.4-1.3-0.5-2c0-0.3-0.1-0.7,0-1c0.2-1.9-1.1-1.5-3.8,1.2c-1-0.8-2-1.5-3-2.3
-				c0.1,0.2,0.2,0.4,0.4,0.6C239.6,365.7,248.3,360.7,244.8,355.3L244.8,355.3z"/>
-		</g>
-	</g>
-	<g>
-		<g>
-			<path class="st7" d="M336.5,337.4c-2.4-1.5-5.1-2.5-7.9-1.8c-2.7,0.7-4.9,3.2-5.3,6c-0.9,6.4,6.3,8.3,11.2,8.4
-				c4.8,0.1,10.6-2.4,10.9-7.9c0.2-5.6-5.5-9.6-10.6-6.9c-5.7,3-0.7,11.6,5,8.6c-0.1,0.1-0.2,0.1-0.3,0.2c-0.9,0-1.8,0-2.7,0
-				c-2.1-0.4-1.4-4.8-0.3-4.3c0,0-1.3,0.3-1.3,0.3c-0.6,0-1.2,0-1.8-0.1c-0.5-0.1-1-0.2-1.5-0.4c-1.2-0.5-1-0.2,0.6,0.7
-				c0.2,0.8,0.5,1.7,0.7,2.5c-3.4,1.1-4.4,1.9-2.8,2.7c0.4,0.2,0.7,0.4,1.1,0.7C336.9,349.6,341.9,340.9,336.5,337.4L336.5,337.4z"
-				/>
-		</g>
-	</g>
-	<path class="st3" d="M224.3,256.5L252,273v-40l32,20v-38l28,17l4-28l23,12l-3-24c0,0-14-8-35.5-6.4c-11.6,0.9-24.3,6.8-33.5,11.4
-		c-14,7-23.7,18.9-31.2,29.1C227,238,224.3,256.5,224.3,256.5z"/>
-	<path class="st3" d="M372.9,248.9l-28.8-14.5l2.9,39.9l-33.3-17.7l2.7,37.9l-29.1-15l-2,28.2l-23.8-10.3l4.7,23.7
-		c0,0,14.5,7,35.9,3.8c11.5-1.7,23.7-8.5,32.6-13.8c13.5-8,22.3-20.5,29-31.2C371.5,267.5,372.9,248.9,372.9,248.9z"/>
-</g>
-<g>
-	<g>
-		<path class="st8" d="M235.2,121.6c8.5-3.1,23.2-0.1,27.8,8.4c2.3,4.4,4.5,9.9,4.5,14.9c0.1,5.5-2.7,10.5-5.3,15.3
-			c-1.5,2.8,2.8,5.4,4.3,2.5c3.1-5.8,6.3-11.9,6-18.7c-0.3-6-2.8-12.8-5.9-17.9c-6-9.5-22.6-13.1-32.7-9.4
-			C230.9,117.8,232.2,122.7,235.2,121.6L235.2,121.6z"/>
-	</g>
-</g>
-<g>
-	<g>
-		<path class="st8" d="M241.1,110.5c11.6-2.3,25.6,2.3,32.2,12.4c6.6,10.2,6.1,22.8,3.1,34.2c-1.3,5,6.4,7.1,7.7,2.1
-			c3.8-14.3,3.8-30.3-5.5-42.6c-8.9-11.7-25.5-16.6-39.6-13.8C233.9,103.8,236.1,111.5,241.1,110.5L241.1,110.5z"/>
-	</g>
-</g>
-<g>
-	<g>
-		<path class="st8" d="M245.4,97.5c7.8-1.8,15.5,0,22.9,2.8c7.2,2.7,15,6.1,20.3,11.8c10.7,11.7,9.5,29.3,8.7,44
-			c-0.3,6.4,9.7,6.4,10,0c1-17.9,1.2-38.5-12.7-52.1c-6.4-6.3-15.3-10.2-23.6-13.3c-9.1-3.4-18.6-4.9-28.2-2.8
-			C236.5,89.2,239.1,98.9,245.4,97.5L245.4,97.5z"/>
-	</g>
-</g>
-<g>
-	<g>
-		<path class="st8" d="M155.8,158.5c-13.1,4.8-14.2,21.6-10.1,33.1c4.3,12,15.2,20.6,28.2,20.5c3.2,0,3.2-5,0-5
-			c-9.9,0.1-18.6-5.9-22.6-14.9c-3.9-8.6-5.2-24.8,5.8-28.9C160.2,162.3,158.9,157.4,155.8,158.5L155.8,158.5z"/>
-	</g>
-</g>
-<g>
-	<g>
-		<path class="st8" d="M164.1,216.5c-11.4-2.2-18.8-11.4-22.7-21.9c-3.6-9.6-7.7-25.3,1.2-33.1c3.9-3.4-1.8-9-5.7-5.7
-			c-11.3,9.9-7.9,28.5-3.3,40.9c4.8,13,14.1,24.7,28.3,27.5C167,225.2,169.1,217.5,164.1,216.5L164.1,216.5z"/>
-	</g>
-</g>
-<g>
-	<g>
-		<path class="st8" d="M152,231.7c-27.3-13.3-38.1-46.5-23.3-73.2c3.1-5.6-5.5-10.7-8.6-5c-17.3,31.2-5.3,71.1,26.9,86.9
-			C152.7,243.1,157.8,234.5,152,231.7L152,231.7z"/>
-	</g>
-</g>
-</svg>
+<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.8701 0.410156C38.1001 0.410156 48.8701 11.1802 48.8701 24.4102C48.87 37.6401 38.1001 48.4102 24.8701 48.4102C11.6402 48.4102 0.870217 37.6401 0.870117 24.4102C0.870117 11.1802 11.6401 0.410156 24.8701 0.410156ZM24.8701 3.16016C13.1501 3.16016 3.62012 12.6902 3.62012 24.4102C3.62022 36.1301 13.1502 45.6602 24.8701 45.6602C36.5901 45.6602 46.12 36.1301 46.1201 24.4102C46.1201 12.6902 36.5901 3.16016 24.8701 3.16016ZM31.6807 37.625H16.3301C15.5707 37.625 14.9551 37.0094 14.9551 36.25C14.9551 35.4906 15.5707 34.875 16.3301 34.875H26.8994L19.9141 22.8711L11.9404 36.6777C11.5606 37.3352 10.72 37.5603 10.0625 37.1807C9.40497 36.8009 9.17994 35.9603 9.55957 35.3027L19.9053 17.3887L31.6807 37.625ZM42.209 30.499L42.2734 30.624C42.561 31.2588 42.3263 32.0211 41.7109 32.3789C41.0955 32.7366 40.3175 32.5629 39.9082 31.999L39.8311 31.8809L35.9326 25.1748H27.9805C27.2211 25.1748 26.6055 24.5592 26.6055 23.7998C26.6056 23.0405 27.2211 22.4248 27.9805 22.4248H34.333L28.7031 12.7412L25.5605 18.1777L25.4844 18.2959C25.0765 18.8613 24.2982 19.037 23.6816 18.6807C23.0242 18.3006 22.7996 17.4592 23.1797 16.8018L28.6963 7.25879L42.209 30.499Z" fill="#12a66f"/>
+</svg>
\ No newline at end of file
diff --git a/awx/ui/public/static/media/favicon_ascender.ico b/awx/ui/public/static/media/favicon_ascender.ico
index b655d342..8a1571b4 100644
Binary files a/awx/ui/public/static/media/favicon_ascender.ico and b/awx/ui/public/static/media/favicon_ascender.ico differ
diff --git a/awx/ui/public/static/media/web-app-manifest-192x192.png b/awx/ui/public/static/media/web-app-manifest-192x192.png
new file mode 100644
index 00000000..df21ab09
Binary files /dev/null and b/awx/ui/public/static/media/web-app-manifest-192x192.png differ
diff --git a/awx/ui/public/static/media/web-app-manifest-512x512.png b/awx/ui/public/static/media/web-app-manifest-512x512.png
new file mode 100644
index 00000000..dc67edd1
Binary files /dev/null and b/awx/ui/public/static/media/web-app-manifest-512x512.png differ
diff --git a/awx/ui/src/App.js b/awx/ui/src/App.js
index 3d475ed3..fb1916da 100644
--- a/awx/ui/src/App.js
+++ b/awx/ui/src/App.js
@@ -19,7 +19,6 @@ import {
 } from 'contexts/Config';
 import { SessionProvider, useSession } from 'contexts/Session';
 import AppContainer from 'components/AppContainer';
-import Background from 'components/Background';
 import ContentError from 'components/ContentError';
 import NotFound from 'screens/NotFound';
 import Login from 'screens/Login';
@@ -177,26 +176,24 @@ function App() {
 
   return (
     <I18nProvider i18n={i18n}>
-      <Background>
-        <SessionProvider>
-          <Switch>
-            <Route exact strict path="/*/">
-              <Redirect to={`${pathname.slice(0, -1)}${search}${hash}`} />
-            </Route>
-            <Route path="/login">
-              <Login isAuthenticated={isAuthenticated} />
-            </Route>
-            <Route exact path="/">
-              <Redirect to="/home" />
-            </Route>
-            <ProtectedRoute>
-              <ConfigProvider>
-                <RenderAppContainer />
-              </ConfigProvider>
-            </ProtectedRoute>
-          </Switch>
-        </SessionProvider>
-      </Background>
+      <SessionProvider>
+        <Switch>
+          <Route exact strict path="/*/">
+            <Redirect to={`${pathname.slice(0, -1)}${search}${hash}`} />
+          </Route>
+          <Route path="/login">
+            <Login isAuthenticated={isAuthenticated} />
+          </Route>
+          <Route exact path="/">
+            <Redirect to="/home" />
+          </Route>
+          <ProtectedRoute>
+            <ConfigProvider>
+              <RenderAppContainer />
+            </ConfigProvider>
+          </ProtectedRoute>
+        </Switch>
+      </SessionProvider>
     </I18nProvider>
   );
 }
diff --git a/awx/ui/src/ascender.css b/awx/ui/src/ascender.css
index 0d5266bf..8b137891 100644
--- a/awx/ui/src/ascender.css
+++ b/awx/ui/src/ascender.css
@@ -1,12 +1 @@
-#page-sidebar {
-  line-height: 10px !important;
-}
 
-#page-sidebar .pf-c-nav__link {
-  padding-bottom: 8px !important;
-  padding-top: 8px !important;
-}
-
-body {
-  font-family: "Open SansVariable", sans-serif;
-}
diff --git a/awx/ui/src/components/About/About.js b/awx/ui/src/components/About/About.js
index bf680b11..6882dae7 100644
--- a/awx/ui/src/components/About/About.js
+++ b/awx/ui/src/components/About/About.js
@@ -47,9 +47,8 @@ function About({ version, isOpen, onClose }) {
       onClose={onClose}
       productName={brandName}
       trademark=""
-      brandImageSrc="static/media/AscenderAuto_logo_h_rev_M.png"
+      brandImageSrc="static/media/Ascender_logo.svg"
       brandImageAlt={t`Brand Image`}
-      backgroundImageSrc="static/media/CIQ_grayscale_bkgd.jpg"
     >
       <pre>
         {speechBubble}
diff --git a/awx/ui/src/components/AdHocCommands/AdHocPreviewStep.js b/awx/ui/src/components/AdHocCommands/AdHocPreviewStep.js
index 993dcd0b..745b37bf 100644
--- a/awx/ui/src/components/AdHocCommands/AdHocPreviewStep.js
+++ b/awx/ui/src/components/AdHocCommands/AdHocPreviewStep.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useLingui } from '@lingui/react/macro';
 import { Tooltip } from '@patternfly/react-core';
-import { ExclamationCircleIcon as PFExclamationCircleIcon } from '@patternfly/react-icons';
+import { LucideIconCircleAlert } from '@ctrliq/quantic-react';
 import styled from 'styled-components';
 import { VERBOSITY } from '../VerbositySelectField';
 import { toTitleCase } from '../../util/strings';
@@ -9,7 +9,7 @@ import { VariablesDetail } from '../CodeEditor';
 import { jsonToYaml } from '../../util/yaml';
 import { DetailList, Detail } from '../DetailList';
 
-const ExclamationCircleIcon = styled(PFExclamationCircleIcon)`
+const ExclamationCircleIcon = styled(LucideIconCircleAlert)`
   margin-left: 10px;
   margin-top: -2px;
 `;
@@ -36,7 +36,10 @@ function AdHocPreviewStep({ hasErrors, values }) {
             content={t`See errors on the left`}
             trigger="click mouseenter focus"
           >
-            <ExclamationCircleIcon />
+            <ExclamationCircleIcon
+              size="xs"
+              data-original-icon="ExclamationCircleIcon"
+            />
           </Tooltip>
         </ErrorMessageWrapper>
       )}
@@ -61,10 +64,7 @@ function AdHocPreviewStep({ hasErrors, values }) {
           />
         )}
         {verbosity && (
-          <Detail
-            label={t`Verbosity`}
-            value={VERBOSITY(t)[values.verbosity]}
-          />
+          <Detail label={t`Verbosity`} value={VERBOSITY(t)[values.verbosity]} />
         )}
         {extra_vars && (
           <VariablesDetail
diff --git a/awx/ui/src/components/AlertModal/AlertModal.js b/awx/ui/src/components/AlertModal/AlertModal.js
index d51deb46..a579140a 100644
--- a/awx/ui/src/components/AlertModal/AlertModal.js
+++ b/awx/ui/src/components/AlertModal/AlertModal.js
@@ -2,12 +2,12 @@ import 'styled-components/macro';
 import React from 'react';
 import { Modal, Title } from '@patternfly/react-core';
 import {
-  CheckCircleIcon,
-  ExclamationCircleIcon,
-  ExclamationTriangleIcon,
-  InfoCircleIcon,
-  TimesCircleIcon,
-} from '@patternfly/react-icons';
+  LucideIconCircleCheck,
+  LucideIconCircleAlert,
+  LucideIconTriangleAlert,
+  LucideIconInfo,
+  LucideIconCircleX,
+} from '@ctrliq/quantic-react';
 
 import { useLingui } from '@lingui/react/macro';
 import styled from 'styled-components';
@@ -30,33 +30,38 @@ function AlertModal({
   const { t } = useLingui();
   const variantIcons = {
     danger: (
-      <ExclamationCircleIcon
+      <LucideIconCircleAlert
         size="lg"
         css="color: var(--pf-global--danger-color--100)"
+        data-original-icon="ExclamationCircleIcon"
       />
     ),
     error: (
-      <TimesCircleIcon
+      <LucideIconCircleX
         size="lg"
         css="color: var(--pf-global--danger-color--100)"
+        data-original-icon="TimesCircleIcon"
       />
     ),
     info: (
-      <InfoCircleIcon
+      <LucideIconInfo
         size="lg"
         css="color: var(--pf-global--info-color--100)"
+        data-original-icon="InfoCircleIcon"
       />
     ),
     success: (
-      <CheckCircleIcon
+      <LucideIconCircleCheck
         size="lg"
         css="color: var(--pf-global--success-color--100)"
+        data-original-icon="CheckCircleIcon"
       />
     ),
     warning: (
-      <ExclamationTriangleIcon
+      <LucideIconTriangleAlert
         size="lg"
         css="color: var(--pf-global--warning-color--100)"
+        data-original-icon="ExclamationTriangleIcon"
       />
     ),
   };
diff --git a/awx/ui/src/components/AppContainer/AppContainer.js b/awx/ui/src/components/AppContainer/AppContainer.js
index b1a44d37..00618ac5 100644
--- a/awx/ui/src/components/AppContainer/AppContainer.js
+++ b/awx/ui/src/components/AppContainer/AppContainer.js
@@ -41,6 +41,7 @@ function AppContainer({ navRouteConfig = [], children }) {
   const isReady = !!config.license_info;
   const isSidebarVisible = useAuthorizedPath();
   const [isAboutModalOpen, setIsAboutModalOpen] = useState(false);
+  const [expandedGroup, setExpandedGroup] = useState(null);
 
   const handleAboutModalOpen = () => setIsAboutModalOpen(true);
   const handleAboutModalClose = () => setIsAboutModalOpen(false);
@@ -52,24 +53,8 @@ function AppContainer({ navRouteConfig = [], children }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [config.analytics_status]);
 
-  // Dynamically load ascender.css based on ASCENDER_DISABLE_GRADIENT UI setting from config
-  useEffect(() => {
-    const link = document.createElement('link');
-    link.rel = 'stylesheet';
-    if (
-      config &&
-      typeof config.uiConfig?.ASCENDER_DISABLE_GRADIENT !== 'undefined' &&
-      !config.uiConfig.ASCENDER_DISABLE_GRADIENT
-    ) {
-      link.href = '/static/css/ascender_gradient.css';
-    }
-    document.head.appendChild(link);
-  }, [config]);
-
   const brandName = config?.license_info?.product_name;
-  const alt = brandName
-    ? t`${brandName} logo`
-    : t`brand logo`;
+  const alt = brandName ? t`${brandName} logo` : t`brand logo`;
   const customLogoMenu = config?.uiConfig?.CUSTOM_LOGO_MENU;
 
   const header = (
@@ -122,6 +107,8 @@ function AppContainer({ navRouteConfig = [], children }) {
                 groupId={groupId}
                 groupTitle={groupTitle}
                 routes={routes}
+                isExpanded={expandedGroup === groupId}
+                onExpand={() => setExpandedGroup(groupId)}
               />
             ))}
           </NavList>
diff --git a/awx/ui/src/components/AppContainer/BrandLogo.js b/awx/ui/src/components/AppContainer/BrandLogo.js
index b1b5641d..5a14e335 100644
--- a/awx/ui/src/components/AppContainer/BrandLogo.js
+++ b/awx/ui/src/components/AppContainer/BrandLogo.js
@@ -2,7 +2,6 @@
 // Modifications Copyright (c) 2023 Ctrl IQ, Inc.
 //
 import React from 'react';
-
 import styled from 'styled-components';
 
 const BrandImg = styled.img`
@@ -11,15 +10,15 @@ const BrandImg = styled.img`
   padding-left: 0px;
   margin: 0px 0px 0px 0px;
   max-width: initial;
-  max-height: 60px;
+  max-height: 36px;
   pointer-events: none;
 `;
 
 const BrandLogo = ({ customLogoMenu }) => {
   const src = customLogoMenu
     ? `data:image/jpeg;${customLogoMenu}`
-    : 'static/media/AscenderAuto_logo_h_rev_S_side.png';
-  return <BrandImg src={src} />;
+    : 'static/media/Ascender_logo.svg';
+  return <BrandImg src={src} alt="Ascender" />;
 };
 
 export default BrandLogo;
diff --git a/awx/ui/src/components/AppContainer/NavExpandableGroup.js b/awx/ui/src/components/AppContainer/NavExpandableGroup.js
index a5c16217..dc1eae40 100644
--- a/awx/ui/src/components/AppContainer/NavExpandableGroup.js
+++ b/awx/ui/src/components/AppContainer/NavExpandableGroup.js
@@ -5,7 +5,7 @@ import { NavExpandable, NavItem } from '@patternfly/react-core';
 
 function NavExpandableGroup(props) {
   const history = useHistory();
-  const { groupId, groupTitle, routes } = props;
+  const { groupId, groupTitle, routes, isExpanded, onExpand } = props;
 
   // Extract a list of paths from the route params and store them for later. This creates
   // an array of url paths associated with any NavItem component rendered by this component.
@@ -29,7 +29,8 @@ function NavExpandableGroup(props) {
   return (
     <NavExpandable
       isActive={isActive}
-      isExpanded
+      isExpanded={isExpanded}
+      onExpand={onExpand}
       groupId={groupId}
       ouiaId={groupId}
       title={groupTitle}
@@ -47,6 +48,8 @@ NavExpandableGroup.propTypes = {
   groupId: string.isRequired,
   groupTitle: oneOfType([PropTypes.element, string]).isRequired,
   routes: arrayOf(PropTypes.object).isRequired,
+  isExpanded: PropTypes.bool,
+  onExpand: PropTypes.func,
 };
 
 export default NavExpandableGroup;
diff --git a/awx/ui/src/components/AppContainer/PageHeaderToolbar.js b/awx/ui/src/components/AppContainer/PageHeaderToolbar.js
index 75e4d7fb..34ceff3a 100644
--- a/awx/ui/src/components/AppContainer/PageHeaderToolbar.js
+++ b/awx/ui/src/components/AppContainer/PageHeaderToolbar.js
@@ -19,7 +19,7 @@ import {
   PageHeaderToolsItem,
   Tooltip,
 } from '@patternfly/react-core';
-import { QuestionCircleIcon, UserIcon } from '@patternfly/react-icons';
+import { LucideIconCircleHelp, LucideIconUser } from '@ctrliq/quantic-react';
 import { WorkflowApprovalsAPI } from 'api';
 import useRequest from 'hooks/useRequest';
 /* import getDocsBaseUrl from 'util/getDocsBaseUrl'; */
@@ -33,6 +33,11 @@ const PendingWorkflowApprovals = styled.div`
   margin-right: 10px;
 `;
 
+const UserName = styled.span`
+  margin-left: 10px;
+  font-size: var(--quantic-font-size-body-sm);
+`;
+
 function PageHeaderToolbar({
   isAboutDisabled,
   onAboutClick,
@@ -77,10 +82,7 @@ function PageHeaderToolbar({
   return (
     <PageHeaderTools>
       <PageHeaderToolsGroup>
-        <Tooltip
-          position="bottom"
-          content={t`Pending Workflow Approvals`}
-        >
+        <Tooltip position="bottom" content={t`Pending Workflow Approvals`}>
           <PageHeaderToolsItem>
             <Link to="/workflow_approvals?workflow_approvals.status=pending">
               <PendingWorkflowApprovals>
@@ -110,7 +112,10 @@ function PageHeaderToolbar({
                 aria-label={t`Info`}
                 ouiaId="toolbar-info-dropdown-toggle"
               >
-                <QuestionCircleIcon />
+                <LucideIconCircleHelp
+                  size={16}
+                  data-original-icon="QuestionCircleIcon"
+                />
               </DropdownToggle>
             }
             dropdownItems={[
@@ -150,12 +155,8 @@ function PageHeaderToolbar({
                 onToggle={setIsUserOpen}
                 ouiaId="toolbar-user-dropdown-toggle"
               >
-                <UserIcon />
-                {loggedInUser && (
-                  <span style={{ marginLeft: '10px' }}>
-                    {loggedInUser.username}
-                  </span>
-                )}
+                <LucideIconUser size={16} data-original-icon="UserIcon" />
+                {loggedInUser && <UserName>{loggedInUser.username}</UserName>}
               </DropdownToggle>
             }
             dropdownItems={[
diff --git a/awx/ui/src/components/Background/Background.js b/awx/ui/src/components/Background/Background.js
deleted file mode 100644
index 17eaf953..00000000
--- a/awx/ui/src/components/Background/Background.js
+++ /dev/null
@@ -1,13 +0,0 @@
-//
-// Modifications Copyright (c) 2023 Ctrl IQ, Inc.
-//
-import React from 'react';
-
-import { BackgroundImage } from '@patternfly/react-core';
-
-export default ({ children }) => (
-  <>
-    <BackgroundImage src="/static/media/CIQ_grayscale_bkgd.jpg" />
-    {children}
-  </>
-);
diff --git a/awx/ui/src/components/Background/Background.test.js b/awx/ui/src/components/Background/Background.test.js
deleted file mode 100644
index 4d306f79..00000000
--- a/awx/ui/src/components/Background/Background.test.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-
-import Background from './Background';
-
-describe('Background', () => {
-  test('renders the expected content', () => {
-    const wrapper = mount(
-      <Background>
-        <div id="test" />
-      </Background>
-    );
-    expect(wrapper).toHaveLength(1);
-    expect(wrapper.find('.pf-c-background-image')).toHaveLength(1);
-    expect(wrapper.find('#test')).toHaveLength(1);
-  });
-});
diff --git a/awx/ui/src/components/Background/index.js b/awx/ui/src/components/Background/index.js
deleted file mode 100644
index 5f61d4bc..00000000
--- a/awx/ui/src/components/Background/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Background';
diff --git a/awx/ui/src/components/Card/CardActionsRow.js b/awx/ui/src/components/Card/CardActionsRow.js
index 3652692a..bbeed311 100644
--- a/awx/ui/src/components/Card/CardActionsRow.js
+++ b/awx/ui/src/components/Card/CardActionsRow.js
@@ -3,7 +3,7 @@ import { CardActions } from '@patternfly/react-core';
 import styled from 'styled-components';
 
 const CardActionsWrapper = styled.div`
-  margin-top: 20px;
+  margin-top: var(--quantic-spacing-12);
   --pf-c-card__actions--PaddingLeft: 0;
 `;
 
diff --git a/awx/ui/src/components/CodeEditor/CodeEditor.js b/awx/ui/src/components/CodeEditor/CodeEditor.js
index 5ab95e59..00c9f96f 100644
--- a/awx/ui/src/components/CodeEditor/CodeEditor.js
+++ b/awx/ui/src/components/CodeEditor/CodeEditor.js
@@ -6,7 +6,7 @@ import 'ace-builds/src-noconflict/mode-json';
 import 'ace-builds/src-noconflict/mode-javascript';
 import 'ace-builds/src-noconflict/mode-yaml';
 import 'ace-builds/src-noconflict/mode-django';
-import 'ace-builds/src-noconflict/theme-github';
+import 'ace-builds/src-noconflict/theme-monokai';
 
 import { useLingui } from '@lingui/react/macro';
 
@@ -139,7 +139,7 @@ function CodeEditor({
         <AceEditor
           mode={aceModes[mode] || 'text'}
           className={`pf-c-form-control ${className}`}
-          theme="github"
+          theme="monokai"
           onChange={debounce(onChange, 250)}
           value={value}
           onFocus={onFocus}
diff --git a/awx/ui/src/components/CodeEditor/VariablesDetail.js b/awx/ui/src/components/CodeEditor/VariablesDetail.js
index 93a8ccbd..fbfe9756 100644
--- a/awx/ui/src/components/CodeEditor/VariablesDetail.js
+++ b/awx/ui/src/components/CodeEditor/VariablesDetail.js
@@ -10,7 +10,7 @@ import {
   Button,
   Modal,
 } from '@patternfly/react-core';
-import { ExpandArrowsAltIcon } from '@patternfly/react-icons';
+import { LucideIconExpand } from '@ctrliq/quantic-react';
 import { yamlToJson, jsonToYaml, isJsonObject, isJsonString } from 'util/yaml';
 import { DetailName, DetailValue } from '../DetailList';
 import MultiButtonToggle from '../MultiButtonToggle';
@@ -216,7 +216,7 @@ function ModeToggle({
             onClick={onExpand}
             ouiaId={`${dataCy}-expand`}
           >
-            <ExpandArrowsAltIcon />
+            <LucideIconExpand size="xs" data-original-icon="ExpandArrowsAltIcon" />
           </Button>
         </SplitItem>
       )}
diff --git a/awx/ui/src/components/CodeEditor/VariablesField.js b/awx/ui/src/components/CodeEditor/VariablesField.js
index b9889c8e..fa0605ba 100644
--- a/awx/ui/src/components/CodeEditor/VariablesField.js
+++ b/awx/ui/src/components/CodeEditor/VariablesField.js
@@ -5,7 +5,7 @@ import { useLingui } from '@lingui/react/macro';
 import { useField } from 'formik';
 import styled from 'styled-components';
 import { Split, SplitItem, Button, Modal } from '@patternfly/react-core';
-import { ExpandArrowsAltIcon } from '@patternfly/react-icons';
+import { LucideIconExpand } from '@ctrliq/quantic-react';
 import {
   yamlToJson,
   jsonToYaml,
@@ -272,7 +272,7 @@ function VariablesFieldInternals({
             onClick={onExpand}
             ouiaId={`${id}-expand`}
           >
-            <ExpandArrowsAltIcon />
+            <LucideIconExpand size="xs" data-original-icon="ExpandArrowsAltIcon" />
           </Button>
         )}
       </FieldHeader>
diff --git a/awx/ui/src/components/ContentEmpty/ContentEmpty.js b/awx/ui/src/components/ContentEmpty/ContentEmpty.js
index 048ffea9..c4e657a9 100644
--- a/awx/ui/src/components/ContentEmpty/ContentEmpty.js
+++ b/awx/ui/src/components/ContentEmpty/ContentEmpty.js
@@ -6,18 +6,18 @@ import {
   EmptyStateIcon,
   EmptyStateBody,
 } from '@patternfly/react-core';
-import { CubesIcon } from '@patternfly/react-icons';
+import { LucideIconBox } from '@ctrliq/quantic-react';
 
 const ContentEmpty = ({
   title = '',
   message = '',
-  icon = CubesIcon,
+  icon = LucideIconBox,
   className = '',
 }) => {
   const { t } = useLingui();
   return (
     <EmptyState variant="full" className={className}>
-      <EmptyStateIcon icon={icon} />
+      <EmptyStateIcon size={64} icon={icon} />
       <Title size="lg" headingLevel="h3">
         {title || t`No items found.`}
       </Title>
diff --git a/awx/ui/src/components/ContentError/ContentError.js b/awx/ui/src/components/ContentError/ContentError.js
index de247d15..76d8ffaa 100644
--- a/awx/ui/src/components/ContentError/ContentError.js
+++ b/awx/ui/src/components/ContentError/ContentError.js
@@ -10,7 +10,7 @@ import {
   EmptyStateIcon,
   EmptyStateBody,
 } from '@patternfly/react-core';
-import { ExclamationTriangleIcon } from '@patternfly/react-icons';
+import { LucideIconTriangleAlert } from '@ctrliq/quantic-react';
 import { useSession } from 'contexts/Session';
 import ErrorDetail from '../ErrorDetail';
 
@@ -33,7 +33,7 @@ function ContentError({ error, children, isNotFound }) {
         <Redirect to="/login" />
       ) : (
         <EmptyState variant="full">
-          <EmptyStateIcon icon={ExclamationTriangleIcon} />
+          <EmptyStateIcon icon={LucideIconTriangleAlert} />
           <Title size="lg" headingLevel="h3">
             {is404
               ? t`Not Found`
diff --git a/awx/ui/src/components/CopyButton/CopyButton.js b/awx/ui/src/components/CopyButton/CopyButton.js
index 599aec5b..7f369e03 100644
--- a/awx/ui/src/components/CopyButton/CopyButton.js
+++ b/awx/ui/src/components/CopyButton/CopyButton.js
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { useLingui } from '@lingui/react/macro';
 import PropTypes from 'prop-types';
 import { Button } from '@patternfly/react-core';
-import { CopyIcon } from '@patternfly/react-icons';
+import { LucideIconCopy } from '@ctrliq/quantic-react';
 import useRequest, { useDismissableError } from 'hooks/useRequest';
 import AlertModal from '../AlertModal';
 import ErrorDetail from '../ErrorDetail';
@@ -42,7 +42,7 @@ function CopyButton({
         variant="plain"
         onClick={copyItemToAPI}
       >
-        <CopyIcon />
+        <LucideIconCopy size="xs" data-original-icon="CopyIcon" />
       </Button>
       {error && (
         <AlertModal
diff --git a/awx/ui/src/components/DataListToolbar/DataListToolbar.js b/awx/ui/src/components/DataListToolbar/DataListToolbar.js
index 0055b92c..698947c8 100644
--- a/awx/ui/src/components/DataListToolbar/DataListToolbar.js
+++ b/awx/ui/src/components/DataListToolbar/DataListToolbar.js
@@ -16,10 +16,10 @@ import {
   KebabToggle,
 } from '@patternfly/react-core';
 import {
-  AngleDownIcon,
-  AngleRightIcon,
-  SearchIcon,
-} from '@patternfly/react-icons';
+  LucideIconChevronDown,
+  LucideIconChevronRight,
+  LucideIconSearch as SearchIcon,
+} from '@ctrliq/quantic-react';
 import { SearchColumns, SortColumns, QSConfig, SearchableKeys } from 'types';
 import { KebabifiedProvider } from 'contexts/Kebabified';
 import ExpandCollapse from '../ExpandCollapse';
@@ -113,9 +113,17 @@ function DataListToolbar({
                 variant="plain"
               >
                 {isAllExpanded ? (
-                  <AngleDownIcon aria-label={t`Is expanded`} />
+                  <LucideIconChevronDown
+                    aria-label={t`Is expanded`}
+                    data-original-icon="AngleDownIcon"
+                    size={16}
+                  />
                 ) : (
-                  <AngleRightIcon aria-label={t`Is not expanded`} />
+                  <LucideIconChevronRight
+                    aria-label={t`Is not expanded`}
+                    data-original-icon="AngleRightIcon"
+                    size={16}
+                  />
                 )}
               </Button>
             </ToolbarItem>
@@ -136,7 +144,10 @@ function DataListToolbar({
             </ToolbarItem>
           </ToolbarGroup>
         )}
-        <ToolbarToggleGroup toggleIcon={<SearchIcon />} breakpoint="lg">
+        <ToolbarToggleGroup
+          toggleIcon={<SearchIcon data-original-icon="SearchIcon" size={16} />}
+          breakpoint="lg"
+        >
           <ToolbarItem>
             <Search
               qsConfig={qsConfig}
diff --git a/awx/ui/src/components/DetailList/Detail.js b/awx/ui/src/components/DetailList/Detail.js
index 8f56f4ad..bd89cfdd 100644
--- a/awx/ui/src/components/DetailList/Detail.js
+++ b/awx/ui/src/components/DetailList/Detail.js
@@ -58,7 +58,7 @@ const Detail = ({
   const valueCy = dataCy ? `${dataCy}-value` : null;
 
   return (
-    <>
+    <div>
       <DetailName
         className={className}
         component={TextListItemVariants.dt}
@@ -79,7 +79,7 @@ const Detail = ({
       >
         {value}
       </DetailValue>
-    </>
+    </div>
   );
 };
 Detail.propTypes = {
diff --git a/awx/ui/src/components/DetailList/DetailList.js b/awx/ui/src/components/DetailList/DetailList.js
index dceaa1cb..39a5e1be 100644
--- a/awx/ui/src/components/DetailList/DetailList.js
+++ b/awx/ui/src/components/DetailList/DetailList.js
@@ -11,7 +11,9 @@ const DetailList = ({ children, stacked, ...props }) => (
 export default styled(DetailList)`
   display: grid;
   align-items: start;
-  ${(props) => (props.compact ? `column-gap: 20px;` : `grid-gap: 20px;`)}
+  font-size: var(--quantic-font-size-body-sm);
+  gap: ${(props) =>
+    props.compact ? `var(--quantic-spacing-4)` : `var(--quantic-spacing-8)`};
   ${(props) =>
     props.stacked
       ? `
@@ -19,7 +21,7 @@ export default styled(DetailList)`
   `
       : `
     --column-count: 1;
-    grid-template-columns: repeat(var(--column-count), auto minmax(10em, 1fr));
+    grid-template-columns: repeat(var(--column-count), 1fr);
 
     @media (min-width: 920px) {
       --column-count: 2;
@@ -31,6 +33,6 @@ export default styled(DetailList)`
   `}
 
   & + & {
-    margin-top: 20px;
+    margin-top: var(--quantic-spacing-6);
   }
 `;
diff --git a/awx/ui/src/components/ExecutionEnvironmentDetail/ExecutionEnvironmentDetail.js b/awx/ui/src/components/ExecutionEnvironmentDetail/ExecutionEnvironmentDetail.js
index e13a3572..65e522cd 100644
--- a/awx/ui/src/components/ExecutionEnvironmentDetail/ExecutionEnvironmentDetail.js
+++ b/awx/ui/src/components/ExecutionEnvironmentDetail/ExecutionEnvironmentDetail.js
@@ -5,19 +5,19 @@ import { Trans, useLingui } from '@lingui/react/macro';
 
 import { Popover, Tooltip } from '@patternfly/react-core';
 import styled from 'styled-components';
-import { ExclamationTriangleIcon as PFExclamationTriangleIcon } from '@patternfly/react-icons';
+import { LucideIconTriangleAlert } from '@ctrliq/quantic-react';
 import { ExecutionEnvironment } from 'types';
 import getDocsBaseUrl from 'util/getDocsBaseUrl';
 import { useConfig } from 'contexts/Config';
 import { Detail } from '../DetailList';
 
-const ExclamationTriangleIcon = styled(PFExclamationTriangleIcon)`
+const ExclamationTriangleIcon = styled(LucideIconTriangleAlert)`
   color: var(--pf-global--warning-color--100);
   margin-left: 18px;
   cursor: pointer;
 `;
 
-const ExclamationTrianglePopover = styled(PFExclamationTriangleIcon)`
+const ExclamationTrianglePopover = styled(LucideIconTriangleAlert)`
   color: var(--pf-global--warning-color--100);
   margin-left: 18px;
   cursor: pointer;
@@ -90,7 +90,7 @@ function ExecutionEnvironmentDetail({
                 }
                 position="right"
               >
-                <ExclamationTrianglePopover />
+                <ExclamationTrianglePopover size="xs" data-original-icon="ExclamationTriangleIcon" />
               </Popover>
             </span>
           </>
@@ -115,7 +115,7 @@ function ExecutionEnvironmentDetail({
               <Tooltip
                 content={t`Execution environment is missing or deleted.`}
               >
-                <ExclamationTriangleIcon />
+                <ExclamationTriangleIcon size="xs" data-original-icon="ExclamationTriangleIcon" />
               </Tooltip>
             </span>
           </>
diff --git a/awx/ui/src/components/ExpandCollapse/ExpandCollapse.js b/awx/ui/src/components/ExpandCollapse/ExpandCollapse.js
index 116da6a9..62069026 100644
--- a/awx/ui/src/components/ExpandCollapse/ExpandCollapse.js
+++ b/awx/ui/src/components/ExpandCollapse/ExpandCollapse.js
@@ -6,7 +6,7 @@ import {
   Button as PFButton,
   ToolbarItem as PFToolbarItem,
 } from '@patternfly/react-core';
-import { BarsIcon, EqualsIcon } from '@patternfly/react-icons';
+import { LucideIconMenu, LucideIconEqual } from '@ctrliq/quantic-react';
 import styled from 'styled-components';
 
 const Button = styled(PFButton)`
@@ -43,7 +43,7 @@ function ExpandCollapse({ isCompact, onCompact, onExpand }) {
           onClick={onCompact}
           isActive={isCompact}
         >
-          <BarsIcon />
+          <LucideIconMenu size="xs" data-original-icon="BarsIcon" />
         </Button>
       </ToolbarItem>
       <ToolbarItem>
@@ -54,7 +54,7 @@ function ExpandCollapse({ isCompact, onCompact, onExpand }) {
           onClick={onExpand}
           isActive={!isCompact}
         >
-          <EqualsIcon />
+          <LucideIconEqual size="xs" data-original-icon="EqualsIcon" />
         </Button>
       </ToolbarItem>
     </>
diff --git a/awx/ui/src/components/FormField/PasswordInput.js b/awx/ui/src/components/FormField/PasswordInput.js
index 9ed65298..537b8535 100644
--- a/awx/ui/src/components/FormField/PasswordInput.js
+++ b/awx/ui/src/components/FormField/PasswordInput.js
@@ -9,7 +9,7 @@ import {
   TextInput,
   Tooltip,
 } from '@patternfly/react-core';
-import { EyeIcon, EyeSlashIcon } from '@patternfly/react-icons';
+import { LucideIconEye, LucideIconEyeOff } from '@ctrliq/quantic-react';
 
 function PasswordInput(props) {
   const { t } = useLingui();
@@ -33,11 +33,7 @@ function PasswordInput(props) {
 
   return (
     <>
-      <Tooltip
-        content={
-          inputType === 'password' ? t`Show` : t`Hide`
-        }
-      >
+      <Tooltip content={inputType === 'password' ? t`Show` : t`Hide`}>
         <Button
           ouiaId={`${id}-toggle`}
           variant={ButtonVariant.control}
@@ -45,8 +41,12 @@ function PasswordInput(props) {
           onClick={handlePasswordToggle}
           isDisabled={isDisabled}
         >
-          {inputType === 'password' && <EyeSlashIcon />}
-          {inputType === 'text' && <EyeIcon />}
+          {inputType === 'password' && (
+            <LucideIconEyeOff size={16} data-original-icon="EyeSlashIcon" />
+          )}
+          {inputType === 'text' && (
+            <LucideIconEye size={16} data-original-icon="EyeIcon" />
+          )}
         </Button>
       </Tooltip>
       <TextInput
diff --git a/awx/ui/src/components/FormLayout/FormLayout.js b/awx/ui/src/components/FormLayout/FormLayout.js
index 16bb4712..e9fc8833 100644
--- a/awx/ui/src/components/FormLayout/FormLayout.js
+++ b/awx/ui/src/components/FormLayout/FormLayout.js
@@ -13,8 +13,7 @@ export const FormColumnLayout = styled.div`
 
   ${(props) =>
     props.stacked &&
-    `border-bottom: 1px solid var(--pf-global--BorderColor--100);
-    padding: var(--pf-global--spacer--sm) 0 var(--pf-global--spacer--md) `}
+    `padding: var(--pf-global--spacer--lg) 0 var(--pf-global--spacer--md) `}
 `;
 
 export const FormFullWidthLayout = styled.div`
@@ -34,15 +33,17 @@ export const FormCheckboxLayout = styled.div`
   & > * {
     margin-bottom: 10px;
     margin-right: 30px;
+    align-items: center;
   }
 `;
 
 export const SubFormLayout = styled.div`
   grid-column: 1 / -1;
-  background-color: #f5f5f5;
+  background-color: var(--quantic-bg-secondary);
   margin-right: calc(var(--pf-c-card--child--PaddingRight) * -1);
   margin-left: calc(var(--pf-c-card--child--PaddingLeft) * -1);
-  padding: var(--pf-c-card--child--PaddingRight);
+  padding: var(--quantic-spacing-6);
+  border-radius: var(--quantic-radius-md);
 
   & > .pf-c-title {
     --pf-c-title--m-md--FontWeight: 700;
diff --git a/awx/ui/src/components/JobCancelButton/JobCancelButton.js b/awx/ui/src/components/JobCancelButton/JobCancelButton.js
index 537d29f0..81a83202 100644
--- a/awx/ui/src/components/JobCancelButton/JobCancelButton.js
+++ b/awx/ui/src/components/JobCancelButton/JobCancelButton.js
@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import { useLingui } from '@lingui/react/macro';
-import { MinusCircleIcon } from '@patternfly/react-icons';
+import { LucideIconCircleMinus } from '@ctrliq/quantic-react';
 import { Button, Tooltip } from '@patternfly/react-core';
 import { getJobModel } from 'util/jobs';
 import useRequest, { useDismissableError } from 'hooks/useRequest';
@@ -56,7 +56,10 @@ function JobCancelButton({
               variant="plain"
               style={style}
             >
-              <MinusCircleIcon />
+              <LucideIconCircleMinus
+                size="xs"
+                data-original-icon="MinusCircleIcon"
+              />
             </Button>
           ) : (
             <Button
@@ -102,8 +105,7 @@ function JobCancelButton({
             </Button>,
           ]}
         >
-          {cancelationMessage ??
-            t`Are you sure you want to cancel this job?`}
+          {cancelationMessage ?? t`Are you sure you want to cancel this job?`}
         </AlertModal>
       )}
       {error && !isAlreadyCancelled && (
diff --git a/awx/ui/src/components/JobList/JobListItem.js b/awx/ui/src/components/JobList/JobListItem.js
index 252dc2a7..99e53078 100644
--- a/awx/ui/src/components/JobList/JobListItem.js
+++ b/awx/ui/src/components/JobList/JobListItem.js
@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
 import { useLingui } from '@lingui/react/macro';
 import { Button, Chip } from '@patternfly/react-core';
 import { Tr, Td, ExpandableRowContent } from '@patternfly/react-table';
-import { RocketIcon } from '@patternfly/react-icons';
+import { LucideIconRocket } from '@ctrliq/quantic-react';
 import styled from 'styled-components';
 import { formatDateString } from 'util/dates';
 import { isJobRunning } from 'util/jobs';
@@ -154,7 +154,7 @@ function JobListItem({
                     aria-label={t`Relaunch`}
                     isDisabled={isLaunching}
                   >
-                    <RocketIcon />
+                    <LucideIconRocket size="xs" data-original-icon="RocketIcon" />
                   </Button>
                 )}
               </LaunchButton>
diff --git a/awx/ui/src/components/LaunchButton/ReLaunchDropDown.js b/awx/ui/src/components/LaunchButton/ReLaunchDropDown.js
index a4fa9648..fe20d101 100644
--- a/awx/ui/src/components/LaunchButton/ReLaunchDropDown.js
+++ b/awx/ui/src/components/LaunchButton/ReLaunchDropDown.js
@@ -9,7 +9,7 @@ import {
   DropdownSeparator,
   DropdownDirection,
 } from '@patternfly/react-core';
-import { RocketIcon } from '@patternfly/react-icons';
+import { LucideIconRocket } from '@ctrliq/quantic-react';
 
 function ReLaunchDropDown({
   isPrimary = false,
@@ -102,7 +102,7 @@ function ReLaunchDropDown({
           id={id}
           ouiaId="relaunch-job-toggle"
         >
-          <RocketIcon />
+          <LucideIconRocket size="xs" data-original-icon="RocketIcon" />
         </DropdownToggle>
       }
     />
diff --git a/awx/ui/src/components/LaunchPrompt/steps/PreviewStep.js b/awx/ui/src/components/LaunchPrompt/steps/PreviewStep.js
index b2c94058..063d6b92 100644
--- a/awx/ui/src/components/LaunchPrompt/steps/PreviewStep.js
+++ b/awx/ui/src/components/LaunchPrompt/steps/PreviewStep.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import styled from 'styled-components';
-import { ExclamationCircleIcon as PFExclamationCircleIcon } from '@patternfly/react-icons';
 import { Tooltip } from '@patternfly/react-core';
 import { useLingui } from '@lingui/react/macro';
 import { useFormikContext } from 'formik';
@@ -9,8 +8,9 @@ import yaml from 'js-yaml';
 import mergeExtraVars, { maskPasswords } from 'util/prompt/mergeExtraVars';
 import getSurveyValues from 'util/prompt/getSurveyValues';
 import PromptDetail from '../../PromptDetail';
+import { LucideIconCircleAlert } from '@ctrliq/quantic-react';
 
-const ExclamationCircleIcon = styled(PFExclamationCircleIcon)`
+const ExclamationCircleIcon = styled(LucideIconCircleAlert)`
   margin-left: 10px;
   margin-top: -2px;
 `;
diff --git a/awx/ui/src/components/LaunchPrompt/steps/StepName.js b/awx/ui/src/components/LaunchPrompt/steps/StepName.js
index 5d273847..9d044175 100644
--- a/awx/ui/src/components/LaunchPrompt/steps/StepName.js
+++ b/awx/ui/src/components/LaunchPrompt/steps/StepName.js
@@ -3,14 +3,14 @@ import { useLingui } from '@lingui/react/macro';
 import styled from 'styled-components';
 
 import { Tooltip } from '@patternfly/react-core';
-import { ExclamationCircleIcon as PFExclamationCircleIcon } from '@patternfly/react-icons';
+import { LucideIconCircleAlert } from '@ctrliq/quantic-react';
 
 const AlertText = styled.div`
   color: var(--pf-global--danger-color--200);
   font-weight: var(--pf-global--FontWeight--bold);
 `;
 
-const ExclamationCircleIcon = styled(PFExclamationCircleIcon)`
+const ExclamationCircleIcon = styled(LucideIconCircleAlert)`
   margin-left: 10px;
 `;
 
diff --git a/awx/ui/src/components/Lookup/HostFilterLookup.js b/awx/ui/src/components/Lookup/HostFilterLookup.js
index 22fe9de7..66c376f2 100644
--- a/awx/ui/src/components/Lookup/HostFilterLookup.js
+++ b/awx/ui/src/components/Lookup/HostFilterLookup.js
@@ -4,7 +4,7 @@ import { number, func, bool, string } from 'prop-types';
 
 import styled from 'styled-components';
 import { useLingui } from '@lingui/react/macro';
-import { SearchIcon } from '@patternfly/react-icons';
+import { LucideIconSearch } from '@ctrliq/quantic-react';
 import {
   Alert as PFAlert,
   Button,
@@ -295,7 +295,7 @@ function HostFilterLookup({
         onClick={handleOpenModal}
         variant={ButtonVariant.control}
       >
-        <SearchIcon />
+        <LucideIconSearch data-original-icon="SearchIcon" size={16} />
       </Button>
       <ChipHolder className="pf-c-form-control">
         {searchColumns.map(({ name, key }) => (
@@ -422,9 +422,7 @@ function HostFilterLookup({
             headerRow={
               <HeaderRow qsConfig={QS_CONFIG} isSelectable={false}>
                 <HeaderCell sortKey="name">{t`Name`}</HeaderCell>
-                <HeaderCell sortKey="description">
-                  {t`Description`}
-                </HeaderCell>
+                <HeaderCell sortKey="description">{t`Description`}</HeaderCell>
                 <HeaderCell>{t`Inventory`}</HeaderCell>
               </HeaderRow>
             }
diff --git a/awx/ui/src/components/Lookup/Lookup.js b/awx/ui/src/components/Lookup/Lookup.js
index c09384f9..2af01eff 100644
--- a/awx/ui/src/components/Lookup/Lookup.js
+++ b/awx/ui/src/components/Lookup/Lookup.js
@@ -12,7 +12,7 @@ import {
 } from 'prop-types';
 import { withRouter } from 'react-router-dom';
 import { useField } from 'formik';
-import { SearchIcon } from '@patternfly/react-icons';
+import { LucideIconSearch } from '@ctrliq/quantic-react';
 import {
   Button,
   ButtonVariant,
@@ -148,7 +148,7 @@ function Lookup(props) {
           variant={ButtonVariant.control}
           isDisabled={isLoading || isDisabled}
         >
-          <SearchIcon />
+          <LucideIconSearch data-original-icon="SearchIcon" size={16} />
         </Button>
         {multiple ? (
           <ChipHolder isDisabled={isDisabled} className="pf-c-form-control">
diff --git a/awx/ui/src/components/PaginatedTable/ActionsTd.js b/awx/ui/src/components/PaginatedTable/ActionsTd.js
index 2c7a9ae3..22204862 100644
--- a/awx/ui/src/components/PaginatedTable/ActionsTd.js
+++ b/awx/ui/src/components/PaginatedTable/ActionsTd.js
@@ -26,6 +26,15 @@ export default function ActionsTd({ children, gridColumns, ...props }) {
       css={`
         text-align: right;
         --pf-c-table--cell--Width: ${width}px;
+
+        [role='presentation'] {
+          color: var(--quantic-text-tertiary);
+          opacity: 0.5;
+        }
+
+        &:hover [role='presentation'] {
+          opacity: 1;
+        }
       `}
       {...props}
     >
diff --git a/awx/ui/src/components/PaginatedTable/ToolbarAddButton.js b/awx/ui/src/components/PaginatedTable/ToolbarAddButton.js
index 7de33f03..db028881 100644
--- a/awx/ui/src/components/PaginatedTable/ToolbarAddButton.js
+++ b/awx/ui/src/components/PaginatedTable/ToolbarAddButton.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { string, func } from 'prop-types';
 import { Link } from 'react-router-dom';
 import { Button, DropdownItem, Tooltip } from '@patternfly/react-core';
-import CaretDownIcon from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
+import { LucideIconChevronDown } from '@ctrliq/quantic-react';
 import { useLingui } from '@lingui/react/macro';
 import { useKebabifiedMenu } from 'contexts/Kebabified';
 
@@ -46,7 +46,12 @@ function ToolbarAddButton({
           isDisabled={isDisabled}
         >
           {defaultLabel || t`Add`}
-          {showToggleIndicator && <CaretDownIcon />}
+          {showToggleIndicator && (
+            <LucideIconChevronDown
+              data-original-icon="CaretDownIcon"
+              size={16}
+            />
+          )}
         </Button>
       </Tooltip>
     );
@@ -55,7 +60,9 @@ function ToolbarAddButton({
     <Tooltip content={defaultLabel || t`Add`} position="top">
       <Button ouiaId={ouiaId} onClick={onClick} isDisabled={isDisabled}>
         {defaultLabel || t`Add`}
-        {showToggleIndicator && <CaretDownIcon />}
+        {showToggleIndicator && (
+          <LucideIconChevronDown data-original-icon="CaretDownIcon" size={16} />
+        )}
       </Button>
     </Tooltip>
   );
diff --git a/awx/ui/src/components/Popover/Popover.js b/awx/ui/src/components/Popover/Popover.js
index 4ed98142..4449db81 100644
--- a/awx/ui/src/components/Popover/Popover.js
+++ b/awx/ui/src/components/Popover/Popover.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { node, string } from 'prop-types';
 import { useLingui } from '@lingui/react/macro';
 import { Popover as PFPopover } from '@patternfly/react-core';
-import { HelpIcon } from '@patternfly/react-icons';
+import { LucideIconCircleHelp } from '@ctrliq/quantic-react';
 import styled from 'styled-components';
 
 const PopoverButton = styled.button`
@@ -35,7 +35,7 @@ function Popover({ ariaLabel, content, header, id, maxWidth, ...rest }) {
         onClick={(e) => e.preventDefault()}
         type="button"
       >
-        <HelpIcon noVerticalAlign />
+        <LucideIconCircleHelp data-original-icon="HelpIcon" size={16} />
       </PopoverButton>
     </PFPopover>
   );
diff --git a/awx/ui/src/components/Schedule/Schedule.js b/awx/ui/src/components/Schedule/Schedule.js
index 47796b25..c85cc7a4 100644
--- a/awx/ui/src/components/Schedule/Schedule.js
+++ b/awx/ui/src/components/Schedule/Schedule.js
@@ -9,7 +9,7 @@ import {
   useLocation,
   useParams,
 } from 'react-router-dom';
-import { CaretLeftIcon } from '@patternfly/react-icons';
+import { LucideIconChevronLeft } from '@ctrliq/quantic-react';
 import { SchedulesAPI } from 'api';
 import useRequest from 'hooks/useRequest';
 import RoutedTabs from '../RoutedTabs';
@@ -61,7 +61,7 @@ function Schedule({
     {
       name: (
         <>
-          <CaretLeftIcon />
+          <LucideIconChevronLeft />
           {t`Back to Schedules`}
         </>
       ),
@@ -81,9 +81,7 @@ function Schedule({
         {error.response && error.response.status === 404 && (
           <span>
             {t`Schedule not found.`}{' '}
-            <Link to={`${pathRoot}schedules`}>
-              {t`View Schedules`}
-            </Link>
+            <Link to={`${pathRoot}schedules`}>{t`View Schedules`}</Link>
           </span>
         )}
       </ContentError>
diff --git a/awx/ui/src/components/Schedule/ScheduleList/ScheduleListItem.js b/awx/ui/src/components/Schedule/ScheduleList/ScheduleListItem.js
index cdca17b9..245bbc57 100644
--- a/awx/ui/src/components/Schedule/ScheduleList/ScheduleListItem.js
+++ b/awx/ui/src/components/Schedule/ScheduleList/ScheduleListItem.js
@@ -7,18 +7,15 @@ import { useLingui } from '@lingui/react/macro';
 import { Link } from 'react-router-dom';
 import { Button, Tooltip } from '@patternfly/react-core';
 import { Tr, Td } from '@patternfly/react-table';
-import {
-  PencilAltIcon,
-  ExclamationTriangleIcon as PFExclamationTriangleIcon,
-} from '@patternfly/react-icons';
 import styled from 'styled-components';
 import { Schedule } from 'types';
 import { formatDateString } from 'util/dates';
 import { DetailList, Detail } from '../../DetailList';
 import { ActionsTd, ActionItem, TdBreakWord } from '../../PaginatedTable';
 import { ScheduleToggle } from '..';
+import { LucideIconPencil, LucideIconTriangleAlert } from '@ctrliq/quantic-react';
 
-const ExclamationTriangleIcon = styled(PFExclamationTriangleIcon)`
+const ExclamationTriangleIcon = styled(LucideIconTriangleAlert)`
   color: #c9190b;
   margin-left: 20px;
 `;
@@ -97,7 +94,7 @@ function ScheduleListItem({
               )}
               position="right"
             >
-              <ExclamationTriangleIcon />
+              <ExclamationTriangleIcon data-original-icon="ExclamationTriangleIcon" />
             </Tooltip>
           </span>
         )}
@@ -141,7 +138,7 @@ function ScheduleListItem({
             component={Link}
             to={`${scheduleBaseUrl}/edit`}
           >
-            <PencilAltIcon />
+            <LucideIconPencil data-original-icon="PencilAltIcon" size="xs" />
           </Button>
         </ActionItem>
       </ActionsTd>
diff --git a/awx/ui/src/components/ScreenHeader/ScreenHeader.js b/awx/ui/src/components/ScreenHeader/ScreenHeader.js
index a4437ebe..c820acad 100644
--- a/awx/ui/src/components/ScreenHeader/ScreenHeader.js
+++ b/awx/ui/src/components/ScreenHeader/ScreenHeader.js
@@ -12,8 +12,8 @@ import {
   Title,
   Tooltip,
 } from '@patternfly/react-core';
-import { HistoryIcon } from '@patternfly/react-icons';
 import { Link, Route, useRouteMatch, useLocation } from 'react-router-dom';
+import { LucideIconHistory } from '@ctrliq/quantic-react';
 
 const ScreenHeader = ({ breadcrumbConfig, streamType }) => {
   const { light } = PageSectionVariants;
@@ -72,7 +72,7 @@ const ScreenHeader = ({ breadcrumbConfig, streamType }) => {
                   streamType ? `?type=${streamType}` : ''
                 }`}
               >
-                <HistoryIcon />
+                <LucideIconHistory />
               </Button>
             </Tooltip>
           </div>
diff --git a/awx/ui/src/components/Search/AdvancedSearch.js b/awx/ui/src/components/Search/AdvancedSearch.js
index 79c454b4..3916061d 100644
--- a/awx/ui/src/components/Search/AdvancedSearch.js
+++ b/awx/ui/src/components/Search/AdvancedSearch.js
@@ -14,7 +14,7 @@ import {
   TextInput,
   Tooltip,
 } from '@patternfly/react-core';
-import { SearchIcon, QuestionCircleIcon } from '@patternfly/react-icons';
+import { LucideIconSearch, LucideIconCircleHelp } from '@ctrliq/quantic-react';
 import styled from 'styled-components';
 import { useLocation } from 'react-router-dom';
 import { useConfig } from 'contexts/Config';
@@ -25,10 +25,11 @@ import LookupTypeInput from './LookupTypeInput';
 
 const AdvancedGroup = styled.div`
   display: flex;
+  gap: var(--quantic-spacing-2);
 
   @media (max-width: 991px) {
     display: grid;
-    grid-gap: var(--pf-c-toolbar__expandable-content--m-expanded--GridRowGap);
+    grid-gap: var(--quantic-spacing-2);
   }
 
   & .pf-c-select {
@@ -211,9 +212,7 @@ function AdvancedSearch({
             type="search"
             aria-label={t`Advanced search value input`}
             isDisabled={!keySelection || isTextInputDisabled}
-            value={
-              (!keySelection && t`First, select a key`) || searchValue
-            }
+            value={(!keySelection && t`First, select a key`) || searchValue}
             onChange={setSearchValue}
             onKeyDown={handleAdvancedTextKeyDown}
           />
@@ -227,9 +226,7 @@ function AdvancedSearch({
         type="search"
         aria-label={t`Advanced search value input`}
         isDisabled={!keySelection}
-        value={
-          (!keySelection && t`First, select a key`) || searchValue
-        }
+        value={(!keySelection && t`First, select a key`) || searchValue}
         onChange={setSearchValue}
         onKeyDown={handleAdvancedTextKeyDown}
         placeholder={placeholderText}
@@ -289,10 +286,7 @@ function AdvancedSearch({
             : []),
           ...(relatedKeys.length
             ? [
-                <SelectGroup
-                  key="related keys"
-                  label={t`Related Keys`}
-                >
+                <SelectGroup key="related keys" label={t`Related Keys`}>
                   {relatedKeys.map((rKey) => (
                     <SelectOption
                       value={rKey}
@@ -319,14 +313,11 @@ function AdvancedSearch({
             aria-label={t`Search submit button`}
             onClick={handleAdvancedSearch}
           >
-            <SearchIcon />
+            <LucideIconSearch data-original-icon="SearchIcon" size={16} />
           </Button>
         </div>
       </InputGroup>
-      <Tooltip
-        content={t`Advanced search documentation`}
-        position="bottom"
-      >
+      <Tooltip content={t`Advanced search documentation`} position="bottom">
         <Button
           ouiaId="search-docs-button"
           component="a"
@@ -335,7 +326,10 @@ function AdvancedSearch({
           href={`${getDocsBaseUrl(config)}/html/userguide/search_sort.html`}
           rel="noopener noreferrer"
         >
-          <QuestionCircleIcon />
+          <LucideIconCircleHelp
+            data-original-icon="QuestionCircleIcon"
+            size={16}
+          />
         </Button>
       </Tooltip>
     </AdvancedGroup>
diff --git a/awx/ui/src/components/Search/Search.js b/awx/ui/src/components/Search/Search.js
index 6ead59c4..567b7c35 100644
--- a/awx/ui/src/components/Search/Search.js
+++ b/awx/ui/src/components/Search/Search.js
@@ -16,7 +16,7 @@ import {
   ToolbarItem,
   ToolbarFilter,
 } from '@patternfly/react-core';
-import { SearchIcon } from '@patternfly/react-icons';
+import { LucideIconSearch as SearchIcon } from '@ctrliq/quantic-react';
 import styled from 'styled-components';
 import { parseQueryString } from 'util/qs';
 import { QSConfig, SearchColumns, SearchableKeys } from 'types';
@@ -252,17 +252,17 @@ function Search({
                   onKeyDown={handleTextKeyDown}
                   isDisabled={isDisabled}
                 />
-                <div css={!searchValue && `cursor:not-allowed`}>
-                  <Button
-                    ouiaId="search-submit-button"
-                    variant={ButtonVariant.control}
-                    isDisabled={!searchValue || isDisabled}
-                    aria-label={t`Search submit button`}
-                    onClick={handleSearch}
-                  >
-                    <SearchIcon />
-                  </Button>
-                </div>
+
+                <Button
+                  ouiaId="search-submit-button"
+                  variant={ButtonVariant.control}
+                  isDisabled={!searchValue || isDisabled}
+                  aria-label={t`Search submit button`}
+                  css={!searchValue && `cursor:not-allowed`}
+                  onClick={handleSearch}
+                >
+                  <SearchIcon data-original-icon="SearchIcon" size={16} />
+                </Button>
               </InputGroup>
             )}
         </ToolbarFilter>
diff --git a/awx/ui/src/components/SelectedList/DraggableSelectedList.js b/awx/ui/src/components/SelectedList/DraggableSelectedList.js
index 65d37aac..5c5a3f62 100644
--- a/awx/ui/src/components/SelectedList/DraggableSelectedList.js
+++ b/awx/ui/src/components/SelectedList/DraggableSelectedList.js
@@ -11,7 +11,7 @@ import {
   DataListDragButton,
   DataListItemCells,
 } from '@patternfly/react-core';
-import { TimesIcon } from '@patternfly/react-icons';
+import { LucideIconX } from '@ctrliq/quantic-react';
 import styled from 'styled-components';
 import { useLingui } from '@lingui/react/macro';
 
@@ -99,10 +99,7 @@ function DraggableSelectedList({ selected, onRemove, onRowDrag }) {
                     </DataListCell>,
                   ]}
                 />
-                <RemoveActionSection
-                  aria-label={t`Actions`}
-                  id={rowPosition}
-                >
+                <RemoveActionSection aria-label={t`Actions`} id={rowPosition}>
                   <Button
                     onClick={() => removeItem(label)}
                     variant="plain"
@@ -110,7 +107,7 @@ function DraggableSelectedList({ selected, onRemove, onRowDrag }) {
                     ouiaId={`draggable-list-remove-${label}`}
                     isDisabled={isDragging}
                   >
-                    <TimesIcon />
+                    <LucideIconX data-original-icon="TimesIcon" size={16} />
                   </Button>
                 </RemoveActionSection>
               </DataListItemRow>
diff --git a/awx/ui/src/components/Sort/Sort.js b/awx/ui/src/components/Sort/Sort.js
index 3b841ff1..655c98ab 100644
--- a/awx/ui/src/components/Sort/Sort.js
+++ b/awx/ui/src/components/Sort/Sort.js
@@ -13,16 +13,11 @@ import {
   DropdownItem,
   InputGroup,
 } from '@patternfly/react-core';
-import {
-  SortAlphaDownIcon,
-  SortAlphaDownAltIcon,
-  SortNumericDownIcon,
-  SortNumericDownAltIcon,
-} from '@patternfly/react-icons';
-
 import styled from 'styled-components';
 import { parseQueryString } from 'util/qs';
 import { SortColumns, QSConfig } from 'types';
+import { LucideIconArrowDown10, LucideIconArrowDownAZ } from '@ctrliq/quantic-react';
+
 
 const NoOptionDropdown = styled.div`
   align-self: stretch;
diff --git a/awx/ui/src/components/StatusIcon/icons.js b/awx/ui/src/components/StatusIcon/icons.js
index 74b50a31..4fd46cd7 100644
--- a/awx/ui/src/components/StatusIcon/icons.js
+++ b/awx/ui/src/components/StatusIcon/icons.js
@@ -1,14 +1,14 @@
 import styled, { keyframes } from 'styled-components';
 import {
-  CheckCircleIcon,
-  ExclamationCircleIcon,
-  SyncAltIcon,
-  ExclamationTriangleIcon,
-  ClockIcon,
-  MinusCircleIcon,
-  InfoCircleIcon,
-  PlusCircleIcon,
-} from '@patternfly/react-icons';
+  LucideIconCircleAlert,
+  LucideIconCircleCheck,
+  LucideIconClock,
+  LucideIconInfo,
+  LucideIconCircleMinus,
+  LucideIconCirclePlus,
+  LucideIconRefreshCw,
+  LucideIconTriangleAlert,
+} from '@ctrliq/quantic-react';
 
 const Spin = keyframes`
   from {
@@ -19,35 +19,35 @@ const Spin = keyframes`
   }
 `;
 
-const RunningIcon = styled(SyncAltIcon)`
+const RunningIcon = styled(LucideIconRefreshCw)`
   animation: ${Spin} 1.75s linear infinite;
 `;
 RunningIcon.displayName = 'RunningIcon';
 
 const icons = {
-  approved: CheckCircleIcon,
-  denied: InfoCircleIcon,
-  success: CheckCircleIcon,
-  healthy: CheckCircleIcon,
-  successful: CheckCircleIcon,
-  ok: CheckCircleIcon,
-  failed: ExclamationCircleIcon,
-  error: ExclamationCircleIcon,
-  unreachable: ExclamationCircleIcon,
+  approved: LucideIconCircleCheck,
+  denied: LucideIconInfo,
+  success: LucideIconCircleCheck,
+  healthy: LucideIconCircleCheck,
+  successful: LucideIconCircleCheck,
+  ok: LucideIconCircleCheck,
+  failed: LucideIconCircleAlert,
+  error: LucideIconCircleAlert,
+  unreachable: LucideIconCircleAlert,
   running: RunningIcon,
-  pending: ClockIcon,
-  waiting: ClockIcon,
-  disabled: MinusCircleIcon,
-  skipped: MinusCircleIcon,
-  canceled: ExclamationTriangleIcon,
-  changed: ExclamationTriangleIcon,
+  pending: LucideIconClock,
+  waiting: LucideIconClock,
+  disabled: LucideIconCircleMinus,
+  skipped: LucideIconCircleMinus,
+  canceled: LucideIconTriangleAlert,
+  changed: LucideIconTriangleAlert,
   /* Instance statuses */
-  ready: CheckCircleIcon,
-  installed: ClockIcon,
-  provisioning: PlusCircleIcon,
-  deprovisioning: MinusCircleIcon,
-  unavailable: ExclamationCircleIcon,
-  'provision-fail': ExclamationCircleIcon,
-  'deprovision-fail': ExclamationCircleIcon,
+  ready: LucideIconCircleCheck,
+  installed: LucideIconClock,
+  provisioning: LucideIconCirclePlus,
+  deprovisioning: LucideIconCircleMinus,
+  unavailable: LucideIconCircleAlert,
+  'provision-fail': LucideIconCircleAlert,
+  'deprovision-fail': LucideIconCircleAlert,
 };
 export default icons;
diff --git a/awx/ui/src/components/StatusLabel/StatusLabel.js b/awx/ui/src/components/StatusLabel/StatusLabel.js
index 59b0883e..0db36a29 100644
--- a/awx/ui/src/components/StatusLabel/StatusLabel.js
+++ b/awx/ui/src/components/StatusLabel/StatusLabel.js
@@ -68,7 +68,11 @@ export default function StatusLabel({ status, tooltipContent = '', children }) {
   const Icon = icons[status];
 
   const renderLabel = () => (
-    <Label variant="outline" color={color} icon={Icon ? <Icon /> : null}>
+    <Label
+      variant="outline"
+      color={color}
+      icon={Icon ? <Icon size="xs" /> : null}
+    >
       {children || label}
     </Label>
   );
diff --git a/awx/ui/src/components/TemplateList/TemplateListItem.js b/awx/ui/src/components/TemplateList/TemplateListItem.js
index 186ac47b..85223a63 100644
--- a/awx/ui/src/components/TemplateList/TemplateListItem.js
+++ b/awx/ui/src/components/TemplateList/TemplateListItem.js
@@ -9,11 +9,12 @@ import { Button, Popover, Tooltip, Chip } from '@patternfly/react-core';
 import { Tr, Td, ExpandableRowContent } from '@patternfly/react-table';
 import { Trans, useLingui } from '@lingui/react/macro';
 import {
-  ExclamationTriangleIcon,
-  PencilAltIcon,
-  ProjectDiagramIcon,
-  RocketIcon,
-} from '@patternfly/react-icons';
+  LucideIconCircleAlert,
+  LucideIconTriangleAlert,
+  LucideIconPencil,
+  LucideIconNetwork,
+  LucideIconRocket,
+} from '@ctrliq/quantic-react';
 import styled from 'styled-components';
 import { timeOfDay, formatDateString } from 'util/dates';
 import { JobTemplatesAPI, WorkflowJobTemplatesAPI } from 'api';
@@ -29,13 +30,13 @@ import { LaunchButton } from '../LaunchButton';
 import Sparkline from '../Sparkline';
 import CopyButton from '../CopyButton';
 
-const ExclamationTriangleIconWarning = styled(ExclamationTriangleIcon)`
+const StyledTriangleAlert = styled(LucideIconCircleAlert)`
   color: var(--pf-global--warning-color--100);
   margin-left: 18px;
   cursor: pointer;
 `;
 
-ExclamationTriangleIconWarning.displayName = 'ExclamationTriangleIconWarning';
+StyledTriangleAlert.displayName = 'StyledTriangleAlert';
 
 function TemplateListItem({
   isExpanded,
@@ -154,7 +155,11 @@ function TemplateListItem({
                 content={t`Resources are missing from this template.`}
                 position="right"
               >
-                <ExclamationTriangleIcon css="color: #c9190b; margin-left: 20px;" />
+                <LucideIconTriangleAlert
+                  css="color: #c9190b; margin-left: 20px;"
+                  data-original-icon="ExclamationTriangleIcon"
+                  size={16}
+                />
               </Tooltip>
             </span>
           )}
@@ -162,9 +167,7 @@ function TemplateListItem({
             <span>
               <Popover
                 className="missing-execution-environment"
-                headerContent={
-                  <div>{t`Execution Environment Missing`}</div>
-                }
+                headerContent={<div>{t`Execution Environment Missing`}</div>}
                 bodyContent={
                   <div>
                     <Trans>
@@ -183,7 +186,10 @@ function TemplateListItem({
                 }
                 position="right"
               >
-                <ExclamationTriangleIconWarning />
+                <StyledTriangleAlert
+                  data-original-icon="ExclamationTriangleIcon"
+                  size={16}
+                />
               </Popover>
             </span>
           )}
@@ -209,7 +215,10 @@ function TemplateListItem({
               component={Link}
               to={`/templates/workflow_job_template/${template.id}/visualizer`}
             >
-              <ProjectDiagramIcon />
+              <LucideIconNetwork
+                data-original-icon="ProjectDiagramIcon"
+                size={16}
+              />
             </Button>
           </ActionItem>
           <ActionItem
@@ -226,7 +235,7 @@ function TemplateListItem({
                   variant="plain"
                   onClick={handleLaunch}
                 >
-                  <RocketIcon />
+                  <LucideIconRocket data-original-icon="RocketIcon" size={16} />
                 </Button>
               )}
             </LaunchButton>
@@ -244,7 +253,7 @@ function TemplateListItem({
               component={Link}
               to={`/templates/${template.type}/${template.id}/edit`}
             >
-              <PencilAltIcon />
+              <LucideIconPencil data-original-icon="PencilAltIcon" size="sm" />
             </Button>
           </ActionItem>
           <ActionItem
diff --git a/awx/ui/src/components/Workflow/WorkflowLegend.js b/awx/ui/src/components/Workflow/WorkflowLegend.js
index 49e60eba..a804944b 100644
--- a/awx/ui/src/components/Workflow/WorkflowLegend.js
+++ b/awx/ui/src/components/Workflow/WorkflowLegend.js
@@ -3,10 +3,10 @@ import React, { useContext } from 'react';
 import { useLingui } from '@lingui/react/macro';
 import styled from 'styled-components';
 import {
-  ExclamationTriangleIcon,
-  PauseIcon,
-  TimesIcon,
-} from '@patternfly/react-icons';
+  LucideIconCircleAlert,
+  LucideIconPause,
+  LucideIconX,
+} from '@ctrliq/quantic-react';
 import { WorkflowDispatchContext } from 'contexts/Workflow';
 
 const Wrapper = styled.div`
@@ -45,7 +45,7 @@ const NodeTypeLetter = styled.div`
   width: 20px;
 `;
 
-const StyledExclamationTriangleIcon = styled(ExclamationTriangleIcon)`
+const StyledTriangleAlert = styled(LucideIconCircleAlert)`
   color: #f0ad4d;
   height: 20px;
   margin-right: 10px;
@@ -70,7 +70,7 @@ const AlwaysLink = styled(Link)`
   background-color: #337ab7;
 `;
 
-const Close = styled(TimesIcon)`
+const Close = styled(LucideIconX)`
   cursor: pointer;
   position: absolute;
   right: 10px;
@@ -84,7 +84,10 @@ function WorkflowLegend() {
     <Wrapper>
       <Header>
         <b>{t`Legend`}</b>
-        <Close onClick={() => dispatch({ type: 'TOGGLE_LEGEND' })} />
+        <Close
+          onClick={() => dispatch({ type: 'TOGGLE_LEGEND' })}
+          data-original-icon="TimesIcon"
+        />
       </Header>
       <Legend>
         <li>
@@ -109,12 +112,12 @@ function WorkflowLegend() {
         </li>
         <li>
           <NodeTypeLetter>
-            <PauseIcon />
+            <LucideIconPause data-original-icon="PauseIcon" size={14} />
           </NodeTypeLetter>
           <span>{t`Approval`}</span>
         </li>
         <li>
-          <StyledExclamationTriangleIcon />
+          <StyledTriangleAlert data-original-icon="ExclamationTriangleIcon" />
           <span>{t`Warning`}</span>
         </li>
         <li>
diff --git a/awx/ui/src/components/Workflow/WorkflowNodeHelp.js b/awx/ui/src/components/Workflow/WorkflowNodeHelp.js
index bec6c30c..1366643f 100644
--- a/awx/ui/src/components/Workflow/WorkflowNodeHelp.js
+++ b/awx/ui/src/components/Workflow/WorkflowNodeHelp.js
@@ -2,10 +2,11 @@ import 'styled-components/macro';
 import React from 'react';
 import { Trans, useLingui } from '@lingui/react/macro';
 import styled from 'styled-components';
-import { ExclamationTriangleIcon } from '@patternfly/react-icons';
 import { shape } from 'prop-types';
 import { secondsToHHMMSS } from 'util/dates';
 import { stringIsUUID } from 'util/strings';
+import { LucideIconTriangleAlert } from '@ctrliq/quantic-react';
+
 
 const GridDL = styled.dl`
   column-gap: 15px;
@@ -24,7 +25,7 @@ const ResourceDeleted = styled.p`
   margin-bottom: ${(props) => (props.job ? '10px' : '0px')};
 `;
 
-const StyledExclamationTriangleIcon = styled(ExclamationTriangleIcon)`
+const StyledExclamationTriangleIcon = styled(LucideIconTriangleAlert)`
   color: #f0ad4d;
   height: 20px;
   margin-right: 10px;
diff --git a/awx/ui/src/components/Workflow/WorkflowNodeTypeLetter.js b/awx/ui/src/components/Workflow/WorkflowNodeTypeLetter.js
index b6a880e7..f3880be2 100644
--- a/awx/ui/src/components/Workflow/WorkflowNodeTypeLetter.js
+++ b/awx/ui/src/components/Workflow/WorkflowNodeTypeLetter.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { shape } from 'prop-types';
-import { PauseIcon } from '@patternfly/react-icons';
+import { LucideIconPause } from '@ctrliq/quantic-react';
 
 const NodeTypeLetter = styled.div`
   background-color: #393f43;
@@ -14,7 +14,7 @@ const NodeTypeLetter = styled.div`
   width: 20px;
 `;
 
-const CenteredPauseIcon = styled(PauseIcon)`
+const CenteredPauseIcon = styled(LucideIconPause)`
   vertical-align: middle !important;
 `;
 
@@ -63,7 +63,7 @@ function WorkflowNodeTypeLetter({ node }) {
         break;
       case 'workflow_approval_template':
       case 'workflow_approval':
-        nodeTypeLetter = <CenteredPauseIcon />;
+        nodeTypeLetter = <CenteredPauseIcon size="xs" data-original-icon="PauseIcon" />;
         break;
       default:
         nodeTypeLetter = '';
diff --git a/awx/ui/src/components/Workflow/WorkflowStartNode.js b/awx/ui/src/components/Workflow/WorkflowStartNode.js
index 2b8c4b98..289527cc 100644
--- a/awx/ui/src/components/Workflow/WorkflowStartNode.js
+++ b/awx/ui/src/components/Workflow/WorkflowStartNode.js
@@ -2,7 +2,7 @@ import React, { useContext, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { useLingui } from '@lingui/react/macro';
 import { bool, func } from 'prop-types';
-import { PlusIcon } from '@patternfly/react-icons';
+import { LucideIconPlus } from '@ctrliq/quantic-react';
 import {
   WorkflowDispatchContext,
   WorkflowStateContext,
@@ -74,7 +74,7 @@ function WorkflowStartNode({ onUpdateHelpText, showActionTooltip }) {
                 dispatch({ type: 'START_ADD_NODE', sourceNodeId: 1 });
               }}
             >
-              <PlusIcon />
+              <LucideIconPlus data-original-icon="PlusIcon" size={16} />
             </WorkflowActionTooltipItem>,
           ]}
           pointX={startNodeRef.current.offsetWidth}
diff --git a/awx/ui/src/components/Workflow/WorkflowTools.js b/awx/ui/src/components/Workflow/WorkflowTools.js
index 2b466a08..fa398290 100644
--- a/awx/ui/src/components/Workflow/WorkflowTools.js
+++ b/awx/ui/src/components/Workflow/WorkflowTools.js
@@ -5,16 +5,16 @@ import styled from 'styled-components';
 import { func, number } from 'prop-types';
 import { Button, Tooltip } from '@patternfly/react-core';
 import {
-  CaretDownIcon,
-  CaretLeftIcon,
-  CaretRightIcon,
-  CaretUpIcon,
-  DesktopIcon,
-  HomeIcon,
-  MinusIcon,
-  PlusIcon,
-  TimesIcon,
-} from '@patternfly/react-icons';
+  LucideIconChevronDown,
+  LucideIconChevronLeft,
+  LucideIconChevronRight,
+  LucideIconChevronUp,
+  LucideIconMonitor,
+  LucideIconHouse,
+  LucideIconMinus,
+  LucideIconPlus,
+  LucideIconX,
+} from '@ctrliq/quantic-react';
 import { WorkflowDispatchContext } from 'contexts/Workflow';
 
 const Wrapper = styled.div`
@@ -45,7 +45,7 @@ const Tools = styled.div`
   padding: 20px;
 `;
 
-const Close = styled(TimesIcon)`
+const Close = styled(LucideIconX)`
   cursor: pointer;
   position: absolute;
   right: 10px;
@@ -81,7 +81,10 @@ function WorkflowTools({
     <Wrapper>
       <Header>
         <b>{t`Tools`}</b>
-        <Close onClick={() => dispatch({ type: 'TOGGLE_TOOLS' })} />
+        <Close
+          onClick={() => dispatch({ type: 'TOGGLE_TOOLS' })}
+          data-original-icon="TimesIcon"
+        />
       </Header>
       <Tools>
         <Tooltip
@@ -94,7 +97,7 @@ function WorkflowTools({
             css="margin-right: 30px;"
             onClick={() => onFitGraph()}
           >
-            <DesktopIcon />
+            <LucideIconMonitor data-original-icon="DesktopIcon" size={16} />
           </Button>
         </Tooltip>
         <Tooltip content={t`Zoom Out`} position="bottom">
@@ -104,7 +107,7 @@ function WorkflowTools({
             css="margin-right: 10px;"
             onClick={() => zoomOut()}
           >
-            <MinusIcon />
+            <LucideIconMinus data-original-icon="MinusIcon" size={16} />
           </Button>
         </Tooltip>
         <input
@@ -125,7 +128,7 @@ function WorkflowTools({
             css="margin: 0px 25px 0px 10px;"
             onClick={() => zoomIn()}
           >
-            <PlusIcon />
+            <LucideIconPlus data-original-icon="PlusIcon" size={16} />
           </Button>
         </Tooltip>
         <Pan>
@@ -136,7 +139,10 @@ function WorkflowTools({
               css="margin-right: 10px;"
               onClick={() => onPan('left')}
             >
-              <CaretLeftIcon />
+              <LucideIconChevronLeft
+                data-original-icon="CaretLeftIcon"
+                size={16}
+              />
             </Button>
           </Tooltip>
           <PanCenter>
@@ -147,7 +153,10 @@ function WorkflowTools({
                 css="margin-bottom: 10px;"
                 onClick={() => onPan('up')}
               >
-                <CaretUpIcon />
+                <LucideIconChevronUp
+                  data-original-icon="CaretUpIcon"
+                  size={16}
+                />
               </Button>
             </Tooltip>
             <Tooltip
@@ -159,7 +168,7 @@ function WorkflowTools({
                 variant="tertiary"
                 onClick={() => onPanToMiddle()}
               >
-                <HomeIcon />
+                <LucideIconHouse data-original-icon="HomeIcon" size={16} />
               </Button>
             </Tooltip>
             <Tooltip content={t`Pan Down`} position="bottom">
@@ -169,7 +178,10 @@ function WorkflowTools({
                 css="margin-top: 10px;"
                 onClick={() => onPan('down')}
               >
-                <CaretDownIcon />
+                <LucideIconChevronDown
+                  data-original-icon="CaretDownIcon"
+                  size={16}
+                />
               </Button>
             </Tooltip>
           </PanCenter>
@@ -180,7 +192,10 @@ function WorkflowTools({
               css="margin-left: 10px;"
               onClick={() => onPan('right')}
             >
-              <CaretRightIcon />
+              <LucideIconChevronRight
+                data-original-icon="CaretRightIcon"
+                size={16}
+              />
             </Button>
           </Tooltip>
         </Pan>
diff --git a/awx/ui/src/index.js b/awx/ui/src/index.js
index 11e40b44..29e8f0a4 100644
--- a/awx/ui/src/index.js
+++ b/awx/ui/src/index.js
@@ -5,11 +5,22 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './setupCSP';
 import '@patternfly/react-core/dist/styles/base.css';
+import './patternfly-overrides.css';
 import './border.css';
-import './ascender.css';
+import '@ctrliq/quantic-tokens/dark-mode.css';
+import { inter, satoshi } from '@ctrliq/quantic-fonts';
 
 import App from './App';
 
+satoshi.inject({
+  weights: [300, 400, 500, 600],
+  styles: ['normal', 'italic'],
+});
+inter.inject({
+  weights: [400, 500, 600],
+  styles: ['normal', 'italic'],
+});
+
 ReactDOM.render(
   <React.StrictMode>
     <App />
diff --git a/awx/ui/src/patternfly-overrides.css b/awx/ui/src/patternfly-overrides.css
new file mode 100644
index 00000000..8ce61e63
--- /dev/null
+++ b/awx/ui/src/patternfly-overrides.css
@@ -0,0 +1,619 @@
+/**
+* Quantic Design System Overrides for PatternFly
+*
+* This file overrides PatternFly's default design tokens with Quantic tokens
+* to maintain consistent theming across the application.
+*/
+
+:root {
+  /* === Typography === */
+  /* Font families */
+  --pf-global--FontFamily--sans-serif: var(--quantic-font-family-body);
+  --pf-global--FontFamily--heading--sans-serif: var(--quantic-font-family-display);
+  --pf-global--FontFamily--text: var(--quantic-font-family-body);
+  
+  /* Font sizes */
+  --pf-global--FontSize--xs: var(--quantic-font-size-body-xs);
+  --pf-global--FontSize--sm: var(--quantic-font-size-body-sm);
+  --pf-global--FontSize--md: var(--quantic-font-size-body-md);
+  --pf-global--FontSize--lg: var(--quantic-font-size-body-lg);
+  --pf-global--FontSize--xl: var(--quantic-font-size-body-xl);
+  --pf-global--FontSize--2xl: var(--quantic-font-size-display-xs);
+  --pf-global--FontSize--3xl: var(--quantic-font-size-display-sm);
+  --pf-global--FontSize--4xl: var(--quantic-font-size-display-md);
+  
+  /* Font weights */
+  --pf-global--FontWeight--normal: var(--quantic-font-weight-regular);
+  --pf-global--FontWeight--semi-bold: var(--quantic-font-weight-semibold);
+  --pf-global--FontWeight--bold: var(--quantic-font-weight-bold);
+  
+  /* Line heights */
+  --pf-global--LineHeight--sm: var(--quantic-line-height-body-sm);
+  --pf-global--LineHeight--md: var(--quantic-line-height-body-md);
+  
+  /* === Colors === */
+  /* Text colors */
+  --pf-global--Color--100: var(--quantic-text-primary);
+  --pf-global--Color--200: var(--quantic-text-secondary);
+  --pf-global--Color--300: var(--quantic-text-tertiary);
+  --pf-global--disabled-color--100: var(--quantic-text-disabled);
+  --pf-global--link--Color: var(--quantic-fg-brand-primary);
+  --pf-global--link--Color--hover: var(--quantic-fg-brand-primary-alt);
+  
+  /* Background colors */
+  --pf-global--BackgroundColor--100: var(--quantic-bg-primary);
+  --pf-global--BackgroundColor--200: var(--quantic-bg-secondary);
+  --pf-global--BackgroundColor--dark-100: var(--quantic-bg-primary-alt);
+  --pf-global--BackgroundColor--dark-200: var(--quantic-bg-secondary-alt);
+  
+  /* Primary/Brand colors */
+  --pf-global--primary-color--100: var(--quantic-utility-brand-600);
+  --pf-global--primary-color--200: var(--quantic-utility-brand-700);
+  --pf-global--active-color--100: var(--quantic-bg-brand-primary);
+  --pf-global--active-color--200: var(--quantic-bg-brand-primary-hover);
+  
+  /* Status colors */
+  --pf-global--success-color--100: var(--quantic-utility-success-500);
+  --pf-global--success-color--200: var(--quantic-utility-success-600);
+  --pf-global--danger-color--100: var(--quantic-utility-error-500);
+  --pf-global--danger-color--200: var(--quantic-utility-error-600);
+  --pf-global--warning-color--100: var(--quantic-utility-warning-500);
+  --pf-global--warning-color--200: var(--quantic-utility-warning-600);
+  --pf-global--info-color--100: var(--quantic-utility-blue-500);
+  --pf-global--info-color--200: var(--quantic-utility-blue-600);
+  
+  /* === Spacing === */
+  --pf-global--spacer--xs: var(--quantic-spacing-sm);
+  --pf-global--spacer--sm: var(--quantic-spacing-md);
+  --pf-global--spacer--md: var(--quantic-spacing-lg);
+  --pf-global--spacer--lg: var(--quantic-spacing-xl);
+  --pf-global--spacer--xl: var(--quantic-spacing-2xl);
+  --pf-global--spacer--2xl: var(--quantic-spacing-3xl);
+  --pf-global--spacer--3xl: var(--quantic-spacing-4xl);
+  --pf-global--spacer--4xl: var(--quantic-spacing-5xl);
+  
+  /* Gutter spacing */
+  --pf-global--gutter: var(--quantic-spacing-4);
+  --pf-global--gutter--md: var(--quantic-spacing-6);
+  
+  /* === Borders === */
+  --pf-global--BorderColor--100: var(--quantic-border-primary);
+  --pf-global--BorderColor--200: var(--quantic-border-secondary);
+  --pf-global--BorderColor--300: var(--quantic-border-tertiary);
+  --pf-global--BorderColor--disabled: var(--quantic-border-disabled);
+  
+  /* Border radius */
+  --pf-global--BorderRadius--sm: var(--quantic-radius-sm);
+  --pf-global--BorderRadius--md: var(--quantic-radius-md);
+  --pf-global--BorderRadius--lg: var(--quantic-radius-lg);
+  --pf-global--BorderRadius--xl: var(--quantic-radius-xl);
+  
+  /* === Focus === */
+  --pf-global--focus-ring-color: var(--quantic-focus-ring);
+  
+  /* === Shadows === */
+  --pf-global--BoxShadow--sm: var(--quantic-shadow-sm-01);
+  --pf-global--BoxShadow--md: var(--quantic-shadow-md-01);
+  --pf-global--BoxShadow--lg: var(--quantic-shadow-lg-01);
+  --pf-global--BoxShadow--xl: var(--quantic-shadow-xl-01);
+  
+  --pf-c-page__main-section--BackgroundColor: var(--quantic-bg-primary);
+}
+
+:root {
+  color: var(--quantic-text-secondary);
+  background-color: var(--quantic-bg-primary);
+  font-family: var(--quantic-font-family-body);
+}
+
+:root b {
+  font-weight: normal;
+}
+
+:root .pf-c-page {
+  --pf-c-page--BackgroundColor: inherit;
+  --pf-c-page__main-section--BackgroundColor: inherit;
+  --pf-c-page__main-section--PaddingTop: var(--quantic-spacing-xl);
+  --pf-c-page__main-section--PaddingBottom: var(--quantic-spacing-lg);
+  --pf-c-page__main-section--xl--PaddingTop: var(--quantic-spacing-xl);
+  --pf-c-page__main-section--xl--PaddingBottom: var(--quantic-spacing-lg);
+  --pf-c-page__main-section--PaddingRight: var(--quantic-spacing-3xl);
+  --pf-c-page__main-section--PaddingLeft: var(--quantic-spacing-3xl);
+  --pf-c-page__main-section--xl--PaddingRight: var(--quantic-spacing-2xl);
+  --pf-c-page__main-section--xl--PaddingLeft: var(--quantic-spacing-2xl);
+
+  --pf-c-page__header--BackgroundColor: var(--quantic-bg-primary);
+  --pf-c-page__sidebar--Width: var(--quantic-spacing-80);
+  --pf-c-page__sidebar--BackgroundColor: var(--quantic-bg-primary);
+}
+
+:root .pf-c-login {
+  --pf-c-login__main--BackgroundColor: var(--quantic-bg-secondary);
+}
+:root .pf-c-page__header {
+  box-shadow: none;
+  border-bottom: 1px solid var(--quantic-border-secondary);
+}
+
+:root .pf-c-breadcrumb__item-divider {
+  color: var(--quantic-bg-tertiary);
+}
+
+:root .pf-c-page__sidebar.pf-m-expanded {
+  box-shadow: none;
+  border-right: 1px solid var(--quantic-border-secondary);
+}
+
+:root .pf-c-nav {
+  --pf-c-nav--BackgroundColor: var(--quantic-bg-secondary);
+  --pf-c-nav__link--Color: var(--quantic-text-secondary);
+  --pf-c-nav__link--m-current--BackgroundColor: var(--quantic-bg-tertiary);
+  --pf-c-nav__link--m-current--Color: var(--quantic-text-primary);
+  --pf-c-nav__link--PaddingTop: var(--quantic-spacing-2);
+  --pf-c-nav__link--PaddingBottom: var(--quantic-spacing-2);
+  --pf-c-nav__link--PaddingRight: var(--quantic-spacing-3);
+  --pf-c-nav__link--PaddingLeft: var(--quantic-spacing-3);
+  --pf-c-nav__link--FontSize: var(--quantic-font-size-body-md);
+  --pf-c-nav__link--m-current--after--BorderColor: transparent;
+
+  margin-inline: var(--quantic-spacing-5);
+}
+
+:root .pf-c-nav__subnav {
+  --pf-c-nav__link--PaddingTop: var(--quantic-spacing-1);
+  --pf-c-nav__link--PaddingBottom: var(--quantic-spacing-1);
+  --pf-c-nav__link--PaddingRight: inherit;
+  --pf-c-nav__link--PaddingBottom: inherit;
+  --pf-c-nav__link--PaddingLeft: inherit;
+  --pf-c-nav__link--FontSize: var(--quantic-font-size-body-sm);
+  --pf-c-nav__link--hover--after--BorderColor: inherit;
+  --pf-c-nav__link--focus--after--BorderColor: inherit;
+  --pf-c-nav__link--active--after--BorderColor: inherit;
+  --pf-c-nav__link--m-current--after--BorderColor: inherit;
+  --pf-c-nav__link--hover--after--BorderLeftWidth: inherit;
+  --pf-c-nav__link--focus--after--BorderLeftWidth: inherit;
+  --pf-c-nav__link--active--after--BorderLeftWidth: inherit;
+  --pf-c-nav__link--m-current--after--BorderLeftWidth: inherit;
+  --pf-c-nav--c-divider--PaddingRight: inherit;
+  --pf-c-nav--c-divider--PaddingLeft: inherit;
+}
+
+:root .pf-c-page__main-section.pf-m-light {
+  --pf-c-page__main-section--BackgroundColor: inherit;
+}
+
+:root .pf-c-toolbar__group {
+  gap: var(--quantic-spacing-2);
+  margin-right: 0;
+}
+
+:root .pf-c-toolbar__content-section {
+  gap: var(--quantic-spacing-2);
+}
+
+:root .pf-c-toolbar__item {
+  margin-right: 0;
+}
+
+:root .pf-c-tab-content {
+  padding-top: var(--quantic-spacing-6);
+  padding-bottom: var(--quantic-spacing-6);
+}
+
+:root .pf-c-tabs__item-text {
+  display: flex;
+  align-items: center;
+}
+
+:root .pf-c-table {
+  --pf-c-table__sort__button__text--Color: var(--quantic-text-tertiary);
+
+  color: var(--quantic-text-tertiary);
+  background-color: var(--quantic-bg-primary);
+}
+
+
+:root .pf-c-table thead {
+  --pf-c-table--cell--FontWeight: var(--quantic-font-weight-medium);
+}
+:root .pf-c-table tr > * {
+  color: inherit;
+}
+
+:root .pf-c-table {
+  --pf-global--Color--100: inherit;
+  --pf-global--Color--200: inherit;
+  --pf-global--BorderColor--100: var(--quantic-border-secondary);
+  --pf-global--primary-color--100: inherit;
+  --pf-global--link--Color: inherit;
+  --pf-global--link--Color--hover: inherit;
+  --pf-global--BackgroundColor--100: inherit;
+}
+
+:root .pf-c-empty-state {
+  --pf-c-empty-state--PaddingTop: var(--quantic-spacing-16);
+  --pf-c-empty-state__body--Color: var(--quantic-text-tertiary);
+}
+
+:root .pf-c-title {
+  color: var(--quantic-text-primary);
+  --pf-c-title--m-2xl--FontWeight: var(--quantic-font-weight-semibold);
+  --pf-c-title--m-xl--FontWeight: var(--quantic-font-weight-semibold);
+  --pf-c-title--m-lg--FontWeight: var(--quantic-font-weight-semibold);
+}
+
+.pf-c-title.pf-m-2xl {
+  margin-top: var(--quantic-spacing-6);
+}
+
+:root .pf-c-card {
+  --pf-c-card--first-child--PaddingTop: var(--quantic-spacing-8);
+}
+
+:root .pf-c-card__title {
+  --pf-c-card__title--FontSize: var(--quantic-font-size-body-lg);
+  margin-bottom: var(--quantic-spacing-1);
+}
+
+:root .pf-c-data-list {
+  --pf-global--link--Color: inherit; 
+  --pf-c-data-list__item--BackgroundColor: var(--quantic-bg-primary);
+  --pf-c-data-list--BorderTopColor: var(--quantic-border-secondary);
+  --pf-c-data-list__item--BorderBottomColor: var(--quantic-border-secondary);
+  --pf-c-data-list__item--m-hover--BackgroundColor: var(--quantic-bg-tertiary);
+}
+
+
+:root .pf-c-dropdown {
+  --pf-c-dropdown__menu--BackgroundColor: var(--quantic-bg-primary);
+  --pf-c-dropdown__menu-item--Color: var(--quantic-text-primary);
+  --pf-c-dropdown__menu-item--FontSize: var(--quantic-font-size-body-sm);
+  --pf-c-dropdown__menu-item--hover--BackgroundColor: var(--quantic-bg-tertiary);
+  --pf-c-dropdown__menu-item--hover--Color: var(--quantic-text-primary);
+  --pf-c-dropdown__menu-item--PaddingRight: var(--quantic-spacing-4);
+  --pf-c-dropdown__menu-item--PaddingLeft: var(--quantic-spacing-4);
+  --pf-c-dropdown__menu-item--PaddingTop: var(--quantic-spacing-2);
+  --pf-c-dropdown__menu-item--PaddingBottom: var(--quantic-spacing-2);
+}
+
+:root .pf-c-dropdown__menu {
+  border: 1px solid var(--quantic-border-primary);
+  border-radius: var(--quantic-radius-md);
+}
+
+:root .pf-c-dropdown__toggle-icon {
+  color: var(--quantic-text-tertiary);
+  opacity: .6;
+}
+
+:root .pf-c-dropdown__toggle.pf-m-plain:not(.pf-m-text)  {
+  display: inline-flex;
+}
+
+:root .pf-c-dropdown__toggle-text{
+  display: flex;
+  align-items: center;
+}
+
+
+:root .pf-c-select {
+  --pf-c-select__toggle--PaddingTop: var(--quantic-spacing-2);
+  --pf-c-select__toggle--PaddingBottom: var(--quantic-spacing-2);
+  --pf-c-select__toggle--BackgroundColor: var(--quantic-bg-primary);
+  --pf-c-select__toggle--BorderColor: var(--quantic-border-primary);
+  --pf-c-select__toggle--Color: var(--quantic-text-primary);
+  --pf-c-select__toggle--PaddingRight: var(--quantic-spacing-4);
+  --pf-c-select__toggle--PaddingLeft: var(--quantic-spacing-4);
+  --pf-c-select__toggle--FontSize: var(--quantic-font-size-body-sm);
+
+  --pf-c-select__toggle--disabled--BackgroundColor: var(--quantic-bg-disabled);
+  --pf-c-select__toggle-arrow--Color: var(--quantic-text-tertiary);
+  
+  --pf-c-select__menu--BackgroundColor: var(--quantic-bg-primary);
+  --pf-c-select__menu-item--focus--BackgroundColor: var(--quantic-bg-tertiary);
+  --pf-c-select__menu-item--hover--BackgroundColor: var(--quantic-bg-tertiary);
+  --pf-c-select__menu-item--Color: var(--quantic-text-primary);
+  --pf-c-select__menu-item--PaddingTop: var(--quantic-spacing-2);
+  --pf-c-select__menu-item--PaddingRight: var(--quantic-spacing-4);
+  --pf-c-select__menu-item--PaddingBottom: var(--quantic-spacing-2);
+  --pf-c-select__menu-item--PaddingLeft: var(--quantic-spacing-4);
+  --pf-c-select__menu-item--FontSize: var(--quantic-font-size-body-sm);
+
+  --pf-c-select__toggle--before--BorderTopWidth: 1px;
+  --pf-c-select__toggle--before--BorderRightWidth: 1px;
+  --pf-c-select__toggle--before--BorderBottomWidth: 1px;
+  --pf-c-select__toggle--before--BorderLeftWidth: 1px;
+  --pf-c-select__toggle--before--BorderWidth: 1px;
+  --pf-c-select__toggle--before--BorderTopColor: var(--quantic-border-primary);
+  --pf-c-select__toggle--before--BorderRightColor: var(--quantic-border-primary);
+  --pf-c-select__toggle--before--BorderBottomColor: var(--quantic-border-primary);
+  --pf-c-select__toggle--before--BorderLeftColor: var(--quantic-border-primary);
+}
+
+:root .pf-c-select__toggle {
+
+  border-radius: var(--quantic-radius-sm);
+  height: 42px;
+}
+
+:root .pf-c-select__toggle:before {
+  --pf-c-select__toggle--before--BorderBottomColor: var(--quantic-border-primary);
+  --pf-c-select__toggle--before--BorderBottomWidth: 1px;
+  border-radius: var(--quantic-radius-sm);
+}
+
+:root .pf-c-select__toggle:focus {
+  --pf-c-select__toggle--before--BorderBottomColor: inherit;
+  border-bottom: inherit;
+  outline: 2px solid var(--quantic-focus-ring);
+  outline-offset: 2px;
+}
+
+:root .pf-c-select__menu {
+  border: 1px solid var(--quantic-border-primary);
+  border-radius: var(--quantic-radius-md);
+}
+
+:root .pf-c-options-menu {
+  --pf-c-options-menu__menu-item--PaddingLeft: var(--quantic-spacing-4);
+  --pf-c-options-menu__menu-item--PaddingRight: var(--quantic-spacing-4);
+  --pf-c-options-menu__menu-item--PaddingTop: var(--quantic-spacing-2);
+  --pf-c-options-menu__menu-item--PaddingBottom: var(--quantic-spacing-2);
+  --pf-c-options-menu__menu-item--FontSize: var(--quantic-font-size-body-sm);
+  --pf-c-options-menu__menu--BackgroundColor: var(--quantic-bg-primary);
+
+  --pf-c-options-menu__menu-item-icon--Color: var(--quantic-text-tertiary);
+  --pf-c-options-menu__menu-item--hover--BackgroundColor: var(--quantic-bg-tertiary);
+
+  --pf-c-options-menu__toggle--Color: var(--quantic-text-secondary);
+}
+
+:root .pf-c-options-menu__menu {
+  border: 1px solid var(--quantic-border-primary);
+  border-radius: var(--quantic-radius-md);
+}
+
+:root .pf-c-form {
+  --pf-c-form--GridGap: var(--quantic-spacing-3);
+  --pf-c-form__label-text--FontWeight: var(--quantic-font-weight-regular);
+  --pf-c-form__group--m-action--MarginTop: var(--quantic-spacing-2);
+}
+
+:root .pf-c-tooltip {
+  --pf-c-tooltip--MaxWidth: inherit;
+  --pf-c-tooltip--BoxShadow: inherit;
+  --pf-c-tooltip_content--PaddingTop: inherit;
+  --pf-c-tooltip_content--PaddingRight: inherit;
+  --pf-c-tooltip_content--PaddingBottom: inherit;
+  --pf-c-tooltip_content--PaddingLeft: inherit;
+  --pf-c-tooltip_content--Color: inherit;
+  --pf-c-tooltip__content--BackgroundColor: var(--quantic-bg-tertiary);
+  --pf-c-tooltip__content--PaddingTop: var(--quantic-spacing-1);
+  --pf-c-tooltip__content--PaddingRight: var(--quantic-spacing-3);
+  --pf-c-tooltip__content--PaddingBottom: var(--quantic-spacing-1);
+  --pf-c-tooltip__content--PaddingLeft: var(--quantic-spacing-3);
+  --pf-c-tooltip_content--FontSize: inherit;
+  --pf-c-tooltip_arrow--Width: inherit;
+  --pf-c-tooltip_arrow--Height: inherit;
+  --pf-c-tooltip_arrow--m-top--TranslateX: inherit;
+}
+
+:root .pf-c-tooltip__content {
+  border-radius: var(--quantic-radius-xs);
+}
+
+:root .pf-c-popover {
+  --pf-c-popover__content--BackgroundColor: var(--quantic-bg-tertiary);
+  --pf-c-popover__arrow--BackgroundColor: var(--quantic-bg-tertiary);
+}
+
+:root .pf-c-popover__content {
+  border-radius: var(--quantic-radius-sm);
+  --pf-c-popover__content--PaddingRight: var(--quantic-spacing-5);
+  --pf-c-popover__content--PaddingLeft: var(--quantic-spacing-5);
+  --pf-c-popover__content--PaddingTop: var(--quantic-spacing-4);
+  --pf-c-popover__content--PaddingBottom: var(--quantic-spacing-5);
+}
+
+:root .pf-c-popover.pf-m-top {
+  --pf-c-popover__arrow--m-top--TranslateY: var(--quantic-spacing-1 );
+}
+:root .pf-c-form-control {
+  --pf-c-form-control--BackgroundColor: var(--quantic-bg-primary);
+  --pf-c-form-control--disabled--BackgroundColor: var(--quantic-bg-disabled);
+  --pf-c-form-control--BorderColor: var(--quantic-border-primary);
+  --pf-c-form-control--Color: var(--quantic-text-primary);
+  --pf-c-form-control--PlaceholderColor: var(--quantic-text-disabled);
+
+  --pf-c-form-control--BorderTopColor: var(--quantic-border-primary);
+  --pf-c-form-control--BorderRightColor: var(--quantic-border-primary);
+  --pf-c-form-control--BorderBottomColor: var(--quantic-border-primary);
+  --pf-c-form-control--BorderLeftColor: var(--quantic-border-primary);
+
+  --pf-c-form-control--PaddingTop: var(--quantic-spacing-2);
+  --pf-c-form-control--PaddingRight: var(--quantic-spacing-3);
+  --pf-c-form-control--PaddingBottom: var(--quantic-spacing-2);
+  --pf-c-form-control--focus--PaddingBottom: var(--quantic-spacing-2);
+
+  --pf-c-button--BorderRadius: var(--quantic-radius-sm);
+  
+  --pf-c-form-control--focus--BorderBottomWidth: 1px;
+  --pf-c-form-control--PaddingLeft: var(--quantic-spacing-3);
+
+  border-radius: var(--quantic-radius-sm);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  
+}
+:root .pf-c-form-control:not(.ace_editor) {
+  transition: all 0.15s ease-in-out;
+}
+
+:root .pf-c-button {
+  --pf-c-button--FontSize: var(--quantic-font-size-body-xs);
+}
+
+:root .pf-c-button.pf-m-control {
+  vertical-align: middle;
+  --pf-c-button--disabled--BackgroundColor: var(--quantic-bg-disabled);
+  --pf-c-button--BorderRadius: var(--quantic-radius-md);
+  --pf-c-button--m-control--BackgroundColor: var(--quantic-bg-brand-primary);
+}
+
+:root .pf-c-button.pf-m-control:hover {
+  --pf-c-button--m-control--BackgroundColor: var(--quantic-bg-brand-primary-hover);
+}
+
+:root .pf-m-control.pf-c-button::after {
+  display: none;
+}
+
+:root .pf-c-button.pf-m-plain,
+:root .pf-c-button.pf-m-plain:hover {
+  --pf-c-button--m-plain--Color: var(--quantic-text-secondary);
+  --pf-c-button--m-plain--disabled--Color: var(--quantic-text-tertiary);
+}
+
+:root .pf-c-button {
+  --pf-c-button--PaddingTop: var(--quantic-spacing-2);
+  --pf-c-button--PaddingBottom: var(--quantic-spacing-2);
+  --pf-c-button--PaddingRight: var(--quantic-spacing-4);
+  --pf-c-button--PaddingLeft: var(--quantic-spacing-4);
+  --pf-c-button--FontSize: var(--quantic-font-size-body-md);
+  --pf-c-button--FontWeight: var(--quantic-font-weight-semibold);
+  --pf-c-button--disabled--BackgroundColor: var(--quantic-bg-disabled);
+  --pf-c-button--disabled--Color: var(--quantic-text-disabled);
+  --pf-c-button--LineHeight: 1.625rem;
+
+  --pf-c-button--m-primary--Color: var(--quantic-text-primary-on-brand);
+  --pf-c-button--m-primary--hover--Color: var(--quantic-text-primary-on-brand);
+
+  text-transform: uppercase;
+}
+
+:root .pf-c-form-control:focus {
+  --pf-c-form-control--BorderColor: var(--quantic-focus-ring);
+  --pf-c-form-control--BorderBottomColor: var(--quantic-border-primary);
+
+  outline: 2px solid var(--quantic-focus-ring);
+}
+
+:root .pf-c-form-control:hover {
+  --pf-c-form-control--BorderBottomColor: var(--quantic-border-primary);
+}
+
+:root .pf-c-check {
+  --pf-c-check__label--Color: var(--quantic-text-primary);
+}
+
+:root .pf-c-input-group {
+  --pf-c-input-group--BackgroundColor: var(--quantic-bg-primary);
+  border-radius: var(--quantic-radius-sm);
+  gap: var(--quantic-spacing-2);
+}
+
+:root .pf-c-progress {
+  --pf-c-progress__bar--BackgroundColor: var(--quantic-bg-tertiary);
+}
+
+:root .pf-c-progress__bar,
+:root .pf-c-progress__bar::before,
+:root .pf-c-progress__indicator {
+  border-radius: var(--quantic-radius-xs);
+}
+
+:root .pf-c-chip-group {
+  color: var(--quantic-text-primary);
+}
+
+:root .pf-c-chip {
+  --pf-c-chip--BackgroundColor: var(--quantic-bg-tertiary);
+  --pf-c-chip--Color: var(--quantic-text-primary);
+  --pf-c-chip__text--Color: var(--quantic-text-primary);
+  --pf-c-chip--BorderColor: var(--quantic-border-secondary);
+  --pf-c-chip--m-read--BackgroundColor: var(--quantic-bg-secondary);
+  --pf-c-chip--m-read--Color: var(--quantic-text-secondary);
+  --pf-c-chip--m-read--BorderColor: var(--quantic-border-secondary);
+  --pf-c-chip--m-read--close-button--Color: var(--quantic-text-tertiary);
+  --pf-c-chip--m-read--close-button--hover--Color: var(--quantic-text-primary);
+}
+
+:root .pf-c-modal-box__header {
+  --pf-c-modal-box__header--PaddingTop: var(--quantic-spacing-8);
+  --pf-c-modal-box__header--PaddingBottom: var(--quantic-spacing-4);
+  --pf-c-modal-box__header--PaddingRight: var(--quantic-spacing-8);
+  --pf-c-modal-box__header--PaddingLeft: var(--quantic-spacing-8);
+}
+
+:root .pf-c-modal-box__footer {
+  --pf-c-modal-box__footer--PaddingTop: var(--quantic-spacing-4);
+  --pf-c-modal-box__footer--PaddingBottom: var(--quantic-spacing-6);
+  --pf-c-modal-box__footer--PaddingRight: var(--quantic-spacing-8);
+  --pf-c-modal-box__footer--PaddingLeft: var(--quantic-spacing-8);
+}
+
+:root .pf-c-modal-box__header + .pf-c-modal-box__body {
+  --pf-c-modal-box__body--PaddingTop: var(--quantic-spacing-8);
+  --pf-c-modal-box__body--PaddingBottom: var(--quantic-spacing-16);
+  --pf-c-modal-box__body--last-child--PaddingBottom: var(--quantic-spacing-12);
+  --pf-c-modal-box__body--PaddingRight: var(--quantic-spacing-8);
+  --pf-c-modal-box__body--PaddingLeft: var(--quantic-spacing-8);
+}
+
+.pf-c-nav__link {
+  border-radius: var(--quantic-radius-sm);
+}
+
+.pf-c-nav__toggle-icon {
+  color: var(--quantic-text-tertiary);
+  opacity: .6;
+}
+
+:root .pf-c-pagination.pf-m-bottom {
+  justify-content: space-between;
+}
+
+:root .pf-c-slider {
+  --pf-c-slider__thumb--Height: var(--quantic-spacing-3);
+  --pf-c-slider__thumb--Width: var(--quantic-spacing-3);
+  --pf-c-slider__steps--FontSize: var(--quantic-font-size-body-xs);
+  --pf-c-slider__thumb--BoxShadow: none;
+  /* --pf-c-slider__rail-track--before--base--BackgroundColor: #12a66f; */
+  --pf-c-slider__rail-track--before--fill--BackgroundColor: #12a66f; 
+  /* --pf-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop: transparent; */
+  /* */
+}
+
+.pf-c-nav__link:focus {
+  background-color: transparent;
+}
+
+.pf-c-nav__link:active {
+  background-color: transparent;
+}
+
+.pf-c-nav__link:hover {
+  background-color: rgba(51, 170, 51, .1);
+}
+
+.pf-c-nav__link.pf-m-current {
+  background-color: rgba(51, 170, 51, .2);
+}
+
+.pf-c-nav__link.pf-m-current::after {
+  border-color: rgba(51, 170, 51, .3);
+}
+
+.ace-monokai .ace_gutter {
+  background: var(--quantic-bg-secondary);
+  color: var(--quantic-text-tertiary);
+}
+
+.ace-monokai .ace_marker-layer .ace_active-line {
+  background: var(--quantic-bg-primary-alt);
+  color: var(--quantic-text-secondary);
+}
+
+.ace-monokai .ace_gutter-active-line {
+  background-color: var(--quantic-bg-tertiary);
+}
\ No newline at end of file
diff --git a/awx/ui/src/screens/ActivityStream/ActivityStream.js b/awx/ui/src/screens/ActivityStream/ActivityStream.js
index 17b26d11..7d43edce 100644
--- a/awx/ui/src/screens/ActivityStream/ActivityStream.js
+++ b/awx/ui/src/screens/ActivityStream/ActivityStream.js
@@ -125,6 +125,7 @@ function ActivityStream() {
           {t`Activity Stream type selector`}
         </span>
         <Select
+          position="right"
           variant={SelectVariant.single}
           aria-labelledby="grouped-type-select-id"
           typeAheadAriaLabel={t`Select an activity type`}
@@ -140,6 +141,8 @@ function ActivityStream() {
           selections={activityStreamType}
           isOpen={isTypeDropdownOpen}
           isGrouped
+          maxHeight="400px"
+          width="250px"
           noResultsFoundText={t`No results found`}
           ouiaId="activity-type-select"
         >
diff --git a/awx/ui/src/screens/ActivityStream/ActivityStreamDetailButton.js b/awx/ui/src/screens/ActivityStream/ActivityStreamDetailButton.js
index d6fa700a..79c1ecd6 100644
--- a/awx/ui/src/screens/ActivityStream/ActivityStreamDetailButton.js
+++ b/awx/ui/src/screens/ActivityStream/ActivityStreamDetailButton.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useLingui } from '@lingui/react/macro';
 import { Button, Modal } from '@patternfly/react-core';
-import { SearchPlusIcon } from '@patternfly/react-icons';
+import { LucideIconZoomIn } from '@ctrliq/quantic-react';
 
 import { formatDateString } from 'util/dates';
 
@@ -27,7 +27,7 @@ function ActivityStreamDetailButton({ streamItem, user, description }) {
         component="button"
         onClick={() => setIsOpen(true)}
       >
-        <SearchPlusIcon />
+        <LucideIconZoomIn size="sm" data-original-icon="SearchPlusIcon" />
       </Button>
       <Modal
         variant="large"
@@ -46,10 +46,7 @@ function ActivityStreamDetailButton({ streamItem, user, description }) {
             label={t`Setting category`}
             value={setting && setting[0]?.category}
           />
-          <Detail
-            label={t`Setting name`}
-            value={setting && setting[0]?.name}
-          />
+          <Detail label={t`Setting name`} value={setting && setting[0]?.name} />
           <Detail fullWidth label={t`Action`} value={description} />
           {streamItem?.changes && (
             <VariablesDetail
diff --git a/awx/ui/src/screens/Application/Application/Application.js b/awx/ui/src/screens/Application/Application/Application.js
index a4ce2e57..31341b99 100644
--- a/awx/ui/src/screens/Application/Application/Application.js
+++ b/awx/ui/src/screens/Application/Application/Application.js
@@ -9,7 +9,7 @@ import {
 } from 'react-router-dom';
 import { useLingui } from '@lingui/react/macro';
 
-import { CaretLeftIcon } from '@patternfly/react-icons';
+import { LucideIconChevronLeft } from '@ctrliq/quantic-react';
 import { Card, PageSection } from '@patternfly/react-core';
 
 import useRequest from 'hooks/useRequest';
@@ -69,7 +69,7 @@ function Application({ setBreadcrumb }) {
     {
       name: (
         <>
-          <CaretLeftIcon />
+          <LucideIconChevronLeft />
           {t`Back to applications`}
         </>
       ),
@@ -94,9 +94,7 @@ function Application({ setBreadcrumb }) {
             {error.response?.status === 404 && (
               <span>
                 {t`Application not found.`}{' '}
-                <Link to="/applications">
-                  {t`View all applications.`}
-                </Link>
+                <Link to="/applications">{t`View all applications.`}</Link>
               </span>
             )}
           </ContentError>
diff --git a/awx/ui/src/screens/Application/ApplicationsList/ApplicationListItem.js b/awx/ui/src/screens/Application/ApplicationsList/ApplicationListItem.js
index 57ea81b6..54cd0904 100644
--- a/awx/ui/src/screens/Application/ApplicationsList/ApplicationListItem.js
+++ b/awx/ui/src/screens/Application/ApplicationsList/ApplicationListItem.js
@@ -4,7 +4,7 @@ import { Button } from '@patternfly/react-core';
 import { Tr, Td } from '@patternfly/react-table';
 import { useLingui } from '@lingui/react/macro';
 import { Link } from 'react-router-dom';
-import { PencilAltIcon } from '@patternfly/react-icons';
+import { LucideIconPencil } from '@ctrliq/quantic-react';
 import { ActionsTd, ActionItem, TdBreakWord } from 'components/PaginatedTable';
 import { formatDateString } from 'util/dates';
 import { Application } from 'types';
@@ -58,7 +58,7 @@ function ApplicationListItem({
             component={Link}
             to={`/applications/${application.id}/edit`}
           >
-            <PencilAltIcon />
+            <LucideIconPencil data-original-icon="PencilAltIcon" size="sm" />
           </Button>
         </ActionItem>
       </ActionsTd>
diff --git a/awx/ui/src/screens/Credential/Credential.js b/awx/ui/src/screens/Credential/Credential.js
index ec9cf3ed..534c5568 100644
--- a/awx/ui/src/screens/Credential/Credential.js
+++ b/awx/ui/src/screens/Credential/Credential.js
@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect } from 'react';
 import { useLingui } from '@lingui/react/macro';
 
-import { CaretLeftIcon } from '@patternfly/react-icons';
+import { LucideIconChevronLeft } from '@ctrliq/quantic-react';
 import { Card, PageSection } from '@patternfly/react-core';
 import {
   Switch,
@@ -77,7 +77,7 @@ function Credential({ setBreadcrumb }) {
     {
       name: (
         <>
-          <CaretLeftIcon />
+          <LucideIconChevronLeft />
           {t`Back to Credentials`}
         </>
       ),
@@ -116,9 +116,7 @@ function Credential({ setBreadcrumb }) {
             {contentError.response && contentError.response.status === 404 && (
               <span>
                 {t`Credential not found.`}{' '}
-                <Link to="/credentials">
-                  {t`View all Credentials.`}
-                </Link>
+                <Link to="/credentials">{t`View all Credentials.`}</Link>
               </span>
             )}
           </ContentError>
diff --git a/awx/ui/src/screens/Credential/CredentialList/CredentialListItem.js b/awx/ui/src/screens/Credential/CredentialList/CredentialListItem.js
index aedf097b..702c4631 100644
--- a/awx/ui/src/screens/Credential/CredentialList/CredentialListItem.js
+++ b/awx/ui/src/screens/Credential/CredentialList/CredentialListItem.js
@@ -5,7 +5,7 @@ import { useLingui } from '@lingui/react/macro';
 import { Link } from 'react-router-dom';
 import { Button } from '@patternfly/react-core';
 import { Tr, Td } from '@patternfly/react-table';
-import { PencilAltIcon } from '@patternfly/react-icons';
+import { LucideIconPencil } from '@ctrliq/quantic-react';
 import { ActionsTd, ActionItem, TdBreakWord } from 'components/PaginatedTable';
 import { timeOfDay } from 'util/dates';
 
@@ -74,7 +74,7 @@ function CredentialListItem({
             component={Link}
             to={`/credentials/${credential.id}/edit`}
           >
-            <PencilAltIcon />
+            <LucideIconPencil data-original-icon="PencilAltIcon" size="sm" />
           </Button>
         </ActionItem>
         <ActionItem
diff --git a/awx/ui/src/screens/Credential/shared/CredentialForm.js b/awx/ui/src/screens/Credential/shared/CredentialForm.js
index c3737c1c..990f8137 100644
--- a/awx/ui/src/screens/Credential/shared/CredentialForm.js
+++ b/awx/ui/src/screens/Credential/shared/CredentialForm.js
@@ -183,9 +183,7 @@ function CredentialFormFields({ initialTypeId, credentialTypes }) {
         isDisabled={initialValues.isOrgLookupDisabled}
         validate={
           isGalaxyCredential
-            ? required(
-                t`Galaxy credentials must be owned by an Organization.`
-              )
+            ? required(t`Galaxy credentials must be owned by an Organization.`)
             : undefined
         }
       />
@@ -344,7 +342,7 @@ function CredentialForm({
                     ouiaId="credential-form-cancel-button"
                     id="credential-form-cancel-button"
                     aria-label={t`Cancel`}
-                    variant="link"
+                    variant="secondary"
                     type="button"
                     onClick={onCancel}
                   >
diff --git a/awx/ui/src/screens/Credential/shared/CredentialFormFields/CredentialField.js b/awx/ui/src/screens/Credential/shared/CredentialFormFields/CredentialField.js
index e72eabf8..b13e053b 100644
--- a/awx/ui/src/screens/Credential/shared/CredentialFormFields/CredentialField.js
+++ b/awx/ui/src/screens/Credential/shared/CredentialFormFields/CredentialField.js
@@ -14,7 +14,7 @@ import {
   TextInput,
   Tooltip,
 } from '@patternfly/react-core';
-import { PficonHistoryIcon } from '@patternfly/react-icons';
+import { LucideIconHistory as PficonHistoryIcon } from '@ctrliq/quantic-react';
 import { PasswordInput } from 'components/FormField';
 import AnsibleSelect from 'components/AnsibleSelect';
 import Popover from 'components/Popover';
@@ -71,7 +71,7 @@ function CredentialInput({
                 }
               }}
             >
-              <PficonHistoryIcon />
+              <PficonHistoryIcon size={16} data-original-icon="PficonHistoryIcon" />
             </Button>
           </Tooltip>
         )}
diff --git a/awx/ui/src/screens/Credential/shared/CredentialPlugins/CredentialPluginField.js b/awx/ui/src/screens/Credential/shared/CredentialPlugins/CredentialPluginField.js
index fb74cd9c..837680d8 100644
--- a/awx/ui/src/screens/Credential/shared/CredentialPlugins/CredentialPluginField.js
+++ b/awx/ui/src/screens/Credential/shared/CredentialPlugins/CredentialPluginField.js
@@ -11,7 +11,7 @@ import {
   InputGroup,
   Tooltip,
 } from '@patternfly/react-core';
-import { KeyIcon } from '@patternfly/react-icons';
+import { LucideIconKey as KeyIcon } from '@ctrliq/quantic-react';
 import styles from '@patternfly/react-styles/css/components/Form/form';
 import { css } from '@patternfly/react-styles';
 import FieldWithPrompt from 'components/FieldWithPrompt';
@@ -72,7 +72,7 @@ function CredentialPluginInput(props) {
               onClick={() => setShowPluginWizard(true)}
               isDisabled={isDisabled || disableFieldAndButtons}
             >
-              <KeyIcon />
+              <KeyIcon size={16} data-original-icon="KeyIcon" />
             </Button>
           </Tooltip>
         </InputGroup>
diff --git a/awx/ui/src/screens/Credential/shared/CredentialPlugins/CredentialPluginSelected.js b/awx/ui/src/screens/Credential/shared/CredentialPlugins/CredentialPluginSelected.js
index 2b739651..976e0bb1 100644
--- a/awx/ui/src/screens/Credential/shared/CredentialPlugins/CredentialPluginSelected.js
+++ b/awx/ui/src/screens/Credential/shared/CredentialPlugins/CredentialPluginSelected.js
@@ -3,7 +3,7 @@ import { func } from 'prop-types';
 import { Trans, useLingui } from '@lingui/react/macro';
 import styled from 'styled-components';
 import { Button, ButtonVariant, Tooltip } from '@patternfly/react-core';
-import { KeyIcon } from '@patternfly/react-icons';
+import { LucideIconKey as KeyIcon } from '@ctrliq/quantic-react';
 import CredentialChip from 'components/CredentialChip';
 import { Credential } from 'types';
 
@@ -43,7 +43,7 @@ function CredentialPluginSelected({
             onClick={onEditPlugin}
             variant={ButtonVariant.control}
           >
-            <KeyIcon />
+            <KeyIcon size={16} data-original-icon="KeyIcon" />
           </Button>
         </Tooltip>
       </SelectedCredential>
diff --git a/awx/ui/src/screens/CredentialType/CredentialType.js b/awx/ui/src/screens/CredentialType/CredentialType.js
index f5a42283..0664a541 100644
--- a/awx/ui/src/screens/CredentialType/CredentialType.js
+++ b/awx/ui/src/screens/CredentialType/CredentialType.js
@@ -10,7 +10,7 @@ import {
 
 import { useLingui } from '@lingui/react/macro';
 import { Card, PageSection } from '@patternfly/react-core';
-import { CaretLeftIcon } from '@patternfly/react-icons';
+import { LucideIconChevronLeft } from '@ctrliq/quantic-react';
 
 import useRequest from 'hooks/useRequest';
 import { CredentialTypesAPI } from 'api';
@@ -52,7 +52,7 @@ function CredentialType({ setBreadcrumb }) {
     {
       name: (
         <>
-          <CaretLeftIcon />
+          <LucideIconChevronLeft />
           {t`Back to credential types`}
         </>
       ),
diff --git a/awx/ui/src/screens/CredentialType/CredentialTypeList/CredentialTypeListItem.js b/awx/ui/src/screens/CredentialType/CredentialTypeList/CredentialTypeListItem.js
index 14009bd2..56bc3b9c 100644
--- a/awx/ui/src/screens/CredentialType/CredentialTypeList/CredentialTypeListItem.js
+++ b/awx/ui/src/screens/CredentialType/CredentialTypeList/CredentialTypeListItem.js
@@ -4,7 +4,7 @@ import { useLingui } from '@lingui/react/macro';
 import { Link } from 'react-router-dom';
 import { Button } from '@patternfly/react-core';
 import { Tr, Td } from '@patternfly/react-table';
-import { PencilAltIcon } from '@patternfly/react-icons';
+import { LucideIconPencil } from '@ctrliq/quantic-react';
 import { ActionsTd, ActionItem, TdBreakWord } from 'components/PaginatedTable';
 import { CredentialType } from 'types';
 
@@ -48,7 +48,7 @@ function CredentialTypeListItem({
             component={Link}
             to={`/credential_types/${credentialType.id}/edit`}
           >
-            <PencilAltIcon />
+            <LucideIconPencil data-original-icon="PencilAltIcon" size="sm" />
           </Button>
         </ActionItem>
       </ActionsTd>
diff --git a/awx/ui/src/screens/Dashboard/Dashboard.js b/awx/ui/src/screens/Dashboard/Dashboard.js
index 17a30c5a..6d8cad16 100644
--- a/awx/ui/src/screens/Dashboard/Dashboard.js
+++ b/awx/ui/src/screens/Dashboard/Dashboard.js
@@ -13,7 +13,7 @@ import {
   Tab,
   TabTitleText,
 } from '@patternfly/react-core';
-import { InfoCircleIcon } from '@patternfly/react-icons';
+import { LucideIconInfo as InfoCircleIcon } from '@ctrliq/quantic-react';
 
 import { useConfig } from 'contexts/Config';
 import useBrandName from 'hooks/useBrandName';
@@ -83,7 +83,7 @@ function Dashboard() {
         <Banner variant="info">
           <Trans>
             <p>
-              <InfoCircleIcon /> A tech preview of the new {brandName} user
+              <InfoCircleIcon size={16} data-original-icon="InfoCircleIcon" /> A tech preview of the new {brandName} user
               interface can be found <a href="/ui_next">here</a>.
             </p>
           </Trans>
diff --git a/awx/ui/src/screens/Dashboard/shared/Count.js b/awx/ui/src/screens/Dashboard/shared/Count.js
index eb6c6925..dcd0821b 100644
--- a/awx/ui/src/screens/Dashboard/shared/Count.js
+++ b/awx/ui/src/screens/Dashboard/shared/Count.js
@@ -9,18 +9,19 @@ const CountCard = styled(Card)`
   align-items: center;
   padding-top: var(--pf-global--spacer--sm);
   cursor: pointer;
+  color: var(--quantic-text-tertiary);
   text-align: center;
-  color: var(--pf-global--palette--black-1000);
   text-decoration: none;
 
   & h2 {
     font-size: var(--pf-global--FontSize--4xl);
-    color: var(--pf-global--palette--blue-400);
+    color: var(--quantic-text-primary);
     text-decoration: none;
+    margin-bottom: var(--quantic-spacing-4);
   }
 
   & h2.failed {
-    color: var(--pf-global--palette--red-200);
+    color: var(--quantic-text-tertiary);
   }
 `;
 
diff --git a/awx/ui/src/screens/Dashboard/shared/LineChart.js b/awx/ui/src/screens/Dashboard/shared/LineChart.js
index 61c1f9c5..97fca5de 100644
--- a/awx/ui/src/screens/Dashboard/shared/LineChart.js
+++ b/awx/ui/src/screens/Dashboard/shared/LineChart.js
@@ -47,7 +47,11 @@ function LineChart({ id, data, height, pageContext, jobStatus }) {
     const y = d3.scaleLinear().range([height, 0]);
 
     // [success, fail, total]
-    const colors = d3.scaleOrdinal(['#6EC664', '#A30000', '#06C']);
+    const colors = d3.scaleOrdinal([
+      'var(--quantic-color-success-600)',
+      'var(--quantic-color-error-800)',
+      'var(--quantic-color-gray-blue-500)',
+    ]);
     const svg = d3
       .select(`#${id}`)
       .append('svg')
@@ -57,7 +61,8 @@ function LineChart({ id, data, height, pageContext, jobStatus }) {
       .attr('z', 100)
       .append('g')
       .attr('id', 'chart-container')
-      .attr('transform', `translate(${margin.left}, ${margin.top})`);
+      .attr('transform', `translate(${margin.left}, ${margin.top})`)
+      .attr('fill', 'var(--quantic-text-primary)');
     // Tooltip
     const tooltip = new ChartTooltip({
       svg: `#${id}`,
@@ -115,7 +120,7 @@ function LineChart({ id, data, height, pageContext, jobStatus }) {
           .tickFormat(d3.format('d'))
       )
       .selectAll('line')
-      .attr('stroke', '#d7d7d7');
+      .attr('stroke', 'var(--quantic-border-primary)');
     svg.selectAll('.y-axis .tick text').attr('x', -5);
 
     // text label for the y axis
@@ -140,7 +145,7 @@ function LineChart({ id, data, height, pageContext, jobStatus }) {
         .filter((item) => item);
     }
 
-    svg.select('.domain').attr('stroke', '#d7d7d7');
+    svg.select('.domain').attr('stroke', 'var(--quantic-border-primary)');
 
     svg
       .append('g')
@@ -154,7 +159,7 @@ function LineChart({ id, data, height, pageContext, jobStatus }) {
           .tickFormat(d3.timeFormat('%-m/%-d')) // "1/19"
       ) // "Jan-01"
       .selectAll('line')
-      .attr('stroke', '#d7d7d7');
+      .attr('stroke', 'var(--quantic-border-secondary)');
 
     svg.selectAll('.x-axis .tick text').attr('y', 10);
 
@@ -271,7 +276,14 @@ function LineChart({ id, data, height, pageContext, jobStatus }) {
     return () => window.removeEventListener('resize', handleResize);
   }, [draw]);
 
-  return <div id={id} />;
+  return (
+    <div
+      id={id}
+      style={{
+        marginTop: 'var(--quantic-spacing-12)',
+      }}
+    />
+  );
 }
 
 LineChart.propTypes = {
diff --git a/awx/ui/src/screens/ExecutionEnvironment/ExecutionEnvironment.js b/awx/ui/src/screens/ExecutionEnvironment/ExecutionEnvironment.js
index bf3f1c1b..9938dfe2 100644
--- a/awx/ui/src/screens/ExecutionEnvironment/ExecutionEnvironment.js
+++ b/awx/ui/src/screens/ExecutionEnvironment/ExecutionEnvironment.js
@@ -10,7 +10,7 @@ import {
 
 import { useLingui } from '@lingui/react/macro';
 import { Card, PageSection } from '@patternfly/react-core';
-import { CaretLeftIcon } from '@patternfly/react-icons';
+import { LucideIconChevronLeft } from '@ctrliq/quantic-react';
 
 import useRequest from 'hooks/useRequest';
 import { ExecutionEnvironmentsAPI } from 'api';
@@ -54,7 +54,7 @@ function ExecutionEnvironment({ setBreadcrumb }) {
     {
       name: (
         <>
-          <CaretLeftIcon />
+          <LucideIconChevronLeft />
           {t`Back to execution environments`}
         </>
       ),
diff --git a/awx/ui/src/screens/ExecutionEnvironment/ExecutionEnvironmentList/ExecutionEnvironmentListItem.js b/awx/ui/src/screens/ExecutionEnvironment/ExecutionEnvironmentList/ExecutionEnvironmentListItem.js
index 6127c51e..1153c985 100644
--- a/awx/ui/src/screens/ExecutionEnvironment/ExecutionEnvironmentList/ExecutionEnvironmentListItem.js
+++ b/awx/ui/src/screens/ExecutionEnvironment/ExecutionEnvironmentList/ExecutionEnvironmentListItem.js
@@ -4,7 +4,7 @@ import { useLingui } from '@lingui/react/macro';
 import { Link } from 'react-router-dom';
 import { Button } from '@patternfly/react-core';
 import { Tr, Td } from '@patternfly/react-table';
-import { PencilAltIcon } from '@patternfly/react-icons';
+import { LucideIconPencil } from '@ctrliq/quantic-react';
 
 import { ActionsTd, ActionItem, TdBreakWord } from 'components/PaginatedTable';
 import CopyButton from 'components/CopyButton';
@@ -96,7 +96,7 @@ function ExecutionEnvironmentListItem({
             component={Link}
             to={`/execution_environments/${executionEnvironment.id}/edit`}
           >
-            <PencilAltIcon />
+            <LucideIconPencil data-original-icon="PencilAltIcon" size="sm" />
           </Button>
         </ActionItem>
         <ActionItem
diff --git a/awx/ui/src/screens/Host/Host.js b/awx/ui/src/screens/Host/Host.js
index 3efb7435..5707c22a 100644
--- a/awx/ui/src/screens/Host/Host.js
+++ b/awx/ui/src/screens/Host/Host.js
@@ -10,7 +10,7 @@ import {
   useRouteMatch,
   useLocation,
 } from 'react-router-dom';
-import { CaretLeftIcon } from '@patternfly/react-icons';
+import { LucideIconChevronLeft } from '@ctrliq/quantic-react';
 import { Card, PageSection } from '@patternfly/react-core';
 import RoutedTabs from 'components/RoutedTabs';
 import ContentError from 'components/ContentError';
@@ -48,7 +48,7 @@ function Host({ setBreadcrumb }) {
     {
       name: (
         <>
-          <CaretLeftIcon />
+          <LucideIconChevronLeft />
           {t`Back to Hosts`}
         </>
       ),
@@ -136,9 +136,7 @@ function Host({ setBreadcrumb }) {
           ]}
           <Route key="not-found" path="*">
             <ContentError isNotFound>
-              <Link to={`${match.url}/details`}>
-                {t`View Host Details`}
-              </Link>
+              <Link to={`${match.url}/details`}>{t`View Host Details`}</Link>
             </ContentError>
           </Route>
         </Switch>
diff --git a/awx/ui/src/screens/Host/HostGroups/HostGroupItem.js b/awx/ui/src/screens/Host/HostGroups/HostGroupItem.js
index 15788d9e..4c6a590a 100644
--- a/awx/ui/src/screens/Host/HostGroups/HostGroupItem.js
+++ b/awx/ui/src/screens/Host/HostGroups/HostGroupItem.js
@@ -6,7 +6,7 @@ import { useLingui } from '@lingui/react/macro';
 import { Button } from '@patternfly/react-core';
 import { Tr, Td } from '@patternfly/react-table';
 import { Link } from 'react-router-dom';
-import { PencilAltIcon } from '@patternfly/react-icons';
+import { LucideIconPencil } from '@ctrliq/quantic-react';
 import { ActionsTd, ActionItem } from 'components/PaginatedTable';
 import { Group } from 'types';
 
@@ -43,7 +43,7 @@ function HostGroupItem({ group, inventoryId, isSelected, onSelect, rowIndex }) {
             component={Link}
             to={editUrl}
           >
-            <PencilAltIcon />
+            <LucideIconPencil data-original-icon="PencilAltIcon" size="sm" />
           </Button>
         </ActionItem>
       </ActionsTd>
diff --git a/awx/ui/src/screens/Host/HostList/HostListItem.js b/awx/ui/src/screens/Host/HostList/HostListItem.js
index e96df352..3fbb9b8d 100644
--- a/awx/ui/src/screens/Host/HostList/HostListItem.js
+++ b/awx/ui/src/screens/Host/HostList/HostListItem.js
@@ -7,7 +7,7 @@ import { useLingui } from '@lingui/react/macro';
 import { Button } from '@patternfly/react-core';
 import { Tr, Td } from '@patternfly/react-table';
 import { Link } from 'react-router-dom';
-import { PencilAltIcon } from '@patternfly/react-icons';
+import { LucideIconPencil } from '@ctrliq/quantic-react';
 import { ActionsTd, ActionItem, TdBreakWord } from 'components/PaginatedTable';
 import { Host } from 'types';
 import HostToggle from 'components/HostToggle';
@@ -72,7 +72,7 @@ function HostListItem({ host, isSelected, onSelect, detailUrl, rowIndex }) {
             component={Link}
             to={`/hosts/${host.id}/edit`}
           >
-            <PencilAltIcon />
+            <LucideIconPencil data-original-icon="PencilAltIcon" size="sm" />
           </Button>
         </ActionItem>
       </ActionsTd>
diff --git a/awx/ui/src/screens/InstanceGroup/ContainerGroup.js b/awx/ui/src/screens/InstanceGroup/ContainerGroup.js
index 95276e91..ca6aa60a 100644
--- a/awx/ui/src/screens/InstanceGroup/ContainerGroup.js
+++ b/awx/ui/src/screens/InstanceGroup/ContainerGroup.js
@@ -9,7 +9,7 @@ import {
 } from 'react-router-dom';
 
 import { useLingui } from '@lingui/react/macro';
-import { CaretLeftIcon } from '@patternfly/react-icons';
+import { LucideIconChevronLeft } from '@ctrliq/quantic-react';
 import { Card, PageSection } from '@patternfly/react-core';
 
 import useRequest from 'hooks/useRequest';
@@ -56,7 +56,7 @@ function ContainerGroup({ setBreadcrumb }) {
     {
       name: (
         <>
-          <CaretLeftIcon />
+          <LucideIconChevronLeft />
           {t`Back to instance groups`}
         </>
       ),
@@ -84,9 +84,7 @@ function ContainerGroup({ setBreadcrumb }) {
               <span>
                 {t`Container group not found.`}
 
-                <Link to="/instance_groups">
-                  {t`View all instance groups`}
-                </Link>
+                <Link to="/instance_groups">{t`View all instance groups`}</Link>
               </span>
             )}
           </ContentError>
diff --git a/awx/ui/src/screens/InstanceGroup/InstanceDetails/InstanceDetails.js b/awx/ui/src/screens/InstanceGroup/InstanceDetails/InstanceDetails.js
index 08bf51f1..1646e01d 100644
--- a/awx/ui/src/screens/InstanceGroup/InstanceDetails/InstanceDetails.js
+++ b/awx/ui/src/screens/InstanceGroup/InstanceDetails/InstanceDetails.js
@@ -13,7 +13,7 @@ import {
   Tooltip,
   Slider,
 } from '@patternfly/react-core';
-import { CaretLeftIcon, OutlinedClockIcon } from '@patternfly/react-icons';
+import { LucideIconChevronLeft, LucideIconClock } from '@ctrliq/quantic-react';
 import styled from 'styled-components';
 
 import { useConfig } from 'contexts/Config';
@@ -163,7 +163,7 @@ function InstanceDetails({ setBreadcrumb, instanceGroup }) {
       {instance.health_check_pending ? (
         <>
           {' '}
-          <OutlinedClockIcon />
+          <LucideIconClock />
         </>
       ) : null}
     </>
@@ -177,7 +177,7 @@ function InstanceDetails({ setBreadcrumb, instanceGroup }) {
     {
       name: (
         <>
-          <CaretLeftIcon />
+          <LucideIconChevronLeft />
           {t`Back to Instances`}
         </>
       ),
@@ -222,16 +222,9 @@ function InstanceDetails({ setBreadcrumb, instanceGroup }) {
           />
           <Detail
             label={t`Policy Type`}
-            value={
-              instance.managed_by_policy
-                ? t`Auto`
-                : t`Manual`
-            }
-          />
-          <Detail
-            label={t`Running Jobs`}
-            value={instance.jobs_running}
+            value={instance.managed_by_policy ? t`Auto` : t`Manual`}
           />
+          <Detail label={t`Running Jobs`} value={instance.jobs_running} />
           <Detail label={t`Total Jobs`} value={instance.jobs_total} />
           <Detail
             label={t`Last Health Check`}
@@ -262,7 +255,9 @@ function InstanceDetails({ setBreadcrumb, instanceGroup }) {
                 </div>
                 <SliderForks data-cy="slider-forks">
                   <div data-cy="number-forks">
-                    {i18n._('{count, plural, one {# fork} other {# forks}}', { count: forks })}
+                    {i18n._('{count, plural, one {# fork} other {# forks}}', {
+                      count: forks,
+                    })}
                   </div>
                   <Slider
                     areCustomStepsContinuous
diff --git a/awx/ui/src/screens/InstanceGroup/InstanceGroup.js b/awx/ui/src/screens/InstanceGroup/InstanceGroup.js
index 9825176f..57d33336 100644
--- a/awx/ui/src/screens/InstanceGroup/InstanceGroup.js
+++ b/awx/ui/src/screens/InstanceGroup/InstanceGroup.js
@@ -9,7 +9,7 @@ import {
 } from 'react-router-dom';
 
 import { useLingui } from '@lingui/react/macro';
-import { CaretLeftIcon } from '@patternfly/react-icons';
+import { LucideIconChevronLeft } from '@ctrliq/quantic-react';
 import { Card, PageSection } from '@patternfly/react-core';
 
 import useRequest from 'hooks/useRequest';
@@ -58,7 +58,7 @@ function InstanceGroup({ setBreadcrumb }) {
     {
       name: (
         <>
-          <CaretLeftIcon />
+          <LucideIconChevronLeft />
           {t`Back to Instance Groups`}
         </>
       ),
@@ -92,9 +92,7 @@ function InstanceGroup({ setBreadcrumb }) {
               <span>
                 {t`Instance group not found.`}
 
-                <Link to="/instance_groups">
-                  {t`View all instance groups`}
-                </Link>
+                <Link to="/instance_groups">{t`View all instance groups`}</Link>
               </span>
             )}
           </ContentError>
diff --git a/awx/ui/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupListItem.js b/awx/ui/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupListItem.js
index 594971ca..5787211d 100644
--- a/awx/ui/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupListItem.js
+++ b/awx/ui/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupListItem.js
@@ -12,7 +12,7 @@ import {
   ProgressSize,
 } from '@patternfly/react-core';
 import { Tr, Td } from '@patternfly/react-table';
-import { PencilAltIcon } from '@patternfly/react-icons';
+import { LucideIconPencil } from '@ctrliq/quantic-react';
 import styled from 'styled-components';
 import { ActionsTd, ActionItem, TdBreakWord } from 'components/PaginatedTable';
 import { InstanceGroup } from 'types';
@@ -70,9 +70,7 @@ function InstanceGroupListItem({
           ? t`Container group`.toString()
           : t`Instance group`.toString()}
       </Td>
-      <Td dataLabel={t`Running jobs`}>
-        {instanceGroup.jobs_running}
-      </Td>
+      <Td dataLabel={t`Running jobs`}>{instanceGroup.jobs_running}</Td>
       <Td dataLabel={t`Total jobs`}>{instanceGroup.jobs_total}</Td>
       <Td dataLabel={t`Instances`}>{instanceGroup.instances}</Td>
       <Td dataLabel={t`Capacity`}>{usedCapacity(instanceGroup)}</Td>
@@ -92,7 +90,7 @@ function InstanceGroupListItem({
                 : `/instance_groups/${instanceGroup.id}/edit`
             }
           >
-            <PencilAltIcon />
+            <LucideIconPencil data-original-icon="PencilAltIcon" size="xs" />
           </Button>
         </ActionItem>
       </ActionsTd>
diff --git a/awx/ui/src/screens/InstanceGroup/Instances/InstanceListItem.js b/awx/ui/src/screens/InstanceGroup/Instances/InstanceListItem.js
index 890f9bca..39711203 100644
--- a/awx/ui/src/screens/InstanceGroup/Instances/InstanceListItem.js
+++ b/awx/ui/src/screens/InstanceGroup/Instances/InstanceListItem.js
@@ -12,7 +12,7 @@ import {
   Slider,
   Tooltip,
 } from '@patternfly/react-core';
-import { OutlinedClockIcon } from '@patternfly/react-icons';
+import { LucideIconAlarmClock } from '@ctrliq/quantic-react';
 import { Tr, Td, ExpandableRowContent } from '@patternfly/react-table';
 import getDocsBaseUrl from 'util/getDocsBaseUrl';
 import { formatDateString } from 'util/dates';
@@ -110,7 +110,7 @@ function InstanceListItem({
       {instance.health_check_pending ? (
         <>
           {' '}
-          <OutlinedClockIcon />
+          <LucideIconAlarmClock data-original-icon="OutlinedClockIcon" />
         </>
       ) : null}
     </>
@@ -158,12 +158,12 @@ function InstanceListItem({
         <Td dataLabel={t`Node Type`}>{instance.node_type}</Td>
         <Td dataLabel={t`Capacity Adjustment`}>
           <SliderHolder data-cy="slider-holder">
-            <div data-cy="cpu-capacity">
-              {t`CPU ${instance.cpu_capacity}`}
-            </div>
+            <div data-cy="cpu-capacity">{t`CPU ${instance.cpu_capacity}`}</div>
             <SliderForks data-cy="slider-forks">
               <div data-cy="number-forks">
-                {i18n._('{count, plural, one {# fork} other {# forks}}', { count: forks })}
+                {i18n._('{count, plural, one {# fork} other {# forks}}', {
+                  count: forks,
+                })}
               </div>
               <Slider
                 areCustomStepsContinuous
@@ -176,9 +176,7 @@ function InstanceListItem({
                 data-cy="slider"
               />
             </SliderForks>
-            <div data-cy="mem-capacity">
-              {t`RAM ${instance.mem_capacity}`}
-            </div>
+            <div data-cy="mem-capacity">{t`RAM ${instance.mem_capacity}`}</div>
           </SliderHolder>
         </Td>
         <Td
@@ -221,11 +219,7 @@ function InstanceListItem({
               <Detail
                 data-cy="policy-type"
                 label={t`Policy Type`}
-                value={
-                  instance.managed_by_policy
-                    ? t`Auto`
-                    : t`Manual`
-                }
+                value={instance.managed_by_policy ? t`Auto` : t`Manual`}
               />
               <Detail
                 data-cy="last-health-check"
diff --git a/awx/ui/src/screens/Instances/Instance.js b/awx/ui/src/screens/Instances/Instance.js
index 6d9cbc83..9f1bd628 100644
--- a/awx/ui/src/screens/Instances/Instance.js
+++ b/awx/ui/src/screens/Instances/Instance.js
@@ -2,7 +2,7 @@ import React, { useCallback, useEffect } from 'react';
 import { useLingui } from '@lingui/react/macro';
 
 import { Switch, Route, Redirect, Link, useRouteMatch } from 'react-router-dom';
-import { CaretLeftIcon } from '@patternfly/react-icons';
+import { LucideIconChevronLeft } from '@ctrliq/quantic-react';
 import { Card, PageSection } from '@patternfly/react-core';
 import { useConfig } from 'contexts/Config';
 import ContentError from 'components/ContentError';
@@ -24,7 +24,7 @@ function Instance({ setBreadcrumb }) {
     {
       name: (
         <>
-          <CaretLeftIcon />
+          <LucideIconChevronLeft />
           {t`Back to Instances`}
         </>
       ),
diff --git a/awx/ui/src/screens/Instances/InstanceDetail/InstanceDetail.js b/awx/ui/src/screens/Instances/InstanceDetail/InstanceDetail.js
index 39dd63cf..88aea3f2 100644
--- a/awx/ui/src/screens/Instances/InstanceDetail/InstanceDetail.js
+++ b/awx/ui/src/screens/Instances/InstanceDetail/InstanceDetail.js
@@ -11,7 +11,7 @@ import {
   Tooltip,
   Slider,
 } from '@patternfly/react-core';
-import { DownloadIcon, OutlinedClockIcon } from '@patternfly/react-icons';
+import { LucideIconDownload, LucideIconClock } from '@ctrliq/quantic-react';
 import styled from 'styled-components';
 
 import { useConfig } from 'contexts/Config';
@@ -151,7 +151,7 @@ function InstanceDetail({ setBreadcrumb, isK8s }) {
       {instance.health_check_pending ? (
         <>
           {' '}
-          <OutlinedClockIcon />
+          <LucideIconClock />
         </>
       ) : null}
     </>
@@ -208,10 +208,7 @@ function InstanceDetail({ setBreadcrumb, isK8s }) {
           />
           <Detail label={t`Node Type`} value={instance.node_type} />
           <Detail label={t`Host`} value={instance.ip_address} />
-          <Detail
-            label={t`Listener Port`}
-            value={instance.listener_port}
-          />
+          <Detail label={t`Listener Port`} value={instance.listener_port} />
           {!isManaged && instance.related?.install_bundle && (
             <Detail
               label={t`Install Bundle`}
@@ -226,7 +223,7 @@ function InstanceDetail({ setBreadcrumb, isK8s }) {
                     dataCy="install-bundle-download-button"
                     rel="noopener noreferrer"
                   >
-                    <DownloadIcon />
+                    <LucideIconDownload />
                   </Button>
                 </Tooltip>
               }
@@ -235,31 +232,17 @@ function InstanceDetail({ setBreadcrumb, isK8s }) {
           {(isExecutionNode || isHopNode) && (
             <Detail
               label={t`Peers from control nodes`}
-              value={
-                instance.peers_from_control_nodes
-                  ? t`On`
-                  : t`Off`
-              }
+              value={instance.peers_from_control_nodes ? t`On` : t`Off`}
             />
           )}
           {!isHopNode && (
             <>
               <Detail
                 label={t`Policy Type`}
-                value={
-                  instance.managed_by_policy
-                    ? t`Auto`
-                    : t`Manual`
-                }
-              />
-              <Detail
-                label={t`Running Jobs`}
-                value={instance.jobs_running}
-              />
-              <Detail
-                label={t`Total Jobs`}
-                value={instance.jobs_total}
+                value={instance.managed_by_policy ? t`Auto` : t`Manual`}
               />
+              <Detail label={t`Running Jobs`} value={instance.jobs_running} />
+              <Detail label={t`Total Jobs`} value={instance.jobs_total} />
               {instanceGroups && (
                 <Detail
                   fullWidth
@@ -302,7 +285,10 @@ function InstanceDetail({ setBreadcrumb, isK8s }) {
                     </div>
                     <SliderForks data-cy="slider-forks">
                       <div data-cy="number-forks">
-                        {i18n._('{count, plural, one {# fork} other {# forks}}', { count: forks })}
+                        {i18n._(
+                          '{count, plural, one {# fork} other {# forks}}',
+                          { count: forks }
+                        )}
                       </div>
                       <Slider
                         areCustomStepsContinuous
diff --git a/awx/ui/src/screens/Instances/InstanceList/InstanceListItem.js b/awx/ui/src/screens/Instances/InstanceList/InstanceListItem.js
index 59ec3bae..24bf06d2 100644
--- a/awx/ui/src/screens/Instances/InstanceList/InstanceListItem.js
+++ b/awx/ui/src/screens/Instances/InstanceList/InstanceListItem.js
@@ -11,7 +11,7 @@ import {
   Slider,
   Tooltip,
 } from '@patternfly/react-core';
-import { OutlinedClockIcon } from '@patternfly/react-icons';
+import { LucideIconAlarmClock } from '@ctrliq/quantic-react';
 import { Tr, Td, ExpandableRowContent } from '@patternfly/react-table';
 import getDocsBaseUrl from 'util/getDocsBaseUrl';
 import { formatDateString } from 'util/dates';
@@ -36,6 +36,7 @@ const SliderHolder = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
+  font-size: var(--quantic-font-size-body-xs);
 `;
 
 const SliderForks = styled.div`
@@ -108,7 +109,7 @@ function InstanceListItem({
       {instance.health_check_pending ? (
         <>
           {' '}
-          <OutlinedClockIcon />
+          <LucideIconAlarmClock data-original-icon="OutlinedClockIcon" />
         </>
       ) : null}
     </>
@@ -176,7 +177,9 @@ function InstanceListItem({
                 </div>
                 <SliderForks data-cy="slider-forks">
                   <div data-cy="number-forks">
-                    {i18n._('{count, plural, one {# fork} other {# forks}}', { count: forks })}
+                    {i18n._('{count, plural, one {# fork} other {# forks}}', {
+                      count: forks,
+                    })}
                   </div>
                   <Slider
                     areCustomStepsContinuous
@@ -239,11 +242,7 @@ function InstanceListItem({
                 <Detail
                   data-cy="policy-type"
                   label={t`Policy Type`}
-                  value={
-                    instance.managed_by_policy
-                      ? t`Auto`
-                      : t`Manual`
-                  }
+                  value={instance.managed_by_policy ? t`Auto` : t`Manual`}
                 />
                 <Detail
                   data-cy="last-health-check"
diff --git a/awx/ui/src/screens/Inventory/AdvancedInventoryHost/AdvancedInventoryHost.js b/awx/ui/src/screens/Inventory/AdvancedInventoryHost/AdvancedInventoryHost.js
index e92bd2c0..02e55954 100644
--- a/awx/ui/src/screens/Inventory/AdvancedInventoryHost/AdvancedInventoryHost.js
+++ b/awx/ui/src/screens/Inventory/AdvancedInventoryHost/AdvancedInventoryHost.js
@@ -2,7 +2,7 @@ import React, { useEffect, useCallback } from 'react';
 
 import { useLingui } from '@lingui/react/macro';
 import { Link, Redirect, Route, Switch, useRouteMatch } from 'react-router-dom';
-import { CaretLeftIcon } from '@patternfly/react-icons';
+import { LucideIconChevronLeft } from '@ctrliq/quantic-react';
 import ContentError from 'components/ContentError';
 import ContentLoading from 'components/ContentLoading';
 import RoutedTabs from 'components/RoutedTabs';
@@ -49,7 +49,7 @@ function AdvancedInventoryHost({ inventory, setBreadcrumb }) {
     {
       name: (
         <>
-          <CaretLeftIcon />
+          <LucideIconChevronLeft />
           {t`Back to Hosts`}
         </>
       ),
diff --git a/awx/ui/src/screens/Inventory/ConstructedInventory.js b/awx/ui/src/screens/Inventory/ConstructedInventory.js
index 596575c1..5000dd5b 100644
--- a/awx/ui/src/screens/Inventory/ConstructedInventory.js
+++ b/awx/ui/src/screens/Inventory/ConstructedInventory.js
@@ -8,7 +8,7 @@ import {
   useRouteMatch,
   useLocation,
 } from 'react-router-dom';
-import { CaretLeftIcon } from '@patternfly/react-icons';
+import { LucideIconChevronLeft } from '@ctrliq/quantic-react';
 import { Card, PageSection } from '@patternfly/react-core';
 
 import useRequest from 'hooks/useRequest';
@@ -60,7 +60,7 @@ function ConstructedInventory({ setBreadcrumb }) {
     {
       name: (
         <>
-          <CaretLeftIcon />
+          <LucideIconChevronLeft />
           {t`Back to Inventories`}
         </>
       ),
@@ -101,9 +101,7 @@ function ConstructedInventory({ setBreadcrumb }) {
             {contentError?.response?.status === 404 && (
               <span>
                 {t`Constructed Inventory not found.`}{' '}
-                <Link to="/inventories">
-                  {t`View all Inventories.`}
-                </Link>
+                <Link to="/inventories">{t`View all Inventories.`}</Link>
               </span>
             )}
           </ContentError>
diff --git a/awx/ui/src/screens/Inventory/Inventory.js b/awx/ui/src/screens/Inventory/Inventory.js
index f4393014..9ed22dc7 100644
--- a/awx/ui/src/screens/Inventory/Inventory.js
+++ b/awx/ui/src/screens/Inventory/Inventory.js
@@ -9,7 +9,7 @@ import {
   useLocation,
   useRouteMatch,
 } from 'react-router-dom';
-import { CaretLeftIcon } from '@patternfly/react-icons';
+import { LucideIconChevronLeft } from '@ctrliq/quantic-react';
 import { Card, PageSection } from '@patternfly/react-core';
 import ContentError from 'components/ContentError';
 import ContentLoading from 'components/ContentLoading';
@@ -55,7 +55,7 @@ function Inventory({ setBreadcrumb }) {
     {
       name: (
         <>
-          <CaretLeftIcon />
+          <LucideIconChevronLeft />
           {t`Back to Inventories`}
         </>
       ),
@@ -98,9 +98,7 @@ function Inventory({ setBreadcrumb }) {
             {contentError.response?.status === 404 && (
               <span>
                 {t`Inventory not found.`}{' '}
-                <Link to="/inventories">
-                  {t`View all Inventories.`}
-                </Link>
+                <Link to="/inventories">{t`View all Inventories.`}</Link>
               </span>
             )}
           </ContentError>
diff --git a/awx/ui/src/screens/Inventory/InventoryGroup/InventoryGroup.js b/awx/ui/src/screens/Inventory/InventoryGroup/InventoryGroup.js
index 83007636..873c417a 100644
--- a/awx/ui/src/screens/Inventory/InventoryGroup/InventoryGroup.js
+++ b/awx/ui/src/screens/Inventory/InventoryGroup/InventoryGroup.js
@@ -8,7 +8,7 @@ import {
   useLocation,
   useParams,
 } from 'react-router-dom';
-import { CaretLeftIcon } from '@patternfly/react-icons';
+import { LucideIconChevronLeft } from '@ctrliq/quantic-react';
 import RoutedTabs from 'components/RoutedTabs';
 import ContentError from 'components/ContentError';
 import ContentLoading from 'components/ContentLoading';
@@ -46,7 +46,7 @@ function InventoryGroup({ setBreadcrumb, inventory }) {
     {
       name: (
         <>
-          <CaretLeftIcon aria-label={t`Back to Groups`} />
+          <LucideIconChevronLeft aria-label={t`Back to Groups`} />
           {t`Back to Groups`}
         </>
       ),
diff --git a/awx/ui/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostListItem.js b/awx/ui/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostListItem.js
index 799a7a10..de25c354 100644
--- a/awx/ui/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostListItem.js
+++ b/awx/ui/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostListItem.js
@@ -4,7 +4,7 @@ import { Link, useParams } from 'react-router-dom';
 import { string, bool, func, number } from 'prop-types';
 import { useLingui } from '@lingui/react/macro';
 import { Button, Tooltip } from '@patternfly/react-core';
-import { PencilAltIcon } from '@patternfly/react-icons';
+import { LucideIconPencil } from '@ctrliq/quantic-react';
 
 import { Td, Tr } from '@patternfly/react-table';
 import { ActionItem, ActionsTd } from 'components/PaginatedTable';
@@ -47,9 +47,7 @@ function InventoryGroupHostListItem({
           <b>{host.name}</b>
         </Link>
       </Td>
-      <Td dataLabel={t`host-description-${host.id}`}>
-        {host.description}
-      </Td>
+      <Td dataLabel={t`host-description-${host.id}`}>{host.description}</Td>
       <Td dataLabel={t`Activity`}>
         <Sparkline jobs={recentPlaybookJobs} />
       </Td>
@@ -73,7 +71,10 @@ function InventoryGroupHostListItem({
                 component={Link}
                 to={`${editUrl}`}
               >
-                <PencilAltIcon />
+                <LucideIconPencil
+                  data-original-icon="PencilAltIcon"
+                  size="sm"
+                />
               </Button>
             </Tooltip>
           </ActionItem>
diff --git a/awx/ui/src/screens/Inventory/InventoryGroups/InventoryGroupItem.js b/awx/ui/src/screens/Inventory/InventoryGroups/InventoryGroupItem.js
index b14b79be..1e6e79cd 100644
--- a/awx/ui/src/screens/Inventory/InventoryGroups/InventoryGroupItem.js
+++ b/awx/ui/src/screens/Inventory/InventoryGroups/InventoryGroupItem.js
@@ -6,7 +6,7 @@ import { Button } from '@patternfly/react-core';
 import { Tr, Td } from '@patternfly/react-table';
 
 import { Link, useParams } from 'react-router-dom';
-import { PencilAltIcon } from '@patternfly/react-icons';
+import { LucideIconPencil } from '@ctrliq/quantic-react';
 import { ActionsTd, ActionItem } from 'components/PaginatedTable';
 import { Group } from 'types';
 
@@ -45,7 +45,7 @@ function InventoryGroupItem({ group, isSelected, onSelect, rowIndex }) {
               component={Link}
               to={editUrl}
             >
-              <PencilAltIcon />
+              <LucideIconPencil data-original-icon="PencilAltIcon" size="sm" />
             </Button>
           </ActionItem>
         </ActionsTd>
diff --git a/awx/ui/src/screens/Inventory/InventoryHost/InventoryHost.js b/awx/ui/src/screens/Inventory/InventoryHost/InventoryHost.js
index 789fd0bb..efc5b43c 100644
--- a/awx/ui/src/screens/Inventory/InventoryHost/InventoryHost.js
+++ b/awx/ui/src/screens/Inventory/InventoryHost/InventoryHost.js
@@ -9,7 +9,7 @@ import {
   useLocation,
 } from 'react-router-dom';
 import { Card } from '@patternfly/react-core';
-import { CaretLeftIcon } from '@patternfly/react-icons';
+import { LucideIconChevronLeft } from '@ctrliq/quantic-react';
 import useRequest from 'hooks/useRequest';
 
 import { InventoriesAPI } from 'api';
@@ -62,7 +62,7 @@ function InventoryHost({ setBreadcrumb, inventory }) {
     {
       name: (
         <>
-          <CaretLeftIcon />
+          <LucideIconChevronLeft />
           {t`Back to Hosts`}
         </>
       ),
@@ -98,9 +98,7 @@ function InventoryHost({ setBreadcrumb, inventory }) {
           {contentError.response && contentError.response.status === 404 && (
             <span>
               {t`Host not found.`}{' '}
-              <Link to={hostListUrl}>
-                {t`View all Inventory Hosts.`}
-              </Link>
+              <Link to={hostListUrl}>{t`View all Inventory Hosts.`}</Link>
             </span>
           )}
         </ContentError>
diff --git a/awx/ui/src/screens/Inventory/InventoryHostGroups/InventoryHostGroupItem.js b/awx/ui/src/screens/Inventory/InventoryHostGroups/InventoryHostGroupItem.js
index a94d17d5..a1f37e9a 100644
--- a/awx/ui/src/screens/Inventory/InventoryHostGroups/InventoryHostGroupItem.js
+++ b/awx/ui/src/screens/Inventory/InventoryHostGroups/InventoryHostGroupItem.js
@@ -5,7 +5,7 @@ import { Tr, Td } from '@patternfly/react-table';
 import { useLingui } from '@lingui/react/macro';
 
 import { Link } from 'react-router-dom';
-import { PencilAltIcon } from '@patternfly/react-icons';
+import { LucideIconPencil } from '@ctrliq/quantic-react';
 import { ActionsTd, ActionItem } from 'components/PaginatedTable';
 import { Group } from 'types';
 
@@ -50,7 +50,7 @@ function InventoryHostGroupItem({
             component={Link}
             to={editUrl}
           >
-            <PencilAltIcon />
+            <LucideIconPencil data-original-icon="PencilAltIcon" size="sm" />
           </Button>
         </ActionItem>
       </ActionsTd>
diff --git a/awx/ui/src/screens/Inventory/InventoryHosts/InventoryHostItem.js b/awx/ui/src/screens/Inventory/InventoryHosts/InventoryHostItem.js
index f3829751..06f0312e 100644
--- a/awx/ui/src/screens/Inventory/InventoryHosts/InventoryHostItem.js
+++ b/awx/ui/src/screens/Inventory/InventoryHosts/InventoryHostItem.js
@@ -3,7 +3,7 @@ import { string, bool, func } from 'prop-types';
 import { useLingui } from '@lingui/react/macro';
 import { Tr, Td } from '@patternfly/react-table';
 import { Link } from 'react-router-dom';
-import { PencilAltIcon } from '@patternfly/react-icons';
+import { LucideIconPencil } from '@ctrliq/quantic-react';
 import { Button, Chip } from '@patternfly/react-core';
 import { HostsAPI } from 'api';
 import AlertModal from 'components/AlertModal';
@@ -119,7 +119,7 @@ function InventoryHostItem({
               component={Link}
               to={`${editUrl}`}
             >
-              <PencilAltIcon />
+              <LucideIconPencil data-original-icon="PencilAltIcon" size="sm" />
             </Button>
           </ActionItem>
         </ActionsTd>
diff --git a/awx/ui/src/screens/Inventory/InventoryList/InventoryListItem.js b/awx/ui/src/screens/Inventory/InventoryList/InventoryListItem.js
index 81cbc276..4c2797bd 100644
--- a/awx/ui/src/screens/Inventory/InventoryList/InventoryListItem.js
+++ b/awx/ui/src/screens/Inventory/InventoryList/InventoryListItem.js
@@ -3,7 +3,7 @@ import { bool, func } from 'prop-types';
 
 import { Button, Label } from '@patternfly/react-core';
 import { Tr, Td } from '@patternfly/react-table';
-import { PencilAltIcon } from '@patternfly/react-icons';
+import { LucideIconPencil } from '@ctrliq/quantic-react';
 import { Plural, useLingui } from '@lingui/react/macro';
 import { Link } from 'react-router-dom';
 import { timeOfDay } from 'util/dates';
@@ -149,7 +149,7 @@ function InventoryListItem({
               component={Link}
               to={`${getInventoryPath(inventory)}/edit`}
             >
-              <PencilAltIcon />
+              <LucideIconPencil data-original-icon="PencilAltIcon" size="sm" />
             </Button>
           </ActionItem>
           <ActionItem
diff --git a/awx/ui/src/screens/Inventory/InventoryRelatedGroups/InventoryRelatedGroupListItem.js b/awx/ui/src/screens/Inventory/InventoryRelatedGroups/InventoryRelatedGroupListItem.js
index bc45f54d..ea2b8fbb 100644
--- a/awx/ui/src/screens/Inventory/InventoryRelatedGroups/InventoryRelatedGroupListItem.js
+++ b/awx/ui/src/screens/Inventory/InventoryRelatedGroups/InventoryRelatedGroupListItem.js
@@ -7,7 +7,7 @@ import { useLingui } from '@lingui/react/macro';
 
 import { Td, Tr } from '@patternfly/react-table';
 import { Button } from '@patternfly/react-core';
-import { PencilAltIcon } from '@patternfly/react-icons';
+import { LucideIconPencil } from '@ctrliq/quantic-react';
 
 import { Group } from 'types';
 import { ActionItem, ActionsTd } from 'components/PaginatedTable';
@@ -55,7 +55,7 @@ function InventoryRelatedGroupListItem({
               component={Link}
               to={`${editUrl}`}
             >
-              <PencilAltIcon />
+              <LucideIconPencil data-original-icon="PencilAltIcon" size="sm" />
             </Button>
           </ActionItem>
         </ActionsTd>
diff --git a/awx/ui/src/screens/Inventory/InventorySource/InventorySource.js b/awx/ui/src/screens/Inventory/InventorySource/InventorySource.js
index d2da97d3..ef28d6b0 100644
--- a/awx/ui/src/screens/Inventory/InventorySource/InventorySource.js
+++ b/awx/ui/src/screens/Inventory/InventorySource/InventorySource.js
@@ -9,7 +9,7 @@ import {
   useRouteMatch,
   useLocation,
 } from 'react-router-dom';
-import { CaretLeftIcon } from '@patternfly/react-icons';
+import { LucideIconChevronLeft } from '@ctrliq/quantic-react';
 import useRequest from 'hooks/useRequest';
 
 import { InventoriesAPI, InventorySourcesAPI, OrganizationsAPI } from 'api';
@@ -73,7 +73,7 @@ function InventorySource({ inventory, setBreadcrumb, me }) {
     {
       name: (
         <>
-          <CaretLeftIcon />
+          <LucideIconChevronLeft />
           {t`Back to Sources`}
         </>
       ),
diff --git a/awx/ui/src/screens/Inventory/InventorySources/InventorySourceListItem.js b/awx/ui/src/screens/Inventory/InventorySources/InventorySourceListItem.js
index a351439f..c89da44e 100644
--- a/awx/ui/src/screens/Inventory/InventorySources/InventorySourceListItem.js
+++ b/awx/ui/src/screens/Inventory/InventorySources/InventorySourceListItem.js
@@ -3,10 +3,7 @@ import { Link } from 'react-router-dom';
 import { useLingui } from '@lingui/react/macro';
 import { Button, Tooltip } from '@patternfly/react-core';
 import { Tr, Td } from '@patternfly/react-table';
-import {
-  ExclamationTriangleIcon as PFExclamationTriangleIcon,
-  PencilAltIcon,
-} from '@patternfly/react-icons';
+import { LucideIconCircleAlert, LucideIconPencil } from '@ctrliq/quantic-react';
 import styled from 'styled-components';
 
 import { ActionsTd, ActionItem, TdBreakWord } from 'components/PaginatedTable';
@@ -16,7 +13,7 @@ import { formatDateString } from 'util/dates';
 import { isJobRunning } from 'util/jobs';
 import InventorySourceSyncButton from '../shared/InventorySourceSyncButton';
 
-const ExclamationTriangleIcon = styled(PFExclamationTriangleIcon)`
+const StyledTriangleAlert = styled(LucideIconCircleAlert)`
   color: var(--pf-global--warning-color--100);
   margin-left: 18px;
 `;
@@ -80,7 +77,7 @@ function InventorySourceListItem({
               content={t`Custom virtual environment ${source.custom_virtualenv} must be replaced by an execution environment.`}
               position="right"
             >
-              <ExclamationTriangleIcon />
+              <StyledTriangleAlert data-original-icon="ExclamationTriangleIcon" />
             </Tooltip>
           </span>
         )}
@@ -134,7 +131,7 @@ function InventorySourceListItem({
             component={Link}
             to={`${detailUrl}/edit`}
           >
-            <PencilAltIcon />
+            <LucideIconPencil data-original-icon="PencilAltIcon" size="sm" />
           </Button>
         </ActionItem>
       </ActionsTd>
diff --git a/awx/ui/src/screens/Inventory/SmartInventory.js b/awx/ui/src/screens/Inventory/SmartInventory.js
index 23d40e1d..7222ff6d 100644
--- a/awx/ui/src/screens/Inventory/SmartInventory.js
+++ b/awx/ui/src/screens/Inventory/SmartInventory.js
@@ -7,7 +7,7 @@ import {
   useRouteMatch,
   useLocation,
 } from 'react-router-dom';
-import { CaretLeftIcon } from '@patternfly/react-icons';
+import { LucideIconChevronLeft } from '@ctrliq/quantic-react';
 import { Card, PageSection } from '@patternfly/react-core';
 import { useLingui } from '@lingui/react/macro';
 
@@ -58,7 +58,7 @@ function SmartInventory({ setBreadcrumb }) {
     {
       name: (
         <>
-          <CaretLeftIcon />
+          <LucideIconChevronLeft />
           {t`Back to Inventories`}
         </>
       ),
@@ -98,9 +98,7 @@ function SmartInventory({ setBreadcrumb }) {
             {contentError?.response?.status === 404 && (
               <span>
                 {t`Smart Inventory not found.`}{' '}
-                <Link to="/inventories">
-                  {t`View all Inventories.`}
-                </Link>
+                <Link to="/inventories">{t`View all Inventories.`}</Link>
               </span>
             )}
           </ContentError>
diff --git a/awx/ui/src/screens/Inventory/shared/ConstructedInventoryHint.js b/awx/ui/src/screens/Inventory/shared/ConstructedInventoryHint.js
index f2b2d31d..7ab2140d 100644
--- a/awx/ui/src/screens/Inventory/shared/ConstructedInventoryHint.js
+++ b/awx/ui/src/screens/Inventory/shared/ConstructedInventoryHint.js
@@ -23,7 +23,7 @@ import {
   Tbody,
   Td,
 } from '@patternfly/react-table';
-import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+import { LucideIconExternalLink as ExternalLinkAltIcon } from '@ctrliq/quantic-react';
 import getDocsBaseUrl from 'util/getDocsBaseUrl';
 import { useConfig } from 'contexts/Config';
 
@@ -47,7 +47,7 @@ function ConstructedInventoryHint() {
           rel="noopener noreferrer"
         >
           {t`View constructed inventory documentation here`}{' '}
-          <ExternalLinkAltIcon />
+          <ExternalLinkAltIcon size={16} data-original-icon="ExternalLinkAltIcon" />
         </AlertActionLink>
       }
     >
diff --git a/awx/ui/src/screens/Inventory/shared/InventorySourceSyncButton.js b/awx/ui/src/screens/Inventory/shared/InventorySourceSyncButton.js
index af089e1e..f2ca42bd 100644
--- a/awx/ui/src/screens/Inventory/shared/InventorySourceSyncButton.js
+++ b/awx/ui/src/screens/Inventory/shared/InventorySourceSyncButton.js
@@ -3,7 +3,7 @@ import React, { useCallback } from 'react';
 import { useLingui } from '@lingui/react/macro';
 import PropTypes from 'prop-types';
 import { Button, Tooltip } from '@patternfly/react-core';
-import { SyncIcon } from '@patternfly/react-icons';
+import { LucideIconRefreshCw as SyncIcon } from '@ctrliq/quantic-react';
 import useRequest, { useDismissableError } from 'hooks/useRequest';
 import AlertModal from 'components/AlertModal/AlertModal';
 import ErrorDetail from 'components/ErrorDetail/ErrorDetail';
@@ -39,7 +39,7 @@ function InventorySourceSyncButton({ source, icon }) {
           variant={icon ? 'plain' : 'secondary'}
           onClick={startSyncProcess}
         >
-          {icon ? <SyncIcon /> : t`Sync`}
+          {icon ? <SyncIcon size={16} data-original-icon="SyncIcon" /> : t`Sync`}
         </Button>
       </Tooltip>
 
diff --git a/awx/ui/src/screens/Job/Job.js b/awx/ui/src/screens/Job/Job.js
index 23ee2a1f..a143bf4a 100644
--- a/awx/ui/src/screens/Job/Job.js
+++ b/awx/ui/src/screens/Job/Job.js
@@ -8,7 +8,7 @@ import {
   useRouteMatch,
 } from 'react-router-dom';
 import { useLingui } from '@lingui/react/macro';
-import { CaretLeftIcon } from '@patternfly/react-icons';
+import { LucideIconChevronLeft } from '@ctrliq/quantic-react';
 import { Card, PageSection } from '@patternfly/react-core';
 import { InventorySourcesAPI } from 'api';
 import ContentError from 'components/ContentError';
@@ -118,7 +118,7 @@ function Job({ setBreadcrumb }) {
     {
       name: (
         <>
-          <CaretLeftIcon />
+          <LucideIconChevronLeft />
           {t`Back to Jobs`}
         </>
       ),
diff --git a/awx/ui/src/screens/Job/JobOutput/EmptyOutput.js b/awx/ui/src/screens/Job/JobOutput/EmptyOutput.js
index 2e5744aa..084984af 100644
--- a/awx/ui/src/screens/Job/JobOutput/EmptyOutput.js
+++ b/awx/ui/src/screens/Job/JobOutput/EmptyOutput.js
@@ -1,16 +1,13 @@
 import React, { useEffect } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import 'styled-components/macro';
-import {
-  SearchIcon,
-  ExclamationCircleIcon as PFExclamationCircleIcon,
-} from '@patternfly/react-icons';
 import ContentEmpty from 'components/ContentEmpty';
 import { useLingui } from '@lingui/react/macro';
 
 import styled from 'styled-components';
+import { LucideIconCircleAlert, LucideIconSearch } from '@ctrliq/quantic-react';
 
-const ExclamationCircleIcon = styled(PFExclamationCircleIcon)`
+const ExclamationCircleIcon = styled(LucideIconCircleAlert)`
   color: var(--pf-global--danger-color--100);
 `;
 
@@ -31,7 +28,7 @@ export default function EmptyOutput({
   if (hasQueryParams) {
     title = t`The search filter did not produce any results…`;
     message = t`Please try another search using the filter above`;
-    icon = SearchIcon;
+    icon = LucideIconSearch;
   } else if (isJobRunning) {
     title = t`Waiting for job output…`;
   } else if (job.status === 'failed') {
diff --git a/awx/ui/src/screens/Job/JobOutput/JobOutputSearch.js b/awx/ui/src/screens/Job/JobOutput/JobOutputSearch.js
index 2d521766..3bb3ea29 100644
--- a/awx/ui/src/screens/Job/JobOutput/JobOutputSearch.js
+++ b/awx/ui/src/screens/Job/JobOutput/JobOutputSearch.js
@@ -9,7 +9,7 @@ import {
   Tooltip,
   Button,
 } from '@patternfly/react-core';
-import { SearchIcon } from '@patternfly/react-icons';
+import { LucideIconSearch as SearchIcon } from '@ctrliq/quantic-react';
 import Search from 'components/Search';
 import {
   parseQueryString,
@@ -146,12 +146,13 @@ function JobOutputSearch({
       ouiaId="job-output-toolbar"
     >
       <SearchToolbarContent>
-        <ToolbarToggleGroup toggleIcon={<SearchIcon />} breakpoint="lg">
+        <ToolbarToggleGroup
+          toggleIcon={<SearchIcon data-original-icon="SearchIcon" size={16} />}
+          breakpoint="lg"
+        >
           <ToolbarItem variant="search-filter">
             {isDisabled ? (
-              <Tooltip
-                content={t`Search is disabled while the job is running`}
-              >
+              <Tooltip content={t`Search is disabled while the job is running`}>
                 <Search
                   qsConfig={qsConfig}
                   columns={columns}
diff --git a/awx/ui/src/screens/Job/JobOutput/PageControls.js b/awx/ui/src/screens/Job/JobOutput/PageControls.js
index 867bb9ca..54679572 100644
--- a/awx/ui/src/screens/Job/JobOutput/PageControls.js
+++ b/awx/ui/src/screens/Job/JobOutput/PageControls.js
@@ -4,12 +4,12 @@ import { useLingui } from '@lingui/react/macro';
 import 'styled-components/macro';
 import { Button } from '@patternfly/react-core';
 import {
-  AngleDoubleUpIcon,
-  AngleDoubleDownIcon,
-  AngleUpIcon,
-  AngleDownIcon,
-  AngleRightIcon,
-} from '@patternfly/react-icons';
+  LucideIconChevronsUp,
+  LucideIconChevronsDown,
+  LucideIconChevronUp,
+  LucideIconChevronDown,
+  LucideIconChevronRight,
+} from '@ctrliq/quantic-react';
 import styled from 'styled-components';
 
 const ControllsWrapper = styled.div`
@@ -49,15 +49,23 @@ const PageControls = ({
         {!isFlatMode && isTemplateJob && (
           <Button
             aria-label={
-              isAllCollapsed
-                ? t`Expand job events`
-                : t`Collapse all job events`
+              isAllCollapsed ? t`Expand job events` : t`Collapse all job events`
             }
             variant="plain"
             type="button"
             onClick={toggleExpandCollapseAll}
           >
-            {isAllCollapsed ? <AngleRightIcon /> : <AngleDownIcon />}
+            {isAllCollapsed ? (
+              <LucideIconChevronRight
+                data-original-icon="AngleRightIcon"
+                size={16}
+              />
+            ) : (
+              <LucideIconChevronDown
+                data-original-icon="AngleDownIcon"
+                size={16}
+              />
+            )}
           </Button>
         )}
       </ExpandCollapseWrapper>
@@ -68,7 +76,7 @@ const PageControls = ({
           onClick={onScrollPrevious}
           variant="plain"
         >
-          <AngleUpIcon />
+          <LucideIconChevronUp data-original-icon="AngleUpIcon" size={16} />
         </Button>
         <Button
           ouiaId="job-output-scroll-next-button"
@@ -76,7 +84,7 @@ const PageControls = ({
           onClick={onScrollNext}
           variant="plain"
         >
-          <AngleDownIcon />
+          <LucideIconChevronDown data-original-icon="AngleDownIcon" size={16} />
         </Button>
         <Button
           ouiaId="job-output-scroll-first-button"
@@ -84,7 +92,10 @@ const PageControls = ({
           onClick={onScrollFirst}
           variant="plain"
         >
-          <AngleDoubleUpIcon />
+          <LucideIconChevronsUp
+            data-original-icon="AngleDoubleUpIcon"
+            size={16}
+          />
         </Button>
         <Button
           ouiaId="job-output-scroll-last-button"
@@ -92,7 +103,10 @@ const PageControls = ({
           onClick={onScrollLast}
           variant="plain"
         >
-          <AngleDoubleDownIcon />
+          <LucideIconChevronsDown
+            data-original-icon="AngleDoubleDownIcon"
+            size={16}
+          />
         </Button>
       </ScrollWrapper>
     </ControllsWrapper>
diff --git a/awx/ui/src/screens/Job/JobOutput/shared/JobEventLineToggle.js b/awx/ui/src/screens/Job/JobOutput/shared/JobEventLineToggle.js
index f2d46dea..cfc46f91 100644
--- a/awx/ui/src/screens/Job/JobOutput/shared/JobEventLineToggle.js
+++ b/awx/ui/src/screens/Job/JobOutput/shared/JobEventLineToggle.js
@@ -1,7 +1,10 @@
 import React from 'react';
 import styled from 'styled-components';
 import { useLingui } from '@lingui/react/macro';
-import { AngleDownIcon, AngleRightIcon } from '@patternfly/react-icons';
+import {
+  LucideIconChevronDown,
+  LucideIconChevronRight,
+} from '@ctrliq/quantic-react';
 
 const Wrapper = styled.div`
   background-color: #ebebeb;
@@ -35,9 +38,17 @@ export default function JobEventLineToggle({
     <Wrapper>
       <Button onClick={onToggle} type="button">
         {isCollapsed ? (
-          <AngleRightIcon size="sm" title={t`Expand section`} />
+          <LucideIconChevronRight
+            size={14}
+            title={t`Expand section`}
+            data-original-icon="AngleRightIcon"
+          />
         ) : (
-          <AngleDownIcon size="sm" title={t`Collapse section`} />
+          <LucideIconChevronDown
+            size={14}
+            title={t`Collapse section`}
+            data-original-icon="AngleDownIcon"
+          />
         )}
       </Button>
     </Wrapper>
diff --git a/awx/ui/src/screens/Job/JobOutput/shared/OutputToolbar.js b/awx/ui/src/screens/Job/JobOutput/shared/OutputToolbar.js
index 5bb3ca38..1070a665 100644
--- a/awx/ui/src/screens/Job/JobOutput/shared/OutputToolbar.js
+++ b/awx/ui/src/screens/Job/JobOutput/shared/OutputToolbar.js
@@ -3,10 +3,10 @@ import styled from 'styled-components';
 import { DateTime, Duration } from 'luxon';
 import { bool, shape, func } from 'prop-types';
 import {
-  DownloadIcon,
-  RocketIcon,
-  TrashAltIcon,
-} from '@patternfly/react-icons';
+  LucideIconDownload,
+  LucideIconRocket,
+  LucideIconTrash,
+} from '@ctrliq/quantic-react';
 import { Badge as PFBadge, Button, Tooltip } from '@patternfly/react-core';
 import DeleteButton from 'components/DeleteButton';
 import { LaunchButton, ReLaunchDropDown } from 'components/LaunchButton';
@@ -199,7 +199,7 @@ const OutputToolbar = ({ job, onDelete, isDeleteDisabled, jobStatus }) => {
                   aria-label={t`Relaunch`}
                   isDisabled={isLaunching}
                 >
-                  <RocketIcon />
+                  <LucideIconRocket data-original-icon="RocketIcon" size={16} />
                 </Button>
               )}
             </LaunchButton>
@@ -215,7 +215,7 @@ const OutputToolbar = ({ job, onDelete, isDeleteDisabled, jobStatus }) => {
               variant="plain"
               aria-label={t`Download Output`}
             >
-              <DownloadIcon />
+              <LucideIconDownload data-original-icon="DownloadIcon" size={16} />
             </Button>
           </a>
         </Tooltip>
@@ -233,7 +233,7 @@ const OutputToolbar = ({ job, onDelete, isDeleteDisabled, jobStatus }) => {
               variant="plain"
               isDisabled={isDeleteDisabled}
             >
-              <TrashAltIcon />
+              <LucideIconTrash data-original-icon="TrashAltIcon" size={16} />
             </DeleteButton>
           </Tooltip>
         )}
diff --git a/awx/ui/src/screens/Job/WorkflowOutput/WorkflowOutputToolbar.js b/awx/ui/src/screens/Job/WorkflowOutput/WorkflowOutputToolbar.js
index 23b17c49..4ef3aed4 100644
--- a/awx/ui/src/screens/Job/WorkflowOutput/WorkflowOutputToolbar.js
+++ b/awx/ui/src/screens/Job/WorkflowOutput/WorkflowOutputToolbar.js
@@ -5,10 +5,10 @@ import { Badge as PFBadge, Button, Tooltip } from '@patternfly/react-core';
 import { useLingui } from '@lingui/react/macro';
 
 import {
-  CompassIcon,
-  WrenchIcon,
-  ProjectDiagramIcon,
-} from '@patternfly/react-icons';
+  LucideIconCompass,
+  LucideIconWrench,
+  LucideIconNetwork,
+} from '@ctrliq/quantic-react';
 import styled from 'styled-components';
 import StatusLabel from 'components/StatusLabel';
 import JobCancelButton from 'components/JobCancelButton';
@@ -100,7 +100,10 @@ function WorkflowOutputToolbar({ job }) {
           variant="plain"
           onClick={navToWorkflow}
         >
-          <ProjectDiagramIcon />
+          <LucideIconNetwork
+            data-original-icon="ProjectDiagramIcon"
+            size={16}
+          />
         </ActionButton>
         <div>{t`Total Nodes`}</div>
         <Badge isRead>{totalNodes}</Badge>
@@ -111,7 +114,7 @@ function WorkflowOutputToolbar({ job }) {
             onClick={() => dispatch({ type: 'TOGGLE_LEGEND' })}
             variant="plain"
           >
-            <CompassIcon />
+            <LucideIconCompass data-original-icon="CompassIcon" size={16} />
           </ActionButton>
         </Tooltip>
         <Tooltip content={t`Toggle Tools`} position="bottom">
@@ -121,7 +124,7 @@ function WorkflowOutputToolbar({ job }) {
             onClick={() => dispatch({ type: 'TOGGLE_TOOLS' })}
             variant="plain"
           >
-            <WrenchIcon />
+            <LucideIconWrench data-original-icon="WrenchIcon" size={16} />
           </ActionButton>
         </Tooltip>
       </ToolbarActions>
diff --git a/awx/ui/src/screens/Login/Login.js b/awx/ui/src/screens/Login/Login.js
index 0d19c4b9..721f7f19 100644
--- a/awx/ui/src/screens/Login/Login.js
+++ b/awx/ui/src/screens/Login/Login.js
@@ -24,23 +24,35 @@ import {
   Tooltip,
 } from '@patternfly/react-core';
 
-import {
-  AzureIcon,
-  GoogleIcon,
-  GithubIcon,
-  UserCircleIcon,
-} from '@patternfly/react-icons';
+import { LucideIconLoaderCircle as AzureIcon } from '@ctrliq/quantic-react';
+import { LucideIconLoaderCircle as GoogleIcon } from '@ctrliq/quantic-react';
+import { LucideIconGithub as GithubIcon } from '@ctrliq/quantic-react';
+import { LucideIconUserRound as UserCircleIcon } from '@ctrliq/quantic-react';
 import useRequest, { useDismissableError } from 'hooks/useRequest';
 import { AuthAPI, RootAPI, MeAPI } from 'api';
 import { useSession } from 'contexts/Session';
 import LoadingSpinner from 'components/LoadingSpinner';
 import { SESSION_REDIRECT_URL, SESSION_USER_ID } from '../../constants';
 
-const loginLogoSrc = 'static/media/AscenderAuto_logo_h_rev_M.png';
+const loginLogoSrc = 'static/media/Ascender_logo.svg';
 
 const Login = styled(PFLogin)`
+  & {
+    --pf-c-login__container--MaxWidth: var(--quantic-spacing-96);
+    --pf-c-login__main-body--PaddingRight: var(--quantic-spacing-8);
+    --pf-c-login__main-body--PaddingLeft: var(--quantic-spacing-8);
+  }
+
+  & .pf-c-login__main {
+    background-color: var(--quantic-bg-secondary);
+    border-radius: var(--quantic-radius-md);
+    border: 1px solid var(--quantic-border-primary);
+  }
+
   & .pf-c-brand {
-    max-height: 285px;
+    max-width: var(--quantic-spacing-48);
+    display: block;
+    margin: 0 auto;
   }
 `;
 
@@ -184,14 +196,7 @@ function AWXLogin({ alt, isAuthenticated }) {
     return <Redirect to={redirect} />;
   }
   return (
-    <Login header={Header} footer={Footer}>
-      <LoginMainHeader
-        data-cy="login-header"
-        /*        title={brandName ? t`Welcome to ${brandName}!` : ''} */
-        title=""
-        /*        subtitle={t`Please log in`} */
-        subtitle=""
-      />
+    <Login headerfooter={Footer}>
       <LoginMainBody>
         {isSessionExpired.current ? (
           <Alert
@@ -201,6 +206,7 @@ function AWXLogin({ alt, isAuthenticated }) {
             ouiaId="session-expired-warning-alert"
           />
         ) : null}
+        {Header}
         <Formik
           initialValues={{
             password: '',
@@ -213,7 +219,7 @@ function AWXLogin({ alt, isAuthenticated }) {
               autoComplete="off"
               data-cy="login-form"
               className={authError ? 'pf-m-error' : ''}
-              helperText={helperText}
+              helperText={authError ? helperText : null}
               isLoginButtonDisabled={isAuthenticating}
               isValidPassword={!authError}
               isValidUsername={!authError}
@@ -251,7 +257,7 @@ function AWXLogin({ alt, isAuthenticated }) {
                       onClick={setSessionRedirect}
                     >
                       <Tooltip content={t`Sign in with Azure AD`}>
-                        <AzureIcon size="lg" />
+                        <AzureIcon size={24} data-original-icon="AzureIcon" />
                       </Tooltip>
                     </LoginMainFooterLinksItem>
                   );
@@ -265,7 +271,7 @@ function AWXLogin({ alt, isAuthenticated }) {
                       onClick={setSessionRedirect}
                     >
                       <Tooltip content={t`Sign in with GitHub`}>
-                        <GithubIcon size="lg" />
+                        <GithubIcon size={24} data-original-icon="GithubIcon" />
                       </Tooltip>
                     </LoginMainFooterLinksItem>
                   );
@@ -278,10 +284,8 @@ function AWXLogin({ alt, isAuthenticated }) {
                       key={authKey}
                       onClick={setSessionRedirect}
                     >
-                      <Tooltip
-                        content={t`Sign in with GitHub Organizations`}
-                      >
-                        <GithubIcon size="lg" />
+                      <Tooltip content={t`Sign in with GitHub Organizations`}>
+                        <GithubIcon size={24} data-original-icon="GithubIcon" />
                       </Tooltip>
                     </LoginMainFooterLinksItem>
                   );
@@ -295,7 +299,7 @@ function AWXLogin({ alt, isAuthenticated }) {
                       onClick={setSessionRedirect}
                     >
                       <Tooltip content={t`Sign in with GitHub Teams`}>
-                        <GithubIcon size="lg" />
+                        <GithubIcon size={24} data-original-icon="GithubIcon" />
                       </Tooltip>
                     </LoginMainFooterLinksItem>
                   );
@@ -308,10 +312,8 @@ function AWXLogin({ alt, isAuthenticated }) {
                       key={authKey}
                       onClick={setSessionRedirect}
                     >
-                      <Tooltip
-                        content={t`Sign in with GitHub Enterprise`}
-                      >
-                        <GithubIcon size="lg" />
+                      <Tooltip content={t`Sign in with GitHub Enterprise`}>
+                        <GithubIcon size={24} data-original-icon="GithubIcon" />
                       </Tooltip>
                     </LoginMainFooterLinksItem>
                   );
@@ -327,7 +329,7 @@ function AWXLogin({ alt, isAuthenticated }) {
                       <Tooltip
                         content={t`Sign in with GitHub Enterprise Organizations`}
                       >
-                        <GithubIcon size="lg" />
+                        <GithubIcon size={24} data-original-icon="GithubIcon" />
                       </Tooltip>
                     </LoginMainFooterLinksItem>
                   );
@@ -343,7 +345,7 @@ function AWXLogin({ alt, isAuthenticated }) {
                       <Tooltip
                         content={t`Sign in with GitHub Enterprise Teams`}
                       >
-                        <GithubIcon size="lg" />
+                        <GithubIcon size={24} data-original-icon="GithubIcon" />
                       </Tooltip>
                     </LoginMainFooterLinksItem>
                   );
@@ -357,7 +359,7 @@ function AWXLogin({ alt, isAuthenticated }) {
                       onClick={setSessionRedirect}
                     >
                       <Tooltip content={t`Sign in with Google`}>
-                        <GoogleIcon size="lg" />
+                        <GoogleIcon size={24} data-original-icon="GoogleIcon" />
                       </Tooltip>
                     </LoginMainFooterLinksItem>
                   );
@@ -371,7 +373,10 @@ function AWXLogin({ alt, isAuthenticated }) {
                       onClick={setSessionRedirect}
                     >
                       <Tooltip content={t`Sign in with OIDC`}>
-                        <UserCircleIcon size="lg" />
+                        <UserCircleIcon
+                          size={24}
+                          data-original-icon="UserCircleIcon"
+                        />
                       </Tooltip>
                     </LoginMainFooterLinksItem>
                   );
@@ -392,7 +397,10 @@ function AWXLogin({ alt, isAuthenticated }) {
                             : t`Sign in with SAML`
                         }
                       >
-                        <UserCircleIcon size="lg" />
+                        <UserCircleIcon
+                          size={24}
+                          data-original-icon="UserCircleIcon"
+                        />
                       </Tooltip>
                     </LoginMainFooterLinksItem>
                   );
diff --git a/awx/ui/src/screens/ManagementJob/ManagementJob.js b/awx/ui/src/screens/ManagementJob/ManagementJob.js
index bdf0ce02..8aebceba 100644
--- a/awx/ui/src/screens/ManagementJob/ManagementJob.js
+++ b/awx/ui/src/screens/ManagementJob/ManagementJob.js
@@ -10,7 +10,7 @@ import {
 } from 'react-router-dom';
 
 import { useLingui } from '@lingui/react/macro';
-import { CaretLeftIcon } from '@patternfly/react-icons';
+import { LucideIconChevronLeft } from '@ctrliq/quantic-react';
 import { Card, PageSection } from '@patternfly/react-core';
 
 import { SystemJobTemplatesAPI, OrganizationsAPI } from 'api';
@@ -95,7 +95,7 @@ function ManagementJob({ setBreadcrumb }) {
       link: basePath,
       name: (
         <>
-          <CaretLeftIcon />
+          <LucideIconChevronLeft />
           {t`Back to management jobs`}
         </>
       ),
@@ -132,9 +132,7 @@ function ManagementJob({ setBreadcrumb }) {
             {error?.response?.status === 404 && (
               <span>
                 {t`Management job not found.`}
-                <Link to={basePath}>
-                  {t`View all management jobs`}
-                </Link>
+                <Link to={basePath}>{t`View all management jobs`}</Link>
               </span>
             )}
           </ContentError>
diff --git a/awx/ui/src/screens/ManagementJob/ManagementJobList/LaunchManagementPrompt.js b/awx/ui/src/screens/ManagementJob/ManagementJobList/LaunchManagementPrompt.js
index 04fd0b0b..6d9a33fa 100644
--- a/awx/ui/src/screens/ManagementJob/ManagementJobList/LaunchManagementPrompt.js
+++ b/awx/ui/src/screens/ManagementJob/ManagementJobList/LaunchManagementPrompt.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useLingui } from '@lingui/react/macro';
 import { Button, TextInput, Tooltip } from '@patternfly/react-core';
-import { RocketIcon } from '@patternfly/react-icons';
+import { LucideIconRocket as RocketIcon } from '@ctrliq/quantic-react';
 
 import AlertModal from 'components/AlertModal';
 
@@ -36,7 +36,7 @@ function LaunchManagementPrompt({
           onClick={onClick}
           isDisabled={isLoading}
         >
-          <RocketIcon />
+          <RocketIcon size={16} data-original-icon="RocketIcon" />
         </Button>
       </Tooltip>
       <AlertModal
diff --git a/awx/ui/src/screens/ManagementJob/ManagementJobList/ManagementJobListItem.js b/awx/ui/src/screens/ManagementJob/ManagementJobList/ManagementJobListItem.js
index a5026eea..75538bd4 100644
--- a/awx/ui/src/screens/ManagementJob/ManagementJobList/ManagementJobListItem.js
+++ b/awx/ui/src/screens/ManagementJob/ManagementJobList/ManagementJobListItem.js
@@ -4,7 +4,7 @@ import { useLingui } from '@lingui/react/macro';
 import { Link, useHistory } from 'react-router-dom';
 import { Button, Tooltip } from '@patternfly/react-core';
 import { Tr, Td } from '@patternfly/react-table';
-import { RocketIcon } from '@patternfly/react-icons';
+import { LucideIconRocket as RocketIcon } from '@ctrliq/quantic-react';
 
 import { SystemJobTemplatesAPI } from 'api';
 import AlertModal from 'components/AlertModal';
@@ -96,7 +96,7 @@ function ManagementJobListItem({
                       onClick={handleLaunch}
                       isDisabled={isLaunchLoading}
                     >
-                      <RocketIcon />
+                      <RocketIcon size={16} data-original-icon="RocketIcon" />
                     </Button>
                   </Tooltip>
                 )}{' '}
diff --git a/awx/ui/src/screens/NotificationTemplate/NotificationTemplate.js b/awx/ui/src/screens/NotificationTemplate/NotificationTemplate.js
index 6b7b9610..34fa16f9 100644
--- a/awx/ui/src/screens/NotificationTemplate/NotificationTemplate.js
+++ b/awx/ui/src/screens/NotificationTemplate/NotificationTemplate.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useCallback } from 'react';
 import { useLingui } from '@lingui/react/macro';
 import { Card, PageSection } from '@patternfly/react-core';
-import { CaretLeftIcon } from '@patternfly/react-icons';
+import { LucideIconChevronLeft } from '@ctrliq/quantic-react';
 import {
   Link,
   Switch,
@@ -72,7 +72,7 @@ function NotificationTemplate({ setBreadcrumb }) {
     {
       name: (
         <>
-          <CaretLeftIcon />
+          <LucideIconChevronLeft />
           {t`Back to Notifications`}
         </>
       ),
diff --git a/awx/ui/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateListItem.js b/awx/ui/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateListItem.js
index 42527f81..f69498ec 100644
--- a/awx/ui/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateListItem.js
+++ b/awx/ui/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateListItem.js
@@ -4,7 +4,7 @@ import { useLingui } from '@lingui/react/macro';
 import { Link } from 'react-router-dom';
 import { Button } from '@patternfly/react-core';
 import { Tr, Td } from '@patternfly/react-table';
-import { PencilAltIcon, BellIcon } from '@patternfly/react-icons';
+import { LucideIconPencil, LucideIconBell } from '@ctrliq/quantic-react';
 import { ActionsTd, ActionItem, TdBreakWord } from 'components/PaginatedTable';
 import { timeOfDay } from 'util/dates';
 import { NotificationTemplatesAPI, NotificationsAPI } from 'api';
@@ -137,7 +137,7 @@ function NotificationTemplateListItem({
               onClick={sendTestNotification}
               isDisabled={isLoading || status === 'running'}
             >
-              <BellIcon />
+              <LucideIconBell size={16} data-original-icon="BellIcon" />
             </Button>
           </ActionItem>
           <ActionItem
@@ -151,7 +151,7 @@ function NotificationTemplateListItem({
               component={Link}
               to={`/notification_templates/${template.id}/edit`}
             >
-              <PencilAltIcon />
+              <LucideIconPencil data-original-icon="PencilAltIcon" size="sm" />
             </Button>
           </ActionItem>
           <ActionItem
diff --git a/awx/ui/src/screens/Organization/Organization.js b/awx/ui/src/screens/Organization/Organization.js
index d074e331..f365a4fb 100644
--- a/awx/ui/src/screens/Organization/Organization.js
+++ b/awx/ui/src/screens/Organization/Organization.js
@@ -9,7 +9,7 @@ import {
   useParams,
   useRouteMatch,
 } from 'react-router-dom';
-import { CaretLeftIcon } from '@patternfly/react-icons';
+import { LucideIconChevronLeft } from '@ctrliq/quantic-react';
 import { Card, PageSection } from '@patternfly/react-core';
 import useRequest from 'hooks/useRequest';
 import RoutedTabs from 'components/RoutedTabs';
@@ -112,7 +112,7 @@ function Organization({ setBreadcrumb, me }) {
     {
       name: (
         <>
-          <CaretLeftIcon />
+          <LucideIconChevronLeft />
           {t`Back to Organizations`}
         </>
       ),
@@ -152,9 +152,7 @@ function Organization({ setBreadcrumb, me }) {
             {organizationError.response.status === 404 && (
               <span>
                 {t`Organization not found.`}{' '}
-                <Link to="/organizations">
-                  {t`View all Organizations.`}
-                </Link>
+                <Link to="/organizations">{t`View all Organizations.`}</Link>
               </span>
             )}
           </ContentError>
diff --git a/awx/ui/src/screens/Organization/OrganizationList/OrganizationListItem.js b/awx/ui/src/screens/Organization/OrganizationList/OrganizationListItem.js
index 86443d38..c84234c6 100644
--- a/awx/ui/src/screens/Organization/OrganizationList/OrganizationListItem.js
+++ b/awx/ui/src/screens/Organization/OrganizationList/OrganizationListItem.js
@@ -5,15 +5,12 @@ import { Button, Tooltip } from '@patternfly/react-core';
 import { Tr, Td } from '@patternfly/react-table';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
-import {
-  ExclamationTriangleIcon as PFExclamationTriangleIcon,
-  PencilAltIcon,
-} from '@patternfly/react-icons';
+import { LucideIconCircleAlert, LucideIconPencil } from '@ctrliq/quantic-react';
 import { ActionsTd, ActionItem, TdBreakWord } from 'components/PaginatedTable';
 
 import { Organization } from 'types';
 
-const ExclamationTriangleIcon = styled(PFExclamationTriangleIcon)`
+const StyledTriangleAlert = styled(LucideIconCircleAlert)`
   color: var(--pf-global--warning-color--100);
   margin-left: 18px;
 `;
@@ -55,7 +52,7 @@ function OrganizationListItem({
               content={t`Custom virtual environment ${organization.custom_virtualenv} must be replaced by an execution environment.`}
               position="right"
             >
-              <ExclamationTriangleIcon />
+              <StyledTriangleAlert data-original-icon="ExclamationTriangleIcon" />
             </Tooltip>
           </span>
         )}
@@ -78,7 +75,7 @@ function OrganizationListItem({
             component={Link}
             to={`/organizations/${organization.id}/edit`}
           >
-            <PencilAltIcon />
+            <LucideIconPencil data-original-icon="PencilAltIcon" size="sm" />
           </Button>
         </ActionItem>
       </ActionsTd>
diff --git a/awx/ui/src/screens/Organization/OrganizationTeams/OrganizationTeamListItem.js b/awx/ui/src/screens/Organization/OrganizationTeams/OrganizationTeamListItem.js
index 8ac2358d..aa0a9a2b 100644
--- a/awx/ui/src/screens/Organization/OrganizationTeams/OrganizationTeamListItem.js
+++ b/awx/ui/src/screens/Organization/OrganizationTeams/OrganizationTeamListItem.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { Button } from '@patternfly/react-core';
 import { Tr, Td } from '@patternfly/react-table';
 import { useLingui } from '@lingui/react/macro';
-import { PencilAltIcon } from '@patternfly/react-icons';
+import { LucideIconPencil } from '@ctrliq/quantic-react';
 import { ActionsTd, ActionItem } from 'components/PaginatedTable';
 
 function OrganizationTeamListItem({ team, detailUrl }) {
@@ -29,7 +29,7 @@ function OrganizationTeamListItem({ team, detailUrl }) {
             component={Link}
             to={`${detailUrl}/edit`}
           >
-            <PencilAltIcon />
+            <LucideIconPencil data-original-icon="PencilAltIcon" size="sm" />
           </Button>
         </ActionItem>
       </ActionsTd>
diff --git a/awx/ui/src/screens/Project/Project.js b/awx/ui/src/screens/Project/Project.js
index 24fb1009..16b743e4 100644
--- a/awx/ui/src/screens/Project/Project.js
+++ b/awx/ui/src/screens/Project/Project.js
@@ -8,7 +8,7 @@ import {
   useParams,
   useLocation,
 } from 'react-router-dom';
-import { CaretLeftIcon } from '@patternfly/react-icons';
+import { LucideIconChevronLeft } from '@ctrliq/quantic-react';
 import { Card, PageSection } from '@patternfly/react-core';
 import { useConfig } from 'contexts/Config';
 import useRequest from 'hooks/useRequest';
@@ -93,7 +93,7 @@ function Project({ setBreadcrumb }) {
     {
       name: (
         <>
-          <CaretLeftIcon />
+          <LucideIconChevronLeft />
           {t`Back to Projects`}
         </>
       ),
diff --git a/awx/ui/src/screens/Project/ProjectList/ProjectListItem.js b/awx/ui/src/screens/Project/ProjectList/ProjectListItem.js
index 692ce756..68c19671 100644
--- a/awx/ui/src/screens/Project/ProjectList/ProjectListItem.js
+++ b/awx/ui/src/screens/Project/ProjectList/ProjectListItem.js
@@ -6,10 +6,10 @@ import { Tr, Td, ExpandableRowContent } from '@patternfly/react-table';
 import { useLingui } from '@lingui/react/macro';
 import { Link } from 'react-router-dom';
 import {
-  PencilAltIcon,
-  ExclamationTriangleIcon as PFExclamationTriangleIcon,
-  UndoIcon,
-} from '@patternfly/react-icons';
+  LucideIconPencil,
+  LucideIconCircleAlert,
+  LucideIconUndo_2,
+} from '@ctrliq/quantic-react';
 import styled from 'styled-components';
 import { ActionsTd, ActionItem, TdBreakWord } from 'components/PaginatedTable';
 import { formatDateString, timeOfDay } from 'util/dates';
@@ -28,7 +28,7 @@ const Label = styled.span`
   color: var(--pf-global--disabled-color--100);
 `;
 
-const ExclamationTriangleIcon = styled(PFExclamationTriangleIcon)`
+const StyledTriangleAlert = styled(LucideIconCircleAlert)`
   color: var(--pf-global--warning-color--100);
   margin-left: 18px;
 `;
@@ -138,7 +138,7 @@ function ProjectListItem({
             variant="plain"
             onClick={() => onRefreshRow(project.id)}
           >
-            <UndoIcon />
+            <LucideIconUndo_2 data-original-icon="UndoIcon" />
           </Button>
         </Tooltip>
       </>
@@ -190,7 +190,7 @@ function ProjectListItem({
                 position="right"
                 className="missing-execution-environment"
               >
-                <ExclamationTriangleIcon />
+                <StyledTriangleAlert data-original-icon="ExclamationTriangleIcon" />
               </Tooltip>
             </span>
           )}
@@ -217,9 +217,7 @@ function ProjectListItem({
           )}
         </Td>
         <Td dataLabel={t`Type`}>
-          {project.scm_type === ''
-            ? t`Manual`
-            : toTitleCase(project.scm_type)}
+          {project.scm_type === '' ? t`Manual` : toTitleCase(project.scm_type)}
         </Td>
         <Td dataLabel={t`Revision`}>{renderRevision()}</Td>
         <ActionsTd dataLabel={t`Actions`}>
@@ -258,7 +256,7 @@ function ProjectListItem({
               component={Link}
               to={`/projects/${project.id}/edit`}
             >
-              <PencilAltIcon />
+              <LucideIconPencil data-original-icon="PencilAltIcon" size="sm" />
             </Button>
           </ActionItem>
           <ActionItem
diff --git a/awx/ui/src/screens/Project/shared/ProjectSyncButton.js b/awx/ui/src/screens/Project/shared/ProjectSyncButton.js
index 63f0291f..c448cb10 100644
--- a/awx/ui/src/screens/Project/shared/ProjectSyncButton.js
+++ b/awx/ui/src/screens/Project/shared/ProjectSyncButton.js
@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { useRouteMatch } from 'react-router-dom';
 import { Button, Tooltip } from '@patternfly/react-core';
-import { SyncIcon } from '@patternfly/react-icons';
+import { LucideIconRefreshCw as SyncIcon } from '@ctrliq/quantic-react';
 
 import { number } from 'prop-types';
 import { useLingui } from '@lingui/react/macro';
@@ -41,7 +41,7 @@ function ProjectSyncButton({ projectId, lastJobStatus = null }) {
               {match.url.endsWith('/details') ? (
                 t`Sync`
               ) : (
-                <SyncIcon />
+                <SyncIcon size={16} data-original-icon="SyncIcon" />
               )}
             </Button>
           </div>
@@ -54,7 +54,7 @@ function ProjectSyncButton({ projectId, lastJobStatus = null }) {
           isDisabled={isDisabled}
           onClick={handleSync}
         >
-          {match.url.endsWith('/details') ? t`Sync` : <SyncIcon />}
+          {match.url.endsWith('/details') ? t`Sync` : <SyncIcon size={16} data-original-icon="SyncIcon" />}
         </Button>
       )}
       {error && (
diff --git a/awx/ui/src/screens/Setting/AzureAD/AzureADDetail/AzureADDetail.js b/awx/ui/src/screens/Setting/AzureAD/AzureADDetail/AzureADDetail.js
index cf174db5..bad22f8a 100644
--- a/awx/ui/src/screens/Setting/AzureAD/AzureADDetail/AzureADDetail.js
+++ b/awx/ui/src/screens/Setting/AzureAD/AzureADDetail/AzureADDetail.js
@@ -2,8 +2,8 @@ import React, { useEffect, useCallback } from 'react';
 import { Link } from 'react-router-dom';
 import { useLingui } from '@lingui/react/macro';
 import { Button } from '@patternfly/react-core';
-import { CaretLeftIcon } from '@patternfly/react-icons';
 import { CardBody, CardActionsRow } from 'components/Card';
+import { LucideIconChevronLeft } from '@ctrliq/quantic-react';
 import ContentLoading from 'components/ContentLoading';
 import ContentError from 'components/ContentError';
 import { DetailList } from 'components/DetailList';
@@ -40,7 +40,7 @@ function AzureADDetail() {
     {
       name: (
         <>
-          <CaretLeftIcon />
+          <LucideIconChevronLeft />
           {t`Back to Settings`}
         </>
       ),
diff --git a/awx/ui/src/screens/Setting/GitHub/GitHubDetail/GitHubDetail.js b/awx/ui/src/screens/Setting/GitHub/GitHubDetail/GitHubDetail.js
index 5016c2fa..531fbf7f 100644
--- a/awx/ui/src/screens/Setting/GitHub/GitHubDetail/GitHubDetail.js
+++ b/awx/ui/src/screens/Setting/GitHub/GitHubDetail/GitHubDetail.js
@@ -2,8 +2,8 @@ import React, { useEffect, useCallback } from 'react';
 import { Link, Redirect, useRouteMatch } from 'react-router-dom';
 import { useLingui } from '@lingui/react/macro';
 import { Button } from '@patternfly/react-core';
-import { CaretLeftIcon } from '@patternfly/react-icons';
 import { CardBody, CardActionsRow } from 'components/Card';
+import { LucideIconChevronLeft } from '@ctrliq/quantic-react';
 import ContentError from 'components/ContentError';
 import ContentLoading from 'components/ContentLoading';
 import { DetailList } from 'components/DetailList';
@@ -74,7 +74,7 @@ function GitHubDetail() {
     {
       name: (
         <>
-          <CaretLeftIcon />
+          <LucideIconChevronLeft />
           {t`Back to Settings`}
         </>
       ),
diff --git a/awx/ui/src/screens/Setting/GoogleOAuth2/GoogleOAuth2Detail/GoogleOAuth2Detail.js b/awx/ui/src/screens/Setting/GoogleOAuth2/GoogleOAuth2Detail/GoogleOAuth2Detail.js
index 4f642931..81ccbb9d 100644
--- a/awx/ui/src/screens/Setting/GoogleOAuth2/GoogleOAuth2Detail/GoogleOAuth2Detail.js
+++ b/awx/ui/src/screens/Setting/GoogleOAuth2/GoogleOAuth2Detail/GoogleOAuth2Detail.js
@@ -2,8 +2,8 @@ import React, { useEffect, useCallback } from 'react';
 import { Link } from 'react-router-dom';
 import { useLingui } from '@lingui/react/macro';
 import { Button } from '@patternfly/react-core';
-import { CaretLeftIcon } from '@patternfly/react-icons';
 import { CardBody, CardActionsRow } from 'components/Card';
+import { LucideIconChevronLeft } from '@ctrliq/quantic-react';
 import ContentLoading from 'components/ContentLoading';
 import ContentError from 'components/ContentError';
 import RoutedTabs from 'components/RoutedTabs';
@@ -40,7 +40,7 @@ function GoogleOAuth2Detail() {
     {
       name: (
         <>
-          <CaretLeftIcon />
+          <LucideIconChevronLeft />
           {t`Back to Settings`}
         </>
       ),
diff --git a/awx/ui/src/screens/Setting/Jobs/JobsDetail/JobsDetail.js b/awx/ui/src/screens/Setting/Jobs/JobsDetail/JobsDetail.js
index 522d5904..b92b5dcc 100644
--- a/awx/ui/src/screens/Setting/Jobs/JobsDetail/JobsDetail.js
+++ b/awx/ui/src/screens/Setting/Jobs/JobsDetail/JobsDetail.js
@@ -2,8 +2,8 @@ import React, { useEffect, useCallback } from 'react';
 import { Link } from 'react-router-dom';
 import { useLingui } from '@lingui/react/macro';
 import { Button } from '@patternfly/react-core';
-import { CaretLeftIcon } from '@patternfly/react-icons';
 import { CardBody, CardActionsRow } from 'components/Card';
+import { LucideIconChevronLeft } from '@ctrliq/quantic-react';
 import ContentError from 'components/ContentError';
 import ContentLoading from 'components/ContentLoading';
 import { DetailList } from 'components/DetailList';
@@ -54,7 +54,7 @@ function JobsDetail() {
     {
       name: (
         <>
-          <CaretLeftIcon />
+          <LucideIconChevronLeft />
           {t`Back to Settings`}
         </>
       ),
diff --git a/awx/ui/src/screens/Setting/LDAP/LDAPDetail/LDAPDetail.js b/awx/ui/src/screens/Setting/LDAP/LDAPDetail/LDAPDetail.js
index 383c48cf..048a1a0e 100644
--- a/awx/ui/src/screens/Setting/LDAP/LDAPDetail/LDAPDetail.js
+++ b/awx/ui/src/screens/Setting/LDAP/LDAPDetail/LDAPDetail.js
@@ -2,8 +2,8 @@ import React, { useEffect, useCallback } from 'react';
 import { Link, Redirect, useRouteMatch } from 'react-router-dom';
 import { useLingui } from '@lingui/react/macro';
 import { Button } from '@patternfly/react-core';
-import { CaretLeftIcon } from '@patternfly/react-icons';
 import { CardBody, CardActionsRow } from 'components/Card';
+import { LucideIconChevronLeft } from '@ctrliq/quantic-react';
 import ContentError from 'components/ContentError';
 import ContentLoading from 'components/ContentLoading';
 import { DetailList } from 'components/DetailList';
@@ -91,7 +91,7 @@ function LDAPDetail() {
     {
       name: (
         <>
-          <CaretLeftIcon />
+          <LucideIconChevronLeft />
           {t`Back to Settings`}
         </>
       ),
diff --git a/awx/ui/src/screens/Setting/Logging/LoggingDetail/LoggingDetail.js b/awx/ui/src/screens/Setting/Logging/LoggingDetail/LoggingDetail.js
index 402177d2..79a3f2fb 100644
--- a/awx/ui/src/screens/Setting/Logging/LoggingDetail/LoggingDetail.js
+++ b/awx/ui/src/screens/Setting/Logging/LoggingDetail/LoggingDetail.js
@@ -3,8 +3,8 @@ import { Link } from 'react-router-dom';
 
 import { useLingui } from '@lingui/react/macro';
 import { Button } from '@patternfly/react-core';
-import { CaretLeftIcon } from '@patternfly/react-icons';
 import { CardBody, CardActionsRow } from 'components/Card';
+import { LucideIconChevronLeft } from '@ctrliq/quantic-react';
 import ContentLoading from 'components/ContentLoading';
 import ContentError from 'components/ContentError';
 import RoutedTabs from 'components/RoutedTabs';
@@ -66,7 +66,7 @@ function LoggingDetail() {
     {
       name: (
         <>
-          <CaretLeftIcon />
+          <LucideIconChevronLeft />
           {t`Back to Settings`}
         </>
       ),
diff --git a/awx/ui/src/screens/Setting/MiscAuthentication/MiscAuthenticationDetail/MiscAuthenticationDetail.js b/awx/ui/src/screens/Setting/MiscAuthentication/MiscAuthenticationDetail/MiscAuthenticationDetail.js
index 060a53ca..8b4448d6 100644
--- a/awx/ui/src/screens/Setting/MiscAuthentication/MiscAuthenticationDetail/MiscAuthenticationDetail.js
+++ b/awx/ui/src/screens/Setting/MiscAuthentication/MiscAuthenticationDetail/MiscAuthenticationDetail.js
@@ -2,8 +2,8 @@ import React, { useEffect, useCallback } from 'react';
 import { Link } from 'react-router-dom';
 import { useLingui } from '@lingui/react/macro';
 import { Button } from '@patternfly/react-core';
-import { CaretLeftIcon } from '@patternfly/react-icons';
 import { CardBody, CardActionsRow } from 'components/Card';
+import { LucideIconChevronLeft } from '@ctrliq/quantic-react';
 import ContentLoading from 'components/ContentLoading';
 import ContentError from 'components/ContentError';
 import { DetailList } from 'components/DetailList';
@@ -40,7 +40,7 @@ function MiscAuthenticationDetail() {
     {
       name: (
         <>
-          <CaretLeftIcon />
+          <LucideIconChevronLeft />
           {t`Back to Settings`}
         </>
       ),
diff --git a/awx/ui/src/screens/Setting/MiscSystem/MiscSystemDetail/MiscSystemDetail.js b/awx/ui/src/screens/Setting/MiscSystem/MiscSystemDetail/MiscSystemDetail.js
index c65b15a6..5b5ca301 100644
--- a/awx/ui/src/screens/Setting/MiscSystem/MiscSystemDetail/MiscSystemDetail.js
+++ b/awx/ui/src/screens/Setting/MiscSystem/MiscSystemDetail/MiscSystemDetail.js
@@ -5,8 +5,8 @@ import React, { useEffect, useCallback } from 'react';
 import { Link } from 'react-router-dom';
 import { useLingui } from '@lingui/react/macro';
 import { Button } from '@patternfly/react-core';
-import { CaretLeftIcon } from '@patternfly/react-icons';
 import { CardBody, CardActionsRow } from 'components/Card';
+import { LucideIconChevronLeft } from '@ctrliq/quantic-react';
 import CodeDetail from 'components/DetailList/CodeDetail';
 import ContentError from 'components/ContentError';
 import ContentLoading from 'components/ContentLoading';
@@ -81,7 +81,7 @@ function MiscSystemDetail() {
     {
       name: (
         <>
-          <CaretLeftIcon />
+          <LucideIconChevronLeft />
           {t`Back to Settings`}
         </>
       ),
diff --git a/awx/ui/src/screens/Setting/OIDC/OIDCDetail/OIDCDetail.js b/awx/ui/src/screens/Setting/OIDC/OIDCDetail/OIDCDetail.js
index 5c83e317..e4c41122 100644
--- a/awx/ui/src/screens/Setting/OIDC/OIDCDetail/OIDCDetail.js
+++ b/awx/ui/src/screens/Setting/OIDC/OIDCDetail/OIDCDetail.js
@@ -2,8 +2,8 @@ import React, { useEffect, useCallback } from 'react';
 import { Link } from 'react-router-dom';
 import { useLingui } from '@lingui/react/macro';
 import { Button } from '@patternfly/react-core';
-import { CaretLeftIcon } from '@patternfly/react-icons';
 import { CardBody, CardActionsRow } from 'components/Card';
+import { LucideIconChevronLeft } from '@ctrliq/quantic-react';
 import ContentLoading from 'components/ContentLoading';
 import ContentError from 'components/ContentError';
 import RoutedTabs from 'components/RoutedTabs';
@@ -40,7 +40,7 @@ function OIDCDetail() {
     {
       name: (
         <>
-          <CaretLeftIcon />
+          <LucideIconChevronLeft />
           {t`Back to Settings`}
         </>
       ),
diff --git a/awx/ui/src/screens/Setting/RADIUS/RADIUSDetail/RADIUSDetail.js b/awx/ui/src/screens/Setting/RADIUS/RADIUSDetail/RADIUSDetail.js
index dbe1b2fc..acd06d14 100644
--- a/awx/ui/src/screens/Setting/RADIUS/RADIUSDetail/RADIUSDetail.js
+++ b/awx/ui/src/screens/Setting/RADIUS/RADIUSDetail/RADIUSDetail.js
@@ -2,8 +2,8 @@ import React, { useEffect, useCallback } from 'react';
 import { Link } from 'react-router-dom';
 import { useLingui } from '@lingui/react/macro';
 import { Button, Alert as PFAlert } from '@patternfly/react-core';
-import { CaretLeftIcon } from '@patternfly/react-icons';
 import styled from 'styled-components';
+import { LucideIconChevronLeft } from '@ctrliq/quantic-react';
 import { CardBody, CardActionsRow } from 'components/Card';
 import ContentLoading from 'components/ContentLoading';
 import ContentError from 'components/ContentError';
@@ -45,7 +45,7 @@ function RADIUSDetail() {
     {
       name: (
         <>
-          <CaretLeftIcon />
+          <LucideIconChevronLeft />
           {t`Back to Settings`}
         </>
       ),
diff --git a/awx/ui/src/screens/Setting/SAML/SAMLDetail/SAMLDetail.js b/awx/ui/src/screens/Setting/SAML/SAMLDetail/SAMLDetail.js
index a44ae0a7..1710fda0 100644
--- a/awx/ui/src/screens/Setting/SAML/SAMLDetail/SAMLDetail.js
+++ b/awx/ui/src/screens/Setting/SAML/SAMLDetail/SAMLDetail.js
@@ -2,8 +2,8 @@ import React, { useEffect, useCallback } from 'react';
 import { Link } from 'react-router-dom';
 import { useLingui } from '@lingui/react/macro';
 import { Button } from '@patternfly/react-core';
-import { CaretLeftIcon } from '@patternfly/react-icons';
 import { CardBody, CardActionsRow } from 'components/Card';
+import { LucideIconChevronLeft } from '@ctrliq/quantic-react';
 import ContentLoading from 'components/ContentLoading';
 import ContentError from 'components/ContentError';
 import RoutedTabs from 'components/RoutedTabs';
@@ -41,7 +41,7 @@ function SAMLDetail() {
     {
       name: (
         <>
-          <CaretLeftIcon />
+          <LucideIconChevronLeft />
           {t`Back to Settings`}
         </>
       ),
diff --git a/awx/ui/src/screens/Setting/SettingList.js b/awx/ui/src/screens/Setting/SettingList.js
index 2f4f0e96..861f91db 100644
--- a/awx/ui/src/screens/Setting/SettingList.js
+++ b/awx/ui/src/screens/Setting/SettingList.js
@@ -19,7 +19,7 @@ import useBrandName from 'hooks/useBrandName';
 
 const SplitLayout = styled(PageSection)`
   column-count: 1;
-  column-gap: 24px;
+  column-gap: var(--quantic-spacing-4xl);
   @media (min-width: 576px) {
     column-count: 2;
   }
@@ -36,11 +36,12 @@ const CardHeader = styled(_CardHeader)`
     align-items: flex-start;
     display: flex;
     flex-flow: column nowrap;
+    margin-bottom: var(--quantic-spacing-2);
   }
 `;
 const CardDescription = styled.div`
-  color: var(--pf-global--palette--black-600);
-  font-size: var(--pf-global--FontSize--xs);
+  color: var(--quantic-text-tertiary);
+  font-size: var(--pf-global--FontSize--sm);
 `;
 
 function SettingList() {
diff --git a/awx/ui/src/screens/Setting/Subscription/SubscriptionDetail/SubscriptionDetail.js b/awx/ui/src/screens/Setting/Subscription/SubscriptionDetail/SubscriptionDetail.js
index 5c2764cc..ef14864a 100644
--- a/awx/ui/src/screens/Setting/Subscription/SubscriptionDetail/SubscriptionDetail.js
+++ b/awx/ui/src/screens/Setting/Subscription/SubscriptionDetail/SubscriptionDetail.js
@@ -9,10 +9,10 @@ import {
   Label,
 } from '@patternfly/react-core';
 import {
-  CaretLeftIcon,
-  CheckIcon,
-  ExclamationCircleIcon,
-} from '@patternfly/react-icons';
+  LucideIconChevronLeft,
+  LucideIconCheck,
+  LucideIconCircleAlert,
+} from '@ctrliq/quantic-react';
 import RoutedTabs from 'components/RoutedTabs';
 import { CardBody, CardActionsRow } from 'components/Card';
 import { DetailList, Detail } from 'components/DetailList';
@@ -31,7 +31,7 @@ function SubscriptionDetail() {
     {
       name: (
         <>
-          <CaretLeftIcon />
+          <LucideIconChevronLeft />
           {t`Back to Settings`}
         </>
       ),
@@ -65,7 +65,11 @@ function SubscriptionDetail() {
               value={
                 license_info.compliant ? (
                   <>
-                    <Label variant="outline" color="green" icon={<CheckIcon />}>
+                    <Label
+                      variant="outline"
+                      color="green"
+                      icon={<LucideIconCheck />}
+                    >
                       {t`Compliant`}
                     </Label>
                     <HelperText>
@@ -79,7 +83,7 @@ function SubscriptionDetail() {
                     <Label
                       variant="outline"
                       color="red"
-                      icon={<ExclamationCircleIcon />}
+                      icon={<LucideIconCircleAlert />}
                     >
                       {t`Out of compliance`}
                     </Label>
diff --git a/awx/ui/src/screens/Setting/Subscription/SubscriptionEdit/SubscriptionModal.js b/awx/ui/src/screens/Setting/Subscription/SubscriptionEdit/SubscriptionModal.js
index df54db37..afc60087 100644
--- a/awx/ui/src/screens/Setting/Subscription/SubscriptionEdit/SubscriptionModal.js
+++ b/awx/ui/src/screens/Setting/Subscription/SubscriptionEdit/SubscriptionModal.js
@@ -17,8 +17,6 @@ import {
   Thead,
   Tr,
 } from '@patternfly/react-table';
-import { ExclamationTriangleIcon } from '@patternfly/react-icons';
-
 import { ConfigAPI } from 'api';
 import { formatDateString } from 'util/dates';
 import useRequest from 'hooks/useRequest';
@@ -26,6 +24,8 @@ import useSelected from 'hooks/useSelected';
 import ErrorDetail from 'components/ErrorDetail';
 import ContentEmpty from 'components/ContentEmpty';
 import ContentLoading from 'components/ContentLoading';
+import { LucideIconTriangleAlert } from '@ctrliq/quantic-react';
+
 
 function SubscriptionModal({
   subscriptionCreds = {},
@@ -111,7 +111,7 @@ function SubscriptionModal({
       {isLoading && <ContentLoading />}
       {!isLoading && error && (
         <EmptyState variant="full">
-          <EmptyStateIcon icon={ExclamationTriangleIcon} />
+          <EmptyStateIcon icon={LucideIconTriangleAlert} />
           <Title size="lg" headingLevel="h3">
             <Trans>No subscriptions found</Trans>
           </Title>
diff --git a/awx/ui/src/screens/Setting/Subscription/SubscriptionEdit/SubscriptionStep.js b/awx/ui/src/screens/Setting/Subscription/SubscriptionEdit/SubscriptionStep.js
index 0ae55a95..6ab3022f 100644
--- a/awx/ui/src/screens/Setting/Subscription/SubscriptionEdit/SubscriptionStep.js
+++ b/awx/ui/src/screens/Setting/Subscription/SubscriptionEdit/SubscriptionStep.js
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 
 import { useField, useFormikContext } from 'formik';
 import styled from 'styled-components';
-import { TimesIcon } from '@patternfly/react-icons';
+import { LucideIconX } from '@ctrliq/quantic-react';
 import {
   Button,
   Divider,
@@ -259,7 +259,7 @@ function SubscriptionStep() {
                     aria-label={t`Clear subscription selection`}
                     ouiaId="clear-subscription-selection"
                   >
-                    <TimesIcon />
+                    <LucideIconX />
                   </Button>
                 </Tooltip>
               </FlexItem>
diff --git a/awx/ui/src/screens/Setting/TACACS/TACACSDetail/TACACSDetail.js b/awx/ui/src/screens/Setting/TACACS/TACACSDetail/TACACSDetail.js
index eb7e7e06..13bac8e3 100644
--- a/awx/ui/src/screens/Setting/TACACS/TACACSDetail/TACACSDetail.js
+++ b/awx/ui/src/screens/Setting/TACACS/TACACSDetail/TACACSDetail.js
@@ -2,8 +2,8 @@ import React, { useEffect, useCallback } from 'react';
 import { Link } from 'react-router-dom';
 import { useLingui } from '@lingui/react/macro';
 import { Button, Alert as PFAlert } from '@patternfly/react-core';
-import { CaretLeftIcon } from '@patternfly/react-icons';
 import styled from 'styled-components';
+import { LucideIconChevronLeft } from '@ctrliq/quantic-react';
 import { CardBody, CardActionsRow } from 'components/Card';
 import ContentLoading from 'components/ContentLoading';
 import ContentError from 'components/ContentError';
@@ -45,7 +45,7 @@ function TACACSDetail() {
     {
       name: (
         <>
-          <CaretLeftIcon />
+          <LucideIconChevronLeft />
           {t`Back to Settings`}
         </>
       ),
diff --git a/awx/ui/src/screens/Setting/Troubleshooting/TroubleshootingDetail/TroubleshootingDetail.js b/awx/ui/src/screens/Setting/Troubleshooting/TroubleshootingDetail/TroubleshootingDetail.js
index fe0377fa..b13fc2fe 100644
--- a/awx/ui/src/screens/Setting/Troubleshooting/TroubleshootingDetail/TroubleshootingDetail.js
+++ b/awx/ui/src/screens/Setting/Troubleshooting/TroubleshootingDetail/TroubleshootingDetail.js
@@ -2,8 +2,8 @@ import React, { useEffect, useCallback } from 'react';
 import { Link } from 'react-router-dom';
 import { useLingui } from '@lingui/react/macro';
 import { Button } from '@patternfly/react-core';
-import { CaretLeftIcon } from '@patternfly/react-icons';
 import { CardBody, CardActionsRow } from 'components/Card';
+import { LucideIconChevronLeft } from '@ctrliq/quantic-react';
 import ContentError from 'components/ContentError';
 import ContentLoading from 'components/ContentLoading';
 import { DetailList } from 'components/DetailList';
@@ -50,7 +50,7 @@ function TroubleshootingDetail() {
     {
       name: (
         <>
-          <CaretLeftIcon />
+          <LucideIconChevronLeft />
           {t`Back to Settings`}
         </>
       ),
diff --git a/awx/ui/src/screens/Setting/UI/UIDetail/UIDetail.js b/awx/ui/src/screens/Setting/UI/UIDetail/UIDetail.js
index 32511a42..e6a6cb34 100644
--- a/awx/ui/src/screens/Setting/UI/UIDetail/UIDetail.js
+++ b/awx/ui/src/screens/Setting/UI/UIDetail/UIDetail.js
@@ -2,8 +2,8 @@ import React, { useEffect, useCallback } from 'react';
 import { Link, useHistory, useLocation } from 'react-router-dom';
 import { useLingui } from '@lingui/react/macro';
 import { Button } from '@patternfly/react-core';
-import { CaretLeftIcon } from '@patternfly/react-icons';
 import { CardBody, CardActionsRow } from 'components/Card';
+import { LucideIconChevronLeft } from '@ctrliq/quantic-react';
 import ContentLoading from 'components/ContentLoading';
 import ContentError from 'components/ContentError';
 import RoutedTabs from 'components/RoutedTabs';
@@ -57,7 +57,7 @@ function UIDetail() {
     {
       name: (
         <>
-          <CaretLeftIcon />
+          <LucideIconChevronLeft />
           {t`Back to Settings`}
         </>
       ),
diff --git a/awx/ui/src/screens/Setting/shared/SharedFields.js b/awx/ui/src/screens/Setting/shared/SharedFields.js
index 38016d0f..d5bd60f3 100644
--- a/awx/ui/src/screens/Setting/shared/SharedFields.js
+++ b/awx/ui/src/screens/Setting/shared/SharedFields.js
@@ -13,8 +13,6 @@ import {
   Tooltip,
   ButtonVariant,
 } from '@patternfly/react-core';
-import FileUploadIcon from '@patternfly/react-icons/dist/js/icons/file-upload-icon';
-import { ExclamationCircleIcon as PFExclamationCircleIcon } from '@patternfly/react-icons';
 import styled from 'styled-components';
 import AnsibleSelect from 'components/AnsibleSelect';
 import { ExecutionEnvironmentLookup } from 'components/Lookup';
@@ -25,8 +23,9 @@ import Popover from 'components/Popover';
 import { combine, minMaxValue, required, url, number } from 'util/validators';
 import AlertModal from 'components/AlertModal';
 import RevertButton from './RevertButton';
+import { LucideIconUpload, LucideIconCircleAlert } from '@ctrliq/quantic-react';
 
-const ExclamationCircleIcon = styled(PFExclamationCircleIcon)`
+const ExclamationCircleIcon = styled(LucideIconCircleAlert)`
   && {
     color: var(--pf-global--danger-color--100);
   }
@@ -556,7 +555,7 @@ const FileUploadField = ({
                   width="200px"
                 />
               ) : (
-                <FileUploadIcon size="lg" />
+                <LucideIconUpload size="md" />
               )}
             </FileUploadIconWrapper>
           )}
diff --git a/awx/ui/src/screens/SubscriptionUsage/SubscriptionUsage.js b/awx/ui/src/screens/SubscriptionUsage/SubscriptionUsage.js
index 134a10b0..4bbd051a 100644
--- a/awx/ui/src/screens/SubscriptionUsage/SubscriptionUsage.js
+++ b/awx/ui/src/screens/SubscriptionUsage/SubscriptionUsage.js
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { Trans, useLingui } from '@lingui/react/macro';
 import { Banner, Card, PageSection } from '@patternfly/react-core';
-import { InfoCircleIcon } from '@patternfly/react-icons';
+import { LucideIconInfo as InfoCircleIcon } from '@ctrliq/quantic-react';
 
 import { useConfig } from 'contexts/Config';
 import useBrandName from 'hooks/useBrandName';
@@ -29,7 +29,7 @@ function SubscriptionUsage() {
         <Banner variant="info">
           <Trans>
             <p>
-              <InfoCircleIcon /> A tech preview of the new {brandName} user
+              <InfoCircleIcon size={16} data-original-icon="InfoCircleIcon" /> A tech preview of the new {brandName} user
               interface can be found <a href="/ui_next">here</a>.
             </p>
           </Trans>
diff --git a/awx/ui/src/screens/Team/Team.js b/awx/ui/src/screens/Team/Team.js
index 84b44b64..d93b4c06 100644
--- a/awx/ui/src/screens/Team/Team.js
+++ b/awx/ui/src/screens/Team/Team.js
@@ -9,7 +9,7 @@ import {
   useLocation,
   useParams,
 } from 'react-router-dom';
-import { CaretLeftIcon } from '@patternfly/react-icons';
+import { LucideIconChevronLeft } from '@ctrliq/quantic-react';
 import { Card, PageSection } from '@patternfly/react-core';
 import { Config } from 'contexts/Config';
 import RoutedTabs from 'components/RoutedTabs';
@@ -47,7 +47,7 @@ function Team({ setBreadcrumb }) {
     {
       name: (
         <>
-          <CaretLeftIcon />
+          <LucideIconChevronLeft />
           {t`Back to Teams`}
         </>
       ),
diff --git a/awx/ui/src/screens/Team/TeamList/TeamListItem.js b/awx/ui/src/screens/Team/TeamList/TeamListItem.js
index 4e9a9cf7..26b2aea6 100644
--- a/awx/ui/src/screens/Team/TeamList/TeamListItem.js
+++ b/awx/ui/src/screens/Team/TeamList/TeamListItem.js
@@ -6,7 +6,7 @@ import { useLingui } from '@lingui/react/macro';
 import { Button } from '@patternfly/react-core';
 import { Tr, Td } from '@patternfly/react-table';
 import { Link } from 'react-router-dom';
-import { PencilAltIcon } from '@patternfly/react-icons';
+import { LucideIconPencil } from '@ctrliq/quantic-react';
 import { ActionsTd, ActionItem, TdBreakWord } from 'components/PaginatedTable';
 import { Team } from 'types';
 
@@ -57,7 +57,7 @@ function TeamListItem({ team, isSelected, onSelect, detailUrl, rowIndex }) {
             component={Link}
             to={`/teams/${team.id}/edit`}
           >
-            <PencilAltIcon />
+            <LucideIconPencil data-original-icon="PencilAltIcon" size="sm" />
           </Button>
         </ActionItem>
       </ActionsTd>
diff --git a/awx/ui/src/screens/Team/TeamRoles/TeamRolesList.js b/awx/ui/src/screens/Team/TeamRoles/TeamRolesList.js
index 8f447d6d..7ca1b8da 100644
--- a/awx/ui/src/screens/Team/TeamRoles/TeamRolesList.js
+++ b/awx/ui/src/screens/Team/TeamRoles/TeamRolesList.js
@@ -8,7 +8,6 @@ import {
   EmptyStateIcon,
   Title,
 } from '@patternfly/react-core';
-import { CubesIcon } from '@patternfly/react-icons';
 import { TeamsAPI, RolesAPI, UsersAPI } from 'api';
 import useRequest, { useDeleteItems } from 'hooks/useRequest';
 import DataListToolbar from 'components/DataListToolbar';
@@ -23,6 +22,8 @@ import ErrorDetail from 'components/ErrorDetail';
 import AlertModal from 'components/AlertModal';
 import UserAndTeamAccessAdd from 'components/UserAndTeamAccessAdd/UserAndTeamAccessAdd';
 import TeamRoleListItem from './TeamRoleListItem';
+import { LucideIconBox as CubesIcon } from '@ctrliq/quantic-react';
+
 
 const QS_CONFIG = getQSConfig('roles', {
   page: 1,
@@ -124,7 +125,7 @@ function TeamRolesList({ me, team }) {
   if (isSysAdmin) {
     return (
       <EmptyState variant="full">
-        <EmptyStateIcon icon={CubesIcon} />
+        <EmptyStateIcon icon={() => <CubesIcon size={64} data-original-icon="CubesIcon" />} />
         <Title headingLevel="h5" size="lg">
           {t`System Administrator`}
         </Title>
diff --git a/awx/ui/src/screens/Template/Survey/MultipleChoiceField.js b/awx/ui/src/screens/Template/Survey/MultipleChoiceField.js
index f08815d1..ba10b4cb 100644
--- a/awx/ui/src/screens/Template/Survey/MultipleChoiceField.js
+++ b/awx/ui/src/screens/Template/Survey/MultipleChoiceField.js
@@ -7,7 +7,7 @@ import {
   Button,
   InputGroup as PFInputGroup,
 } from '@patternfly/react-core';
-import PFCheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon';
+import { LucideIconCheck } from '@ctrliq/quantic-react';
 import styled from 'styled-components';
 import Popover from 'components/Popover';
 
@@ -19,7 +19,7 @@ const HelperTextWrapper = styled.div`
   font-size: var(--pf-c-form__label--FontSize);
 `;
 
-const CheckIcon = styled(PFCheckIcon)`
+const CheckIcon = styled(LucideIconCheck)`
   color: var(--pf-c-button--m-plain--disabled--Color);
   ${(props) =>
     props.selected && `color: var(--pf-c-button--m-secondary--active--Color)`};
@@ -148,7 +148,7 @@ choice per line.`}
                 : formattedChoicesHelpers.setValue(newValues);
             }}
           >
-            <CheckIcon selected={isDefault} />
+            <CheckIcon selected={isDefault} size={16} data-original-icon="CheckIcon" />
           </Button>
         </InputGroup>
       ))}
diff --git a/awx/ui/src/screens/Template/Survey/SurveyListItem.js b/awx/ui/src/screens/Template/Survey/SurveyListItem.js
index 23324e8b..6dce3543 100644
--- a/awx/ui/src/screens/Template/Survey/SurveyListItem.js
+++ b/awx/ui/src/screens/Template/Survey/SurveyListItem.js
@@ -5,7 +5,7 @@ import { Chip, Tooltip, Button } from '@patternfly/react-core';
 import { useLingui } from '@lingui/react/macro';
 
 import { Tr, Td } from '@patternfly/react-table';
-import { PencilAltIcon } from '@patternfly/react-icons';
+import { LucideIconPencil as PencilAltIcon } from '@ctrliq/quantic-react';
 import styled from 'styled-components';
 import ChipGroup from 'components/ChipGroup';
 import { ActionItem, ActionsTd } from 'components/PaginatedTable';
@@ -99,7 +99,7 @@ function SurveyListItem({ canEdit, question, isChecked, onSelect, rowIndex }) {
                 question.variable
               )}`}
             >
-              <PencilAltIcon />
+              <PencilAltIcon size={16} data-original-icon="PencilAltIcon" />
             </Button>
           </Tooltip>
         </ActionItem>
diff --git a/awx/ui/src/screens/Template/Survey/SurveyReorderModal.js b/awx/ui/src/screens/Template/Survey/SurveyReorderModal.js
index a704ac9e..8d834682 100644
--- a/awx/ui/src/screens/Template/Survey/SurveyReorderModal.js
+++ b/awx/ui/src/screens/Template/Survey/SurveyReorderModal.js
@@ -1,6 +1,6 @@
 import React, { useState, useRef } from 'react';
 import { useLingui } from '@lingui/react/macro';
-import { GripVerticalIcon } from '@patternfly/react-icons';
+import { LucideIconGripVertical as GripVerticalIcon } from '@ctrliq/quantic-react';
 import {
   Modal,
   TextInput,
@@ -238,7 +238,7 @@ function SurveyReorderModal({
             >
               <Td dataLabel={t`Order`}>
                 <Button variant="plain">
-                  <GripVerticalIcon />
+                  <GripVerticalIcon size={16} data-original-icon="GripVerticalIcon" />
                 </Button>
               </Td>
               <Td dataLabel={t`Name`} aria-label={q.question_name}>
diff --git a/awx/ui/src/screens/Template/Template.js b/awx/ui/src/screens/Template/Template.js
index 4df4907a..53564770 100644
--- a/awx/ui/src/screens/Template/Template.js
+++ b/awx/ui/src/screens/Template/Template.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useCallback } from 'react';
 import { useLingui } from '@lingui/react/macro';
 
-import { CaretLeftIcon } from '@patternfly/react-icons';
+import { LucideIconChevronLeft } from '@ctrliq/quantic-react';
 import { Card, PageSection } from '@patternfly/react-core';
 import {
   Switch,
@@ -125,7 +125,7 @@ function Template({ setBreadcrumb }) {
     {
       name: (
         <>
-          <CaretLeftIcon />
+          <LucideIconChevronLeft />
           {t`Back to Templates`}
         </>
       ),
@@ -157,9 +157,7 @@ function Template({ setBreadcrumb }) {
       link: `${match.url}/jobs`,
     },
     {
-      name: canAddAndEditSurvey
-        ? t`Survey`
-        : t`View Survey`,
+      name: canAddAndEditSurvey ? t`Survey` : t`View Survey`,
       link: `${match.url}/survey`,
     }
   );
diff --git a/awx/ui/src/screens/Template/WorkflowJobTemplate.js b/awx/ui/src/screens/Template/WorkflowJobTemplate.js
index 9d0b83b5..aa7c41f1 100644
--- a/awx/ui/src/screens/Template/WorkflowJobTemplate.js
+++ b/awx/ui/src/screens/Template/WorkflowJobTemplate.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useCallback } from 'react';
 import { useLingui } from '@lingui/react/macro';
 
-import { CaretLeftIcon } from '@patternfly/react-icons';
+import { LucideIconChevronLeft } from '@ctrliq/quantic-react';
 import { Card, PageSection } from '@patternfly/react-core';
 import {
   Switch,
@@ -106,7 +106,7 @@ function WorkflowJobTemplate({ setBreadcrumb }) {
     {
       name: (
         <>
-          <CaretLeftIcon />
+          <LucideIconChevronLeft />
           {t`Back to Templates`}
         </>
       ),
@@ -142,9 +142,7 @@ function WorkflowJobTemplate({ setBreadcrumb }) {
       link: `${match.url}/jobs`,
     },
     {
-      name: canAddAndEditSurvey
-        ? t`Survey`
-        : t`View Survey`,
+      name: canAddAndEditSurvey ? t`Survey` : t`View Survey`,
       link: `${match.url}/survey`,
     }
   );
diff --git a/awx/ui/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/JobTemplatesList.js b/awx/ui/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/JobTemplatesList.js
index 9353449b..b472f017 100644
--- a/awx/ui/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/JobTemplatesList.js
+++ b/awx/ui/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/JobTemplatesList.js
@@ -3,7 +3,7 @@ import { useLocation } from 'react-router-dom';
 
 import { useLingui } from '@lingui/react/macro';
 import { Popover } from '@patternfly/react-core';
-import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
+import { LucideIconCircleHelp as OutlinedQuestionCircleIcon } from '@ctrliq/quantic-react';
 import { func, shape } from 'prop-types';
 import { JobTemplatesAPI } from 'api';
 import { getQSConfig, parseQueryString } from 'util/qs';
@@ -141,7 +141,7 @@ function JobTemplatesList({ nodeResource, onUpdateNodeResource }) {
                 id={`item-${item.id}-info-popover`}
                 position="right"
               >
-                <OutlinedQuestionCircleIcon />
+                <OutlinedQuestionCircleIcon size={16} data-original-icon="OutlinedQuestionCircleIcon" />
               </Popover>
             </ActionItem>,
           ]}
diff --git a/awx/ui/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerLink.js b/awx/ui/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerLink.js
index e494ae94..da7d601c 100644
--- a/awx/ui/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerLink.js
+++ b/awx/ui/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerLink.js
@@ -3,7 +3,11 @@ import styled from 'styled-components';
 
 import { useLingui } from '@lingui/react/macro';
 import { bool, func, shape } from 'prop-types';
-import { PencilAltIcon, PlusIcon, TrashAltIcon } from '@patternfly/react-icons';
+import {
+  LucideIconPencil as PencilAltIcon,
+  LucideIconPlus as PlusIcon,
+  LucideIconTrash as TrashAltIcon,
+} from '@ctrliq/quantic-react';
 import {
   WorkflowDispatchContext,
   WorkflowStateContext,
@@ -51,7 +55,7 @@ function VisualizerLink({ link, updateLinkHelp, readOnly, updateHelpText }) {
       }
       onMouseLeave={() => updateHelpText(null)}
     >
-      <PlusIcon />
+      <PlusIcon size={16} data-original-icon="PlusIcon" />
     </WorkflowActionTooltipItem>
   );
 
@@ -71,7 +75,7 @@ function VisualizerLink({ link, updateLinkHelp, readOnly, updateHelpText }) {
             onMouseEnter={() => updateHelpText(t`Edit this link`)}
             onMouseLeave={() => updateHelpText(null)}
           >
-            <PencilAltIcon />
+            <PencilAltIcon size={16} data-original-icon="PencilAltIcon" />
           </WorkflowActionTooltipItem>,
           <WorkflowActionTooltipItem
             id="link-delete"
@@ -84,7 +88,7 @@ function VisualizerLink({ link, updateLinkHelp, readOnly, updateHelpText }) {
             onMouseEnter={() => updateHelpText(t`Delete this link`)}
             onMouseLeave={() => updateHelpText(null)}
           >
-            <TrashAltIcon />
+            <TrashAltIcon size={16} data-original-icon="TrashAltIcon" />
           </WorkflowActionTooltipItem>,
         ];
 
diff --git a/awx/ui/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerNode.js b/awx/ui/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerNode.js
index 3e42c62c..2f3b6960 100644
--- a/awx/ui/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerNode.js
+++ b/awx/ui/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerNode.js
@@ -3,12 +3,12 @@ import styled from 'styled-components';
 import { useLingui } from '@lingui/react/macro';
 import { bool, func, shape } from 'prop-types';
 import {
-  InfoIcon,
-  LinkIcon,
-  PencilAltIcon,
-  PlusIcon,
-  TrashAltIcon,
-} from '@patternfly/react-icons';
+  LucideIconInfo as InfoIcon,
+  LucideIconLink as LinkIcon,
+  LucideIconPencil as PencilAltIcon,
+  LucideIconPlus as PlusIcon,
+  LucideIconTrash as TrashAltIcon,
+} from '@ctrliq/quantic-react';
 import {
   WorkflowDispatchContext,
   WorkflowStateContext,
@@ -221,7 +221,7 @@ function VisualizerNode({
       onMouseEnter={() => updateHelpText(t`View node details`)}
       onMouseLeave={() => updateHelpText(null)}
     >
-      <InfoIcon />
+      <InfoIcon size={16} data-original-icon="InfoIcon" />
     </WorkflowActionTooltipItem>
   );
 
@@ -239,7 +239,7 @@ function VisualizerNode({
           onMouseEnter={() => updateHelpText(t`Add a new node`)}
           onMouseLeave={() => updateHelpText(null)}
         >
-          <PlusIcon />
+          <PlusIcon size={16} data-original-icon="PlusIcon" />
         </WorkflowActionTooltipItem>,
         viewDetailsAction,
         <WorkflowActionTooltipItem
@@ -249,7 +249,7 @@ function VisualizerNode({
           onMouseEnter={() => updateHelpText(t`Edit this node`)}
           onMouseLeave={() => updateHelpText(null)}
         >
-          <PencilAltIcon />
+          <PencilAltIcon size={16} data-original-icon="PencilAltIcon" />
         </WorkflowActionTooltipItem>,
         <WorkflowActionTooltipItem
           id="node-link"
@@ -259,12 +259,10 @@ function VisualizerNode({
             setHovering(false);
             dispatch({ type: 'SELECT_SOURCE_FOR_LINKING', node });
           }}
-          onMouseEnter={() =>
-            updateHelpText(t`Link to an available node`)
-          }
+          onMouseEnter={() => updateHelpText(t`Link to an available node`)}
           onMouseLeave={() => updateHelpText(null)}
         >
-          <LinkIcon />
+          <LinkIcon size={16} data-original-icon="LinkIcon" />
         </WorkflowActionTooltipItem>,
         <WorkflowActionTooltipItem
           id="node-delete"
@@ -277,7 +275,7 @@ function VisualizerNode({
           onMouseEnter={() => updateHelpText(t`Delete this node`)}
           onMouseLeave={() => updateHelpText(null)}
         >
-          <TrashAltIcon />
+          <TrashAltIcon size={16} data-original-icon="TrashAltIcon" />
         </WorkflowActionTooltipItem>,
       ];
 
diff --git a/awx/ui/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerToolbar.js b/awx/ui/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerToolbar.js
index 787c46e8..d37c0bd5 100644
--- a/awx/ui/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerToolbar.js
+++ b/awx/ui/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerToolbar.js
@@ -10,13 +10,13 @@ import {
   Tooltip,
 } from '@patternfly/react-core';
 import {
-  BookIcon,
-  CompassIcon,
-  RocketIcon,
-  TimesIcon,
-  TrashAltIcon,
-  WrenchIcon,
-} from '@patternfly/react-icons';
+  LucideIconBook as BookIcon,
+  LucideIconCompass as CompassIcon,
+  LucideIconRocket as RocketIcon,
+  LucideIconX as TimesIcon,
+  LucideIconTrash as TrashAltIcon,
+  LucideIconWrench as WrenchIcon,
+} from '@ctrliq/quantic-react';
 import styled from 'styled-components';
 import { LaunchButton } from 'components/LaunchButton';
 import {
@@ -87,7 +87,7 @@ function VisualizerToolbar({
               onClick={() => dispatch({ type: 'TOGGLE_LEGEND' })}
               variant="plain"
             >
-              <CompassIcon />
+              <CompassIcon size={16} data-original-icon="CompassIcon" />
             </ActionButton>
           </Tooltip>
           <Tooltip content={t`Toggle tools`} position="bottom">
@@ -99,13 +99,10 @@ function VisualizerToolbar({
               onClick={() => dispatch({ type: 'TOGGLE_TOOLS' })}
               variant="plain"
             >
-              <WrenchIcon />
+              <WrenchIcon size={16} data-original-icon="WrenchIcon" />
             </ActionButton>
           </Tooltip>
-          <Tooltip
-            content={t`Workflow documentation`}
-            position="bottom"
-          >
+          <Tooltip content={t`Workflow documentation`} position="bottom">
             <ActionButton
               aria-label={t`Workflow documentation`}
               id="visualizer-documentation"
@@ -117,15 +114,12 @@ function VisualizerToolbar({
                 config
               )}/html/userguide/workflow_templates.html#ug-wf-editor`}
             >
-              <BookIcon />
+              <BookIcon size={16} data-original-icon="BookIcon" />
             </ActionButton>
           </Tooltip>
           {template.summary_fields?.user_capabilities?.start && (
             <Tooltip content={t`Launch workflow`} position="bottom">
-              <LaunchButton
-                resource={template}
-                aria-label={t`Launch workflow`}
-              >
+              <LaunchButton resource={template} aria-label={t`Launch workflow`}>
                 {({ handleLaunch, isLaunching }) => (
                   <ActionButton
                     id="visualizer-launch"
@@ -135,7 +129,7 @@ function VisualizerToolbar({
                     }
                     onClick={handleLaunch}
                   >
-                    <RocketIcon />
+                    <RocketIcon size={16} data-original-icon="RocketIcon" />
                   </ActionButton>
                 )}
               </LaunchButton>
@@ -143,10 +137,7 @@ function VisualizerToolbar({
           )}
           {!readOnly && (
             <>
-              <Tooltip
-                content={t`Delete all nodes`}
-                position="bottom"
-              >
+              <Tooltip content={t`Delete all nodes`} position="bottom">
                 <ActionButton
                   id="visualizer-delete-all"
                   aria-label={t`Delete all nodes`}
@@ -159,7 +150,7 @@ function VisualizerToolbar({
                   }
                   variant="plain"
                 >
-                  <TrashAltIcon />
+                  <TrashAltIcon size={16} data-original-icon="TrashAltIcon" />
                 </ActionButton>
               </Tooltip>
               <Button
@@ -181,7 +172,7 @@ function VisualizerToolbar({
             onClick={onClose}
             variant="plain"
           >
-            <TimesIcon />
+            <TimesIcon size={16} data-original-icon="TimesIcon" />
           </Button>
         </div>
       </div>
diff --git a/awx/ui/src/screens/Template/shared/WebhookSubForm.js b/awx/ui/src/screens/Template/shared/WebhookSubForm.js
index 5e15f4aa..ee815787 100644
--- a/awx/ui/src/screens/Template/shared/WebhookSubForm.js
+++ b/awx/ui/src/screens/Template/shared/WebhookSubForm.js
@@ -1,5 +1,5 @@
 import React, { useEffect, useCallback } from 'react';
-import { SyncAltIcon } from '@patternfly/react-icons';
+import { LucideIconRefreshCw as SyncAltIcon } from '@ctrliq/quantic-react';
 import { useParams, useLocation } from 'react-router-dom';
 import { useLingui } from '@lingui/react/macro';
 
@@ -195,7 +195,7 @@ function WebhookSubForm({ templateType }) {
               aria-label={t`Update webhook key`}
               onClick={changeWebhookKey}
             >
-              <SyncAltIcon />
+              <SyncAltIcon size={16} data-original-icon="SyncAltIcon" />
             </Button>
           </InputGroup>
         </FormGroup>
diff --git a/awx/ui/src/screens/TopologyView/ContentLoading.js b/awx/ui/src/screens/TopologyView/ContentLoading.js
index c024099c..8c702ef6 100644
--- a/awx/ui/src/screens/TopologyView/ContentLoading.js
+++ b/awx/ui/src/screens/TopologyView/ContentLoading.js
@@ -10,15 +10,15 @@ import {
   TextContent,
   TextVariants,
 } from '@patternfly/react-core';
+import { LucideIconNetwork } from '@ctrliq/quantic-react';
 
-import { TopologyIcon as PFTopologyIcon } from '@patternfly/react-icons';
 
 const EmptyState = styled(PFEmptyState)`
   --pf-c-empty-state--m-lg--MaxWidth: none;
   min-height: 250px;
 `;
 
-const TopologyIcon = styled(PFTopologyIcon)`
+const TopologyIcon = styled(LucideIconNetwork)`
   font-size: 3em;
   fill: #6a6e73;
 `;
diff --git a/awx/ui/src/screens/TopologyView/Header.js b/awx/ui/src/screens/TopologyView/Header.js
index 52466706..d2522f23 100644
--- a/awx/ui/src/screens/TopologyView/Header.js
+++ b/awx/ui/src/screens/TopologyView/Header.js
@@ -12,12 +12,12 @@ import {
 } from '@patternfly/react-core';
 
 import {
-  SearchMinusIcon,
-  SearchPlusIcon,
-  ExpandArrowsAltIcon,
-  ExpandIcon,
-  RedoAltIcon,
-} from '@patternfly/react-icons';
+  LucideIconZoomIn as SearchPlusIcon,
+  LucideIconZoomOut as SearchMinusIcon,
+  LucideIconExpand as ExpandIcon,
+  LucideIconRedo as RedoAltIcon,
+  LucideIconFullscreen as ExpandArrowsAltIcon,
+} from '@ctrliq/quantic-react';
 
 const Header = ({
   title,
diff --git a/awx/ui/src/screens/TopologyView/Legend.js b/awx/ui/src/screens/TopologyView/Legend.js
index 55291d07..daccb1e3 100644
--- a/awx/ui/src/screens/TopologyView/Legend.js
+++ b/awx/ui/src/screens/TopologyView/Legend.js
@@ -15,32 +15,37 @@ import {
 } from '@patternfly/react-core';
 
 import {
-  ExclamationIcon,
-  CheckIcon,
-  OutlinedClockIcon,
-  PlusIcon,
-  MinusIcon,
-} from '@patternfly/react-icons';
+  LucideIconTriangleAlert,
+  LucideIconCheck,
+  LucideIconClock,
+  LucideIconPlus,
+  LucideIconMinus,
+} from '@ctrliq/quantic-react';
 
 const Wrapper = styled.div`
   position: absolute;
   left: 0;
-  padding: 0 10px;
+  padding: var(--quantic-spacing-4) var(--quantic-spacing-6);
   min-width: 150px;
-  background-color: rgba(255, 255, 255, 0.85);
+  background-color: var(--quantic-bg-secondary);
+  border-radius: var(--quantic-radius-md);
   overflow: auto;
   height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--quantic-spacing-3);
 `;
+
 const Button = styled(PFButton)`
   &&& {
-    width: 20px;
-    height: 20px;
-    border-radius: 10px;
+    width: var(--quantic-spacing-5);
+    height: var(--quantic-spacing-5);
+    border-radius: var(--quantic-radius-sm);
     padding: 0;
-    font-size: 11px;
-    background-color: white;
-    border: 1px solid #ccc;
-    color: black;
+    font-size: 10px;
+    background-color: var(--quantic-bg-tertiary);
+    line-height: 1;
+    color: var(--quantic-text-primary);
   }
 `;
 const DescriptionListDescription = styled(PFDescriptionListDescription)`
@@ -51,6 +56,11 @@ const DescriptionList = styled(PFDescriptionList)`
 `;
 const DescriptionListGroup = styled(PFDescriptionListGroup)`
   align-items: center;
+
+  .pf-c-button__icon.pf-m-start {
+    margin-right: 0;
+    vertical-align: middle;
+  }
 `;
 const Text = styled(PFText)`
   margin: 10px 0 5px;
@@ -63,7 +73,7 @@ function Legend() {
       <TextContent>
         <Text
           component={TextVariants.small}
-          style={{ fontWeight: 'bold', color: 'black', marginTop: 0 }}
+          style={{ fontWeight: 'bold', marginTop: 0 }}
         >
           {t`Legend`}
         </Text>
@@ -105,43 +115,29 @@ function Legend() {
               h
             </Button>
           </DescriptionListTerm>
-          <DescriptionListDescription>
-            {t`Hop node`}
-          </DescriptionListDescription>
+          <DescriptionListDescription>{t`Hop node`}</DescriptionListDescription>
         </DescriptionListGroup>
       </DescriptionList>
       <TextContent>
-        <Text component={TextVariants.small}>
-          {t`Node state types`}
-        </Text>
+        <Text component={TextVariants.small}>{t`Node state types`}</Text>
       </TextContent>
       <DescriptionList isHorizontal isFluid>
         <DescriptionListGroup>
           <DescriptionListTerm>
             <Button
-              icon={
-                <CheckIcon
-                  style={{ fill: 'white', marginLeft: '2px', marginTop: '3px' }}
-                />
-              }
+              icon={<LucideIconCheck size={16} />}
               isSmall
-              style={{ backgroundColor: '#3E8635' }}
+              style={{ backgroundColor: 'var(--quantic-color-brand-500)' }}
             />
           </DescriptionListTerm>
-          <DescriptionListDescription>
-            {t`Ready`}
-          </DescriptionListDescription>
+          <DescriptionListDescription>{t`Ready`}</DescriptionListDescription>
         </DescriptionListGroup>
         <DescriptionListGroup>
           <DescriptionListTerm>
             <Button
-              icon={
-                <OutlinedClockIcon
-                  style={{ fill: 'white', marginLeft: '3px', marginTop: '3px' }}
-                />
-              }
+              icon={<LucideIconClock size={16} />}
               isSmall
-              style={{ backgroundColor: '#0066CC' }}
+              style={{ backgroundColor: 'var(--quantic-color-gray-blue-500)' }}
             />
           </DescriptionListTerm>
           <DescriptionListDescription>
@@ -151,13 +147,9 @@ function Legend() {
         <DescriptionListGroup>
           <DescriptionListTerm>
             <Button
-              icon={
-                <PlusIcon
-                  style={{ fill: 'white', marginLeft: '3px', marginTop: '3px' }}
-                />
-              }
+              icon={<LucideIconPlus size={16} />}
               isSmall
-              style={{ backgroundColor: '#6A6E73' }}
+              style={{ backgroundColor: 'var(--quantic-bg-tertiary)' }}
             />
           </DescriptionListTerm>
           <DescriptionListDescription>
@@ -167,13 +159,9 @@ function Legend() {
         <DescriptionListGroup>
           <DescriptionListTerm>
             <Button
-              icon={
-                <MinusIcon
-                  style={{ fill: 'white', marginLeft: '3px', marginTop: '3px' }}
-                />
-              }
+              icon={<LucideIconMinus size={16} />}
               isSmall
-              style={{ backgroundColor: '#6A6E73' }}
+              style={{ backgroundColor: 'var(--quantic-bg-tertiary)' }}
             />
           </DescriptionListTerm>
           <DescriptionListDescription>
@@ -183,18 +171,12 @@ function Legend() {
         <DescriptionListGroup>
           <DescriptionListTerm>
             <Button
-              icon={
-                <ExclamationIcon
-                  style={{ fill: 'white', marginLeft: '3px', marginTop: '3px' }}
-                />
-              }
+              icon={<LucideIconTriangleAlert size={16} />}
               isSmall
-              style={{ backgroundColor: '#C9190B' }}
+              style={{ backgroundColor: 'var(--quantic-color-error-700)' }}
             />
           </DescriptionListTerm>
-          <DescriptionListDescription>
-            {t`Error`}
-          </DescriptionListDescription>
+          <DescriptionListDescription>{t`Error`}</DescriptionListDescription>
         </DescriptionListGroup>
         <DescriptionListGroup>
           <DescriptionListTerm>
@@ -212,7 +194,7 @@ function Legend() {
                 y="10"
                 textAnchor="middle"
                 dominantBaseline="central"
-                fill="black"
+                fill="currentColor"
                 fontSize="11px"
                 fontFamily="inherit"
                 fontWeight="400"
@@ -221,9 +203,7 @@ function Legend() {
               </text>
             </svg>
           </DescriptionListTerm>
-          <DescriptionListDescription>
-            {t`Enabled`}
-          </DescriptionListDescription>
+          <DescriptionListDescription>{t`Enabled`}</DescriptionListDescription>
         </DescriptionListGroup>
         <DescriptionListGroup>
           <DescriptionListTerm>
@@ -242,7 +222,7 @@ function Legend() {
                 y="10"
                 textAnchor="middle"
                 dominantBaseline="central"
-                fill="black"
+                fill="currentColor"
                 fontSize="11px"
                 fontFamily="inherit"
                 fontWeight="400"
@@ -251,15 +231,11 @@ function Legend() {
               </text>
             </svg>
           </DescriptionListTerm>
-          <DescriptionListDescription>
-            {t`Disabled`}
-          </DescriptionListDescription>
+          <DescriptionListDescription>{t`Disabled`}</DescriptionListDescription>
         </DescriptionListGroup>
       </DescriptionList>
       <TextContent>
-        <Text component={TextVariants.small}>
-          {t`Link state types`}
-        </Text>
+        <Text component={TextVariants.small}>{t`Link state types`}</Text>
       </TextContent>
       <DescriptionList isHorizontal isFluid>
         <DescriptionListGroup>
@@ -270,7 +246,7 @@ function Legend() {
                 y1="9"
                 x2="20"
                 y2="9"
-                stroke="#6A6E73"
+                stroke="var(--quantic-bg-tertiary)"
                 strokeWidth="4"
               />
             </svg>
@@ -287,15 +263,13 @@ function Legend() {
                 y1="9"
                 x2="20"
                 y2="9"
-                stroke="#3E8635"
+                stroke="var(--quantic-color-brand-500)"
                 strokeWidth="4"
                 strokeDasharray="6"
               />
             </svg>
           </DescriptionListTerm>
-          <DescriptionListDescription>
-            {t`Adding`}
-          </DescriptionListDescription>
+          <DescriptionListDescription>{t`Adding`}</DescriptionListDescription>
         </DescriptionListGroup>
         <DescriptionListGroup>
           <DescriptionListTerm>
@@ -305,15 +279,13 @@ function Legend() {
                 y1="9"
                 x2="20"
                 y2="9"
-                stroke="#C9190B"
+                stroke="var(--quantic-color-error-700)"
                 strokeWidth="4"
                 strokeDasharray="6"
               />
             </svg>
           </DescriptionListTerm>
-          <DescriptionListDescription>
-            {t`Removing`}
-          </DescriptionListDescription>
+          <DescriptionListDescription>{t`Removing`}</DescriptionListDescription>
         </DescriptionListGroup>
       </DescriptionList>
     </Wrapper>
diff --git a/awx/ui/src/screens/TopologyView/MeshGraph.js b/awx/ui/src/screens/TopologyView/MeshGraph.js
index 7c4d2c39..dddc5d6f 100644
--- a/awx/ui/src/screens/TopologyView/MeshGraph.js
+++ b/awx/ui/src/screens/TopologyView/MeshGraph.js
@@ -189,10 +189,22 @@ function MeshGraph({
         .attr('orient', 'auto')
         .append('path')
         .attr('d', 'M0,-5L10,0L0,5');
-      mesh.select('#end').attr('refX', 23).attr('fill', '#6A6E73');
-      mesh.select('#end-removing').attr('refX', 23).attr('fill', '#C9190B');
-      mesh.select('#end-adding').attr('refX', 23).attr('fill', '#3E8635');
-      mesh.select('#end-active').attr('refX', 18).attr('fill', '#0066CC');
+      mesh
+        .select('#end')
+        .attr('refX', 23)
+        .attr('fill', 'var(--quantic-bg-secondary)');
+      mesh
+        .select('#end-removing')
+        .attr('refX', 23)
+        .attr('fill', 'var(--quantic-color-error-800)');
+      mesh
+        .select('#end-adding')
+        .attr('refX', 23)
+        .attr('fill', 'var(--quantic-color-brand-600)');
+      mesh
+        .select('#end-active')
+        .attr('refX', 18)
+        .attr('fill', 'var(--quantic-color-gray-blue-500)');
 
       // Add links
       mesh
@@ -339,7 +351,7 @@ function MeshGraph({
         immediate.forEach((s) => {
           svg
             .selectAll(`.link-${s.index}`)
-            .style('stroke', '#0066CC')
+            .style('stroke', 'var(--quantic-color-gray-blue-500)')
             .style('stroke-width', '3px')
             .attr('marker-end', 'url(#end-active)');
         });
@@ -386,8 +398,8 @@ function MeshGraph({
           .attr('stroke-width', null);
         svg
           .select(`circle.id-${n.id}`)
-          .attr('stroke-width', '5px')
-          .attr('stroke', '#0066CC');
+          .attr('stroke-width', '3px')
+          .attr('stroke', 'var(--quantic-color-brand-500)');
         setIsNodeSelected(true);
         setSelectedNode(n);
       }
diff --git a/awx/ui/src/screens/TopologyView/Tooltip.js b/awx/ui/src/screens/TopologyView/Tooltip.js
index 71e31810..da35ee46 100644
--- a/awx/ui/src/screens/TopologyView/Tooltip.js
+++ b/awx/ui/src/screens/TopologyView/Tooltip.js
@@ -23,7 +23,7 @@ import {
   TextVariants,
   Label,
 } from '@patternfly/react-core';
-import { DownloadIcon } from '@patternfly/react-icons';
+import { LucideIconDownload as DownloadIcon } from '@ctrliq/quantic-react';
 import ContentLoading from 'components/ContentLoading';
 import InstanceToggle from 'components/InstanceToggle';
 import StatusLabel from 'components/StatusLabel';
@@ -34,11 +34,39 @@ import { formatDateString } from 'util/dates';
 const Wrapper = styled.div`
   position: absolute;
   right: 0;
-  padding: 0 10px;
+  padding: var(--quantic-spacing-4) var(--quantic-spacing-6);
   width: 25%;
-  background-color: rgba(255, 255, 255, 0.85);
+  background-color: var(--quantic-bg-secondary);
   overflow: auto;
   height: 100%;
+
+  .pf-c-description-list {
+    --pf-c-description-list__group--RowGap: var(--quantic-spacing-1);
+  }
+  .pf-c-description-list__text {
+    font-size: var(--quantic-font-size-body-xs);
+  }
+
+  .pf-c-switch {
+    --pf-c-switch__toggle--before--BackgroundColor: var(--quantic-bg-tertiary);
+    --pf-c-switch__label--PaddingLeft: var(--quantic-spacing-5);
+    --pf-c-switch__toggle--before--Top: 6px;
+    --pf-c-switch__input--checked__toggle--before--TranslateX: -6px;
+    --pf-c-switch__toggle--before--Width: var(--quantic-spacing-2);
+    --pf-c-switch__toggle--before--Height: var(--quantic-spacing-2);
+  }
+
+  .pf-c-switch__input:checked ~ .pf-c-switch__toggle::before {
+    --pf-c-switch__input--checked__toggle--before--TranslateX: -3px;
+    --pf-c-switch__toggle--before--BackgroundColor: var(
+      --quantic-color-brand-400
+    );
+  }
+
+  .pf-c-switch__label {
+    font-size: var(--quantic-font-size-body-xs);
+    --pf-c-switch__input--checked__label--Color: var(--quantic-text-primary);
+  }
 `;
 const Button = styled(PFButton)`
   &&& {
@@ -48,12 +76,12 @@ const Button = styled(PFButton)`
     padding: 0;
     font-size: 16px;
     background-color: white;
-    border: 1px solid #ccc;
+    border: 1px solid var(--quantic-border-primary);
     color: black;
   }
 `;
 const DescriptionList = styled(PFDescriptionList)`
-  gap: 0;
+  gap: var(--quantic-spacing-2);
 `;
 const DescriptionListGroup = styled(PFDescriptionListGroup)`
   align-items: center;
@@ -89,6 +117,7 @@ function renderInstanceGroups(instanceGroups) {
   return instanceGroups.map((ig) => (
     <React.Fragment key={ig.id}>
       <Label
+        variant="outline"
         color="blue"
         isTruncated
         render={({ className, content, componentRef }) => (
@@ -180,12 +209,7 @@ function Tooltip({
     <Wrapper className="tooltip" data-cy="tooltip">
       {isNodeSelected === false ? (
         <TextContent>
-          <Text
-            component={TextVariants.small}
-            style={{ fontWeight: 'bold', color: 'black', marginTop: 0 }}
-          >
-            {t`Details`}
-          </Text>
+          <Text component={TextVariants.small}>{t`Details`}</Text>
           <Divider component="div" />
           <Text component={TextVariants.small}>
             {t`Click on a node icon to display the details.`}
@@ -206,12 +230,7 @@ function Tooltip({
             </AlertModal>
           )}
           <TextContent>
-            <Text
-              component={TextVariants.small}
-              style={{ fontWeight: 'bold', color: 'black' }}
-            >
-              {t`Details`}
-            </Text>
+            <Text component={TextVariants.small}>{t`Details`}</Text>
             <Divider component="div" />
           </TextContent>
           {isLoading && <ContentLoading />}
@@ -231,17 +250,13 @@ function Tooltip({
                 </DescriptionListDescription>
               </DescriptionListGroup>
               <DescriptionListGroup>
-                <DescriptionListTerm>
-                  {t`Instance status`}
-                </DescriptionListTerm>
+                <DescriptionListTerm>{t`Instance status`}</DescriptionListTerm>
                 <DescriptionListDescription dataCy="node-state">
                   <StatusLabel status={instanceDetail.node_state} />
                 </DescriptionListDescription>
               </DescriptionListGroup>
               <DescriptionListGroup>
-                <DescriptionListTerm>
-                  {t`Instance type`}
-                </DescriptionListTerm>
+                <DescriptionListTerm>{t`Instance type`}</DescriptionListTerm>
                 <DescriptionListDescription dataCy="node-type">
                   {instanceDetail.node_type}
                 </DescriptionListDescription>
@@ -262,16 +277,17 @@ function Tooltip({
                       variant="secondary"
                       rel="noopener noreferrer"
                     >
-                      <DownloadIcon />
+                      <DownloadIcon
+                        size={16}
+                        data-original-icon="DownloadIcon"
+                      />
                     </PFButton>
                   </DescriptionListDescription>
                 </DescriptionListGroup>
               )}
               {instanceDetail.ip_address && (
                 <DescriptionListGroup>
-                  <DescriptionListTerm>
-                    {t`IP address`}
-                  </DescriptionListTerm>
+                  <DescriptionListTerm>{t`IP address`}</DescriptionListTerm>
                   <DescriptionListDescription>
                     {instanceDetail.ip_address}
                   </DescriptionListDescription>
@@ -290,9 +306,7 @@ function Tooltip({
               {instanceDetail.node_type !== 'hop' && (
                 <>
                   <DescriptionListGroup>
-                    <DescriptionListTerm>
-                      {t`Forks`}
-                    </DescriptionListTerm>
+                    <DescriptionListTerm>{t`Forks`}</DescriptionListTerm>
                     <DescriptionListDescription>
                       <SliderHolder data-cy="slider-holder">
                         <div data-cy="cpu-capacity">
@@ -326,9 +340,7 @@ function Tooltip({
                     </DescriptionListDescription>
                   </DescriptionListGroup>
                   <DescriptionListGroup>
-                    <DescriptionListTerm>
-                      {t`Capacity`}
-                    </DescriptionListTerm>
+                    <DescriptionListTerm>{t`Capacity`}</DescriptionListTerm>
                     <DescriptionListDescription dataCy="used-capacity">
                       {usedCapacity(instanceDetail, t)}
                     </DescriptionListDescription>
@@ -347,17 +359,13 @@ function Tooltip({
               )}
 
               <DescriptionListGroup>
-                <DescriptionListTerm>
-                  {t`Last modified`}
-                </DescriptionListTerm>
+                <DescriptionListTerm>{t`Last modified`}</DescriptionListTerm>
                 <DescriptionListDescription dataCy="last-modified">
                   {formatDateString(instanceDetail.modified)}
                 </DescriptionListDescription>
               </DescriptionListGroup>
               <DescriptionListGroup>
-                <DescriptionListTerm>
-                  {t`Last seen`}
-                </DescriptionListTerm>
+                <DescriptionListTerm>{t`Last seen`}</DescriptionListTerm>
                 <DescriptionListDescription dataCy="last-seen">
                   {instanceDetail.last_seen
                     ? formatDateString(instanceDetail.last_seen)
diff --git a/awx/ui/src/screens/TopologyView/constants.js b/awx/ui/src/screens/TopologyView/constants.js
index e29bd044..b5e190d7 100644
--- a/awx/ui/src/screens/TopologyView/constants.js
+++ b/awx/ui/src/screens/TopologyView/constants.js
@@ -18,19 +18,19 @@ export const DEFAULT_FONT_SIZE = '12px';
 export const LABEL_TEXT_MAX_LENGTH = 15;
 export const MARGIN = 15;
 export const NODE_STATE_COLOR_KEY = {
-  ready: '#3E8635',
-  'provision-fail': '#C9190B',
-  'deprovision-fail': '#C9190B',
-  unavailable: '#C9190B',
-  installed: '#0066CC',
-  provisioning: '#666',
-  deprovisioning: '#666',
+  ready: 'var(--quantic-color-brand-500)',
+  'provision-fail': 'var(--quantic-color-error-700)',
+  'deprovision-fail': 'var(--quantic-color-error-700)',
+  unavailable: 'var(--quantic-color-error-700)',
+  installed: 'var(--quantic-color-gray-blue-500)',
+  provisioning: 'var(--quantic-bg-tertiary)',
+  deprovisioning: 'var(--quantic-bg-tertiary)',
 };
 
 export const LINK_STATE_COLOR_KEY = {
-  established: '#6A6E73',
-  adding: '#3E8635',
-  removing: '#C9190B',
+  established: 'var(--quantic-bg-tertiary)',
+  adding: 'var(--quantic-color-brand-500)',
+  removing: 'var(--quantic-color-error-700)',
 };
 
 export const NODE_TYPE_SYMBOL_KEY = {
diff --git a/awx/ui/src/screens/User/User.js b/awx/ui/src/screens/User/User.js
index 90e3e1f2..718785dc 100644
--- a/awx/ui/src/screens/User/User.js
+++ b/awx/ui/src/screens/User/User.js
@@ -9,7 +9,7 @@ import {
   useRouteMatch,
   useLocation,
 } from 'react-router-dom';
-import { CaretLeftIcon } from '@patternfly/react-icons';
+import { LucideIconChevronLeft } from '@ctrliq/quantic-react';
 import { Card, PageSection } from '@patternfly/react-core';
 import useRequest from 'hooks/useRequest';
 import { UsersAPI } from 'api';
@@ -54,7 +54,7 @@ function User({ setBreadcrumb, me }) {
     {
       name: (
         <>
-          <CaretLeftIcon />
+          <LucideIconChevronLeft />
           {t`Back to Users`}
         </>
       ),
diff --git a/awx/ui/src/screens/User/UserList/UserListItem.js b/awx/ui/src/screens/User/UserList/UserListItem.js
index 8b73ddf0..45db4a76 100644
--- a/awx/ui/src/screens/User/UserList/UserListItem.js
+++ b/awx/ui/src/screens/User/UserList/UserListItem.js
@@ -6,7 +6,7 @@ import { useLingui } from '@lingui/react/macro';
 import { Button, Label } from '@patternfly/react-core';
 import { Tr, Td } from '@patternfly/react-table';
 import { Link } from 'react-router-dom';
-import { PencilAltIcon } from '@patternfly/react-icons';
+import { LucideIconPencil } from '@ctrliq/quantic-react';
 import { ActionsTd, ActionItem, TdBreakWord } from 'components/PaginatedTable';
 
 import { User } from 'types';
@@ -42,16 +42,12 @@ function UserListItem({ user, isSelected, onSelect, detailUrl, rowIndex }) {
         </Link>
         {ldapUser && (
           <span css="margin-left: 12px">
-            <Label aria-label={t`ldap user`}>
-              {t`LDAP`}
-            </Label>
+            <Label aria-label={t`ldap user`}>{t`LDAP`}</Label>
           </span>
         )}
         {socialAuthUser && (
           <span css="margin-left: 12px">
-            <Label aria-label={t`social login`}>
-              {t`SOCIAL`}
-            </Label>
+            <Label aria-label={t`social login`}>{t`SOCIAL`}</Label>
           </span>
         )}
       </TdBreakWord>
@@ -70,7 +66,7 @@ function UserListItem({ user, isSelected, onSelect, detailUrl, rowIndex }) {
             component={Link}
             to={`/users/${user.id}/edit`}
           >
-            <PencilAltIcon />
+            <LucideIconPencil data-original-icon="PencilAltIcon" size="sm" />
           </Button>
         </ActionItem>
       </ActionsTd>
diff --git a/awx/ui/src/screens/User/UserRoles/UserRolesList.js b/awx/ui/src/screens/User/UserRoles/UserRolesList.js
index 80905645..81f0b6a6 100644
--- a/awx/ui/src/screens/User/UserRoles/UserRolesList.js
+++ b/awx/ui/src/screens/User/UserRoles/UserRolesList.js
@@ -9,7 +9,6 @@ import {
   EmptyStateIcon,
   Title,
 } from '@patternfly/react-core';
-import { CubesIcon } from '@patternfly/react-icons';
 import { getQSConfig, parseQueryString } from 'util/qs';
 import { UsersAPI, RolesAPI } from 'api';
 import useRequest, { useDeleteItems } from 'hooks/useRequest';
@@ -24,6 +23,8 @@ import AlertModal from 'components/AlertModal';
 import DatalistToolbar from 'components/DataListToolbar';
 import UserAndTeamAccessAdd from 'components/UserAndTeamAccessAdd/UserAndTeamAccessAdd';
 import UserRolesListItem from './UserRolesListItem';
+import { LucideIconBox as CubesIcon } from '@ctrliq/quantic-react';
+
 
 const QS_CONFIG = getQSConfig('roles', {
   page: 1,
@@ -124,7 +125,7 @@ function UserRolesList({ user }) {
   if (isSysAdmin) {
     return (
       <EmptyState variant="full">
-        <EmptyStateIcon icon={CubesIcon} />
+        <EmptyStateIcon icon={() => <CubesIcon size={64} data-original-icon="CubesIcon" />} />
         <Title headingLevel="h5" size="lg">
           {t`System Administrator`}
         </Title>
diff --git a/awx/ui/src/screens/User/UserToken/UserToken.js b/awx/ui/src/screens/User/UserToken/UserToken.js
index f0bc46d0..b55c8c17 100644
--- a/awx/ui/src/screens/User/UserToken/UserToken.js
+++ b/awx/ui/src/screens/User/UserToken/UserToken.js
@@ -8,7 +8,7 @@ import {
   useLocation,
   useParams,
 } from 'react-router-dom';
-import { CaretLeftIcon } from '@patternfly/react-icons';
+import { LucideIconChevronLeft } from '@ctrliq/quantic-react';
 import { Card, PageSection } from '@patternfly/react-core';
 import RoutedTabs from 'components/RoutedTabs';
 import ContentError from 'components/ContentError';
@@ -43,7 +43,7 @@ function UserToken({ setBreadcrumb, user }) {
     {
       name: (
         <>
-          <CaretLeftIcon />
+          <LucideIconChevronLeft />
           {t`Back to Tokens`}
         </>
       ),
@@ -71,9 +71,7 @@ function UserToken({ setBreadcrumb, user }) {
             {error.response.status === 404 && (
               <span>
                 {t`Token not found.`}{' '}
-                <Link to="/users/:id/tokens">
-                  {t`View all tokens.`}
-                </Link>
+                <Link to="/users/:id/tokens">{t`View all tokens.`}</Link>
               </span>
             )}
           </ContentError>
@@ -99,11 +97,7 @@ function UserToken({ setBreadcrumb, user }) {
         <Route key="not-found" path="*">
           {!isLoading && (
             <ContentError isNotFound>
-              {id && (
-                <Link to={`/users/${id}/tokens`}>
-                  {t`View Tokens`}
-                </Link>
-              )}
+              {id && <Link to={`/users/${id}/tokens`}>{t`View Tokens`}</Link>}
             </ContentError>
           )}
         </Route>
diff --git a/awx/ui/src/screens/WorkflowApproval/WorkflowApproval.js b/awx/ui/src/screens/WorkflowApproval/WorkflowApproval.js
index 67cc7d95..cd70952e 100644
--- a/awx/ui/src/screens/WorkflowApproval/WorkflowApproval.js
+++ b/awx/ui/src/screens/WorkflowApproval/WorkflowApproval.js
@@ -2,7 +2,7 @@ import React, { useEffect, useCallback } from 'react';
 import { useLingui } from '@lingui/react/macro';
 
 import { Card, PageSection } from '@patternfly/react-core';
-import { CaretLeftIcon } from '@patternfly/react-icons';
+import { LucideIconChevronLeft } from '@ctrliq/quantic-react';
 import {
   Link,
   Switch,
@@ -66,7 +66,7 @@ function WorkflowApproval({ setBreadcrumb }) {
     {
       name: (
         <>
-          <CaretLeftIcon />
+          <LucideIconChevronLeft />
           {t`Back to Workflow Approvals`}
         </>
       ),
diff --git a/awx/ui/src/screens/WorkflowApproval/shared/WorkflowApprovalButton.js b/awx/ui/src/screens/WorkflowApproval/shared/WorkflowApprovalButton.js
index fc9d7e04..829210d3 100644
--- a/awx/ui/src/screens/WorkflowApproval/shared/WorkflowApprovalButton.js
+++ b/awx/ui/src/screens/WorkflowApproval/shared/WorkflowApprovalButton.js
@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { useLingui } from '@lingui/react/macro';
 import { Button } from '@patternfly/react-core';
-import { OutlinedThumbsUpIcon } from '@patternfly/react-icons';
+import { LucideIconThumbsUp as OutlinedThumbsUpIcon } from '@ctrliq/quantic-react';
 import { WorkflowApprovalsAPI } from 'api';
 import useRequest, { useDismissableError } from 'hooks/useRequest';
 
@@ -45,7 +45,7 @@ function WorkflowApprovalButton({
             : t`Approve`
         }
       >
-        {isDetailView ? t`Approve` : <OutlinedThumbsUpIcon />}
+        {isDetailView ? t`Approve` : <OutlinedThumbsUpIcon size={16} data-original-icon="OutlinedThumbsUpIcon" />}
       </Button>
       {approveError && (
         <AlertModal
diff --git a/awx/ui/src/screens/WorkflowApproval/shared/WorkflowDenyButton.js b/awx/ui/src/screens/WorkflowApproval/shared/WorkflowDenyButton.js
index dff16304..af2f1067 100644
--- a/awx/ui/src/screens/WorkflowApproval/shared/WorkflowDenyButton.js
+++ b/awx/ui/src/screens/WorkflowApproval/shared/WorkflowDenyButton.js
@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { useLingui } from '@lingui/react/macro';
 import { Button } from '@patternfly/react-core';
-import { OutlinedThumbsDownIcon } from '@patternfly/react-icons';
+import { LucideIconThumbsDown as OutlinedThumbsDownIcon } from '@ctrliq/quantic-react';
 import { WorkflowApprovalsAPI } from 'api';
 import useRequest, { useDismissableError } from 'hooks/useRequest';
 
@@ -42,7 +42,7 @@ function WorkflowDenyButton({ isDetailView, workflowApproval, onHandleToast }) {
         variant={isDetailView ? 'secondary' : 'plain'}
         onClick={() => handleDeny()}
       >
-        {isDetailView ? t`Deny` : <OutlinedThumbsDownIcon />}
+        {isDetailView ? t`Deny` : <OutlinedThumbsDownIcon size={16} data-original-icon="OutlinedThumbsDownIcon" />}
       </Button>
       {denyError && (
         <AlertModal