diff --git a/jest.config.js b/jest.config.js
index 0fe9af1..55edc76 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -10,8 +10,6 @@ module.exports = {
   moduleNameMapper: {
     "\\.(css|scss)$": "identity-obj-proxy",
     "single-spa-react/parcel": "single-spa-react/lib/cjs/parcel.cjs",
-    "@madie/madie-components":
-      "<rootDir>/node_modules/@madie/madie-components/src/madie-madie-components.tsx",
   },
   setupFilesAfterEnv: ["@testing-library/jest-dom"],
   globals: {
diff --git a/package-lock.json b/package-lock.json
index fff74d4..7cfdb59 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,7 +36,6 @@
         "@babel/preset-react": "^7.14.5",
         "@babel/preset-typescript": "^7.14.5",
         "@babel/runtime": "^7.14.6",
-        "@madie/madie-components": "^0.0.3",
         "@madie/madie-models": "^1.3.34",
         "@testing-library/jest-dom": "^5.14.1",
         "@testing-library/react": "^12.0.0",
@@ -3154,15 +3153,6 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
       "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
     },
-    "node_modules/@heroicons/react": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-1.0.6.tgz",
-      "integrity": "sha512-JJCXydOFWMDpCP4q13iEplA503MQO3xLoZiKum+955ZCtHINWnx26CUxVxxFQu/uLb4LW3ge15ZpzIkXKkJ8oQ==",
-      "dev": true,
-      "peerDependencies": {
-        "react": ">= 16"
-      }
-    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz",
@@ -4351,27 +4341,6 @@
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==",
       "dev": true
     },
-    "node_modules/@madie/madie-components": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/@madie/madie-components/-/madie-components-0.0.3.tgz",
-      "integrity": "sha512-eKUpunhiGEDmf7mOS34tBI9cUweeUzLRZB5jDG3udBGYwhXx22qNPOIx+yfvOn8C0jC+yABXR1rZtU7YVK09Dw==",
-      "dev": true,
-      "dependencies": {
-        "@heroicons/react": "^1.0.5",
-        "@tailwindcss/forms": "^0.3.4",
-        "lodash": "^4.17.21",
-        "single-spa": "^5.9.3",
-        "single-spa-react": "^4.6.0",
-        "system-font-css": "^2.0.2",
-        "tailwindcss": "^2.2.19",
-        "twin.macro": "^2.8.1"
-      },
-      "peerDependencies": {
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2",
-        "styled-components": "^5.3.3"
-      }
-    },
     "node_modules/@madie/madie-design-system": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/@madie/madie-design-system/-/madie-design-system-1.2.4.tgz",
@@ -6485,18 +6454,6 @@
         "@sinonjs/commons": "^1.7.0"
       }
     },
-    "node_modules/@tailwindcss/forms": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.3.4.tgz",
-      "integrity": "sha512-vlAoBifNJUkagB+PAdW4aHMe4pKmSLroH398UPgIogBFc91D2VlHUxe4pjxQhiJl0Nfw53sHSJSQBSTQBZP3vA==",
-      "dev": true,
-      "dependencies": {
-        "mini-svg-data-uri": "^1.2.3"
-      },
-      "peerDependencies": {
-        "tailwindcss": ">=2.0.0"
-      }
-    },
     "node_modules/@testing-library/dom": {
       "version": "8.14.0",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.14.0.tgz",
@@ -9123,33 +9080,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/cpr": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/cpr/-/cpr-2.2.0.tgz",
-      "integrity": "sha512-q8UoWzIT9rslJKb3Y5CcByzR2zX7GBkVcoU6jJx02d/BgbE7zJ8Aix74i7bw3iYk58TrgXhmB2XB0aGaBd7oZA==",
-      "dev": true,
-      "dependencies": {
-        "graceful-fs": "^4.1.5",
-        "minimist": "^1.2.0",
-        "mkdirp": "~0.5.1",
-        "rimraf": "^2.5.4"
-      },
-      "bin": {
-        "cpr": "bin/cpr"
-      }
-    },
-    "node_modules/cpr/node_modules/rimraf": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
-      "dev": true,
-      "dependencies": {
-        "glob": "^7.1.3"
-      },
-      "bin": {
-        "rimraf": "bin.js"
-      }
-    },
     "node_modules/create-jest": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/create-jest/-/create-jest-29.7.0.tgz",
@@ -16142,15 +16072,6 @@
         "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
       }
     },
-    "node_modules/mini-svg-data-uri": {
-      "version": "1.4.4",
-      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
-      "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
-      "dev": true,
-      "bin": {
-        "mini-svg-data-uri": "cli.js"
-      }
-    },
     "node_modules/minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -16173,18 +16094,6 @@
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
       "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
     },
-    "node_modules/mkdirp": {
-      "version": "0.5.6",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
-      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
-      "dev": true,
-      "dependencies": {
-        "minimist": "^1.2.6"
-      },
-      "bin": {
-        "mkdirp": "bin/cmd.js"
-      }
-    },
     "node_modules/modern-normalize": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/modern-normalize/-/modern-normalize-1.1.0.tgz",
@@ -19861,19 +19770,6 @@
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
       "dev": true
     },
