diff --git a/app/web/src/api/sdf/dal/change_set.ts b/app/web/src/api/sdf/dal/change_set.ts
index 529d988057..4990cea70e 100644
--- a/app/web/src/api/sdf/dal/change_set.ts
+++ b/app/web/src/api/sdf/dal/change_set.ts
@@ -1,12 +1,13 @@
 // TODO: remove
 import { ActionInstance } from "@/store/actions.store";
+import { UserId } from "@/store/auth.store";
 
 export enum ChangeSetStatus {
   Open = "Open",
-  Closed = "Closed",
-  Abandoned = "Abandoned",
   Applied = "Applied",
   Failed = "Failed",
+  Closed = "Closed",
+  Abandoned = "Abandoned",
 }
 
 export type ChangeSetId = string;
@@ -16,6 +17,8 @@ export interface ChangeSet {
   name: string;
   actions: ActionInstance[];
   status: ChangeSetStatus;
+  appliedByUserId?: UserId;
+  appliedAt?: IsoDateString;
 }
 
 export type ChangeStatus = "added" | "deleted" | "modified" | "unmodified";
diff --git a/app/web/src/components/ApplyChangeSetButton.vue b/app/web/src/components/ApplyChangeSetButton.vue
index ba41475ade..838a87a971 100644
--- a/app/web/src/components/ApplyChangeSetButton.vue
+++ b/app/web/src/components/ApplyChangeSetButton.vue
@@ -42,6 +42,10 @@
         @click="applyChangeSet"
       />
     </Modal>
+    <ChangeSetApplyVotingPopover
+      ref="changeSetApplyVotingPopoverRef"
+      appliedByYou
+    />
   </VButton>
 </template>
 
@@ -55,10 +59,14 @@ import ActionSprite from "@/components/ActionSprite.vue";
 import { useChangeSetsStore } from "@/store/change_sets.store";
 import { useStatusStore } from "@/store/status.store";
 import { useActionsStore } from "@/store/actions.store";
+import ChangeSetApplyVotingPopover from "./layout/navbar/ChangeSetApplyVotingPopover.vue";
 
 const createModalRef = ref<InstanceType<typeof Modal> | null>(null);
