diff --git a/frontend/apps/editor3d/app/src/components/signaled/TopBar/TopBar.tsx b/frontend/apps/editor3d/app/src/components/signaled/TopBar/TopBar.tsx
index c7b551c669..1548911986 100644
--- a/frontend/apps/editor3d/app/src/components/signaled/TopBar/TopBar.tsx
+++ b/frontend/apps/editor3d/app/src/components/signaled/TopBar/TopBar.tsx
@@ -1,6 +1,8 @@
+import { useState } from "react";
 import {
   faChevronLeft,
   faChevronRight,
+  faGear,
   faImages,
 } from "@fortawesome/pro-solid-svg-icons";
 import { useLocation, useParams } from "react-router-dom";
@@ -10,7 +12,7 @@ import { SceneTitleInput } from "./SceneTitleInput";
 import { getCurrentLocationWithoutParams } from "~/utilities";
 import { Activity } from "~/pages/PageEnigma/comps/GenerateModals/Activity";
 import { LibraryModal } from "~/pages/PageEnigma/comps/LibraryModal/LibraryModal";
-import { useState } from "react";
+import { SettingsModal } from "~/pages/PageEnigma/comps/SettingsModal";
 
 function isEditorPath(path: string) {
   if (path === "/") return true;
@@ -28,6 +30,7 @@ export const TopBar = ({ pageName }: Props) => {
   );
   const [isLibraryModalOpen, setIsLibraryModalOpen] = useState(false);
   const [activeLibraryTab, setActiveLibraryTab] = useState("my-media");
+  const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false);
 
   const handleClick = () => {
     window.location.href = "https://storyteller-2d.netlify.app/";
@@ -72,6 +75,12 @@ export const TopBar = ({ pageName }: Props) => {
 
           <div className="flex justify-end gap-3.5">
             <div className="flex gap-2">
+              <Button
+                variant="secondary"
+                icon={faGear}
+                className="h-[38px] w-[38px]"
+                onClick={() => setIsSettingsModalOpen(true)}
+              />
               <Button
                 variant="secondary"
                 icon={faImages}
@@ -79,6 +88,7 @@ export const TopBar = ({ pageName }: Props) => {
               >
                 My Gallery
               </Button>
+
               <Activity />
             </div>
             <div className="flex justify-end gap-2">
@@ -88,6 +98,11 @@ export const TopBar = ({ pageName }: Props) => {
         </nav>
       </header>
 
+      <SettingsModal
+        isOpen={isSettingsModalOpen}
+        onClose={() => setIsSettingsModalOpen(false)}
+      />
+
       <LibraryModal
         isOpen={isLibraryModalOpen}
         onClose={() => setIsLibraryModalOpen(false)}
diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SettingsModal/SettingsModal.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SettingsModal/SettingsModal.tsx
new file mode 100644
index 0000000000..d8a5f7d024
--- /dev/null
+++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SettingsModal/SettingsModal.tsx
@@ -0,0 +1,157 @@
+import { Modal } from "@storyteller/ui-modal";
+import { useState } from "react";
+
+interface SettingsModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+interface AccountInfo {
+  username: string;
+  subscription: string;
+  credits: number;
+}
+
+export const SettingsModal = ({ isOpen, onClose }: SettingsModalProps) => {
+  const [accountInfo] = useState<AccountInfo>({
+    username: "Username [logout]",
+    subscription: "Pro-tier [change/upgrade]",
+    credits: 10233,
+  });
+
+  const [palApiKey, setPalApiKey] = useState("");
+  const [klingApiKey, setKlingApiKey] = useState("");
+  const [defaultVideoModel, setDefaultVideoModel] = useState("veo");
+  const [humanVideoProvider, setHumanVideoProvider] = useState("artcraft");
+
+  return (
+    <Modal
+      title="Settings"
+      isOpen={isOpen}
+      onClose={onClose}
+      className="max-w-4xl"
+    >
+      <div className="space-y-8 p-6">
+        {/* Accounts Section */}
+        <section>
+          <h2 className="mb-4 text-xl font-bold">ACCOUNTS</h2>
+          <div className="space-y-4">
+            <div className="flex justify-between">
+              <span>ArtCraft Account:</span>
+              <span>{accountInfo.username}</span>
+            </div>
+            <div className="flex justify-between">
+              <span>ArtCraft Subscription:</span>
+              <span>{accountInfo.subscription}</span>
+            </div>
+            <div className="flex justify-between">
+              <span>Credits Remaining:</span>
+              <span>{accountInfo.credits}</span>
+            </div>
+
+            <div className="rounded-md bg-gray-100 p-4 text-sm">
+              <p>
+                Note: You can optionally log into other accounts and use your
+                credits at those providers. Some features are only available via
+                3rd party accounts, such as OpenAI / Sora GPT 4.0 Images. For
+                other features, ArtCraft credits are consumed unless you log
+                into your third party account.
+              </p>
+            </div>
+
+            <div className="flex justify-between">
+              <span>OpenAI / Sora Account:</span>
+              <button className="text-blue-600">Connect</button>
+            </div>
+            <div className="flex justify-between">
+              <span>Google / Veo Account:</span>
+              <button className="text-blue-600">Connect</button>
+            </div>
+
+            <div className="space-y-4">
+              <div>
+                <label htmlFor="pal-api-key" className="mb-2 block">
+                  Pal API Key (optional)
+                </label>
+                <input
+                  id="pal-api-key"
+                  type="password"
+                  className="w-full rounded border p-2"
+                  value={palApiKey}
+                  onChange={(e) => setPalApiKey(e.target.value)}
+                  placeholder="Enter API Key"
+                />
+              </div>
+              <div>
+                <label htmlFor="kling-api-key" className="mb-2 block">
+                  Kling API Key (optional)
+                </label>
+                <input
+                  id="kling-api-key"
+                  type="password"
+                  className="w-full rounded border p-2"
+                  value={klingApiKey}
+                  onChange={(e) => setKlingApiKey(e.target.value)}
+                  placeholder="Enter API Key"
+                />
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Video Section */}
+        <section>
+          <h2 className="mb-4 text-xl font-bold">VIDEO</h2>
+          <div className="space-y-4">
+            <div>
+              <label htmlFor="default-video-model" className="mb-2 block">
+                Default Video Model
+              </label>
+              <select
+                id="default-video-model"
+                className="w-full rounded border p-2"
+                value={defaultVideoModel}
+                onChange={(e) => setDefaultVideoModel(e.target.value)}
+              >
+                <option value="veo">Veo</option>
+                <option value="kling">Kling</option>
+              </select>
+            </div>
+            <div>
+              <label htmlFor="human-video-provider" className="mb-2 block">
+                Human Video Provider
+              </label>
+              <select
+                id="human-video-provider"
+                className="w-full rounded border p-2"
+                value={humanVideoProvider}
+                onChange={(e) => setHumanVideoProvider(e.target.value)}
+              >
+                <option value="artcraft">ArtCraft</option>
+                <option value="pal">Pal</option>
+              </select>
+            </div>
+          </div>
+        </section>
+
+        {/* Image Section */}
+        <section>
+          <h2 className="mb-4 text-xl font-bold">IMAGE</h2>
+          <div>
+            <button className="text-blue-600">Various Image Settings...</button>
+          </div>
+        </section>
+
+        {/* Misc Section */}
+        <section>
+          <h2 className="mb-4 text-xl font-bold">MISC</h2>
+          <div>
+            <button className="text-blue-600">Other Settings...</button>
+          </div>
+        </section>
+      </div>
+    </Modal>
+  );
+};
+
+export default SettingsModal;
diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SettingsModal/index.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SettingsModal/index.tsx
new file mode 100644
index 0000000000..55c04ad339
--- /dev/null
+++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SettingsModal/index.tsx
@@ -0,0 +1 @@
+export { SettingsModal } from "./SettingsModal";
diff --git a/frontend/libs/components/close-button/.babelrc b/frontend/libs/components/close-button/.babelrc
new file mode 100644
index 0000000000..1ea870ead4
--- /dev/null
+++ b/frontend/libs/components/close-button/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}
diff --git a/frontend/libs/components/close-button/README.md b/frontend/libs/components/close-button/README.md
new file mode 100644
index 0000000000..818b82e3b3
--- /dev/null
+++ b/frontend/libs/components/close-button/README.md
@@ -0,0 +1,7 @@
+# @storyteller/ui-close-button
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test @storyteller/ui-close-button` to execute the unit tests via [Vitest](https://vitest.dev/).
diff --git a/frontend/libs/components/close-button/package.json b/frontend/libs/components/close-button/package.json
new file mode 100644
index 0000000000..ba63d4f0e2
--- /dev/null
+++ b/frontend/libs/components/close-button/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "@storyteller/ui-close-button",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "development": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  }
+}
diff --git a/frontend/libs/components/close-button/src/index.ts b/frontend/libs/components/close-button/src/index.ts
new file mode 100644
index 0000000000..0d31913c89
--- /dev/null
+++ b/frontend/libs/components/close-button/src/index.ts
@@ -0,0 +1,2 @@
+
+export * from './lib/close-button';
diff --git a/frontend/libs/components/close-button/src/lib/close-button.module.css b/frontend/libs/components/close-button/src/lib/close-button.module.css
new file mode 100644
index 0000000000..d0246c74b9
--- /dev/null
+++ b/frontend/libs/components/close-button/src/lib/close-button.module.css
@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/
\ No newline at end of file
diff --git a/frontend/libs/components/close-button/src/lib/close-button.spec.tsx b/frontend/libs/components/close-button/src/lib/close-button.spec.tsx
new file mode 100644
index 0000000000..1d0d82ddb7
--- /dev/null
+++ b/frontend/libs/components/close-button/src/lib/close-button.spec.tsx
@@ -0,0 +1,12 @@
+import { render } from '@testing-library/react';
+
+import CloseButton from './close-button';
+
+describe('CloseButton', () => {
+  
+  it('should render successfully', () => {
+    const { baseElement } = render(<CloseButton />);
+    expect(baseElement).toBeTruthy();
+  });
+  
+});
diff --git a/frontend/libs/components/close-button/src/lib/close-button.tsx b/frontend/libs/components/close-button/src/lib/close-button.tsx
new file mode 100644
index 0000000000..dd2abb4e19
--- /dev/null
+++ b/frontend/libs/components/close-button/src/lib/close-button.tsx
@@ -0,0 +1,36 @@
+import { faXmark } from "@fortawesome/pro-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+interface CloseButtonProps {
+  onClick: () => void;
+  className?: string;
+  size?: "sm" | "md" | "lg";
+}
+
+export const CloseButton = ({
+  onClick,
+  className,
+  size = "md",
+}: CloseButtonProps) => {
+  const sizeClasses = {
+    sm: "h-5 w-5 text-sm",
+    md: "h-7 w-7 text-md",
+    lg: "h-9 w-9 text-xl",
+  };
+
+  return (
+    <button
+      onClick={onClick}
+      className={twMerge(
+        "flex items-center justify-center rounded-full bg-black/40 text-white/60 transition-all hover:bg-black/70 hover:text-white",
+        sizeClasses[size],
+        className
+      )}
+    >
+      <FontAwesomeIcon icon={faXmark} />
+    </button>
+  );
+};
+
+export default CloseButton;
diff --git a/frontend/libs/components/close-button/tsconfig.json b/frontend/libs/components/close-button/tsconfig.json
new file mode 100644
index 0000000000..b3d19d8f5e
--- /dev/null
+++ b/frontend/libs/components/close-button/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json"
+}
diff --git a/frontend/libs/components/close-button/tsconfig.lib.json b/frontend/libs/components/close-button/tsconfig.lib.json
new file mode 100644
index 0000000000..f0782e3dd8
--- /dev/null
+++ b/frontend/libs/components/close-button/tsconfig.lib.json
@@ -0,0 +1,45 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts",
+      "vite/client"
+    ],
+    "rootDir": "src",
+    "jsx": "react-jsx",
+    "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo"
+  },
+  "exclude": [
+    "out-tsc",
+    "dist",
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx",
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx"
+  ],
+  "include": [
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ]
+}
diff --git a/frontend/libs/components/close-button/tsconfig.spec.json b/frontend/libs/components/close-button/tsconfig.spec.json
new file mode 100644
index 0000000000..18b7de51b8
--- /dev/null
+++ b/frontend/libs/components/close-button/tsconfig.spec.json
@@ -0,0 +1,34 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/vitest",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ],
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}
diff --git a/frontend/libs/components/close-button/vite.config.ts b/frontend/libs/components/close-button/vite.config.ts
new file mode 100644
index 0000000000..a898711519
--- /dev/null
+++ b/frontend/libs/components/close-button/vite.config.ts
@@ -0,0 +1,49 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import * as path from 'path';
+
+export default defineConfig(() => ({
+  root: __dirname,
+  cacheDir: '../../../node_modules/.vite/libs/components/close-button',
+  plugins: [react(), dts({ entryRoot: 'src', tsconfigPath: path.join(__dirname, 'tsconfig.lib.json') })],
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    outDir: './dist',
+    emptyOutDir: true,
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.ts',
+      name: '@storyteller/ui-close-button',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forget to update your package.json as well.
+      formats: ['es' as const]
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: ['react','react-dom','react/jsx-runtime']
+    },
+  },
+  test: {
+    watch: false,
+    globals: true,
+    environment: 'jsdom',
+    include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: './test-output/vitest/coverage',
+      provider: 'v8' as const,
+    }
+  },
+}));
diff --git a/frontend/libs/components/modal/.babelrc b/frontend/libs/components/modal/.babelrc
new file mode 100644
index 0000000000..1ea870ead4
--- /dev/null
+++ b/frontend/libs/components/modal/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}
diff --git a/frontend/libs/components/modal/README.md b/frontend/libs/components/modal/README.md
new file mode 100644
index 0000000000..495f4c93f0
--- /dev/null
+++ b/frontend/libs/components/modal/README.md
@@ -0,0 +1,7 @@
+# @storyteller/ui-modal
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test @storyteller/ui-modal` to execute the unit tests via [Vitest](https://vitest.dev/).
diff --git a/frontend/libs/components/modal/package.json b/frontend/libs/components/modal/package.json
new file mode 100644
index 0000000000..4c0ada0b32
--- /dev/null
+++ b/frontend/libs/components/modal/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "@storyteller/ui-modal",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "development": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  }
+}
diff --git a/frontend/libs/components/modal/src/index.ts b/frontend/libs/components/modal/src/index.ts
new file mode 100644
index 0000000000..c87069b363
--- /dev/null
+++ b/frontend/libs/components/modal/src/index.ts
@@ -0,0 +1,2 @@
+
+export * from './lib/modal';
diff --git a/frontend/libs/components/modal/src/lib/modal.module.css b/frontend/libs/components/modal/src/lib/modal.module.css
new file mode 100644
index 0000000000..d0246c74b9
--- /dev/null
+++ b/frontend/libs/components/modal/src/lib/modal.module.css
@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/
\ No newline at end of file
diff --git a/frontend/libs/components/modal/src/lib/modal.spec.tsx b/frontend/libs/components/modal/src/lib/modal.spec.tsx
new file mode 100644
index 0000000000..488a203a1d
--- /dev/null
+++ b/frontend/libs/components/modal/src/lib/modal.spec.tsx
@@ -0,0 +1,12 @@
+import { render } from '@testing-library/react';
+
+import Modal from './modal';
+
+describe('Modal', () => {
+  
+  it('should render successfully', () => {
+    const { baseElement } = render(<Modal />);
+    expect(baseElement).toBeTruthy();
+  });
+  
+});
diff --git a/frontend/libs/components/modal/src/lib/modal.tsx b/frontend/libs/components/modal/src/lib/modal.tsx
new file mode 100644
index 0000000000..ea162138ad
--- /dev/null
+++ b/frontend/libs/components/modal/src/lib/modal.tsx
@@ -0,0 +1,139 @@
+import { Fragment, ReactNode } from "react";
+import {
+  Dialog,
+  DialogPanel,
+  DialogTitle,
+  Transition,
+  TransitionChild,
+} from "@headlessui/react";
+import { twMerge } from "tailwind-merge";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconDefinition } from "@fortawesome/pro-solid-svg-icons";
+import { CloseButton } from "@storyteller/ui-close-button";
+
+const DialogBackdrop = ({ className }: { className?: string }) => {
+  return (
+    <TransitionChild
+      as="div"
+      enter="ease-out duration-300"
+      enterFrom="opacity-0"
+      enterTo="opacity-100"
+      leave="ease-in duration-100"
+      leaveFrom="opacity-100"
+      leaveTo="opacity-0"
+    >
+      <div
+        className={twMerge("fixed inset-0 bg-black/60", className)}
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        }}
+      />
+    </TransitionChild>
+  );
+};
+
+export const Modal = ({
+  isOpen,
+  title,
+  titleIcon,
+  onTitleIconClick,
+  onClose,
+  className,
+  backdropClassName,
+  width,
+  children,
+  childPadding = true,
+  titleIconClassName,
+  showClose = true,
+}: {
+  isOpen: boolean;
+  title?: ReactNode;
+  titleIcon?: IconDefinition;
+  onTitleIconClick?: () => void;
+  titleIconClassName?: string;
+  onClose: () => void;
+  className?: string;
+  backdropClassName?: string;
+  width?: number;
+  children: ReactNode;
+  childPadding?: boolean;
+  showClose?: boolean;
+}) => {
+  return (
+    <Transition appear show={isOpen} as={Fragment}>
+      <Dialog as="div" className="relative z-[70]" onClose={onClose}>
+        <DialogBackdrop className={backdropClassName} />
+        <div className="fixed inset-0 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4 text-center">
+            <TransitionChild
+              as="div"
+              enter="ease-out duration-200"
+              enterFrom="opacity-0 scale-95"
+              enterTo="opacity-100 scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 scale-100"
+              leaveTo="opacity-0 scale-95"
+              className={twMerge(
+                "w-full max-w-lg transform rounded-xl relative",
+                "border border-ui-panel-border bg-[#2C2C2C]",
+                "text-left align-middle shadow-xl transition-all",
+                childPadding ? "p-4" : "",
+                className
+              )}
+            >
+              <DialogPanel
+                className="w-full relative"
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                }}
+              >
+                {title && (
+                  <DialogTitle
+                    as="div"
+                    className="mb-5 flex justify-between pb-0 text-xl font-bold text-white"
+                  >
+                    <>
+                      {onTitleIconClick ? (
+                        <button
+                          className="flex items-center gap-3"
+                          onClick={onTitleIconClick}
+                        >
+                          {titleIcon && (
+                            <FontAwesomeIcon
+                              icon={titleIcon}
+                              className={titleIconClassName}
+                            />
+                          )}
+                          {title}
+                        </button>
+                      ) : (
+                        <div className="flex items-center gap-3">
+                          {titleIcon && (
+                            <FontAwesomeIcon
+                              icon={titleIcon}
+                              className={titleIconClassName}
+                            />
+                          )}
+                          {title}
+                        </div>
+                      )}
+                    </>
+                  </DialogTitle>
+                )}
+                <div className={`h-full`.trim()}>{children}</div>
+                {showClose && (
+                  <CloseButton
+                    className="absolute top-0 right-0"
+                    onClick={onClose}
+                  />
+                )}
+              </DialogPanel>
+            </TransitionChild>
+          </div>
+        </div>
+      </Dialog>
+    </Transition>
+  );
+};
diff --git a/frontend/libs/components/modal/tsconfig.json b/frontend/libs/components/modal/tsconfig.json
new file mode 100644
index 0000000000..b3d19d8f5e
--- /dev/null
+++ b/frontend/libs/components/modal/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json"
+}
diff --git a/frontend/libs/components/modal/tsconfig.lib.json b/frontend/libs/components/modal/tsconfig.lib.json
new file mode 100644
index 0000000000..f0782e3dd8
--- /dev/null
+++ b/frontend/libs/components/modal/tsconfig.lib.json
@@ -0,0 +1,45 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts",
+      "vite/client"
+    ],
+    "rootDir": "src",
+    "jsx": "react-jsx",
+    "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo"
+  },
+  "exclude": [
+    "out-tsc",
+    "dist",
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx",
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx"
+  ],
+  "include": [
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ]
+}
diff --git a/frontend/libs/components/modal/tsconfig.spec.json b/frontend/libs/components/modal/tsconfig.spec.json
new file mode 100644
index 0000000000..18b7de51b8
--- /dev/null
+++ b/frontend/libs/components/modal/tsconfig.spec.json
@@ -0,0 +1,34 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/vitest",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ],
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}
diff --git a/frontend/libs/components/modal/vite.config.ts b/frontend/libs/components/modal/vite.config.ts
new file mode 100644
index 0000000000..9569ff1fd9
--- /dev/null
+++ b/frontend/libs/components/modal/vite.config.ts
@@ -0,0 +1,49 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import * as path from 'path';
+
+export default defineConfig(() => ({
+  root: __dirname,
+  cacheDir: '../../../node_modules/.vite/libs/components/modal',
+  plugins: [react(), dts({ entryRoot: 'src', tsconfigPath: path.join(__dirname, 'tsconfig.lib.json') })],
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    outDir: './dist',
+    emptyOutDir: true,
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.ts',
+      name: '@storyteller/ui-modal',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forget to update your package.json as well.
+      formats: ['es' as const]
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: ['react','react-dom','react/jsx-runtime']
+    },
+  },
+  test: {
+    watch: false,
+    globals: true,
+    environment: 'jsdom',
+    include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: './test-output/vitest/coverage',
+      provider: 'v8' as const,
+    }
+  },
+}));
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index eb0a716b54..41b46f825a 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -603,6 +603,7 @@
       "version": "18.3.20",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.20.tgz",
       "integrity": "sha512-IPaCZN7PShZK/3t6Q87pfTkRm6oLTd4vztyoj+cbHUF1g3FfVb2tFIL79uCRKEfv16AhqDMBywP2VW3KIZUvcg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