-    "node_modules/system-font-css": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/system-font-css/-/system-font-css-2.0.2.tgz",
-      "integrity": "sha512-zK36lpja4NIi4Po99bXReeqeDcM1sW4hTKJt5Mby/IXX6kLSwjkQ4pZThFdgb/jDwfRsBvxxVG+VekP1sTdF0w==",
-      "dev": true,
-      "hasInstallScript": true,
-      "dependencies": {
-        "cpr": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
     "node_modules/systemjs-webpack-interop": {
       "version": "2.3.7",
       "resolved": "https://registry.npmjs.org/systemjs-webpack-interop/-/systemjs-webpack-interop-2.3.7.tgz",
@@ -23454,13 +23350,6 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
       "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
     },
-    "@heroicons/react": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-1.0.6.tgz",
-      "integrity": "sha512-JJCXydOFWMDpCP4q13iEplA503MQO3xLoZiKum+955ZCtHINWnx26CUxVxxFQu/uLb4LW3ge15ZpzIkXKkJ8oQ==",
-      "dev": true,
-      "requires": {}
-    },
     "@humanwhocodes/config-array": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz",
@@ -24389,22 +24278,6 @@
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==",
       "dev": true
     },
-    "@madie/madie-components": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/@madie/madie-components/-/madie-components-0.0.3.tgz",
-      "integrity": "sha512-eKUpunhiGEDmf7mOS34tBI9cUweeUzLRZB5jDG3udBGYwhXx22qNPOIx+yfvOn8C0jC+yABXR1rZtU7YVK09Dw==",
-      "dev": true,
-      "requires": {
-        "@heroicons/react": "^1.0.5",
-        "@tailwindcss/forms": "^0.3.4",
-        "lodash": "^4.17.21",
-        "single-spa": "^5.9.3",
-        "single-spa-react": "^4.6.0",
-        "system-font-css": "^2.0.2",
-        "tailwindcss": "^2.2.19",
-        "twin.macro": "^2.8.1"
-      }
-    },
     "@madie/madie-design-system": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/@madie/madie-design-system/-/madie-design-system-1.2.4.tgz",
@@ -25899,15 +25772,6 @@
         "@sinonjs/commons": "^1.7.0"
       }
     },
-    "@tailwindcss/forms": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.3.4.tgz",
-      "integrity": "sha512-vlAoBifNJUkagB+PAdW4aHMe4pKmSLroH398UPgIogBFc91D2VlHUxe4pjxQhiJl0Nfw53sHSJSQBSTQBZP3vA==",
-      "dev": true,
-      "requires": {
-        "mini-svg-data-uri": "^1.2.3"
-      }
-    },
     "@testing-library/dom": {
       "version": "8.14.0",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.14.0.tgz",
@@ -27982,29 +27846,6 @@
         "yaml": "^1.7.2"
       }
     },
-    "cpr": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/cpr/-/cpr-2.2.0.tgz",
-      "integrity": "sha512-q8UoWzIT9rslJKb3Y5CcByzR2zX7GBkVcoU6jJx02d/BgbE7zJ8Aix74i7bw3iYk58TrgXhmB2XB0aGaBd7oZA==",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "^4.1.5",
-        "minimist": "^1.2.0",
-        "mkdirp": "~0.5.1",
-        "rimraf": "^2.5.4"
-      },
-      "dependencies": {
-        "rimraf": {
-          "version": "2.7.1",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
-          "dev": true,
-          "requires": {
-            "glob": "^7.1.3"
-          }
-        }
-      }
-    },
     "create-jest": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/create-jest/-/create-jest-29.7.0.tgz",
@@ -33233,12 +33074,6 @@
         "tiny-warning": "^1.0.3"
       }
     },
-    "mini-svg-data-uri": {
-      "version": "1.4.4",
-      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
-      "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
-      "dev": true
-    },
     "minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -33258,15 +33093,6 @@
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
       "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
     },
-    "mkdirp": {
-      "version": "0.5.6",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
-      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
-      "dev": true,
-      "requires": {
-        "minimist": "^1.2.6"
-      }
-    },
     "modern-normalize": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/modern-normalize/-/modern-normalize-1.1.0.tgz",
@@ -35773,15 +35599,6 @@
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
       "dev": true
     },
