diff --git a/app/web/src/newhotness/Workspace.vue b/app/web/src/newhotness/Workspace.vue
index 5e77a6b7b3..e9290b4e35 100644
--- a/app/web/src/newhotness/Workspace.vue
+++ b/app/web/src/newhotness/Workspace.vue
@@ -145,6 +145,7 @@
           :actionId="actionId"
         />
         <Review v-else-if="onReviewPage" />
+        <WorkspaceDashboard v-else-if="onDashPage" />
         <Explore v-else @openChangesetModal="openChangesetModal" />
       </main>
     </template>
@@ -184,6 +185,7 @@ import { ChangeSet, ChangeSetStatus } from "@/api/sdf/dal/change_set";
 import { muspelheimStatuses } from "@/store/realtime/heimdall";
 import { trackEvent } from "@/utils/tracking";
 import Onboarding, { DEBUG_MODE } from "@/newhotness/Onboarding2.vue";
+import WorkspaceDashboard from "@/newhotness/WorkspaceDashboard.vue";
 import NavbarPanelRight from "./nav/NavbarPanelRight.vue";
 import Lobby from "./Lobby.vue";
 import Explore, { GroupByUrlQuery, SortByUrlQuery } from "./Explore.vue";
@@ -960,6 +962,7 @@ const bumpToWorkspaces = () => {
 };
 
 const onReviewPage = computed(() => route.name === "new-hotness-review");
