diff --git a/app/components/generic/Label.tsx b/app/components/generic/Label.tsx
new file mode 100644
index 000000000..31097283b
--- /dev/null
+++ b/app/components/generic/Label.tsx
@@ -0,0 +1,26 @@
+'use client';
+
+import classNames from 'classnames';
+import React from 'react';
+
+export default function Label({
+  children,
+  htmlFor,
+  className = '',
+  required = false,
+}: {
+  children: React.ReactNode;
+  htmlFor: string;
+  className?: string;
+  required?: boolean;
+}) {
+  return (
+    <label
+      htmlFor={htmlFor}
+      className={classNames('block text-sm font-medium leading-6 text-gray-900 mb--1', className)}
+    >
+      {children}
+      {required && <span className="text-red-500">*</span>}
+    </label>
+  );
+}
diff --git a/app/components/generic/select/FormMultiSelect.tsx b/app/components/generic/select/FormMultiSelect.tsx
new file mode 100644
index 000000000..ffe6faf3a
--- /dev/null
+++ b/app/components/generic/select/FormMultiSelect.tsx
@@ -0,0 +1,58 @@
+'use client';
+
+import { MultiSelect, ComboboxData } from '@mantine/core';
+import classnames from 'classnames';
+import _kebabCase from 'lodash-es/kebabCase';
+import { FocusEventHandler } from 'react';
+import Label from '../Label';
+
+export interface FormMultiSelectProps {
+  id?: string;
+  name: string;
+  label?: string;
+  data: ComboboxData;
+  onChange: (value: string[]) => void;
+  onBlur?: FocusEventHandler<HTMLInputElement> | undefined;
+  value: string[];
+  disabled?: boolean;
+  classNames?: {
+    wrapper?: string;
+    label?: string;
+    input?: string;
+  };
+}
+
+export default function FormMultiSelect({
+  id,
+  name,
+  label,
+  classNames,
+  data,
+  onChange,
+  onBlur,
+  value,
+  disabled = false,
+}: FormMultiSelectProps) {
+  if (!id) id = _kebabCase(name);
+
+  return (
+    <div className={classNames?.wrapper}>
+      {label && (
+        <Label htmlFor={id} className={classNames?.label}>
+          {label}
+        </Label>
+      )}
+
+      <MultiSelect
+        placeholder="select..."
+        data={data}
+        onChange={onChange}
+        onBlur={onBlur}
+        value={value}
+        searchable
+        disabled={disabled}
+        classNames={{ input: classnames('text-md', classNames?.input) }}
+      />
+    </div>
+  );
+}
diff --git a/app/components/generic/select/FormSingleSelect.tsx b/app/components/generic/select/FormSingleSelect.tsx
new file mode 100644
index 000000000..861a374c0
--- /dev/null
+++ b/app/components/generic/select/FormSingleSelect.tsx
@@ -0,0 +1,60 @@
+'use client';
+
+import { Select, ComboboxData, ComboboxItem } from '@mantine/core';
+import classnames from 'classnames';
+import _kebabCase from 'lodash-es/kebabCase';
+import { FocusEventHandler } from 'react';
+import Label from '../Label';
+
+export interface FormSingleSelectProps {
+  id?: string;
+  name: string;
+  label?: string;
+  data: ComboboxData;
+  onChange: (value: string, option: ComboboxItem) => void;
+  onBlur?: FocusEventHandler<HTMLInputElement> | undefined;
+  value: string;
+  disabled?: boolean;
+  classNames?: {
+    wrapper?: string;
+    label?: string;
+    input?: string;
+  };
+}
+
+export default function FormSingleSelect({
+  id,
+  name,
+  label,
+  classNames,
+  data,
+  onChange,
+  onBlur,
+  value,
+  disabled = false,
+}: FormSingleSelectProps) {
+  if (!id) id = _kebabCase(name);
+
+  return (
+    <div className={classNames?.wrapper}>
+      {label && (
+        <Label htmlFor={id} className={classNames?.label}>
+          {label}
+        </Label>
+      )}
+
+      <Select
+        placeholder="select..."
+        data={data}
+        onChange={(val, option) => {
+          if (val) onChange(val, option);
+        }}
+        onBlur={onBlur}
+        value={value}
+        searchable
+        disabled={disabled}
+        classNames={{ input: classnames('text-md', classNames?.input) }}
+      />
+    </div>
+  );
+}
diff --git a/app/package-lock.json b/app/package-lock.json
index c7a7983ac..84d75c86b 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -16645,6 +16645,111 @@
       "peerDependencies": {
         "zod": "^3.18.0"
       }
+    },
+    "node_modules/react-email/node_modules/@next/swc-darwin-arm64": {
+      "version": "14.2.11",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.11.tgz",
+      "integrity": "sha512-eiY9u7wEJZWp/Pga07Qy3ZmNEfALmmSS1HtsJF3y1QEyaExu7boENz11fWqDmZ3uvcyAxCMhTrA1jfVxITQW8g==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/react-email/node_modules/@next/swc-darwin-x64": {
+      "version": "14.2.11",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.11.tgz",
+      "integrity": "sha512-lnB0zYCld4yE0IX3ANrVMmtAbziBb7MYekcmR6iE9bujmgERl6+FK+b0MBq0pl304lYe7zO4yxJus9H/Af8jbg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/react-email/node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "14.2.11",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.11.tgz",
+      "integrity": "sha512-Ulo9TZVocYmUAtzvZ7FfldtwUoQY0+9z3BiXZCLSUwU2bp7GqHA7/bqrfsArDlUb2xeGwn3ZuBbKtNK8TR0A8w==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/react-email/node_modules/@next/swc-linux-arm64-musl": {
+      "version": "14.2.11",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.11.tgz",
+      "integrity": "sha512-fH377DnKGyUnkWlmUpFF1T90m0dADBfK11dF8sOQkiELF9M+YwDRCGe8ZyDzvQcUd20Rr5U7vpZRrAxKwd3Rzg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/react-email/node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "14.2.11",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.11.tgz",
+      "integrity": "sha512-PwqHeKG3/kKfPpM6of1B9UJ+Er6ySUy59PeFu0Un0LBzJTRKKAg2V6J60Yqzp99m55mLa+YTbU6xj61ImTv9mg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/react-email/node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "14.2.11",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.11.tgz",
+      "integrity": "sha512-0U7PWMnOYIvM74GY6rbH6w7v+vNPDVH1gUhlwHpfInJnNe5LkmUZqhp7FNWeNa5wbVgRcRi1F1cyxp4dmeLLvA==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/react-email/node_modules/@next/swc-win32-x64-msvc": {
+      "version": "14.2.11",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.11.tgz",
+      "integrity": "sha512-gQpS7mcgovWoaTG1FbS5/ojF7CGfql1Q0ZLsMrhcsi2Sr9HEqsUZ70MPJyaYBXbk6iEAP7UXMD9HC8KY1qNwvA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
     }
   }
 }