-    "system-font-css": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/system-font-css/-/system-font-css-2.0.2.tgz",
-      "integrity": "sha512-zK36lpja4NIi4Po99bXReeqeDcM1sW4hTKJt5Mby/IXX6kLSwjkQ4pZThFdgb/jDwfRsBvxxVG+VekP1sTdF0w==",
-      "dev": true,
-      "requires": {
-        "cpr": "^2.2.0"
-      }
-    },
     "systemjs-webpack-interop": {
       "version": "2.3.7",
       "resolved": "https://registry.npmjs.org/systemjs-webpack-interop/-/systemjs-webpack-interop-2.3.7.tgz",
diff --git a/package.json b/package.json
index d44b9bf..93d00d4 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,6 @@
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.14.5",
     "@babel/runtime": "^7.14.6",
-    "@madie/madie-components": "^0.0.3",
     "@madie/madie-models": "^1.3.34",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
diff --git a/src/components/cqlLibraryList/CqlLibraryList.test.tsx b/src/components/cqlLibraryList/CqlLibraryList.test.tsx
index 5573181..da7750f 100644
--- a/src/components/cqlLibraryList/CqlLibraryList.test.tsx
+++ b/src/components/cqlLibraryList/CqlLibraryList.test.tsx
@@ -1,11 +1,5 @@
 import * as React from "react";
-import {
-  fireEvent,
-  logRoles,
-  render,
-  screen,
-  waitFor,
-} from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import { CqlLibrary, Model } from "@madie/madie-models";
 import CqlLibraryList from "./CqlLibraryList";
 import userEvent from "@testing-library/user-event";
@@ -44,7 +38,6 @@ const cqlLibrary: CqlLibrary[] = [
     lastModifiedBy: "",
     draft: true,
     version: "0.0.000",
-    groupId: "",
     cql: "library AdvancedIllnessandFrailtyExclusion_QICore4 version '5.0.00'",
     cqlErrors: false,
   },
@@ -59,7 +52,6 @@ const cqlLibrary: CqlLibrary[] = [
     lastModifiedBy: "null",
     draft: true,
     version: "0.0.000",
-    groupId: "",
     cql: "library AdvancedIllnessandFrailtyExclusion_QICore4 version '5.0.00'",
     cqlErrors: false,
   },
@@ -122,7 +114,7 @@ describe("CqlLibrary List component", () => {
     const cqlLibraryButton = getByTestId(
       `cqlLibrary-button-${cqlLibrary[0].id}`
     );
-    fireEvent.click(cqlLibraryButton);
+    userEvent.click(cqlLibraryButton);
     expect(mockPush).toHaveBeenNthCalledWith(
       2,
       "/cql-libraries/622e1f46d1fd3729d861e6cb/edit/details"
@@ -131,7 +123,7 @@ describe("CqlLibrary List component", () => {
     const editCqlLibraryButton = getByTestId(
       `cqlLibrary-button-${cqlLibrary[0].id}`
     );
-    fireEvent.click(editCqlLibraryButton);
+    userEvent.click(editCqlLibraryButton);
     expect(mockPush).toHaveBeenNthCalledWith(
       3,
       "/cql-libraries/622e1f46d1fd3729d861e6cb/edit/details"
@@ -148,13 +140,13 @@ describe("CqlLibrary List component", () => {
     const viewEditButton = screen.getByTestId(
       `view/edit-cqlLibrary-button-${cqlLibrary[0].id}`
     );
-    fireEvent.click(viewEditButton);
+    userEvent.click(viewEditButton);
 
     const versionButton = screen.getByTestId(
       `create-new-version-${cqlLibrary[0].id}-button`
     );
 
-    fireEvent.click(versionButton);
+    userEvent.click(versionButton);
     expect(screen.getByTestId("create-version-dialog")).toBeInTheDocument();
   });
 
@@ -168,13 +160,13 @@ describe("CqlLibrary List component", () => {
     const viewEditButton = screen.getByTestId(
       `view/edit-cqlLibrary-button-${cqlLibrary[0].id}`
     );
-    fireEvent.click(viewEditButton);
+    userEvent.click(viewEditButton);
 
     const editButton = screen.getByTestId(
       `edit-cql-library-button-${cqlLibrary[0].id}-edit`
     );
     expect(editButton).toBeInTheDocument();
-    fireEvent.click(editButton);
+    userEvent.click(editButton);
 
     expect(mockPush).toHaveBeenNthCalledWith(
       1,
@@ -195,7 +187,6 @@ describe("CqlLibrary List component", () => {
         lastModifiedBy: "",
         draft: false,
         version: "0.0.000",
-        groupId: "",
         cql: "library AdvancedIllnessandFrailtyExclusion_QICore4 version '5.0.00'",
         cqlErrors: false,
       },
@@ -209,13 +200,13 @@ describe("CqlLibrary List component", () => {
     const viewEditButton = screen.getByTestId(
       `view/edit-cqlLibrary-button-${cqlLibrary[0].id}`
     );
-    fireEvent.click(viewEditButton);
+    userEvent.click(viewEditButton);
 
     const draftButton = screen.getByTestId(
       `create-new-draft-${cqlLibrary[0].id}-button`
     );
-    fireEvent.click(draftButton);
-    expect(screen.getByTestId("create-draft-dialog")).toBeInTheDocument();
+    userEvent.click(draftButton);
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
   });
 
   it("should successfully draft a cql library", async () => {
@@ -228,19 +219,18 @@ describe("CqlLibrary List component", () => {
     const viewEditButton = screen.getByTestId(
       `view/edit-cqlLibrary-button-${cqlLibrary[0].id}`
     );
-    fireEvent.click(viewEditButton);
+    userEvent.click(viewEditButton);
     const draftButton = screen.getByTestId(
       `create-new-draft-${cqlLibrary[0].id}-button`
     );
-    fireEvent.click(draftButton);
-    expect(screen.getByTestId("create-draft-dialog")).toBeInTheDocument();
-    const cqlLibraryNameInput = screen.getByTestId(
-      "cql-library-name-text-field"
-    );
-    fireEvent.blur(cqlLibraryNameInput);
+    userEvent.click(draftButton);
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+    const cqlLibraryNameInput = screen.getByRole("textbox", {
+      name: "CQL Library Name",
+    });
     userEvent.clear(cqlLibraryNameInput);
     userEvent.type(cqlLibraryNameInput, "TestingLibraryName12");
-    fireEvent.click(screen.getByTestId("create-draft-continue-button"));
+    userEvent.click(screen.getByRole("button", { name: "Continue" }));
     await waitFor(() => {
       expect(loadCqlLibraries).toHaveBeenCalled();
     });
@@ -271,20 +261,19 @@ describe("CqlLibrary List component", () => {
     const viewEditButton = screen.getByTestId(
       `view/edit-cqlLibrary-button-${cqlLibrary[0].id}`
     );
-    fireEvent.click(viewEditButton);
+    userEvent.click(viewEditButton);
 
     const draftButton = screen.getByTestId(
       `create-new-draft-${cqlLibrary[0].id}-button`
     );
-    fireEvent.click(draftButton);
-    expect(screen.getByTestId("create-draft-dialog")).toBeInTheDocument();
-    const cqlLibraryNameInput = screen.getByTestId(
-      "cql-library-name-text-field"
-    );
-    fireEvent.blur(cqlLibraryNameInput);
+    userEvent.click(draftButton);
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+    const cqlLibraryNameInput = screen.getByRole("textbox", {
+      name: "CQL Library Name",
+    });
     userEvent.clear(cqlLibraryNameInput);
     userEvent.type(cqlLibraryNameInput, "TestingLibraryName12");
-    fireEvent.click(screen.getByTestId("create-draft-continue-button"));
+    userEvent.click(screen.getByRole("button", { name: "Continue" }));
     await waitFor(() => {
       expect(screen.getByTestId("cql-library-list-snackBar")).toHaveTextContent(
         "Requested Cql Library cannot be drafted"
@@ -317,19 +306,18 @@ describe("CqlLibrary List component", () => {
     const viewEditButton = screen.getByTestId(
       `view/edit-cqlLibrary-button-${cqlLibrary[0].id}`
     );
-    fireEvent.click(viewEditButton);
+    userEvent.click(viewEditButton);
     const draftButton = screen.getByTestId(
       `create-new-draft-${cqlLibrary[0].id}-button`
     );
-    fireEvent.click(draftButton);
-    expect(screen.getByTestId("create-draft-dialog")).toBeInTheDocument();
-    const cqlLibraryNameInput = screen.getByTestId(
-      "cql-library-name-text-field"
-    );
-    fireEvent.blur(cqlLibraryNameInput);
+    userEvent.click(draftButton);
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+    const cqlLibraryNameInput = screen.getByRole("textbox", {
+      name: "CQL Library Name",
+    });
     userEvent.clear(cqlLibraryNameInput);
     userEvent.type(cqlLibraryNameInput, "TestingLibraryName12");
-    fireEvent.click(screen.getByTestId("create-draft-continue-button"));
+    userEvent.click(screen.getByRole("button", { name: "Continue" }));
     await waitFor(() => {
       expect(screen.getByTestId("cql-library-list-snackBar")).toHaveTextContent(
         "User is unauthorized to create a draft"
@@ -363,20 +351,19 @@ describe("CqlLibrary List component", () => {
     const viewEditButton = screen.getByTestId(
       `view/edit-cqlLibrary-button-${cqlLibrary[0].id}`
     );
-    fireEvent.click(viewEditButton);
+    userEvent.click(viewEditButton);
 
     const draftButton = screen.getByTestId(
       `create-new-draft-${cqlLibrary[0].id}-button`
     );
-    fireEvent.click(draftButton);
-    expect(screen.getByTestId("create-draft-dialog")).toBeInTheDocument();
-    const cqlLibraryNameInput = screen.getByTestId(
-      "cql-library-name-text-field"
-    );
-    fireEvent.blur(cqlLibraryNameInput);
+    userEvent.click(draftButton);
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+    const cqlLibraryNameInput = screen.getByRole("textbox", {
+      name: "CQL Library Name",
+    });
     userEvent.clear(cqlLibraryNameInput);
     userEvent.type(cqlLibraryNameInput, "TestingLibraryName12");
-    fireEvent.click(screen.getByTestId("create-draft-continue-button"));
+    userEvent.click(screen.getByRole("button", { name: "Continue" }));
     await waitFor(() => {
       expect(screen.getByTestId("cql-library-list-snackBar")).toHaveTextContent(
         "Internal server error"
@@ -410,19 +397,18 @@ describe("CqlLibrary List component", () => {
     const viewEditButton = screen.getByTestId(
       `view/edit-cqlLibrary-button-${cqlLibrary[0].id}`
     );
-    fireEvent.click(viewEditButton);
+    userEvent.click(viewEditButton);
     const draftButton = screen.getByTestId(
       `create-new-draft-${cqlLibrary[0].id}-button`
     );
-    fireEvent.click(draftButton);
-    expect(screen.getByTestId("create-draft-dialog")).toBeInTheDocument();
-    const cqlLibraryNameInput = screen.getByTestId(
-      "cql-library-name-text-field"
-    );
-    fireEvent.blur(cqlLibraryNameInput);
+    userEvent.click(draftButton);
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+    const cqlLibraryNameInput = screen.getByRole("textbox", {
+      name: "CQL Library Name",
+    });
     userEvent.clear(cqlLibraryNameInput);
     userEvent.type(cqlLibraryNameInput, "ExistingLibraryName");
-    fireEvent.click(screen.getByTestId("create-draft-continue-button"));
+    userEvent.click(screen.getByRole("button", { name: "Continue" }));
     await waitFor(() => {
       expect(screen.getByTestId("cql-library-list-snackBar")).toHaveTextContent(
         "Requested Cql Library cannot be drafted. Library name must be unique."
@@ -440,14 +426,14 @@ describe("CqlLibrary List component", () => {
     const viewEditButton = screen.getByTestId(
       `view/edit-cqlLibrary-button-${cqlLibrary[0].id}`
     );
-    fireEvent.click(viewEditButton);
+    userEvent.click(viewEditButton);
     const versionButton = screen.getByTestId(
       `create-new-version-${cqlLibrary[0].id}-button`
     );
-    fireEvent.click(versionButton);
-    fireEvent.click(screen.getByLabelText("Major"));
+    userEvent.click(versionButton);
+    userEvent.click(screen.getByLabelText("Major"));
     await waitFor(() => {
-      fireEvent.click(screen.getByTestId("create-version-continue-button"));
+      userEvent.click(screen.getByTestId("create-version-continue-button"));
       expect(loadCqlLibraries).toHaveBeenCalled();
     });
   });
@@ -477,15 +463,15 @@ describe("CqlLibrary List component", () => {
     const viewEditButton = screen.getByTestId(
       `view/edit-cqlLibrary-button-${cqlLibrary[0].id}`
     );
-    fireEvent.click(viewEditButton);
+    userEvent.click(viewEditButton);
 
     const versionButton = screen.getByTestId(
       `create-new-version-${cqlLibrary[0].id}-button`
     );
-    fireEvent.click(versionButton);
-    fireEvent.click(screen.getByLabelText("Major"));
+    userEvent.click(versionButton);
+    userEvent.click(screen.getByLabelText("Major"));
     await waitFor(() => {
-      fireEvent.click(screen.getByTestId("create-version-continue-button"));
+      userEvent.click(screen.getByTestId("create-version-continue-button"));
       expect(screen.getByTestId("cql-library-list-snackBar")).toHaveTextContent(
         "Requested Cql Library cannot be versioned"
       );
@@ -517,14 +503,14 @@ describe("CqlLibrary List component", () => {
     const viewEditButton = screen.getByTestId(
       `view/edit-cqlLibrary-button-${cqlLibrary[0].id}`
     );
-    fireEvent.click(viewEditButton);
+    userEvent.click(viewEditButton);
     const versionButton = screen.getByTestId(
       `create-new-version-${cqlLibrary[0].id}-button`
     );
-    fireEvent.click(versionButton);
-    fireEvent.click(screen.getByLabelText("Major"));
+    userEvent.click(versionButton);
+    userEvent.click(screen.getByLabelText("Major"));
     await waitFor(() => {
-      fireEvent.click(screen.getByTestId("create-version-continue-button"));
+      userEvent.click(screen.getByTestId("create-version-continue-button"));
       expect(screen.getByTestId("cql-library-list-snackBar")).toHaveTextContent(
         "User is unauthorized to create a version"
       );
@@ -557,14 +543,14 @@ describe("CqlLibrary List component", () => {
     const viewEditButton = screen.getByTestId(
       `view/edit-cqlLibrary-button-${cqlLibrary[0].id}`
     );
-    fireEvent.click(viewEditButton);
+    userEvent.click(viewEditButton);
     const versionButton = screen.getByTestId(
       `create-new-version-${cqlLibrary[0].id}-button`
     );
-    fireEvent.click(versionButton);
-    fireEvent.click(screen.getByLabelText("Major"));
+    userEvent.click(versionButton);
+    userEvent.click(screen.getByLabelText("Major"));
     await waitFor(() => {
-      fireEvent.click(screen.getByTestId("create-version-continue-button"));
+      userEvent.click(screen.getByTestId("create-version-continue-button"));
       expect(screen.getByTestId("cql-library-list-snackBar")).toHaveTextContent(
         "Internal server error"
       );
@@ -584,7 +570,6 @@ describe("CqlLibrary List component", () => {
         lastModifiedBy: "",
         draft: true,
         version: "0.0.000",
-        groupId: "",
         cql: "library AdvancedIllnessandFrailtyExclusion_QICore4 version '5.0.00'",
         cqlErrors: false,
       },
@@ -620,7 +605,6 @@ describe("CqlLibrary List component", () => {
         lastModifiedBy: "",
         draft: true,
         version: "0.0.000",
-        groupId: "",
         cql: "library AdvancedIllnessandFrailtyExclusion_QICore4 version '5.0.00'",
         cqlErrors: false,
       },
@@ -635,7 +619,6 @@ describe("CqlLibrary List component", () => {
         lastModifiedBy: "",
         draft: false,
         version: "1.0.000",
-        groupId: "",
         cql: "library AdvancedIllnessandFrailtyExclusion_QICore4 version '5.0.00'",
         cqlErrors: false,
       },
@@ -680,7 +663,6 @@ describe("CqlLibrary List component", () => {
         lastModifiedBy: "",
         draft: true, // need this to be true for UI to present delete option
         version: "0.0.000",
-        groupId: "",
         cql: "library AdvancedIllnessandFrailtyExclusion_QICore4 version '5.0.00'",
         cqlErrors: false,
       },
@@ -741,7 +723,6 @@ describe("CqlLibrary List component", () => {
         lastModifiedBy: "",
         draft: true, // need this to be true for UI to present delete option
         version: "0.0.000",
-        groupId: "",
         cql: "library AdvancedIllnessandFrailtyExclusion_QICore4 version '5.0.00'",
         cqlErrors: false,
       },
@@ -801,7 +782,6 @@ describe("CqlLibrary List component", () => {
         lastModifiedBy: "",
         draft: true,
         version: "0.0.000",
-        groupId: "",
         cql: "library AdvancedIllnessandFrailtyExclusion_QICore4 version '5.0.00'",
         cqlErrors: false,
       },
@@ -816,7 +796,6 @@ describe("CqlLibrary List component", () => {
         lastModifiedBy: "",
         draft: false,
         version: "1.0.000",
-        groupId: "",
         cql: "library AdvancedIllnessandFrailtyExclusion_QICore4 version '5.0.00'",
         cqlErrors: false,
       },
@@ -842,7 +821,7 @@ describe("CqlLibrary List component", () => {
       expect(useCqlLibraryServiceMockResolved.deleteDraft).not.toBeCalled();
     });
     expect(
-      await screen.queryByText("The Draft CQL Library has been deleted.")
+      screen.queryByText("The Draft CQL Library has been deleted.")
     ).not.toBeInTheDocument();
   });
 
@@ -860,7 +839,6 @@ describe("CqlLibrary List component", () => {
         lastModifiedBy: "",
         draft: true,
         version: "0.0.000",
-        groupId: "",
         cql: "library AdvancedIllnessandFrailtyExclusion_QICore4 version '5.0.00'",
         cqlErrors: false,
       },
@@ -898,7 +876,6 @@ describe("CqlLibrary List component", () => {
         lastModifiedBy: "",
         draft: false,
         version: "0.0.000",
-        groupId: "",
         cql: "library AdvancedIllnessandFrailtyExclusion_QICore4 version '5.0.00'",
         cqlErrors: false,
       },
diff --git a/src/components/createDraftDialog/CreateDraftDialog.test.tsx b/src/components/createDraftDialog/CreateDraftDialog.test.tsx
index 3d1dfe1..4fcc956 100644
--- a/src/components/createDraftDialog/CreateDraftDialog.test.tsx
+++ b/src/components/createDraftDialog/CreateDraftDialog.test.tsx
@@ -1,17 +1,13 @@
 import * as React from "react";
 import { CqlLibrary, Model } from "@madie/madie-models";
 import CreatDraftDialog from "./CreateDraftDialog";
-import {
-  act,
-  fireEvent,
-  render,
-  screen,
-  waitFor,
-} from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import clearAllMocks = jest.clearAllMocks;
 
 const cqlLibrary: CqlLibrary = {
+  cqlErrors: false,
+  librarySetId: "",
   id: "622e1f46d1fd3729d861e6cb",
   cqlLibraryName: "testing1",
   model: Model.QICORE,
@@ -21,7 +17,6 @@ const cqlLibrary: CqlLibrary = {
   lastModifiedBy: null,
   draft: true,
   version: "0.0.000",
-  groupId: null,
   cql: null,
 };
 
@@ -39,14 +34,14 @@ describe("Create Draft Dialog component", () => {
         cqlLibrary={cqlLibrary}
       />
     );
-    expect(screen.getByTestId("create-draft-dialog")).toBeInTheDocument();
-    expect(screen.getByTestId("cql-library-name-text-field")).toHaveValue(
-      "testing1"
-    );
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+    expect(
+      screen.getByRole("textbox", { name: "CQL Library Name" })
+    ).toHaveValue("testing1");
   });
 
   it("should generate field level error for required Cql Library name", async () => {
-    const { getByTestId } = render(
+    render(
       <CreatDraftDialog
         open={true}
         onClose={jest.fn()}
@@ -54,14 +49,14 @@ describe("Create Draft Dialog component", () => {
         cqlLibrary={cqlLibrary}
       />
     );
-    const cqlLibraryNameInput = getByTestId("cql-library-name-text-field");
-    fireEvent.blur(cqlLibraryNameInput);
+    const cqlLibraryNameInput = screen.getByRole("textbox", {
+      name: "CQL Library Name",
+    });
     userEvent.clear(cqlLibraryNameInput);
     await waitFor(() => {
-      expect(getByTestId("cqlLibraryName-helper-text")).not.toBe(null);
-      expect(getByTestId("cqlLibraryName-helper-text")).toHaveTextContent(
-        "Library name is required."
-      );
+      expect(
+        screen.getByTestId("cqlLibraryName-helper-text")
+      ).toHaveTextContent("Library name is required.");
     });
   });
 
@@ -74,14 +69,12 @@ describe("Create Draft Dialog component", () => {
         cqlLibrary={cqlLibrary}
       />
     );
-    const cqlLibraryNameInput = screen.getByTestId(
-      "cql-library-name-text-field"
-    );
-    fireEvent.blur(cqlLibraryNameInput);
+    const cqlLibraryNameInput = screen.getByRole("textbox", {
+      name: "CQL Library Name",
+    });
     userEvent.clear(cqlLibraryNameInput);
     userEvent.type(cqlLibraryNameInput, "123123");
     await waitFor(() => {
-      expect(screen.getByTestId("cqlLibraryName-helper-text")).not.toBe(null);
       expect(
         screen.getByTestId("cqlLibraryName-helper-text")
       ).toHaveTextContent(
@@ -99,14 +92,12 @@ describe("Create Draft Dialog component", () => {
         cqlLibrary={cqlLibrary}
       />
     );
-    const cqlLibraryNameInput = screen.getByTestId(
-      "cql-library-name-text-field"
-    );
-    fireEvent.blur(cqlLibraryNameInput);
+    const cqlLibraryNameInput = screen.getByRole("textbox", {
+      name: "CQL Library Name",
+    });
     userEvent.clear(cqlLibraryNameInput);
     userEvent.type(cqlLibraryNameInput, "Testing_libraryName12");
     await waitFor(() => {
-      expect(screen.getByTestId("cqlLibraryName-helper-text")).not.toBe(null);
       expect(
         screen.getByTestId("cqlLibraryName-helper-text")
       ).toHaveTextContent(
@@ -124,14 +115,12 @@ describe("Create Draft Dialog component", () => {
         cqlLibrary={cqlLibrary}
       />
     );
-    const cqlLibraryNameInput = screen.getByTestId(
-      "cql-library-name-text-field"
-    );
-    fireEvent.blur(cqlLibraryNameInput);
+    const cqlLibraryNameInput = screen.getByRole("textbox", {
+      name: "CQL Library Name",
+    });
     userEvent.clear(cqlLibraryNameInput);
     userEvent.type(cqlLibraryNameInput, "testingLibraryName12");
     await waitFor(() => {
-      expect(screen.getByTestId("cqlLibraryName-helper-text")).not.toBe(null);
       expect(
         screen.getByTestId("cqlLibraryName-helper-text")
       ).toHaveTextContent(
@@ -149,14 +138,12 @@ describe("Create Draft Dialog component", () => {
         cqlLibrary={cqlLibrary}
       />
     );
-    const cqlLibraryNameInput = screen.getByTestId(
-      "cql-library-name-text-field"
-    );
-    fireEvent.blur(cqlLibraryNameInput);
+    const cqlLibraryNameInput = screen.getByRole("textbox", {
+      name: "CQL Library Name",
+    });
     userEvent.clear(cqlLibraryNameInput);
     userEvent.type(cqlLibraryNameInput, "testing LibraryName12");
     await waitFor(() => {
-      expect(screen.getByTestId("cqlLibraryName-helper-text")).not.toBe(null);
       expect(
         screen.getByTestId("cqlLibraryName-helper-text")
       ).toHaveTextContent(
@@ -174,9 +161,7 @@ describe("Create Draft Dialog component", () => {
         cqlLibrary={cqlLibrary}
       />
     );
-    expect(
-      screen.getByTestId("create-draft-continue-button")
-    ).not.toBeDisabled();
+    expect(screen.getByRole("button", { name: "Continue" })).not.toBeDisabled();
   });
 
   it("should navigate to cql library home page on cancel", async () => {
@@ -189,7 +174,7 @@ describe("Create Draft Dialog component", () => {
         cqlLibrary={cqlLibrary}
       />
     );
-    fireEvent.click(screen.getByTestId("create-draft-cancel-button"));
+    userEvent.click(screen.getByRole("button", { name: "Cancel" }));
     expect(onCloseFn).toHaveBeenCalled();
   });
 
@@ -203,16 +188,13 @@ describe("Create Draft Dialog component", () => {
         cqlLibrary={cqlLibrary}
       />
     );
-    const cqlLibraryNameInput = screen.getByTestId(
-      "cql-library-name-text-field"
-    );
-    fireEvent.blur(cqlLibraryNameInput);
+    const cqlLibraryNameInput = screen.getByRole("textbox", {
+      name: "CQL Library Name",
+    });
     userEvent.clear(cqlLibraryNameInput);
     userEvent.type(cqlLibraryNameInput, "TestingLibraryName12");
-    expect(
-      screen.getByTestId("create-draft-continue-button")
-    ).not.toBeDisabled();
-    fireEvent.click(screen.getByTestId("create-draft-continue-button"));
+    expect(screen.getByRole("button", { name: "Continue" })).not.toBeDisabled();
+    userEvent.click(screen.getByRole("button", { name: "Continue" }));
     await waitFor(() => {
       expect(onSubmitFn).toHaveBeenCalled();
     });
diff --git a/src/components/createDraftDialog/CreateDraftDialog.tsx b/src/components/createDraftDialog/CreateDraftDialog.tsx
index 3981e31..b26894c 100644
--- a/src/components/createDraftDialog/CreateDraftDialog.tsx
+++ b/src/components/createDraftDialog/CreateDraftDialog.tsx
@@ -1,82 +1,27 @@
 import React from "react";
-import tw from "twin.macro";
+import "twin.macro";
 import "styled-components/macro";
-import {
-  Dialog,
-  DialogContent,
-  DialogActions,
-  DialogTitle,
-  Divider,
-  IconButton,
-  Typography,
-} from "@mui/material";
-import CloseIcon from "@mui/icons-material/Close";
-import ChevronRightIcon from "@mui/icons-material/ChevronRight";
-import classNames from "classnames";
-import { makeStyles } from "@mui/styles";
+import { DialogContent, Box, Typography } from "@mui/material";
 import { useFormik } from "formik";
 import * as Yup from "yup";
 import { CqlLibrary } from "@madie/madie-models";
-import { HelperText, Label, TextInput } from "@madie/madie-components";
 import { synchingEditorCqlContent } from "@madie/madie-editor";
-import { Button } from "@madie/madie-design-system/dist/react";
+import { MadieDialog, TextField } from "@madie/madie-design-system/dist/react";
+import _ from "lodash";
 
-const useStyles = makeStyles({
-  row: {
-    display: "flex",
-    flexDirection: "row",
-  },
-  end: {
-    justifyContent: "flex-end",
-    marginBottom: -23,
-  },
-  paper: {
-    position: "relative",
-    overflow: "visible",
-    marginTop: -20,
-  },
-  dialogTitle: {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    padding: "24px 32px",
-  },
-  title: {
-    fontFamily: "Rubik",
-    fontSize: 24,
-    padding: 0,
-  },
-  close: {
-    color: "#242424",
-  },
-  info: {
-    fontSize: 14,
-    fontWeight: 300,
-    fontFamily: "Rubik",
-  },
-  asterisk: {
-    color: "#D92F2F",
-    marginRight: 3,
-  },
-  dividerBottom: {
-    marginTop: 10,
-  },
-  actionsRoot: {
-    padding: 16,
-    "& >:not(:first-of-type)": {
-      marginLeft: 16,
-    },
-  },
-  chevron: {
-    fontSize: 22,
-    margin: "-9px -14px -7px 4px",
-  },
-});
+interface CreateDraftDialogProps {
+  open: boolean;
+  onClose: Function;
+  onSubmit: Function;
+  cqlLibrary: CqlLibrary;
+}
 
-const FormRow = tw.div`mt-3`;
-
-const CreatDraftDialog = ({ open, onClose, onSubmit, cqlLibrary }) => {
+const CreatDraftDialog = ({
+  open,
+  onClose,
+  onSubmit,
+  cqlLibrary,
+}: CreateDraftDialogProps) => {
   const formik = useFormik({
     initialValues: {
       cqlLibraryName: cqlLibrary?.cqlLibraryName,
@@ -94,106 +39,72 @@ const CreatDraftDialog = ({ open, onClose, onSubmit, cqlLibrary }) => {
     onSubmit: async ({ cqlLibraryName }) => submitForm(cqlLibraryName),
   });
 
-  const submitForm = async (cqlLibraryName) => {
-    const using = cqlLibrary?.model.split(" v");
+  const submitForm = async (cqlLibraryName: string) => {
+    const cqlModelInfo: string[] = _.split(cqlLibrary?.model, " v", 2);
     const inSyncCql = await synchingEditorCqlContent(
       "",
       cqlLibrary?.cql,
       cqlLibraryName,
       cqlLibrary?.cqlLibraryName,
       cqlLibrary?.version,
-      using[0],
-      using[1],
+      cqlModelInfo[0],
+      cqlModelInfo[1],
       "draftDialog"
     );
     return onSubmit({ ...cqlLibrary, cqlLibraryName, cql: inSyncCql });
   };
 
-  const classes = useStyles();
-  const flexEnd = classNames(classes.row, classes.end);
-
-  function formikErrorHandler(name: string, isError: boolean) {
-    if (formik.touched[name] && formik.errors[name]) {
-      return (
-        <HelperText
-          data-testid={`${name}-helper-text`}
-          text={formik.errors[name]?.toString()}
-          isError={isError}
-        />
-      );
-    }
-  }
-
   return (
-    <Dialog
-      open={open}
-      data-testid="create-draft-dialog"
-      onClose={onClose}
-      maxWidth="sm"
-      fullWidth
-      classes={{
-        paper: classes.paper,
+    <MadieDialog
+      form
+      title="Create Draft"
+      dialogProps={{
+        onClose,
+        open,
+        onSubmit: formik.handleSubmit,
+      }}
+      cancelButtonProps={{
+        variant: "secondary",
+        cancelText: "Cancel",
+        "data-testid": "create-draft-cancel-button",
+      }}
+      continueButtonProps={{
+        variant: "cyan",
+        type: "submit",
+        "data-testid": "create-draft-continue-button",
+        disabled: !formik.isValid,
+        continueText: "Continue",
       }}
     >
-      <form
-        data-testid="cql-library-draft-form"
-        onSubmit={formik.handleSubmit}
-        style={{ overflow: "scroll" }}
-      >
-        <div className={classes.dialogTitle}>
-          <DialogTitle className={classes.title}>Create Draft</DialogTitle>
-          <div>
-            <IconButton onClick={onClose}>
-              <CloseIcon className={classes.close} />
-            </IconButton>
-          </div>
+      <DialogContent>
+        <div tw="flex flex-row justify-end">
+          <Typography tw="text-sm font-light">
+            <span tw="text-red-550 mr-1">*</span>
+            Required field
+          </Typography>
         </div>
-        <Divider />
-        <DialogContent>
-          <div className={flexEnd}>
-            <Typography className={classes.info}>
-              <span className={classes.asterisk}>*</span>
-              Required field
-            </Typography>
-          </div>
-          <FormRow>
-            <TextInput
-              type="text"
-              id="cqlLibraryName"
-              {...formik.getFieldProps("cqlLibraryName")}
-              data-testid="cql-library-name-text-field"
-              required={true}
-              aria-required={true}
-            >
-              <Label htmlFor="cqlLibraryName" text="Cql Library Name" />
-              {formikErrorHandler("cqlLibraryName", true)}
-            </TextInput>
-          </FormRow>
-        </DialogContent>
-        <Divider className={classes.dividerBottom} />
-        <DialogActions classes={{ root: classes.actionsRoot }}>
-          <Button
-            variant="outline"
-            onClick={onClose}
-            data-testid="create-draft-cancel-button"
-          >
-            Cancel
-          </Button>
-          <Button
-            variant="cyan"
-            type="submit"
-            data-testid="create-draft-continue-button"
-            disabled={!formik.isValid}
-            style={{ marginTop: 0 }}
-          >
-            <span>
-              Continue
-              <ChevronRightIcon className={classes.chevron} />
-            </span>
-          </Button>
-        </DialogActions>
-      </form>
-    </Dialog>
+        <Box>
+          <TextField
+            {...formik.getFieldProps("cqlLibraryName")}
+            placeholder="CQL Library Name"
+            required
+            label="CQL Library Name"
+            id="cqlLibraryName"
+            inputProps={{
+              "data-testid": "cql-library-name-input",
+              "aria-describedby": "cql-library-name-helper-text",
+            }}
+            data-testid="cql-library-name-field"
+            size="small"
+            error={
+              formik.touched.cqlLibraryName &&
+              Boolean(formik.errors.cqlLibraryName)
+            }
+            helperText={formik.errors["cqlLibraryName"]}
+          />
+        </Box>
+      </DialogContent>
+    </MadieDialog>
   );
 };
 
diff --git a/tailwind.config.js b/tailwind.config.js
index fbdf455..9dc749c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -87,6 +87,7 @@ module.exports = {
         400: "#ff4c46",
         500: "#ff342d",
         DEFAULT: "#ff342d",
+        550: "#d92F2F",
         600: "#db202a",
         700: "#b7162c",
         800: "#930e2b",
diff --git a/webpack.config.js b/webpack.config.js
index 73af9d2..810e364 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -23,11 +23,7 @@ module.exports = (webpackConfigEnv, argv) => {
   });
 
   const externalsConfig = {
-    externals: [
-      "@madie/madie-components",
-      "@madie/madie-editor",
-      "@madie/madie-util",
-    ],
+    externals: ["@madie/madie-editor", "@madie/madie-util"],
   };
 
   // We need to override the css loading rule from the parent configuration