+const onDashPage = computed(() => route.name === "new-hotness-dash");
 
 // POSTHOG TRACKING
 watch(heimdall.initCompleted, () => {
diff --git a/app/web/src/newhotness/WorkspaceDashboard.vue b/app/web/src/newhotness/WorkspaceDashboard.vue
new file mode 100644
index 0000000000..6f1df7dd91
--- /dev/null
+++ b/app/web/src/newhotness/WorkspaceDashboard.vue
@@ -0,0 +1,394 @@
+<template>
+  <div class="grid h-full grid-cols-2 gap-sm p-sm">
+    <div
+      :class="[
+        'border flex flex-col gap-2xs',
+        themeClasses('border-neutral-400', 'border-neutral-600'),
+      ]"
+    >
+      <h3
+        :class="
+          clsx(
+            'border-b',
+            'flex-none flex items-center px-xs m-0 min-h-[2.5rem]',
+            themeClasses(
+              'bg-white border-neutral-400',
+              'bg-neutral-800 border-neutral-600',
+            ),
+          )
+        "
+      >
+        <span class="text-md font-bold">At A Glance:</span>
+        <span
+          :class="[
+            'p-xs',
+            themeClasses('border-neutral-300', 'border-neutral-700'),
+          ]"
+          >{{ changeSetName }}</span
+        >
+        <TextPill
+          v-if="inReview"
+          mono
+          variant="simple"
+          :class="
+            clsx(
+              'ml-auto border-0 text-xs',
+              themeClasses(
+                'bg-success-800 text-success-500',
+                'bg-success-800 text-success-500',
+              ),
+            )
+          "
+        >
+          In Review
+        </TextPill>
+      </h3>
+      <div class="p-2xs pt-0 flex flex-col h-full">
+        <div class="flex flex-col gap-sm text-sm p-sm">
+          <div class="flex flex-col gap-md">
+            <div class="flex flex-row gap-sm items-center">
+              <div class="flex flex-row gap-xs items-center">
+                <span>Explore components via</span>
+                <ExploreModeTile icon="grid" label="Grid" @toggle="clickGrid" />
+                <ExploreModeTile icon="map" label="Map" @toggle="clickMap" />
+                <ExploreModeTile
+                  v-if="!ctx.onHead.value"
+                  icon="eye"
+                  label="Review"
+                  @toggle="clickReview"
+                />
+              </div>
+            </div>
+
+            <p v-if="ctx.onHead.value">
+              HEAD represents the state of your infrastructure in the real
+              world.
+            </p>
+
+            <DashboardDetails :details="changeSetDetails" />
+          </div>
+        </div>
+
+        <CollapsingFlexItem open iconsLeft>
+          <template #header>
+            <span class="text-sm">Action Queue</span>
+          </template>
+          <template #headerIcons>
+            <PillCounter :count="actionViewList.length" class="text-sm" />
+          </template>
+          <ActionQueueList
+            :actionViewList="actionViewList"
+            :highlightedActionIds="new Set()"
+          />
+        </CollapsingFlexItem>
+
+        <CollapsingFlexItem open iconsLeft>
+          <template #header>
+            <span class="text-sm">Failed Qualifications</span>
+          </template>
+          <template #headerIcons>
+            <PillCounter
+              :count="componentWithFailedQual.length"
+              class="text-sm"
+            />
+          </template>
+
+          <div class="flex flex-row gap-sm p-sm">
+            <ComponentCard
+              v-for="component in componentWithFailedQual"
+              :key="component.id"
+              :component="component"
+              class="cursor-pointer"
+              @click="() => navToComponent(component)"
+            />
+          </div>
+        </CollapsingFlexItem>
+      </div>
+    </div>
+
+    <div
+      :class="[
+        'border flex flex-col gap-2xs',
+        themeClasses('border-neutral-400', 'border-neutral-600'),
+      ]"
+    >
+      <h3
+        :class="
+          clsx(
+            'border-b',
+            'flex-none flex items-center px-xs m-0 min-h-[2.5rem]',
+            themeClasses(
+              'bg-white border-neutral-400',
+              'bg-neutral-800 border-neutral-600',
+            ),
+          )
+        "
+      >
+        <span class="text-md font-bold">Simulated Change Sets</span>
+      </h3>
+
+      <div class="p-2xs pt-0 flex flex-col h-full">
+        <CollapsingFlexItem
+          :open="csForReview.length > 0"
+          :disableOpen="csForReview.length === 0"
+          iconsLeft
+        >
+          <template #header>
+            <span class="text-sm">In Review</span>
+          </template>
+          <template #headerIcons>
+            <PillCounter :count="csForReview.length" class="text-sm" />
+          </template>
+        </CollapsingFlexItem>
+        <CollapsingFlexItem open iconsLeft>
+          <template #header>
+            <span class="text-sm">In Progress</span>
+          </template>
+          <template #headerIcons>
+            <PillCounter :count="csInProgress.length" class="text-sm" />
+          </template>
+
+          <ul v-if="csInProgress.length > 0" class="m-sm flex flex-col gap-sm">
+            <li
+              v-for="cs in csInProgress"
+              :key="cs.id"
+              class="hover:bg-neutral-800 p-xs flex flex-col gap-sm cursor-pointer"
+              @click="() => navToCS(cs)"
+            >
+              <div class="flex flex-row gap-sm">
+                <span>{{ cs.name }}</span>
+                <span>{{ cs.createdByUserId }}</span>
+              </div>
+              <DashboardDetails :size="'xs'" :details="detailById[cs.id]" />
+            </li>
+          </ul>
+
+          <template v-if="csInProgress.length === 0">
+            <p class="m-sm">
+              Change Sets represent a batch of changes to the components,
+              assets, functions, and actions in a workspace. When you want to
+              propose a change in the real world, you first create a change set
+              to do it. Nothing you do in a change set should alter the real
+              world.
+            </p>
+            <p class="m-sm">
+              If you are familiar with version control systems like git, you can
+              think of a change set as an automatically rebasing branch.
+            </p>
+          </template>
+
+          <NewButton
+            icon="plus-circle"
+            label="Create change set"
+            tone="action"
+            class="w-1/3 ml-auto mr-auto mt-md"
+          />
+        </CollapsingFlexItem>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+import clsx from "clsx";
+import {
+  themeClasses,
+  PillCounter,
+  NewButton,
+  TextPill,
+} from "@si/vue-lib/design-system";
+import { useRouter } from "vue-router";
+import { useQueries, useQuery } from "@tanstack/vue-query";
+import {
+  BifrostActionViewList,
+  ComponentInList,
+  EntityKind,
+} from "@/workers/types/entity_kind_types";
+import {
+  bifrost,
+  bifrostList,
+  useMakeArgs,
+  useMakeKey,
+} from "@/store/realtime/heimdall";
+import { Listable } from "@/workers/types/dbinterface";
+import { ChangeSet } from "@/api/sdf/dal/change_set";
+import { rawUseMakeArgs, rawUseMakeKey } from "@/store/realtime/heimdall_inner";
+import CollapsingFlexItem from "./layout_components/CollapsingFlexItem.vue";
+import ExploreModeTile from "./ExploreModeTile.vue";
+import ActionQueueList from "./ActionQueueList.vue";
+import { useContext } from "./logic_composables/context";
+import { useChangeSets } from "./logic_composables/change_set";
+import { assertIsDefined, Context } from "./types";
+import ComponentCard from "./ComponentCard.vue";
+import DashboardDetails, {
+  ChangeSetDetails,
+} from "./layout_components/DashboardDetails.vue";
+
+const router = useRouter();
+const ctx = useContext();
+assertIsDefined<Context>(ctx);
+
+const { openChangeSets, changeSet: activeChangeSet } = useChangeSets(
+  computed(() => ctx),
+);
+
+const changeSetName = computed(() => activeChangeSet.value?.name);
+
+const clickMap = () => {
+  const params = {
+    ...router.currentRoute.value.params,
+  };
+  router.push({
+    name: "new-hotness",
+    params,
+    query: { map: 1 },
+  });
+};
+
+const clickGrid = () => {
+  const params = {
+    ...router.currentRoute.value.params,
+  };
+  router.push({
+    name: "new-hotness",
+    params,
+    query: { grid: 1 },
+  });
+};
+
+const clickReview = () => {
+  const params = {
+    ...router.currentRoute.value.params,
+  };
+  router.push({
+    name: "new-hotness-review",
+    params,
+  });
+};
+
+const navToComponent = (component: ComponentInList) => {
+  const params = {
+    ...router.currentRoute.value.params,
+    component: component.id,
+  };
+  router.push({
+    name: "new-hotness",
+    params,
+  });
+};
+
+const navToCS = (cs: ChangeSet) => {
+  const params = {
+    ...router.currentRoute.value.params,
+    changeSetId: cs.id,
+  };
+  router.push({
+    name: "new-hotness-dash",
+    params,
+  });
+};
+
+const key = useMakeKey();
+const args = useMakeArgs();
+const actionViewListRaw = useQuery<BifrostActionViewList | null>({
+  queryKey: key(EntityKind.ActionViewList),
+  queryFn: async () =>
+    await bifrost<BifrostActionViewList>(args(EntityKind.ActionViewList)),
+});
+const actionViewList = computed(
+  () => actionViewListRaw.data.value?.actions ?? [],
+);
+
+const componentListQueryKind = computed(() => EntityKind.ComponentList);
+const componentListQueryId = computed(() => ctx.workspacePk.value);
+const componentQueryKey = key(componentListQueryKind, componentListQueryId);
+const componentListQuery = useQuery<ComponentInList[]>({
+  queryKey: componentQueryKey,
+  enabled: ctx.queriesEnabled,
+  queryFn: async () => {
+    const arg = args<Listable>(EntityKind.ComponentList);
+    const list = await bifrostList<ComponentInList[]>(arg);
+    return list ?? [];
+  },
+});
+const componentList = computed(() => {
+  return componentListQuery.data.value ?? [];
+});
+
+const makeDetails = (listOfComponents: ComponentInList[]): ChangeSetDetails => {
+  let components = 0;
+  let resources = 0;
+  let diff = 0;
+  let failed = 0;
+  listOfComponents.forEach((c) => {
+    components += 1;
+    if (c.hasResource) resources += 1;
+    if (c.diffStatus !== "None") diff += 1;
+    if (c.qualificationTotals.failed > 0) failed += 1;
+  });
+  return {
+    components,
+    resources,
+    diff,
+    failed,
+  };
+};
+const changeSetDetails = computed<ChangeSetDetails>(() => {
+  return makeDetails(componentList.value ?? []);
+});
+
+const componentWithFailedQual = computed(() =>
+  componentList.value.filter((c) => c.qualificationTotals.failed > 0),
+);
+
+const csForReview = computed(() =>
+  openChangeSets.value
+    .filter((cs) => cs.mergeRequestedByUser && !cs.reviewedByUser)
+    .filter((cs) => cs.id !== activeChangeSet.value?.id),
+);
+
+const csInProgress = computed(() =>
+  openChangeSets.value
+    .filter((cs) => !cs.mergeRequestedByUser)
+    .filter((cs) => cs.id !== activeChangeSet.value?.id),
+);
+
+const inReview = computed(
+  () =>
+    activeChangeSet.value?.mergeRequestedByUser &&
+    !activeChangeSet.value?.reviewedByUser,
+);
+
+const allCS = computed(() => [...csForReview.value, ...csInProgress.value]);
+const detailsQueries = useQueries({
+  queries: allCS.value.map((cs) => {
+    return {
+      queryKey: rawUseMakeKey({
+        workspacePk: ctx.workspacePk,
+        changeSetId: computed(() => cs.id),
+      })(EntityKind.ComponentList),
+      queryFn: async () => {
+        const empty: ComponentInList[] = [];
+        const arg = rawUseMakeArgs({
+          workspacePk: ctx.workspacePk,
+          changeSetId: computed(() => cs.id),
+        })<Listable>(EntityKind.ComponentList);
+        const list = await bifrostList<ComponentInList[]>(arg);
+        return { changeSetId: cs.id, components: list ?? empty };
+      },
+    };
+  }),
+});
+
+const detailById = computed(() => {
+  const details: Record<string, ChangeSetDetails> = {};
+  detailsQueries.value.forEach((query) => {
+    if (!query.data) return;
+    const { changeSetId, components } = query.data;
+    if (!components || components.length === 0) return;
+    details[changeSetId] = makeDetails(components);
+  });
+  return details;
+});
+</script>
diff --git a/app/web/src/newhotness/layout_components/CollapsingFlexItem.vue b/app/web/src/newhotness/layout_components/CollapsingFlexItem.vue
index 2eedbe33b9..c7e046538e 100644
--- a/app/web/src/newhotness/layout_components/CollapsingFlexItem.vue
+++ b/app/web/src/newhotness/layout_components/CollapsingFlexItem.vue
@@ -26,27 +26,42 @@
           'group/header',
           'flex-none flex items-center px-xs m-0 min-h-[2.5rem]',
           !disableCollapse && [
-            'cursor-pointer',
+            !disableOpen && 'cursor-pointer',
             variant === 'standard' &&
+              !disableOpen &&
               themeClasses('hover:bg-neutral-100', 'hover:bg-neutral-700'),
           ],
           `text-${computedHeaderTextSize}`,
           variant === 'standard' && [
             showOpen && 'border-b',
-            themeClasses(
-              'bg-white border-neutral-400',
-              'bg-neutral-800 border-neutral-600',
-            ),
+            !disableOpen &&
+              themeClasses(
+                'bg-white border-neutral-400',
+                'bg-neutral-800 border-neutral-600',
+              ),
+            disableOpen &&
+              themeClasses(
+                'bg-neutral-200 border-neutral-300 text-gray-700',
+                'bg-neutral-900 border-neutral-700 text-gray-300',
+              ),
           ],
           variant === 'onboarding' && 'hover:underline',
         )
       "
       @click="toggleOpen"
     >
