diff --git a/app/web/src/api/sdf/dal/property_editor.ts b/app/web/src/api/sdf/dal/property_editor.ts
index fad55a15e1..62c9ab4b9c 100644
--- a/app/web/src/api/sdf/dal/property_editor.ts
+++ b/app/web/src/api/sdf/dal/property_editor.ts
@@ -23,6 +23,14 @@ export interface PropertyEditorPropWidgetKindArray {
   kind: "array";
 }
 
+export interface PropertyEditorpropWidgetKindRequirement {
+  kind: "requirement";
+}
+
+export interface PropertyEditorPropWidgetKindUsers {
+  kind: "users";
+}
+
 export interface PropertyEditorPropWidgetKindCheckBox {
   kind: "checkbox";
 }
@@ -85,6 +93,8 @@ export type PropertyEditorPropWidgetKind =
   | PropertyEditorPropWidgetKindInteger
   | PropertyEditorPropWidgetKindHeader
   | PropertyEditorPropWidgetKindArray
+  | PropertyEditorpropWidgetKindRequirement
+  | PropertyEditorPropWidgetKindUsers
   | PropertyEditorPropWidgetKindCodeEditor
   | PropertyEditorPropWidgetKindComboBox
   | PropertyEditorPropWidgetKindSelect
diff --git a/app/web/src/api/sdf/dal/views.ts b/app/web/src/api/sdf/dal/views.ts
index d9ab67817c..d9b1399d52 100644
--- a/app/web/src/api/sdf/dal/views.ts
+++ b/app/web/src/api/sdf/dal/views.ts
@@ -5,9 +5,11 @@ import {
   DiagramViewData,
   SocketLocationInfo,
 } from "@/components/ModelingDiagram/diagram_types";
+import { UserId } from "@/store/auth.store";
 import { ComponentType } from "./schema";
 
 export type ViewId = string;
+export type EntityId = string; // TODO - "entity" can refer to most things in the system, currently we use this mostly just for views
 
 export type Components = Record<ComponentId, IRect>;
 export type Groups = Record<
@@ -39,3 +41,13 @@ export interface StringGeometry {
   width: string;
   height: string;
 }
+
+// Approval Requirement Definition types
+export type ApprovalRequirementDefinitionId = string;
+export interface ViewApprovalRequirementDefinition {
+  id: ApprovalRequirementDefinitionId;
+  entityId: ViewId;
+  requiredCount: number;
+  approverGroups: Record<string, UserId[]>;
+  approverIndividuals: UserId[];
+}
diff --git a/app/web/src/components/Actions/ActionsList.vue b/app/web/src/components/Actions/ActionsList.vue
index b3ea9f7e85..ab22d54be5 100644
--- a/app/web/src/components/Actions/ActionsList.vue
+++ b/app/web/src/components/Actions/ActionsList.vue
@@ -33,7 +33,7 @@
             </div>
           </div>
           <div class="flex-none font-bold">
-            {{ displayActions.length }} Actions
+            {{ displayActions.length }} Action(s)
           </div>
           <!-- TODO(Wendy) - maybe a PillCounter makes more sense here? -->
           <!-- <PillCounter
diff --git a/app/web/src/components/ApprovalFlowModal.vue b/app/web/src/components/ApprovalFlowModal.vue
index 34c08a500a..47d203e30b 100644
--- a/app/web/src/components/ApprovalFlowModal.vue
+++ b/app/web/src/components/ApprovalFlowModal.vue
@@ -53,7 +53,7 @@ import ActionsList from "./Actions/ActionsList.vue";
 
 const changeSetsStore = useChangeSetsStore();
 const authStore = useAuthStore();
-const ffStore = useFeatureFlagsStore();
+const featureFlagsStore = useFeatureFlagsStore();
 const toast = useToast();
 
 const modalRef = ref<InstanceType<typeof Modal> | null>(null);
@@ -65,7 +65,7 @@ async function openModalHandler() {
   if (changeSet?.value?.name === "HEAD") return;
 
   userIsApprover.value = changeSetsStore.currentUserIsDefaultApprover;
-  if (ffStore.WORKSPACE_FINE_GRAINED_ACCESS_CONTROL)
+  if (featureFlagsStore.WORKSPACE_FINE_GRAINED_ACCESS_CONTROL)
     userIsApprover.value = false;
 
   modalRef.value?.open();
diff --git a/app/web/src/components/AttributesPanel/TreeFormItem.vue b/app/web/src/components/AttributesPanel/TreeFormItem.vue
index 229959ff55..71e837c958 100644
--- a/app/web/src/components/AttributesPanel/TreeFormItem.vue
+++ b/app/web/src/components/AttributesPanel/TreeFormItem.vue
@@ -129,11 +129,28 @@
                 )
               "
             >
-              <template v-if="treeDef.children.length === 0">(empty)</template>
-              <template v-else-if="treeDef.children.length === 1"
-                >(1 item)</template
-              >
-              <template v-else>({{ treeDef.children.length }} items)</template>
+              <template v-if="widgetKind === 'users'">
+                <template v-if="treeDef.children.length === 0"
+                  >(empty)</template
+                >
+                <template v-else-if="treeDef.children.length === 1"
+                  >(1 user)</template
+                >
+                <template v-else
+                  >({{ treeDef.children.length }} users)</template
+                >
+              </template>
+              <template v-else>
+                <template v-if="treeDef.children.length === 0"
+                  >(empty)</template
+                >
+                <template v-else-if="treeDef.children.length === 1"
+                  >(1 item)</template
+                >
+                <template v-else
+                  >({{ treeDef.children.length }} items)</template
+                >
+              </template>
             </div>
           </div>
           <SourceIconWithTooltip
@@ -205,6 +222,21 @@
         v-show="isOpen && headerHasContent"
         class="attributes-panel-item__children"
       >
+        <div
+          v-if="widgetKind === 'users' && isArray && propManual"
+          :style="{ marginLeft: indentPx }"
+          class="flex flex-col grow gap-xs relative pt-2xs px-xs"
+        >
+          <div class="text-xs">Add an approver user for this requirement -</div>
+          <UserSelectMenu
+            ref="userSelectMenuRef"
+            class="flex-none"
+            noUsersLabel="All users are approvers!"
+            :usersToFilterOut="usersToFilterOut"
+            @select="addUser"
+          />
+        </div>
+
         <TreeFormItem
           v-for="childProp in treeDef.children"
           :key="`${propName}/${childProp.propDef?.name}`"
@@ -229,8 +261,27 @@
           </div>
         </div>
 
-        <template v-if="(isArray || isMap) && propManual">
+        <template
+          v-if="
+            (isArray || isMap || widgetKind === 'requirement') && propManual
+          "
+        >
+          <div
+            v-if="widgetKind === 'requirement'"
+            :style="{ marginLeft: indentPx }"
+            class="flex flex-row grow relative overflow-hidden items-center justify-center pt-xs"
+          >
+            <VButton
+              label="Delete Requirement"
+              tone="destructive"
+              variant="ghost"
+              icon="trash"
+              size="sm"
+              @click="deleteRequirement"
+            />
+          </div>
           <div
+            v-else-if="widgetKind !== 'users'"
             :style="{ marginLeft: indentPx }"
             class="h-[34px] flex flex-row grow gap-xs relative overflow-hidden items-center pt-2xs"
           >
@@ -455,6 +506,7 @@
       </div>
       <!-- Actual input, to the right -->
       <div
