diff --git a/e2e/nextjs-app/app/components/fields/nested-multi-select/default.e2e.tsx b/e2e/nextjs-app/app/components/fields/nested-multi-select/default.e2e.tsx
new file mode 100644
index 000000000..0f486f697
--- /dev/null
+++ b/e2e/nextjs-app/app/components/fields/nested-multi-select/default.e2e.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import { FrontendEngine, IFrontendEngineData } from "@lifesg/web-frontend-engine";
+
+const SCHEMA: IFrontendEngineData = {
+	sections: {
+		section: {
+			uiType: "section",
+			children: {
+				field: {
+					uiType: "nested-multi-select",
+					label: "Fruits",
+					mode: "expand",
+					options: [
+						{
+							label: "Fruits",
+							key: "fruits-key",
+							subItems: [
+								{
+									label: "Berries",
+									key: "berries-key",
+									subItems: [
+										{ label: "Blueberry", value: "blueberry", key: "blueberry-key" },
+										{ label: "Raspberry", value: "raspberry", key: "raspberry-key" },
+									],
+								},
+								{
+									label: "Melons",
+									key: "melons-key",
+									subItems: [
+										{ label: "Watermelon", value: "watermelon", key: "watermelon-key" },
+										{ label: "Honeydew", value: "honeydew", key: "honeydew-key" },
+									],
+								},
+								{ label: "Durian", value: "durian", key: "durian-key" },
+							],
+						},
+						{
+							label: "Vegetables",
+							key: "vegetable-key",
+							subItems: [
+								{ label: "Cabbage", value: "cabbage", key: "cabbage-key" },
+								{ label: "Spinach", value: "spinach", key: "spinach-key" },
+							],
+						},
+					],
+				},
+			},
+		},
+	},
+};
+
+export default function NestedMultiSelectDefaultPage() {
+	return <FrontendEngine data={SCHEMA} />;
+}
diff --git a/e2e/nextjs-app/app/components/fields/nested-multi-select/warning.e2e.tsx b/e2e/nextjs-app/app/components/fields/nested-multi-select/warning.e2e.tsx
new file mode 100644
index 000000000..7021fd563
--- /dev/null
+++ b/e2e/nextjs-app/app/components/fields/nested-multi-select/warning.e2e.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import { IFrontendEngineData } from "@lifesg/web-frontend-engine";
+import { createWarningPage } from "../../common";
+
+const SCHEMA: IFrontendEngineData = {
+	sections: {
+		section: {
+			uiType: "section",
+			children: {
+				primary: {
+					uiType: "nested-multi-select",
+					label: "Fruits",
+					options: [
+						{
+							label: "Fruits",
+							key: "fruits-key",
+							subItems: [
+								{
+									label: "Berries",
+									key: "berries-key",
+									subItems: [
+										{ label: "Blueberry", value: "blueberry", key: "blueberry-key" },
+										{ label: "Raspberry", value: "raspberry", key: "raspberry-key" },
+									],
+								},
+								{ label: "Durian", value: "durian", key: "durian-key" },
+							],
+						},
+					],
+				},
+			},
+		},
+	},
+};
+
+export default createWarningPage({ schema: SCHEMA });
diff --git a/e2e/tests/components/fields/nested-multi-select/__screenshots__/chromium/Default-rendering--mount.png b/e2e/tests/components/fields/nested-multi-select/__screenshots__/chromium/Default-rendering--mount.png
new file mode 100644
index 000000000..bca67e258
Binary files /dev/null and b/e2e/tests/components/fields/nested-multi-select/__screenshots__/chromium/Default-rendering--mount.png differ
diff --git a/e2e/tests/components/fields/nested-multi-select/__screenshots__/chromium/Dropdown-open--open.png b/e2e/tests/components/fields/nested-multi-select/__screenshots__/chromium/Dropdown-open--open.png
new file mode 100644
index 000000000..bcebac0de
Binary files /dev/null and b/e2e/tests/components/fields/nested-multi-select/__screenshots__/chromium/Dropdown-open--open.png differ
diff --git a/e2e/tests/components/fields/nested-multi-select/__screenshots__/chromium/Warning-state--mount.png b/e2e/tests/components/fields/nested-multi-select/__screenshots__/chromium/Warning-state--mount.png
new file mode 100644
index 000000000..74df3ef23
Binary files /dev/null and b/e2e/tests/components/fields/nested-multi-select/__screenshots__/chromium/Warning-state--mount.png differ
diff --git a/e2e/tests/components/fields/nested-multi-select/nested-multi-select.e2e.spec.ts b/e2e/tests/components/fields/nested-multi-select/nested-multi-select.e2e.spec.ts
new file mode 100644
index 000000000..60dd30c4f
--- /dev/null
+++ b/e2e/tests/components/fields/nested-multi-select/nested-multi-select.e2e.spec.ts
@@ -0,0 +1,29 @@
+import { createStoryTest } from "../../../utils/fixtures";
+
+const createNestedMultiSelectTest = (story: string) =>
+	createStoryTest({
+		component: "fields/nested-multi-select",
+		story,
+		createLocators: (page) => ({
+			trigger: page.getByTestId("selector"),
+		}),
+	});
+
+const defaultTest = createNestedMultiSelectTest("default");
+const warningTest = createNestedMultiSelectTest("warning");
+
+defaultTest("Default rendering", async ({ story }) => {
+	await story.goto();
+	await story.snapshot("mount");
+});
+
+defaultTest("Dropdown open", async ({ story }) => {
+	await story.goto();
+	await story.locators.trigger.click();
+	await story.snapshot("open", { fullscreen: true });
+});
+
+warningTest("Warning state", async ({ story }) => {
+	await story.goto();
+	await story.snapshot("mount");
+});