diff --git a/apps/roam/src/components/settings/BlockPropFeatureFlagPanel.tsx b/apps/roam/src/components/settings/BlockPropFeatureFlagPanel.tsx
new file mode 100644
index 000000000..cd6e0986d
--- /dev/null
+++ b/apps/roam/src/components/settings/BlockPropFeatureFlagPanel.tsx
@@ -0,0 +1,37 @@
+import { getFeatureFlag, setFeatureFlag } from "~/utils/manageFeatureFlag";
+import { type FeatureFlags } from "~/utils/zodSchemaForSettings";
+import { Checkbox } from "@blueprintjs/core";
+import Description from "roamjs-components/components/Description";
+import idToTitle from "roamjs-components/util/idToTitle";
+import React, { useState } from "react";
+
+export const BlockPropFeatureFlagPanel = ({
+  title,
+  description,
+  featureKey,
+}: {
+  title: string;
+  description: string;
+  featureKey: keyof FeatureFlags;
+}) => {
+  const [value, setValue] = useState(() => getFeatureFlag(featureKey));
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { checked } = e.target;
+    setFeatureFlag(featureKey, checked);
+    setValue(checked);
+  };
+
+  return (
+    <Checkbox
+      checked={value}
+      onChange={handleChange}
+      labelElement={
+        <>
+          {idToTitle(title)}
+          <Description description={description} />
+        </>
+      }
+    />
+  );
+};
diff --git a/apps/roam/src/utils/manageFeatureFlag.ts b/apps/roam/src/utils/manageFeatureFlag.ts
new file mode 100644
index 000000000..b17653927
--- /dev/null
+++ b/apps/roam/src/utils/manageFeatureFlag.ts
@@ -0,0 +1,33 @@
+import { z } from "zod";
+import { FeatureFlagsSchema, type FeatureFlags } from "./zodSchemaForSettings";
+import { TOP_LEVEL_BLOCK_PROP_KEYS } from "~/data/blockPropsSettingsConfig";
+import {
+  setBlockPropBasedSettings,
+  getBlockPropBasedSettings,
+} from "~/utils/settingsUsingBlockProps";
+
+export const getFeatureFlag = (key: keyof FeatureFlags): boolean => {
+  const featureFlagKey = TOP_LEVEL_BLOCK_PROP_KEYS.featureFlags;
+
+  const { blockProps } = getBlockPropBasedSettings({
+    keys: [featureFlagKey],
+  });
+
+  const flags = FeatureFlagsSchema.parse(blockProps || {});
+
+  return flags[key];
+};
+
+export const setFeatureFlag = (
+  key: keyof FeatureFlags,
+  value: boolean,
+): void => {
+  const featureFlagKey = TOP_LEVEL_BLOCK_PROP_KEYS.featureFlags;
+
+  const validatedValue = z.boolean().parse(value);
+
+  void setBlockPropBasedSettings({
+    keys: [featureFlagKey, key],
+    value: validatedValue,
+  });
+};
diff --git a/apps/roam/src/utils/zodSchemaForSettings.ts b/apps/roam/src/utils/zodSchemaForSettings.ts
new file mode 100644
index 000000000..f05a394e9
--- /dev/null
+++ b/apps/roam/src/utils/zodSchemaForSettings.ts
@@ -0,0 +1,8 @@
+import { z } from "zod";
+
+/* eslint-disable @typescript-eslint/naming-convention */
+export const FeatureFlagsSchema = z.object({
+});
+/* eslint-disable @typescript-eslint/naming-convention */
+
+export type FeatureFlags = z.infer<typeof FeatureFlagsSchema>;