diff --git a/web/src/App.vue b/web/src/App.vue
index 635a62061..03514190d 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -20,6 +20,7 @@
 import AppHeader from 'src/components/AppHeader.vue';
 import { onBeforeUnmount } from 'vue';
 import { useEventStore } from 'src/stores/events';
+import { useDeploymentStore } from 'src/stores/deployments';
 
 const eventStore = useEventStore();
 
@@ -28,6 +29,9 @@ onBeforeUnmount(() => {
   eventStore.closeEventStream();
 });
 
+// Let's start population of the deployments as quickly as possible
+useDeploymentStore();
+
 </script>
 
 <style lang="scss">
diff --git a/web/src/api/resources/Deployments.ts b/web/src/api/resources/Deployments.ts
index c30f6db16..b47dbeb7b 100644
--- a/web/src/api/resources/Deployments.ts
+++ b/web/src/api/resources/Deployments.ts
@@ -2,7 +2,7 @@
 
 import { AxiosInstance } from 'axios';
 
-import { Deployment, DeploymentRecordError, PreDeployment } from 'src/api/types/deployments';
+import { Deployment, DeploymentError, PreDeployment } from 'src/api/types/deployments';
 
 export class Deployments {
   private client: AxiosInstance;
@@ -15,7 +15,7 @@ export class Deployments {
   // 200 - success
   // 500 - internal server error
   getAll() {
-    return this.client.get<Array<Deployment | PreDeployment | DeploymentRecordError>>(
+    return this.client.get<Array<Deployment | PreDeployment | DeploymentError>>(
       '/deployments',
     );
   }
@@ -26,7 +26,7 @@ export class Deployments {
   // 500 - internal server error
   get(id: string) {
     const encodedId = encodeURIComponent(id);
-    return this.client.get<Deployment | PreDeployment | DeploymentRecordError>(
+    return this.client.get<Deployment | PreDeployment | DeploymentError>(
       `deployments/${encodedId}`,
     );
   }
diff --git a/web/src/api/types/deployments.ts b/web/src/api/types/deployments.ts
index e41ee86dd..79ad29640 100644
--- a/web/src/api/types/deployments.ts
+++ b/web/src/api/types/deployments.ts
@@ -16,7 +16,7 @@ export type DeploymentLocation = {
   deploymentPath: string;
 }
 
-export type DeploymentRecordError = {
+export type DeploymentError = {
   error: AgentError,
   state: DeploymentState.ERROR,
 } & DeploymentLocation
@@ -41,22 +41,23 @@ export type Deployment = {
   files: string[],
   deployedAt: string,
   state: DeploymentState.DEPLOYED,
+  deploymentError: AgentError | null,
 } & DeploymentRecord & Configuration;
 
-export function isDeploymentRecordError(
-  d: Deployment | PreDeployment | DeploymentRecordError
-): d is DeploymentRecordError {
+export function isDeploymentError(
+  d: Deployment | PreDeployment | DeploymentError
+): d is DeploymentError {
   return d.state === DeploymentState.ERROR;
 }
 
 export function isPreDeployment(
-  d: Deployment | PreDeployment | DeploymentRecordError
+  d: Deployment | PreDeployment | DeploymentError
 ): d is PreDeployment {
   return d.state === DeploymentState.NEW;
 }
 
 export function isDeployment(
-  d: Deployment | PreDeployment | DeploymentRecordError
+  d: Deployment | PreDeployment | DeploymentError
 ): d is Deployment {
   return d.state === DeploymentState.DEPLOYED;
 }
diff --git a/web/src/api/types/error.ts b/web/src/api/types/error.ts
index 1cbe3d520..8dcdbbcd9 100644
--- a/web/src/api/types/error.ts
+++ b/web/src/api/types/error.ts
@@ -3,6 +3,7 @@
 export type AgentError = {
     code: string;
     msg: string;
+    operation: string;
     data: {
         [key: string]: unknown
     };
diff --git a/web/src/router.ts b/web/src/router.ts
index a56dc84b9..be0fbf5da 100644
--- a/web/src/router.ts
+++ b/web/src/router.ts
@@ -17,6 +17,7 @@ const routes = [
     path: '/deployments/:name',
     component: DeploymentPage,
     props: (route: RouteLocationNormalizedLoaded) => ({
+      name: route.params.name,
       preferredAccount: route.query.preferredAccount,
     }),
   },
diff --git a/web/src/stores/deployments.ts b/web/src/stores/deployments.ts
new file mode 100644
index 000000000..292bd760b
--- /dev/null
+++ b/web/src/stores/deployments.ts
@@ -0,0 +1,120 @@
+// Copyright (C) 2023 by Posit Software, PBC.
+
+import { defineStore } from 'pinia';
+import { useApi } from 'src/api';
+import { computed, ref } from 'vue';
+import { router } from 'src/router';
+import { getStatusFromError, newFatalErrorRouteLocation } from 'src/utils/errors';
+import { sortByDateString } from 'src/utils/date';
+
+import {
+  Deployment,
+  DeploymentError,
+  isDeploymentError,
+  isPreDeployment,
+  PreDeployment,
+} from 'src/api/types/deployments';
+
+export const useDeploymentStore = defineStore('deployment', () => {
+  // key is deployment saveName
+  type DeploymentMap = Record<string, Deployment | PreDeployment | DeploymentError>;
+
+  const deploymentMap = ref<DeploymentMap>({});
+
+  const api = useApi();
+
+  const getDeploymentRef = (deploymentName: string) => {
+    return computed(() => deploymentMap.value[deploymentName]);
+  };
+
+  const refreshDeployments = async() => {
+    try {
+      const newDeploymentMap: DeploymentMap = {};
+
+      // API Returns:
+      // 200 - success
+      // 500 - internal server error
+      const response = (await api.deployments.getAll()).data;
+      response.forEach((deployment) => {
+        if (isDeploymentError(deployment)) {
+          newDeploymentMap[deployment.deploymentName] = deployment;
+        } else {
+          newDeploymentMap[deployment.saveName] = deployment;
+        }
+      });
+      deploymentMap.value = newDeploymentMap;
+    } catch (error: unknown) {
+      router.push(newFatalErrorRouteLocation(error, 'deployments::getDeployments()'));
+    }
+  };
+
+  const hasDeployments = computed(() => Object.keys(deploymentMap.value).length > 0);
+
+  const refreshDeployment = async(deploymentName: string) => {
+    try {
+      // API Returns:
+      // 200 - success
+      // 404 - not found
+      // 500 - internal server error
+      const response = await api.deployments.get(deploymentName);
+      const deployment = response.data;
+      if (isDeploymentError(deployment)) {
+        deploymentMap.value[deployment.deploymentName] = deployment;
+      } else {
+        deploymentMap.value[deployment.saveName] = deployment;
+      }
+    } catch (error: unknown) {
+      if (getStatusFromError(error) === 404) {
+        // deployment no longer exists, remove from the map.
+        delete deploymentMap.value[deploymentName];
+        return;
+      }
+      // For this page, we send all errors to the fatal error page, including 404
+      router.push(newFatalErrorRouteLocation(error, `deployments::getDeployment(${name})`));
+    }
+  };
+
+  const sortedDeployments = computed(() => {
+    const result: Array<Deployment | PreDeployment | DeploymentError> = [];
+    const deploymentErrors: Array<DeploymentError> = [];
+    const preDeployments: Array<PreDeployment> = [];
+    const deployments: Array<Deployment> = [];
+    Object.keys(deploymentMap.value).forEach(
+      deploymentName => {
+        const deployment = deploymentMap.value[deploymentName];
+        if (isDeploymentError(deployment)) {
+          deploymentErrors.push(deployment);
+        } else if (isPreDeployment(deployment)) {
+          preDeployments.push(deployment);
+        } else {
+          deployments.push(deployment);
+        }
+      }
+    );
+    deploymentErrors.sort((a, b) => {
+      return a.deploymentName.localeCompare(b.deploymentName, undefined, { sensitivity: 'base' });
+    });
+    preDeployments.sort((a, b) => {
+      return a.deploymentName.localeCompare(b.deploymentName, undefined, { sensitivity: 'base' });
+    });
+    deployments.sort((a, b) => {
+      return sortByDateString(a.deployedAt, b.deployedAt);
+    });
+
+    return result.concat(deploymentErrors, preDeployments, deployments);
+  });
+
+  const init = () => {
+    refreshDeployments();
+  };
+  init();
+
+  return {
+    refreshDeployments,
+    refreshDeployment,
+    sortedDeployments,
+    hasDeployments,
+    deploymentMap,
+    getDeploymentRef,
+  };
+});
diff --git a/web/src/stores/events.ts b/web/src/stores/events.ts
index 875d4e2aa..9fb42d663 100644
--- a/web/src/stores/events.ts
+++ b/web/src/stores/events.ts
@@ -54,6 +54,7 @@ import {
 } from 'src/plugins/eventStream';
 
 import { computed, ref } from 'vue';
+import { useDeploymentStore } from './deployments';
 
 export type PublishStepCompletionStatus =
 'notStarted' | 'inProgress' | 'success' | 'error';
@@ -317,6 +318,7 @@ export const useEventStore = defineStore('event', () => {
   };
 
   const onPublishSuccess = (msg: PublishSuccess) => {
+    const deployments = useDeploymentStore();
     const localId = getLocalId(msg);
 
     if (currentPublishStatus.value.localId === localId) {
@@ -328,9 +330,13 @@ export const useEventStore = defineStore('event', () => {
       currentPublishStatus.value.contentId = msg.data.contentId;
     }
     publishInProgess.value = false;
+    if (currentPublishStatus.value.saveName) {
+      deployments.refreshDeployment(currentPublishStatus.value.saveName);
+    }
   };
 
   const onPublishFailure = (msg: PublishFailure) => {
+    const deployments = useDeploymentStore();
     const localId = getLocalId(msg);
 
     if (currentPublishStatus.value.localId === localId) {
@@ -339,6 +345,9 @@ export const useEventStore = defineStore('event', () => {
       publishStatus.error = splitMsgIntoKeyValuePairs(msg.data);
     }
     publishInProgess.value = false;
+    if (currentPublishStatus.value.saveName) {
+      deployments.refreshDeployment(currentPublishStatus.value.saveName);
+    }
   };
 
   const onPublishCheckCapabilitiesStart = (msg: PublishCheckCapabilitiesStart) => {
diff --git a/web/src/views/add-new-deployment/AddNewDeployment.vue b/web/src/views/add-new-deployment/AddNewDeployment.vue
index d7d04d4a7..a81b3ca71 100644
--- a/web/src/views/add-new-deployment/AddNewDeployment.vue
+++ b/web/src/views/add-new-deployment/AddNewDeployment.vue
@@ -59,21 +59,22 @@
 import { Account, useApi } from 'src/api';
 import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
-import { Deployment, isDeploymentRecordError } from 'src/api/types/deployments';
+import { isDeploymentError } from 'src/api/types/deployments';
 
 import AccountRadio from 'src/views/add-new-deployment/AccountRadio.vue';
 import { newFatalErrorRouteLocation } from 'src/utils/errors';
 import PButton from 'src/components/PButton.vue';
 import PLink from 'src/components/PLink.vue';
+import { useDeploymentStore } from 'src/stores/deployments';
 
 const accounts = ref<Account[]>([]);
 const selectedAccountName = ref<string>('');
 const deploymentName = ref<string>('');
-const deployments = ref<Deployment[]>([]);
 const navigationInProgress = ref<boolean>(false);
 
 const api = useApi();
 const router = useRouter();
+const deployments = useDeploymentStore();
 
 async function getAccounts() {
   try {
@@ -90,27 +91,20 @@ async function getAccounts() {
   }
 }
 
-async function getDeployments() {
-  try {
-    // API Returns:
-    // 200 - success
-    // 500 - internal server error
-    const response = (await api.deployments.getAll()).data;
-    deployments.value = response.filter<Deployment>((d): d is Deployment => {
-      return !isDeploymentRecordError(d);
-    });
-  } catch (error: unknown) {
-    router.push(newFatalErrorRouteLocation(error, 'ProjectPage::getDeployments()'));
-  }
-}
-
 const deploymentNameError = computed(() => {
   if (!deploymentName.value) {
     return 'A unique deployment name must be provided.';
   }
   if (
-    deployments.value.find(
-      (deployment) => deployment.saveName.toLowerCase() === deploymentName.value.toLowerCase()
+    deployments.sortedDeployments.find(
+      (deployment) => {
+        if (isDeploymentError(deployment)) {
+          return (
+            deployment.deploymentName.toLocaleLowerCase() === deploymentName.value.toLowerCase()
+          );
+        }
+        return deployment.saveName.toLowerCase() === deploymentName.value.toLowerCase();
+      }
     )
   ) {
     return 'Deployment name already in use. Please supply a unique name.';
@@ -128,23 +122,36 @@ const disableToDeploymentPage = computed(() => {
 
 const navigateToDeploymentPage = async() => {
   navigationInProgress.value = true;
+  let responseName = deploymentName.value;
+
+  // create a pre-deployment object
   try {
     const response = await api.deployments.createNew(
       selectedAccountName.value,
       deploymentName.value,
     );
-    router.push({
-      name: 'deployments',
-      params: {
-        name: response.data.deploymentName,
-      },
-      query: {
-        preferredAccount: selectedAccountName.value,
-      }
-    });
+    responseName = response.data.deploymentName;
   } catch (error: unknown) {
     router.push(newFatalErrorRouteLocation(error, 'navigateToDeploymentPage::createNew()'));
   }
+
+  // refresh the deployment store to include the new pre-deployment page
+  try {
+    await deployments.refreshDeployment(responseName);
+  } catch (error: unknown) {
+    router.push(newFatalErrorRouteLocation(error, 'navigateToDeploymentPage::refreshDeployment()'));
+  }
+
+  // navigate to the deployment page
+  router.push({
+    name: 'deployments',
+    params: {
+      name: responseName,
+    },
+    query: {
+      preferredAccount: selectedAccountName.value,
+    }
+  });
 };
 
 const generateDefaultName = () => {
@@ -153,7 +160,15 @@ const generateDefaultName = () => {
   do {
     id += 1;
     const trialName = `Untitled-${id}`;
-    if (!deployments.value.find((deployment) => deployment.saveName === trialName)) {
+
+    if (!deployments.sortedDeployments.find(
+      (deployment) => {
+        if (isDeploymentError(deployment)) {
+          return deployment.deploymentName.toLocaleLowerCase() === trialName.toLowerCase();
+        }
+        return deployment.saveName.toLowerCase() === trialName.toLowerCase();
+      }
+    )) {
       defaultName = trialName;
     }
   } while (!defaultName);
@@ -162,7 +177,6 @@ const generateDefaultName = () => {
 
 const init = async() => {
   getAccounts();
-  await getDeployments();
   deploymentName.value = generateDefaultName();
 };
 init();
diff --git a/web/src/views/deployment/DeploymentPage.vue b/web/src/views/deployment/DeploymentPage.vue
index eb63d56ee..1432f039e 100644
--- a/web/src/views/deployment/DeploymentPage.vue
+++ b/web/src/views/deployment/DeploymentPage.vue
@@ -2,7 +2,7 @@
 
 <template>
   <DeploymentHeader
-    v-if="deployment && defaultConfig"
+    v-if="deployment && !isDeploymentError(deployment) && defaultConfig"
     :deployment="deployment"
     :config-error="isConfigurationError(defaultConfig) ? defaultConfig : undefined"
     :preferred-account="props.preferredAccount"
@@ -30,7 +30,8 @@
 
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import { useRouter } from 'vue-router';
+import { useDeploymentStore } from 'src/stores/deployments';
 
 import {
   Configuration,
@@ -39,7 +40,7 @@ import {
   useApi,
   isDeployment
 } from 'src/api';
-import { Deployment, PreDeployment, isDeploymentRecordError } from 'src/api/types/deployments';
+import { isDeploymentError } from 'src/api/types/deployments';
 import {
   newFatalErrorRouteLocation,
 } from 'src/utils/errors';
@@ -49,25 +50,32 @@ import FileTree from 'src/components/FileTree.vue';
 import DeploymentHeader from './DeploymentHeader.vue';
 import DeploymentSection from 'src/components/DeploymentSection.vue';
 
-const route = useRoute();
 const router = useRouter();
 const api = useApi();
-
-const deployment = ref<Deployment | PreDeployment>();
+const deployments = useDeploymentStore();
 
 const configurations = ref<Array<Configuration | ConfigurationError>>([]);
 
 const props = defineProps({
+  name: { type: String, required: true },
   preferredAccount: { type: String, required: false, default: undefined },
 });
 
-const deploymentName = computed(():string => {
-  // route param can be either string | string[]
-  if (Array.isArray(route.params.name)) {
-    return route.params.name[0];
-  }
-  return route.params.name;
-});
+const deployment = deployments.getDeploymentRef(props.name);
+
+watch(
+  () => deployment.value,
+  () => {
+    if (!deployment.value || isDeploymentError(deployment.value)) {
+      // go to fatal error page.
+      router.push(newFatalErrorRouteLocation(
+        new Error('Invalid Value for Deployment Object'),
+        'DeploymentPage::deployment()',
+      ));
+    }
+  },
+  { immediate: true }
+);
 
 const configurationSubTitles = computed(() => {
   return [
@@ -88,31 +96,6 @@ const fileSubTitles = computed(() => {
   ];
 });
 
-const getDeployment = async() => {
-  try {
-    if (!deploymentName.value) {
-      deployment.value = undefined;
-      return;
-    }
-    // API Returns:
-    // 200 - success
-    // 404 - not found
-    // 500 - internal server error
-    const response = await api.deployments.get(deploymentName.value);
-    const d = response.data;
-    if (isDeploymentRecordError(d)) {
-      // let the fatal error page handle this deployment error.
-      // we're in a header, they can't fix it here.
-      throw new Error(d.error.msg);
-    } else {
-      deployment.value = d;
-    }
-  } catch (error: unknown) {
-    // For this page, we send all errors to the fatal error page, including 404
-    router.push(newFatalErrorRouteLocation(error, 'DeploymentPage::getDeployment()'));
-  }
-};
-
 const defaultConfig = computed(() => {
   return configurations.value.find((c) => c.configurationName === 'default');
 });
@@ -121,15 +104,5 @@ async function getConfigurations() {
   const response = await api.configurations.getAll();
   configurations.value = response.data;
 }
-
 getConfigurations();
-
-watch(
-  () => route.params,
-  () => {
-    getDeployment();
-  },
-  { immediate: true }
-);
-
 </script>
diff --git a/web/src/views/project-page/DeploymentErrorCard.vue b/web/src/views/project-page/DeploymentErrorCard.vue
new file mode 100644
index 000000000..2a9fc18cb
--- /dev/null
+++ b/web/src/views/project-page/DeploymentErrorCard.vue
@@ -0,0 +1,59 @@
+<!-- Copyright (C) 2023 by Posit Software, PBC. -->
+
+<template>
+  <PCard
+    :title="deploymentError.deploymentName"
+  >
+    <div class="space-between-sm">
+      <p class="text-bold">
+        An error has been detected: {{ deploymentError.error.code }}
+      </p>
+      <p class="error-msg">
+        {{ deploymentError.error.msg }}
+      </p>
+      <p
+        v-for="(value, name, index) in scrubbedErrorData"
+        :key="index"
+        class="error-data"
+      >
+        {{ name }}: {{ value }}
+      </p>
+    </div>
+  </PCard>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue';
+
+import { DeploymentError } from 'src/api';
+import PCard from 'src/components/PCard.vue';
+
+const props = defineProps({
+  deploymentError: {
+    type: Object as PropType<DeploymentError>,
+    required: true,
+  },
+});
+
+const scrubbedErrorData = computed(() => {
+  const result = {
+    ...props.deploymentError.error.data,
+  };
+  if (result.file) {
+    delete result.file;
+  }
+  return result;
+});
+
+</script>
+
+<style scoped lang="scss">
+.error-msg {
+  text-wrap: wrap;
+}
+.error-data {
+  margin-left: 15px;
+  margin-top: 2px;
+  margin-bottom: 2px;
+}
+</style>
diff --git a/web/src/views/project-page/DeploymentsSection.vue b/web/src/views/project-page/DeploymentsSection.vue
index 920dc6c6c..f31c4bdd7 100644
--- a/web/src/views/project-page/DeploymentsSection.vue
+++ b/web/src/views/project-page/DeploymentsSection.vue
@@ -7,36 +7,41 @@
         Deployments
       </h2>
       <p
-        v-if="hasDeployments"
+        v-if="deployments.hasDeployments"
         class="q-mt-xs"
       >
         Your project has been deployed to:
       </p>
     </div>
-
     <PButton
-      v-if="hasDeployments"
+      v-if="deployments.hasDeployments"
       hierarchy="primary"
       :to="{ name: 'addNewDeployment' }"
     >
       New Deployment
     </PButton>
   </div>
-
-  <ErrorBanner
-    :error-messages="errorMessages"
-    @dismiss="dismissError"
-  />
-
   <div
-    v-if="hasDeployments"
+    v-if="deployments.hasDeployments"
     class="card-grid"
   >
-    <DeploymentCard
-      v-for="deployment in sortedDeployments"
-      :key="deployment.id"
-      :deployment="deployment"
-    />
+    <div
+      v-for="deployment in deployments.sortedDeployments"
+      :key="deployment.deploymentName"
+    >
+      <DeploymentErrorCard
+        v-if="isDeploymentError(deployment)"
+        :deployment-error="deployment"
+      />
+      <PreDeploymentCard
+        v-if="isPreDeployment(deployment)"
+        :pre-deployment="deployment"
+      />
+      <DeploymentCard
+        v-if="!isDeploymentError(deployment) && !isPreDeployment(deployment)"
+        :deployment="deployment"
+      />
+    </div>
   </div>
   <div v-else>
     <PCard
@@ -63,68 +68,17 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { useDeploymentStore } from 'src/stores/deployments';
+import { isDeploymentError, isPreDeployment } from 'src/api';
 
-import { Deployment, DeploymentRecordError, isDeploymentRecordError, useApi } from 'src/api';
-import { ErrorMessages, buildErrorBannerMessage, newFatalErrorRouteLocation } from 'src/utils/errors';
-import { sortByDateString } from 'src/utils/date';
-import { router } from 'src/router';
 import DeploymentCard from './DeploymentCard.vue';
+import PreDeploymentCard from './PreDeploymentCard.vue';
+import DeploymentErrorCard from './DeploymentErrorCard.vue';
 import PButton from 'src/components/PButton.vue';
 import PCard from 'src/components/PCard.vue';
-import ErrorBanner from 'src/components/ErrorBanner.vue';
-
-const api = useApi();
-const deployments = ref<Deployment[]>([]);
-const errorMessages = ref<ErrorMessages>([]);
 
-const hasDeployments = computed(() => {
-  return deployments.value.length > 0;
-});
-
-const sortedDeployments = computed(() => {
-  return [...deployments.value].sort((a, b) => {
-    return sortByDateString(a.deployedAt, b.deployedAt);
-  });
-});
-
-const dismissError = () => {
-  errorMessages.value = [];
-};
-
-async function getDeployments() {
-  try {
-    // API Returns:
-    // 200 - success
-    // 500 - internal server error
-    const response = (await api.deployments.getAll()).data;
-    deployments.value = response.filter<Deployment>((d): d is Deployment => {
-      return !isDeploymentRecordError(d);
-    });
-    const deploymentErrors: DeploymentRecordError[] = response.filter(isDeploymentRecordError);
-    if (deploymentErrors) {
-      // We will show deployment errors on this page, while all other pages
-      // route these towards the fatal error page. This is because the user
-      // can see the list of deployments for their project and hopefully is
-      // in a position of resolving issues.
-      errorMessages.value = [];
-      deploymentErrors.forEach((d) => {
-        return errorMessages.value.push(
-          buildErrorBannerMessage(
-            d.error.msg,
-            `Please correct errors within the indicated deployment file(s).
-            The files will not appear on the list below until they are valid and
-            you have reloaded this page.`,
-          ),
-        );
-      });
-    }
-  } catch (error: unknown) {
-    router.push(newFatalErrorRouteLocation(error, 'ProjectPage::getDeployments()'));
-  }
-}
+const deployments = useDeploymentStore();
 
-await getDeployments();
 </script>
 
 <style scoped lang="scss">
diff --git a/web/src/views/project-page/PreDeploymentCard.vue b/web/src/views/project-page/PreDeploymentCard.vue
new file mode 100644
index 000000000..9aa314ae3
--- /dev/null
+++ b/web/src/views/project-page/PreDeploymentCard.vue
@@ -0,0 +1,31 @@
+<!-- Copyright (C) 2024 by Posit Software, PBC. -->
+
+<template>
+  <PCard
+    :to="{ name: 'deployments', params: { name: `${preDeployment.saveName}` }}"
+    :title="preDeployment.saveName"
+  >
+    <div
+      class="space-between-y-sm"
+    >
+      <p>{{ preDeployment.serverUrl }}</p>
+      <p>An ID will be created on first deployment.</p>
+      <p>Never has been deployed.</p>
+    </div>
+  </PCard>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue';
+
+import { PreDeployment } from 'src/api';
+import PCard from 'src/components/PCard.vue';
+
+defineProps({
+  preDeployment: {
+    type: Object as PropType<PreDeployment>,
+    required: true,
+  },
+});
+
+</script>
diff --git a/web/src/views/project-page/ProjectPage.vue b/web/src/views/project-page/ProjectPage.vue
index eae3fc251..a6eb915ce 100644
--- a/web/src/views/project-page/ProjectPage.vue
+++ b/web/src/views/project-page/ProjectPage.vue
@@ -81,6 +81,7 @@ import DeploymentsSection from './DeploymentsSection.vue';
 
 const api = useApi();
 const router = useRouter();
+
 const configurations = ref<Array<Configuration | ConfigurationError>>([]);
 
 async function getConfigurations() {