-      <CollapseExpandChevron v-if="!disableCollapse" :open="showOpen" />
+      <CollapseExpandChevron
+        v-if="!disableCollapse"
+        :open="showOpen"
+        :noPointer="disableOpen"
+      />
       <slot name="header" />
-      <div v-if="$slots.headerIcons || showExpandButton" class="ml-auto" />
+      <div
+        v-if="!iconsLeft && ($slots.headerIcons || showExpandButton)"
+        class="ml-auto"
+      />
       <slot name="headerIcons" />
+      <div v-if="iconsLeft && showExpandButton" class="ml-auto" />
       <NewButton
         v-if="showExpandButton"
         tooltip="Expand"
@@ -56,8 +71,8 @@
         size="xs"
         :class="
           clsx(
-            'active:bg-white active:text-black',
-            themeClasses('hover:bg-neutral-200', 'hover:bg-neutral-600'),
+            !disableOpen &&
+              themeClasses('hover:bg-neutral-200', 'hover:bg-neutral-600'),
           )
         "
         @click.prevent.stop="expand"
@@ -122,8 +137,10 @@ const props = withDefaults(
     expandable?: boolean;
     headerTextSize?: SpacingSizes;
     disableCollapse?: boolean;
+    disableOpen?: boolean;
     maxHeightContent?: boolean;
     variant?: CollapsingVariant;
+    iconsLeft?: boolean;
   }>(),
   {
     h3class: tw`flex flex-row items-center gap-xs p-2xs z-30`,
@@ -153,6 +170,7 @@ const emit = defineEmits<{
 }>();
 
 const toggleOpen = () => {
+  if (props.disableOpen) return;
   emit("toggle");
   openState.toggle();
 };
diff --git a/app/web/src/newhotness/layout_components/DashboardDetails.vue b/app/web/src/newhotness/layout_components/DashboardDetails.vue
new file mode 100644
index 0000000000..238ef292b3
--- /dev/null
+++ b/app/web/src/newhotness/layout_components/DashboardDetails.vue
@@ -0,0 +1,85 @@
+<template>
+  <ul :class="['flex flex-row', gap, text]">
+    <li
+      :class="[
+        padding,
+        gap,
+        'flex flex-row items-center',
+        themeClasses('bg-neutral-200', 'bg-neutral-800'),
+      ]"
+    >
+      {{ components }} Components
+    </li>
+    <li
+      :class="[
+        padding,
+        gap,
+        'flex flex-row items-center',
+        themeClasses('bg-neutral-200', 'bg-neutral-800'),
+      ]"
+    >
+      <StatusIndicatorIcon
+        v-tooltip="'Resource'"
+        type="resource"
+        size="sm"
+        status="exists"
+      />
+      {{ resources }} Resources
+    </li>
+    <li
+      :class="[
+        padding,
+        gap,
+        'flex flex-row items-center',
+        themeClasses('bg-neutral-200', 'bg-neutral-800'),
+      ]"
+    >
+      <Icon
+        name="tilde-circle"
+        :class="themeClasses('text-warning-500', 'text-warning-300')"
+        size="sm"
+      />
+      {{ diff }} Changes
+    </li>
+    <li
+      :class="[
+        padding,
+        gap,
+        'flex flex-row items-center',
+        themeClasses('bg-neutral-200', 'bg-neutral-800'),
+      ]"
+    >
+      <StatusIndicatorIcon type="qualification" size="sm" status="failure" />
+      {{ failed }} Failed Qualifications
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+import { themeClasses, Icon } from "@si/vue-lib/design-system";
+import { computed } from "vue";
+import StatusIndicatorIcon from "@/components/StatusIndicatorIcon.vue";
+
+export type ChangeSetDetails = {
+  components: number;
+  resources: number;
+  diff: number;
+  failed: number;
+};
+
+export type TextSizes = "xs" | "sm" | "md";
+
+const props = defineProps<{
+  details: ChangeSetDetails | undefined;
+  size?: TextSizes;
+}>();
+
+const diff = computed(() => props.details?.diff ?? 0);
+const resources = computed(() => props.details?.resources ?? 0);
+const failed = computed(() => props.details?.failed ?? 0);
+const components = computed(() => props.details?.components ?? 0);
+
+const text = computed(() => `text-${props.size || "sm"}`);
+const padding = computed(() => (props.size !== "xs" ? "p-xs" : "p-2xs"));
+const gap = computed(() => (props.size !== "xs" ? "gap-xs" : "gap-2xs"));
+</script>
diff --git a/app/web/src/router.ts b/app/web/src/router.ts
index 5ee25cb70b..0e7e7a3ed4 100644
--- a/app/web/src/router.ts
+++ b/app/web/src/router.ts
@@ -104,6 +104,12 @@ const routes: RouteRecordRaw[] = [
       //   path: "lobby",
       //   component: () => import("@/newhotness/Workspace.vue"),
       // },
+      {
+        name: "new-hotness-dash",
+        path: "dash",
+        props: true,
+        component: () => import("@/newhotness/Workspace.vue"),
+      },
       {
         name: "new-hotness-view",
         path: ":viewId/v/edit",
diff --git a/app/web/src/store/realtime/heimdall_inner.ts b/app/web/src/store/realtime/heimdall_inner.ts
index 87bbfefb28..058a0a0039 100644
--- a/app/web/src/store/realtime/heimdall_inner.ts
+++ b/app/web/src/store/realtime/heimdall_inner.ts
@@ -9,7 +9,9 @@ import {
 import { Gettable } from "@/workers/types/dbinterface";
 import { Context } from "@/newhotness/types";
 
-export const innerUseMakeKey = (ctx: Context) => {
+export const rawUseMakeKey = (
+  ctx: Pick<Context, "workspacePk" | "changeSetId">,
+) => {
   return <K = Gettable>(
     kind: MaybeRefOrGetter<K>,
     id?: MaybeRefOrGetter<string>,
@@ -44,7 +46,13 @@ export const innerUseMakeKey = (ctx: Context) => {
     });
 };
 
-export const innerUseMakeArgs = (ctx: Context) => {
+export const innerUseMakeKey = (ctx: Context) => {
+  return rawUseMakeKey(ctx);
+};
+
+export const rawUseMakeArgs = (
+  ctx: Pick<Context, "workspacePk" | "changeSetId">,
+) => {
   return <K = Gettable | GlobalEntity>(kind: EntityKind, id?: string) => {
     if (GLOBAL_ENTITIES.includes(kind as GlobalEntity)) {
       return {
@@ -62,3 +70,7 @@ export const innerUseMakeArgs = (ctx: Context) => {
     };
   };
 };
+
+export const innerUseMakeArgs = (ctx: Context) => {
+  return rawUseMakeArgs(ctx);
+};
diff --git a/lib/vue-lib/src/design-system/general/CollapseExpandChevron.vue b/lib/vue-lib/src/design-system/general/CollapseExpandChevron.vue
index 1339ab4403..9c0c2089e4 100644
--- a/lib/vue-lib/src/design-system/general/CollapseExpandChevron.vue
+++ b/lib/vue-lib/src/design-system/general/CollapseExpandChevron.vue
@@ -2,14 +2,15 @@
   <Icon
     :name="open ? 'chevron-down' : 'chevron-right'"
     size="sm"
-    class="cursor-pointer flex-none"
+    :class="['flex-none', !noPointer && 'cursor-pointer']"
   />
 </template>
 
 <script setup lang="ts">
 import Icon from "../icons/Icon.vue";
 
-defineProps({
-  open: Boolean,
-});
+defineProps<{
+  open: boolean;
+  noPointer?: boolean;
+}>();
 </script>