diff --git a/src/client/src/assets/errorred.svg b/src/client/src/assets/errorred.svg
new file mode 100644
index 0000000000..eb6e925706
--- /dev/null
+++ b/src/client/src/assets/errorred.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.7998 9L15.8643 15.0732L15.0732 15.8643L9 9.7998L2.92676 15.8643L2.13574 15.0732L8.2002 9L2.13574 2.92676L2.92676 2.13574L9 8.2002L15.0732 2.13574L15.8643 2.92676L9.7998 9Z" fill="white"/>
+</svg>
diff --git a/src/client/src/containers/PostGenerationModal/index.tsx b/src/client/src/containers/PostGenerationModal/index.tsx
index a77a2bc6be..498835d533 100644
--- a/src/client/src/containers/PostGenerationModal/index.tsx
+++ b/src/client/src/containers/PostGenerationModal/index.tsx
@@ -3,6 +3,8 @@ import * as React from "react";
 import { connect } from "react-redux";
 import { RouteComponentProps, withRouter } from "react-router";
 import ReactMarkdown from "react-markdown";
+import { ReactComponent as Checkmark } from "../../assets/checkgreen.svg";
+import { ReactComponent as ErrorRed } from "../../assets/errorred.svg";
 
 import asModal from "../../components/Modal";
 import { ReactComponent as Spinner } from "../../assets/spinner.svg";