+const changeSetApplyVotingPopoverRef = ref();
 
 const maybeOpenModal = () => {
+  // TODO(Wendy) - voting Popover needs to be put into this flow
+
   if (!changeSetsStore.selectedChangeSet?.actions?.length) {
     applyChangeSet();
   } else {
@@ -66,6 +74,17 @@ const maybeOpenModal = () => {
   }
 };
 
+// TODO(Wendy) - implement the code that invokes this Popover when appropriate
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const openVotingPopover = () => {
+  const applyButtonRect = applyButtonRef.value.$el.getBoundingClientRect();
+
+  changeSetApplyVotingPopoverRef.value.openAt({
+    x: applyButtonRect.x + applyButtonRect.width / 2 - 16,
+    y: applyButtonRect.bottom,
+  });
+};
+
 const changeSetsStore = useChangeSetsStore();
 const actionsStore = useActionsStore();
 const router = useRouter();
diff --git a/app/web/src/components/Popover.vue b/app/web/src/components/Popover.vue
index 529d75c7ed..bc7b520f19 100644
--- a/app/web/src/components/Popover.vue
+++ b/app/web/src/components/Popover.vue
@@ -3,7 +3,13 @@
     <div
       ref="internalRef"
       :style="computedStyle"
-      :class="clsx('absolute ml-sm', onTopOfEverything ? 'z-100' : 'z-50')"
+      :class="
+        clsx(
+          'absolute ml-sm',
+          onTopOfEverything ? 'z-100' : 'z-50',
+          isRepositioning && 'invisible',
+        )
+      "
     >
       <slot />
     </div>
@@ -42,6 +48,9 @@ const props = defineProps({
 
   // go on top of all elements, including the navbar and statusbar
   onTopOfEverything: { type: Boolean },
+
+  // act like a Modal that cannot be closed
+  noExit: { type: Boolean },
 });
 
 const internalRef = ref<HTMLElement>();
@@ -52,8 +61,11 @@ const anchorPos = ref<{ x: number; y: number }>();
 
 function onWindowMousedown(e: MouseEvent) {
   requestAnimationFrame(() => {
-    if (e.target instanceof Element && internalRef.value?.contains(e.target)) {
-      return; // Don't close on click inside popover
+    if (
+      (e.target instanceof Element && internalRef.value?.contains(e.target)) ||
+      props.noExit
+    ) {
+      return; // Don't close on click inside popover or if noExit is set
     }
 
     close();
@@ -62,6 +74,7 @@ function onWindowMousedown(e: MouseEvent) {
 
 function onKeyboardEvent(e: KeyboardEvent) {
   if (e.key === "Escape") {
+    if (props.noExit) return;
     close();
   }
 }
@@ -107,6 +120,15 @@ function open(e?: MouseEvent, anchorToMouse?: boolean) {
   nextFrame(finishOpening);
 }
 
+function openAt(pos: { x: number; y: number }) {
+  anchorPos.value = pos;
+
+  isRepositioning.value = true;
+  isOpen.value = true;
+
+  nextFrame(finishOpening);
+}
+
 function finishOpening() {
   startListening();
   readjustPosition();
@@ -198,5 +220,5 @@ onUnmounted(() => {
   window.removeEventListener("resize", closeOnResize);
 });
 
-defineExpose({ open, close, isOpen });
+defineExpose({ open, openAt, close, isOpen });
 </script>
diff --git a/app/web/src/components/layout/navbar/ChangeSetAppliedPopover.vue b/app/web/src/components/layout/navbar/ChangeSetAppliedPopover.vue
new file mode 100644
index 0000000000..88067ab716
--- /dev/null
+++ b/app/web/src/components/layout/navbar/ChangeSetAppliedPopover.vue
@@ -0,0 +1,68 @@
+<template>
+  <Popover ref="internalRef" popDown onTopOfEverything :anchorTo="anchorTo">
+    <div
+      class="absolute top-0 left-[50%] translate-x-[-50%] translate-y-[-100%] w-0 h-0 border-transparent border-b-white dark:border-b-neutral-700 border-[16px] border-b-[12px]"
+    />
+    <div
+      class="bg-white dark:bg-neutral-700 rounded-lg flex flex-col items-center w-96 max-h-[90vh] shadow-md overflow-hidden pb-xs"
+    >
+      <div class="px-sm pt-sm pb-xs w-full">
+        The change set you were in was merged.
+      </div>
+
+      <!-- TODO(Wendy) - Eventually we should display who merged it! -->
+      <!-- <div v-if="applyUser" class="pr-xs">
+        <UserCard :user="applyUser" hideChangesetInfo />
+      </div> -->
+      <div class="px-sm pb-sm pt-xs w-full">
+        You are now on Head. You can continue your work by creating a new change
+        set or joining another existing change set.
+      </div>
+      <VButton
+        label="Dismiss"
+        variant="ghost"
+        size="sm"
+        @click="internalRef.close"
+      />
+    </div>
+  </Popover>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from "vue";
+import { VButton } from "@si/vue-lib/design-system";
+import Popover from "@/components/Popover.vue";
+import { useChangeSetsStore } from "@/store/change_sets.store";
+// import UserCard from "./UserCard.vue";
+
+const changeSetsStore = useChangeSetsStore();
+const internalRef = ref();
+
+defineProps({
+  anchorTo: { type: Object },
+});
+
+// TODO(Wendy) - currently this comes through as an email address, should be a UserInfo or ActorView!
+// const applyUser = computed(() => {
+//   return changeSetsStore.postApplyActor;
+// });
+
+const openAt = (pos: { x: number; y: number }) => {
+  internalRef.value.openAt(pos);
+  // This Popover automatically closes after 10 seconds
+  setTimeout(close, 10000);
+};
+
+const close = () => {
+  internalRef.value.close();
+  changeSetsStore.postApplyActor = null;
+};
+
+const isOpen = computed(() => internalRef.value.isOpen);
+
+defineExpose({
+  openAt,
+  close,
+  isOpen,
+});
+</script>
diff --git a/app/web/src/components/layout/navbar/ChangeSetApplyVotingPopover.vue b/app/web/src/components/layout/navbar/ChangeSetApplyVotingPopover.vue
new file mode 100644
index 0000000000..464ee49e44
--- /dev/null
+++ b/app/web/src/components/layout/navbar/ChangeSetApplyVotingPopover.vue
@@ -0,0 +1,322 @@
+<template>
+  <Popover ref="internalRef" popDown onTopOfEverything :noExit="!cancelled">
+    <Teleport to="body">
+      <TransitionRoot
+        :show="internalRef.isOpen && !cancelled"
+        appear
+        as="template"
+      >
+        <TransitionChild
+          as="template"
+          enter="duration-300 ease-out"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="duration-200 ease-in"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div class="fixed inset-0 bg-shade-100 bg-opacity-60 z-90" />
+        </TransitionChild>
+      </TransitionRoot>
+    </Teleport>
+    <div
+      class="absolute top-0 left-[50%] translate-x-[-50%] translate-y-[-100%] w-0 h-0 border-transparent border-b-white dark:border-b-neutral-700 border-[16px] border-b-[10px]"
+    />
+    <div
+      class="bg-white dark:bg-neutral-700 rounded-lg flex flex-col w-96 max-h-[90vh] shadow-md overflow-hidden"
+    >
+      <template v-if="cancelled">
+        <div class="p-sm flex flex-col items-center gap-xs">
+          <template v-if="cancelUser">
+            <div :class="clsx('w-full', cancelUser.name === 'You' && 'pb-xs')">
+              <span :class="cancelUser.name !== 'You' && 'italic'">{{
+                cancelUser.name
+              }}</span>
+              cancelled applying this change set.
+            </div>
+
+            <div v-if="cancelUser.name !== 'You'" class="pr-xs">
+              <UserCard :user="cancelUser" />
+            </div>
+          </template>
+          <template v-else>The change set apply was cancelled.</template>
+          <VButton
+            label="Dismiss"
+            variant="ghost"
+            size="sm"
+            @click="internalRef.close"
+          />
+        </div>
+      </template>
+      <template v-else>
+        <div
+          :class="
+            clsx(
+              'p-sm flex flex-row gap-xs items-center',
+              !appliedByYou && 'border-b dark:border-neutral-500',
+            )
+          "
+        >
+          <UserIcon :user="applyUser" />
+          <div>
+            <template v-if="appliedByYou">You have</template>
+            <template v-else>
+              <span class="italic">{{ applyUser.name }}</span> has
+            </template>
+            clicked the Apply Changes button to apply all of the changes in this
+            change set to Head.<template v-if="appliedByYou">
+              There are other users online in this change set, so they will get
+              the chance to cancel your apply.
+            </template>
+          </div>
+        </div>
+        <div
+          v-if="appliedByYou"
+          class="w-full flex flex-col items-center border-b dark:border-neutral-500 pb-xs"
+        >
+          <VButton label="Skip Approval And Apply" tone="warning" size="sm" />
+        </div>
+        <div
+          v-if="!appliedByYou"
+          class="p-sm border-b dark:border-neutral-500 flex flex-row items-center gap-xs justify-between"
+        >
+          <div class="flex flex-row gap-xs items-center">
+            <UserIcon
+              :user="{
+                name: authStore.user?.name ?? '',
+                pictureUrl: authStore.user?.picture_url ?? null,
+              }"
+            />
+            <div class="flex flex-col">
+              <div>Apply this change set?</div>
+              <div class="text-xs text-neutral-400 pt-[2px]">
+                <template v-if="yourVote">
+                  <template v-if="yourVote === 'Deny'">Cancelling...</template>
+                  <template v-else>Waiting for other users to vote...</template>
+                </template>
+                <template v-else
+                  >You have {{ voteTimer }} seconds to vote.</template
+                >
+              </div>
+            </div>
+          </div>
+          <div v-if="yourVote">
+            <Icon
+              v-if="yourVote === 'Approve'"
+              name="thumbs-up"
+              size="lg"
+              class="text-success-400"
+            />
+            <Icon
+              v-if="yourVote === 'Deny'"
+              name="thumbs-down"
+              size="lg"
+              class="text-destructive-500"
+            />
+            <Icon
+              v-if="yourVote === 'Abstain'"
+              name="minus"
+              size="lg"
+              class="text-neutral-300"
+            />
+          </div>
+          <div
+            v-else
+            class="flex flex-row gap-xs items-center text-neutral-300"
+          >
+            <div
+              class="hover:text-success-400 cursor-pointer"
+              @click="voteAccept"
+            >
+              <Icon name="thumbs-up" size="lg" />
+            </div>
+            <div
+              class="hover:text-destructive-500 cursor-pointer"
+              @click="voteCancel"
+            >
+              <Icon name="thumbs-down" size="lg" />
+            </div>
+            <VButton label="Pass" variant="ghost" size="xs" @click="votePass" />
+          </div>
+        </div>
+
+        <div
+          class="text-sm italic text-center w-full text-neutral-400 border-b dark:border-neutral-500"
+        >
+          Other users in this change set
+          <template v-if="appliedByYou"
+            >have {{ voteTimer }} seconds to vote.</template
+          >
+        </div>
+        <div class="overflow-y-auto">
+          <div
+            v-for="(user, index) in votingUsers"
+            :key="index"
+            class="flex flex-row items-center overflow-hidden pr-sm justify-between"
+          >
+            <template v-if="user.vote !== 'Abstain'">
+              <div class="min-w-0">
+                <UserCard :user="user" hideChangesetInfo />
+              </div>
+              <Icon
+                v-if="user?.vote === 'Approve'"
+                name="thumbs-up"
+                size="lg"
+                class="text-success-400"
+              />
+              <Icon
+                v-else-if="user?.vote === 'Deny'"
+                name="thumbs-down"
+                size="lg"
+                class="text-destructive-500"
+              />
+            </template>
+          </div>
+        </div>
+      </template>
+    </div>
+  </Popover>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from "vue";
+import { Icon, VButton } from "@si/vue-lib/design-system";
+import * as _ from "lodash-es";
+import { TransitionChild, TransitionRoot } from "@headlessui/vue";
+import clsx from "clsx";
+import Popover from "@/components/Popover.vue";
+import { useAuthStore } from "@/store/auth.store";
+import UserCard from "./UserCard.vue";
+import UserIcon from "./UserIcon.vue";
+import { UserInfo } from "./Collaborators.vue";
+
+export type ChangeSetVote = "Approve" | "Deny" | "Abstain" | undefined;
+
+const VOTE_TIME = 30;
+const authStore = useAuthStore();
+const internalRef = ref();
+
+const props = defineProps({
+  appliedByYou: { type: Boolean },
+});
+
+// TODO(Wendy) - Mock data, should populate with users in the current changeset
+const applyUser = ref<UserInfo>({
+  name: "cool user 666",
+  color: "magenta",
+  status: "active",
+});
+
+const votingUsers = [
+  {
+    name: "test user 1",
+    color: "red",
+    status: "active",
+  },
+  {
+    name: "test user 2 has an extremely long name woah dang so long",
+    color: "green",
+    status: "active",
+    vote: "Approve" as ChangeSetVote,
+  },
+  {
+    name: "test user 3",
+    color: "blue",
+    status: "active",
+    vote: "Deny" as ChangeSetVote,
+  },
+  {
+    name: "test user 4",
+    color: "yellow",
+    status: "active",
+    vote: "Abstain" as ChangeSetVote,
+  },
+  {
+    name: "test user 5",
+    color: "cyan",
+    status: "active",
+  },
+];
+// End mock data
+
+const yourVote = ref();
+const cancelled = ref(false);
+const cancelUser = ref();
+const closeTimeout = ref();
+const voteTimer = ref();
+const voteTimerTimeout = ref();
+
+const startVoting = () => {
+  if (props.appliedByYou) {
+    applyUser.value = {
+      name: "You",
+      pictureUrl: authStore.user?.picture_url ?? null,
+    };
+  }
+  if (closeTimeout.value) clearTimeout(closeTimeout.value);
+  closeTimeout.value = undefined;
+  cancelled.value = false;
+  cancelUser.value = undefined;
+  yourVote.value = undefined;
+  voteTimer.value = VOTE_TIME;
+  voteTimerTimeout.value = setInterval(() => {
+    voteTimer.value--;
+    if (voteTimer.value < 1) {
+      clearTimeout(voteTimerTimeout.value);
+      if (yourVote.value) return;
+      yourVote.value = "Abstain";
+    }
+  }, 1000);
+};
+
+const voteAccept = () => {
+  // TODO(Wendy) - process an accept vote
+  yourVote.value = "Approve";
+};
+
+const voteCancel = () => {
+  // TODO(Wendy) - process a cancel vote, for now this just transitions the Popover
+  yourVote.value = "Deny";
+
+  // Slight delay before moving on to the cancel screen
+  setTimeout(() => {
+    cancelled.value = true;
+    cancelUser.value = {
+      name: "You",
+      pictureUrl: authStore.user?.picture_url ?? null,
+    };
+  }, 500);
+  // 10 seconds after cancelling the Popover should close
+  closeTimeout.value = setTimeout(close, 10000);
+};
+
+const votePass = () => {
+  // TODO(Wendy) - process a pass vote
+  yourVote.value = "Abstain";
+};
+
+const open = (e?: MouseEvent, anchorToMouse?: boolean) => {
+  startVoting();
+  internalRef.value.open(e, anchorToMouse);
+};
+
+const openAt = (pos: { x: number; y: number }) => {
+  startVoting();
+  internalRef.value.openAt(pos);
+};
+
+const close = () => {
+  internalRef.value.close();
+  if (closeTimeout.value) clearTimeout(closeTimeout.value);
+  closeTimeout.value = undefined;
+};
+
+const isOpen = computed(() => internalRef.value.isOpen);
+
+defineExpose({
+  open,
+  openAt,
+  close,
+  isOpen,
+});
+</script>
diff --git a/app/web/src/components/layout/navbar/ChangeSetPanel.vue b/app/web/src/components/layout/navbar/ChangeSetPanel.vue
index 16b740a515..c3b6e8f08b 100644
--- a/app/web/src/components/layout/navbar/ChangeSetPanel.vue
+++ b/app/web/src/components/layout/navbar/ChangeSetPanel.vue
@@ -5,6 +5,7 @@
 
       <div class="flex-grow flex gap-2.5">
         <VormInput
+          ref="dropdownRef"
           class="flex-grow font-bold"
           size="sm"
           type="dropdown"
@@ -83,6 +84,10 @@
         </div>
       </template>
     </Wipe>
+    <ChangeSetAppliedPopover
+      ref="changeSetAppliedRef"
+      :anchorTo="dropdownRef"
+    />
   </div>
 </template>
 
@@ -98,11 +103,15 @@ import {
   Modal,
   useValidatedInputGroup,
 } from "@si/vue-lib/design-system";
+import { storeToRefs } from "pinia";
 import { nilId } from "@/utils/nilId";
 import { useChangeSetsStore } from "@/store/change_sets.store";
 import { useFixesStore } from "@/store/fixes.store";
 import Wipe from "../../Wipe.vue";
+import ChangeSetAppliedPopover from "./ChangeSetAppliedPopover.vue";
 
+const dropdownRef = ref();
+const changeSetAppliedRef = ref();
 const wipeRef = ref<InstanceType<typeof Wipe>>();
 
 const changeSetsStore = useChangeSetsStore();
@@ -187,4 +196,21 @@ function openCreateModal() {
   createChangeSetName.value = changeSetsStore.getGeneratedChangesetName();
   createModalRef.value?.open();
 }
+
+const openChangeSetAppliedPopover = () => {
+  const dropDownRect = dropdownRef.value.inputRef.getBoundingClientRect();
+
+  changeSetAppliedRef.value.openAt({
+    x: dropDownRect.x + dropDownRect.width / 2 - 16,
+    y: dropDownRect.bottom,
+  });
+};
+
+// TODO(Wendy) - Eventually we should replace this to not be reliant on the WSEvent
+const { postApplyActor } = storeToRefs(changeSetsStore);
+watch(postApplyActor, () => {
+  if (postApplyActor.value !== null) {
+    openChangeSetAppliedPopover();
+  }
+});
 </script>
diff --git a/app/web/src/components/layout/navbar/Collaborators.vue b/app/web/src/components/layout/navbar/Collaborators.vue
index 184e270805..b6963264cf 100644
--- a/app/web/src/components/layout/navbar/Collaborators.vue
+++ b/app/web/src/components/layout/navbar/Collaborators.vue
@@ -8,6 +8,7 @@
       )
     "
   >
+    <!-- Displays all visible users, up to 6 of them -->
     <template v-if="!(showOneIcon && displayUsers.length > 1)">
       <div v-for="(user, index) in displayUsers" :key="index" class="h-8 w-0">
         <UserIcon
@@ -18,6 +19,7 @@
       </div>
     </template>
 
+    <!-- If there are 7 or more users or if the screen is small and there are multiple users, some are put into this menu -->
     <div
       v-if="
         sortedUsers.length !== 1 &&
@@ -51,6 +53,7 @@
         </div>
       </div>
     </div>
+    <!-- Overflow menu for users -->
     <Popover
       ref="moreUsersPopoverRef"
       popDown
@@ -83,6 +86,8 @@
         </div>
       </div>
     </Popover>
+
+    <ChangeSetApplyVotingPopover ref="changeSetApplyVotingPopoverRef" />
   </div>
 </template>
 
@@ -96,6 +101,7 @@ import { usePresenceStore } from "@/store/presence.store";
 import { useChangeSetsStore } from "@/store/change_sets.store";
 import UserIcon from "./UserIcon.vue";
 import UserCard from "./UserCard.vue";
+import ChangeSetApplyVotingPopover from "./ChangeSetApplyVotingPopover.vue";
 
 const presenceStore = usePresenceStore();
 const changeSetsStore = useChangeSetsStore();
@@ -112,7 +118,7 @@ const moreUsersPopoverRef = ref();
 const moreUsersButtonRef = ref();
 
 const users = computed<UserInfo[]>(() => {
-  const list = [];
+  const list = [] as UserInfo[];
   for (const user of _.values(presenceStore.usersById)) {
     list.push({
       name: user.name,
@@ -123,6 +129,19 @@ const users = computed<UserInfo[]>(() => {
     });
   }
 
+  list.push({
+    name: "test user",
+    color: "red",
+    status: "active",
+    changeset: changeSetsStore.selectedChangeSetId || undefined,
+  });
+  list.push({
+    name: "test user 2",
+    color: "green",
+    status: "active",
+    changeset: changeSetsStore.selectedChangeSetId || undefined,
+  });
+
   return list;
 });
 
@@ -257,4 +276,16 @@ const filteredUsers = computed(() => {
     );
   } else return sortedUsers.value;
 });
+
+// Code for the ChangeSetApplyVotingPopover
+// TODO(Wendy) - Currently this is triggered by clicking on a user, should be tied to Apply Changes via the store
+
+const changeSetApplyVotingPopoverRef = ref();
+
+// TODO(Wendy) - invoke this function when it's time to open the voting Popover for a particular user
+// Also probably need to have functionality to pull a user to the front of the list if they aren't visible on the bar
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const openChangeSetApplyVotingPopover = (e: MouseEvent) => {
+  changeSetApplyVotingPopoverRef.value.open(e);
+};
 </script>
diff --git a/app/web/src/components/layout/navbar/NavbarPanelRight.vue b/app/web/src/components/layout/navbar/NavbarPanelRight.vue
index 2b975e9752..6e222e9750 100644
--- a/app/web/src/components/layout/navbar/NavbarPanelRight.vue
+++ b/app/web/src/components/layout/navbar/NavbarPanelRight.vue
@@ -10,55 +10,22 @@
 
     <WorkspaceSettingsMenu v-if="featureFlagsStore.WORKSPACE_BACKUPS" />
 
-    <NavbarButton tooltipText="Profile" class="flex-none py-xs">
-      <template #default="{ open, hovered }">
-        <div class="flex-row flex text-white items-center">
-          <UserIcon
-            :user="{
-              name: authStore.user?.name ?? '',
-              pictureUrl: authStore.user?.picture_url ?? null,
-            }"
-          />
-          <SiArrow :nudge="open || hovered" class="ml-1" />
-        </div>
-      </template>
-
-      <template #dropdownContent>
-        <DropdownMenuItem
-          linkToNamedRoute="logout"
-          icon="logout"
-          label="Logout"
-        />
-        <DropdownMenuItem
-          v-if="isDevMode"
-          linkToNamedRoute="workspace-dev-dashboard"
-          icon="cat"
-          label="Dev Dashboard"
-        />
-      </template>
-    </NavbarButton>
+    <ProfileButton />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { Icon, DropdownMenuItem } from "@si/vue-lib/design-system";
-import { useAuthStore } from "@/store/auth.store";
+import { Icon } from "@si/vue-lib/design-system";
 import { useFeatureFlagsStore } from "@/store/feature_flags.store";
-import SiArrow from "@/components/SiArrow.vue";
 import SiThemeSwitcher from "./NavbarThemeSwitcher.vue";
 import NavbarButton from "./NavbarButton.vue";
 import Collaborators from "./Collaborators.vue";
 import WorkspaceSettingsMenu from "./WorkspaceSettingsMenu.vue";
-import UserIcon from "./UserIcon.vue";
+import ProfileButton from "./ProfileButton.vue";
 
 const featureFlagsStore = useFeatureFlagsStore();
 
 const copyURL = () => {
   navigator.clipboard.writeText(window.location.href);
 };
-
-// Cannot use inside the template directly.
-const isDevMode = import.meta.env.DEV;
-
-const authStore = useAuthStore();
 </script>
diff --git a/app/web/src/components/layout/navbar/ProfileButton.vue b/app/web/src/components/layout/navbar/ProfileButton.vue
new file mode 100644
index 0000000000..2c99815194
--- /dev/null
+++ b/app/web/src/components/layout/navbar/ProfileButton.vue
@@ -0,0 +1,41 @@
+<template>
+  <NavbarButton tooltipText="Profile" class="flex-none py-xs">
+    <template #default="{ open, hovered }">
+      <div class="flex-row flex text-white items-center">
+        <UserIcon
+          :user="{
+            name: authStore.user?.name ?? '',
+            pictureUrl: authStore.user?.picture_url ?? null,
+          }"
+        />
+        <SiArrow :nudge="open || hovered" class="ml-1" />
+      </div>
+    </template>
+
+    <template #dropdownContent>
+      <DropdownMenuItem
+        linkToNamedRoute="logout"
+        icon="logout"
+        label="Logout"
+      />
+      <DropdownMenuItem
+        v-if="isDevMode"
+        linkToNamedRoute="workspace-dev-dashboard"
+        icon="cat"
+        label="Dev Dashboard"
+      />
+    </template>
+  </NavbarButton>
+</template>
+
+<script lang="ts" setup>
+import { DropdownMenuItem } from "@si/vue-lib/design-system";
+import SiArrow from "@/components/SiArrow.vue";
+import { useAuthStore } from "@/store/auth.store";
+import NavbarButton from "./NavbarButton.vue";
+import UserIcon from "./UserIcon.vue";
+
+const authStore = useAuthStore();
+
+const isDevMode = import.meta.env.DEV;
+</script>
diff --git a/app/web/src/components/layout/navbar/UserCard.vue b/app/web/src/components/layout/navbar/UserCard.vue
index 17fa7bf05c..bc618a7285 100644
--- a/app/web/src/components/layout/navbar/UserCard.vue
+++ b/app/web/src/components/layout/navbar/UserCard.vue
@@ -1,14 +1,22 @@
 <template>
+  <!-- Hover styles - hover:bg-action-200 dark:hover:bg-action-500 cursor-pointer -->
   <div
-    class="flex flex-row items-center gap-xs p-xs pl-sm cursor-pointer overflow-hidden hover:bg-action-200 dark:hover:bg-action-500 flex-none"
+    class="flex flex-row items-center gap-xs p-xs pl-sm overflow-hidden flex-none"
   >
-    <UserIcon :user="user" changeSetStarSide />
+    <UserIcon
+      :user="user"
+      changeSetStarSide
+      :hideChangesetStar="hideChangesetInfo"
+    />
 
     <div class="flex flex-col min-w-0">
       <div class="w-full truncate leading-tight">
         {{ user.name }}
       </div>
-      <div class="text-xs font-bold line-clamp-3 break-words">
+      <div
+        v-if="!hideChangesetInfo"
+        class="text-xs font-bold line-clamp-3 break-words"
+      >
         {{
           user.changeset
             ? changeSetsStore.changeSetsById[user.changeset]?.name || "Head"
@@ -32,5 +40,6 @@ const changeSetsStore = useChangeSetsStore();
 
 defineProps({
   user: { type: Object as PropType<UserInfo>, required: true },
+  hideChangesetInfo: { type: Boolean },
 });
 </script>
diff --git a/app/web/src/components/layout/navbar/UserIcon.vue b/app/web/src/components/layout/navbar/UserIcon.vue
index cbed1c07e4..ed9745e10f 100644
--- a/app/web/src/components/layout/navbar/UserIcon.vue
+++ b/app/web/src/components/layout/navbar/UserIcon.vue
@@ -20,6 +20,7 @@
     />
     <div
       v-if="
+        !hideChangesetStar &&
         changeSetsStore.selectedChangeSetId &&
         changeSetsStore.selectedChangeSetId === user.changeset
       "
@@ -54,6 +55,7 @@ const props = defineProps({
   tooltip: { type: Object },
   user: { type: Object as PropType<UserInfo>, required: true },
   changeSetStarSide: { type: Boolean },
+  hideChangesetStar: { type: Boolean },
 });
 
 const color = computed(() => {
diff --git a/app/web/src/store/change_sets.store.ts b/app/web/src/store/change_sets.store.ts
index 4a33a47f5b..0bfacb95e2 100644
--- a/app/web/src/store/change_sets.store.ts
+++ b/app/web/src/store/change_sets.store.ts
@@ -9,6 +9,7 @@ import { ChangeSet, ChangeSetStatus } from "@/api/sdf/dal/change_set";
 import router from "@/router";
 import { useWorkspacesStore } from "./workspaces.store";
 import { useRealtimeStore } from "./realtime/realtime.store";
+import { useFeatureFlagsStore } from "./feature_flags.store";
 
 export type ChangeSetId = string;
 
@@ -17,6 +18,7 @@ export function changeSetIdNil(): string {
 }
 
 export function useChangeSetsStore() {
+  const featureFlagsStore = useFeatureFlagsStore();
   const workspacesStore = useWorkspacesStore();
   const workspacePk = workspacesStore.selectedWorkspacePk;
 
@@ -27,6 +29,7 @@ export function useChangeSetsStore() {
         selectedChangeSetId: null as ChangeSetId | null,
         changeSetsWrittenAtById: {} as Record<ChangeSetId, Date>,
         creatingChangeSet: false as boolean,
+        postApplyActor: null as string | null,
       }),
       getters: {
         allChangeSets: (state) => _.values(state.changeSetsById),
@@ -184,11 +187,22 @@ export function useChangeSetsStore() {
           // TODO(Theo/Wendy) - for multiplayer support, we should add code to react if the change set you are using is merged by someone else
           {
             eventType: "ChangeSetApplied",
-            callback: (id) => {
-              const changeSet = this.changeSetsById[id];
+            callback: (data) => {
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              const { changeSetPk, actor } = data as any as {
+                changeSetPk: string;
+                actor: string;
+              };
+              const changeSet = this.changeSetsById[changeSetPk];
               if (changeSet) {
                 changeSet.status = ChangeSetStatus.Applied;
-                this.changeSetsById[id] = changeSet;
+                if (
+                  this.selectedChangeSetId === changeSetPk &&
+                  featureFlagsStore.MUTLIPLAYER_CHANGESET_APPLY
+                ) {
+                  this.postApplyActor = actor;
+                }
+                this.changeSetsById[changeSetPk] = changeSet;
               }
             },
           },
diff --git a/app/web/src/store/feature_flags.store.ts b/app/web/src/store/feature_flags.store.ts
index 60994b8091..2ee5ddf562 100644
--- a/app/web/src/store/feature_flags.store.ts
+++ b/app/web/src/store/feature_flags.store.ts
@@ -13,6 +13,7 @@ const FLAG_MAPPING = {
   FUNC_TEST_PANEL: "func_test_panel",
   AUTO_REATTACH_FUNCTIONS: "auto_reattach_functions",
   COLLABORATORS: "collaborators",
+  MUTLIPLAYER_CHANGESET_APPLY: "multiplayer_changeset_apply_flow",
 };
 
 type FeatureFlags = keyof typeof FLAG_MAPPING;
diff --git a/app/web/src/store/realtime/realtime.store.ts b/app/web/src/store/realtime/realtime.store.ts
index 27f932edb7..f56707e243 100644
--- a/app/web/src/store/realtime/realtime.store.ts
+++ b/app/web/src/store/realtime/realtime.store.ts
@@ -3,6 +3,7 @@ import * as _ from "lodash-es";
 import ReconnectingWebSocket from "reconnecting-websocket";
 import { computed, reactive, ref, watch } from "vue";
 import { API_WS_URL } from "@/store/apis";
+import { ActorView } from "@/api/sdf/dal/history_actor";
 import { useAuthStore } from "../auth.store";
 import { WebsocketRequest, WsEventPayloadMap } from "./realtime_events";
 
@@ -35,6 +36,7 @@ type TrackedSubscription = EventTypeAndCallback & {
 type RealtimeEventMetadata = {
   version: number;
   workspace_pk: string;
+  actor: ActorView;
 };
 
 export const useRealtimeStore = defineStore("realtime", () => {