diff --git a/frontend/apps/editor3d/app/src/components/reusable/FileUploader/index.ts b/frontend/apps/editor3d/app/src/components/reusable/FileUploader/index.ts
deleted file mode 100644
index 75ffa32865..0000000000
--- a/frontend/apps/editor3d/app/src/components/reusable/FileUploader/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./FileUploader";
diff --git a/frontend/apps/editor3d/app/src/components/reusable/Gravatar/index.ts b/frontend/apps/editor3d/app/src/components/reusable/Gravatar/index.ts
deleted file mode 100644
index f5efd83117..0000000000
--- a/frontend/apps/editor3d/app/src/components/reusable/Gravatar/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./Gravatar";
diff --git a/frontend/apps/editor3d/app/src/components/reusable/index.ts b/frontend/apps/editor3d/app/src/components/reusable/index.ts
index fa37d933c8..ea7bbd9391 100644
--- a/frontend/apps/editor3d/app/src/components/reusable/index.ts
+++ b/frontend/apps/editor3d/app/src/components/reusable/index.ts
@@ -1,6 +1,4 @@
-export * from "./FileUploader";
 export * from "./FilterButtons";
-export * from "./Gravatar";
 export * from "./InputVector";
 export * from "./ListDropdown";
 export * from "./LoadingBar";
diff --git a/frontend/apps/editor3d/app/src/components/signaled/TopBar/ProfileDropdown.tsx b/frontend/apps/editor3d/app/src/components/signaled/TopBar/ProfileDropdown.tsx
index 34b56129cc..7828ef1d9f 100644
--- a/frontend/apps/editor3d/app/src/components/signaled/TopBar/ProfileDropdown.tsx
+++ b/frontend/apps/editor3d/app/src/components/signaled/TopBar/ProfileDropdown.tsx
@@ -7,9 +7,8 @@ import {
   faUser,
 } from "@fortawesome/pro-solid-svg-icons";
 import { Menu, Transition } from "@headlessui/react";
-import { Gravatar } from "~/components/reusable";
+import { Gravatar } from "@storyteller/ui-gravatar";
 import { twMerge } from "tailwind-merge";