+        v-if="widgetKind !== 'users'"
         :class="
           clsx(
             'attributes-panel-item__input-wrap group/input',
@@ -726,6 +778,21 @@
           @click="openNonEditableModal"
         />
       </div>
+      <!-- users widget is just a delete button -->
+      <IconButton
+        v-else
+        icon="trash"
+        iconTone="destructive"
+        iconIdleTone="shade"
+        :tooltip="
+          treeDef.propDef.isReadonly
+            ? 'Can\'t Remove Only Approver!'
+            : 'Remove Approver'
+        "
+        size="xs"
+        :disabled="treeDef.propDef.isReadonly"
+        @click="() => removeUser(treeDef.propId)"
+      />
     </div>
 
     <!-- VALIDATION DETAILS -->
@@ -938,6 +1005,7 @@ import SecretsModal from "../SecretsModal.vue";
 import SourceIconWithTooltip from "./SourceIconWithTooltip.vue";
 import CodeViewer from "../CodeViewer.vue";
 import { TreeFormContext } from "./TreeForm.vue";
+import UserSelectMenu from "../UserSelectMenu.vue";
 
 export type TreeFormProp = {
   id: string;
@@ -1052,7 +1120,13 @@ const viewsStore = useViewsStore();
 const componentId = viewsStore.selectedComponentId!;
 
 const changeSetsStore = useChangeSetsStore();
-const attributesStore = useComponentAttributesStore(componentId);
+const attributesStore = computed(() => {
+  if (props.attributesPanel) {
+    return useComponentAttributesStore(componentId);
+  } else {
+    return undefined;
+  }
+});
 const secretsStore = useSecretsStore();
 
 const fullPropDef = computed(() => props.treeDef.propDef);
@@ -1239,10 +1313,12 @@ const propSource = computed<AttributeValueSource>(() => {
 });
 
 const setSource = (source: AttributeValueSource) => {
+  if (!attributesStore.value) return;
+
   if (source === AttributeValueSource.Manual) {
     const value = props.treeDef.value?.value ?? null;
 
-    attributesStore.UPDATE_PROPERTY_VALUE({
+    attributesStore.value.UPDATE_PROPERTY_VALUE({
       update: {
         attributeValueId: props.treeDef.valueId,
         parentAttributeValueId: props.treeDef.parentValueId,
@@ -1253,7 +1329,7 @@ const setSource = (source: AttributeValueSource) => {
       },
     });
   } else {
-    attributesStore.RESET_PROPERTY_VALUE({
+    attributesStore.value.RESET_PROPERTY_VALUE({
       attributeValueId: props.treeDef.valueId,
     });
   }
@@ -1334,8 +1410,8 @@ const newMapChildKeyIsValid = computed(() => {
 
 function removeChildHandler() {
   if (!isChildOfArray.value && !isChildOfMap.value) return;
-  if (props.attributesPanel) {
-    attributesStore.REMOVE_PROPERTY_VALUE({
+  if (props.attributesPanel && attributesStore.value) {
+    attributesStore.value.REMOVE_PROPERTY_VALUE({
       attributeValueId: props.treeDef.valueId,
       propId: props.treeDef.propId,
       componentId,
@@ -1371,8 +1447,8 @@ function addChildHandler() {
     return;
   }
 
-  if (props.attributesPanel) {
-    attributesStore.UPDATE_PROPERTY_VALUE({
+  if (props.attributesPanel && attributesStore.value) {
+    attributesStore.value.UPDATE_PROPERTY_VALUE({
       insert: {
         parentAttributeValueId: props.treeDef.valueId,
         propId: props.treeDef.propId,
@@ -1391,8 +1467,8 @@ function unsetHandler(value?: string) {
   newValueBoolean.value = false;
   newValueString.value = "";
 
-  if (props.attributesPanel) {
-    attributesStore.RESET_PROPERTY_VALUE({
+  if (props.attributesPanel && attributesStore.value) {
+    attributesStore.value.RESET_PROPERTY_VALUE({
       attributeValueId: props.treeDef.valueId,
     });
   } else {
@@ -1445,8 +1521,8 @@ function updateValue(maybeNewVal?: unknown) {
     isForSecret = true;
   }
 
-  if (props.attributesPanel) {
-    attributesStore.UPDATE_PROPERTY_VALUE({
+  if (props.attributesPanel && attributesStore.value) {
+    attributesStore.value.UPDATE_PROPERTY_VALUE({
       update: {
         attributeValueId: props.treeDef.valueId,
         parentAttributeValueId: props.treeDef.parentValueId,
@@ -1703,6 +1779,35 @@ const socketSearchFilters = computed(() => {
 
   return filters;
 });
+
+// APPROVAL REQUIREMENTS STUFF
+const usersToFilterOut = computed(() => {
+  if (props.treeDef.propDef.widgetKind.kind === "users") {
+    const users = props.treeDef.children.map((user) => user.propId);
+    return users;
+  } else return undefined;
+});
+
+const userSelectMenuRef = ref<InstanceType<typeof UserSelectMenu>>();
+
+const addUser = async (userId: string) => {
+  const requirementId = props.treeDef.parentValueId;
+  await viewsStore.ADD_INDIVIDUAL_APPROVER_TO_REQUIREMENT(
+    requirementId,
+    userId,
+  );
+  userSelectMenuRef.value?.clearSelection();
+};
+
+const removeUser = (userId: string) => {
+  const requirementId = props.treeDef.parentValueId;
+  viewsStore.REMOVE_INDIVIDUAL_APPROVER_FROM_REQUIREMENT(requirementId, userId);
+};
+
+const deleteRequirement = () => {
+  const requirementId = props.treeDef.propId;
+  viewsStore.REMOVE_VIEW_APPROVAL_REQUIREMENT(requirementId);
+};
 </script>
 
 <style lang="less">
diff --git a/app/web/src/components/ChangesPanelProposed.vue b/app/web/src/components/ChangesPanelProposed.vue
index 1c7ca27f86..df285bac68 100644
--- a/app/web/src/components/ChangesPanelProposed.vue
+++ b/app/web/src/components/ChangesPanelProposed.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="h-full flex flex-col overflow-hidden">
     <ConfirmHoldModal ref="confirmRef" :ok="finishHold" />
     <div v-if="actionsStore.proposedActions.length > 0">
       <!-- TODO(Wendy)- SEARCH BAR SHOULD GO HERE -->
@@ -34,7 +34,7 @@
       :open="!!singleSelectedAction"
       :selectedTab="selectedTab"
     />
-    <div v-if="changeSetStore.headSelected">
+    <template v-if="changeSetStore.headSelected">
       <ActionsList
         v-if="actionsStore.proposedActions.length > 0"
         :clickAction="clickAction"
@@ -47,8 +47,8 @@
         primaryText="All Actions on HEAD have been run"
         secondaryText="You can see those actions in the history tab."
       />
-    </div>
-    <div v-else>
+    </template>
+    <template v-else>
       <TreeNode
         enableDefaultHoverClasses
         enableGroupToggle
@@ -57,7 +57,7 @@
         leftBorderSize="none"
         defaultOpen
         internalScrolling
-        class="min-h-[50vh]"
+        class="min-h-[32px]"
         primaryIconClasses=""
         label="Proposed Actions In This Change Set"
       >
@@ -99,11 +99,11 @@
         <EmptyStateCard
           v-else
           iconName="actions"
-          primaryText="All Actions on HEAD have been run"
-          secondaryText="You can see those actions in the history tab."
+          primaryText="All Actions on HEAD have run"
+          secondaryText="See past actions in the history tab."
         />
       </TreeNode>
-    </div>
+    </template>
   </div>
 </template>
 
diff --git a/app/web/src/components/ComponentCard.vue b/app/web/src/components/ComponentCard.vue
index 91dfce948e..0cf284d4c5 100644
--- a/app/web/src/components/ComponentCard.vue
+++ b/app/web/src/components/ComponentCard.vue
@@ -3,7 +3,7 @@
     :class="
       clsx(
         'p-xs border-l-4 border relative',
-        titleCard ? 'mb-xs' : 'rounded-md',
+        !titleCard && 'rounded-md',
         'toDelete' in component.def && component.def.toDelete && 'opacity-70',
         'fromBaseChangeSet' in component.def &&
           component.def.fromBaseChangeSet &&
diff --git a/app/web/src/components/ComponentDetails.vue b/app/web/src/components/ComponentDetails.vue
index d16586cd52..016d28917e 100644
--- a/app/web/src/components/ComponentDetails.vue
+++ b/app/web/src/components/ComponentDetails.vue
@@ -1,7 +1,7 @@
 <template>
   <ScrollArea>
     <template #top>
-      <ComponentCard :component="props.component" titleCard>
+      <ComponentCard :component="props.component" titleCard class="mb-xs">
         <DetailsPanelMenuIcon
           :selected="props.menuSelected"
           @click="
diff --git a/app/web/src/components/EmptyStateCard.vue b/app/web/src/components/EmptyStateCard.vue
index 9227998f7d..f14b189b0f 100644
--- a/app/web/src/components/EmptyStateCard.vue
+++ b/app/web/src/components/EmptyStateCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col items-center m-sm gap-xs">
+  <div :class="clsx('flex flex-col items-center gap-xs', marginClass)">
     <div class="w-64 flex flex-col items-center">
       <EmptyStateIcon :name="iconName" />
     </div>
@@ -17,15 +17,32 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType } from "vue";
+import { computed, PropType } from "vue";
+import { SpacingSizes } from "@si/vue-lib/design-system";
+import clsx from "clsx";
 import EmptyStateIcon, { EMPTY_STATE_ICON_NAMES } from "./EmptyStateIcon.vue";
 
-defineProps({
+const props = defineProps({
   iconName: {
     type: String as PropType<EMPTY_STATE_ICON_NAMES>,
     required: true,
   },
   primaryText: { type: String, required: true },
   secondaryText: { type: String, required: true },
+  margin: { type: String as PropType<SpacingSizes>, default: "sm" },
 });
+
+const marginClass = computed(
+  () =>
+    ({
+      none: "m-0",
+      "2xs": "m-2xs",
+      xs: "m-xs",
+      sm: "m-sm",
+      md: "m-md",
+      lg: "m-lg",
+      xl: "m-xl",
+      "2xl": "m-2xl",
+    }[props.margin]),
+);
 </script>
diff --git a/app/web/src/components/InsetApprovalModal.vue b/app/web/src/components/InsetApprovalModal.vue
index 5cc3d15262..2e92d26b4d 100644
--- a/app/web/src/components/InsetApprovalModal.vue
+++ b/app/web/src/components/InsetApprovalModal.vue
@@ -4,11 +4,11 @@
     :class="
       clsx(
         'w-1/2 flex flex-col gap-sm p-sm shadow-2xl',
-        themeClasses('bg-neutral-000 border', 'bg-neutral-900'),
+        themeClasses('bg-shade-0 border', 'bg-neutral-900'),
       )
     "
   >
-    <div class="flex flex-row gap-md mb-sm">
+    <div class="flex flex-row gap-md mb-sm items-center">
       <div class="flex flex-col gap-2xs">
         <TruncateWithTooltip class="font-bold italic pb-2xs">
           {{ changeSetName }}
@@ -31,7 +31,7 @@
         </template>
         <template
           v-else-if="
-            !featureFlagStore.WORKSPACE_FINE_GRAINED_ACCESS_CONTROL &&
+            !featureFlagsStore.WORKSPACE_FINE_GRAINED_ACCESS_CONTROL &&
             (mode === 'approved' || mode === 'rejected')
           "
         >
@@ -56,7 +56,7 @@
         </template>
         <template
           v-else-if="
-            featureFlagStore.WORKSPACE_FINE_GRAINED_ACCESS_CONTROL &&
+            featureFlagsStore.WORKSPACE_FINE_GRAINED_ACCESS_CONTROL &&
             mode === 'approved'
           "
         >
@@ -76,13 +76,13 @@
       :class="
         clsx(
           'flex flex-row',
-          featureFlagStore.WORKSPACE_FINE_GRAINED_ACCESS_CONTROL
+          featureFlagsStore.WORKSPACE_FINE_GRAINED_ACCESS_CONTROL
             ? 'place-content-evenly'
             : 'justify-center',
         )
       "
     >
-      <template v-if="featureFlagStore.WORKSPACE_FINE_GRAINED_ACCESS_CONTROL">
+      <template v-if="featureFlagsStore.WORKSPACE_FINE_GRAINED_ACCESS_CONTROL">
         <div class="flex flex-col text-sm gap-sm">
           <div
             v-for="group in requirementGroups"
@@ -129,7 +129,7 @@
       </template>
       <div class="flex flex-col gap-xs">
         <div
-          v-if="!featureFlagStore.WORKSPACE_FINE_GRAINED_ACCESS_CONTROL"
+          v-if="!featureFlagsStore.WORKSPACE_FINE_GRAINED_ACCESS_CONTROL"
           class="text-sm"
         >
           These actions will be applied to the real world:
@@ -144,15 +144,16 @@
     <div class="flex flex-row gap-sm justify-center mt-sm">
       <VButton
         label="Withdraw Request"
-        tone="info"
-        variant="solid"
+        tone="warning"
+        variant="ghost"
+        icon="x"
         @click="withdraw"
       />
       <template
         v-if="
-          (featureFlagStore.WORKSPACE_FINE_GRAINED_ACCESS_CONTROL &&
+          (featureFlagsStore.WORKSPACE_FINE_GRAINED_ACCESS_CONTROL &&
             userIsApprover) ||
-          (!featureFlagStore.WORKSPACE_FINE_GRAINED_ACCESS_CONTROL &&
+          (!featureFlagsStore.WORKSPACE_FINE_GRAINED_ACCESS_CONTROL &&
             changeSetsStore.currentUserIsDefaultApprover)
         "
       >
@@ -160,12 +161,14 @@
           :disabled="mode !== 'requested' || iRejected"
           label="Reject Request"
           tone="destructive"
+          icon="thumbs-down"
           @click="rejectHandler"
         />
         <VButton
           :disabled="mode !== 'requested' || iApproved"
           label="Approve Request"
           tone="success"
+          icon="thumbs-up"
           @click="approve"
         />
       </template>
@@ -218,7 +221,7 @@ export type InsetApprovalModalMode =
 
 const authStore = useAuthStore();
 const changeSetsStore = useChangeSetsStore();
-const featureFlagStore = useFeatureFlagsStore();
+const featureFlagsStore = useFeatureFlagsStore();
 const viewStore = useViewsStore();
 
 const applyingChangeSet = ref(false);
@@ -248,7 +251,9 @@ const requirementGroups = computed(() => {
   props.approvalData?.requirements.forEach((r) => {
     if (!["CategorySchema", "View"].includes(r.entityKind)) return;
 
-    const userIds = Object.values(r.approverGroups).flat();
+    const userIds = Object.values(r.approverGroups)
+      .flat()
+      .concat(r.approverIndividuals);
     const votes: Vote[] = [];
     userIds.forEach((id) => {
       const user = authStore.workspaceUsers[id];
@@ -282,7 +287,7 @@ const requirementGroups = computed(() => {
 
 const satisfied = computed(
   () =>
-    featureFlagStore.WORKSPACE_FINE_GRAINED_ACCESS_CONTROL &&
+    featureFlagsStore.WORKSPACE_FINE_GRAINED_ACCESS_CONTROL &&
     !props.approvalData?.requirements.some((r) => r.isSatisfied === false),
 );
 
diff --git a/app/web/src/components/ModelingDiagram/DiagramView.vue b/app/web/src/components/ModelingDiagram/DiagramView.vue
index 7f4ea17d51..d6fc23b442 100644
--- a/app/web/src/components/ModelingDiagram/DiagramView.vue
+++ b/app/web/src/components/ModelingDiagram/DiagramView.vue
@@ -255,7 +255,10 @@ function onMouseOut() {
   viewsStore.setHoveredComponentId(null);
 }
 
-const goto = () => {
-  viewsStore.selectView(props.view.id);
+const goto = (e: KonvaEventObject<MouseEvent>) => {
+  // only allow double click with left mouse button!
+  if (e.evt.button === 0) {
+    viewsStore.selectView(props.view.id);
+  }
 };
 </script>
diff --git a/app/web/src/components/ModelingView/ModelingRightClickMenu.vue b/app/web/src/components/ModelingView/ModelingRightClickMenu.vue
index 0ee7233ddf..c983f1e294 100644
--- a/app/web/src/components/ModelingView/ModelingRightClickMenu.vue
+++ b/app/web/src/components/ModelingView/ModelingRightClickMenu.vue
@@ -71,7 +71,7 @@ const changeSetsStore = useChangeSetsStore();
 const componentsStore = useComponentsStore();
 const funcStore = useFuncStore();
 const actionsStore = useActionsStore();
-const viewStore = useViewsStore();
+const viewsStore = useViewsStore();
 const featureFlagsStore = useFeatureFlagsStore();
 
 const {
@@ -84,7 +84,7 @@ const {
   restorableSelectedComponents,
   erasableSelectedComponents,
   selectedEdge,
-} = storeToRefs(viewStore);
+} = storeToRefs(viewsStore);
 
 const attributesStore = computed(() =>
   selectedComponentId.value
@@ -137,24 +137,13 @@ const getActionToggleState = (id: string) => {
 };
 
 const removeFromView = () => {
-  if (viewStore.selectedViewId) {
-    const componentIds = viewStore.selectedComponents
-      .filter((c) => c.def.componentType !== ComponentType.View)
-      .map((c) => c.def.id);
-    if (componentIds.length > 0)
-      viewStore.REMOVE_FROM(viewStore.selectedViewId, componentIds);
-    const viewIds = viewStore.selectedComponents
-      .filter((c) => c.def.componentType === ComponentType.View)
-      .map((c) => c.def.id);
-    if (viewIds.length > 0)
-      viewStore.REMOVE_VIEW_FROM(viewStore.selectedViewId, viewIds);
-  }
+  viewsStore.removeSelectedViewComponentFromCurrentView();
 };
 
 const viewsSubitems = (add: (viewId: ViewId) => void) => {
   // dont show the view you're in b/c you cannot copy or move things to it
-  return viewStore.viewList
-    .filter((v) => v.id !== viewStore.selectedViewId)
+  return viewsStore.viewList
+    .filter((v) => v.id !== viewsStore.selectedViewId)
     .map((v) => {
       return {
         label: v.name,
@@ -173,13 +162,13 @@ const viewAdd = (remove: boolean) => {
       )
       .forEach((c) => {
         const geo = c.def.isGroup
-          ? viewStore.groups[c.def.id]
-          : viewStore.components[c.def.id];
+          ? viewsStore.groups[c.def.id]
+          : viewsStore.components[c.def.id];
         if (geo) components[c.def.id] = geo;
       });
 
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    viewStore.ADD_TO(viewStore.selectedViewId!, components, viewId, remove);
+    viewsStore.ADD_TO(viewsStore.selectedViewId!, components, viewId, remove);
   };
 };
 
@@ -223,7 +212,7 @@ const newView = () => {
 };
 
 const create = async () => {
-  if (!viewStore.selectedViewId) return;
+  if (!viewsStore.selectedViewId) return;
   if (!viewName.value) {
     labelRef.value?.setError("Name is required");
   } else {
@@ -231,13 +220,13 @@ const create = async () => {
     selectedComponents.value.forEach((component) => {
       const geo =
         component.def.componentType === ComponentType.Component
-          ? viewStore.components[component.def.id]
-          : viewStore.groups[component.def.id];
+          ? viewsStore.components[component.def.id]
+          : viewsStore.groups[component.def.id];
       if (geo) components[component.def.id] = geo;
     });
-    const resp = await viewStore.CREATE_VIEW_AND_MOVE(
+    const resp = await viewsStore.CREATE_VIEW_AND_MOVE(
       viewName.value,
-      viewStore.selectedViewId,
+      viewsStore.selectedViewId,
       components,
     );
     if (resp.result.success) {
@@ -510,12 +499,12 @@ const rightClickMenuItems = computed(() => {
 
 const runManagementFunc = async (prototype: MgmtPrototype) => {
   if (!selectedComponent.value) return;
-  if (!viewStore.selectedViewId) return;
+  if (!viewsStore.selectedViewId) return;
 
   await funcStore.RUN_MGMT_PROTOTYPE(
     prototype.managementPrototypeId,
     selectedComponent.value.def.id,
-    viewStore.selectedViewId,
+    viewsStore.selectedViewId,
   );
 };
 
diff --git a/app/web/src/components/UserSelectMenu.vue b/app/web/src/components/UserSelectMenu.vue
new file mode 100644
index 0000000000..1f9bd3309a
--- /dev/null
+++ b/app/web/src/components/UserSelectMenu.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="h-7">
+    <DropdownMenuButton
+      v-if="selectUsers.length > 0"
+      ref="emailInputRef"
+      v-model="userId"
+      :options="selectUsers"
+      class="w-full"
+      checkable
+      placeholder="Select user..."
+      minWidthToAnchor
+      @select="setUser"
+    />
+    <div
+      v-else
+      :class="
+        clsx(
+          'flex flex-row items-center p-2xs mb-[-1px] h-7',
+          'font-mono text-[13px] text-left truncate relative border',
+          'cursor-not-allowed',
+          themeClasses(
+            'text-neutral-500 border-neutral-400 bg-caution-lines-light',
+            'text-neutral-400 border-neutral-600 bg-caution-lines-dark',
+          ),
+        )
+      "
+    >
+      {{ noUsersLabel }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, onBeforeMount } from "vue";
+import { DropdownMenuButton, themeClasses } from "@si/vue-lib/design-system";
+import clsx from "clsx";
+import { useAuthStore, UserId } from "@/store/auth.store";
+import { useChangeSetsStore } from "@/store/change_sets.store";
+
+const authStore = useAuthStore();
+const changeSetsStore = useChangeSetsStore();
+
+const props = defineProps({
+  usersToFilterOut: { type: Array<UserId>, default: [] },
+  noUsersLabel: { type: String, default: "No available users to select" },
+});
+
+const userId = ref("");
+const setUser = (id: string) => {
+  emit("select", id);
+};
+
+onBeforeMount(() => {
+  if (changeSetsStore.selectedWorkspacePk) {
+    authStore.LIST_WORKSPACE_USERS(changeSetsStore.selectedWorkspacePk);
+  }
+});
+
+const rawUsers = computed(() => authStore.workspaceUsers);
+const selectUsers = computed(() => {
+  if (!rawUsers.value) return [];
+  else
+    return Object.values(rawUsers.value)
+      .filter((user) => !props.usersToFilterOut.includes(user.id))
+      .map((user) => ({
+        value: user.id,
+        label: `${user.name} (${user.email})`,
+      }));
+});
+
+const emit = defineEmits<{
+  (e: "select", userId: string): void;
+}>();
+
+const clearSelection = () => {
+  userId.value = "";
+};
+
+defineExpose({ userId, clearSelection });
+</script>
diff --git a/app/web/src/components/ViewCard.vue b/app/web/src/components/ViewCard.vue
index f555817461..bdd89d5cfd 100644
--- a/app/web/src/components/ViewCard.vue
+++ b/app/web/src/components/ViewCard.vue
@@ -1,18 +1,24 @@
 <template>
-  <div
+  <component
+    :is="displayAsComponentCard ? ComponentCard : 'div'"
     :class="
       clsx(
-        'flex flex-row items-center text-sm relative p-2xs pl-xs min-w-0 w-full border border-transparent cursor-pointer',
-        selected
-          ? 'dark:bg-action-900 bg-action-100 border-action-500 dark:border-action-300'
-          : 'dark:border-neutral-700',
-        outlined
-          ? ' border-action-500 dark:border-action-300'
-          : 'dark:border-neutral-700',
+        !displayAsComponentCard && [
+          'flex flex-row items-center text-sm relative p-2xs pl-xs min-w-0 w-full border border-transparent cursor-pointer',
+          selected
+            ? 'dark:bg-action-900 bg-action-100 border-action-500 dark:border-action-300'
+            : 'dark:border-neutral-700',
+          outlined
+            ? ' border-action-500 dark:border-action-300'
+            : 'dark:border-neutral-700',
+        ],
       )
     "
+    titleCard
+    :component="displayAsComponentCard"
   >
     <div
+      v-if="!displayAsComponentCard"
       class="flex-grow min-w-0"
       @click="() => viewsStore.selectView(view.id)"
     >
@@ -57,6 +63,7 @@
         icon="cursor"
       />
       <DropdownMenuItem
+        v-if="!displayAsComponentCard"
         :disabled="
           viewsStore.selectedViewId === view.id &&
           !viewsStore.viewNodes[view.id]
@@ -86,6 +93,18 @@
           }
         "
       />
+      <DropdownMenuItem
+        v-if="displayAsComponentCard && !selectedViaViewDetails"
+        label="Remove from this View"
+        icon="x-circle"
+        :onSelect="() => removeFromView()"
+      />
+      <DropdownMenuItem
+        v-else-if="featureFlagsStore.WORKSPACE_FINE_GRAINED_ACCESS_CONTROL"
+        label="Approval Requirements"
+        icon="bullet-list"
+        :onSelect="() => displayApprovalRequirements()"
+      />
       <DropdownMenuItem
         label="Delete View"
         :disabled="viewsStore.viewListCount === 1"
@@ -119,7 +138,7 @@
       />
     </Modal>
 
-    <template v-if="addingView">
+    <template v-if="addingView && !displayAsComponentCard">
       <Teleport to="body">
         <div
           ref="mouseNode"
@@ -129,7 +148,7 @@
         </div>
       </Teleport>
     </template>
-  </div>
+  </component>
 </template>
 
 <script lang="ts" setup>
@@ -156,14 +175,19 @@ import { useToast } from "vue-toastification";
 import { ViewDescription } from "@/api/sdf/dal/views";
 import { useViewsStore } from "@/store/views.store";
 import NodeSkeleton from "@/components/NodeSkeleton.vue";
+import { useFeatureFlagsStore } from "@/store/feature_flags.store";
 import DetailsPanelMenuIcon from "./DetailsPanelMenuIcon.vue";
+import ComponentCard from "./ComponentCard.vue";
+import { DiagramViewData } from "./ModelingDiagram/diagram_types";
 
 const toast = useToast();
 const viewsStore = useViewsStore();
+const featureFlagsStore = useFeatureFlagsStore();
 
 const props = defineProps<{
   selected?: boolean;
   outlined?: boolean;
+  displayAsComponentCard?: DiagramViewData;
   view: ViewDescription;
 }>();
 
@@ -265,4 +289,16 @@ watch(
   },
   { immediate: true },
 );
+
+const removeFromView = () => {
+  viewsStore.removeSelectedViewComponentFromCurrentView();
+};
+
+const displayApprovalRequirements = () => {
+  viewsStore.setSelectedViewDetails(props.view.id);
+};
+
+const selectedViaViewDetails = computed(
+  () => !!viewsStore.selectedViewDetailsId,
+);
 </script>
diff --git a/app/web/src/components/ViewDetailsPanel.vue b/app/web/src/components/ViewDetailsPanel.vue
new file mode 100644
index 0000000000..8133bbe543
--- /dev/null
+++ b/app/web/src/components/ViewDetailsPanel.vue
@@ -0,0 +1,208 @@
+<template>
+  <ScrollArea>
+    <template #top>
+      <ViewCard
+        :view="selectedView"
+        :displayAsComponentCard="selectedViewComponent"
+      />
+      <div
+        :class="
+          clsx(
+            'flex flex-row p-xs',
+            themeClasses('bg-neutral-100', 'bg-neutral-900'),
+          )
+        "
+      >
+        <div class="font-bold flex-1">Approval Requirements</div>
+        <PillCounter
+          v-if="listReq.isSuccess && listReq.completed"
+          class="flex-none font-bold"
+          :count="requirementsCount"
+          hideIfZero
+          :paddingX="requirementsCount < 10 ? 'xs' : '2xs'"
+        />
+      </div>
+    </template>
+
+    <template v-if="listReq.isSuccess && listReq.completed">
+      <TreeForm v-if="requirementsCount > 0" :trees="requirementTrees" />
+      <div v-else class="flex flex-col gap-xs items-center">
+        <EmptyStateCard
+          iconName="customize"
+          primaryText="No Requirements For This View"
+          secondaryText="To add an approval requirement for this view, select the first user to be an approver from the dropdown below."
+        />
+        <UserSelectMenu class="w-full px-sm" @select="createRequirement" />
+      </div>
+    </template>
+    <LoadingMessage v-else message="Loading..." :requestStatus="listReq" />
+  </ScrollArea>
+</template>
+
+<script lang="ts" setup>
+import * as _ from "lodash-es";
+import {
+  LoadingMessage,
+  PillCounter,
+  ScrollArea,
+  themeClasses,
+} from "@si/vue-lib/design-system";
+import { computed, PropType, watch } from "vue";
+import clsx from "clsx";
+import {
+  ViewApprovalRequirementDefinition,
+  ViewDescription,
+} from "@/api/sdf/dal/views";
+import { PropertyEditorPropKind } from "@/api/sdf/dal/property_editor";
+import { useViewsStore } from "@/store/views.store";
+import { useAuthStore } from "@/store/auth.store";
+import { useChangeSetsStore } from "@/store/change_sets.store";
+import ViewCard from "./ViewCard.vue";
+import { DiagramViewData } from "./ModelingDiagram/diagram_types";
+import TreeForm from "./AttributesPanel/TreeForm.vue";
+import { TreeFormData, TreeFormProp } from "./AttributesPanel/TreeFormItem.vue";
+import EmptyStateCard from "./EmptyStateCard.vue";
+import UserSelectMenu from "./UserSelectMenu.vue";
+
+const authStore = useAuthStore();
+const changeSetsStore = useChangeSetsStore();
+const viewsStore = useViewsStore();
+
+const listReq = viewsStore.getRequestStatus("LIST_VIEW_APPROVAL_REQUIREMENTS");
+
+const props = defineProps({
+  selectedView: { type: Object as PropType<ViewDescription>, required: true },
+  selectedViewComponent: {
+    type: Object as PropType<DiagramViewData>,
+    required: true,
+  },
+});
+
+const rawRequirements = computed(
+  () => viewsStore.requirementDefintionsByViewId[props.selectedView.id],
+);
+
+const requirementsCount = computed(() => {
+  if (rawRequirements.value) {
+    return rawRequirements.value.length;
+  } else return 0;
+});
+
+const generateUserTree = (
+  requirementDef: ViewApprovalRequirementDefinition,
+) => {
+  const n = requirementDef.approverIndividuals.length;
+  const users = [];
+
+  for (let i = 0; i < n; i++) {
+    let isReadonly = false;
+    if (n === 1) isReadonly = true;
+
+    const id = requirementDef.approverIndividuals[i];
+    if (!id) break;
+    const user = workspaceUsersById.value[id];
+    if (!user) break;
+    const name = `${user.name} - ${user.email}`;
+    users.push({
+      propDef: {
+        id,
+        name,
+        icon: "user-circle",
+        kind: PropertyEditorPropKind.String,
+        widgetKind: { kind: "users" },
+        isHidden: false,
+        isReadonly,
+      } as TreeFormProp,
+      children: [],
+      value: undefined,
+      valueId: id,
+      parentValueId: requirementDef.id,
+      validation: null,
+      propId: id,
+    } as TreeFormData);
+  }
+
+  return users;
+};
+
+const generateOneRequirementTree = (
+  requirementDef: ViewApprovalRequirementDefinition,
+  n: number,
+  showNumber = true,
+) =>
+  ({
+    propDef: {
+      id: requirementDef.id,
+      name: showNumber ? `requirement ${n}` : "requirement",
+      icon: "bullet-list",
+      kind: PropertyEditorPropKind.Object,
+      widgetKind: { kind: "requirement" },
+      isHidden: false,
+      isReadonly: false,
+    } as TreeFormProp,
+    children: [
+      {
+        propDef: {
+          id: `approvers${n}`,
+          name: "approvers",
+          icon: "user-circle",
+          kind: PropertyEditorPropKind.Array,
+          widgetKind: { kind: "users" },
+          isHidden: false,
+          isReadonly: false,
+        } as TreeFormProp,
+        children: generateUserTree(requirementDef),
+        value: undefined,
+        valueId: `approvers${n}`,
+        parentValueId: requirementDef.id,
+        validation: null,
+        propId: `approvers${n}`,
+      } as TreeFormData,
+    ],
+    value: undefined,
+    valueId: requirementDef.id,
+    parentValueId: "root",
+    validation: null,
+    propId: requirementDef.id,
+  } as TreeFormData);
+
+const requirementTrees = computed(() => {
+  const trees = [] as TreeFormData[];
+  const showNumber = requirementsCount.value > 1;
+
+  if (!rawRequirements.value) return trees;
+
+  for (let i = 0; i < requirementsCount.value; i++) {
+    const requirementDef = rawRequirements.value[i];
+    if (requirementDef) {
+      trees.push(generateOneRequirementTree(requirementDef, i + 1, showNumber));
+    } else break;
+  }
+
+  return trees;
+});
+
+const refreshData = () => {
+  viewsStore.LIST_VIEW_APPROVAL_REQUIREMENTS(props.selectedView.id);
+  if (changeSetsStore.selectedWorkspacePk) {
+    authStore.LIST_WORKSPACE_USERS(changeSetsStore.selectedWorkspacePk);
+  }
+};
+
+watch(
+  () => props.selectedView.id,
+  () => {
+    refreshData();
+  },
+  { immediate: true },
+);
+
+const workspaceUsersById = computed(() => authStore.workspaceUsers);
+
+const createRequirement = async (firstApproverUserId: string) => {
+  await viewsStore.CREATE_VIEW_APPROVAL_REQUIREMENT(
+    props.selectedView.id,
+    firstApproverUserId,
+  );
+};
+</script>
diff --git a/app/web/src/components/Workspace/WorkspaceAdminDashboard.vue b/app/web/src/components/Workspace/WorkspaceAdminDashboard.vue
index ba7acfcf45..cebe124603 100644
--- a/app/web/src/components/Workspace/WorkspaceAdminDashboard.vue
+++ b/app/web/src/components/Workspace/WorkspaceAdminDashboard.vue
@@ -4,7 +4,7 @@
   >
     <span class="flex flex-row mt-10 font-bold text-3xl">Admin Dashboard</span>
     <div class="flex flex-row w-full">
-      <Stack spacing="lg" class="p-10">
+      <Stack spacing="md" class="p-10">
         <Stack class="max-w-xl">
           <h2 class="font-bold text-lg">UPDATE MODULE CACHE</h2>
           <div class="flex flex-row-reverse gap-sm">
@@ -39,6 +39,31 @@
           </div>
         </Stack>
         <WorkspaceAdmin />
+        <Stack class="text-xs font-bold" spacing="none">
+          <div class="text-lg pb-2xs">Feature Flags:</div>
+          <div
+            v-for="flag in featureFlags"
+            :key="flag.name"
+            :class="
+              clsx(
+                'flex flex-row p-2xs',
+                themeClasses('', 'odd:bg-neutral-600'),
+              )
+            "
+          >
+            <div class="flex-1">{{ flag.name }}:</div>
+            <div
+              :class="
+                clsx(
+                  flag.value ? 'text-success-500' : 'text-destructive-500',
+                  'uppercase flex-none',
+                )
+              "
+            >
+              {{ flag.value }}
+            </div>
+          </div>
+        </Stack>
       </Stack>
       <PromptEditor />
     </div>
@@ -47,20 +72,26 @@
 
 <script lang="ts" setup>
 import * as _ from "lodash-es";
-import { onBeforeMount, ref } from "vue";
-import { Stack, VormInput, VButton } from "@si/vue-lib/design-system";
+import { computed, onBeforeMount, ref } from "vue";
+import {
+  Stack,
+  VormInput,
+  VButton,
+  themeClasses,
+} from "@si/vue-lib/design-system";
 import { useRouter } from "vue-router";
+import clsx from "clsx";
 import { useAdminStore } from "@/store/admin.store";
 import { useFeatureFlagsStore } from "@/store/feature_flags.store";
 import WorkspaceAdmin from "@/components/AdminDashboard/WorkspaceAdmin.vue";
 import PromptEditor from "@/components/AdminDashboard/PromptAdmin.vue";
 
 const adminStore = useAdminStore();
-const featureFlagStore = useFeatureFlagsStore();
+const featureFlagsStore = useFeatureFlagsStore();
 
 const router = useRouter();
 onBeforeMount(async () => {
-  if (!featureFlagStore.ADMIN_PANEL_ACCESS) {
+  if (!featureFlagsStore.ADMIN_PANEL_ACCESS) {
     await router.push({ name: "workspace-single" });
   }
 });
@@ -82,4 +113,8 @@ const killExecution = () => {
 };
 
 const funcRunId = ref<string | null>(null);
+
+const featureFlags = computed(() => {
+  return featureFlagsStore.allFeatureFlags;
+});
 </script>
diff --git a/app/web/src/components/Workspace/WorkspaceModelAndView.vue b/app/web/src/components/Workspace/WorkspaceModelAndView.vue
index c1ec652364..10ee05bb7f 100644
--- a/app/web/src/components/Workspace/WorkspaceModelAndView.vue
+++ b/app/web/src/components/Workspace/WorkspaceModelAndView.vue
@@ -93,6 +93,16 @@
           :menuSelected="contextMenuRef?.isOpen ?? false"
           @openMenu="onThreeDotMenuClick"
         />
+        <ViewDetailsPanel
+          v-else-if="
+            featureFlagsStore.WORKSPACE_FINE_GRAINED_ACCESS_CONTROL &&
+            (selectedComponentIds.length === 1 || selectedViewDetails) &&
+            selectedView &&
+            selectedViewComponent
+          "
+          :selectedView="selectedView"
+          :selectedViewComponent="selectedViewComponent"
+        />
         <NoSelectionDetailsPanel v-else />
       </div>
     </component>
@@ -125,7 +135,7 @@ import EraseSelectionModal from "@/components/ModelingView/EraseSelectionModal.v
 import { useStatusStore } from "@/store/status.store";
 import { useFeatureFlagsStore } from "@/store/feature_flags.store";
 import { ChangeSetStatus } from "@/api/sdf/dal/change_set";
-import { useViewsStore } from "@/store/views.store";
+import { useViewsStore, VIEW_DEFAULTS } from "@/store/views.store";
 import { ComponentType } from "@/api/sdf/dal/schema";
 import { useRouterStore } from "@/store/router.store";
 import { useAssetStore } from "@/store/asset.store";
@@ -138,6 +148,7 @@ import {
   DiagramElementData,
   DiagramGroupData,
   DiagramNodeData,
+  DiagramViewData,
   RightClickElementEvent,
 } from "../ModelingDiagram/diagram_types";
 import DiagramOutline from "../DiagramOutline/DiagramOutline.vue";
@@ -150,9 +161,10 @@ import RestoreSelectionModal from "../ModelingView/RestoreSelectionModal.vue";
 import TemplateSelectionModal from "../ModelingView/TemplateSelectionModal.vue";
 import CommandModal from "./CommandModal.vue";
 import InsetApprovalModal from "../InsetApprovalModal.vue";
+import ViewDetailsPanel from "../ViewDetailsPanel.vue";
 
 const changeSetsStore = useChangeSetsStore();
-const viewStore = useViewsStore();
+const viewsStore = useViewsStore();
 const actionsStore = useActionsStore();
 const presenceStore = usePresenceStore();
 const assetStore = useAssetStore();
@@ -227,7 +239,7 @@ const approvalData = computed(
 onBeforeMount(async () => {
   // get to first paint ASAP
   await Promise.all([
-    viewStore.LIST_VIEWS(),
+    viewsStore.LIST_VIEWS(),
     assetStore.LOAD_SCHEMA_VARIANT_LIST(),
   ]);
   let viewId;
@@ -235,7 +247,7 @@ onBeforeMount(async () => {
     viewId = routeStore.currentRoute.params.viewId as string;
 
   await Promise.all([
-    viewStore.FETCH_VIEW(viewId), // draws the minimal diagram, later gets all geometry and component
+    viewsStore.FETCH_VIEW(viewId), // draws the minimal diagram, later gets all geometry and component
     funcStore.FETCH_FUNC_LIST(), // required for actions of a selected component to work
   ]);
 
@@ -244,9 +256,9 @@ onBeforeMount(async () => {
   window.localStorage.removeItem(key);
   if (
     lastId &&
-    Object.values(viewStore.selectedComponentIds).filter(Boolean).length === 0
+    Object.values(viewsStore.selectedComponentIds).filter(Boolean).length === 0
   ) {
-    viewStore.setSelectedComponentId(lastId);
+    viewsStore.setSelectedComponentId(lastId);
   }
 
   // filling out the rest of the needed data
@@ -278,14 +290,14 @@ onBeforeUnmount(() => {
 
 const contextMenuRef = ref<InstanceType<typeof ModelingRightClickMenu>>();
 
-const selectedComponentIds = computed(() => viewStore.selectedComponentIds);
+const selectedComponentIds = computed(() => viewsStore.selectedComponentIds);
 
-const selectedEdge = computed(() => viewStore.selectedEdge);
+const selectedEdge = computed(() => viewsStore.selectedEdge);
 const selectedComponent = computed<
   DiagramGroupData | DiagramNodeData | undefined
 >(() =>
-  viewStore.selectedComponent?.def.componentType !== ComponentType.View
-    ? (viewStore.selectedComponent as DiagramGroupData | DiagramNodeData)
+  viewsStore.selectedComponent?.def.componentType !== ComponentType.View
+    ? (viewsStore.selectedComponent as DiagramGroupData | DiagramNodeData)
     : undefined,
 );
 
@@ -301,7 +313,7 @@ function onRightClickElement(rightClickEventInfo: RightClickElementEvent) {
 
   if (component) {
     position = structuredClone(
-      component.def.isGroup ? viewStore.components[id] : viewStore.groups[id],
+      component.def.isGroup ? viewsStore.components[id] : viewsStore.groups[id],
     );
   }
   if (position) position.y += position.height / 2;
@@ -320,8 +332,8 @@ function onOutlineRightClick(ev: {
   let position: IRect | undefined;
   if (component) {
     position = component.def.isGroup
-      ? viewStore.components[id]
-      : viewStore.groups[id];
+      ? viewsStore.components[id]
+      : viewsStore.groups[id];
   }
   contextMenuRef.value?.open(ev.mouse, true, position);
 }
@@ -333,4 +345,47 @@ function onThreeDotMenuClick(mouse: MouseEvent) {
 function closeRightClickMenu() {
   contextMenuRef.value?.close();
 }
+
+const viewSelected = computed(
+  () =>
+    !!(
+      selectedComponentIds.value &&
+      selectedComponentIds.value.length === 1 &&
+      selectedComponentIds.value[0] &&
+      viewsStore.viewsById[selectedComponentIds.value[0]]
+    ),
+);
+
+const selectedViewDetails = computed(() => {
+  if (viewsStore.selectedViewDetailsId)
+    return viewsStore.viewsById[viewsStore.selectedViewDetailsId];
+  else return undefined;
+});
+
+const selectedView = computed(() => {
+  if (viewSelected.value) {
+    const id = selectedComponentIds.value[0];
+    return viewsStore.viewList.find((v) => v.id === id);
+  } else if (viewsStore.selectedViewDetailsId) {
+    return viewsStore.viewList.find(
+      (v) => v.id === viewsStore.selectedViewDetailsId,
+    );
+  } else return null;
+});
+
+const selectedViewComponent = computed(() => {
+  if (viewSelected.value && viewsStore.selectedComponent) {
+    return viewsStore.selectedComponent as DiagramViewData;
+  } else if (viewsStore.selectedViewDetailsId && selectedView.value) {
+    // TODO(Wendy) - this is kinda hacky and should be made cleaner in the future
+    const v = selectedView.value;
+    const fakeGeo = { x: 0, y: 0, width: 0, height: 0 };
+    return new DiagramViewData({
+      ...VIEW_DEFAULTS,
+      ...fakeGeo,
+      ...v,
+      componentType: ComponentType.View,
+    });
+  } else return null;
+});
 </script>
diff --git a/app/web/src/components/layout/navbar/Notifications.vue b/app/web/src/components/layout/navbar/Notifications.vue
index fde8b73730..a62ba95ed9 100644
--- a/app/web/src/components/layout/navbar/Notifications.vue
+++ b/app/web/src/components/layout/navbar/Notifications.vue
@@ -2,7 +2,8 @@
   <button
     v-if="
       userIsApprover ||
-      (ffStore.WORKSPACE_FINE_GRAINED_ACCESS_CONTROL && numberICanApprove > 0)
+      (featureFlagsStore.WORKSPACE_FINE_GRAINED_ACCESS_CONTROL &&
+        numberICanApprove > 0)
     "
     v-tooltip="{
       content: tooltipText,
@@ -53,19 +54,19 @@ import ApprovalPendingModal from "../../ApprovalPendingModal.vue";
 
 const changeSetsStore = useChangeSetsStore();
 const authStore = useAuthStore();
-const ffStore = useFeatureFlagsStore();
+const featureFlagsStore = useFeatureFlagsStore();
 
 const pendingApprovalModalRef = ref<InstanceType<
   typeof ApprovalPendingModal
 > | null>(null);
 
 const userIsApprover = computed(() => {
-  if (ffStore.WORKSPACE_FINE_GRAINED_ACCESS_CONTROL) return false;
+  if (featureFlagsStore.WORKSPACE_FINE_GRAINED_ACCESS_CONTROL) return false;
   return changeSetsStore.currentUserIsDefaultApprover;
 });
 
 const numberICanApprove = computed(() => {
-  if (!ffStore.WORKSPACE_FINE_GRAINED_ACCESS_CONTROL) {
+  if (!featureFlagsStore.WORKSPACE_FINE_GRAINED_ACCESS_CONTROL) {
     return changeSetsStore.changeSetsNeedingApproval.length;
   }
   let approvable = 0;
diff --git a/app/web/src/store/change_sets.store.ts b/app/web/src/store/change_sets.store.ts
index 15fa829b89..30855de03e 100644
--- a/app/web/src/store/change_sets.store.ts
+++ b/app/web/src/store/change_sets.store.ts
@@ -47,6 +47,7 @@ export interface ChangeSetApprovalRequirement {
   isSatisfied: boolean;
   applicableApprovalIds: ChangeSetApprovalId[];
   approverGroups: Record<string, string[]>;
+  approverIndividuals: string[];
 }
 
 export type ApprovalStatus = "Approved" | "Rejected";
@@ -67,7 +68,10 @@ export const approverForChangeSet = (
   approvalData: ApprovalData,
 ) =>
   approvalData.requirements.some((r) =>
-    Object.values(r.approverGroups).flat().includes(userId),
+    Object.values(r.approverGroups)
+      .flat()
+      .concat(r.approverIndividuals)
+      .includes(userId),
   );
 
 export function useChangeSetsStore() {
diff --git a/app/web/src/store/feature_flags.store.ts b/app/web/src/store/feature_flags.store.ts
index 49908ef251..d1cd327da0 100644
--- a/app/web/src/store/feature_flags.store.ts
+++ b/app/web/src/store/feature_flags.store.ts
@@ -20,6 +20,11 @@ const WORKSPACE_FLAG_MAPPING = {
     "workspace-fine-grained-access-control",
 };
 
+const ALL_FLAG_MAPPING: Record<FeatureFlags, string> = {
+  ...FLAG_MAPPING,
+  ...WORKSPACE_FLAG_MAPPING,
+};
+
 type KeysOfUnion<T> = T extends T ? keyof T : never;
 type FeatureFlags = KeysOfUnion<
   typeof FLAG_MAPPING | typeof WORKSPACE_FLAG_MAPPING
@@ -38,11 +43,16 @@ export function useFeatureFlagsStore() {
     undefined,
     defineStore("feature-flags", {
       // all flags default to false
-      state: () =>
-        _.mapValues(
-          { ...FLAG_MAPPING, ...WORKSPACE_FLAG_MAPPING },
-          () => false,
-        ),
+      state: () => _.mapValues({ ...ALL_FLAG_MAPPING }, () => false),
+      getters: {
+        allFeatureFlags(state) {
+          const flags = [] as Array<{ name: string; value: boolean }>;
+          for (const key of Object.keys(ALL_FLAG_MAPPING)) {
+            flags.push({ name: key, value: state[key as FeatureFlags] });
+          }
+          return flags;
+        },
+      },
       async onActivated() {
         posthog.onFeatureFlags((phFlags) => {
           // reset local flags from posthog data
@@ -77,7 +87,7 @@ export function useFeatureFlagsStore() {
 
         // You can override feature flags while working on a feature by setting them to true/false here
         // for example:
-        // this.MANAGEMENT_EDGES = false;
+        // this.FEATURE_FLAG_NAME = false;
       },
     }),
   )();
diff --git a/app/web/src/store/realtime/realtime_events.ts b/app/web/src/store/realtime/realtime_events.ts
index 993b4ed9db..ac525a042c 100644
--- a/app/web/src/store/realtime/realtime_events.ts
+++ b/app/web/src/store/realtime/realtime_events.ts
@@ -16,7 +16,12 @@ import {
   SchemaVariantId,
 } from "@/api/sdf/dal/schema";
 import { ActionId } from "@/api/sdf/dal/action";
-import { ViewDescription, ViewId } from "@/api/sdf/dal/views";
+import {
+  ApprovalRequirementDefinitionId,
+  EntityId,
+  ViewDescription,
+  ViewId,
+} from "@/api/sdf/dal/views";
 import { WorkspacePk } from "../workspaces.store";
 import { StatusUpdate } from "../status.store";
 import { CursorContainerKind } from "../presence.store";
@@ -395,4 +400,21 @@ export type WsEventPayloadMap = {
   };
 
   PromptUpdated: { kind: string; overridden: boolean };
+
+  // realtime events for approval requirements
+  ApprovalRequirementAddIndividualApprover: {
+    approvalRequirementDefinitionId: ApprovalRequirementDefinitionId;
+    userId: UserId;
+  };
+  ApprovalRequirementDefinitionCreated: {
+    entityId: EntityId;
+    approvers?: UserId[];
+  };
+  ApprovalRequirementDefinitionRemoved: {
+    approvalRequirementDefinitionId: ApprovalRequirementDefinitionId;
+  };
+  ApprovalRequirementRemoveIndividualApprover: {
+    approvalRequirementDefinitionId: ApprovalRequirementDefinitionId;
+    userId: UserId;
+  };
 };
diff --git a/app/web/src/store/views.store.ts b/app/web/src/store/views.store.ts
index cbd93a93a7..44427e4133 100644
--- a/app/web/src/store/views.store.ts
+++ b/app/web/src/store/views.store.ts
@@ -14,6 +14,8 @@ import {
   ViewDescription,
   StringGeometry,
   ViewNodes,
+  ApprovalRequirementDefinitionId,
+  ViewApprovalRequirementDefinition,
 } from "@/api/sdf/dal/views";
 import {
   DiagramGroupData,
@@ -52,7 +54,7 @@ import { useRealtimeStore } from "./realtime/realtime.store";
 import { useWorkspacesStore } from "./workspaces.store";
 import { useRouterStore } from "./router.store";
 import { useQualificationsStore } from "./qualifications.store";
-import { useAuthStore } from "./auth.store";
+import { useAuthStore, UserId } from "./auth.store";
 
 const MAX_RETRIES = 5;
 
@@ -133,7 +135,7 @@ const setSockets = (
   return sockets;
 };
 
-const VIEW_DEFAULTS = {
+export const VIEW_DEFAULTS = {
   icon: "create" as IconNames,
   color: "#9d00ff",
   schemaName: "View",
@@ -181,6 +183,15 @@ export const useViewsStore = (forceChangeSetId?: ChangeSetId) => {
     "views",
   ] as URLPattern;
 
+  const APPROVAL_REQUIREMENTS_API_PREFIX = [
+    "v2",
+    "workspaces",
+    { workspaceId },
+    "change-sets",
+    { changeSetId },
+    "approval-requirement-definitions",
+  ] as URLPattern;
+
   return addStoreHooks(
     workspaceId,
     changeSetId,
@@ -194,6 +205,10 @@ export const useViewsStore = (forceChangeSetId?: ChangeSetId) => {
         // every views data goes here
         viewsById: {} as Record<ViewId, View>,
         viewList: [] as ViewDescription[],
+        requirementDefinitionsById: {} as Record<
+          ApprovalRequirementDefinitionId,
+          ViewApprovalRequirementDefinition
+        >,
 
         /* *
          * these hold the data for everything on the diagram in the SELECTED view
@@ -221,6 +236,7 @@ export const useViewsStore = (forceChangeSetId?: ChangeSetId) => {
         selectedComponentIds: [] as ComponentId[],
         selectedEdgeId: null as EdgeId | null,
         selectedComponentDetailsTab: null as string | null,
+        selectedViewDetailsId: null as ViewId | null,
         hoveredComponentId: null as ComponentId | null,
         hoveredEdgeId: null as EdgeId | null,
         hoveredComponentMeta: null as ElementHoverMeta | null,
@@ -445,6 +461,19 @@ export const useViewsStore = (forceChangeSetId?: ChangeSetId) => {
 
           return boxDictionary;
         },
+
+        requirementDefintionsByViewId: (state) => {
+          const out = {} as Record<ViewId, ViewApprovalRequirementDefinition[]>;
+          for (const requirement of Object.values(
+            state.requirementDefinitionsById,
+          )) {
+            if (!out[requirement.entityId]) {
+              out[requirement.entityId] = [];
+            }
+            out[requirement.entityId]?.push(requirement);
+          }
+          return out;
+        },
       },
       actions: {
         geoFrom(
@@ -515,12 +544,15 @@ export const useViewsStore = (forceChangeSetId?: ChangeSetId) => {
           if (!ids.length) {
             this.selectedComponentIds = [];
             this.selectedEdgeId = null;
+            this.selectedViewDetailsId = null;
           } else if (ids.length === 1 && ids[0]?.startsWith("e_")) {
             this.selectedComponentIds = [];
             this.selectedEdgeId = ids[0].substring(2);
+            this.selectedViewDetailsId = null;
           } else {
             this.selectedComponentIds = ids.map((id) => id.substring(2));
             this.selectedEdgeId = null;
+            this.selectedViewDetailsId = null;
           }
 
           const tabSlug =
@@ -531,9 +563,14 @@ export const useViewsStore = (forceChangeSetId?: ChangeSetId) => {
             this.selectedComponentDetailsTab = null;
           }
         },
-
+        setSelectedViewDetails(id: ViewId) {
+          this.selectedViewDetailsId = id;
+          this.selectedComponentIds = [];
+          this.selectedEdgeId = null;
+        },
         setSelectedEdgeId(selection: EdgeId | null) {
           // clear component selection
+          this.selectedViewDetailsId = null;
           this.selectedComponentIds = [];
           this.selectedEdgeId = selection;
           this.selectedComponentDetailsTab = null;
@@ -544,6 +581,7 @@ export const useViewsStore = (forceChangeSetId?: ChangeSetId) => {
           opts?: { toggle?: boolean; detailsTab?: string },
         ) {
           const key = `${changeSetId}_selected_component`;
+          this.selectedViewDetailsId = null;
           this.selectedEdgeId = null;
           if (!selection || !selection.length) {
             this.selectedComponentIds = [];
@@ -757,6 +795,20 @@ export const useViewsStore = (forceChangeSetId?: ChangeSetId) => {
         cancelAdd() {
           this.addComponentId = null;
         },
+        removeSelectedViewComponentFromCurrentView() {
+          if (this.selectedViewId) {
+            const componentIds = this.selectedComponents
+              .filter((c) => c.def.componentType !== ComponentType.View)
+              .map((c) => c.def.id);
+            if (componentIds.length > 0)
+              this.REMOVE_FROM(this.selectedViewId, componentIds);
+            const viewIds = this.selectedComponents
+              .filter((c) => c.def.componentType === ComponentType.View)
+              .map((c) => c.def.id);
+            if (viewIds.length > 0)
+              this.REMOVE_VIEW_FROM(this.selectedViewId, viewIds);
+          }
+        },
         async CREATE_VIEW(name: string) {
           return new ApiRequest<ViewDescription>({
             method: "post",
@@ -1575,6 +1627,67 @@ export const useViewsStore = (forceChangeSetId?: ChangeSetId) => {
           });
         },
 
+        // view approval requirement endpoints
+        async CREATE_VIEW_APPROVAL_REQUIREMENT(viewId: ViewId, userId: UserId) {
+          return new ApiRequest({
+            method: "put",
+            url: APPROVAL_REQUIREMENTS_API_PREFIX,
+            params: {
+              entityId: viewId,
+              users: [userId],
+            },
+          });
+        },
+        async REMOVE_VIEW_APPROVAL_REQUIREMENT(
+          definitionId: ApprovalRequirementDefinitionId,
+        ) {
+          return new ApiRequest({
+            method: "delete",
+            url: APPROVAL_REQUIREMENTS_API_PREFIX.concat([definitionId]),
+          });
+        },
+        async LIST_VIEW_APPROVAL_REQUIREMENTS(viewId: ViewId) {
+          return new ApiRequest({
+            method: "get",
+            url: APPROVAL_REQUIREMENTS_API_PREFIX.concat(["entity", viewId]),
+            onSuccess: (response: ViewApprovalRequirementDefinition[]) => {
+              this.requirementDefinitionsById = {} as Record<
+                ApprovalRequirementDefinitionId,
+                ViewApprovalRequirementDefinition
+              >;
+              for (const def of response) {
+                this.requirementDefinitionsById[def.id] = def;
+              }
+            },
+          });
+        },
+        async ADD_INDIVIDUAL_APPROVER_TO_REQUIREMENT(
+          definitionId: ApprovalRequirementDefinitionId,
+          userId: UserId,
+        ) {
+          return new ApiRequest({
+            method: "put",
+            url: APPROVAL_REQUIREMENTS_API_PREFIX.concat([
+              definitionId,
+              "individual-approver",
+              userId,
+            ]),
+          });
+        },
+        async REMOVE_INDIVIDUAL_APPROVER_FROM_REQUIREMENT(
+          definitionId: ApprovalRequirementDefinitionId,
+          userId: UserId,
+        ) {
+          return new ApiRequest({
+            method: "delete",
+            url: APPROVAL_REQUIREMENTS_API_PREFIX.concat([
+              definitionId,
+              "individual-approver",
+              userId,
+            ]),
+          });
+        },
+
         setGroupZIndex() {
           const groupSizes: {
             id: string;
@@ -1997,6 +2110,51 @@ export const useViewsStore = (forceChangeSetId?: ChangeSetId) => {
                 this.setGroupZIndex();
               },
             },
+
+            // events for approval requirements
+            {
+              eventType: "ApprovalRequirementAddIndividualApprover",
+              callback: (payload) => {
+                const viewId =
+                  this.requirementDefinitionsById[
+                    payload.approvalRequirementDefinitionId
+                  ]?.entityId;
+                if (viewId) {
+                  this.LIST_VIEW_APPROVAL_REQUIREMENTS(viewId);
+                }
+              },
+            },
+            {
+              eventType: "ApprovalRequirementDefinitionCreated",
+              callback: (payload) => {
+                const viewId = payload.entityId;
+                this.LIST_VIEW_APPROVAL_REQUIREMENTS(viewId);
+              },
+            },
+            {
+              eventType: "ApprovalRequirementDefinitionRemoved",
+              callback: (payload) => {
+                const viewId =
+                  this.requirementDefinitionsById[
+                    payload.approvalRequirementDefinitionId
+                  ]?.entityId;
+                if (viewId) {
+                  this.LIST_VIEW_APPROVAL_REQUIREMENTS(viewId);
+                }
+              },
+            },
+            {
+              eventType: "ApprovalRequirementRemoveIndividualApprover",
+              callback: (payload) => {
+                const viewId =
+                  this.requirementDefinitionsById[
+                    payload.approvalRequirementDefinitionId
+                  ]?.entityId;
+                if (viewId) {
+                  this.LIST_VIEW_APPROVAL_REQUIREMENTS(viewId);
+                }
+              },
+            },
           ],
         );
 
@@ -2022,6 +2180,7 @@ export const useViewsStore = (forceChangeSetId?: ChangeSetId) => {
         return () => {
           // clear selection without triggering url stuff
           this.selectedComponentIds = [];
+          this.selectedViewDetailsId = null;
           this.selectedEdgeId = null;
           actionUnsub();
           realtimeStore.unsubscribe(`${this.$id}-changeset`);
diff --git a/app/web/src/store/workspaces.store.ts b/app/web/src/store/workspaces.store.ts
index 09930241ad..da2bb75cce 100644
--- a/app/web/src/store/workspaces.store.ts
+++ b/app/web/src/store/workspaces.store.ts
@@ -172,7 +172,6 @@ export const useWorkspacesStore = () => {
             },
           });
         },
-
         async GET_INTEGRATIONS() {
           if (
             this.selectedWorkspacePk === null ||
@@ -192,7 +191,6 @@ export const useWorkspacesStore = () => {
             },
           });
         },
-
         async UPDATE_INTEGRATION(
           workspaceIntegrationId: WorkspaceIntegrationId,
           webhookUrl: string,
diff --git a/lib/dal/src/approval_requirement.rs b/lib/dal/src/approval_requirement.rs
index 9ba3a625f4..33547c11c9 100644
--- a/lib/dal/src/approval_requirement.rs
+++ b/lib/dal/src/approval_requirement.rs
@@ -29,6 +29,7 @@
 
 use std::collections::{HashMap, HashSet};
 
+use serde::{Deserialize, Serialize};
 use si_events::merkle_tree_hash::MerkleTreeHash;
 use si_id::{ulid::Ulid, ApprovalRequirementDefinitionId, EntityId, UserPk};
 use telemetry::prelude::*;
@@ -38,7 +39,7 @@ use crate::{
     workspace_snapshot::{
         graph::detector::Change, traits::approval_requirement::ApprovalRequirementExt,
     },
-    DalContext, WorkspaceSnapshotError,
+    DalContext, WorkspaceSnapshotError, WsEvent, WsEventResult, WsPayload,
 };
 
 pub use crate::workspace_snapshot::traits::approval_requirement::{
@@ -48,6 +49,8 @@ pub use crate::workspace_snapshot::traits::approval_requirement::{
 #[allow(missing_docs)]
 #[derive(Debug, Error)]
 pub enum ApprovalRequirementError {
+    #[error("Entity not found: {0}")]
+    EntityNotFound(EntityId),
     #[error("workspace snapshot error: {0}")]
     WorkspaceSnapshot(#[from] WorkspaceSnapshotError),
 }
@@ -142,3 +145,118 @@ impl ApprovalRequirement {
             .map_err(Into::into)
     }
 }
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub struct ApprovalRequirementDefinition {
+    pub id: ApprovalRequirementDefinitionId,
+    pub required_count: usize,
+    pub approvers: HashSet<ApprovalRequirementApprover>,
+}
+
+impl ApprovalRequirementDefinition {
+    #[instrument(
+        name = "approval_requirement_definition.list_for_entity_id",
+        level = "debug",
+        skip_all,
+        fields(entity_id)
+    )]
+    pub async fn list_for_entity_id(
+        ctx: &DalContext,
+        entity_id: impl Into<Ulid>,
+    ) -> Result<Vec<Self>> {
+        let entity_id: EntityId = entity_id.into().into();
+        if let Some(approval_requirement_definitions) = ctx
+            .workspace_snapshot()?
+            .approval_requirement_definitions_for_entity_id_opt(ctx, entity_id)
+            .await?
+        {
+            return Ok(approval_requirement_definitions);
+        }
+
+        Err(ApprovalRequirementError::EntityNotFound(entity_id))
+    }
+}
+
+#[derive(Debug, Deserialize, Eq, PartialEq, Serialize, Clone)]
+#[serde(rename_all = "camelCase")]
+pub struct ApprovalRequirementDefinitionCreatedPayload {
+    entity_id: EntityId,
+    approvers: Option<Vec<UserPk>>,
+}
+
+#[derive(Debug, Deserialize, Eq, PartialEq, Serialize, Clone)]
+#[serde(rename_all = "camelCase")]
+pub struct ApprovalRequirementDefinitionRemovedPayload {
+    approval_requirement_definition_id: ApprovalRequirementDefinitionId,
+}
+
+#[derive(Debug, Deserialize, Eq, PartialEq, Serialize, Clone)]
+#[serde(rename_all = "camelCase")]
+pub struct IndividualApproverPayload {
+    approval_requirement_definition_id: ApprovalRequirementDefinitionId,
+    user_id: UserPk,
+}
+
+impl WsEvent {
+    pub async fn requirement_created(
+        ctx: &DalContext,
+        entity_id: EntityId,
+        approvers: Option<Vec<UserPk>>,
+    ) -> WsEventResult<Self> {
+        WsEvent::new(
+            ctx,
+            WsPayload::ApprovalRequirementDefinitionCreated(
+                ApprovalRequirementDefinitionCreatedPayload {
+                    entity_id,
+                    approvers,
+                },
+            ),
+        )
+        .await
+    }
+
+    pub async fn requirement_removed(
+        ctx: &DalContext,
+        approval_requirement_definition_id: ApprovalRequirementDefinitionId,
+    ) -> WsEventResult<Self> {
+        WsEvent::new(
+            ctx,
+            WsPayload::ApprovalRequirementDefinitionRemoved(
+                ApprovalRequirementDefinitionRemovedPayload {
+                    approval_requirement_definition_id,
+                },
+            ),
+        )
+        .await
+    }
+
+    pub async fn add_individual_approver_to_requirement(
+        ctx: &DalContext,
+        approval_requirement_definition_id: ApprovalRequirementDefinitionId,
+        user_id: UserPk,
+    ) -> WsEventResult<Self> {
+        WsEvent::new(
+            ctx,
+            WsPayload::ApprovalRequirementAddIndividualApprover(IndividualApproverPayload {
+                approval_requirement_definition_id,
+                user_id,
+            }),
+        )
+        .await
+    }
+
+    pub async fn remove_individual_approver_from_requirement(
+        ctx: &DalContext,
+        approval_requirement_definition_id: ApprovalRequirementDefinitionId,
+        user_id: UserPk,
+    ) -> WsEventResult<Self> {
+        WsEvent::new(
+            ctx,
+            WsPayload::ApprovalRequirementRemoveIndividualApprover(IndividualApproverPayload {
+                approval_requirement_definition_id,
+                user_id,
+            }),
+        )
+        .await
+    }
+}
diff --git a/lib/dal/src/workspace_snapshot/graph/traits/approval_requirement.rs b/lib/dal/src/workspace_snapshot/graph/traits/approval_requirement.rs
index 95c63c10b8..b35821493d 100644
--- a/lib/dal/src/workspace_snapshot/graph/traits/approval_requirement.rs
+++ b/lib/dal/src/workspace_snapshot/graph/traits/approval_requirement.rs
@@ -45,4 +45,9 @@ pub trait ApprovalRequirementExt {
         Vec<ApprovalRequirementsBag>,
         HashMap<EntityId, MerkleTreeHash>,
     )>;
+
+    fn approval_requirement_definitions_for_entity_id_opt(
+        &self,
+        entity_id: EntityId,
+    ) -> WorkspaceSnapshotGraphResult<Option<Vec<ApprovalRequirementDefinitionId>>>;
 }
diff --git a/lib/dal/src/workspace_snapshot/graph/v4/approval_requirement.rs b/lib/dal/src/workspace_snapshot/graph/v4/approval_requirement.rs
index 8a45a16251..0aace239ed 100644
--- a/lib/dal/src/workspace_snapshot/graph/v4/approval_requirement.rs
+++ b/lib/dal/src/workspace_snapshot/graph/v4/approval_requirement.rs
@@ -2,7 +2,7 @@ use std::collections::{HashMap, HashSet};
 
 use petgraph::Direction;
 use si_events::{merkle_tree_hash::MerkleTreeHash, workspace_snapshot::EntityKind};
-use si_id::{EntityId, WorkspacePk};
+use si_id::{ApprovalRequirementDefinitionId, EntityId, WorkspacePk};
 
 use crate::{
     workspace_snapshot::{
@@ -108,6 +108,30 @@ impl ApprovalRequirementExt for WorkspaceSnapshotGraphV4 {
 
         Ok((requirements, ids_with_hashes_for_deleted_nodes))
     }
+
+    fn approval_requirement_definitions_for_entity_id_opt(
+        &self,
+        entity_id: EntityId,
+    ) -> WorkspaceSnapshotGraphResult<Option<Vec<ApprovalRequirementDefinitionId>>> {
+        let mut explicit_approval_requirement_definition_ids = Vec::new();
+        if let Some(entity_node_index) = self.get_node_index_by_id_opt(entity_id) {
+            for (_, _, requirement_node_index) in self.edges_directed_for_edge_weight_kind(
+                entity_node_index,
+                Direction::Outgoing,
+                EdgeWeightKindDiscriminants::ApprovalRequirementDefinition,
+            ) {
+                let requirement_node_weight = self
+                    .get_node_weight(requirement_node_index)?
+                    .get_approval_requirement_definition_node_weight()?;
+                explicit_approval_requirement_definition_ids
+                    .push(requirement_node_weight.id().into());
+            }
+        } else {
+            return Ok(None);
+        }
+
+        Ok(Some(explicit_approval_requirement_definition_ids))
+    }
 }
 
 fn new_virtual_requirement_rule(
diff --git a/lib/dal/src/workspace_snapshot/traits/approval_requirement.rs b/lib/dal/src/workspace_snapshot/traits/approval_requirement.rs
index 3b3a974adb..eadb01c270 100644
--- a/lib/dal/src/workspace_snapshot/traits/approval_requirement.rs
+++ b/lib/dal/src/workspace_snapshot/traits/approval_requirement.rs
@@ -8,7 +8,9 @@ use si_events::{merkle_tree_hash::MerkleTreeHash, ContentHash};
 use si_id::{ulid::Ulid, ApprovalRequirementDefinitionId, EntityId, UserPk};
 
 use crate::{
-    approval_requirement::{ApprovalRequirement, ApprovalRequirementExplicit},
+    approval_requirement::{
+        ApprovalRequirement, ApprovalRequirementDefinition, ApprovalRequirementExplicit,
+    },
     layer_db_types::{
         ApprovalRequirementDefinitionContent, ApprovalRequirementDefinitionContentV1,
     },
@@ -61,6 +63,12 @@ pub trait ApprovalRequirementExt {
         ctx: &DalContext,
         changes: &[Change],
     ) -> WorkspaceSnapshotResult<(Vec<ApprovalRequirement>, HashMap<EntityId, MerkleTreeHash>)>;
+
+    async fn approval_requirement_definitions_for_entity_id_opt(
+        &self,
+        ctx: &DalContext,
+        entity_id: EntityId,
+    ) -> WorkspaceSnapshotResult<Option<Vec<ApprovalRequirementDefinition>>>;
 }
 
 #[async_trait]
@@ -257,4 +265,45 @@ impl ApprovalRequirementExt for WorkspaceSnapshot {
 
         Ok((results, ids_with_hashes_for_deleted_nodes))
     }
+
+    async fn approval_requirement_definitions_for_entity_id_opt(
+        &self,
+        ctx: &DalContext,
+        entity_id: EntityId,
+    ) -> WorkspaceSnapshotResult<Option<Vec<ApprovalRequirementDefinition>>> {
+        let Some(approval_requirement_definition_ids) = self
+            .working_copy()
+            .await
+            .approval_requirement_definitions_for_entity_id_opt(entity_id)?
+        else {
+            return Ok(None);
+        };
+
+        let mut results = Vec::new();
+        for approval_requirement_definition_id in approval_requirement_definition_ids {
+            let definition_node_weight = self
+                .working_copy()
+                .await
+                .get_node_weight_by_id(approval_requirement_definition_id)?
+                .get_approval_requirement_definition_node_weight()?;
+            let Some(ApprovalRequirementDefinitionContent::V1(definition_content)) = ctx
+                .layer_db()
+                .cas()
+                .try_read_as(&definition_node_weight.content_hash())
+                .await?
+            else {
+                return Err(WorkspaceSnapshotError::MissingContentFromStore(
+                    definition_node_weight.id(),
+                ));
+            };
+
+            results.push(ApprovalRequirementDefinition {
+                id: definition_node_weight.id().into(),
+                required_count: definition_content.minimum,
+                approvers: definition_content.approvers,
+            });
+        }
+
+        Ok(Some(results))
+    }
 }
diff --git a/lib/dal/src/ws_event.rs b/lib/dal/src/ws_event.rs
index 36112d0100..a670b34836 100644
--- a/lib/dal/src/ws_event.rs
+++ b/lib/dal/src/ws_event.rs
@@ -8,6 +8,10 @@ use si_frontend_types as frontend_types;
 use thiserror::Error;
 use ulid::Ulid;
 
+use crate::approval_requirement::{
+    ApprovalRequirementDefinitionCreatedPayload, ApprovalRequirementDefinitionRemovedPayload,
+    IndividualApproverPayload,
+};
 use crate::audit_logging::AuditLogsPublishedPayload;
 use crate::change_set::event::{
     ChangeSetActorPayload, ChangeSetAppliedPayload, ChangeSetMergeVotePayload,
@@ -80,6 +84,10 @@ pub type WsEventResult<T> = Result<T, WsEventError>;
 #[allow(clippy::large_enum_variant)]
 pub enum WsPayload {
     ActionsListUpdated(ChangeSetId),
+    ApprovalRequirementAddIndividualApprover(IndividualApproverPayload),
+    ApprovalRequirementDefinitionCreated(ApprovalRequirementDefinitionCreatedPayload),
+    ApprovalRequirementDefinitionRemoved(ApprovalRequirementDefinitionRemovedPayload),
+    ApprovalRequirementRemoveIndividualApprover(IndividualApproverPayload),
     AsyncError(ErrorPayload),
     AsyncFinish(FinishPayload),
     AuditLogsPublished(AuditLogsPublishedPayload),
diff --git a/lib/sdf-server/src/service/v2/approval_requirement_definition.rs b/lib/sdf-server/src/service/v2/approval_requirement_definition.rs
index 34e67871b9..076b9e94c0 100644
--- a/lib/sdf-server/src/service/v2/approval_requirement_definition.rs
+++ b/lib/sdf-server/src/service/v2/approval_requirement_definition.rs
@@ -1,13 +1,15 @@
 use axum::{
     response::{IntoResponse, Response},
-    routing::{delete, put},
+    routing::{delete, get, put},
     Router,
 };
+use dal::{WorkspaceSnapshotError, WsEventError};
 use thiserror::Error;
 
 use crate::{service::ApiError, AppState};
 
 mod add_individual_approver;
+mod list;
 mod new;
 mod remove;
 mod remove_individual_approver;
@@ -21,6 +23,16 @@ pub enum ApprovalRequirementDefinitionError {
     DalChangeSet(#[from] dal::ChangeSetError),
     #[error("dal transactions error: {0}")]
     DalTransactions(#[from] dal::TransactionsError),
+    #[error("SpiceDb Error: {0}")]
+    SpiceDb(#[from] si_data_spicedb::Error),
+    #[error("SpiceDb client not found")]
+    SpiceDbClientNotFound,
+    #[error("Ulid Decode Error: {0}")]
+    UlidDecode(#[from] ulid::DecodeError),
+    #[error("Workspace Snapshot Error: {0}")]
+    WorkspaceSnapshot(#[from] WorkspaceSnapshotError),
+    #[error("WsEvent Error: {0}")]
+    WsEvent(#[from] WsEventError),
 }
 
 impl IntoResponse for ApprovalRequirementDefinitionError {
@@ -39,6 +51,7 @@ impl IntoResponse for ApprovalRequirementDefinitionError {
 pub fn v2_routes() -> Router<AppState> {
     Router::new()
         .route("/", put(new::new))
+        .route("/entity/:entity-id", get(list::list_for_entity))
         .route("/:id", delete(remove::remove))
         .route(
             "/:id/individual-approver/:user-id",
diff --git a/lib/sdf-server/src/service/v2/approval_requirement_definition/add_individual_approver.rs b/lib/sdf-server/src/service/v2/approval_requirement_definition/add_individual_approver.rs
index 90e400b77d..5d8e7f4c8c 100644
--- a/lib/sdf-server/src/service/v2/approval_requirement_definition/add_individual_approver.rs
+++ b/lib/sdf-server/src/service/v2/approval_requirement_definition/add_individual_approver.rs
@@ -1,5 +1,7 @@
 use axum::extract::Path;
-use dal::{approval_requirement::ApprovalRequirement, ChangeSet, ChangeSetId, UserPk, WorkspacePk};
+use dal::{
+    approval_requirement::ApprovalRequirement, ChangeSet, ChangeSetId, UserPk, WorkspacePk, WsEvent,
+};
 use si_id::ApprovalRequirementDefinitionId;
 
 use crate::{
@@ -32,6 +34,15 @@ pub async fn add_individual_approver(
     )
     .await?;
 
+    WsEvent::add_individual_approver_to_requirement(
+        &ctx,
+        approval_requirement_definition_id,
+        user_id,
+    )
+    .await?
+    .publish_on_commit(&ctx)
+    .await?;
+
     ctx.commit().await?;
 
     Ok(ForceChangeSetResponse::empty(force_change_set_id))
diff --git a/lib/sdf-server/src/service/v2/approval_requirement_definition/list.rs b/lib/sdf-server/src/service/v2/approval_requirement_definition/list.rs
new file mode 100644
index 0000000000..1e0eb08855
--- /dev/null
+++ b/lib/sdf-server/src/service/v2/approval_requirement_definition/list.rs
@@ -0,0 +1,87 @@
+use std::{collections::HashMap, str::FromStr};
+
+use axum::{
+    extract::{Path, State},
+    Json,
+};
+use dal::{
+    approval_requirement::{
+        ApprovalRequirementApprover,
+        ApprovalRequirementDefinition as DalApprovalRequirementDefinition,
+    },
+    workspace_snapshot::EntityKindExt,
+    ChangeSetId, UserPk, WorkspacePk,
+};
+use si_frontend_types::ApprovalRequirementDefinition;
+use si_id::EntityId;
+
+use crate::{extract::HandlerContext, service::v2::AccessBuilder, AppState};
+
+use super::ApprovalRequirementDefinitionError;
+
+pub async fn list_for_entity(
+    HandlerContext(builder): HandlerContext,
+    AccessBuilder(access_builder): AccessBuilder,
+    Path((_workspace_pk, change_set_id, entity_id)): Path<(WorkspacePk, ChangeSetId, EntityId)>,
+    State(mut state): State<AppState>,
+) -> Result<Json<Vec<ApprovalRequirementDefinition>>, ApprovalRequirementDefinitionError> {
+    let ctx = builder
+        .build(access_builder.build(change_set_id.into()))
+        .await?;
+
+    let entity_kind = ctx
+        .workspace_snapshot()?
+        .get_entity_kind_for_id(entity_id)
+        .await?;
+
+    let spicedb_client = state
+        .spicedb_client()
+        .ok_or(ApprovalRequirementDefinitionError::SpiceDbClientNotFound)?;
+
+    let mut results = Vec::new();
+    for definition in DalApprovalRequirementDefinition::list_for_entity_id(&ctx, entity_id).await? {
+        let mut approver_groups = HashMap::new();
+        let mut approver_individuals = Vec::new();
+        for approver in definition.approvers {
+            let permission_lookup = match approver {
+                ApprovalRequirementApprover::PermissionLookup(
+                    approval_requirement_permission_lookup,
+                ) => approval_requirement_permission_lookup,
+                ApprovalRequirementApprover::User(user_pk) => {
+                    approver_individuals.push(user_pk);
+                    continue;
+                }
+            };
+            let permission_lookup_key = format!(
+                "{}#{}#{}",
+                permission_lookup.object_type,
+                permission_lookup.object_id,
+                permission_lookup.permission,
+            );
+            let raw_member_ids = spicedb_client
+                .lookup_subjects(
+                    permission_lookup.object_type.to_owned(),
+                    permission_lookup.object_id.to_owned(),
+                    permission_lookup.permission.to_owned(),
+                    "user".to_owned(),
+                )
+                .await?;
+            let mut member_ids = Vec::with_capacity(raw_member_ids.len());
+            for raw_member_id in raw_member_ids {
+                member_ids.push(UserPk::from_str(raw_member_id.as_str())?);
+            }
+            member_ids.sort();
+            approver_groups.insert(permission_lookup_key, member_ids);
+        }
+        results.push(ApprovalRequirementDefinition {
+            id: definition.id,
+            entity_id,
+            entity_kind,
+            required_count: definition.required_count,
+            approver_groups,
+            approver_individuals,
+        });
+    }
+
+    Ok(Json(results))
+}
diff --git a/lib/sdf-server/src/service/v2/approval_requirement_definition/new.rs b/lib/sdf-server/src/service/v2/approval_requirement_definition/new.rs
index 97feb6cbdf..bedac1362c 100644
--- a/lib/sdf-server/src/service/v2/approval_requirement_definition/new.rs
+++ b/lib/sdf-server/src/service/v2/approval_requirement_definition/new.rs
@@ -1,7 +1,15 @@
 use std::collections::HashSet;
 
 use axum::{extract::Path, Json};
-use dal::{approval_requirement::ApprovalRequirement, ChangeSet, ChangeSetId, WorkspacePk};
+use dal::{
+    approval_requirement::{ApprovalRequirement, ApprovalRequirementApprover},
+    // workspace_snapshot::graph::traits::approval_requirement::ApprovalRequirementPermissionLookup,
+    ChangeSet,
+    ChangeSetId,
+    UserPk,
+    WorkspacePk,
+    WsEvent,
+};
 use serde::Deserialize;
 use si_id::EntityId;
 
@@ -16,6 +24,8 @@ use super::ApprovalRequirementDefinitionError;
 #[serde(rename_all = "camelCase")]
 pub struct Request {
     entity_id: EntityId,
+    // permission_lookups: Option<Vec<ApprovalRequirementPermissionLookup>>, // TODO(wendy) - this is not being used yet
+    users: Option<Vec<UserPk>>,
 }
 
 pub async fn new(
@@ -29,15 +39,26 @@ pub async fn new(
         .await?;
     let force_change_set_id = ChangeSet::force_new(&mut ctx).await?;
 
+    let mut approvers = HashSet::new();
+
+    if let Some(users) = request.users.to_owned() {
+        approvers.extend(users.into_iter().map(ApprovalRequirementApprover::User));
+    }
+
     // TODO(nick): add audit logs, posthog tracking and WsEvent(s).
     ApprovalRequirement::new_definition(
         &ctx,
         request.entity_id,
-        1,              // TODO(nick): allow users to change the minimum approvers count
-        HashSet::new(), // TODO(nick): allow users to send in an initial set of approvers
+        1, // TODO(nick): allow users to change the minimum approvers count
+        approvers,
     )
     .await?;
 
+    WsEvent::requirement_created(&ctx, request.entity_id, request.users)
+        .await?
+        .publish_on_commit(&ctx)
+        .await?;
+
     ctx.commit().await?;
 
     Ok(ForceChangeSetResponse::empty(force_change_set_id))
diff --git a/lib/sdf-server/src/service/v2/approval_requirement_definition/remove.rs b/lib/sdf-server/src/service/v2/approval_requirement_definition/remove.rs
index 175e36de88..4c5cd5fc3d 100644
--- a/lib/sdf-server/src/service/v2/approval_requirement_definition/remove.rs
+++ b/lib/sdf-server/src/service/v2/approval_requirement_definition/remove.rs
@@ -1,5 +1,7 @@
 use axum::extract::Path;
-use dal::{approval_requirement::ApprovalRequirement, ChangeSet, ChangeSetId, WorkspacePk};
+use dal::{
+    approval_requirement::ApprovalRequirement, ChangeSet, ChangeSetId, WorkspacePk, WsEvent,
+};
 use si_id::ApprovalRequirementDefinitionId;
 
 use crate::{
@@ -26,6 +28,11 @@ pub async fn remove(
     // TODO(nick): add audit logs, posthog tracking and WsEvent(s).
     ApprovalRequirement::remove_definition(&ctx, approval_requirement_definition_id).await?;
 
+    WsEvent::requirement_removed(&ctx, approval_requirement_definition_id)
+        .await?
+        .publish_on_commit(&ctx)
+        .await?;
+
     ctx.commit().await?;
 
     Ok(ForceChangeSetResponse::empty(force_change_set_id))
diff --git a/lib/sdf-server/src/service/v2/approval_requirement_definition/remove_individual_approver.rs b/lib/sdf-server/src/service/v2/approval_requirement_definition/remove_individual_approver.rs
index f65e54eb89..dcda97bb30 100644
--- a/lib/sdf-server/src/service/v2/approval_requirement_definition/remove_individual_approver.rs
+++ b/lib/sdf-server/src/service/v2/approval_requirement_definition/remove_individual_approver.rs
@@ -1,5 +1,7 @@
 use axum::extract::Path;
-use dal::{approval_requirement::ApprovalRequirement, ChangeSet, ChangeSetId, UserPk, WorkspacePk};
+use dal::{
+    approval_requirement::ApprovalRequirement, ChangeSet, ChangeSetId, UserPk, WorkspacePk, WsEvent,
+};
 use si_id::ApprovalRequirementDefinitionId;
 
 use crate::{
@@ -32,6 +34,15 @@ pub async fn remove_individual_approver(
     )
     .await?;
 
+    WsEvent::remove_individual_approver_from_requirement(
+        &ctx,
+        approval_requirement_definition_id,
+        user_id,
+    )
+    .await?
+    .publish_on_commit(&ctx)
+    .await?;
+
     ctx.commit().await?;
 
     Ok(ForceChangeSetResponse::empty(force_change_set_id))
diff --git a/lib/sdf-server/tests/service_tests/change_set_approval.rs b/lib/sdf-server/tests/service_tests/change_set_approval.rs
index 4c524b5468..a33b8c14d4 100644
--- a/lib/sdf-server/tests/service_tests/change_set_approval.rs
+++ b/lib/sdf-server/tests/service_tests/change_set_approval.rs
@@ -1,5 +1,6 @@
 use std::collections::{HashMap, HashSet};
 
+use dal::approval_requirement::ApprovalRequirementDefinition;
 use dal::{
     approval_requirement::{ApprovalRequirement, ApprovalRequirementApprover},
     change_set::approval::ChangeSetApproval,
@@ -1139,3 +1140,54 @@ async fn one_component_in_two_views(
 
     Ok(())
 }
+
+#[sdf_test]
+async fn list_approval_requirement_definitions_for_entity(
+    ctx: &mut DalContext,
+    spicedb_client: SpiceDbClient,
+) -> Result<()> {
+    let mut spicedb_client = spicedb_client;
+
+    // FIXME(nick,jacob): see the comment attached to this function.
+    write_schema(&mut spicedb_client).await?;
+
+    let user_id = match ctx.history_actor() {
+        HistoryActor::SystemInit => return Err(eyre!("invalid user")),
+        HistoryActor::User(user_id) => *user_id,
+    };
+
+    let second_view = View::new(ctx, "Second view").await?;
+    ChangeSetTestHelpers::commit_and_update_snapshot_to_visibility(ctx).await?;
+
+    let initial_definitions =
+        ApprovalRequirementDefinition::list_for_entity_id(ctx, second_view.id()).await?;
+    assert!(initial_definitions.is_empty());
+
+    let requirement_definition_id = ApprovalRequirement::new_definition(
+        ctx,
+        second_view.id(),
+        1,
+        [ApprovalRequirementApprover::User(user_id)]
+            .iter()
+            .cloned()
+            .collect(),
+    )
+    .await?;
+    ChangeSetTestHelpers::commit_and_update_snapshot_to_visibility(ctx).await?;
+
+    let explicit_definitions =
+        ApprovalRequirementDefinition::list_for_entity_id(ctx, second_view.id()).await?;
+    assert_eq!(
+        vec![ApprovalRequirementDefinition {
+            id: requirement_definition_id,
+            required_count: 1,
+            approvers: [ApprovalRequirementApprover::User(user_id)]
+                .iter()
+                .cloned()
+                .collect()
+        }],
+        explicit_definitions,
+    );
+
+    Ok(())
+}
diff --git a/lib/si-frontend-types-rs/src/approval_requirement.rs b/lib/si-frontend-types-rs/src/approval_requirement.rs
new file mode 100644
index 0000000000..325ce6aaaa
--- /dev/null
+++ b/lib/si-frontend-types-rs/src/approval_requirement.rs
@@ -0,0 +1,22 @@
+use std::collections::HashMap;
+
+use serde::{Deserialize, Serialize};
+use si_events::workspace_snapshot::EntityKind;
+use si_id::{ApprovalRequirementDefinitionId, EntityId, UserPk};
+
+#[derive(Debug, Clone, Deserialize, Serialize, PartialEq, Eq)]
+#[serde(rename_all = "camelCase")]
+pub struct ApprovalRequirementDefinition {
+    // What is the ID of this ApprovalRequirementDefinition?
+    pub id: ApprovalRequirementDefinitionId,
+    // What is the ID of the entity that is requiring approvals?
+    pub entity_id: EntityId,
+    // What is the kind of the entity corresponding to the ID?
+    pub entity_kind: EntityKind,
+    // What is the minimum number needed?
+    pub required_count: usize,
+    // What groups can approve this?
+    pub approver_groups: HashMap<String, Vec<UserPk>>,
+    // What individuals can approve this?
+    pub approver_individuals: Vec<UserPk>,
+}
diff --git a/lib/si-frontend-types-rs/src/lib.rs b/lib/si-frontend-types-rs/src/lib.rs
index 8b9eede162..ac70f60a85 100644
--- a/lib/si-frontend-types-rs/src/lib.rs
+++ b/lib/si-frontend-types-rs/src/lib.rs
@@ -1,3 +1,4 @@
+mod approval_requirement;
 mod audit_log;
 mod change_set;
 mod component;
@@ -8,25 +9,30 @@ mod module;
 mod schema_variant;
 mod workspace;
 
-pub use crate::audit_log::AuditLog;
-pub use crate::change_set::{ChangeSet, CreateChangeSetRequest, CreateChangeSetResponse};
-pub use crate::change_set::{ChangeSetApproval, ChangeSetApprovalRequirement, ChangeSetApprovals};
-pub use crate::component::{
-    ChangeStatus, ConnectionAnnotation, DiagramComponentView, DiagramSocket,
-    DiagramSocketDirection, DiagramSocketNodeSide, GeometryAndView, GridPoint, RawGeometry, Size2D,
-    StringGeometry,
+pub use crate::{
+    approval_requirement::ApprovalRequirementDefinition,
+    audit_log::AuditLog,
+    change_set::{
+        ChangeSet, ChangeSetApproval, ChangeSetApprovalRequirement, ChangeSetApprovals,
+        CreateChangeSetRequest, CreateChangeSetResponse,
+    },
+    component::{
+        ChangeStatus, ConnectionAnnotation, DiagramComponentView, DiagramSocket,
+        DiagramSocketDirection, DiagramSocketNodeSide, GeometryAndView, GridPoint, RawGeometry,
+        Size2D, StringGeometry,
+    },
+    conflict::ConflictWithHead,
+    func::{
+        AttributeArgumentBinding, FuncArgument, FuncArgumentKind, FuncBinding, FuncBindings,
+        FuncCode, FuncKind, FuncSummary, LeafInputLocation,
+    },
+    module::{
+        BuiltinModules, LatestModule, ModuleContributeRequest, ModuleDetails, ModuleSummary,
+        SyncedModules,
+    },
+    schema_variant::{
+        ComponentType, InputSocket, ListVariantsResponse, OutputSocket, Prop, PropKind,
+        SchemaVariant, UninstalledVariant,
+    },
+    workspace::WorkspaceMetadata,
 };
-pub use crate::conflict::ConflictWithHead;
-pub use crate::func::{
-    AttributeArgumentBinding, FuncArgument, FuncArgumentKind, FuncBinding, FuncBindings, FuncCode,
-    FuncKind, FuncSummary, LeafInputLocation,
-};
-pub use crate::module::{
-    BuiltinModules, LatestModule, ModuleContributeRequest, ModuleDetails, ModuleSummary,
-    SyncedModules,
-};
-pub use crate::schema_variant::{
-    ComponentType, InputSocket, ListVariantsResponse, OutputSocket, Prop, PropKind, SchemaVariant,
-    UninstalledVariant,
-};
-pub use crate::workspace::WorkspaceMetadata;
diff --git a/lib/vue-lib/src/design-system/menus/DropdownMenuButton.vue b/lib/vue-lib/src/design-system/menus/DropdownMenuButton.vue
index 457399241a..5a2be7e899 100644
--- a/lib/vue-lib/src/design-system/menus/DropdownMenuButton.vue
+++ b/lib/vue-lib/src/design-system/menus/DropdownMenuButton.vue
@@ -55,8 +55,8 @@
       ref="dropdownMenuRef"
       :anchorTo="{ $el: buttonRef }"
       overlapAnchorOnAnchorTo
-      :matchWidthToAnchor="variant === 'standard'"
-      :minWidthToAnchor="variant === 'navbar'"
+      :matchWidthToAnchor="variant === 'standard' && !minWidthToAnchor"
+      :minWidthToAnchor="variant === 'navbar' || minWidthToAnchor"
       :overlapAnchorOffset="4"
       :search="search"
       :searchFilters="searchFilters"
@@ -111,6 +111,7 @@ const props = defineProps({
     type: String as PropType<DropdownMenuButtonVariant>,
     default: "standard",
   },
+  minWidthToAnchor: { type: Boolean },
 });
 
 const arrayOptionsFromProps = computed((): OptionsAsArray => {