@@ -613,6 +614,7 @@
       "version": "18.3.6",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.6.tgz",
       "integrity": "sha512-nf22//wEbKXusP6E9pfOCDwFdHAX4u172eaJI4YkDRQEZiorm6KfYnSC2SWLDMVWUOWPERmJnN0ujeAfTBLvrw==",
+      "dev": true,
       "license": "MIT",
       "peerDependencies": {
         "@types/react": "^18.0.0"
@@ -2022,6 +2024,14 @@
       "name": "@storyteller/api",
       "version": "0.0.1"
     },
+    "libs/components/close-button": {
+      "name": "@storyteller/ui-close-button",
+      "version": "0.0.1"
+    },
+    "libs/components/modal": {
+      "name": "@storyteller/ui-modal",
+      "version": "0.0.1"
+    },
     "libs/components/toaster": {
       "name": "@storyteller/ui-toaster",
       "version": "0.0.1"
@@ -5101,7 +5111,7 @@
       "version": "0.3.6",
       "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz",
       "integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.5",
@@ -10036,6 +10046,14 @@
       "resolved": "libs/api",
       "link": true
     },
+    "node_modules/@storyteller/ui-close-button": {
+      "resolved": "libs/components/close-button",
+      "link": true
+    },
+    "node_modules/@storyteller/ui-modal": {
+      "resolved": "libs/components/modal",
+      "link": true
+    },
     "node_modules/@storyteller/ui-toaster": {
       "resolved": "libs/components/toaster",
       "link": true
@@ -11340,7 +11358,7 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
       "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/prop-types": {
@@ -13989,7 +14007,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
       "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.12.5",
@@ -14005,7 +14023,7 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
       "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/parse-json": "^4.0.0",
@@ -14022,7 +14040,7 @@
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
       "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
-      "devOptional": true,
+      "dev": true,
       "license": "ISC",
       "engines": {
         "node": ">= 6"
@@ -14487,7 +14505,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -16114,7 +16132,7 @@
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
       "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "iconv-lite": "^0.6.2"
@@ -16201,7 +16219,7 @@
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
       "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-arrayish": "^0.2.1"
@@ -18697,7 +18715,7 @@
       "version": "4.10.0",
       "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.10.0.tgz",
       "integrity": "sha512-kGzZ3LWWQcGIAmg6iWvXn0ei6WDtV26wzHRMwDSzmAbcXrTEXxHy6IehI6/4eT6VRKyMP1eF1VqwrVUmE/LR7A==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "resolve-pkg-maps": "^1.0.0"
@@ -19304,7 +19322,7 @@
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
@@ -19359,7 +19377,7 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
       "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "parent-module": "^1.0.0",
@@ -19514,7 +19532,7 @@
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
       "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/is-async-function": {
@@ -20347,7 +20365,7 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz",
       "integrity": "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "bin": {
         "jiti": "lib/jiti-cli.mjs"
@@ -20491,7 +20509,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
       "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/json-schema-traverse": {
@@ -26391,7 +26409,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "callsites": "^3.0.0"
@@ -26428,7 +26446,7 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
       "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.0.0",
@@ -26447,7 +26465,7 @@
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/parse-ms": {
@@ -26529,7 +26547,7 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/path-scurry": {
@@ -26564,7 +26582,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -28090,7 +28108,7 @@
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
       "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-core-module": "^2.13.0",
@@ -28122,7 +28140,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -28132,7 +28150,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
       "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
@@ -29526,7 +29544,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -29798,7 +29816,7 @@
       "version": "5.39.0",
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.39.0.tgz",
       "integrity": "sha512-LBAhFyLho16harJoWMg/nZsQYgTrg5jXOn2nCYjRUcZZEdE3qa2zb8QEDRUGVZBW4rlazf2fxkg8tztybTaqWw==",
-      "devOptional": true,
+      "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
@@ -29885,14 +29903,14 @@
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/terser/node_modules/source-map-support": {
       "version": "0.5.21",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
       "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "buffer-from": "^1.0.0",
@@ -30319,7 +30337,7 @@
       "version": "4.19.3",
       "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.19.3.tgz",
       "integrity": "sha512-4H8vUNGNjQ4V2EOoGw005+c+dGuPSnhpPBPHBtsZdGZBk/iJb4kguGlPWaZTZ3q5nMtFOEsY0nRDlh9PJyd6SQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "esbuild": "~0.25.0",
@@ -30342,12 +30360,12 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "android"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30359,12 +30377,12 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "android"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30376,12 +30394,12 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "android"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30393,12 +30411,12 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30410,12 +30428,12 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30427,12 +30445,12 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "freebsd"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30444,12 +30462,12 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "freebsd"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30461,12 +30479,12 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30478,12 +30496,12 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30495,12 +30513,12 @@
       "cpu": [
         "ia32"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30512,12 +30530,12 @@
       "cpu": [
         "loong64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30529,12 +30547,12 @@
       "cpu": [
         "mips64el"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30546,12 +30564,12 @@
       "cpu": [
         "ppc64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30563,12 +30581,12 @@
       "cpu": [
         "riscv64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30580,12 +30598,12 @@
       "cpu": [
         "s390x"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30597,12 +30615,12 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30614,12 +30632,12 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "netbsd"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30631,12 +30649,12 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "openbsd"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30648,12 +30666,12 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "sunos"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30665,12 +30683,12 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "win32"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30682,12 +30700,12 @@
       "cpu": [
         "ia32"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "win32"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30699,12 +30717,12 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "win32"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30713,7 +30731,7 @@
       "version": "0.25.2",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.2.tgz",
       "integrity": "sha512-16854zccKPnC+toMywC+uKNeYSv+/eXkevRAfwRD/G9Cleq66m8XFIrigkbvauLLlCfDL45Q2cWegSg53gGBnQ==",
-      "devOptional": true,
+      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
@@ -30877,7 +30895,7 @@
       "version": "5.7.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz",
       "integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==",
-      "devOptional": true,
+      "dev": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 0ae454dda8..ec5868448d 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -17,6 +17,12 @@
     },
     {
       "path": "./libs/components/toaster"
+    },
+    {
+      "path": "./libs/components/close-button"
+    },
+    {
+      "path": "./libs/components/modal"
     }
   ]
 }