diff --git a/frontend/libs/components/login-modal/.babelrc b/frontend/libs/components/login-modal/.babelrc
new file mode 100644
index 0000000000..1ea870ead4
--- /dev/null
+++ b/frontend/libs/components/login-modal/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}
diff --git a/frontend/libs/components/login-modal/README.md b/frontend/libs/components/login-modal/README.md
new file mode 100644
index 0000000000..45cb833792
--- /dev/null
+++ b/frontend/libs/components/login-modal/README.md
@@ -0,0 +1,7 @@
+# @storyteller/ui-login-modal
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test @storyteller/ui-login-modal` to execute the unit tests via [Vitest](https://vitest.dev/).
diff --git a/frontend/libs/components/login-modal/package.json b/frontend/libs/components/login-modal/package.json
new file mode 100644
index 0000000000..ac61f52381
--- /dev/null
+++ b/frontend/libs/components/login-modal/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "@storyteller/ui-login-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/login-modal/src/index.ts b/frontend/libs/components/login-modal/src/index.ts
new file mode 100644
index 0000000000..0c1ddf7a40
--- /dev/null
+++ b/frontend/libs/components/login-modal/src/index.ts
@@ -0,0 +1,2 @@
+
+export * from './lib/login-modal';
diff --git a/frontend/libs/components/login-modal/src/lib/login-modal.module.css b/frontend/libs/components/login-modal/src/lib/login-modal.module.css
new file mode 100644
index 0000000000..d0246c74b9
--- /dev/null
+++ b/frontend/libs/components/login-modal/src/lib/login-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/login-modal/src/lib/login-modal.spec.tsx b/frontend/libs/components/login-modal/src/lib/login-modal.spec.tsx
new file mode 100644
index 0000000000..14abc2b9bb
--- /dev/null
+++ b/frontend/libs/components/login-modal/src/lib/login-modal.spec.tsx
@@ -0,0 +1,12 @@
+import { render } from '@testing-library/react';
+
+import LoginModal from './login-modal';
+
+describe('LoginModal', () => {
+  
+  it('should render successfully', () => {
+    const { baseElement } = render(<LoginModal />);
+    expect(baseElement).toBeTruthy();
+  });
+  
+});
diff --git a/frontend/libs/components/login-modal/src/lib/login-modal.tsx b/frontend/libs/components/login-modal/src/lib/login-modal.tsx
new file mode 100644
index 0000000000..b482ab6a4e
--- /dev/null
+++ b/frontend/libs/components/login-modal/src/lib/login-modal.tsx
@@ -0,0 +1,15 @@
+
+import styles from './login-modal.module.css';
+
+export function LoginModal() {
+  return (
+    <div className={styles['container']}>
+      <h1>Welcome to LoginModal!</h1>
+    </div>
+  );
+}
+
+export default LoginModal;
+
+
+
diff --git a/frontend/libs/components/login-modal/tsconfig.json b/frontend/libs/components/login-modal/tsconfig.json
new file mode 100644
index 0000000000..b3d19d8f5e
--- /dev/null
+++ b/frontend/libs/components/login-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/login-modal/tsconfig.lib.json b/frontend/libs/components/login-modal/tsconfig.lib.json
new file mode 100644
index 0000000000..f0782e3dd8
--- /dev/null
+++ b/frontend/libs/components/login-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/login-modal/tsconfig.spec.json b/frontend/libs/components/login-modal/tsconfig.spec.json
new file mode 100644
index 0000000000..18b7de51b8
--- /dev/null
+++ b/frontend/libs/components/login-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/login-modal/vite.config.ts b/frontend/libs/components/login-modal/vite.config.ts
new file mode 100644
index 0000000000..98ac28b77a
--- /dev/null
+++ b/frontend/libs/components/login-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/login-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-login-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 ddf4370695..b5f3dc88aa 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -2215,6 +2215,10 @@
       "name": "@storyteller/ui-loading-spinner",
       "version": "0.0.1"
     },
+    "libs/components/login-modal": {
+      "name": "@storyteller/ui-login-modal",
+      "version": "0.0.1"
+    },
     "libs/components/modal": {
       "name": "@storyteller/ui-modal",
       "version": "0.0.1"
@@ -10320,6 +10324,10 @@
       "resolved": "libs/components/loading-spinner",
       "link": true
     },
+    "node_modules/@storyteller/ui-login-modal": {
+      "resolved": "libs/components/login-modal",
+      "link": true
+    },
     "node_modules/@storyteller/ui-modal": {
       "resolved": "libs/components/modal",
       "link": true
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index b006b835f5..32242d626e 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -65,6 +65,9 @@
     },
     {
       "path": "./libs/tauri-api"
+    },
+    {
+      "path": "./libs/components/login-modal"
     }
   ]
 }