@@ -34,11 +36,11 @@ interface LinksDict {
 }
 const links: LinksDict = {
   "Azure Functions":
-    "[Azure](https://portal.azure.com/#blade/WebsitesExtension/FunctionsIFrameBladeMain)",
+    "[View](https://portal.azure.com/#blade/WebsitesExtension/FunctionsIFrameBladeMain)",
   "Cosmos DB":
-    "[Azure](https://portal.azure.com/#blade/HubsExtension/BrowseResourceBlade/resourceType/Microsoft.DocumentDb%2FdatabaseAccounts)",
+    "[View](https://portal.azure.com/#blade/HubsExtension/BrowseResourceBlade/resourceType/Microsoft.DocumentDb%2FdatabaseAccounts)",
   "App Service":
-    "[Azure](https://ms.portal.azure.com/#blade/HubsExtension/BrowseResourceBlade/resourceType/Microsoft.Web%2Fsites)"
+    "[View](https://portal.azure.com/#blade/HubsExtension/BrowseResourceBlade/resourceType/Microsoft.Web%2Fsites)"
 };
 
 interface IStateProps {
@@ -76,6 +78,8 @@ const PostGenerationModal = ({
   history
 }: Props) => {
   const { formatMessage } = intl;
+  let serviceFailed = false;
+  const templateGenerated = isTemplateGenerated && !isTemplatesFailed;
   const templateGenerationInProgress =
     !isTemplateGenerated && !isTemplatesFailed;
 
@@ -84,12 +88,6 @@ const PostGenerationModal = ({
       {props.children}
     </a>
   );
-  const handleCloseWizard = () => {
-    vscode.postMessage({
-      module: EXTENSION_MODULES.GENERATE,
-      command: EXTENSION_COMMANDS.CLOSE_WIZARD
-    });
-  };
 
   const handleOpenProjectOrRestartWizard = () => {
     if (isTemplatesFailed) {
@@ -112,15 +110,7 @@ const PostGenerationModal = ({
     if (isTemplatesFailed) {
       return formatMessage(messages.restartWizard);
     }
-    if (isTemplateGenerated) {
-      return formatMessage(messages.openInCode);
-    }
-    return (
-      <React.Fragment>
-        <Spinner className={styles.spinner} />
-        {formatMessage(messages.working)}
-      </React.Fragment>
-    );
+    return formatMessage(messages.openInCode);
   };
 
   const handleCreateAnotherProject = () => {
@@ -128,41 +118,160 @@ const PostGenerationModal = ({
     history.push(ROUTES.NEW_PROJECT);
   };
 
+  const postGenMessage = () => {
+    return (
+      <div>
+        {isServicesSelected && (
+          <p className={styles.sectionLine}>
+            {formatMessage(messages.generationCompleteWithAzure)}
+          </p>
+        )}
+        <p className={styles.sectionLine}>
+          {formatMessage(
+            isServicesSelected
+              ? messages.seeReadMePrefixWithAzure
+              : messages.seeReadMePrefix
+          )}
+          <span className={styles.readMeText}>
+            {formatMessage(messages.readMe)}
+          </span>
+          {formatMessage(messages.seeReadMeSuffix)}
+        </p>
+      </div>
+    );
+  };
+
+  const renderTemplatesError = () => {
+    return (
+      <div className={styles.sectionLine}>
+        {formatMessage(messages.failedToGenerate)}
+      </div>
+    );
+  };
+
+  const renderTemplatesStatus = () => {
+    return (
+      <div className={styles.checkmarkStatusRow}>
+        <React.Fragment>
+          <div>{formatMessage(messages.projectCreation)}</div>
+          {templateGenerationInProgress && (
+            <div role="img" aria-label="project creation in progress">
+              <Spinner className={styles.spinner} />
+            </div>
+          )}
+          {templateGenerated && (
+            <div role="img" aria-label="project creation done">
+              <Checkmark className={styles.iconCheck} />
+            </div>
+          )}
+          {isTemplatesFailed && (
+            <div role="img" aria-label="project creation failed">
+              <ErrorRed className={styles.iconError} />
+            </div>
+          )}
+        </React.Fragment>
+      </div>
+    );
+  };
+
+  const renderServiceError = () => {
+    if (isTemplatesFailed) {
+      return (
+        <div className={styles.sectionLine}>
+          {isServicesSelected && formatMessage(messages.deploymentHalted)}
+        </div>
+      );
+    }
+    return Object.keys(serviceStatus).map((service: string, idx: number) => {
+      const serviceTitle = formatMessage(serviceStatus[service].title);
+      if (
+        serviceStatus[service].isSelected &&
+        serviceStatus[service].isFailed
+      ) {
+        serviceFailed = true;
+        return (
+          <div
+            className={styles.sectionLine}
+            key={`${messages.error.defaultMessage}${idx}`}
+          >{`${formatMessage(messages.error)} ${serviceTitle} ${formatMessage(
+            messages.deploymentFailure
+          )}`}</div>
+        );
+      }
+    });
+  };
+
   const renderServiceStatus = () => {
     if (isTemplatesFailed) {
-      return formatMessage(messages.deploymentHalted);
+      return Object.keys(serviceStatus).map((service: string, idx: number) => {
+        const serviceTitle = formatMessage(serviceStatus[service].title);
+        if (serviceStatus[service].isSelected) {
+          const halted = `${serviceTitle} deployment halted`;
+          return (
+            <div
+              className={styles.checkmarkStatusRow}
+              key={`${messages.isDeploying.defaultMessage}${idx}`}
+            >
+              <React.Fragment>
+                <div>{serviceTitle}</div>
+                <div role="img" aria-label={halted}>
+                  <ErrorRed className={styles.iconError} />
+                </div>
+              </React.Fragment>
+            </div>
+          );
+        }
+      });
     }
     return Object.keys(serviceStatus).map((service: string, idx: number) => {
       const serviceTitle = formatMessage(serviceStatus[service].title);
       if (serviceStatus[service].isSelected) {
         if (serviceStatus[service].isFailed) {
+          const failed = `${serviceTitle} deployment failed`;
           return (
             <div
-              key={`${messages.error.defaultMessage}${idx}`}
-            >{`${formatMessage(messages.error)} ${serviceTitle} ${formatMessage(
-              messages.deploymentFailure
-            )}`}</div>
+              className={styles.checkmarkStatusRow}
+              key={`${messages.isDeploying.defaultMessage}${idx}`}
+            >
+              <React.Fragment>
+                <div>{serviceTitle}</div>
+                <div role="img" aria-label={failed}>
+                  <ErrorRed className={styles.iconError} />
+                </div>
+              </React.Fragment>
+            </div>
           );
         }
         if (serviceStatus[service].isDeployed) {
+          const deployed = `${serviceTitle} deployment done`;
           return (
-            <ReactMarkdown
-              source={`${serviceTitle} ${formatMessage(
-                messages.deploymentSuccess
-              )} ${links[serviceTitle]}`}
-              key={`${messages.deploymentSuccess.defaultMessage}${idx}`}
-              renderers={{ link: LinkRenderer }}
-            />
+            <div className={styles.checkmarkStatusRow}>
+              <div>{serviceTitle}</div>
+              <div className={styles.inLine}>
+                <ReactMarkdown
+                  source={`${links[serviceTitle]}`}
+                  key={`${messages.deploymentSuccess.defaultMessage}${idx}`}
+                  renderers={{ link: LinkRenderer }}
+                />
+                <div role="img" aria-label={deployed}>
+                  <Checkmark className={styles.iconCheck} />
+                </div>
+              </div>
+            </div>
           );
         }
+        const inProgress = `${serviceTitle} deployment in progress`;
         return (
           <div
-            className={styles.loading}
+            className={styles.checkmarkStatusRow}
             key={`${messages.isDeploying.defaultMessage}${idx}`}
           >
-            {`${formatMessage(messages.isDeploying)} ${formatMessage(
-              serviceStatus[service].title
-            )}`}
+            <React.Fragment>
+              <div>{serviceTitle}</div>
+              <div role="img" aria-label={inProgress}>
+                <Spinner className={styles.spinner} />
+              </div>
+            </React.Fragment>
           </div>
         );
       }
@@ -174,68 +283,43 @@ const PostGenerationModal = ({
       <div className={styles.title}>
         {formatMessage(messages.creatingYourProject)}
       </div>
-      <div className={styles.templateStatus}>
-        <div className={styles.sectionLine}>
-          {isTemplatesFailed && formatMessage(messages.failedToGenerate)}
-        </div>
-        {!isTemplateGenerated && !isTemplatesFailed && (
+
+      <div className={styles.section}>
+        {templateGenerationInProgress && (
           <div className={styles.sectionLine}>{templateGenStatus}</div>
         )}
-        {isTemplateGenerated && !isTemplatesFailed && (
-          <div>
-            <p className={styles.sectionLine}>
-              {formatMessage(messages.generationComplete)}
-            </p>
-            <p className={styles.sectionLine}>
-              {formatMessage(messages.openReadMe)}
-              <span className={styles.readMeText}>
-                {formatMessage(messages.readMe)}
-              </span>
-              {formatMessage(messages.toStart)}
-            </p>
-          </div>
-        )}
+        {templateGenerated && postGenMessage()}
+        {isTemplatesFailed && renderTemplatesError()}
+        {isServicesSelected && renderServiceError()}
       </div>
-      {isServicesSelected && (
-        <div className={styles.section}>
-          <div className={styles.azureTitle}>
-            {formatMessage(messages.azureServices)}
-          </div>
-          <div className={styles.sectionLine}>{renderServiceStatus()}</div>
-        </div>
-      )}
-      <div className={styles.section}>
-        <div className={styles.sectionLineButton}>
-          {isTemplateGenerated && !isTemplatesFailed && isServicesDeployed && (
-            <button
-              className={styles.buttonToLink}
-              onClick={handleCreateAnotherProject}
-            >
-              {formatMessage(messages.createAnotherProject)}
-            </button>
-          )}
+
+      <div className={classnames(styles.section, styles.checkmarkSection)}>
+        <div className={styles.containerWithMargin}>
+          {renderTemplatesStatus()}
+          {isServicesSelected && renderServiceStatus()}
         </div>
       </div>
-      <div className={styles.sectionLineButton}>
-        {isTemplateGenerated && !isTemplatesFailed && isServicesDeployed && (
+
+      <div className={styles.footerContainer}>
+        {(isTemplatesFailed || serviceFailed) && (
+          <a
+            className={styles.link}
+            href={WEB_TEMPLATE_STUDIO_LINKS.ISSUES}
+            onKeyUp={keyUpHandler}
+          >
+            {formatMessage(messages.help)}
+          </a>
+        )}
+
+        {templateGenerated && isServicesDeployed && (
           <button
-            className={classnames(styles.buttonToLink)}
-            onClick={handleCloseWizard}
+            className={classnames(styles.button, buttonStyles.buttonDark)}
+            onClick={handleCreateAnotherProject}
           >
-            {formatMessage(messages.closeWizard)}
+            {formatMessage(messages.createAnotherProject)}
           </button>
         )}
-      </div>
-      <div className={styles.sectionLine}>
-        <a
-          className={styles.link}
-          href={WEB_TEMPLATE_STUDIO_LINKS.ISSUES}
-          onKeyUp={keyUpHandler}
-        >
-          {formatMessage(messages.help)}
-        </a>
-      </div>
-      <div className={styles.footerContainer}>
+
         <button
           className={classnames(styles.button, {
             [buttonStyles.buttonDark]: templateGenerationInProgress,
diff --git a/src/client/src/containers/PostGenerationModal/strings.ts b/src/client/src/containers/PostGenerationModal/strings.ts
index 980b0f9dd6..b6c62253d6 100644
--- a/src/client/src/containers/PostGenerationModal/strings.ts
+++ b/src/client/src/containers/PostGenerationModal/strings.ts
@@ -7,11 +7,11 @@ export const strings = defineMessages({
   },
   deploymentHalted: {
     id: "postGenerationModal.deploymentHalted",
-    defaultMessage: "ERROR: Halted due to template error."
+    defaultMessage: "ERROR: Azure Service deployment halted due to template error."
   },
   restartWizard: {
     id: "postGenerationModal.restartWizard",
-    defaultMessage: "Restart Wizard"
+    defaultMessage: "Restart"
   },
   error: {
     id: "postGenerationModal.error",
@@ -61,25 +61,29 @@ export const strings = defineMessages({
     id: "postGenerationModal.creatingYourProject",
     defaultMessage: "Creating Your Project"
   },
-  azureServices: {
-    id: "postGenerationModal.azureServices",
-    defaultMessage: "Azure Services"
+  projectCreation: {
+    id: "postGenerationModal.projectCreation",
+    defaultMessage: "Project Creation"
   },
-  generationComplete: {
-    id: "postGenerationModal.generationComplete",
-    defaultMessage: "Project successfully created."
+  generationCompleteWithAzure: {
+    id: "postGenerationModal.generationCompleteWithAzure",
+    defaultMessage: "Open your project while we take a few minutes to finish deploying Azure services."
   },
-  openReadMe: {
-    id: "postGenerationModal.openReadMe",
-    defaultMessage: "After 'Open Project' see "
+  seeReadMePrefix: {
+    id: "postGenerationModal.seeReadMePrefix",
+    defaultMessage: "Click 'Open Project' and see "
+  },
+  seeReadMePrefixWithAzure: {
+    id: "postGenerationModal.seeReadMePrefixWithAzure",
+    defaultMessage: "See "
   },
   readMe: {
     id: "postGenerationModal.readme",
     defaultMessage: "README.md"
   },
-  toStart: {
-    id: "postGenerationModal.toStart",
-    defaultMessage: " to start"
+  seeReadMeSuffix: {
+    id: "postGenerationModal.seeReadMeSuffix",
+    defaultMessage: " to get instructions."
   },
   templateGeneration: {
     id: "postGenerationModal.templateGeneration",
diff --git a/src/client/src/containers/PostGenerationModal/styles.module.css b/src/client/src/containers/PostGenerationModal/styles.module.css
index 7871724b96..71e52674bb 100644
--- a/src/client/src/containers/PostGenerationModal/styles.module.css
+++ b/src/client/src/containers/PostGenerationModal/styles.module.css
@@ -1,10 +1,3 @@
-.azureTitle {
-  font-family: Segoe UI;
-  font-size: 21px;
-  font-weight: lighter;
-  line-height: 19px;
-  color: var(--vscode-editor-foreground);
-}
 .title {
   font-size: 21px;
   font-family: "Segoe UI";
@@ -13,12 +6,20 @@
   color: var(--vscode-editor-foreground);
 }
 
+h1 {
+  font-size: 2.5em;
+  font-weight: 600;
+  font-weight: lighter;
+  margin-bottom: 0px;
+}
+
 .section {
   margin-top: 40px;
 }
 
 .sectionLine {
-  margin-top: 20px;
+  margin-top: 15px;
+  font-size: 1.2em;
 }
 
 .sectionLineButton {
@@ -31,16 +32,18 @@
 }
 
 .footerContainer {
-  margin-top: 40px;
+  margin-top: 60px;
   float: right;
   align-items: center;
+  display: flex;
 }
 
 .button {
+  align-items: center;
   font-size: 1.2em;
+  margin-left: 1em;
   display: flex;
   justify-content: space-between;
-  align-items: center;
   padding: 10px 33px;
 }
 
@@ -48,8 +51,32 @@
   outline: 1px solid var(--vscode-contrastActiveBorder);
 }
 
+.iconCheck {
+  margin-top: 3px;
+  margin-left: 1em;
+  height: 18px;
+}
+
+.iconError {
+  margin-top: 3px;
+  margin-left: 1em;
+  height: 18px;
+  width: 18px;
+}
+
+.iconError path {
+  fill: var(--vscode-errorForeground);
+}
+
+.iconCheck path {
+  fill: var(--vscode-gitDecoration-untrackedResourceForeground);
+}
+
 .spinner {
-  margin-right: 5px;
+  animation: rotate steps(60) 1s infinite;
+  height: 18px;
+  width: 18px;
+  margin-top: 3px;
 }
 
 .spinner path {
@@ -66,30 +93,28 @@
   }
 }
 
-.spinner {
-  animation: rotate steps(60) 1s infinite;
-  height: 20px;
-  width: 20px;
+/* styles for generation status checkmark section*/
+.checkmarkSection {
+  background-color: var(--vscode-editorWidget-border);
+}
+
+.containerWithMargin {
+  padding-top: 0.6em;
+  padding-bottom: 0.6em;
 }
 
-.templateStatus {
+.checkmarkStatusRow {
   display: flex;
-  justify-content: flex-start;
+  justify-content: space-between;
 }
 
-.buttonToLink {
-  display: inline-block;
-  border: none;
-  margin: 0;
-  text-decoration: none;
-  background: var(--vscode-menu-background);
-  color: var(--vscode-textLink-foreground);
-  font-family: sans-serif;
-  font-size: 1rem;
-  cursor: pointer;
-  text-align: center;
-  -webkit-appearance: none;
-  -moz-appearance: none;
+.checkmarkStatusRow > div {
+  padding: 0.6em 1.5em;
+  font-size: 1.2em;
+}
+
+.inLine {
+  display: flex;
 }
 
 .loading {
diff --git a/src/client/src/containers/ReviewAndGenerate/styles.module.css b/src/client/src/containers/ReviewAndGenerate/styles.module.css
index fd44e03c0e..eaddf2763f 100644
--- a/src/client/src/containers/ReviewAndGenerate/styles.module.css
+++ b/src/client/src/containers/ReviewAndGenerate/styles.module.css
@@ -8,6 +8,7 @@ h1 {
   font-size: 2.5em;
   font-weight: 600;
   font-weight: lighter;
+  margin-bottom: 15px;
 }
 
 .selectionContainer {
@@ -35,6 +36,7 @@ button {
   margin-left: 2%;
   width: calc(100% - 40px);
 }
+
 .buttonContainer {
   display: flex;
   align-items: center;
diff --git a/src/client/src/translations/en.json b/src/client/src/translations/en.json
index 48323798f3..24ab7fdaaf 100644
--- a/src/client/src/translations/en.json
+++ b/src/client/src/translations/en.json
@@ -118,7 +118,6 @@
   "pages.maxPagesText": "Notification",
   "pages.noPageGeneration": "At least 1 page must be selected",
   "pages.overlimitPagesMessage": "You cannot add more than 20 pages to the project",
-  "postGenerationModal.azureServices": "Azure Services",
   "postGenerationModal.closeWizard": "Close Wizard",
   "postGenerationModal.createAnotherProject": "Create New Project",
   "postGenerationModal.creatingYourProject": "Creating Your Project",
@@ -126,17 +125,19 @@
   "postGenerationModal.deploymentHalted": "ERROR: Halted due to template error.",
   "postGenerationModal.error": "failed to deploy.",
   "postGenerationModal.failedToGenerate": "Templates failed to generate.",
-  "postGenerationModal.generationComplete": "Generation complete",
+  "postGenerationModal.generationCompleteWithAzure": "Open your project while we take a few minutes to finish deploying Azure services.",
   "postGenerationModal.help": "Help",
   "postGenerationModal.isDeploying": "Deploying",
   "postGenerationModal.noServicesToDeploy": "No services to deploy.",
   "postGenerationModal.openInCode": "Open Project in VSCode",
-  "postGenerationModal.openReadMe": "After 'Open Project' see ",
+  "postGenerationModal.projectCreation": "Project Creation",
   "postGenerationModal.readme": "README.md",
-  "postGenerationModal.restartWizard": "Restart Wizard",
+  "postGenerationModal.restartWizard": "Restart",
+  "postGenerationModal.seeReadMePrefix": "After 'Open Project' see ",
+  "postGenerationModal.seeReadMePrefixWithAzure": "See ",
+  "postGenerationModal.seeReadMeSuffix": " to get instructions.",
   "postGenerationModal.success": "is deployed on [Azure](https://ms.portal.azure.com/).",
   "postGenerationModal.templateGeneration": "Template Generation",
-  "postGenerationModal.toStart": " to start",
   "postGenerationModal.unknownStatus": "Unknown Status",
   "postGenerationModal.working": "Working",
   "projectName.ariaProjectName": "Project Name Input",
diff --git a/src/client/src/translations/whitelist_en.json b/src/client/src/translations/whitelist_en.json
index 5f2b257eb4..f97cae62f4 100644
--- a/src/client/src/translations/whitelist_en.json
+++ b/src/client/src/translations/whitelist_en.json
@@ -55,6 +55,7 @@
   "cosmosResourceModule.accountNameSubLabel",
   "dependencyChecker.notInstalledMessage",
   "dependencyChecker.iconAltMessage",
+  "footer.license",
   "footer.back",
   "footer.next",
   "footer.generate",
@@ -72,10 +73,11 @@
   "postGenerationModal.noServicesToDeploy",
   "postGenerationModal.createAnotherProject",
   "postGenerationModal.creatingYourProject",
-  "postGenerationModal.azureServices",
-  "postGenerationModal.openReadMe",
+  "postGenerationModal.projectCreation",
+  "postGenerationModal.generationCompleteWithAzure",
+  "postGenerationModal.seeReadMePrefixWithAzure",
   "postGenerationModal.readme",
-  "postGenerationModal.toStart",
+  "postGenerationModal.seeReadMeSuffix",
   "postGenerationModal.templateGeneration",
   "projectName.ariaProjectName",
   "projectNameError.nameTooLong",