-
 import { authentication, logout } from "~/signals";
 
 export default function ProfileDropdown() {
diff --git a/frontend/libs/components/file-uploader/.babelrc b/frontend/libs/components/file-uploader/.babelrc
new file mode 100644
index 0000000000..1ea870ead4
--- /dev/null
+++ b/frontend/libs/components/file-uploader/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}
diff --git a/frontend/libs/components/file-uploader/README.md b/frontend/libs/components/file-uploader/README.md
new file mode 100644
index 0000000000..a11fcf0ba9
--- /dev/null
+++ b/frontend/libs/components/file-uploader/README.md
@@ -0,0 +1,7 @@
+# @storyteller/ui-file-uploader
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test @storyteller/ui-file-uploader` to execute the unit tests via [Vitest](https://vitest.dev/).
diff --git a/frontend/libs/components/file-uploader/package.json b/frontend/libs/components/file-uploader/package.json
new file mode 100644
index 0000000000..5c1e89cc5f
--- /dev/null
+++ b/frontend/libs/components/file-uploader/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "@storyteller/ui-file-uploader",
+  "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/file-uploader/src/index.ts b/frontend/libs/components/file-uploader/src/index.ts
new file mode 100644
index 0000000000..c842ca176c
--- /dev/null
+++ b/frontend/libs/components/file-uploader/src/index.ts
@@ -0,0 +1,2 @@
+
+export * from './lib/file-uploader';
diff --git a/frontend/apps/editor3d/app/src/components/reusable/FileUploader/DragAndDropZone.tsx b/frontend/libs/components/file-uploader/src/lib/drag-and-drop-zone.tsx
similarity index 83%
rename from frontend/apps/editor3d/app/src/components/reusable/FileUploader/DragAndDropZone.tsx
rename to frontend/libs/components/file-uploader/src/lib/drag-and-drop-zone.tsx
index b4652f1ea5..b1f2fa4e03 100644
--- a/frontend/apps/editor3d/app/src/components/reusable/FileUploader/DragAndDropZone.tsx
+++ b/frontend/libs/components/file-uploader/src/lib/drag-and-drop-zone.tsx
@@ -1,8 +1,6 @@
 import { faFileArrowUp, faFileAudio } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { P } from "~/components";
-
 export const DragAndDropZone = ({
   file,
   fileTypes,
@@ -15,13 +13,13 @@ export const DragAndDropZone = ({
       <div className="flex cursor-pointer items-center gap-3.5 rounded-lg border border-dashed border-[#363636] bg-brand-secondary p-3">
         <FontAwesomeIcon icon={faFileArrowUp} className="text-4xl" />
         <div className="flex flex-col gap-0">
-          <P className="font-medium">
+          <p className="font-medium">
             <u>Upload a file</u> or drop it here
-          </P>
+          </p>
 
-          <P className="flex items-center gap-2 text-sm font-normal opacity-50">
+          <p className="flex items-center gap-2 text-sm font-normal opacity-50">
             {fileTypes.join(", ").toString()} supported
-          </P>
+          </p>
         </div>
       </div>
     );
@@ -37,15 +35,15 @@ export const DragAndDropZone = ({
     <div className="flex cursor-pointer items-center justify-between gap-3.5 rounded-lg border border-dashed border-[#363636] bg-brand-secondary p-3">
       <FontAwesomeIcon icon={faFileAudio} className="text-4xl" />
       <div className="flex grow flex-col gap-0">
-        <P className="font-medium">
+        <p className="font-medium">
           {file.name.slice(0, file.name.lastIndexOf("."))}
-        </P>
-        <P className="flex items-center gap-2 text-sm font-normal">
+        </p>
+        <p className="flex items-center gap-2 text-sm font-normal">
           <span className="opacity-50">
             {`${fileName} file size: ${fileSize} `}
           </span>
           <u className="transition-all hover:text-white/80">Change File</u>
-        </P>
+        </p>
       </div>
     </div>
   );
diff --git a/frontend/libs/components/file-uploader/src/lib/file-uploader.module.css b/frontend/libs/components/file-uploader/src/lib/file-uploader.module.css
new file mode 100644
index 0000000000..d0246c74b9
--- /dev/null
+++ b/frontend/libs/components/file-uploader/src/lib/file-uploader.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/file-uploader/src/lib/file-uploader.spec.tsx b/frontend/libs/components/file-uploader/src/lib/file-uploader.spec.tsx
new file mode 100644
index 0000000000..728fc7c23a
--- /dev/null
+++ b/frontend/libs/components/file-uploader/src/lib/file-uploader.spec.tsx
@@ -0,0 +1,12 @@
+import { render } from '@testing-library/react';
+
+import FileUploader from './file-uploader';
+
+describe('FileUploader', () => {
+  
+  it('should render successfully', () => {
+    const { baseElement } = render(<FileUploader />);
+    expect(baseElement).toBeTruthy();
+  });
+  
+});
diff --git a/frontend/apps/editor3d/app/src/components/reusable/FileUploader/FileUploader.tsx b/frontend/libs/components/file-uploader/src/lib/file-uploader.tsx
similarity index 90%
rename from frontend/apps/editor3d/app/src/components/reusable/FileUploader/FileUploader.tsx
rename to frontend/libs/components/file-uploader/src/lib/file-uploader.tsx
index 196bd12a3e..55df05731e 100644
--- a/frontend/apps/editor3d/app/src/components/reusable/FileUploader/FileUploader.tsx
+++ b/frontend/libs/components/file-uploader/src/lib/file-uploader.tsx
@@ -1,7 +1,7 @@
 import { FileUploader as DragDropFileUploader } from "react-drag-drop-files";
 // Usage refer to https://github.com/KarimMokhtar/react-drag-drop-files
 
-import { DragAndDropZone } from "./DragAndDropZone";
+import { DragAndDropZone } from "./drag-and-drop-zone";
 
 export const FileUploader = ({
   file,
diff --git a/frontend/libs/components/file-uploader/tsconfig.json b/frontend/libs/components/file-uploader/tsconfig.json
new file mode 100644
index 0000000000..b3d19d8f5e
--- /dev/null
+++ b/frontend/libs/components/file-uploader/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/file-uploader/tsconfig.lib.json b/frontend/libs/components/file-uploader/tsconfig.lib.json
new file mode 100644
index 0000000000..f0782e3dd8
--- /dev/null
+++ b/frontend/libs/components/file-uploader/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/file-uploader/tsconfig.spec.json b/frontend/libs/components/file-uploader/tsconfig.spec.json
new file mode 100644
index 0000000000..18b7de51b8
--- /dev/null
+++ b/frontend/libs/components/file-uploader/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/file-uploader/vite.config.ts b/frontend/libs/components/file-uploader/vite.config.ts
new file mode 100644
index 0000000000..c29e898468
--- /dev/null
+++ b/frontend/libs/components/file-uploader/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/file-uploader',
+  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-file-uploader',
+      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/gravatar/.babelrc b/frontend/libs/components/gravatar/.babelrc
new file mode 100644
index 0000000000..1ea870ead4
--- /dev/null
+++ b/frontend/libs/components/gravatar/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}
diff --git a/frontend/libs/components/gravatar/README.md b/frontend/libs/components/gravatar/README.md
new file mode 100644
index 0000000000..de010cee25
--- /dev/null
+++ b/frontend/libs/components/gravatar/README.md
@@ -0,0 +1,7 @@
+# @storyteller/ui-gravatar
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test @storyteller/ui-gravatar` to execute the unit tests via [Vitest](https://vitest.dev/).
diff --git a/frontend/libs/components/gravatar/package.json b/frontend/libs/components/gravatar/package.json
new file mode 100644
index 0000000000..c04434064f
--- /dev/null
+++ b/frontend/libs/components/gravatar/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "@storyteller/ui-gravatar",
+  "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/gravatar/src/index.ts b/frontend/libs/components/gravatar/src/index.ts
new file mode 100644
index 0000000000..f855a11438
--- /dev/null
+++ b/frontend/libs/components/gravatar/src/index.ts
@@ -0,0 +1,2 @@
+
+export * from './lib/gravatar';
diff --git a/frontend/libs/components/gravatar/src/lib/environment-variables.tsx b/frontend/libs/components/gravatar/src/lib/environment-variables.tsx
new file mode 100644
index 0000000000..90813c83fa
--- /dev/null
+++ b/frontend/libs/components/gravatar/src/lib/environment-variables.tsx
@@ -0,0 +1,10 @@
+class EnvironmentVariables {
+  values: Record<string, string | boolean> = {};
+
+  initialize(values: Record<string, string | boolean>) {
+    this.values = values;
+  }
+}
+
+const environmentVariables = new EnvironmentVariables();
+export default environmentVariables;
diff --git a/frontend/libs/components/gravatar/src/lib/gravatar.module.css b/frontend/libs/components/gravatar/src/lib/gravatar.module.css
new file mode 100644
index 0000000000..d0246c74b9
--- /dev/null
+++ b/frontend/libs/components/gravatar/src/lib/gravatar.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/gravatar/src/lib/gravatar.spec.tsx b/frontend/libs/components/gravatar/src/lib/gravatar.spec.tsx
new file mode 100644
index 0000000000..0cec7bd668
--- /dev/null
+++ b/frontend/libs/components/gravatar/src/lib/gravatar.spec.tsx
@@ -0,0 +1,12 @@
+import { render } from '@testing-library/react';
+
+import Gravatar from './gravatar';
+
+describe('Gravatar', () => {
+  
+  it('should render successfully', () => {
+    const { baseElement } = render(<Gravatar />);
+    expect(baseElement).toBeTruthy();
+  });
+  
+});
diff --git a/frontend/apps/editor3d/app/src/components/reusable/Gravatar/Gravatar.tsx b/frontend/libs/components/gravatar/src/lib/gravatar.tsx
similarity index 96%
rename from frontend/apps/editor3d/app/src/components/reusable/Gravatar/Gravatar.tsx
rename to frontend/libs/components/gravatar/src/lib/gravatar.tsx
index da7ac4c004..0d239eafb4 100644
--- a/frontend/apps/editor3d/app/src/components/reusable/Gravatar/Gravatar.tsx
+++ b/frontend/libs/components/gravatar/src/lib/gravatar.tsx
@@ -2,8 +2,7 @@ import { useState } from "react";
 import { twMerge } from "tailwind-merge";
 import { faSpinnerThird } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import EnvironmentVariables from "~/Classes/EnvironmentVariables";
-
+import EnvironmentVariables from "./environment-variables";
 interface Props {
   size: number;
   email_hash?: string;
@@ -71,7 +70,7 @@ function Gravatar(props: Props) {
     <div
       className={twMerge(
         "relative aspect-square overflow-hidden rounded-full border border-white",
-        props.className,
+        props.className
       )}
     >
       {showLoader && (
diff --git a/frontend/libs/components/gravatar/tsconfig.json b/frontend/libs/components/gravatar/tsconfig.json
new file mode 100644
index 0000000000..b3d19d8f5e
--- /dev/null
+++ b/frontend/libs/components/gravatar/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/gravatar/tsconfig.lib.json b/frontend/libs/components/gravatar/tsconfig.lib.json
new file mode 100644
index 0000000000..f0782e3dd8
--- /dev/null
+++ b/frontend/libs/components/gravatar/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/gravatar/tsconfig.spec.json b/frontend/libs/components/gravatar/tsconfig.spec.json
new file mode 100644
index 0000000000..18b7de51b8
--- /dev/null
+++ b/frontend/libs/components/gravatar/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/gravatar/vite.config.ts b/frontend/libs/components/gravatar/vite.config.ts
new file mode 100644
index 0000000000..c0919d907a
--- /dev/null
+++ b/frontend/libs/components/gravatar/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/gravatar',
+  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-gravatar',
+      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 e678bf1202..acd3418d6d 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1333,10 +1333,17 @@
       "name": "@storyteller/ui-demo-modal",
       "version": "0.0.1"
     },
+    "libs/components/file-uploader": {
+      "name": "@storyteller/ui-file-uploader",
+      "version": "0.0.1"
+    },
     "libs/components/gallery-modal": {
       "name": "@storyteller/ui-gallery-modal",
       "version": "0.0.1"
     },
+    "libs/components/gravatar": {
+      "version": "0.0.1"
+    },
     "libs/components/input": {
       "name": "@storyteller/ui-input",
       "version": "0.0.1"
@@ -4342,7 +4349,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",
@@ -9179,10 +9186,18 @@
       "resolved": "libs/components/demo-modal",
       "link": true
     },
+    "node_modules/@storyteller/ui-file-uploader": {
+      "resolved": "libs/components/file-uploader",
+      "link": true
+    },
     "node_modules/@storyteller/ui-gallery-modal": {
       "resolved": "libs/components/gallery-modal",
       "link": true
     },
+    "node_modules/@storyteller/ui-gravatar": {
+      "resolved": "libs/components/gravatar",
+      "link": true
+    },
     "node_modules/@storyteller/ui-input": {
       "resolved": "libs/components/input",
       "link": true
@@ -9522,7 +9537,7 @@
       "version": "1.13.3",
       "resolved": "https://registry.npmjs.org/@swc-node/core/-/core-1.13.3.tgz",
       "integrity": "sha512-OGsvXIid2Go21kiNqeTIn79jcaX4l0G93X2rAnas4LFoDyA9wAwVK7xZdm+QsKoMn5Mus2yFLCc4OtX2dD/PWA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 10"
@@ -9540,7 +9555,7 @@
       "version": "1.9.2",
       "resolved": "https://registry.npmjs.org/@swc-node/register/-/register-1.9.2.tgz",
       "integrity": "sha512-BBjg0QNuEEmJSoU/++JOXhrjWdu3PTyYeJWsvchsI0Aqtj8ICkz/DqlwtXbmZVZ5vuDPpTfFlwDBZe81zgShMA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@swc-node/core": "^1.13.1",
@@ -9563,7 +9578,7 @@
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/@swc-node/sourcemap-support/-/sourcemap-support-0.5.1.tgz",
       "integrity": "sha512-JxIvIo/Hrpv0JCHSyRpetAdQ6lB27oFYhv0PKCNf1g2gUXOjpeR1exrXccRxLMuAV5WAmGFBwRnNOJqN38+qtg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "source-map-support": "^0.5.21",
@@ -9574,7 +9589,7 @@
       "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",
@@ -9585,7 +9600,7 @@
       "version": "1.5.29",
       "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.5.29.tgz",
       "integrity": "sha512-nvTtHJI43DUSOAf3h9XsqYg8YXKc0/N4il9y4j0xAkO0ekgDNo+3+jbw6MInawjKJF9uulyr+f5bAutTsOKVlw==",
-      "devOptional": true,
+      "dev": true,
       "hasInstallScript": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -9794,7 +9809,7 @@
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
       "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "Apache-2.0"
     },
     "node_modules/@swc/helpers": {
@@ -9810,7 +9825,7 @@
       "version": "0.1.21",
       "resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.21.tgz",
       "integrity": "sha512-2YEtj5HJVbKivud9N4bpPBAyZhj4S2Ipe5LkUG94alTpr7in/GU/EARgPAd3BwU+YOmFVJC2+kjqhGRi3r0ZpQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
         "@swc/counter": "^0.1.3"
@@ -10330,7 +10345,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": {
@@ -12970,7 +12985,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",
@@ -12986,7 +13001,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",
@@ -13003,7 +13018,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"
@@ -13468,7 +13483,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"
@@ -13876,7 +13891,7 @@
       "version": "2.0.20",
       "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
       "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/columnify": {
@@ -15075,7 +15090,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"
@@ -18144,7 +18159,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",
@@ -18300,7 +18315,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": {
@@ -19129,7 +19144,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"
@@ -19273,7 +19288,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": {
@@ -22343,7 +22358,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"
@@ -22375,7 +22390,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",
@@ -22394,7 +22409,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": {
@@ -22477,7 +22492,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": {
@@ -22512,7 +22527,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"
@@ -22601,7 +22616,7 @@
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
       "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 6"
@@ -23988,7 +24003,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",
@@ -24020,7 +24035,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"
@@ -25380,7 +25395,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"
@@ -25662,7 +25677,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",
@@ -25749,14 +25764,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",
@@ -26309,7 +26324,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 e7b86c64d4..2caf881a79 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -107,6 +107,12 @@
     },
     {
       "path": "./libs/components/button-link"
+    },
+    {
+      "path": "./libs/components/file-uploader"
+    },
+    {
+      "path": "./libs/components/gravatar"
     }
   ]
 }