diff --git a/.verdaccio/htpasswd b/.verdaccio/htpasswd
index 8b73dbf2d1..8391cd4b0a 100644
--- a/.verdaccio/htpasswd
+++ b/.verdaccio/htpasswd
@@ -1,2 +1 @@
 test:$6FrCaT/v0dwE:autocreated 2020-03-25T19:10:50.254Z
-dddd:ZpRSQxtFPtZog:autocreated 2021-08-21T07:57:21.687Z
diff --git a/e2e/angular-core/src/angular-core.test.ts b/e2e/angular-core/src/angular-core.test.ts
index e1934db898..532dea4dd1 100644
--- a/e2e/angular-core/src/angular-core.test.ts
+++ b/e2e/angular-core/src/angular-core.test.ts
@@ -44,10 +44,11 @@ describe('Angular Package', () => {
           names(mylib).className
         }Module } from '@${proj}/my-dir/${mylib}';
         import { AppComponent } from './app.component';
+        import { NxWelcomeComponent } from './nx-welcome.component';
 
         @NgModule({
           imports: [BrowserModule, MyDir${names(mylib).className}Module],
-          declarations: [AppComponent],
+          declarations: [AppComponent, NxWelcomeComponent],
           bootstrap: [AppComponent]
         })
         export class AppModule {}
diff --git a/e2e/angular-extensions/src/angular-app.test.ts b/e2e/angular-extensions/src/angular-app.test.ts
index 1aea96adb1..8eac6a924f 100644
--- a/e2e/angular-extensions/src/angular-app.test.ts
+++ b/e2e/angular-extensions/src/angular-app.test.ts
@@ -53,9 +53,10 @@ describe('Angular Package', () => {
         }Module} from '@${proj}/${buildableLib}';
 
         import { AppComponent } from './app.component';
+        import { NxWelcomeComponent } from './nx-welcome.component';
 
         @NgModule({
-          declarations: [AppComponent],
+          declarations: [AppComponent, NxWelcomeComponent],
           imports: [BrowserModule, ${names(buildableLib).className}Module],
           providers: [],
           bootstrap: [AppComponent],
diff --git a/e2e/next/src/next.test.ts b/e2e/next/src/next.test.ts
index f771ddc970..b8207d0a83 100644
--- a/e2e/next/src/next.test.ts
+++ b/e2e/next/src/next.test.ts
@@ -613,7 +613,6 @@ async function checkApp(
   const buildResult = runCLI(`build ${appName} --withDeps`);
   expect(buildResult).toContain(`Compiled successfully`);
   checkFilesExist(`dist/apps/${appName}/.next/build-manifest.json`);
-  checkFilesExist(`dist/apps/${appName}/public/star.svg`);
 
   const packageJson = readJson(`dist/apps/${appName}/package.json`);
   expect(packageJson.dependencies.react).toBeDefined();
diff --git a/packages/angular/src/generators/application/application.spec.ts b/packages/angular/src/generators/application/application.spec.ts
index b079b10eb6..c1e224ba6e 100644
--- a/packages/angular/src/generators/application/application.spec.ts
+++ b/packages/angular/src/generators/application/application.spec.ts
@@ -133,7 +133,7 @@ describe('app', () => {
       const myAppPrefix = workspaceJson.projects['my-app'].prefix;
 
       expect(myAppPrefix).toEqual('proj');
-      expect(appE2eSpec).toContain('Welcome to my-app!');
+      expect(appE2eSpec).toContain('Welcome my-app');
     });
 
     it('should set a new prefix and use it', async () => {
@@ -151,7 +151,7 @@ describe('app', () => {
       const myAppPrefix = workspaceJson.projects['my-app-with-prefix'].prefix;
 
       expect(myAppPrefix).toEqual('custom');
-      expect(appE2eSpec).toContain('Welcome to my-app-with-prefix!');
+      expect(appE2eSpec).toContain('Welcome my-app-with-prefix');
     });
 
     // TODO: this should work
@@ -289,7 +289,7 @@ describe('app', () => {
       await generateApp(appTree, 'myApp', { directory: 'myDir' });
       expect(
         appTree.read('apps/my-dir/my-app/src/app/app.component.html', 'utf-8')
-      ).toContain('Thank you for using and showing some ♥ for Nx.');
+      ).toContain('<proj-nx-welcome></proj-nx-welcome>');
     });
 
     it("should update `template`'s property of AppComponent with Nx content", async () => {
@@ -299,7 +299,17 @@ describe('app', () => {
       });
       expect(
         appTree.read('apps/my-dir/my-app/src/app/app.component.ts', 'utf-8')
-      ).toContain('Thank you for using and showing some ♥ for Nx.');
+      ).toContain('<proj-nx-welcome></proj-nx-welcome>');
+    });
+
+    it('should create Nx specific `nx-welcome.component.ts` file', async () => {
+      await generateApp(appTree, 'myApp', { directory: 'myDir' });
+      expect(
+        appTree.read(
+          'apps/my-dir/my-app/src/app/nx-welcome.component.ts',
+          'utf-8'
+        )
+      ).toContain('Hello there');
     });
 
     it('should update the AppComponent spec to target Nx content', async () => {
@@ -313,7 +323,7 @@ describe('app', () => {
       );
 
       expect(testFileContent).toContain(`querySelector('h1')`);
-      expect(testFileContent).toContain('Welcome to my-dir-my-app!');
+      expect(testFileContent).toContain('Welcome my-dir-my-app');
     });
   });
 
@@ -633,7 +643,7 @@ describe('app', () => {
 
         expect(
           appTree.read('apps/my-app-e2e/src/app.e2e-spec.ts', 'utf-8')
-        ).toContain(`'Welcome to my-app!'`);
+        ).toContain(`'Welcome my-app'`);
         expect(
           appTree.read('apps/my-app-e2e/src/app.po.ts', 'utf-8')
         ).toContain(`'proj-root header h1'`);
@@ -650,7 +660,7 @@ describe('app', () => {
             'apps/my-directory/my-app-e2e/src/app.e2e-spec.ts',
             'utf-8'
           )
-        ).toContain(`'Welcome to my-directory-my-app!'`);
+        ).toContain(`'Welcome my-directory-my-app'`);
         expect(
           appTree.read('apps/my-directory/my-app-e2e/src/app.po.ts', 'utf-8')
         ).toContain(`'proj-root header h1'`);
diff --git a/packages/angular/src/generators/application/application.ts b/packages/angular/src/generators/application/application.ts
index 2655e104bf..b045b6a505 100644
--- a/packages/angular/src/generators/application/application.ts
+++ b/packages/angular/src/generators/application/application.ts
@@ -17,8 +17,8 @@ import init from '../init/init';
 import {
   createFiles,
   normalizeOptions,
-  updateComponentStyles,
-  updateComponentTemplate,
+  updateAppComponentTemplate,
+  updateNxComponentTemplate,
   updateConfigFiles,
   addE2e,
   updateComponentSpec,
@@ -78,8 +78,24 @@ export async function applicationGenerator(
 
   moveFilesToNewDirectory(host, appProjectRoot, options.appProjectRoot);
   updateConfigFiles(host, options);
-  updateComponentTemplate(host, options);
-  updateComponentStyles(host, options);
+  updateAppComponentTemplate(host, options);
+
+  // Create the NxWelcomeComponent
+  const angularComponentSchematic = wrapAngularDevkitSchematic(
+    '@schematics/angular',
+    'component'
+  );
+  await angularComponentSchematic(host, {
+    name: 'NxWelcome',
+    inlineTemplate: true,
+    prefix: options.prefix,
+    skipTests: true,
+    style: 'none',
+    flat: true,
+    viewEncapsulation: 'None',
+    project: options.name,
+  });
+  updateNxComponentTemplate(host, options);
 
   if (options.unitTestRunner !== UnitTestRunner.None) {
     updateComponentSpec(host, options);
diff --git a/packages/angular/src/generators/application/lib/index.ts b/packages/angular/src/generators/application/lib/index.ts
index 6d72bd4ace..78a03502c2 100644
--- a/packages/angular/src/generators/application/lib/index.ts
+++ b/packages/angular/src/generators/application/lib/index.ts
@@ -12,8 +12,8 @@ export * from './remove-scaffolded-e2e';
 export * from './root-router-config';
 export * from './set-app-strict-default';
 export * from './update-component-spec';
-export * from './update-component-styles';
-export * from './update-component-template';
+export * from './update-app-component-template';
+export * from './update-nx-component-template';
 export * from './update-config-files';
 export * from './update-e2e-project';
 export * from './update-editor-tsconfig';
diff --git a/packages/angular/src/generators/application/lib/nrwl-home-tpl.ts b/packages/angular/src/generators/application/lib/nrwl-home-tpl.ts
index 19cf18b347..dabe84ec8f 100644
--- a/packages/angular/src/generators/application/lib/nrwl-home-tpl.ts
+++ b/packages/angular/src/generators/application/lib/nrwl-home-tpl.ts
@@ -1,322 +1,798 @@
 export const nrwlHomeTemplate = {
-  html: `
-  <header class="flex">
-      <svg width="40" height="40" viewBox="0 0 262 163"><polygon id="Path" fill="#ffffff" points="130.68 104.59 97.49 52.71 97.44 96.3 40.24 0 0 0 0 162.57 39.79 162.57 39.92 66.39 96.53 158.26"></polygon><polygon id="Path" fill="#ffffff" points="97.5 41.79 137.24 41.79 137.33 41.33 137.33 0 97.54 0 97.49 41.33"></polygon><path d="M198.66,86.86 C189.139872,86.6795216 180.538723,92.516445 177.19,101.43 C182.764789,93.0931021 193.379673,89.7432211 202.73,93.37 C207.05,95.13 212.73,97.97 217.23,96.45 C212.950306,90.4438814 206.034895,86.8725952 198.66,86.86 L198.66,86.86 Z" id="Path" fill="#96D8E9"></path><path d="M243.75,106.42 C243.75,101.55 241.1,100.42 235.6,98.42 C231.52,97 226.89,95.4 223.52,91 C222.86,90.13 222.25,89.15 221.6,88.11 C220.14382,85.4164099 218.169266,83.037429 215.79,81.11 C212.58,78.75 208.37,77.6 202.91,77.6 C191.954261,77.6076705 182.084192,84.2206169 177.91,94.35 C183.186964,87.0278244 191.956716,83.0605026 200.940147,83.9314609 C209.923578,84.8024193 217.767888,90.3805017 221.54,98.58 C223.424615,101.689762 227.141337,103.174819 230.65,102.22 C236.02,101.07 235.65,106.15 243.76,107.87 L243.75,106.42 Z" id="Path" fill="#48C4E5"></path><path d="M261.46,105.38 L261.46,105.27 C261.34,73.03 235.17,45.45 202.91,45.45 C183.207085,45.4363165 164.821777,55.3450614 154,71.81 L153.79,71.45 L137.23,45.45 L97.5,45.4499858 L135.25,104.57 L98.41,162.57 L137,162.57 L153.79,136.78 L170.88,162.57 L209.48,162.57 L174.48,107.49 C173.899005,106.416838 173.583536,105.220114 173.56,104 C173.557346,96.2203871 176.64661,88.7586448 182.147627,83.2576275 C187.648645,77.7566101 195.110387,74.6673462 202.89,74.67 C219.11,74.67 221.82,84.37 225.32,88.93 C232.23,97.93 246.03,93.99 246.03,105.73 L246.03,105.73 C246.071086,108.480945 247.576662,111.001004 249.979593,112.340896 C252.382524,113.680787 255.317747,113.636949 257.679593,112.225896 C260.041438,110.814842 261.471086,108.250945 261.43,105.5 L261.43,105.5 L261.43,105.38 L261.46,105.38 Z" id="Path" fill="#ffffff"></path><path d="M261.5,113.68 C261.892278,116.421801 261.504116,119.218653 260.38,121.75 C258.18,126.84 254.51,125.14 254.51,125.14 C254.51,125.14 251.35,123.6 253.27,120.65 C255.4,117.36 259.61,117.74 261.5,113.68 Z" id="Path" fill="#022f56"></path></svg>
-      <h1>Welcome to {{title}}!</h1>
-  </header>
-  <main>
-      <h2>Resources &amp; Tools</h2>
-      <p>
-        Thank you for using and showing some ♥ for Nx.
-      </p>
-      <div class="flex github-star-container">
-        <a href="https://github.com/nrwl/nx" target="_blank" rel="noopener noreferrer"> If you like Nx, please give it a star:
-          <div class="github-star-badge">
-            <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
-              Star
+  getSelector: (prefix) => `<${prefix}-nx-welcome></${prefix}-nx-welcome>`,
+  template: (title) => `
+     <!--
+     * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+     This is a starter component and can be deleted.
+     * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+     Delete this file and get started with your project!
+     * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+     -->
+    <style>
+      html {
+        -webkit-text-size-adjust: 100%;
+        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+          'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
+          'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+          'Noto Color Emoji';
+        line-height: 1.5;
+        tab-size: 4;
+        scroll-behavior: smooth;
+      }
+      body {
+        font-family: inherit;
+        line-height: inherit;
+        margin: 0;
+      }
+      h1,
+      h2,
+      p,
+      pre {
+        margin: 0;
+      }
+      *,
+      ::before,
+      ::after {
+        box-sizing: border-box;
+        border-width: 0;
+        border-style: solid;
+        border-color: currentColor;
+      }
+      h1,
+      h2 {
+        font-size: inherit;
+        font-weight: inherit;
+      }
+      a {
+        color: inherit;
+        text-decoration: inherit;
+      }
+      pre {
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          'Liberation Mono', 'Courier New', monospace;
+      }
+      svg {
+        display: block;
+        vertical-align: middle;
+      }
+
+      svg {
+        shape-rendering: auto;
+        text-rendering: optimizeLegibility;
+      }
+      pre {
+        background-color: rgba(55, 65, 81, 1);
+        border-radius: 0.25rem;
+        color: rgba(229, 231, 235, 1);
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          'Liberation Mono', 'Courier New', monospace;
+        overflow: scroll;
+        padding: 0.5rem 0.75rem;
+      }
+
+      .shadow {
+        box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+          0 4px 6px -2px rgba(0, 0, 0, 0.05);
+      }
+      .rounded {
+        border-radius: 1.5rem;
+      }
+
+      .wrapper {
+        width: 100%;
+      }
+      .container {
+        margin-left: auto;
+        margin-right: auto;
+        max-width: 768px;
+        padding-bottom: 3rem;
+        padding-left: 1rem;
+        padding-right: 1rem;
+        color: rgba(55, 65, 81, 1);
+        width: 100%;
+      }
+      #welcome {
+        margin-top: 2.5rem;
+      }
+      #welcome h1 {
+        font-size: 3rem;
+        font-weight: 500;
+        letter-spacing: -0.025em;
+        line-height: 1;
+      }
+      #welcome span {
+        display: block;
+        font-size: 1.875rem;
+        font-weight: 300;
+        line-height: 2.25rem;
+        margin-bottom: 0.5rem;
+      }
+      #hero {
+        align-items: center;
+        background-color: hsla(214, 62%, 21%, 1);
+        border: none;
+        box-sizing: border-box;
+        color: rgba(55, 65, 81, 1);
+        display: grid;
+        grid-template-columns: 1fr;
+        margin-top: 3.5rem;
+      }
+      #hero .text-container {
+        color: rgba(255, 255, 255, 1);
+        padding: 3rem 2rem;
+      }
+      #hero .text-container h2 {
+        font-size: 1.5rem;
+        line-height: 2rem;
+        position: relative;
+      }
+      #hero .text-container h2 svg {
+        color: hsla(162, 47%, 50%, 1);
+        height: 2rem;
+        left: -0.25rem;
+        position: absolute;
+        top: 0;
+        width: 2rem;
+      }
+      #hero .text-container h2 span {
+        margin-left: 2.5rem;
+      }
+      #hero .text-container a {
+        background-color: rgba(255, 255, 255, 1);
+        border-radius: 0.75rem;
+        color: rgba(55, 65, 81, 1);
+        display: inline-block;
+        margin-top: 1.5rem;
+        padding: 1rem 2rem;
+        text-decoration: inherit;
+      }
+      #hero .logo-container {
+        display: none;
+        justify-content: center;
+        padding-left: 2rem;
+        padding-right: 2rem;
+      }
+      #hero .logo-container svg {
+        color: rgba(255, 255, 255, 1);
+        width: 66.666667%;
+      }
+
+      #middle-content {
+        align-items: flex-start;
+        display: grid;
+        gap: 4rem;
+        grid-template-columns: 1fr;
+        margin-top: 3.5rem;
+      }
+
+      #learning-materials {
+        padding: 2.5rem 2rem;
+      }
+      #learning-materials h2 {
+        font-weight: 500;
+        font-size: 1.25rem;
+        letter-spacing: -0.025em;
+        line-height: 1.75rem;
+        padding-left: 1rem;
+        padding-right: 1rem;
+      }
+      .list-item-link {
+        align-items: center;
+        border-radius: 0.75rem;
+        display: flex;
+        margin-top: 1rem;
+        padding: 1rem;
+        transition-property: background-color, border-color, color, fill, stroke,
+          opacity, box-shadow, transform, filter, backdrop-filter,
+          -webkit-backdrop-filter;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+        width: 100%;
+      }
+      .list-item-link svg:first-child {
+        margin-right: 1rem;
+        height: 1.5rem;
+        transition-property: background-color, border-color, color, fill, stroke,
+          opacity, box-shadow, transform, filter, backdrop-filter,
+          -webkit-backdrop-filter;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+        width: 1.5rem;
+      }
+      .list-item-link > span {
+        flex-grow: 1;
+        font-weight: 400;
+        transition-property: background-color, border-color, color, fill, stroke,
+          opacity, box-shadow, transform, filter, backdrop-filter,
+          -webkit-backdrop-filter;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+      }
+      .list-item-link > span > span {
+        color: rgba(107, 114, 128, 1);
+        display: block;
+        flex-grow: 1;
+        font-size: 0.75rem;
+        font-weight: 300;
+        line-height: 1rem;
+        transition-property: background-color, border-color, color, fill, stroke,
+          opacity, box-shadow, transform, filter, backdrop-filter,
+          -webkit-backdrop-filter;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+      }
+      .list-item-link svg:last-child {
+        height: 1rem;
+        transition-property: all;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+        width: 1rem;
+      }
+      .list-item-link:hover {
+        color: rgba(255, 255, 255, 1);
+        background-color: hsla(162, 47%, 50%, 1);
+      }
+      .list-item-link:hover > span {
+      }
+      .list-item-link:hover > span > span {
+        color: rgba(243, 244, 246, 1);
+      }
+      .list-item-link:hover svg:last-child {
+        transform: translateX(0.25rem);
+      }
+
+      #other-links {
+      }
+      .button-pill {
+        padding: 1.5rem 2rem;
+        transition-duration: 300ms;
+        transition-property: background-color, border-color, color, fill, stroke,
+          opacity, box-shadow, transform, filter, backdrop-filter,
+          -webkit-backdrop-filter;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        align-items: center;
+        display: flex;
+      }
+      .button-pill svg {
+        transition-property: background-color, border-color, color, fill, stroke,
+          opacity, box-shadow, transform, filter, backdrop-filter,
+          -webkit-backdrop-filter;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+        flex-shrink: 0;
+        width: 3rem;
+      }
+      .button-pill > span {
+        letter-spacing: -0.025em;
+        font-weight: 400;
+        font-size: 1.125rem;
+        line-height: 1.75rem;
+        padding-left: 1rem;
+        padding-right: 1rem;
+      }
+      .button-pill span span {
+        display: block;
+        font-size: 0.875rem;
+        font-weight: 300;
+        line-height: 1.25rem;
+      }
+      .button-pill:hover svg,
+      .button-pill:hover {
+        color: rgba(255, 255, 255, 1) !important;
+      }
+      #nx-console:hover {
+        background-color: rgba(0, 122, 204, 1);
+      }
+      #nx-console svg {
+        color: rgba(0, 122, 204, 1);
+      }
+
+      #nx-repo:hover {
+        background-color: rgba(24, 23, 23, 1);
+      }
+      #nx-repo svg {
+        color: rgba(24, 23, 23, 1);
+      }
+
+      #nx-cloud {
+        margin-bottom: 2rem;
+        margin-top: 2rem;
+        padding: 2.5rem 2rem;
+      }
+      #nx-cloud > div {
+        align-items: center;
+        display: flex;
+      }
+      #nx-cloud > div svg {
+        border-radius: 0.375rem;
+        flex-shrink: 0;
+        width: 3rem;
+      }
+      #nx-cloud > div h2 {
+        font-size: 1.125rem;
+        font-weight: 400;
+        letter-spacing: -0.025em;
+        line-height: 1.75rem;
+        padding-left: 1rem;
+        padding-right: 1rem;
+      }
+      #nx-cloud > div h2 span {
+        display: block;
+        font-size: 0.875rem;
+        font-weight: 300;
+        line-height: 1.25rem;
+      }
+      #nx-cloud p {
+        font-size: 1rem;
+        line-height: 1.5rem;
+        margin-top: 1rem;
+      }
+      #nx-cloud pre {
+        margin-top: 1rem;
+      }
+      #nx-cloud a {
+        color: rgba(107, 114, 128, 1);
+        display: block;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        margin-top: 1.5rem;
+        text-align: right;
+      }
+      #nx-cloud a:hover {
+        text-decoration: underline;
+      }
+
+      #commands {
+        padding: 2.5rem 2rem;
+
+        margin-top: 3.5rem;
+      }
+      #commands h2 {
+        font-size: 1.25rem;
+        font-weight: 400;
+        letter-spacing: -0.025em;
+        line-height: 1.75rem;
+        padding-left: 1rem;
+        padding-right: 1rem;
+      }
+      #commands p {
+        font-size: 1rem;
+        font-weight: 300;
+        line-height: 1.5rem;
+        margin-top: 1rem;
+        padding-left: 1rem;
+        padding-right: 1rem;
+      }
+      details {
+        align-items: center;
+        display: flex;
+        margin-top: 1rem;
+        padding-left: 1rem;
+        padding-right: 1rem;
+        width: 100%;
+      }
+      details pre > span {
+        color: rgba(181, 181, 181, 1);
+      }
+      summary {
+        border-radius: 0.5rem;
+        display: flex;
+        font-weight: 400;
+        padding: 0.5rem;
+        cursor: pointer;
+        transition-property: background-color, border-color, color, fill, stroke,
+          opacity, box-shadow, transform, filter, backdrop-filter,
+          -webkit-backdrop-filter;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+      }
+      summary:hover {
+        background-color: rgba(243, 244, 246, 1);
+      }
+      summary svg {
+        height: 1.5rem;
+        margin-right: 1rem;
+        width: 1.5rem;
+      }
+
+      #love {
+        color: rgba(107, 114, 128, 1);
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        margin-top: 3.5rem;
+        opacity: 0.6;
+        text-align: center;
+      }
+      #love svg {
+        color: rgba(252, 165, 165, 1);
+        width: 1.25rem;
+        height: 1.25rem;
+        display: inline;
+        margin-top: -0.25rem;
+      }
+
+      @media screen and (min-width: 768px) {
+        #hero {
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
+        #hero .logo-container {
+          display: flex;
+        }
+        #middle-content {
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
+      }
+    </style>
+    <div class="wrapper">
+      <div class="container">
+        <!--  WELCOME  -->
+        <div id="welcome">
+          <h1>
+            <span> Hello there, </span>
+            Welcome ${title} 👋
+          </h1>
+        </div>
+
+        <!--  HERO  -->
+        <div id="hero" class="rounded">
+          <div class="text-container">
+            <h2>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
+                />
+              </svg>
+              <span>You&apos;re up and running</span>
+            </h2>
+            <a href="#commands"> What&apos;s next? </a>
           </div>
-        </a>
+          <div class="logo-container">
+            <svg
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M11.987 14.138l-3.132 4.923-5.193-8.427-.012 8.822H0V4.544h3.691l5.247 8.833.005-3.998 3.044 4.759zm.601-5.761c.024-.048 0-3.784.008-3.833h-3.65c.002.059-.005 3.776-.003 3.833h3.645zm5.634 4.134a2.061 2.061 0 0 0-1.969 1.336 1.963 1.963 0 0 1 2.343-.739c.396.161.917.422 1.33.283a2.1 2.1 0 0 0-1.704-.88zm3.39 1.061c-.375-.13-.8-.277-1.109-.681-.06-.08-.116-.17-.176-.265a2.143 2.143 0 0 0-.533-.642c-.294-.216-.68-.322-1.18-.322a2.482 2.482 0 0 0-2.294 1.536 2.325 2.325 0 0 1 4.002.388.75.75 0 0 0 .836.334c.493-.105.46.36 1.203.518v-.133c-.003-.446-.246-.55-.75-.733zm2.024 1.266a.723.723 0 0 0 .347-.638c-.01-2.957-2.41-5.487-5.37-5.487a5.364 5.364 0 0 0-4.487 2.418c-.01-.026-1.522-2.39-1.538-2.418H8.943l3.463 5.423-3.379 5.32h3.54l1.54-2.366 1.568 2.366h3.541l-3.21-5.052a.7.7 0 0 1-.084-.32 2.69 2.69 0 0 1 2.69-2.691h.001c1.488 0 1.736.89 2.057 1.308.634.826 1.9.464 1.9 1.541a.707.707 0 0 0 1.066.596zm.35.133c-.173.372-.56.338-.755.639-.176.271.114.412.114.412s.337.156.538-.311c.104-.231.14-.488.103-.74z"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <!--  MIDDLE CONTENT  -->
+        <div id="middle-content">
+          <div id="learning-materials" class="rounded shadow">
+            <h2>Learning materials</h2>
+            <a href="https://nx.dev/getting-started/intro?utm_source=nx-project" target="_blank" rel="noreferrer" class="list-item-link">
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
+                />
+              </svg>
+              <span>
+                Documentation
+                <span> Everything is in there </span>
+              </span>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M9 5l7 7-7 7"
+                />
+              </svg>
+            </a>
+            <a href="https://blog.nrwl.io/?utm_source=nx-project" target="_blank" rel="noreferrer" class="list-item-link">
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"
+                />
+              </svg>
+              <span>
+                Blog
+                <span> Changelog, features & events </span>
+              </span>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M9 5l7 7-7 7"
+                />
+              </svg>
+            </a>
+            <a href="https://www.youtube.com/c/Nrwl_io/videos?utm_source=nx-project&sub_confirmation=1" target="_blank" rel="noreferrer" class="list-item-link">
+              <svg
+                role="img"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <title>YouTube</title>
+                <path
+                  d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"
+                />
+              </svg>
+              <span>
+                YouTube channel
+                <span> Nx Show, talks & tutorials </span>
+              </span>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M9 5l7 7-7 7"
+                />
+              </svg>
+            </a>
+            <a href="https://nx.dev/tutorial/01-create-application?utm_source=nx-project" target="_blank" rel="noreferrer" class="list-item-link">
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
+                />
+              </svg>
+              <span>
+                Interactive tutorials
+                <span> Create an app, step-by-step </span>
+              </span>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M9 5l7 7-7 7"
+                />
+              </svg>
+            </a>
+            <a href="https://nxplaybook.com/?utm_source=nx-project" target="_blank" rel="noreferrer" class="list-item-link">
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path d="M12 14l9-5-9-5-9 5 9 5z" />
+                <path
+                  d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
+                />
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
+                />
+              </svg>
+              <span>
+                Video courses
+                <span> Nx custom courses </span>
+              </span>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M9 5l7 7-7 7"
+                />
+              </svg>
+            </a>
+          </div>
+          <div id="other-links">
+            <a id="nx-console" class="button-pill rounded shadow" href="https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console&utm_source=nx-project" target="_blank" rel="noreferrer">
+              <svg
+                fill="currentColor"
+                role="img"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <title>Visual Studio Code</title>
+                <path
+                  d="M23.15 2.587L18.21.21a1.494 1.494 0 0 0-1.705.29l-9.46 8.63-4.12-3.128a.999.999 0 0 0-1.276.057L.327 7.261A1 1 0 0 0 .326 8.74L3.899 12 .326 15.26a1 1 0 0 0 .001 1.479L1.65 17.94a.999.999 0 0 0 1.276.057l4.12-3.128 9.46 8.63a1.492 1.492 0 0 0 1.704.29l4.942-2.377A1.5 1.5 0 0 0 24 20.06V3.939a1.5 1.5 0 0 0-.85-1.352zm-5.146 14.861L10.826 12l7.178-5.448v10.896z"
+                />
+              </svg>
+              <span>
+                Install Nx Console
+                <span>Plugin for VSCode</span>
+              </span>
+            </a>
+            <div id="nx-cloud" class="rounded shadow">
+              <div>
+                <svg
+                  viewBox="0 0 120 120"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M120 15V30C103.44 30 90 43.44 90 60C90 76.56 76.56 90 60 90C43.44 90 30 103.44 30 120H15C6.72 120 0 113.28 0 105V15C0 6.72 6.72 0 15 0H105C113.28 0 120 6.72 120 15Z"
+                    fill="#0E2039"
+                  />
+                  <path
+                    d="M120 30V105C120 113.28 113.28 120 105 120H30C30 103.44 43.44 90 60 90C76.56 90 90 76.56 90 60C90 43.44 103.44 30 120 30Z"
+                    fill="white"
+                  />
+                </svg>
+                <h2>
+                  NxCloud
+                  <span>
+                    Enable faster CI & better DX
+                  </span>
+                </h2>
+              </div>
+              <p>
+                You can activate distributed tasks executions and caching by
+                running:
+              </p>
+              <pre>nx connect-to-nx-cloud</pre>
+              <a href="https://nx.app/?utm_source=nx-project" target="_blank" rel="noreferrer"> What is Nx Cloud? </a>
+            </div>
+            <a id="nx-repo" class="button-pill rounded shadow" href="https://github.com/nrwl/nx?utm_source=nx-project" target="_blank" rel="noreferrer">
+              <svg
+                fill="currentColor"
+                role="img"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+                />
+              </svg>
+              <span>
+                Nx is open source
+                <span> Love Nx? Give us a star! </span>
+              </span>
+            </a>
+          </div>
+        </div>
+
+        <!--  COMMANDS  -->
+        <div id="commands" class="rounded shadow">
+          <h2>Next steps</h2>
+          <p>Here are some things you can do with Nx:</p>
+          <details>
+            <summary>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                />
+              </svg>
+              Add UI library
+            </summary>
+            <pre><span># Generate UI lib</span>
+nx g @nrwl/angular:lib ui
+
+<span># Add a component</span>
+nx g @nrwl/angular:component button --project ui</pre>
+          </details>
+          <details>
+            <summary>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                />
+              </svg>
+              View interactive dependency graph
+            </summary>
+            <pre>nx dep-graph</pre>
+          </details>
+          <details>
+            <summary>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                />
+              </svg>
+              Run affected commands
+            </summary>
+            <pre><span># see what&apos;s been affected by changes</span>
+nx affected:dep-graph
+
+<span># run tests for current changes</span>
+nx affected:test
+
+<span># run e2e tests for current changes</span>
+nx affected:e2e</pre>
+          </details>
+        </div>
+
+        <p id="love">
+          Carefully crafted with
+          <svg
+            fill="currentColor"
+            stroke="none"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+            />
+          </svg>
+        </p>
       </div>
-      <p>
-        Here are some links to help you get started.
-      </p>
-      <ul class="resources">
-          <li class="col-span-2">
-              <a
-                      class="resource flex"
-                      href="https://nxplaybook.com/p/nx-workspaces"
-              >
-                  Nx video course
-              </a>
-          </li>
-          <li class="col-span-2">
-              <a
-                      class="resource flex"
-                      href="https://nx.dev/latest/angular/getting-started/intro"
-              >
-                  Nx video tutorial
-              </a>
-          </li>
-          <li class="col-span-2">
-              <a
-                      class="resource flex"
-                      href="https://nx.dev/latest/angular/tutorial/01-create-application"
-              >
-                  Interactive tutorial
-              </a>
-          </li>
-          <li class="col-span-2">
-              <a class="resource flex" href="https://nx.app/">
-                  <svg width="36" height="36" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M120 15V30C103.44 30 90 43.44 90 60C90 76.56 76.56 90 60 90C43.44 90 30 103.44 30 120H15C6.72 120 0 113.28 0 105V15C0 6.72 6.72 0 15 0H105C113.28 0 120 6.72 120 15Z" fill="#0E2039"/>
-                    <path d="M120 30V105C120 113.28 113.28 120 105 120H30C30 103.44 43.44 90 60 90C76.56 90 90 76.56 90 60C90 43.44 103.44 30 120 30Z" fill="white"/>
-                  </svg>
-                  <span class="gutter-left">Nx Cloud</span>
-              </a>
-          </li>
-      </ul>
-      <h2>Next Steps</h2>
-      <p>Here are some things you can do with Nx.</p>
-      <details open>
-          <summary>Add UI library</summary>
-          <pre>
-  # Generate UI lib
-  nx g @nrwl/angular:lib ui
-  
-  # Add a component
-  nx g @nrwl/angular:component xyz --project ui</pre
-          >
-      </details>
-      <details>
-          <summary>View dependency graph</summary>
-          <pre>nx dep-graph</pre>
-      </details>
-      <details>
-          <summary>Run affected commands</summary>
-          <pre>
-  # see what's been affected by changes
-  nx affected:dep-graph
-  
-  # run tests for current changes
-  nx affected:test
-  
-  # run e2e tests for current changes
-  nx affected:e2e
-  </pre
-          >
-      </details>
-  </main>
-    `,
-  css: `
-  /*
-   * Remove template code below
-   */
-  :host {
-    display: block;
-    font-family: sans-serif;
-    min-width: 300px;
-    max-width: 600px;
-    margin: 50px auto;
-  }
-  
-  .gutter-left {
-    margin-left: 9px;
-  }
-  
-  .col-span-2 {
-    grid-column: span 2;
-  }
-  
-  .flex {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  
-  header {
-    background-color: #143055;
-    color: white;
-    padding: 5px;
-    border-radius: 3px;
-  }
-  
-  main {
-    padding: 0 36px;
-  }
-  
-  p {
-    text-align: center;
-  }
-  
-  h1 {
-    text-align: center;
-    margin-left: 18px;
-    font-size: 24px;
-  }
-  
-  h2 {
-    text-align: center;
-    font-size: 20px;
-    margin: 40px 0 10px 0;
-  }
-  
-  .resources {
-    text-align: center;
-    list-style: none;
-    padding: 0;
-    display: grid;
-    grid-gap: 9px;
-    grid-template-columns: 1fr 1fr;
-  }
-  
-  .resource {
-    color: #0094ba;
-    height: 36px;
-    background-color: rgba(0, 0, 0, 0);
-    border: 1px solid rgba(0, 0, 0, 0.12);
-    border-radius: 4px;
-    padding: 3px 9px;
-    text-decoration: none;
-  }
-  
-  .resource:hover {
-    background-color: rgba(68, 138, 255, 0.04);
-  }
-  
-  pre {
-    padding: 9px;
-    border-radius: 4px;
-    background-color: black;
-    color: #eee;
-  }
-  
-  details {
-    border-radius: 4px;
-    color: #333;
-    background-color: rgba(0, 0, 0, 0);
-    border: 1px solid rgba(0, 0, 0, 0.12);
-    padding: 3px 9px;
-    margin-bottom: 9px;
-  }
-  
-  summary {
-    cursor: pointer;
-    outline: none;
-    height: 36px;
-    line-height: 36px;
-  }
-  
-  .github-star-container {
-    margin-top: 12px;
-    line-height: 20px;
-  }
-  
-  .github-star-container a {
-    display: flex;
-    align-items: center;
-    text-decoration: none;
-    color: #333;
-  }
-  
-  .github-star-badge {
-    color: #24292e;
-    display: flex;
-    align-items: center;
-    font-size: 12px;
-    padding: 3px 10px;
-    border: 1px solid rgba(27,31,35,.2);
-    border-radius: 3px;
-    background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
-    margin-left: 4px;
-    font-weight: 600;
-  }
-  
-  .github-star-badge:hover {
-    background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
-    border-color: rgba(27,31,35,.35);
-    background-position: -.5em;
-  }
-  .github-star-badge .material-icons {
-    height: 16px;
-    width: 16px;
-    margin-right: 4px;
-  }
-    `,
-  sass: `
-/*
- * Remove template code below
- */
-\:host
-  display: block
-  font-family: sans-serif
-  min-width: 300px
-  max-width: 600px
-  margin: 50px auto
-.gutter-left
-  margin-left: 9px
-.col-span-2
-  grid-column: span 2
-.flex
-  display: flex
-  align-items: center
-  justify-content: center
-header
-  background-color: #143055
-  color: white
-  padding: 5px
-  border-radius: 3px
-main
-  padding: 0 36px
-p
-  text-align: center
-h1
-  text-align: center
-  margin-left: 18px
-  font-size: 24px
-h2
-  text-align: center
-  font-size: 20px
-  margin: 40px 0 10px 0
-.resources
-  text-align: center
-  list-style: none
-  padding: 0
-  display: grid
-  grid-gap: 9px
-  grid-template-columns: 1fr 1fr
-.resource
-  color: #0094ba
-  height: 36px
-  background-color: rgba(0, 0, 0, 0)
-  border: 1px solid rgba(0, 0, 0, 0.12)
-  border-radius: 4px
-  padding: 3px 9px
-  text-decoration: none
-  &:hover
-    background-color: rgba(68, 138, 255, 0.04)
-pre
-  padding: 9px
-  border-radius: 4px
-  background-color: black
-  color: #eee
-details
-  border-radius: 4px
-  color: #333
-  background-color: rgba(0, 0, 0, 0)
-  border: 1px solid rgba(0, 0, 0, 0.12)
-  padding: 3px 9px
-  margin-bottom: 9px
-summary
-  cursor: pointer
-  outline: none
-  height: 36px
-  line-height: 36px
-.github-star-container
-  margin-top: 12px
-  line-height: 20px
-  a
-    display: flex
-    align-items: center
-    text-decoration: none
-    color: #333
-.github-star-badge
-  color: #24292e
-  display: flex
-  align-items: center
-  font-size: 12px
-  padding: 3px 10px
-  border: 1px solid rgba(27, 31, 35, .2)
-  border-radius: 3px
-  background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%)
-  margin-left: 4px
-  font-weight: 600
-  &:hover
-    background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%)
-    border-color: rgba(27, 31, 35, .35)
-    background-position: -.5em
-  .material-icons
-    height: 16px
-    width: 16px
-    margin-right: 4px
+    </div>
   `,
 };
diff --git a/packages/angular/src/generators/application/lib/update-component-template.ts b/packages/angular/src/generators/application/lib/update-app-component-template.ts
similarity index 76%
rename from packages/angular/src/generators/application/lib/update-component-template.ts
rename to packages/angular/src/generators/application/lib/update-app-component-template.ts
index 049b06f640..2ec7041167 100644
--- a/packages/angular/src/generators/application/lib/update-component-template.ts
+++ b/packages/angular/src/generators/application/lib/update-app-component-template.ts
@@ -7,10 +7,15 @@ import { getDecoratorPropertyValueNode } from '../../../utils/nx-devkit/ast-util
 
 import { nrwlHomeTemplate } from './nrwl-home-tpl';
 
-export function updateComponentTemplate(host: Tree, options: NormalizedSchema) {
+export function updateAppComponentTemplate(
+  host: Tree,
+  options: NormalizedSchema
+) {
   const content = options.routing
-    ? `${nrwlHomeTemplate.html}\n<router-outlet></router-outlet>`
-    : nrwlHomeTemplate.html;
+    ? `${nrwlHomeTemplate.getSelector(
+        options.prefix
+      )}\n<router-outlet></router-outlet>`
+    : nrwlHomeTemplate.getSelector(options.prefix);
 
   if (!options.inlineTemplate) {
     host.write(`${options.appProjectRoot}/src/app/app.component.html`, content);
@@ -38,6 +43,6 @@ export function updateComponentTemplate(host: Tree, options: NormalizedSchema) {
     ),
     componentPath,
     templateNodeValue,
-    `\`\n${nrwlHomeTemplate.html}\n\``
+    `\`\n${nrwlHomeTemplate.getSelector(options.prefix)}\n\``
   );
 }
diff --git a/packages/angular/src/generators/application/lib/update-component-spec.ts b/packages/angular/src/generators/application/lib/update-component-spec.ts
index 071b6388a6..1e598540e9 100644
--- a/packages/angular/src/generators/application/lib/update-component-spec.ts
+++ b/packages/angular/src/generators/application/lib/update-component-spec.ts
@@ -3,7 +3,10 @@ import type { NormalizedSchema } from './normalized-schema';
 
 import * as ts from 'typescript';
 import { insertImport } from '@nrwl/workspace/src/utilities/ast-utils';
-import { addImportToTestBed } from '../../../utils/nx-devkit/ast-utils';
+import {
+  addImportToTestBed,
+  replaceIntoToTestBed,
+} from '../../../utils/nx-devkit/ast-utils';
 
 export function updateComponentSpec(host: Tree, options: NormalizedSchema) {
   if (options.skipTests !== true) {
@@ -21,10 +24,28 @@ export function updateComponentSpec(host: Tree, options: NormalizedSchema) {
       componentSpecPath,
       componentSpecSource
         .replace('.content span', 'h1')
-        .replace(
-          `${options.name} app is running!`,
-          `Welcome to ${options.name}!`
-        )
+        .replace(`${options.name} app is running!`, `Welcome ${options.name}`)
+    );
+
+    // Adding NxWelcome component to app.component.spec
+    componentSpecSourceFile = insertImport(
+      host,
+      componentSpecSourceFile,
+      componentSpecPath,
+      'NxWelcomeComponent',
+      './nx-welcome.component'
+    );
+
+    componentSpecSourceFile = replaceIntoToTestBed(
+      host,
+      componentSpecSourceFile,
+      componentSpecPath,
+      `declarations: [AppComponent, NxWelcomeComponent]`,
+      `
+      declarations: [
+        AppComponent
+      ],
+    `
     );
 
     if (options.routing) {
diff --git a/packages/angular/src/generators/application/lib/update-component-styles.ts b/packages/angular/src/generators/application/lib/update-component-styles.ts
deleted file mode 100644
index d5f1cd1fd8..0000000000
--- a/packages/angular/src/generators/application/lib/update-component-styles.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import type { Tree } from '@nrwl/devkit';
-import type { NormalizedSchema } from './normalized-schema';
-
-import * as ts from 'typescript';
-import { replaceNodeValue } from '@nrwl/workspace/src/utilities/ast-utils';
-import { getDecoratorPropertyValueNode } from '../../../utils/nx-devkit/ast-utils';
-
-import { nrwlHomeTemplate } from './nrwl-home-tpl';
-
-export function updateComponentStyles(host: Tree, options: NormalizedSchema) {
-  const content = nrwlHomeTemplate[options.style === 'sass' ? 'sass' : 'css'];
-
-  if (!options.inlineStyle) {
-    const filesMap = {
-      css: `${options.appProjectRoot}/src/app/app.component.css`,
-      sass: `${options.appProjectRoot}/src/app/app.component.sass`,
-      scss: `${options.appProjectRoot}/src/app/app.component.scss`,
-      less: `${options.appProjectRoot}/src/app/app.component.less`,
-    };
-    host.write(filesMap[options.style], content);
-
-    return;
-  }
-
-  // Inline component update
-  const componentPath = `${options.appProjectRoot}/src/app/app.component.ts`;
-  const templateNodeValue = getDecoratorPropertyValueNode(
-    host,
-    componentPath,
-    'Component',
-    'styles',
-    '@angular/core'
-  );
-
-  replaceNodeValue(
-    host,
-    ts.createSourceFile(
-      componentPath,
-      host.read(componentPath, 'utf-8'),
-      ts.ScriptTarget.Latest,
-      true
-    ),
-    componentPath,
-    templateNodeValue,
-    `[\`\n${content}\n\`],\n`
-  );
-}
diff --git a/packages/angular/src/generators/application/lib/update-e2e-project.ts b/packages/angular/src/generators/application/lib/update-e2e-project.ts
index 518b658456..90a1df3996 100644
--- a/packages/angular/src/generators/application/lib/update-e2e-project.ts
+++ b/packages/angular/src/generators/application/lib/update-e2e-project.ts
@@ -15,7 +15,7 @@ export function updateE2eProject(tree: Tree, options: NormalizedSchema) {
     spec,
     content.replace(
       `${options.name} app is running!`,
-      `Welcome to ${options.name}!`
+      `Welcome ${options.name}`
     )
   );
 
diff --git a/packages/angular/src/generators/application/lib/update-nx-component-template.ts b/packages/angular/src/generators/application/lib/update-nx-component-template.ts
new file mode 100644
index 0000000000..a56564c07f
--- /dev/null
+++ b/packages/angular/src/generators/application/lib/update-nx-component-template.ts
@@ -0,0 +1,66 @@
+import type { Tree } from '@nrwl/devkit';
+import type { NormalizedSchema } from './normalized-schema';
+
+import * as ts from 'typescript';
+import {
+  addGlobal,
+  replaceNodeValue,
+} from '@nrwl/workspace/src/utilities/ast-utils';
+import { getDecoratorPropertyValueNode } from '../../../utils/nx-devkit/ast-utils';
+import { nrwlHomeTemplate } from './nrwl-home-tpl';
+
+export function updateNxComponentTemplate(
+  host: Tree,
+  options: NormalizedSchema
+) {
+  const componentPath = `${options.appProjectRoot}/src/app/nx-welcome.component.ts`;
+  const templateNodeValue = getDecoratorPropertyValueNode(
+    host,
+    componentPath,
+    'Component',
+    'template',
+    '@angular/core'
+  );
+
+  replaceNodeValue(
+    host,
+    ts.createSourceFile(
+      componentPath,
+      host.read(componentPath, 'utf-8'),
+      ts.ScriptTarget.Latest,
+      true
+    ),
+    componentPath,
+    templateNodeValue,
+    `\`\n${nrwlHomeTemplate.template(options.name)}\n\``
+  );
+
+  // Fixing extra comma issue `,,`
+  let sourceFile = ts.createSourceFile(
+    componentPath,
+    host.read(componentPath, 'utf-8'),
+    ts.ScriptTarget.Latest,
+    true
+  );
+  const componentFile = host
+    .read(componentPath, 'utf-8')
+    .toString()
+    .replace(/,,/gi, ',');
+  host.write(componentPath, componentFile);
+  sourceFile.update(componentFile, {
+    newLength: componentFile.length,
+    span: {
+      length: sourceFile.text.length,
+      start: 0,
+    },
+  });
+
+  // Add ESLint ignore to pass the lint step
+  sourceFile = ts.createSourceFile(
+    componentPath,
+    host.read(componentPath, 'utf-8'),
+    ts.ScriptTarget.Latest,
+    true
+  );
+  addGlobal(host, sourceFile, componentPath, '/* eslint-disable */');
+}
diff --git a/packages/angular/src/generators/setup-mfe/__snapshots__/setup-mfe.spec.ts.snap b/packages/angular/src/generators/setup-mfe/__snapshots__/setup-mfe.spec.ts.snap
index 6a75242840..7e4a0960e7 100644
--- a/packages/angular/src/generators/setup-mfe/__snapshots__/setup-mfe.spec.ts.snap
+++ b/packages/angular/src/generators/setup-mfe/__snapshots__/setup-mfe.spec.ts.snap
@@ -5,11 +5,13 @@ exports[`Init MFE should add a remote application and add it to a specified host
 import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent } from './app.component';
+import { NxWelcomeComponent } from './nx-welcome.component';
 import { RouterModule } from '@angular/router';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    NxWelcomeComponent
   ],
   imports: [
     BrowserModule,
diff --git a/packages/angular/src/utils/nx-devkit/ast-utils.ts b/packages/angular/src/utils/nx-devkit/ast-utils.ts
index ce30d76c6e..7af6480af2 100644
--- a/packages/angular/src/utils/nx-devkit/ast-utils.ts
+++ b/packages/angular/src/utils/nx-devkit/ast-utils.ts
@@ -7,6 +7,7 @@ import {
   insertChange,
   removeChange,
   getImport,
+  replaceChange,
 } from '@nrwl/workspace/src/utilities/ast-utils';
 
 function _angularImportsFromNode(
@@ -344,6 +345,80 @@ export function addImportToTestBed(
   return source;
 }
 
+export function addDeclarationsToTestBed(
+  host: Tree,
+  source: ts.SourceFile,
+  specPath: string,
+  symbolName: string[]
+): ts.SourceFile {
+  const allCalls: ts.CallExpression[] = <any>(
+    findNodes(source, ts.SyntaxKind.CallExpression)
+  );
+
+  const configureTestingModuleObjectLiterals = allCalls
+    .filter((c) => c.expression.kind === ts.SyntaxKind.PropertyAccessExpression)
+    .filter(
+      (c: any) => c.expression.name.getText(source) === 'configureTestingModule'
+    )
+    .map((c) =>
+      c.arguments[0].kind === ts.SyntaxKind.ObjectLiteralExpression
+        ? c.arguments[0]
+        : null
+    );
+
+  if (configureTestingModuleObjectLiterals.length > 0) {
+    const startPosition = configureTestingModuleObjectLiterals[0]
+      .getFirstToken(source)
+      .getEnd();
+    return insertChange(
+      host,
+      source,
+      specPath,
+      startPosition,
+      `declarations: [${symbolName.join(',')}], `
+    );
+  }
+  return source;
+}
+
+export function replaceIntoToTestBed(
+  host: Tree,
+  source: ts.SourceFile,
+  specPath: string,
+  newSymbol: string,
+  previousSymbol: string
+): ts.SourceFile {
+  const allCalls: ts.CallExpression[] = <any>(
+    findNodes(source, ts.SyntaxKind.CallExpression)
+  );
+
+  const configureTestingModuleObjectLiterals = allCalls
+    .filter((c) => c.expression.kind === ts.SyntaxKind.PropertyAccessExpression)
+    .filter(
+      (c: any) => c.expression.name.getText(source) === 'configureTestingModule'
+    )
+    .map((c) =>
+      c.arguments[0].kind === ts.SyntaxKind.ObjectLiteralExpression
+        ? c.arguments[0]
+        : null
+    );
+
+  if (configureTestingModuleObjectLiterals.length > 0) {
+    const startPosition = configureTestingModuleObjectLiterals[0]
+      .getFirstToken(source)
+      .getEnd();
+    return replaceChange(
+      host,
+      source,
+      specPath,
+      startPosition,
+      newSymbol,
+      previousSymbol
+    );
+  }
+  return source;
+}
+
 export function getBootstrapComponent(
   source: ts.SourceFile,
   moduleClassName: string
diff --git a/packages/cypress/src/generators/cypress-project/files/src/integration/app.spec.ts__tmpl__ b/packages/cypress/src/generators/cypress-project/files/src/integration/app.spec.ts__tmpl__
index 2ebbb53a9b..36f5a5cc48 100644
--- a/packages/cypress/src/generators/cypress-project/files/src/integration/app.spec.ts__tmpl__
+++ b/packages/cypress/src/generators/cypress-project/files/src/integration/app.spec.ts__tmpl__
@@ -8,6 +8,6 @@ describe('<%= project %>', () => {
     cy.login('my-email@something.com', 'myPassword');
 
     // Function helper example, see `../support/app.po.ts` file
-    getGreeting().contains('Welcome to <%= project %>!');
+    getGreeting().contains('Welcome <%= project %>');
   });
 });
diff --git a/packages/gatsby/src/generators/application/files/src/pages/index.module.__style__ b/packages/gatsby/src/generators/application/files/src/pages/index.module.__style__
index 756d4bb08f..9b051a2744 100644
--- a/packages/gatsby/src/generators/application/files/src/pages/index.module.__style__
+++ b/packages/gatsby/src/generators/application/files/src/pages/index.module.__style__
@@ -1,132 +1,401 @@
 /*
  * Remove template code below
  */
-
-.page {
-  font-family: sans-serif;
-  min-width: 300px;
-  max-width: 600px;
-  margin: 50px auto;
+:global(html) {
+  -webkit-text-size-adjust: 100%;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+  'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
+  'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+  'Noto Color Emoji';
+  line-height: 1.5;
+  tab-size: 4;
+  scroll-behavior: smooth;
+}
+:global(body) {
+  font-family: inherit;
+  line-height: inherit;
+  margin: 0;
+}
+:global(h1),
+:global(h2),
+:global(p),
+:global(pre) {
+  margin: 0;
+}
+:global(*),
+:global(::before),
+:global(::after) {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: currentColor;
+}
+:global(h1),
+:global(h2) {
+  font-size: inherit;
+  font-weight: inherit;
+}
+:global(a) {
+  color: inherit;
+  text-decoration: inherit;
+}
+:global(pre) {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+  'Liberation Mono', 'Courier New', monospace;
+}
+:global(svg) {
+  display: block;
+  vertical-align: middle;
+  shape-rendering: auto;
+  text-rendering: optimizeLegibility;
+}
+:global(pre) {
+  background-color: rgba(55, 65, 81, 1);
+  border-radius: 0.25rem;
+  color: rgba(229, 231, 235, 1);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+  'Liberation Mono', 'Courier New', monospace;
+  overflow: scroll;
+  padding: 0.5rem 0.75rem;
 }
 
-.page :global(.gutter-left) {
-  margin-left: 9px;
+:global(.shadow) {
+  box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+  0 4px 6px -2px rgba(0, 0, 0, 0.05);
 }
-
-.page :global(.col-span-2) {
-  grid-column: span 2;
+:global(.rounded) {
+  border-radius: 1.5rem;
 }
-
-.page :global(.flex) {
-  display: flex;
+:global(.wrapper) {
+  width: 100%;
+}
+:global(.container) {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 768px;
+  padding-bottom: 3rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  color: rgba(55, 65, 81, 1);
+  width: 100%;
+}
+:global(#welcome) {
+  margin-top: 2.5rem;
+}
+:global(#welcome h1) {
+  font-size: 3rem;
+  font-weight: 500;
+  letter-spacing: -0.025em;
+  line-height: 1;
+}
+:global(#welcome span) {
+  display: block;
+  font-size: 1.875rem;
+  font-weight: 300;
+  line-height: 2.25rem;
+  margin-bottom: 0.5rem;
+}
+:global(#hero) {
   align-items: center;
-  justify-content: center;
-}
-
-.page :global(header) {
-  background-color: #143055;
-  color: white;
-  padding: 5px;
-  border-radius: 3px;
-}
-
-.page :global(main) {
-  padding: 0 36px;
-}
-
-.page :global(p) {
-  text-align: center;
-}
-
-.page :global(h1) {
-  text-align: center;
-  margin-left: 18px;
-  font-size: 24px;
-}
-
-.page :global(h2) {
-  text-align: center;
-  font-size: 20px;
-  margin: 40px 0 10px 0;
-}
-
-.page :global(.resources) {
-  text-align: center;
-  list-style: none;
-  padding: 0;
+  background-color: hsla(214, 62%, 21%, 1);
+  border: none;
+  box-sizing: border-box;
+  color: rgba(55, 65, 81, 1);
   display: grid;
-  grid-gap: 9px;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1fr;
+  margin-top: 3.5rem;
 }
-
-.page :global(.resource) {
-  color: #0094ba;
-  height: 36px;
-  background-color: rgba(0, 0, 0, 0);
-  border: 1px solid rgba(0, 0, 0, 0.12);
-  border-radius: 4px;
-  padding: 3px 9px;
-  text-decoration: none;
+:global(#hero .text-container) {
+  color: rgba(255, 255, 255, 1);
+  padding: 3rem 2rem;
 }
-
-.page :global(.resource:hover) {
-  background-color: rgba(68, 138, 255, 0.04);
+:global(#hero .text-container h2) {
+  font-size: 1.5rem;
+  line-height: 2rem;
+  position: relative;
 }
-
-.page :global(pre) {
-  padding: 9px;
-  border-radius: 4px;
-  background-color: black;
-  color: #eee;
+:global(#hero .text-container h2 svg) {
+  color: hsla(162, 47%, 50%, 1);
+  height: 2rem;
+  left: -0.25rem;
+  position: absolute;
+  top: 0;
+  width: 2rem;
 }
-
-.page :global(details) {
-  border-radius: 4px;
-  color: #333;
-  background-color: rgba(0, 0, 0, 0);
-  border: 1px solid rgba(0, 0, 0, 0.12);
-  padding: 3px 9px;
-  margin-bottom: 9px;
+:global(#hero .text-container h2 span) {
+  margin-left: 2.5rem;
 }
-
-.page :global(summary) {
-  outline: none;
-  height: 36px;
-  line-height: 36px;
+:global(#hero .text-container a) {
+  background-color: rgba(255, 255, 255, 1);
+  border-radius: 0.75rem;
+  color: rgba(55, 65, 81, 1);
+  display: inline-block;
+  margin-top: 1.5rem;
+  padding: 1rem 2rem;
+  text-decoration: inherit;
 }
-
-.page :global(.github-star-container) {
-  margin-top: 12px;
-  line-height: 20px;
+:global(#hero .logo-container) {
+  display: none;
+  justify-content: center;
+  padding-left: 2rem;
+  padding-right: 2rem;
 }
-
-.page :global(.github-star-container a) {
-  display: flex;
+:global(#hero .logo-container svg) {
+  color: rgba(255, 255, 255, 1);
+  width: 66.666667%;
+}
+:global(#middle-content) {
+  align-items: flex-start;
+  display: grid;
+  gap: 4rem;
+  grid-template-columns: 1fr;
+  margin-top: 3.5rem;
+}
+:global(#learning-materials) {
+  padding: 2.5rem 2rem;
+}
+:global(#learning-materials h2) {
+  font-weight: 500;
+  font-size: 1.25rem;
+  letter-spacing: -0.025em;
+  line-height: 1.75rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+:global(.list-item-link) {
   align-items: center;
-  text-decoration: none;
-  color: #333;
-}
-
-.page :global(.github-star-badge) {
-  color: #24292e;
+  border-radius: 0.75rem;
   display: flex;
+  margin-top: 1rem;
+  padding: 1rem;
+  transition-property: background-color, border-color, color, fill, stroke,
+  opacity, box-shadow, transform, filter, backdrop-filter,
+  -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  width: 100%;
+}
+:global(.list-item-link svg:first-child) {
+  margin-right: 1rem;
+  height: 1.5rem;
+  transition-property: background-color, border-color, color, fill, stroke,
+  opacity, box-shadow, transform, filter, backdrop-filter,
+  -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  width: 1.5rem;
+}
+:global(.list-item-link > span) {
+  flex-grow: 1;
+  font-weight: 400;
+  transition-property: background-color, border-color, color, fill, stroke,
+  opacity, box-shadow, transform, filter, backdrop-filter,
+  -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+:global(.list-item-link > span > span) {
+  color: rgba(107, 114, 128, 1);
+  display: block;
+  flex-grow: 1;
+  font-size: 0.75rem;
+  font-weight: 300;
+  line-height: 1rem;
+  transition-property: background-color, border-color, color, fill, stroke,
+  opacity, box-shadow, transform, filter, backdrop-filter,
+  -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+:global(.list-item-link svg:last-child) {
+  height: 1rem;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  width: 1rem;
+}
+:global(.list-item-link:hover) {
+  color: rgba(255, 255, 255, 1);
+  background-color: hsla(162, 47%, 50%, 1);
+}
+:global(.list-item-link:hover > span) {}
+:global(.list-item-link:hover > span > span) {
+  color: rgba(243, 244, 246, 1);
+}
+:global(.list-item-link:hover svg:last-child) {
+  transform: translateX(0.25rem);
+}
+:global(#other-links) {}
+:global(.button-pill) {
+  padding: 1.5rem 2rem;
+  transition-duration: 300ms;
+  transition-property: background-color, border-color, color, fill, stroke,
+  opacity, box-shadow, transform, filter, backdrop-filter,
+  -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   align-items: center;
-  font-size: 12px;
-  padding: 3px 10px;
-  border: 1px solid rgba(27, 31, 35, 0.2);
-  border-radius: 3px;
-  background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%);
-  margin-left: 4px;
-  font-weight: 600;
+  display: flex;
 }
-
-.page :global(.github-star-badge:hover) {
-  background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%);
-  border-color: rgba(27, 31, 35, 0.35);
-  background-position: -0.5em;
+:global(.button-pill svg) {
+  transition-property: background-color, border-color, color, fill, stroke,
+  opacity, box-shadow, transform, filter, backdrop-filter,
+  -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  flex-shrink: 0;
+  width: 3rem;
 }
-.page :global(.github-star-badge .material-icons) {
-  height: 16px;
-  width: 16px;
-  margin-right: 4px;
+:global(.button-pill > span) {
+  letter-spacing: -0.025em;
+  font-weight: 400;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+:global(.button-pill span span) {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 300;
+  line-height: 1.25rem;
+}
+:global(.button-pill:hover sv)g,
+:global(.button-pill:hover) {
+  color: rgba(255, 255, 255, 1) !important;
+}
+:global(#nx-console:hover) {
+  background-color: rgba(0, 122, 204, 1);
+}
+:global(#nx-console svg) {
+  color: rgba(0, 122, 204, 1);
+}
+:global(#nx-repo:hover) {
+  background-color: rgba(24, 23, 23, 1);
+}
+:global(#nx-repo svg) {
+  color: rgba(24, 23, 23, 1);
+}
+:global(#nx-cloud) {
+  margin-bottom: 2rem;
+  margin-top: 2rem;
+  padding: 2.5rem 2rem;
+}
+:global(#nx-cloud > div) {
+  align-items: center;
+  display: flex;
+}
+:global(#nx-cloud > div svg) {
+  border-radius: 0.375rem;
+  flex-shrink: 0;
+  width: 3rem;
+}
+:global(#nx-cloud > div h2) {
+  font-size: 1.125rem;
+  font-weight: 400;
+  letter-spacing: -0.025em;
+  line-height: 1.75rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+:global(#nx-cloud > div h2 span) {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 300;
+  line-height: 1.25rem;
+}
+:global(#nx-cloud p) {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  margin-top: 1rem;
+}
+:global(#nx-cloud pre) {
+  margin-top: 1rem;
+}
+:global(#nx-cloud a) {
+  color: rgba(107, 114, 128, 1);
+  display: block;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  margin-top: 1.5rem;
+  text-align: right;
+}
+:global(#nx-cloud a:hover) {
+  text-decoration: underline;
+}
+:global(#commands) {
+  padding: 2.5rem 2rem;
+  margin-top: 3.5rem;
+}
+:global(#commands h2) {
+  font-size: 1.25rem;
+  font-weight: 400;
+  letter-spacing: -0.025em;
+  line-height: 1.75rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+:global(#commands p) {
+  font-size: 1rem;
+  font-weight: 300;
+  line-height: 1.5rem;
+  margin-top: 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+:global(details) {
+  align-items: center;
+  display: flex;
+  margin-top: 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  width: 100%;
+}
+:global(details pre > span) {
+  display: block;
+}
+:global(summary) {
+  border-radius: 0.5rem;
+  display: flex;
+  font-weight: 400;
+  padding: 0.5rem;
+  cursor: pointer;
+  transition-property: background-color, border-color, color, fill, stroke,
+  opacity, box-shadow, transform, filter, backdrop-filter,
+  -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+:global(summary:hover) {
+  background-color: rgba(243, 244, 246, 1);
+}
+:global(summary svg) {
+  height: 1.5rem;
+  margin-right: 1rem;
+  width: 1.5rem;
+}
+:global(#love) {
+  color: rgba(107, 114, 128, 1);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  margin-top: 3.5rem;
+  opacity: 0.6;
+  text-align: center;
+}
+:global(#love svg) {
+  color: rgba(252, 165, 165, 1);
+  width: 1.25rem;
+  height: 1.25rem;
+  display: inline;
+  margin-top: -0.25rem;
+}
+@media screen and (min-width: 768px) {
+  :global(#hero) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  :global(#hero .logo-container) {
+    display: flex;
+  }
+  :global(#middle-content) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }
diff --git a/packages/gatsby/src/generators/application/files/src/pages/index.none.tsx__tmpl__ b/packages/gatsby/src/generators/application/files/src/pages/index.none.tsx__tmpl__
index 53d1563519..74a679552c 100644
--- a/packages/gatsby/src/generators/application/files/src/pages/index.none.tsx__tmpl__
+++ b/packages/gatsby/src/generators/application/files/src/pages/index.none.tsx__tmpl__
@@ -1,11 +1,816 @@
 import React from 'react';
 
-import { ReactComponent as Logo } from './logo.svg';
-import star from './star.svg';
-
 export function Index() {
   return (
-    <h1>Welcome to <%= projectName %>!</h1>
+    <>
+          <style
+            dangerouslySetInnerHTML={{
+              __html: `
+        html {
+          -webkit-text-size-adjust: 100%;
+          font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+          'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
+          'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+          'Noto Color Emoji';
+          line-height: 1.5;
+          tab-size: 4;
+          scroll-behavior: smooth;
+        }
+        body {
+          font-family: inherit;
+          line-height: inherit;
+          margin: 0;
+        }
+        h1,
+        h2,
+        p,
+        pre {
+          margin: 0;
+        }
+        *,
+        ::before,
+        ::after {
+          box-sizing: border-box;
+          border-width: 0;
+          border-style: solid;
+          border-color: currentColor;
+        }
+        h1,
+        h2 {
+          font-size: inherit;
+          font-weight: inherit;
+        }
+        a {
+          color: inherit;
+          text-decoration: inherit;
+        }
+        pre {
+          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          'Liberation Mono', 'Courier New', monospace;
+        }
+        svg {
+          display: block;
+          vertical-align: middle;
+          shape-rendering: auto;
+          text-rendering: optimizeLegibility;
+        }
+        pre {
+          background-color: rgba(55, 65, 81, 1);
+          border-radius: 0.25rem;
+          color: rgba(229, 231, 235, 1);
+          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          'Liberation Mono', 'Courier New', monospace;
+          overflow: scroll;
+          padding: 0.5rem 0.75rem;
+        }
+
+        .shadow {
+          box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+          0 4px 6px -2px rgba(0, 0, 0, 0.05);
+        }
+        .rounded {
+          border-radius: 1.5rem;
+        }
+        .wrapper {
+          width: 100%;
+        }
+        .container {
+          margin-left: auto;
+          margin-right: auto;
+          max-width: 768px;
+          padding-bottom: 3rem;
+          padding-left: 1rem;
+          padding-right: 1rem;
+          color: rgba(55, 65, 81, 1);
+          width: 100%;
+        }
+        #welcome {
+          margin-top: 2.5rem;
+        }
+        #welcome h1 {
+          font-size: 3rem;
+          font-weight: 500;
+          letter-spacing: -0.025em;
+          line-height: 1;
+        }
+        #welcome span {
+          display: block;
+          font-size: 1.875rem;
+          font-weight: 300;
+          line-height: 2.25rem;
+          margin-bottom: 0.5rem;
+        }
+        #hero {
+          align-items: center;
+          background-color: hsla(214, 62%, 21%, 1);
+          border: none;
+          box-sizing: border-box;
+          color: rgba(55, 65, 81, 1);
+          display: grid;
+          grid-template-columns: 1fr;
+          margin-top: 3.5rem;
+        }
+        #hero .text-container {
+          color: rgba(255, 255, 255, 1);
+          padding: 3rem 2rem;
+        }
+        #hero .text-container h2 {
+          font-size: 1.5rem;
+          line-height: 2rem;
+          position: relative;
+        }
+        #hero .text-container h2 svg {
+          color: hsla(162, 47%, 50%, 1);
+          height: 2rem;
+          left: -0.25rem;
+          position: absolute;
+          top: 0;
+          width: 2rem;
+        }
+        #hero .text-container h2 span {
+          margin-left: 2.5rem;
+        }
+        #hero .text-container a {
+          background-color: rgba(255, 255, 255, 1);
+          border-radius: 0.75rem;
+          color: rgba(55, 65, 81, 1);
+          display: inline-block;
+          margin-top: 1.5rem;
+          padding: 1rem 2rem;
+          text-decoration: inherit;
+        }
+        #hero .logo-container {
+          display: none;
+          justify-content: center;
+          padding-left: 2rem;
+          padding-right: 2rem;
+        }
+        #hero .logo-container svg {
+          color: rgba(255, 255, 255, 1);
+          width: 66.666667%;
+        }
+        #middle-content {
+          align-items: flex-start;
+          display: grid;
+          gap: 4rem;
+          grid-template-columns: 1fr;
+          margin-top: 3.5rem;
+        }
+        #learning-materials {
+          padding: 2.5rem 2rem;
+        }
+        #learning-materials h2 {
+          font-weight: 500;
+          font-size: 1.25rem;
+          letter-spacing: -0.025em;
+          line-height: 1.75rem;
+          padding-left: 1rem;
+          padding-right: 1rem;
+        }
+        .list-item-link {
+          align-items: center;
+          border-radius: 0.75rem;
+          display: flex;
+          margin-top: 1rem;
+          padding: 1rem;
+          transition-property: background-color, border-color, color, fill, stroke,
+          opacity, box-shadow, transform, filter, backdrop-filter,
+          -webkit-backdrop-filter;
+          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+          transition-duration: 150ms;
+          width: 100%;
+        }
+        .list-item-link svg:first-child {
+          margin-right: 1rem;
+          height: 1.5rem;
+          transition-property: background-color, border-color, color, fill, stroke,
+          opacity, box-shadow, transform, filter, backdrop-filter,
+          -webkit-backdrop-filter;
+          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+          transition-duration: 150ms;
+          width: 1.5rem;
+        }
+        .list-item-link > span {
+          flex-grow: 1;
+          font-weight: 400;
+          transition-property: background-color, border-color, color, fill, stroke,
+          opacity, box-shadow, transform, filter, backdrop-filter,
+          -webkit-backdrop-filter;
+          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+          transition-duration: 150ms;
+        }
+        .list-item-link > span > span {
+          color: rgba(107, 114, 128, 1);
+          display: block;
+          flex-grow: 1;
+          font-size: 0.75rem;
+          font-weight: 300;
+          line-height: 1rem;
+          transition-property: background-color, border-color, color, fill, stroke,
+          opacity, box-shadow, transform, filter, backdrop-filter,
+          -webkit-backdrop-filter;
+          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+          transition-duration: 150ms;
+        }
+        .list-item-link svg:last-child {
+          height: 1rem;
+          transition-property: all;
+          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+          transition-duration: 150ms;
+          width: 1rem;
+        }
+        .list-item-link:hover {
+          color: rgba(255, 255, 255, 1);
+          background-color: hsla(162, 47%, 50%, 1);
+        }
+        .list-item-link:hover > span {}
+        .list-item-link:hover > span > span {
+          color: rgba(243, 244, 246, 1);
+        }
+        .list-item-link:hover svg:last-child {
+          transform: translateX(0.25rem);
+        }
+        #other-links {}
+        .button-pill {
+          padding: 1.5rem 2rem;
+          transition-duration: 300ms;
+          transition-property: background-color, border-color, color, fill, stroke,
+          opacity, box-shadow, transform, filter, backdrop-filter,
+          -webkit-backdrop-filter;
+          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+          align-items: center;
+          display: flex;
+        }
+        .button-pill svg {
+          transition-property: background-color, border-color, color, fill, stroke,
+          opacity, box-shadow, transform, filter, backdrop-filter,
+          -webkit-backdrop-filter;
+          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+          transition-duration: 150ms;
+          flex-shrink: 0;
+          width: 3rem;
+        }
+        .button-pill > span {
+          letter-spacing: -0.025em;
+          font-weight: 400;
+          font-size: 1.125rem;
+          line-height: 1.75rem;
+          padding-left: 1rem;
+          padding-right: 1rem;
+        }
+        .button-pill span span {
+          display: block;
+          font-size: 0.875rem;
+          font-weight: 300;
+          line-height: 1.25rem;
+        }
+        .button-pill:hover svg,
+        .button-pill:hover {
+          color: rgba(255, 255, 255, 1) !important;
+        }
+        #nx-console:hover {
+          background-color: rgba(0, 122, 204, 1);
+        }
+        #nx-console svg {
+          color: rgba(0, 122, 204, 1);
+        }
+        #nx-repo:hover {
+          background-color: rgba(24, 23, 23, 1);
+        }
+        #nx-repo svg {
+          color: rgba(24, 23, 23, 1);
+        }
+        #nx-cloud {
+          margin-bottom: 2rem;
+          margin-top: 2rem;
+          padding: 2.5rem 2rem;
+        }
+        #nx-cloud > div {
+          align-items: center;
+          display: flex;
+        }
+        #nx-cloud > div svg {
+          border-radius: 0.375rem;
+          flex-shrink: 0;
+          width: 3rem;
+        }
+        #nx-cloud > div h2 {
+          font-size: 1.125rem;
+          font-weight: 400;
+          letter-spacing: -0.025em;
+          line-height: 1.75rem;
+          padding-left: 1rem;
+          padding-right: 1rem;
+        }
+        #nx-cloud > div h2 span {
+          display: block;
+          font-size: 0.875rem;
+          font-weight: 300;
+          line-height: 1.25rem;
+        }
+        #nx-cloud p {
+          font-size: 1rem;
+          line-height: 1.5rem;
+          margin-top: 1rem;
+        }
+        #nx-cloud pre {
+          margin-top: 1rem;
+        }
+        #nx-cloud a {
+          color: rgba(107, 114, 128, 1);
+          display: block;
+          font-size: 0.875rem;
+          line-height: 1.25rem;
+          margin-top: 1.5rem;
+          text-align: right;
+        }
+        #nx-cloud a:hover {
+          text-decoration: underline;
+        }
+        #commands {
+          padding: 2.5rem 2rem;
+          margin-top: 3.5rem;
+        }
+        #commands h2 {
+          font-size: 1.25rem;
+          font-weight: 400;
+          letter-spacing: -0.025em;
+          line-height: 1.75rem;
+          padding-left: 1rem;
+          padding-right: 1rem;
+        }
+        #commands p {
+          font-size: 1rem;
+          font-weight: 300;
+          line-height: 1.5rem;
+          margin-top: 1rem;
+          padding-left: 1rem;
+          padding-right: 1rem;
+        }
+        details {
+          align-items: center;
+          display: flex;
+          margin-top: 1rem;
+          padding-left: 1rem;
+          padding-right: 1rem;
+          width: 100%;
+        }
+        details pre > span {
+          color: rgba(181, 181, 181, 1);
+          display: block;
+        }
+        summary {
+          border-radius: 0.5rem;
+          display: flex;
+          font-weight: 400;
+          padding: 0.5rem;
+          cursor: pointer;
+          transition-property: background-color, border-color, color, fill, stroke,
+          opacity, box-shadow, transform, filter, backdrop-filter,
+          -webkit-backdrop-filter;
+          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+          transition-duration: 150ms;
+        }
+        summary:hover {
+          background-color: rgba(243, 244, 246, 1);
+        }
+        summary svg {
+          height: 1.5rem;
+          margin-right: 1rem;
+          width: 1.5rem;
+        }
+        #love {
+          color: rgba(107, 114, 128, 1);
+          font-size: 0.875rem;
+          line-height: 1.25rem;
+          margin-top: 3.5rem;
+          opacity: 0.6;
+          text-align: center;
+        }
+        #love svg {
+          color: rgba(252, 165, 165, 1);
+          width: 1.25rem;
+          height: 1.25rem;
+          display: inline;
+          margin-top: -0.25rem;
+        }
+        @media screen and (min-width: 768px) {
+          #hero {
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+          }
+          #hero .logo-container {
+            display: flex;
+          }
+          #middle-content {
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+          }
+        }
+              `,
+            }}
+          />
+          <div className="wrapper">
+            <div className="container">
+              <div id="welcome">
+                <h1>
+                  <span> Hello there, </span>
+                  Welcome <%= projectName %> 👋
+                </h1>
+              </div>
+
+              <div id="hero" className="rounded">
+                <div className="text-container">
+                  <h2>
+                    <svg
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2"
+                        d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
+                      />
+                    </svg>
+                    <span>You&apos;re up and running</span>
+                  </h2>
+                  <a href="#commands"> What&apos;s next? </a>
+                </div>
+                <div className="logo-container">
+                  <svg
+                    fill="currentColor"
+                    role="img"
+                    viewBox="0 0 24 24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path d="M11.987 14.138l-3.132 4.923-5.193-8.427-.012 8.822H0V4.544h3.691l5.247 8.833.005-3.998 3.044 4.759zm.601-5.761c.024-.048 0-3.784.008-3.833h-3.65c.002.059-.005 3.776-.003 3.833h3.645zm5.634 4.134a2.061 2.061 0 0 0-1.969 1.336 1.963 1.963 0 0 1 2.343-.739c.396.161.917.422 1.33.283a2.1 2.1 0 0 0-1.704-.88zm3.39 1.061c-.375-.13-.8-.277-1.109-.681-.06-.08-.116-.17-.176-.265a2.143 2.143 0 0 0-.533-.642c-.294-.216-.68-.322-1.18-.322a2.482 2.482 0 0 0-2.294 1.536 2.325 2.325 0 0 1 4.002.388.75.75 0 0 0 .836.334c.493-.105.46.36 1.203.518v-.133c-.003-.446-.246-.55-.75-.733zm2.024 1.266a.723.723 0 0 0 .347-.638c-.01-2.957-2.41-5.487-5.37-5.487a5.364 5.364 0 0 0-4.487 2.418c-.01-.026-1.522-2.39-1.538-2.418H8.943l3.463 5.423-3.379 5.32h3.54l1.54-2.366 1.568 2.366h3.541l-3.21-5.052a.7.7 0 0 1-.084-.32 2.69 2.69 0 0 1 2.69-2.691h.001c1.488 0 1.736.89 2.057 1.308.634.826 1.9.464 1.9 1.541a.707.707 0 0 0 1.066.596zm.35.133c-.173.372-.56.338-.755.639-.176.271.114.412.114.412s.337.156.538-.311c.104-.231.14-.488.103-.74z" />
+                  </svg>
+                </div>
+              </div>
+
+              <div id="middle-content">
+                <div id="learning-materials" className="rounded shadow">
+                  <h2>Learning materials</h2>
+                  <a
+                    href="https://nx.dev/getting-started/intro?utm_source=nx-project"
+                    target="_blank"
+                    rel="noreferrer"
+                    className="list-item-link"
+                  >
+                    <svg
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2"
+                        d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
+                      />
+                    </svg>
+                    <span>
+                      Documentation
+                      <span> Everything is in there </span>
+                    </span>
+                    <svg
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2"
+                        d="M9 5l7 7-7 7"
+                      />
+                    </svg>
+                  </a>
+                  <a
+                    href="https://blog.nrwl.io/?utm_source=nx-project"
+                    target="_blank"
+                    rel="noreferrer"
+                    className="list-item-link"
+                  >
+                    <svg
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2"
+                        d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"
+                      />
+                    </svg>
+                    <span>
+                      Blog
+                      <span> Changelog, features & events </span>
+                    </span>
+                    <svg
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2"
+                        d="M9 5l7 7-7 7"
+                      />
+                    </svg>
+                  </a>
+                  <a
+                    href="https://www.youtube.com/c/Nrwl_io/videos?utm_source=nx-project&sub_confirmation=1"
+                    target="_blank"
+                    rel="noreferrer"
+                    className="list-item-link"
+                  >
+                    <svg
+                      role="img"
+                      viewBox="0 0 24 24"
+                      fill="currentColor"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <title>YouTube</title>
+                      <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
+                    </svg>
+                    <span>
+                      YouTube channel
+                      <span> Nx Show, talks & tutorials </span>
+                    </span>
+                    <svg
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2"
+                        d="M9 5l7 7-7 7"
+                      />
+                    </svg>
+                  </a>
+                  <a
+                    href="https://nx.dev/tutorial/01-create-application?utm_source=nx-project"
+                    target="_blank"
+                    rel="noreferrer"
+                    className="list-item-link"
+                  >
+                    <svg
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2"
+                        d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
+                      />
+                    </svg>
+                    <span>
+                      Interactive tutorials
+                      <span> Create an app, step-by-step </span>
+                    </span>
+                    <svg
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2"
+                        d="M9 5l7 7-7 7"
+                      />
+                    </svg>
+                  </a>
+                  <a
+                    href="https://nxplaybook.com/?utm_source=nx-project"
+                    target="_blank"
+                    rel="noreferrer"
+                    className="list-item-link"
+                  >
+                    <svg
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path d="M12 14l9-5-9-5-9 5 9 5z" />
+                      <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2"
+                        d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
+                      />
+                    </svg>
+                    <span>
+                      Video courses
+                      <span> Nx custom courses </span>
+                    </span>
+                    <svg
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2"
+                        d="M9 5l7 7-7 7"
+                      />
+                    </svg>
+                  </a>
+                </div>
+                <div id="other-links">
+                  <a
+                    id="nx-console"
+                    className="button-pill rounded shadow"
+                    href="https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console&utm_source=nx-project"
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    <svg
+                      fill="currentColor"
+                      role="img"
+                      viewBox="0 0 24 24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <title>Visual Studio Code</title>
+                      <path d="M23.15 2.587L18.21.21a1.494 1.494 0 0 0-1.705.29l-9.46 8.63-4.12-3.128a.999.999 0 0 0-1.276.057L.327 7.261A1 1 0 0 0 .326 8.74L3.899 12 .326 15.26a1 1 0 0 0 .001 1.479L1.65 17.94a.999.999 0 0 0 1.276.057l4.12-3.128 9.46 8.63a1.492 1.492 0 0 0 1.704.29l4.942-2.377A1.5 1.5 0 0 0 24 20.06V3.939a1.5 1.5 0 0 0-.85-1.352zm-5.146 14.861L10.826 12l7.178-5.448v10.896z" />
+                    </svg>
+                    <span>
+                      Install Nx Console
+                      <span>Plugin for VSCode</span>
+                    </span>
+                  </a>
+                  <div id="nx-cloud" className="rounded shadow">
+                    <div>
+                      <svg
+                        viewBox="0 0 120 120"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M120 15V30C103.44 30 90 43.44 90 60C90 76.56 76.56 90 60 90C43.44 90 30 103.44 30 120H15C6.72 120 0 113.28 0 105V15C0 6.72 6.72 0 15 0H105C113.28 0 120 6.72 120 15Z"
+                          fill="#0E2039"
+                        />
+                        <path
+                          d="M120 30V105C120 113.28 113.28 120 105 120H30C30 103.44 43.44 90 60 90C76.56 90 90 76.56 90 60C90 43.44 103.44 30 120 30Z"
+                          fill="white"
+                        />
+                      </svg>
+                      <h2>
+                        NxCloud
+                        <span>
+                          Enable faster CI & better DX
+                        </span>
+                      </h2>
+                    </div>
+                    <p>
+                      You can activate distributed tasks executions and caching by
+                      running:
+                    </p>
+                    <pre>nx connect-to-nx-cloud</pre>
+                    <a
+                      href="https://nx.app/?utm_source=nx-project"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      {' '}
+                      What is Nx Cloud?{' '}
+                    </a>
+                  </div>
+                  <a
+                    id="nx-repo"
+                    className="button-pill rounded shadow"
+                    href="https://github.com/nrwl/nx?utm_source=nx-project"
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    <svg
+                      fill="currentColor"
+                      role="img"
+                      viewBox="0 0 24 24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+                    </svg>
+                    <span>
+                      Nx is open source
+                      <span> Love Nx? Give us a star! </span>
+                    </span>
+                  </a>
+                </div>
+              </div>
+
+              <div id="commands" className="rounded shadow">
+                <h2>Next steps</h2>
+                <p>Here are some things you can do with Nx:</p>
+                <details>
+                  <summary>
+                    <svg
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2"
+                        d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                      />
+                    </svg>
+                    Add UI library
+                  </summary>
+                  <pre>
+                    <span># Generate UI lib</span>
+                    nx g @nrwl/angular:lib ui
+                    <span># Add a component</span>
+                    nx g @nrwl/angular:component button --project ui
+                  </pre>
+                </details>
+                <details>
+                  <summary>
+                    <svg
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2"
+                        d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                      />
+                    </svg>
+                    View interactive dependency graph
+                  </summary>
+                  <pre>nx dep-graph</pre>
+                </details>
+                <details>
+                  <summary>
+                    <svg
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2"
+                        d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                      />
+                    </svg>
+                    Run affected commands
+                  </summary>
+                  <pre>
+                    <span># see what&apos;s been affected by changes</span>
+                    nx affected:dep-graph
+                    <span># run tests for current changes</span>
+                    nx affected:test
+                    <span># run e2e tests for current changes</span>
+                    nx affected:e2e
+                  </pre>
+                </details>
+              </div>
+
+              <p id="love">
+                Carefully crafted with
+                <svg
+                  fill="currentColor"
+                  stroke="none"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+                  />
+                </svg>
+              </p>
+            </div>
+          </div>
+        </>
   );
 }
 
diff --git a/packages/gatsby/src/generators/application/files/src/pages/index.spec.tsx__tmpl__ b/packages/gatsby/src/generators/application/files/src/pages/index.spec.tsx__tmpl__
index 3b04b38ec5..7221c216c0 100644
--- a/packages/gatsby/src/generators/application/files/src/pages/index.spec.tsx__tmpl__
+++ b/packages/gatsby/src/generators/application/files/src/pages/index.spec.tsx__tmpl__
@@ -8,6 +8,6 @@ describe('Index', () => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const props: any = {};
     const { getByText } = render(<Index {...props} />);
-    expect(getByText('Welcome to <%= projectName %>!')).toBeTruthy();
+    expect(getByText(/Welcome <%= projectName %>/gi)).toBeTruthy();
   });
 });
diff --git a/packages/gatsby/src/generators/application/files/src/pages/index.tsx__tmpl__ b/packages/gatsby/src/generators/application/files/src/pages/index.tsx__tmpl__
index 27a3cea1f8..4b25b38b37 100644
--- a/packages/gatsby/src/generators/application/files/src/pages/index.tsx__tmpl__
+++ b/packages/gatsby/src/generators/application/files/src/pages/index.tsx__tmpl__
@@ -8,9 +8,6 @@ import React from 'react';
 <% }
 %>
 
-import { ReactComponent as Logo } from './logo.svg';
-import star from './star.svg';
-
 <% if (styledModule && styledModule !== 'styled-jsx') { %>
 const StyledApp = styled.div`
   <%- pageWrapperStyle %>
diff --git a/packages/gatsby/src/generators/application/files/src/pages/logo.svg b/packages/gatsby/src/generators/application/files/src/pages/logo.svg
deleted file mode 100644
index b59f98431d..0000000000
--- a/packages/gatsby/src/generators/application/files/src/pages/logo.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="262px" height="163px" viewBox="0 0 262 163" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <g id="Styles-&amp;-Quick-Wins" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-    <g id="Nx---Quick-Wins" transform="translate(-476.000000, -1284.000000)" fill-rule="nonzero">
-      <g id="Logos" transform="translate(-11.000000, 782.000000)">
-        <g id="Nx_Flat_White" transform="translate(487.000000, 502.000000)">
-          <polygon id="Path" fill="#FFFFFF" points="130.68 104.59 97.49 52.71 97.44 96.3 40.24 0 0 0 0 162.57 39.79 162.57 39.92 66.39 96.53 158.26"/>
-          <polygon id="Path" fill="#FFFFFF" points="97.5 41.79 137.24 41.79 137.33 41.33 137.33 0 97.54 0 97.49 41.33"/>
-          <path d="M198.66,86.86 C189.139872,86.6795216 180.538723,92.516445 177.19,101.43 C182.764789,93.0931021 193.379673,89.7432211 202.73,93.37 C207.05,95.13 212.73,97.97 217.23,96.45 C212.950306,90.4438814 206.034895,86.8725952 198.66,86.86 L198.66,86.86 Z" id="Path" fill="#96D8E9"/>
-          <path d="M243.75,106.42 C243.75,101.55 241.1,100.42 235.6,98.42 C231.52,97 226.89,95.4 223.52,91 C222.86,90.13 222.25,89.15 221.6,88.11 C220.14382,85.4164099 218.169266,83.037429 215.79,81.11 C212.58,78.75 208.37,77.6 202.91,77.6 C191.954261,77.6076705 182.084192,84.2206169 177.91,94.35 C183.186964,87.0278244 191.956716,83.0605026 200.940147,83.9314609 C209.923578,84.8024193 217.767888,90.3805017 221.54,98.58 C223.424615,101.689762 227.141337,103.174819 230.65,102.22 C236.02,101.07 235.65,106.15 243.76,107.87 L243.75,106.42 Z" id="Path" fill="#48C4E5"/>
-          <path d="M261.46,105.38 L261.46,105.27 C261.34,73.03 235.17,45.45 202.91,45.45 C183.207085,45.4363165 164.821777,55.3450614 154,71.81 L153.79,71.45 L137.23,45.45 L97.5,45.4499858 L135.25,104.57 L98.41,162.57 L137,162.57 L153.79,136.78 L170.88,162.57 L209.48,162.57 L174.48,107.49 C173.899005,106.416838 173.583536,105.220114 173.56,104 C173.557346,96.2203871 176.64661,88.7586448 182.147627,83.2576275 C187.648645,77.7566101 195.110387,74.6673462 202.89,74.67 C219.11,74.67 221.82,84.37 225.32,88.93 C232.23,97.93 246.03,93.99 246.03,105.73 L246.03,105.73 C246.071086,108.480945 247.576662,111.001004 249.979593,112.340896 C252.382524,113.680787 255.317747,113.636949 257.679593,112.225896 C260.041438,110.814842 261.471086,108.250945 261.43,105.5 L261.43,105.5 L261.43,105.38 L261.46,105.38 Z" id="Path" fill="#FFFFFF"/>
-          <path d="M261.5,113.68 C261.892278,116.421801 261.504116,119.218653 260.38,121.75 C258.18,126.84 254.51,125.14 254.51,125.14 C254.51,125.14 251.35,123.6 253.27,120.65 C255.4,117.36 259.61,117.74 261.5,113.68 Z" id="Path" fill="#FFFFFF"/>
-        </g>
-      </g>
-    </g>
-  </g>
-</svg>
diff --git a/packages/gatsby/src/generators/application/files/src/pages/star.svg b/packages/gatsby/src/generators/application/files/src/pages/star.svg
deleted file mode 100644
index 901053d385..0000000000
--- a/packages/gatsby/src/generators/application/files/src/pages/star.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg
-        className="material-icons"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
->
-    <path d="M0 0h24v24H0z" fill="none" />
-    <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
-</svg>
diff --git a/packages/gatsby/src/generators/application/lib/create-application-files.helpers.ts b/packages/gatsby/src/generators/application/lib/create-application-files.helpers.ts
index b337cb7ede..6c702e9514 100644
--- a/packages/gatsby/src/generators/application/lib/create-application-files.helpers.ts
+++ b/packages/gatsby/src/generators/application/lib/create-application-files.helpers.ts
@@ -1,215 +1,819 @@
 export function createAppJsx(name: string) {
   return `
-  <header className="flex">
-    <Logo width="75" height="75"/>
-    <h1>Welcome to ${name}!</h1>
-  </header>
-  <main>
-    <h2>Resources &amp; Tools</h2>
-    <p>
-      Thank you for using and showing some ♥ for Nx.
-    </p>
-    <div className="flex github-star-container">
-      <a href="https://github.com/nrwl/nx" target="_blank" rel="noopener noreferrer"> If you like Nx, please give it a star:
-        <div className="github-star-badge">
-          <img src={star} className="material-icons" alt="" />
-            Star
+      <style
+        dangerouslySetInnerHTML={{
+          __html: \`
+  html {
+    -webkit-text-size-adjust: 100%;
+    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+      'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
+      'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+      'Noto Color Emoji';
+    line-height: 1.5;
+    tab-size: 4;
+    scroll-behavior: smooth;
+  }
+  body {
+    font-family: inherit;
+    line-height: inherit;
+    margin: 0;
+  }
+  h1,
+    h2,
+    p,
+    pre {
+    margin: 0;
+  }
+*,
+  ::before,
+    ::after {
+    box-sizing: border-box;
+    border-width: 0;
+    border-style: solid;
+    border-color: currentColor;
+  }
+  h1,
+    h2 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+  a {
+    color: inherit;
+    text-decoration: inherit;
+  }
+  pre {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+      'Liberation Mono', 'Courier New', monospace;
+  }
+  svg {
+    display: block;
+    vertical-align: middle;
+    shape-rendering: auto;
+    text-rendering: optimizeLegibility;
+  }
+  pre {
+    background-color: rgba(55, 65, 81, 1);
+    border-radius: 0.25rem;
+    color: rgba(229, 231, 235, 1);
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+      'Liberation Mono', 'Courier New', monospace;
+    overflow: scroll;
+    padding: 0.5rem 0.75rem;
+  }
+
+.shadow {
+    box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+      0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+.rounded {
+    border-radius: 1.5rem;
+  }
+.wrapper {
+    width: 100%;
+  }
+.container {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 768px;
+    padding-bottom: 3rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    color: rgba(55, 65, 81, 1);
+    width: 100%;
+  }
+  #welcome {
+    margin-top: 2.5rem;
+  }
+  #welcome h1 {
+    font-size: 3rem;
+    font-weight: 500;
+    letter-spacing: -0.025em;
+    line-height: 1;
+  }
+  #welcome span {
+    display: block;
+    font-size: 1.875rem;
+    font-weight: 300;
+    line-height: 2.25rem;
+    margin-bottom: 0.5rem;
+  }
+  #hero {
+    align-items: center;
+    background-color: hsla(214, 62%, 21%, 1);
+    border: none;
+    box-sizing: border-box;
+    color: rgba(55, 65, 81, 1);
+    display: grid;
+    grid-template-columns: 1fr;
+    margin-top: 3.5rem;
+  }
+  #hero .text-container {
+    color: rgba(255, 255, 255, 1);
+    padding: 3rem 2rem;
+  }
+  #hero .text-container h2 {
+    font-size: 1.5rem;
+    line-height: 2rem;
+    position: relative;
+  }
+  #hero .text-container h2 svg {
+    color: hsla(162, 47%, 50%, 1);
+    height: 2rem;
+    left: -0.25rem;
+    position: absolute;
+    top: 0;
+    width: 2rem;
+  }
+  #hero .text-container h2 span {
+    margin-left: 2.5rem;
+  }
+  #hero .text-container a {
+    background-color: rgba(255, 255, 255, 1);
+    border-radius: 0.75rem;
+    color: rgba(55, 65, 81, 1);
+    display: inline-block;
+    margin-top: 1.5rem;
+    padding: 1rem 2rem;
+    text-decoration: inherit;
+  }
+  #hero .logo-container {
+    display: none;
+    justify-content: center;
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+  #hero .logo-container svg {
+    color: rgba(255, 255, 255, 1);
+    width: 66.666667%;
+  }
+  #middle-content {
+    align-items: flex-start;
+    display: grid;
+    gap: 4rem;
+    grid-template-columns: 1fr;
+    margin-top: 3.5rem;
+  }
+  #learning-materials {
+    padding: 2.5rem 2rem;
+  }
+  #learning-materials h2 {
+    font-weight: 500;
+    font-size: 1.25rem;
+    letter-spacing: -0.025em;
+    line-height: 1.75rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+.list-item-link {
+    align-items: center;
+    border-radius: 0.75rem;
+    display: flex;
+    margin-top: 1rem;
+    padding: 1rem;
+    transition-property: background-color, border-color, color, fill, stroke,
+      opacity, box-shadow, transform, filter, backdrop-filter,
+    -webkit-backdrop-filter;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+    width: 100%;
+  }
+.list-item-link svg:first-child {
+    margin-right: 1rem;
+    height: 1.5rem;
+    transition-property: background-color, border-color, color, fill, stroke,
+      opacity, box-shadow, transform, filter, backdrop-filter,
+    -webkit-backdrop-filter;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+    width: 1.5rem;
+  }
+.list-item-link > span {
+    flex-grow: 1;
+    font-weight: 400;
+    transition-property: background-color, border-color, color, fill, stroke,
+      opacity, box-shadow, transform, filter, backdrop-filter,
+    -webkit-backdrop-filter;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+.list-item-link > span > span {
+    color: rgba(107, 114, 128, 1);
+    display: block;
+    flex-grow: 1;
+    font-size: 0.75rem;
+    font-weight: 300;
+    line-height: 1rem;
+    transition-property: background-color, border-color, color, fill, stroke,
+      opacity, box-shadow, transform, filter, backdrop-filter,
+    -webkit-backdrop-filter;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+.list-item-link svg:last-child {
+    height: 1rem;
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+    width: 1rem;
+  }
+.list-item-link:hover {
+    color: rgba(255, 255, 255, 1);
+    background-color: hsla(162, 47%, 50%, 1);
+  }
+.list-item-link:hover > span {}
+.list-item-link:hover > span > span {
+    color: rgba(243, 244, 246, 1);
+  }
+.list-item-link:hover svg:last-child {
+    transform: translateX(0.25rem);
+  }
+  #other-links {}
+.button-pill {
+    padding: 1.5rem 2rem;
+    transition-duration: 300ms;
+    transition-property: background-color, border-color, color, fill, stroke,
+      opacity, box-shadow, transform, filter, backdrop-filter,
+    -webkit-backdrop-filter;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    align-items: center;
+    display: flex;
+  }
+.button-pill svg {
+    transition-property: background-color, border-color, color, fill, stroke,
+      opacity, box-shadow, transform, filter, backdrop-filter,
+    -webkit-backdrop-filter;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+    flex-shrink: 0;
+    width: 3rem;
+  }
+.button-pill > span {
+    letter-spacing: -0.025em;
+    font-weight: 400;
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+.button-pill span span {
+    display: block;
+    font-size: 0.875rem;
+    font-weight: 300;
+    line-height: 1.25rem;
+  }
+.button-pill:hover svg,
+.button-pill:hover {
+    color: rgba(255, 255, 255, 1) !important;
+  }
+  #nx-console:hover {
+    background-color: rgba(0, 122, 204, 1);
+  }
+  #nx-console svg {
+    color: rgba(0, 122, 204, 1);
+  }
+  #nx-repo:hover {
+    background-color: rgba(24, 23, 23, 1);
+  }
+  #nx-repo svg {
+    color: rgba(24, 23, 23, 1);
+  }
+  #nx-cloud {
+    margin-bottom: 2rem;
+    margin-top: 2rem;
+    padding: 2.5rem 2rem;
+  }
+  #nx-cloud > div {
+    align-items: center;
+    display: flex;
+  }
+  #nx-cloud > div svg {
+    border-radius: 0.375rem;
+    flex-shrink: 0;
+    width: 3rem;
+  }
+  #nx-cloud > div h2 {
+    font-size: 1.125rem;
+    font-weight: 400;
+    letter-spacing: -0.025em;
+    line-height: 1.75rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+  #nx-cloud > div h2 span {
+    display: block;
+    font-size: 0.875rem;
+    font-weight: 300;
+    line-height: 1.25rem;
+  }
+  #nx-cloud p {
+    font-size: 1rem;
+    line-height: 1.5rem;
+    margin-top: 1rem;
+  }
+  #nx-cloud pre {
+    margin-top: 1rem;
+  }
+  #nx-cloud a {
+    color: rgba(107, 114, 128, 1);
+    display: block;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    margin-top: 1.5rem;
+    text-align: right;
+  }
+  #nx-cloud a:hover {
+    text-decoration: underline;
+  }
+  #commands {
+    padding: 2.5rem 2rem;
+    margin-top: 3.5rem;
+  }
+  #commands h2 {
+    font-size: 1.25rem;
+    font-weight: 400;
+    letter-spacing: -0.025em;
+    line-height: 1.75rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+  #commands p {
+    font-size: 1rem;
+    font-weight: 300;
+    line-height: 1.5rem;
+    margin-top: 1rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+  details {
+    align-items: center;
+    display: flex;
+    margin-top: 1rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    width: 100%;
+  }
+  details pre > span {
+    color: rgba(181, 181, 181, 1);
+    display: block;
+  }
+  summary {
+    border-radius: 0.5rem;
+    display: flex;
+    font-weight: 400;
+    padding: 0.5rem;
+    cursor: pointer;
+    transition-property: background-color, border-color, color, fill, stroke,
+      opacity, box-shadow, transform, filter, backdrop-filter,
+    -webkit-backdrop-filter;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+  summary:hover {
+    background-color: rgba(243, 244, 246, 1);
+  }
+  summary svg {
+    height: 1.5rem;
+    margin-right: 1rem;
+    width: 1.5rem;
+  }
+  #love {
+    color: rgba(107, 114, 128, 1);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    margin-top: 3.5rem;
+    opacity: 0.6;
+    text-align: center;
+  }
+  #love svg {
+    color: rgba(252, 165, 165, 1);
+    width: 1.25rem;
+    height: 1.25rem;
+    display: inline;
+    margin-top: -0.25rem;
+  }
+@media screen and (min-width: 768px) {
+    #hero {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+    #hero .logo-container {
+      display: flex;
+    }
+    #middle-content {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+  \`,
+        }}
+      />
+      <div className="wrapper">
+        <div className="container">
+          <div id="welcome">
+            <h1>
+              <span> Hello there, </span>
+              Welcome ${name} 👋
+            </h1>
+          </div>
+
+          <div id="hero" className="rounded">
+            <div className="text-container">
+              <h2>
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
+                  />
+                </svg>
+                <span>You&apos;re up and running</span>
+              </h2>
+              <a href="#commands"> What&apos;s next? </a>
+            </div>
+            <div className="logo-container">
+              <svg
+                fill="currentColor"
+                role="img"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path d="M11.987 14.138l-3.132 4.923-5.193-8.427-.012 8.822H0V4.544h3.691l5.247 8.833.005-3.998 3.044 4.759zm.601-5.761c.024-.048 0-3.784.008-3.833h-3.65c.002.059-.005 3.776-.003 3.833h3.645zm5.634 4.134a2.061 2.061 0 0 0-1.969 1.336 1.963 1.963 0 0 1 2.343-.739c.396.161.917.422 1.33.283a2.1 2.1 0 0 0-1.704-.88zm3.39 1.061c-.375-.13-.8-.277-1.109-.681-.06-.08-.116-.17-.176-.265a2.143 2.143 0 0 0-.533-.642c-.294-.216-.68-.322-1.18-.322a2.482 2.482 0 0 0-2.294 1.536 2.325 2.325 0 0 1 4.002.388.75.75 0 0 0 .836.334c.493-.105.46.36 1.203.518v-.133c-.003-.446-.246-.55-.75-.733zm2.024 1.266a.723.723 0 0 0 .347-.638c-.01-2.957-2.41-5.487-5.37-5.487a5.364 5.364 0 0 0-4.487 2.418c-.01-.026-1.522-2.39-1.538-2.418H8.943l3.463 5.423-3.379 5.32h3.54l1.54-2.366 1.568 2.366h3.541l-3.21-5.052a.7.7 0 0 1-.084-.32 2.69 2.69 0 0 1 2.69-2.691h.001c1.488 0 1.736.89 2.057 1.308.634.826 1.9.464 1.9 1.541a.707.707 0 0 0 1.066.596zm.35.133c-.173.372-.56.338-.755.639-.176.271.114.412.114.412s.337.156.538-.311c.104-.231.14-.488.103-.74z" />
+              </svg>
+            </div>
+          </div>
+
+          <div id="middle-content">
+            <div id="learning-materials" className="rounded shadow">
+              <h2>Learning materials</h2>
+              <a
+                href="https://nx.dev/getting-started/intro?utm_source=nx-project"
+                target="_blank"
+                rel="noreferrer"
+                className="list-item-link"
+              >
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
+                  />
+                </svg>
+                <span>
+                  Documentation
+                  <span> Everything is in there </span>
+                </span>
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M9 5l7 7-7 7"
+                  />
+                </svg>
+              </a>
+              <a
+                href="https://blog.nrwl.io/?utm_source=nx-project"
+                target="_blank"
+                rel="noreferrer"
+                className="list-item-link"
+              >
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"
+                  />
+                </svg>
+                <span>
+                  Blog
+                  <span> Changelog, features & events </span>
+                </span>
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M9 5l7 7-7 7"
+                  />
+                </svg>
+              </a>
+              <a
+                href="https://www.youtube.com/c/Nrwl_io/videos?utm_source=nx-project&sub_confirmation=1"
+                target="_blank"
+                rel="noreferrer"
+                className="list-item-link"
+              >
+                <svg
+                  role="img"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>YouTube</title>
+                  <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
+                </svg>
+                <span>
+                  YouTube channel
+                  <span> Nx Show, talks & tutorials </span>
+                </span>
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M9 5l7 7-7 7"
+                  />
+                </svg>
+              </a>
+              <a
+                href="https://nx.dev/tutorial/01-create-application?utm_source=nx-project"
+                target="_blank"
+                rel="noreferrer"
+                className="list-item-link"
+              >
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
+                  />
+                </svg>
+                <span>
+                  Interactive tutorials
+                  <span> Create an app, step-by-step </span>
+                </span>
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M9 5l7 7-7 7"
+                  />
+                </svg>
+              </a>
+              <a
+                href="https://nxplaybook.com/?utm_source=nx-project"
+                target="_blank"
+                rel="noreferrer"
+                className="list-item-link"
+              >
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path d="M12 14l9-5-9-5-9 5 9 5z" />
+                  <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
+                  />
+                </svg>
+                <span>
+                  Video courses
+                  <span> Nx custom courses </span>
+                </span>
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M9 5l7 7-7 7"
+                  />
+                </svg>
+              </a>
+            </div>
+            <div id="other-links">
+              <a
+                id="nx-console"
+                className="button-pill rounded shadow"
+                href="https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console&utm_source=nx-project"
+                target="_blank"
+                rel="noreferrer"
+              >
+                <svg
+                  fill="currentColor"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>Visual Studio Code</title>
+                  <path d="M23.15 2.587L18.21.21a1.494 1.494 0 0 0-1.705.29l-9.46 8.63-4.12-3.128a.999.999 0 0 0-1.276.057L.327 7.261A1 1 0 0 0 .326 8.74L3.899 12 .326 15.26a1 1 0 0 0 .001 1.479L1.65 17.94a.999.999 0 0 0 1.276.057l4.12-3.128 9.46 8.63a1.492 1.492 0 0 0 1.704.29l4.942-2.377A1.5 1.5 0 0 0 24 20.06V3.939a1.5 1.5 0 0 0-.85-1.352zm-5.146 14.861L10.826 12l7.178-5.448v10.896z" />
+                </svg>
+                <span>
+                  Install Nx Console
+                  <span>Plugin for VSCode</span>
+                </span>
+              </a>
+              <div id="nx-cloud" className="rounded shadow">
+                <div>
+                  <svg
+                    viewBox="0 0 120 120"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M120 15V30C103.44 30 90 43.44 90 60C90 76.56 76.56 90 60 90C43.44 90 30 103.44 30 120H15C6.72 120 0 113.28 0 105V15C0 6.72 6.72 0 15 0H105C113.28 0 120 6.72 120 15Z"
+                      fill="#0E2039"
+                    />
+                    <path
+                      d="M120 30V105C120 113.28 113.28 120 105 120H30C30 103.44 43.44 90 60 90C76.56 90 90 76.56 90 60C90 43.44 103.44 30 120 30Z"
+                      fill="white"
+                    />
+                  </svg>
+                  <h2>
+                    NxCloud
+                    <span>
+                      Enable faster CI & better DX
+                    </span>
+                  </h2>
+                </div>
+                <p>
+                  You can activate distributed tasks executions and caching by
+                  running:
+                </p>
+                <pre>nx connect-to-nx-cloud</pre>
+                <a
+                  href="https://nx.app/?utm_source=nx-project"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  {' '}
+                  What is Nx Cloud?{' '}
+                </a>
+              </div>
+              <a
+                id="nx-repo"
+                className="button-pill rounded shadow"
+                href="https://github.com/nrwl/nx?utm_source=nx-project"
+                target="_blank"
+                rel="noreferrer"
+              >
+                <svg
+                  fill="currentColor"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+                </svg>
+                <span>
+                  Nx is open source
+                  <span> Love Nx? Give us a star! </span>
+                </span>
+              </a>
+            </div>
+          </div>
+
+          <div id="commands" className="rounded shadow">
+            <h2>Next steps</h2>
+            <p>Here are some things you can do with Nx:</p>
+            <details>
+              <summary>
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                  />
+                </svg>
+                Add UI library
+              </summary>
+              <pre>
+                <span># Generate UI lib</span>
+                nx g @nrwl/angular:lib ui
+                <span># Add a component</span>
+                nx g @nrwl/angular:component button --project ui
+              </pre>
+            </details>
+            <details>
+              <summary>
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                  />
+                </svg>
+                View interactive dependency graph
+              </summary>
+              <pre>nx dep-graph</pre>
+            </details>
+            <details>
+              <summary>
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                  />
+                </svg>
+                Run affected commands
+              </summary>
+              <pre>
+                <span># see what&apos;s been affected by changes</span>
+                nx affected:dep-graph
+                <span># run tests for current changes</span>
+                nx affected:test
+                <span># run e2e tests for current changes</span>
+                nx affected:e2e
+              </pre>
+            </details>
+          </div>
+
+          <p id="love">
+            Carefully crafted with
+            <svg
+              fill="currentColor"
+              stroke="none"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+              />
+            </svg>
+          </p>
         </div>
-      </a>
-    </div>
-    <p>
-      Here are some links to help you get started.
-    </p>
-    <ul className="resources">
-      <li className="col-span-2">
-        <a
-          className="resource flex"
-          href="https://egghead.io/playlists/scale-react-development-with-nx-4038"
-        >
-          Scale React Development with Nx (Course)
-        </a>
-      </li>
-      <li className="col-span-2">
-        <a
-          className="resource flex"
-          href="https://nx.dev/latest/react/tutorial/01-create-application"
-        >
-          Interactive tutorial
-        </a>
-      </li>
-      <li className="col-span-2">
-        <a className="resource flex" href="https://nx.app/">
-          <svg width="36" height="36" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M120 15V30C103.44 30 90 43.44 90 60C90 76.56 76.56 90 60 90C43.44 90 30 103.44 30 120H15C6.72 120 0 113.28 0 105V15C0 6.72 6.72 0 15 0H105C113.28 0 120 6.72 120 15Z" fill="#0E2039"/>
-            <path d="M120 30V105C120 113.28 113.28 120 105 120H30C30 103.44 43.44 90 60 90C76.56 90 90 76.56 90 60C90 43.44 103.44 30 120 30Z" fill="white"/>
-          </svg>
-          <span className="gutter-left">Nx Cloud</span>
-        </a>
-      </li>
-    </ul>
-    <h2>Next Steps</h2>
-    <p>
-      Here are some things you can do with Nx.
-    </p>
-    <details open>
-      <summary>Add UI library</summary>
-      <pre>{\`# Generate UI lib
-nx g @nrwl/react:lib ui
-
-# Add a component
-nx g @nrwl/react:component xyz --project ui\`}</pre>
-    </details>
-    <details>
-      <summary>View dependency graph</summary>
-      <pre>{\`nx dep-graph\`}</pre>
-    </details>
-    <details>
-      <summary>Run affected commands</summary>
-      <pre>{\`# see what's been affected by changes
-nx affected:dep-graph
-
-# run tests for current changes
-nx affected:test
-
-# run e2e tests for current changes
-nx affected:e2e
-\`}</pre>
-    </details>
-  </main>
+      </div>
 `;
 }
 
 export function createPageWrapperStyle() {
-  return `
-    font-family: sans-serif;
-    min-width: 300px;
-    max-width: 600px;
-    margin: 50px auto;
-  `;
+  return '';
 }
 
 export function createPageStyleContent() {
-  return `
-    .gutter-left {
-      margin-left: 9px;
-    }
-    
-    .col-span-2 {
-      grid-column: span 2;
-    }
-    
-    .flex {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    
-    header {
-      background-color: #143055;
-      color: white;
-      padding: 5px;
-      border-radius: 3px;
-    }
-    
-    main {
-      padding: 0 36px;
-    }
-    
-    p {
-      text-align: center;
-    }
-    
-    h1 {
-      text-align: center;
-      margin-left: 18px;
-      font-size: 24px;
-    }
-    
-    h2 {
-      text-align: center;
-      font-size: 20px;
-      margin: 40px 0 10px 0;
-    }
-    
-    .resources {
-      text-align: center;
-      list-style: none;
-      padding: 0;
-      display: grid;
-      grid-gap: 9px;
-      grid-template-columns: 1fr 1fr;
-    }
-    
-    .resource {
-      color: #0094ba;
-      height: 36px;
-      background-color: rgba(0, 0, 0, 0);
-      border: 1px solid rgba(0, 0, 0, 0.12);
-      border-radius: 4px;
-      padding: 3px 9px;
-      text-decoration: none;
-    }
-    
-    .resource:hover {
-      background-color: rgba(68, 138, 255, 0.04);
-    }
-    
-    pre {
-      padding: 9px;
-      border-radius: 4px;
-      background-color: black;
-      color: #eee;
-    }
-    
-    details {
-      border-radius: 4px;
-      color: #333;
-      background-color: rgba(0, 0, 0, 0);
-      border: 1px solid rgba(0, 0, 0, 0.12);
-      padding: 3px 9px;
-      margin-bottom: 9px;
-    }
-    
-    summary {
-      outline: none;
-      height: 36px;
-      line-height: 36px;
-    }
-    
-    .github-star-container {
-      margin-top: 12px;
-      line-height: 20px;
-    }
-    
-    .github-star-container a {
-      display: flex;
-      align-items: center;
-      text-decoration: none;
-      color: #333;
-    }
-    
-    .github-star-badge {
-      color: #24292e;
-      display: flex;
-      align-items: center;
-      font-size: 12px;
-      padding: 3px 10px;
-      border: 1px solid rgba(27,31,35,.2);
-      border-radius: 3px;
-      background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
-      margin-left: 4px;
-      font-weight: 600;
-    }
-    
-    .github-star-badge:hover {
-      background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
-      border-color: rgba(27,31,35,.35);
-      background-position: -.5em;
-    }
-    .github-star-badge .material-icons {
-      height: 16px;
-      width: 16px;
-      margin-right: 4px;
-    }
-  `;
+  return '';
 }
diff --git a/packages/next/src/generators/application/files/pages/__fileName__.module.__style__ b/packages/next/src/generators/application/files/pages/__fileName__.module.__style__
index f106ef1f66..40d88f3d79 100644
--- a/packages/next/src/generators/application/files/pages/__fileName__.module.__style__
+++ b/packages/next/src/generators/application/files/pages/__fileName__.module.__style__
@@ -1 +1 @@
-<%= pageStyleContent %>
+<%- pageStyleContent %>
diff --git a/packages/next/src/generators/application/files/pages/_app.tsx__tmpl__ b/packages/next/src/generators/application/files/pages/_app.tsx__tmpl__
index fb08f96217..4711aff36e 100644
--- a/packages/next/src/generators/application/files/pages/_app.tsx__tmpl__
+++ b/packages/next/src/generators/application/files/pages/_app.tsx__tmpl__
@@ -8,16 +8,9 @@ function CustomApp({ Component, pageProps }: AppProps) {
       <Head>
         <title>Welcome to <%= name %>!</title>
       </Head>
-      <div className="app">
-        <header className="flex">
-          {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img src="/nx-logo-white.svg" alt="Nx logo" width="75" height="50" />
-          <h1>Welcome to <%= name %>!</h1>
-        </header>
-        <main>
-          <Component {...pageProps}/>
-        </main>
-      </div>
+      <main className="app">
+        <Component {...pageProps}/>
+      </main>
     </>
   );
 };
diff --git a/packages/next/src/generators/application/files/pages/styles.__stylesExt____tmpl__ b/packages/next/src/generators/application/files/pages/styles.__stylesExt____tmpl__
index 315ded5181..c3f24863cb 100644
--- a/packages/next/src/generators/application/files/pages/styles.__stylesExt____tmpl__
+++ b/packages/next/src/generators/application/files/pages/styles.__stylesExt____tmpl__
@@ -1 +1 @@
-<%= styleContent %>
+<%- styleContent %>
diff --git a/packages/next/src/generators/application/files/public/nx-logo-white.svg b/packages/next/src/generators/application/files/public/nx-logo-white.svg
deleted file mode 100644
index 577944247d..0000000000
--- a/packages/next/src/generators/application/files/public/nx-logo-white.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="262px" height="163px" viewBox="0 0 262 163" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="Styles-&amp;-Quick-Wins" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Nx---Quick-Wins" transform="translate(-476.000000, -1284.000000)" fill-rule="nonzero">
-            <g id="Logos" transform="translate(-11.000000, 782.000000)">
-                <g id="Nx_Flat_White" transform="translate(487.000000, 502.000000)">
-                    <polygon id="Path" fill="#FFFFFF" points="130.68 104.59 97.49 52.71 97.44 96.3 40.24 0 0 0 0 162.57 39.79 162.57 39.92 66.39 96.53 158.26"/>
-                    <polygon id="Path" fill="#FFFFFF" points="97.5 41.79 137.24 41.79 137.33 41.33 137.33 0 97.54 0 97.49 41.33"/>
-                    <path d="M198.66,86.86 C189.139872,86.6795216 180.538723,92.516445 177.19,101.43 C182.764789,93.0931021 193.379673,89.7432211 202.73,93.37 C207.05,95.13 212.73,97.97 217.23,96.45 C212.950306,90.4438814 206.034895,86.8725952 198.66,86.86 L198.66,86.86 Z" id="Path" fill="#96D8E9"/>
-                    <path d="M243.75,106.42 C243.75,101.55 241.1,100.42 235.6,98.42 C231.52,97 226.89,95.4 223.52,91 C222.86,90.13 222.25,89.15 221.6,88.11 C220.14382,85.4164099 218.169266,83.037429 215.79,81.11 C212.58,78.75 208.37,77.6 202.91,77.6 C191.954261,77.6076705 182.084192,84.2206169 177.91,94.35 C183.186964,87.0278244 191.956716,83.0605026 200.940147,83.9314609 C209.923578,84.8024193 217.767888,90.3805017 221.54,98.58 C223.424615,101.689762 227.141337,103.174819 230.65,102.22 C236.02,101.07 235.65,106.15 243.76,107.87 L243.75,106.42 Z" id="Path" fill="#48C4E5"/>
-                    <path d="M261.46,105.38 L261.46,105.27 C261.34,73.03 235.17,45.45 202.91,45.45 C183.207085,45.4363165 164.821777,55.3450614 154,71.81 L153.79,71.45 L137.23,45.45 L97.5,45.4499858 L135.25,104.57 L98.41,162.57 L137,162.57 L153.79,136.78 L170.88,162.57 L209.48,162.57 L174.48,107.49 C173.899005,106.416838 173.583536,105.220114 173.56,104 C173.557346,96.2203871 176.64661,88.7586448 182.147627,83.2576275 C187.648645,77.7566101 195.110387,74.6673462 202.89,74.67 C219.11,74.67 221.82,84.37 225.32,88.93 C232.23,97.93 246.03,93.99 246.03,105.73 L246.03,105.73 C246.071086,108.480945 247.576662,111.001004 249.979593,112.340896 C252.382524,113.680787 255.317747,113.636949 257.679593,112.225896 C260.041438,110.814842 261.471086,108.250945 261.43,105.5 L261.43,105.5 L261.43,105.38 L261.46,105.38 Z" id="Path" fill="#FFFFFF"/>
-                    <path d="M261.5,113.68 C261.892278,116.421801 261.504116,119.218653 260.38,121.75 C258.18,126.84 254.51,125.14 254.51,125.14 C254.51,125.14 251.35,123.6 253.27,120.65 C255.4,117.36 259.61,117.74 261.5,113.68 Z" id="Path" fill="#FFFFFF"/>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/packages/next/src/generators/application/files/public/star.svg b/packages/next/src/generators/application/files/public/star.svg
deleted file mode 100644
index 901053d385..0000000000
--- a/packages/next/src/generators/application/files/public/star.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg
-        className="material-icons"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
->
-    <path d="M0 0h24v24H0z" fill="none" />
-    <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
-</svg>
diff --git a/packages/next/src/generators/application/lib/create-application-files.helpers.ts b/packages/next/src/generators/application/lib/create-application-files.helpers.ts
index 19e60995ee..4cfe5ff453 100644
--- a/packages/next/src/generators/application/lib/create-application-files.helpers.ts
+++ b/packages/next/src/generators/application/lib/create-application-files.helpers.ts
@@ -1,208 +1,790 @@
 export function createAppJsx(name: string) {
   return `
-    <h2>Resources &amp; Tools</h2>
-    <p>
-      Thank you for using and showing some ♥ for Nx.
-    </p>
-    <div className="flex github-star-container">
-      <a href="https://github.com/nrwl/nx" target="_blank" rel="noopener noreferrer"> If you like Nx, please give it a star:
-        <div className="github-star-badge">
-          {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img src="/star.svg" className="material-icons" alt="" />
-            Star
+    <div className="wrapper">
+      <div className="container">
+        <div id="welcome">
+          <h1>
+            <span> Hello there, </span>
+            Welcome ${name} 👋
+          </h1>
         </div>
-      </a>
-    </div>
-    <p>
-      Here are some links to help you get started.
-    </p>
-    <ul className="resources">
-      <li className="col-span-2">
-        <a
-          className="resource flex"
-          href="https://egghead.io/playlists/scale-react-development-with-nx-4038"
-        >
-          Scale React Development with Nx (Course)
-        </a>
-      </li>
-      <li className="col-span-2">
-        <a
-          className="resource flex"
-          href="https://nx.dev/latest/react/tutorial/01-create-application"
-        >
-          Interactive tutorial
-        </a>
-      </li>
-      <li className="col-span-2">
-        <a className="resource flex" href="https://nx.app/">
-          <svg width="36" height="36" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M120 15V30C103.44 30 90 43.44 90 60C90 76.56 76.56 90 60 90C43.44 90 30 103.44 30 120H15C6.72 120 0 113.28 0 105V15C0 6.72 6.72 0 15 0H105C113.28 0 120 6.72 120 15Z" fill="#0E2039"/>
-            <path d="M120 30V105C120 113.28 113.28 120 105 120H30C30 103.44 43.44 90 60 90C76.56 90 90 76.56 90 60C90 43.44 103.44 30 120 30Z" fill="white"/>
+
+        <div id="hero" className="rounded">
+          <div className="text-container">
+            <h2>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
+                />
+              </svg>
+              <span>You&apos;re up and running</span>
+            </h2>
+            <a href="#commands"> What&apos;s next? </a>
+          </div>
+          <div className="logo-container">
+            <svg
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="M11.987 14.138l-3.132 4.923-5.193-8.427-.012 8.822H0V4.544h3.691l5.247 8.833.005-3.998 3.044 4.759zm.601-5.761c.024-.048 0-3.784.008-3.833h-3.65c.002.059-.005 3.776-.003 3.833h3.645zm5.634 4.134a2.061 2.061 0 0 0-1.969 1.336 1.963 1.963 0 0 1 2.343-.739c.396.161.917.422 1.33.283a2.1 2.1 0 0 0-1.704-.88zm3.39 1.061c-.375-.13-.8-.277-1.109-.681-.06-.08-.116-.17-.176-.265a2.143 2.143 0 0 0-.533-.642c-.294-.216-.68-.322-1.18-.322a2.482 2.482 0 0 0-2.294 1.536 2.325 2.325 0 0 1 4.002.388.75.75 0 0 0 .836.334c.493-.105.46.36 1.203.518v-.133c-.003-.446-.246-.55-.75-.733zm2.024 1.266a.723.723 0 0 0 .347-.638c-.01-2.957-2.41-5.487-5.37-5.487a5.364 5.364 0 0 0-4.487 2.418c-.01-.026-1.522-2.39-1.538-2.418H8.943l3.463 5.423-3.379 5.32h3.54l1.54-2.366 1.568 2.366h3.541l-3.21-5.052a.7.7 0 0 1-.084-.32 2.69 2.69 0 0 1 2.69-2.691h.001c1.488 0 1.736.89 2.057 1.308.634.826 1.9.464 1.9 1.541a.707.707 0 0 0 1.066.596zm.35.133c-.173.372-.56.338-.755.639-.176.271.114.412.114.412s.337.156.538-.311c.104-.231.14-.488.103-.74z" />
+            </svg>
+          </div>
+        </div>
+
+        <div id="middle-content">
+          <div id="learning-materials" className="rounded shadow">
+            <h2>Learning materials</h2>
+            <a
+              href="https://nx.dev/getting-started/intro?utm_source=nx-project"
+              target="_blank"
+              rel="noreferrer"
+              className="list-item-link"
+            >
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
+                />
+              </svg>
+              <span>
+                Documentation
+                <span> Everything is in there </span>
+              </span>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M9 5l7 7-7 7"
+                />
+              </svg>
+            </a>
+            <a
+              href="https://blog.nrwl.io/?utm_source=nx-project"
+              target="_blank"
+              rel="noreferrer"
+              className="list-item-link"
+            >
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"
+                />
+              </svg>
+              <span>
+                Blog
+                <span> Changelog, features & events </span>
+              </span>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M9 5l7 7-7 7"
+                />
+              </svg>
+            </a>
+            <a
+              href="https://www.youtube.com/c/Nrwl_io/videos?utm_source=nx-project&sub_confirmation=1"
+              target="_blank"
+              rel="noreferrer"
+              className="list-item-link"
+            >
+              <svg
+                role="img"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <title>YouTube</title>
+                <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
+              </svg>
+              <span>
+                YouTube channel
+                <span> Nx Show, talks & tutorials </span>
+              </span>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M9 5l7 7-7 7"
+                />
+              </svg>
+            </a>
+            <a
+              href="https://nx.dev/tutorial/01-create-application?utm_source=nx-project"
+              target="_blank"
+              rel="noreferrer"
+              className="list-item-link"
+            >
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
+                />
+              </svg>
+              <span>
+                Interactive tutorials
+                <span> Create an app, step-by-step </span>
+              </span>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M9 5l7 7-7 7"
+                />
+              </svg>
+            </a>
+            <a
+              href="https://nxplaybook.com/?utm_source=nx-project"
+              target="_blank"
+              rel="noreferrer"
+              className="list-item-link"
+            >
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path d="M12 14l9-5-9-5-9 5 9 5z" />
+                <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
+                />
+              </svg>
+              <span>
+                Video courses
+                <span> Nx custom courses </span>
+              </span>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M9 5l7 7-7 7"
+                />
+              </svg>
+            </a>
+          </div>
+          <div id="other-links">
+            <a
+              id="nx-console"
+              className="button-pill rounded shadow"
+              href="https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console&utm_source=nx-project"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <svg
+                fill="currentColor"
+                role="img"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <title>Visual Studio Code</title>
+                <path d="M23.15 2.587L18.21.21a1.494 1.494 0 0 0-1.705.29l-9.46 8.63-4.12-3.128a.999.999 0 0 0-1.276.057L.327 7.261A1 1 0 0 0 .326 8.74L3.899 12 .326 15.26a1 1 0 0 0 .001 1.479L1.65 17.94a.999.999 0 0 0 1.276.057l4.12-3.128 9.46 8.63a1.492 1.492 0 0 0 1.704.29l4.942-2.377A1.5 1.5 0 0 0 24 20.06V3.939a1.5 1.5 0 0 0-.85-1.352zm-5.146 14.861L10.826 12l7.178-5.448v10.896z" />
+              </svg>
+              <span>
+                Install Nx Console
+                <span>Plugin for VSCode</span>
+              </span>
+            </a>
+            <div id="nx-cloud" className="rounded shadow">
+              <div>
+                <svg
+                  viewBox="0 0 120 120"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M120 15V30C103.44 30 90 43.44 90 60C90 76.56 76.56 90 60 90C43.44 90 30 103.44 30 120H15C6.72 120 0 113.28 0 105V15C0 6.72 6.72 0 15 0H105C113.28 0 120 6.72 120 15Z"
+                    fill="#0E2039"
+                  />
+                  <path
+                    d="M120 30V105C120 113.28 113.28 120 105 120H30C30 103.44 43.44 90 60 90C76.56 90 90 76.56 90 60C90 43.44 103.44 30 120 30Z"
+                    fill="white"
+                  />
+                </svg>
+                <h2>
+                  NxCloud
+                  <span>
+                    Enable faster CI & better DX
+                  </span>
+                </h2>
+              </div>
+              <p>
+                You can activate distributed tasks executions and caching by
+                running:
+              </p>
+              <pre>nx connect-to-nx-cloud</pre>
+              <a
+                href="https://nx.app/?utm_source=nx-project"
+                target="_blank"
+                rel="noreferrer"
+              >
+                {' '}
+                What is Nx Cloud?{' '}
+              </a>
+            </div>
+            <a
+              id="nx-repo"
+              className="button-pill rounded shadow"
+              href="https://github.com/nrwl/nx?utm_source=nx-project"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <svg
+                fill="currentColor"
+                role="img"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+              </svg>
+              <span>
+                Nx is open source
+                <span> Love Nx? Give us a star! </span>
+              </span>
+            </a>
+          </div>
+        </div>
+
+        <div id="commands" className="rounded shadow">
+          <h2>Next steps</h2>
+          <p>Here are some things you can do with Nx:</p>
+          <details>
+            <summary>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                />
+              </svg>
+              Add UI library
+            </summary>
+            <pre>
+              <span># Generate UI lib</span>
+              nx g @nrwl/angular:lib ui
+              <span># Add a component</span>
+              nx g @nrwl/angular:component button --project ui
+            </pre>
+          </details>
+          <details>
+            <summary>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                />
+              </svg>
+              View interactive dependency graph
+            </summary>
+            <pre>nx dep-graph</pre>
+          </details>
+          <details>
+            <summary>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                />
+              </svg>
+              Run affected commands
+            </summary>
+            <pre>
+              <span># see what&apos;s been affected by changes</span>
+              nx affected:dep-graph
+              <span># run tests for current changes</span>
+              nx affected:test
+              <span># run e2e tests for current changes</span>
+              nx affected:e2e
+            </pre>
+          </details>
+        </div>
+
+        <p id="love">
+          Carefully crafted with
+          <svg
+            fill="currentColor"
+            stroke="none"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+            />
           </svg>
-          <span className="gutter-left">Nx Cloud</span>
-        </a>
-      </li>
-    </ul>
-    <h2>Next Steps</h2>
-    <p>
-      Here are some things you can do with Nx.
-    </p>
-    <details open>
-      <summary>Add UI library</summary>
-      <pre>{\`# Generate UI lib
-nx g @nrwl/react:lib ui
-
-# Add a component
-nx g @nrwl/react:component xyz --project ui\`}</pre>
-    </details>
-    <details>
-      <summary>View dependency graph</summary>
-      <pre>{\`nx dep-graph\`}</pre>
-    </details>
-    <details>
-      <summary>Run affected commands</summary>
-      <pre>{\`# see what's been affected by changes
-nx affected:dep-graph
-
-# run tests for current changes
-nx affected:test
-
-# run e2e tests for current changes
-nx affected:e2e
-\`}</pre>
-    </details>
+        </p>
+      </div>
+    </div>
   `;
 }
 
 export function createStyleRules() {
   return `
-.app {
-  font-family: sans-serif;
-  min-width: 300px;
-  max-width: 600px;
-  margin: 50px auto;
-}
+    html {
+      -webkit-text-size-adjust: 100%;
+      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+      line-height: 1.5;
+      tab-size: 4;
+      scroll-behavior: smooth;
+    }
+    body {
+      font-family: inherit;
+      line-height: inherit;
+      margin: 0;
+    }
+    h1,
+    h2,
+    p,
+    pre {
+      margin: 0;
+    }
+    *,
+    ::before,
+    ::after {
+      box-sizing: border-box;
+      border-width: 0;
+      border-style: solid;
+      border-color: currentColor;
+    }
+    h1,
+    h2 {
+      font-size: inherit;
+      font-weight: inherit;
+    }
+    a {
+      color: inherit;
+      text-decoration: inherit;
+    }
+    pre {
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+    }
+    svg {
+      display: block;
+      vertical-align: middle;
+      shape-rendering: auto;
+      text-rendering: optimizeLegibility;
+    }
+    pre {
+      background-color: rgba(55, 65, 81, 1);
+      border-radius: 0.25rem;
+      color: rgba(229, 231, 235, 1);
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+      overflow: scroll;
+      padding: 0.5rem 0.75rem;
+    }
 
-.app .gutter-left {
-  margin-left: 9px;
-}
-
-.app .col-span-2 {
-  grid-column: span 2;
-}
-
-.app .flex {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.app header {
-  background-color: #143055;
-  color: white;
-  padding: 5px;
-  border-radius: 3px;
-}
-
-.app main {
-  padding: 0 36px;
-}
-
-.app p {
-  text-align: center;
-}
-
-.app h1 {
-  text-align: center;
-  margin-left: 18px;
-  font-size: 24px;
-}
-
-.app h2 {
-  text-align: center;
-  font-size: 20px;
-  margin: 40px 0 10px 0;
-}
-
-.app .resources {
-  text-align: center;
-  list-style: none;
-  padding: 0;
-  display: grid;
-  grid-gap: 9px;
-  grid-template-columns: 1fr 1fr;
-}
-
-.app .resource {
-  color: #0094ba;
-  height: 36px;
-  background-color: rgba(0, 0, 0, 0);
-  border: 1px solid rgba(0, 0, 0, 0.12);
-  border-radius: 4px;
-  padding: 3px 9px;
-  text-decoration: none;
-}
-
-.app .resource:hover {
-  background-color: rgba(68, 138, 255, 0.04);
-}
-
-.app pre {
-  padding: 9px;
-  border-radius: 4px;
-  background-color: black;
-  color: #eee;
-}
-
-.app details {
-  border-radius: 4px;
-  color: #333;
-  background-color: rgba(0, 0, 0, 0);
-  border: 1px solid rgba(0, 0, 0, 0.12);
-  padding: 3px 9px;
-  margin-bottom: 9px;
-}
-
-.app summary {
-  outline: none;
-  height: 36px;
-  line-height: 36px;
-}
-
-.app .github-star-container {
-  margin-top: 12px;
-  line-height: 20px;
-}
-
-.app .github-star-container a {
-  display: flex;
-  align-items: center;
-  text-decoration: none;
-  color: #333;
-}
-
-.app .github-star-badge {
-  color: #24292e;
-  display: flex;
-  align-items: center;
-  font-size: 12px;
-  padding: 3px 10px;
-  border: 1px solid rgba(27,31,35,.2);
-  border-radius: 3px;
-  background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
-  margin-left: 4px;
-  font-weight: 600;
-}
-
-.app .github-star-badge:hover {
-  background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
-  border-color: rgba(27,31,35,.35);
-  background-position: -.5em;
-}
-.app .github-star-badge .material-icons {
-  height: 16px;
-  width: 16px;
-  margin-right: 4px;
-}
-`;
+    .shadow {
+      box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    }
+    .rounded {
+      border-radius: 1.5rem;
+    }
+    .wrapper {
+      width: 100%;
+    }
+    .container {
+      margin-left: auto;
+      margin-right: auto;
+      max-width: 768px;
+      padding-bottom: 3rem;
+      padding-left: 1rem;
+      padding-right: 1rem;
+      color: rgba(55, 65, 81, 1);
+      width: 100%;
+    }
+    #welcome {
+      margin-top: 2.5rem;
+    }
+    #welcome h1 {
+      font-size: 3rem;
+      font-weight: 500;
+      letter-spacing: -0.025em;
+      line-height: 1;
+    }
+    #welcome span {
+      display: block;
+      font-size: 1.875rem;
+      font-weight: 300;
+      line-height: 2.25rem;
+      margin-bottom: 0.5rem;
+    }
+    #hero {
+      align-items: center;
+      background-color: hsla(214, 62%, 21%, 1);
+      border: none;
+      box-sizing: border-box;
+      color: rgba(55, 65, 81, 1);
+      display: grid;
+      grid-template-columns: 1fr;
+      margin-top: 3.5rem;
+    }
+    #hero .text-container {
+      color: rgba(255, 255, 255, 1);
+      padding: 3rem 2rem;
+    }
+    #hero .text-container h2 {
+      font-size: 1.5rem;
+      line-height: 2rem;
+      position: relative;
+    }
+    #hero .text-container h2 svg {
+      color: hsla(162, 47%, 50%, 1);
+      height: 2rem;
+      left: -0.25rem;
+      position: absolute;
+      top: 0;
+      width: 2rem;
+    }
+    #hero .text-container h2 span {
+      margin-left: 2.5rem;
+    }
+    #hero .text-container a {
+      background-color: rgba(255, 255, 255, 1);
+      border-radius: 0.75rem;
+      color: rgba(55, 65, 81, 1);
+      display: inline-block;
+      margin-top: 1.5rem;
+      padding: 1rem 2rem;
+      text-decoration: inherit;
+    }
+    #hero .logo-container {
+      display: none;
+      justify-content: center;
+      padding-left: 2rem;
+      padding-right: 2rem;
+    }
+    #hero .logo-container svg {
+      color: rgba(255, 255, 255, 1);
+      width: 66.666667%;
+    }
+    #middle-content {
+      align-items: flex-start;
+      display: grid;
+      gap: 4rem;
+      grid-template-columns: 1fr;
+      margin-top: 3.5rem;
+    }
+    #learning-materials {
+      padding: 2.5rem 2rem;
+    }
+    #learning-materials h2 {
+      font-weight: 500;
+      font-size: 1.25rem;
+      letter-spacing: -0.025em;
+      line-height: 1.75rem;
+      padding-left: 1rem;
+      padding-right: 1rem;
+    }
+    .list-item-link {
+      align-items: center;
+      border-radius: 0.75rem;
+      display: flex;
+      margin-top: 1rem;
+      padding: 1rem;
+      transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-duration: 150ms;
+      width: 100%;
+    }
+    .list-item-link svg:first-child {
+      margin-right: 1rem;
+      height: 1.5rem;
+      transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-duration: 150ms;
+      width: 1.5rem;
+    }
+    .list-item-link > span {
+      flex-grow: 1;
+      font-weight: 400;
+      transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-duration: 150ms;
+    }
+    .list-item-link > span > span {
+      color: rgba(107, 114, 128, 1);
+      display: block;
+      flex-grow: 1;
+      font-size: 0.75rem;
+      font-weight: 300;
+      line-height: 1rem;
+      transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-duration: 150ms;
+    }
+    .list-item-link svg:last-child {
+      height: 1rem;
+      transition-property: all;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-duration: 150ms;
+      width: 1rem;
+    }
+    .list-item-link:hover {
+      color: rgba(255, 255, 255, 1);
+      background-color: hsla(162, 47%, 50%, 1);
+    }
+    .list-item-link:hover > span {}
+    .list-item-link:hover > span > span {
+      color: rgba(243, 244, 246, 1);
+    }
+    .list-item-link:hover svg:last-child {
+      transform: translateX(0.25rem);
+    }
+    #other-links {}
+    .button-pill {
+      padding: 1.5rem 2rem;
+      transition-duration: 300ms;
+      transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      align-items: center;
+      display: flex;
+    }
+    .button-pill svg {
+      transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-duration: 150ms;
+      flex-shrink: 0;
+      width: 3rem;
+    }
+    .button-pill > span {
+      letter-spacing: -0.025em;
+      font-weight: 400;
+      font-size: 1.125rem;
+      line-height: 1.75rem;
+      padding-left: 1rem;
+      padding-right: 1rem;
+    }
+    .button-pill span span {
+      display: block;
+      font-size: 0.875rem;
+      font-weight: 300;
+      line-height: 1.25rem;
+    }
+    .button-pill:hover svg,
+    .button-pill:hover {
+      color: rgba(255, 255, 255, 1) !important;
+    }
+    #nx-console:hover {
+      background-color: rgba(0, 122, 204, 1);
+    }
+    #nx-console svg {
+      color: rgba(0, 122, 204, 1);
+    }
+    #nx-repo:hover {
+      background-color: rgba(24, 23, 23, 1);
+    }
+    #nx-repo svg {
+      color: rgba(24, 23, 23, 1);
+    }
+    #nx-cloud {
+      margin-bottom: 2rem;
+      margin-top: 2rem;
+      padding: 2.5rem 2rem;
+    }
+    #nx-cloud > div {
+      align-items: center;
+      display: flex;
+    }
+    #nx-cloud > div svg {
+      border-radius: 0.375rem;
+      flex-shrink: 0;
+      width: 3rem;
+    }
+    #nx-cloud > div h2 {
+      font-size: 1.125rem;
+      font-weight: 400;
+      letter-spacing: -0.025em;
+      line-height: 1.75rem;
+      padding-left: 1rem;
+      padding-right: 1rem;
+    }
+    #nx-cloud > div h2 span {
+      display: block;
+      font-size: 0.875rem;
+      font-weight: 300;
+      line-height: 1.25rem;
+    }
+    #nx-cloud p {
+      font-size: 1rem;
+      line-height: 1.5rem;
+      margin-top: 1rem;
+    }
+    #nx-cloud pre {
+      margin-top: 1rem;
+    }
+    #nx-cloud a {
+      color: rgba(107, 114, 128, 1);
+      display: block;
+      font-size: 0.875rem;
+      line-height: 1.25rem;
+      margin-top: 1.5rem;
+      text-align: right;
+    }
+    #nx-cloud a:hover {
+      text-decoration: underline;
+    }
+    #commands {
+      padding: 2.5rem 2rem;
+      margin-top: 3.5rem;
+    }
+    #commands h2 {
+      font-size: 1.25rem;
+      font-weight: 400;
+      letter-spacing: -0.025em;
+      line-height: 1.75rem;
+      padding-left: 1rem;
+      padding-right: 1rem;
+    }
+    #commands p {
+      font-size: 1rem;
+      font-weight: 300;
+      line-height: 1.5rem;
+      margin-top: 1rem;
+      padding-left: 1rem;
+      padding-right: 1rem;
+    }
+    details {
+      align-items: center;
+      display: flex;
+      margin-top: 1rem;
+      padding-left: 1rem;
+      padding-right: 1rem;
+      width: 100%;
+    }
+    details pre > span {
+      color: rgba(181, 181, 181, 1);
+      display: block;
+    }
+    summary {
+      border-radius: 0.5rem;
+      display: flex;
+      font-weight: 400;
+      padding: 0.5rem;
+      cursor: pointer;
+      transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-duration: 150ms;
+    }
+    summary:hover {
+      background-color: rgba(243, 244, 246, 1);
+    }
+    summary svg {
+      height: 1.5rem;
+      margin-right: 1rem;
+      width: 1.5rem;
+    }
+    #love {
+      color: rgba(107, 114, 128, 1);
+      font-size: 0.875rem;
+      line-height: 1.25rem;
+      margin-top: 3.5rem;
+      opacity: 0.6;
+      text-align: center;
+    }
+    #love svg {
+      color: rgba(252, 165, 165, 1);
+      width: 1.25rem;
+      height: 1.25rem;
+      display: inline;
+      margin-top: -0.25rem;
+    }
+    @media screen and (min-width: 768px) {
+      #hero {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+      #hero .logo-container {
+        display: flex;
+      }
+      #middle-content {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+    }
+  `;
 }
diff --git a/packages/next/src/generators/application/lib/create-application-files.ts b/packages/next/src/generators/application/lib/create-application-files.ts
index d84074cffc..6e1eaecd81 100644
--- a/packages/next/src/generators/application/lib/create-application-files.ts
+++ b/packages/next/src/generators/application/lib/create-application-files.ts
@@ -4,14 +4,7 @@ import {
   createAppJsx,
   createStyleRules,
 } from './create-application-files.helpers';
-import {
-  generateFiles,
-  names,
-  offsetFromRoot,
-  toJS,
-  Tree,
-  updateTsConfigsToJs,
-} from '@nrwl/devkit';
+import { generateFiles, names, offsetFromRoot, toJS, Tree } from '@nrwl/devkit';
 
 export function createApplicationFiles(host: Tree, options: NormalizedSchema) {
   const templateVariables = {
diff --git a/packages/react/src/generators/application/application.spec.ts b/packages/react/src/generators/application/application.spec.ts
index 0b57839ac2..6ac29f83a1 100644
--- a/packages/react/src/generators/application/application.spec.ts
+++ b/packages/react/src/generators/application/application.spec.ts
@@ -219,7 +219,10 @@ Object {
 
     expect(
       appTree.read('apps/my-dir/my-app/src/app/app.tsx').toString()
-    ).toContain('Welcome to my-dir-my-app');
+    ).toContain(`<NxWelcome title="my-dir-my-app"/>`);
+    expect(
+      appTree.read('apps/my-dir/my-app/src/app/nx-welcome.tsx').toString()
+    ).toContain('Hello there');
   });
 
   it.each`
diff --git a/packages/react/src/generators/application/files/common/src/app/__fileName__.spec.tsx__tmpl__ b/packages/react/src/generators/application/files/common/src/app/__fileName__.spec.tsx__tmpl__
index 3564d9a749..cb810d67d8 100644
--- a/packages/react/src/generators/application/files/common/src/app/__fileName__.spec.tsx__tmpl__
+++ b/packages/react/src/generators/application/files/common/src/app/__fileName__.spec.tsx__tmpl__
@@ -21,6 +21,6 @@ describe('App', () => {
     <% } else { %>
     const { getByText } = render(<App />);
     <% } %>
-    expect(getByText('Welcome to <%= projectName %>!')).toBeTruthy();
+    expect(getByText(/Welcome <%= projectName %>/gi)).toBeTruthy();
   });
 });
diff --git a/packages/react/src/generators/application/files/common/src/app/logo.svg b/packages/react/src/generators/application/files/common/src/app/logo.svg
deleted file mode 100644
index 8fa84ab509..0000000000
--- a/packages/react/src/generators/application/files/common/src/app/logo.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="262px" height="163px" viewBox="0 0 262 163" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="Styles-&amp;-Quick-Wins" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Nx---Quick-Wins" transform="translate(-476.000000, -1284.000000)" fill-rule="nonzero">
-            <g id="Logos" transform="translate(-11.000000, 782.000000)">
-                <g id="Nx_Flat_White" transform="translate(487.000000, 502.000000)">
-                    <polygon id="Path" fill="#FFFFFF" points="130.68 104.59 97.49 52.71 97.44 96.3 40.24 0 0 0 0 162.57 39.79 162.57 39.92 66.39 96.53 158.26"></polygon>
-                    <polygon id="Path" fill="#FFFFFF" points="97.5 41.79 137.24 41.79 137.33 41.33 137.33 0 97.54 0 97.49 41.33"></polygon>
-                    <path d="M198.66,86.86 C189.139872,86.6795216 180.538723,92.516445 177.19,101.43 C182.764789,93.0931021 193.379673,89.7432211 202.73,93.37 C207.05,95.13 212.73,97.97 217.23,96.45 C212.950306,90.4438814 206.034895,86.8725952 198.66,86.86 L198.66,86.86 Z" id="Path" fill="#96D8E9"></path>
-                    <path d="M243.75,106.42 C243.75,101.55 241.1,100.42 235.6,98.42 C231.52,97 226.89,95.4 223.52,91 C222.86,90.13 222.25,89.15 221.6,88.11 C220.14382,85.4164099 218.169266,83.037429 215.79,81.11 C212.58,78.75 208.37,77.6 202.91,77.6 C191.954261,77.6076705 182.084192,84.2206169 177.91,94.35 C183.186964,87.0278244 191.956716,83.0605026 200.940147,83.9314609 C209.923578,84.8024193 217.767888,90.3805017 221.54,98.58 C223.424615,101.689762 227.141337,103.174819 230.65,102.22 C236.02,101.07 235.65,106.15 243.76,107.87 L243.75,106.42 Z" id="Path" fill="#48C4E5"></path>
-                    <path d="M261.46,105.38 L261.46,105.27 C261.34,73.03 235.17,45.45 202.91,45.45 C183.207085,45.4363165 164.821777,55.3450614 154,71.81 L153.79,71.45 L137.23,45.45 L97.5,45.4499858 L135.25,104.57 L98.41,162.57 L137,162.57 L153.79,136.78 L170.88,162.57 L209.48,162.57 L174.48,107.49 C173.899005,106.416838 173.583536,105.220114 173.56,104 C173.557346,96.2203871 176.64661,88.7586448 182.147627,83.2576275 C187.648645,77.7566101 195.110387,74.6673462 202.89,74.67 C219.11,74.67 221.82,84.37 225.32,88.93 C232.23,97.93 246.03,93.99 246.03,105.73 L246.03,105.73 C246.071086,108.480945 247.576662,111.001004 249.979593,112.340896 C252.382524,113.680787 255.317747,113.636949 257.679593,112.225896 C260.041438,110.814842 261.471086,108.250945 261.43,105.5 L261.43,105.5 L261.43,105.38 L261.46,105.38 Z" id="Path" fill="#FFFFFF"></path>
-                    <path d="M261.5,113.68 C261.892278,116.421801 261.504116,119.218653 260.38,121.75 C258.18,126.84 254.51,125.14 254.51,125.14 C254.51,125.14 251.35,123.6 253.27,120.65 C255.4,117.36 259.61,117.74 261.5,113.68 Z" id="Path" fill="#FFFFFF"></path>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
diff --git a/packages/react/src/generators/application/files/common/src/app/nx-welcome.tsx b/packages/react/src/generators/application/files/common/src/app/nx-welcome.tsx
new file mode 100644
index 0000000000..914eaabfbc
--- /dev/null
+++ b/packages/react/src/generators/application/files/common/src/app/nx-welcome.tsx
@@ -0,0 +1,820 @@
+/*
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ This is a starter component and can be deleted.
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ Delete this file and get started with your project!
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ */
+export function NxWelcome({ title }: { title: string }) {
+  return (
+    <>
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `
+    html {
+      -webkit-text-size-adjust: 100%;
+      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+      'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
+      'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+      'Noto Color Emoji';
+      line-height: 1.5;
+      tab-size: 4;
+      scroll-behavior: smooth;
+    }
+    body {
+      font-family: inherit;
+      line-height: inherit;
+      margin: 0;
+    }
+    h1,
+    h2,
+    p,
+    pre {
+      margin: 0;
+    }
+    *,
+    ::before,
+    ::after {
+      box-sizing: border-box;
+      border-width: 0;
+      border-style: solid;
+      border-color: currentColor;
+    }
+    h1,
+    h2 {
+      font-size: inherit;
+      font-weight: inherit;
+    }
+    a {
+      color: inherit;
+      text-decoration: inherit;
+    }
+    pre {
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+      'Liberation Mono', 'Courier New', monospace;
+    }
+    svg {
+      display: block;
+      vertical-align: middle;
+      shape-rendering: auto;
+      text-rendering: optimizeLegibility;
+    }
+    pre {
+      background-color: rgba(55, 65, 81, 1);
+      border-radius: 0.25rem;
+      color: rgba(229, 231, 235, 1);
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+      'Liberation Mono', 'Courier New', monospace;
+      overflow: scroll;
+      padding: 0.5rem 0.75rem;
+    }
+
+    .shadow {
+      box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+      0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    }
+    .rounded {
+      border-radius: 1.5rem;
+    }
+    .wrapper {
+      width: 100%;
+    }
+    .container {
+      margin-left: auto;
+      margin-right: auto;
+      max-width: 768px;
+      padding-bottom: 3rem;
+      padding-left: 1rem;
+      padding-right: 1rem;
+      color: rgba(55, 65, 81, 1);
+      width: 100%;
+    }
+    #welcome {
+      margin-top: 2.5rem;
+    }
+    #welcome h1 {
+      font-size: 3rem;
+      font-weight: 500;
+      letter-spacing: -0.025em;
+      line-height: 1;
+    }
+    #welcome span {
+      display: block;
+      font-size: 1.875rem;
+      font-weight: 300;
+      line-height: 2.25rem;
+      margin-bottom: 0.5rem;
+    }
+    #hero {
+      align-items: center;
+      background-color: hsla(214, 62%, 21%, 1);
+      border: none;
+      box-sizing: border-box;
+      color: rgba(55, 65, 81, 1);
+      display: grid;
+      grid-template-columns: 1fr;
+      margin-top: 3.5rem;
+    }
+    #hero .text-container {
+      color: rgba(255, 255, 255, 1);
+      padding: 3rem 2rem;
+    }
+    #hero .text-container h2 {
+      font-size: 1.5rem;
+      line-height: 2rem;
+      position: relative;
+    }
+    #hero .text-container h2 svg {
+      color: hsla(162, 47%, 50%, 1);
+      height: 2rem;
+      left: -0.25rem;
+      position: absolute;
+      top: 0;
+      width: 2rem;
+    }
+    #hero .text-container h2 span {
+      margin-left: 2.5rem;
+    }
+    #hero .text-container a {
+      background-color: rgba(255, 255, 255, 1);
+      border-radius: 0.75rem;
+      color: rgba(55, 65, 81, 1);
+      display: inline-block;
+      margin-top: 1.5rem;
+      padding: 1rem 2rem;
+      text-decoration: inherit;
+    }
+    #hero .logo-container {
+      display: none;
+      justify-content: center;
+      padding-left: 2rem;
+      padding-right: 2rem;
+    }
+    #hero .logo-container svg {
+      color: rgba(255, 255, 255, 1);
+      width: 66.666667%;
+    }
+    #middle-content {
+      align-items: flex-start;
+      display: grid;
+      gap: 4rem;
+      grid-template-columns: 1fr;
+      margin-top: 3.5rem;
+    }
+    #learning-materials {
+      padding: 2.5rem 2rem;
+    }
+    #learning-materials h2 {
+      font-weight: 500;
+      font-size: 1.25rem;
+      letter-spacing: -0.025em;
+      line-height: 1.75rem;
+      padding-left: 1rem;
+      padding-right: 1rem;
+    }
+    .list-item-link {
+      align-items: center;
+      border-radius: 0.75rem;
+      display: flex;
+      margin-top: 1rem;
+      padding: 1rem;
+      transition-property: background-color, border-color, color, fill, stroke,
+      opacity, box-shadow, transform, filter, backdrop-filter,
+      -webkit-backdrop-filter;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-duration: 150ms;
+      width: 100%;
+    }
+    .list-item-link svg:first-child {
+      margin-right: 1rem;
+      height: 1.5rem;
+      transition-property: background-color, border-color, color, fill, stroke,
+      opacity, box-shadow, transform, filter, backdrop-filter,
+      -webkit-backdrop-filter;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-duration: 150ms;
+      width: 1.5rem;
+    }
+    .list-item-link > span {
+      flex-grow: 1;
+      font-weight: 400;
+      transition-property: background-color, border-color, color, fill, stroke,
+      opacity, box-shadow, transform, filter, backdrop-filter,
+      -webkit-backdrop-filter;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-duration: 150ms;
+    }
+    .list-item-link > span > span {
+      color: rgba(107, 114, 128, 1);
+      display: block;
+      flex-grow: 1;
+      font-size: 0.75rem;
+      font-weight: 300;
+      line-height: 1rem;
+      transition-property: background-color, border-color, color, fill, stroke,
+      opacity, box-shadow, transform, filter, backdrop-filter,
+      -webkit-backdrop-filter;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-duration: 150ms;
+    }
+    .list-item-link svg:last-child {
+      height: 1rem;
+      transition-property: all;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-duration: 150ms;
+      width: 1rem;
+    }
+    .list-item-link:hover {
+      color: rgba(255, 255, 255, 1);
+      background-color: hsla(162, 47%, 50%, 1);
+    }
+    .list-item-link:hover > span {}
+    .list-item-link:hover > span > span {
+      color: rgba(243, 244, 246, 1);
+    }
+    .list-item-link:hover svg:last-child {
+      transform: translateX(0.25rem);
+    }
+    #other-links {}
+    .button-pill {
+      padding: 1.5rem 2rem;
+      transition-duration: 300ms;
+      transition-property: background-color, border-color, color, fill, stroke,
+      opacity, box-shadow, transform, filter, backdrop-filter,
+      -webkit-backdrop-filter;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      align-items: center;
+      display: flex;
+    }
+    .button-pill svg {
+      transition-property: background-color, border-color, color, fill, stroke,
+      opacity, box-shadow, transform, filter, backdrop-filter,
+      -webkit-backdrop-filter;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-duration: 150ms;
+      flex-shrink: 0;
+      width: 3rem;
+    }
+    .button-pill > span {
+      letter-spacing: -0.025em;
+      font-weight: 400;
+      font-size: 1.125rem;
+      line-height: 1.75rem;
+      padding-left: 1rem;
+      padding-right: 1rem;
+    }
+    .button-pill span span {
+      display: block;
+      font-size: 0.875rem;
+      font-weight: 300;
+      line-height: 1.25rem;
+    }
+    .button-pill:hover svg,
+    .button-pill:hover {
+      color: rgba(255, 255, 255, 1) !important;
+    }
+    #nx-console:hover {
+      background-color: rgba(0, 122, 204, 1);
+    }
+    #nx-console svg {
+      color: rgba(0, 122, 204, 1);
+    }
+    #nx-repo:hover {
+      background-color: rgba(24, 23, 23, 1);
+    }
+    #nx-repo svg {
+      color: rgba(24, 23, 23, 1);
+    }
+    #nx-cloud {
+      margin-bottom: 2rem;
+      margin-top: 2rem;
+      padding: 2.5rem 2rem;
+    }
+    #nx-cloud > div {
+      align-items: center;
+      display: flex;
+    }
+    #nx-cloud > div svg {
+      border-radius: 0.375rem;
+      flex-shrink: 0;
+      width: 3rem;
+    }
+    #nx-cloud > div h2 {
+      font-size: 1.125rem;
+      font-weight: 400;
+      letter-spacing: -0.025em;
+      line-height: 1.75rem;
+      padding-left: 1rem;
+      padding-right: 1rem;
+    }
+    #nx-cloud > div h2 span {
+      display: block;
+      font-size: 0.875rem;
+      font-weight: 300;
+      line-height: 1.25rem;
+    }
+    #nx-cloud p {
+      font-size: 1rem;
+      line-height: 1.5rem;
+      margin-top: 1rem;
+    }
+    #nx-cloud pre {
+      margin-top: 1rem;
+    }
+    #nx-cloud a {
+      color: rgba(107, 114, 128, 1);
+      display: block;
+      font-size: 0.875rem;
+      line-height: 1.25rem;
+      margin-top: 1.5rem;
+      text-align: right;
+    }
+    #nx-cloud a:hover {
+      text-decoration: underline;
+    }
+    #commands {
+      padding: 2.5rem 2rem;
+      margin-top: 3.5rem;
+    }
+    #commands h2 {
+      font-size: 1.25rem;
+      font-weight: 400;
+      letter-spacing: -0.025em;
+      line-height: 1.75rem;
+      padding-left: 1rem;
+      padding-right: 1rem;
+    }
+    #commands p {
+      font-size: 1rem;
+      font-weight: 300;
+      line-height: 1.5rem;
+      margin-top: 1rem;
+      padding-left: 1rem;
+      padding-right: 1rem;
+    }
+    details {
+      align-items: center;
+      display: flex;
+      margin-top: 1rem;
+      padding-left: 1rem;
+      padding-right: 1rem;
+      width: 100%;
+    }
+    details pre > span {
+      color: rgba(181, 181, 181, 1);
+      display: block;
+    }
+    summary {
+      border-radius: 0.5rem;
+      display: flex;
+      font-weight: 400;
+      padding: 0.5rem;
+      cursor: pointer;
+      transition-property: background-color, border-color, color, fill, stroke,
+      opacity, box-shadow, transform, filter, backdrop-filter,
+      -webkit-backdrop-filter;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-duration: 150ms;
+    }
+    summary:hover {
+      background-color: rgba(243, 244, 246, 1);
+    }
+    summary svg {
+      height: 1.5rem;
+      margin-right: 1rem;
+      width: 1.5rem;
+    }
+    #love {
+      color: rgba(107, 114, 128, 1);
+      font-size: 0.875rem;
+      line-height: 1.25rem;
+      margin-top: 3.5rem;
+      opacity: 0.6;
+      text-align: center;
+    }
+    #love svg {
+      color: rgba(252, 165, 165, 1);
+      width: 1.25rem;
+      height: 1.25rem;
+      display: inline;
+      margin-top: -0.25rem;
+    }
+    @media screen and (min-width: 768px) {
+      #hero {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+      #hero .logo-container {
+        display: flex;
+      }
+      #middle-content {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+    }
+          `,
+        }}
+      />
+      <div className="wrapper">
+        <div className="container">
+          <div id="welcome">
+            <h1>
+              <span> Hello there, </span>
+              Welcome {title} 👋
+            </h1>
+          </div>
+
+          <div id="hero" className="rounded">
+            <div className="text-container">
+              <h2>
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
+                  />
+                </svg>
+                <span>You&apos;re up and running</span>
+              </h2>
+              <a href="#commands"> What&apos;s next? </a>
+            </div>
+            <div className="logo-container">
+              <svg
+                fill="currentColor"
+                role="img"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path d="M11.987 14.138l-3.132 4.923-5.193-8.427-.012 8.822H0V4.544h3.691l5.247 8.833.005-3.998 3.044 4.759zm.601-5.761c.024-.048 0-3.784.008-3.833h-3.65c.002.059-.005 3.776-.003 3.833h3.645zm5.634 4.134a2.061 2.061 0 0 0-1.969 1.336 1.963 1.963 0 0 1 2.343-.739c.396.161.917.422 1.33.283a2.1 2.1 0 0 0-1.704-.88zm3.39 1.061c-.375-.13-.8-.277-1.109-.681-.06-.08-.116-.17-.176-.265a2.143 2.143 0 0 0-.533-.642c-.294-.216-.68-.322-1.18-.322a2.482 2.482 0 0 0-2.294 1.536 2.325 2.325 0 0 1 4.002.388.75.75 0 0 0 .836.334c.493-.105.46.36 1.203.518v-.133c-.003-.446-.246-.55-.75-.733zm2.024 1.266a.723.723 0 0 0 .347-.638c-.01-2.957-2.41-5.487-5.37-5.487a5.364 5.364 0 0 0-4.487 2.418c-.01-.026-1.522-2.39-1.538-2.418H8.943l3.463 5.423-3.379 5.32h3.54l1.54-2.366 1.568 2.366h3.541l-3.21-5.052a.7.7 0 0 1-.084-.32 2.69 2.69 0 0 1 2.69-2.691h.001c1.488 0 1.736.89 2.057 1.308.634.826 1.9.464 1.9 1.541a.707.707 0 0 0 1.066.596zm.35.133c-.173.372-.56.338-.755.639-.176.271.114.412.114.412s.337.156.538-.311c.104-.231.14-.488.103-.74z" />
+              </svg>
+            </div>
+          </div>
+
+          <div id="middle-content">
+            <div id="learning-materials" className="rounded shadow">
+              <h2>Learning materials</h2>
+              <a
+                href="https://nx.dev/getting-started/intro?utm_source=nx-project"
+                target="_blank"
+                rel="noreferrer"
+                className="list-item-link"
+              >
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
+                  />
+                </svg>
+                <span>
+                  Documentation
+                  <span> Everything is in there </span>
+                </span>
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M9 5l7 7-7 7"
+                  />
+                </svg>
+              </a>
+              <a
+                href="https://blog.nrwl.io/?utm_source=nx-project"
+                target="_blank"
+                rel="noreferrer"
+                className="list-item-link"
+              >
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"
+                  />
+                </svg>
+                <span>
+                  Blog
+                  <span> Changelog, features & events </span>
+                </span>
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M9 5l7 7-7 7"
+                  />
+                </svg>
+              </a>
+              <a
+                href="https://www.youtube.com/c/Nrwl_io/videos?utm_source=nx-project&sub_confirmation=1"
+                target="_blank"
+                rel="noreferrer"
+                className="list-item-link"
+              >
+                <svg
+                  role="img"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>YouTube</title>
+                  <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
+                </svg>
+                <span>
+                  YouTube channel
+                  <span> Nx Show, talks & tutorials </span>
+                </span>
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M9 5l7 7-7 7"
+                  />
+                </svg>
+              </a>
+              <a
+                href="https://nx.dev/tutorial/01-create-application?utm_source=nx-project"
+                target="_blank"
+                rel="noreferrer"
+                className="list-item-link"
+              >
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
+                  />
+                </svg>
+                <span>
+                  Interactive tutorials
+                  <span> Create an app, step-by-step </span>
+                </span>
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M9 5l7 7-7 7"
+                  />
+                </svg>
+              </a>
+              <a
+                href="https://nxplaybook.com/?utm_source=nx-project"
+                target="_blank"
+                rel="noreferrer"
+                className="list-item-link"
+              >
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path d="M12 14l9-5-9-5-9 5 9 5z" />
+                  <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
+                  />
+                </svg>
+                <span>
+                  Video courses
+                  <span> Nx custom courses </span>
+                </span>
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M9 5l7 7-7 7"
+                  />
+                </svg>
+              </a>
+            </div>
+            <div id="other-links">
+              <a
+                id="nx-console"
+                className="button-pill rounded shadow"
+                href="https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console&utm_source=nx-project"
+                target="_blank"
+                rel="noreferrer"
+              >
+                <svg
+                  fill="currentColor"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>Visual Studio Code</title>
+                  <path d="M23.15 2.587L18.21.21a1.494 1.494 0 0 0-1.705.29l-9.46 8.63-4.12-3.128a.999.999 0 0 0-1.276.057L.327 7.261A1 1 0 0 0 .326 8.74L3.899 12 .326 15.26a1 1 0 0 0 .001 1.479L1.65 17.94a.999.999 0 0 0 1.276.057l4.12-3.128 9.46 8.63a1.492 1.492 0 0 0 1.704.29l4.942-2.377A1.5 1.5 0 0 0 24 20.06V3.939a1.5 1.5 0 0 0-.85-1.352zm-5.146 14.861L10.826 12l7.178-5.448v10.896z" />
+                </svg>
+                <span>
+                  Install Nx Console
+                  <span>Plugin for VSCode</span>
+                </span>
+              </a>
+              <div id="nx-cloud" className="rounded shadow">
+                <div>
+                  <svg
+                    viewBox="0 0 120 120"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M120 15V30C103.44 30 90 43.44 90 60C90 76.56 76.56 90 60 90C43.44 90 30 103.44 30 120H15C6.72 120 0 113.28 0 105V15C0 6.72 6.72 0 15 0H105C113.28 0 120 6.72 120 15Z"
+                      fill="#0E2039"
+                    />
+                    <path
+                      d="M120 30V105C120 113.28 113.28 120 105 120H30C30 103.44 43.44 90 60 90C76.56 90 90 76.56 90 60C90 43.44 103.44 30 120 30Z"
+                      fill="white"
+                    />
+                  </svg>
+                  <h2>
+                    NxCloud
+                    <span>Enable faster CI & better DX</span>
+                  </h2>
+                </div>
+                <p>
+                  You can activate distributed tasks executions and caching by
+                  running:
+                </p>
+                <pre>nx connect-to-nx-cloud</pre>
+                <a
+                  href="https://nx.app/?utm_source=nx-project"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  {' '}
+                  What is Nx Cloud?{' '}
+                </a>
+              </div>
+              <a
+                id="nx-repo"
+                className="button-pill rounded shadow"
+                href="https://github.com/nrwl/nx?utm_source=nx-project"
+                target="_blank"
+                rel="noreferrer"
+              >
+                <svg
+                  fill="currentColor"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+                </svg>
+                <span>
+                  Nx is open source
+                  <span> Love Nx? Give us a star! </span>
+                </span>
+              </a>
+            </div>
+          </div>
+
+          <div id="commands" className="rounded shadow">
+            <h2>Next steps</h2>
+            <p>Here are some things you can do with Nx:</p>
+            <details>
+              <summary>
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                  />
+                </svg>
+                Add UI library
+              </summary>
+              <pre>
+                <span># Generate UI lib</span>
+                nx g @nrwl/angular:lib ui
+                <span># Add a component</span>
+                nx g @nrwl/angular:component button --project ui
+              </pre>
+            </details>
+            <details>
+              <summary>
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                  />
+                </svg>
+                View interactive dependency graph
+              </summary>
+              <pre>nx dep-graph</pre>
+            </details>
+            <details>
+              <summary>
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                  />
+                </svg>
+                Run affected commands
+              </summary>
+              <pre>
+                <span># see what&apos;s been affected by changes</span>
+                nx affected:dep-graph
+                <span># run tests for current changes</span>
+                nx affected:test
+                <span># run e2e tests for current changes</span>
+                nx affected:e2e
+              </pre>
+            </details>
+          </div>
+
+          <p id="love">
+            Carefully crafted with
+            <svg
+              fill="currentColor"
+              stroke="none"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+              />
+            </svg>
+          </p>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default NxWelcome;
diff --git a/packages/react/src/generators/application/files/common/src/app/star.svg b/packages/react/src/generators/application/files/common/src/app/star.svg
deleted file mode 100644
index 901053d385..0000000000
--- a/packages/react/src/generators/application/files/common/src/app/star.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg
-        className="material-icons"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
->
-    <path d="M0 0h24v24H0z" fill="none" />
-    <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
-</svg>
diff --git a/packages/react/src/generators/application/files/css-module/src/app/__fileName__.module.__style__ b/packages/react/src/generators/application/files/css-module/src/app/__fileName__.module.__style__
index 04d9c84753..7b88fbabf8 100644
--- a/packages/react/src/generators/application/files/css-module/src/app/__fileName__.module.__style__
+++ b/packages/react/src/generators/application/files/css-module/src/app/__fileName__.module.__style__
@@ -1,128 +1 @@
-.app {
-  font-family: sans-serif;
-  min-width: 300px;
-  max-width: 600px;
-  margin: 50px auto;
-}
-
-.app :global(.gutter-left) {
-  margin-left: 9px;
-}
-
-.app :global(.col-span-2) {
-  grid-column: span 2;
-}
-
-.app :global(.flex) {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.app :global(header) {
-  background-color: #143055;
-  color: white;
-  padding: 5px;
-  border-radius: 3px;
-}
-
-.app :global(main) {
-  padding: 0 36px;
-}
-
-.app :global(p) {
-  text-align: center;
-}
-
-.app :global(h1) {
-  text-align: center;
-  margin-left: 18px;
-  font-size: 24px;
-}
-
-.app :global(h2) {
-  text-align: center;
-  font-size: 20px;
-  margin: 40px 0 10px 0;
-}
-
-.app :global(.resources) {
-  text-align: center;
-  list-style: none;
-  padding: 0;
-  display: grid;
-  grid-gap: 9px;
-  grid-template-columns: 1fr 1fr;
-}
-
-.app :global(.resource) {
-  color: #0094ba;
-  height: 36px;
-  background-color: rgba(0, 0, 0, 0);
-  border: 1px solid rgba(0, 0, 0, 0.12);
-  border-radius: 4px;
-  padding: 3px 9px;
-  text-decoration: none;
-}
-
-.app :global(.resource:hover) {
-  background-color: rgba(68, 138, 255, 0.04);
-}
-
-.app :global(pre) {
-  padding: 9px;
-  border-radius: 4px;
-  background-color: black;
-  color: #eee;
-}
-
-.app :global(details) {
-  border-radius: 4px;
-  color: #333;
-  background-color: rgba(0, 0, 0, 0);
-  border: 1px solid rgba(0, 0, 0, 0.12);
-  padding: 3px 9px;
-  margin-bottom: 9px;
-}
-
-.app :global(summary) {
-  outline: none;
-  height: 36px;
-  line-height: 36px;
-}
-
-.app :global(.github-star-container) {
-  margin-top: 12px;
-  line-height: 20px;
-}
-
-.app :global(.github-star-container a) {
-  display: flex;
-  align-items: center;
-  text-decoration: none;
-  color: #333;
-}
-
-.app :global(.github-star-badge) {
-  color: #24292e;
-  display: flex;
-  align-items: center;
-  font-size: 12px;
-  padding: 3px 10px;
-  border: 1px solid rgba(27, 31, 35, 0.2);
-  border-radius: 3px;
-  background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%);
-  margin-left: 4px;
-  font-weight: 600;
-}
-
-.app :global(.github-star-badge:hover) {
-  background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%);
-  border-color: rgba(27, 31, 35, 0.35);
-  background-position: -0.5em;
-}
-.app :global(.github-star-badge .material-icons) {
-  height: 16px;
-  width: 16px;
-  margin-right: 4px;
-}
+/* Your styles goes here. */
diff --git a/packages/react/src/generators/application/files/css-module/src/app/__fileName__.tsx__tmpl__ b/packages/react/src/generators/application/files/css-module/src/app/__fileName__.tsx__tmpl__
index ffbe3fd0b2..54ed401f94 100644
--- a/packages/react/src/generators/application/files/css-module/src/app/__fileName__.tsx__tmpl__
+++ b/packages/react/src/generators/application/files/css-module/src/app/__fileName__.tsx__tmpl__
@@ -2,9 +2,7 @@
 import { Component } from 'react';
 <% } %>
 import styles from './<%= fileName %>.module.<%= style %>';
-
-import { ReactComponent as Logo } from './logo.svg';
-import star from './star.svg';
+import NxWelcome from "./nx-welcome";
 
 <% if (classComponent) { %>
 export class App extends Component {
@@ -13,84 +11,9 @@ export class App extends Component {
 export function App() {
 <% } %>
   return (
-    <div className={styles.app}>
-      <header className="flex">
-        <Logo width="75" height="75"/>
-        <h1>Welcome to <%= projectName %>!</h1>
-      </header>
-    <main>
-      <h2>Resources &amp; Tools</h2>
-      <p>
-        Thank you for using and showing some ♥ for Nx.
-      </p>
-      <div className="flex github-star-container">
-        <a href="https://github.com/nrwl/nx" target="_blank" rel="noopener noreferrer"> If you like Nx, please give it a star:
-          <div className="github-star-badge">
-              <img src={star} className="material-icons" alt="" />
-              Star
-          </div>
-        </a>
-      </div>
-      <p>
-        Here are some links to help you get started.
-      </p>
-      <ul className="resources">
-        <li className="col-span-2">
-          <a
-            className="resource flex"
-            href="https://egghead.io/playlists/scale-react-development-with-nx-4038"
-          >
-            Scale React Development with Nx (Course)
-          </a>
-        </li>
-        <li className="col-span-2">
-          <a
-            className="resource flex"
-            href="https://nx.dev/latest/react/tutorial/01-create-application"
-          >
-            Interactive tutorial
-          </a>
-        </li>
-        <li className="col-span-2">
-          <a className="resource flex" href="https://nx.app/">
-            <svg width="36" height="36" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M120 15V30C103.44 30 90 43.44 90 60C90 76.56 76.56 90 60 90C43.44 90 30 103.44 30 120H15C6.72 120 0 113.28 0 105V15C0 6.72 6.72 0 15 0H105C113.28 0 120 6.72 120 15Z" fill="#0E2039"/>
-              <path d="M120 30V105C120 113.28 113.28 120 105 120H30C30 103.44 43.44 90 60 90C76.56 90 90 76.56 90 60C90 43.44 103.44 30 120 30Z" fill="white"/>
-            </svg>
-            <span className="gutter-left">Nx Cloud</span>
-          </a>
-        </li>
-      </ul>
-      <h2>Next Steps</h2>
-      <p>
-        Here are some things you can do with Nx.
-      </p>
-      <details open>
-        <summary>Add UI library</summary>
-        <pre>{`# Generate UI lib
-nx g @nrwl/react:lib ui
-
-# Add a component
-nx g @nrwl/react:component xyz --project ui`}</pre>
-      </details>
-      <details>
-        <summary>View dependency graph</summary>
-        <pre>{`nx dep-graph`}</pre>
-      </details>
-      <details>
-        <summary>Run affected commands</summary>
-        <pre>{`# see what's been affected by changes
-nx affected:dep-graph
-
-# run tests for current changes
-nx affected:test
-
-# run e2e tests for current changes
-nx affected:e2e
-  `}</pre>
-      </details>
-    </main>
-     </div>
+    <>
+      <NxWelcome title="<%= projectName %>"/>
+    </>
   );
 <% if (classComponent) { %>
   }
diff --git a/packages/react/src/generators/application/files/global-css/src/app/__fileName__.__style__ b/packages/react/src/generators/application/files/global-css/src/app/__fileName__.__style__
index 5d5777c1cb..7b88fbabf8 100644
--- a/packages/react/src/generators/application/files/global-css/src/app/__fileName__.__style__
+++ b/packages/react/src/generators/application/files/global-css/src/app/__fileName__.__style__
@@ -1,128 +1 @@
-.app {
-  font-family: sans-serif;
-  min-width: 300px;
-  max-width: 600px;
-  margin: 50px auto;
-}
-
-.app .gutter-left {
-  margin-left: 9px;
-}
-
-.app .col-span-2 {
-  grid-column: span 2;
-}
-
-.app .flex {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.app header {
-  background-color: #143055;
-  color: white;
-  padding: 5px;
-  border-radius: 3px;
-}
-
-.app main {
-  padding: 0 36px;
-}
-
-.app p {
-  text-align: center;
-}
-
-.app h1 {
-  text-align: center;
-  margin-left: 18px;
-  font-size: 24px;
-}
-
-.app h2 {
-  text-align: center;
-  font-size: 20px;
-  margin: 40px 0 10px 0;
-}
-
-.app .resources {
-  text-align: center;
-  list-style: none;
-  padding: 0;
-  display: grid;
-  grid-gap: 9px;
-  grid-template-columns: 1fr 1fr;
-}
-
-.app .resource {
-  color: #0094ba;
-  height: 36px;
-  background-color: rgba(0, 0, 0, 0);
-  border: 1px solid rgba(0, 0, 0, 0.12);
-  border-radius: 4px;
-  padding: 3px 9px;
-  text-decoration: none;
-}
-
-.app .resource:hover {
-  background-color: rgba(68, 138, 255, 0.04);
-}
-
-.app pre {
-  padding: 9px;
-  border-radius: 4px;
-  background-color: black;
-  color: #eee;
-}
-
-.app details {
-  border-radius: 4px;
-  color: #333;
-  background-color: rgba(0, 0, 0, 0);
-  border: 1px solid rgba(0, 0, 0, 0.12);
-  padding: 3px 9px;
-  margin-bottom: 9px;
-}
-
-.app summary {
-  outline: none;
-  height: 36px;
-  line-height: 36px;
-}
-
-.app .github-star-container {
-  margin-top: 12px;
-  line-height: 20px;
-}
-
-.app .github-star-container a {
-  display: flex;
-  align-items: center;
-  text-decoration: none;
-  color: #333;
-}
-
-.app .github-star-badge {
-  color: #24292e;
-  display: flex;
-  align-items: center;
-  font-size: 12px;
-  padding: 3px 10px;
-  border: 1px solid rgba(27, 31, 35, 0.2);
-  border-radius: 3px;
-  background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%);
-  margin-left: 4px;
-  font-weight: 600;
-}
-
-.app .github-star-badge:hover {
-  background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%);
-  border-color: rgba(27, 31, 35, 0.35);
-  background-position: -0.5em;
-}
-.app .github-star-badge .material-icons {
-  height: 16px;
-  width: 16px;
-  margin-right: 4px;
-}
+/* Your styles goes here. */
diff --git a/packages/react/src/generators/application/files/global-css/src/app/__fileName__.tsx__tmpl__ b/packages/react/src/generators/application/files/global-css/src/app/__fileName__.tsx__tmpl__
index cf0763b8cf..aa138bac26 100644
--- a/packages/react/src/generators/application/files/global-css/src/app/__fileName__.tsx__tmpl__
+++ b/packages/react/src/generators/application/files/global-css/src/app/__fileName__.tsx__tmpl__
@@ -2,9 +2,7 @@
 import { Component } from 'react';
 <% } %>
 import './<%= fileName %>.<%= style %>';
-
-import { ReactComponent as Logo } from './logo.svg';
-import star from './star.svg';
+import NxWelcome from "./nx-welcome";
 
 <% if (classComponent) { %>
 export class App extends Component {
@@ -13,84 +11,9 @@ export class App extends Component {
 export function App() {
 <% } %>
   return (
-     <div className="app">
-         <header className="flex">
-      <Logo width="75" height="75"/>
-      <h1>Welcome to <%= projectName %>!</h1>
-    </header>
-    <main>
-      <h2>Resources &amp; Tools</h2>
-      <p>
-        Thank you for using and showing some ♥ for Nx.
-      </p>
-      <div className="flex github-star-container">
-        <a href="https://github.com/nrwl/nx" target="_blank" rel="noopener noreferrer"> If you like Nx, please give it a star:
-          <div className="github-star-badge">
-              <img src={star} className="material-icons" alt="" />
-              Star
-          </div>
-        </a>
-      </div>
-      <p>
-        Here are some links to help you get started.
-      </p>
-      <ul className="resources">
-        <li className="col-span-2">
-          <a
-            className="resource flex"
-            href="https://egghead.io/playlists/scale-react-development-with-nx-4038"
-          >
-            Scale React Development with Nx (Course)
-          </a>
-        </li>
-        <li className="col-span-2">
-          <a
-            className="resource flex"
-            href="https://nx.dev/latest/react/tutorial/01-create-application"
-          >
-            Interactive tutorial
-          </a>
-        </li>
-        <li className="col-span-2">
-          <a className="resource flex" href="https://nx.app/">
-            <svg width="36" height="36" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M120 15V30C103.44 30 90 43.44 90 60C90 76.56 76.56 90 60 90C43.44 90 30 103.44 30 120H15C6.72 120 0 113.28 0 105V15C0 6.72 6.72 0 15 0H105C113.28 0 120 6.72 120 15Z" fill="#0E2039"/>
-              <path d="M120 30V105C120 113.28 113.28 120 105 120H30C30 103.44 43.44 90 60 90C76.56 90 90 76.56 90 60C90 43.44 103.44 30 120 30Z" fill="white"/>
-            </svg>
-            <span className="gutter-left">Nx Cloud</span>
-          </a>
-        </li>
-      </ul>
-      <h2>Next Steps</h2>
-      <p>
-        Here are some things you can do with Nx.
-      </p>
-      <details open>
-        <summary>Add UI library</summary>
-        <pre>{`# Generate UI lib
-nx g @nrwl/react:lib ui
-
-# Add a component
-nx g @nrwl/react:component xyz --project ui`}</pre>
-      </details>
-      <details>
-        <summary>View dependency graph</summary>
-        <pre>{`nx dep-graph`}</pre>
-      </details>
-      <details>
-        <summary>Run affected commands</summary>
-        <pre>{`# see what's been affected by changes
-nx affected:dep-graph
-
-# run tests for current changes
-nx affected:test
-
-# run e2e tests for current changes
-nx affected:e2e
-  `}</pre>
-      </details>
-    </main>
-     </div>
+    <>
+      <NxWelcome title="<%= projectName %>"/>
+    </>
   );
 <% if (classComponent) { %>
   }
diff --git a/packages/react/src/generators/application/files/none/src/app/__fileName__.tsx__tmpl__ b/packages/react/src/generators/application/files/none/src/app/__fileName__.tsx__tmpl__
index 86581cb63a..f121fc3b45 100644
--- a/packages/react/src/generators/application/files/none/src/app/__fileName__.tsx__tmpl__
+++ b/packages/react/src/generators/application/files/none/src/app/__fileName__.tsx__tmpl__
@@ -1,9 +1,7 @@
 <% if (classComponent) { %>
 import  { Component } from 'react';
 <% } %>
-
-import { ReactComponent as Logo } from './logo.svg';
-import star from './star.svg';
+import NxWelcome from "./nx-welcome";
 
 <% if (classComponent) { %>
 export class App extends Component {
@@ -12,7 +10,9 @@ export class App extends Component {
 export function App() {
 <% } %>
   return (
-    <h1>Welcome to <%= projectName %>!</h1>
+    <>
+      <NxWelcome title="<%= projectName %>"/>
+    </>
   );
 <% if (classComponent) { %>
   }
diff --git a/packages/react/src/generators/application/files/styled-jsx/src/app/__fileName__.tsx__tmpl__ b/packages/react/src/generators/application/files/styled-jsx/src/app/__fileName__.tsx__tmpl__
index fc9e79a2b6..d4ab405aad 100644
--- a/packages/react/src/generators/application/files/styled-jsx/src/app/__fileName__.tsx__tmpl__
+++ b/packages/react/src/generators/application/files/styled-jsx/src/app/__fileName__.tsx__tmpl__
@@ -1,9 +1,7 @@
 <% if (classComponent) { %>
 import { Component } from 'react';
 <% } %>
-
-import { ReactComponent as Logo } from './logo.svg';
-import star from './star.svg';
+import NxWelcome from "./nx-welcome";
 
 <% if (classComponent) { %>
 export class App extends Component {
@@ -12,215 +10,10 @@ export class App extends Component {
 export function App() {
 <% } %>
   return (
-    <div className="app">
-      <style jsx>{`
-        .app {
-          font-family: sans-serif;
-          min-width: 300px;
-          max-width: 600px;
-          margin: 50px auto;
-        }
-
-        .gutter-left {
-          margin-left: 9px;
-        }
-
-        .col-span-2 {
-          grid-column: span 2;
-        }
-
-        .flex {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        }
-
-        header {
-          background-color: #143055;
-          color: white;
-          padding: 5px;
-          border-radius: 3px;
-        }
-
-        main {
-          padding: 0 36px;
-        }
-
-        p {
-          text-align: center;
-        }
-
-        h1 {
-          text-align: center;
-          margin-left: 18px;
-          font-size: 24px;
-        }
-
-        h2 {
-          text-align: center;
-          font-size: 20px;
-          margin: 40px 0 10px 0;
-        }
-
-        .resources {
-          text-align: center;
-          list-style: none;
-          padding: 0;
-          display: grid;
-          grid-gap: 9px;
-          grid-template-columns: 1fr 1fr;
-        }
-
-        .resource {
-          color: #0094ba;
-          height: 36px;
-          background-color: rgba(0, 0, 0, 0);
-          border: 1px solid rgba(0, 0, 0, 0.12);
-          border-radius: 4px;
-          padding: 3px 9px;
-          text-decoration: none;
-        }
-
-        .resource:hover {
-          background-color: rgba(68, 138, 255, 0.04);
-        }
-
-        pre {
-          padding: 9px;
-          border-radius: 4px;
-          background-color: black;
-          color: #eee;
-        }
-
-        details {
-          border-radius: 4px;
-          color: #333;
-          background-color: rgba(0, 0, 0, 0);
-          border: 1px solid rgba(0, 0, 0, 0.12);
-          padding: 3px 9px;
-          margin-bottom: 9px;
-        }
-
-        summary {
-          outline: none;
-          height: 36px;
-          line-height: 36px;
-        }
-
-        .github-star-container {
-          margin-top: 12px;
-          line-height: 20px;
-        }
-
-        .github-star-container a {
-          display: flex;
-          align-items: center;
-          text-decoration: none;
-          color: #333;
-        }
-
-        .github-star-badge {
-          color: #24292e;
-          display: flex;
-          align-items: center;
-          font-size: 12px;
-          padding: 3px 10px;
-          border: 1px solid rgba(27, 31, 35, 0.2);
-          border-radius: 3px;
-          background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%);
-          margin-left: 4px;
-          font-weight: 600;
-        }
-
-        .github-star-badge:hover {
-          background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%);
-          border-color: rgba(27, 31, 35, 0.35);
-          background-position: -0.5em;
-        }
-        .github-star-badge .material-icons {
-          height: 16px;
-          width: 16px;
-          margin-right: 4px;
-        }
-      `}</style>
-
-      <header className="flex">
-        <Logo width="75" height="75" />
-        <h1>Welcome to <%= projectName %>!</h1>
-      </header>
-      <main>
-        <h2>Resources &amp; Tools</h2>
-        <p>Thank you for using and showing some ♥ for Nx.</p>
-        <div className="flex github-star-container">
-          <a
-            href="https://github.com/nrwl/nx"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            {' '}
-            If you like Nx, please give it a star:
-            <div className="github-star-badge">
-              <img src={star} className="material-icons" alt="" />
-              Star
-            </div>
-          </a>
-        </div>
-        <p>Here are some links to help you get started.</p>
-        <ul className="resources">
-      <li className="col-span-2">
-        <a
-          className="resource flex"
-          href="https://egghead.io/playlists/scale-react-development-with-nx-4038"
-        >
-          Scale React Development with Nx (Course)
-        </a>
-      </li>
-      <li className="col-span-2">
-        <a
-          className="resource flex"
-          href="https://nx.dev/latest/react/tutorial/01-create-application"
-        >
-          Interactive tutorial
-        </a>
-      </li>
-      <li className="col-span-2">
-        <a className="resource flex" href="https://nx.app/">
-          <svg width="36" height="36" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M120 15V30C103.44 30 90 43.44 90 60C90 76.56 76.56 90 60 90C43.44 90 30 103.44 30 120H15C6.72 120 0 113.28 0 105V15C0 6.72 6.72 0 15 0H105C113.28 0 120 6.72 120 15Z" fill="#0E2039"/>
-            <path d="M120 30V105C120 113.28 113.28 120 105 120H30C30 103.44 43.44 90 60 90C76.56 90 90 76.56 90 60C90 43.44 103.44 30 120 30Z" fill="white"/>
-          </svg>
-          <span className="gutter-left">Nx Cloud</span>
-        </a>
-      </li>
-        </ul>
-        <h2>Next Steps</h2>
-        <p>Here are some things you can do with Nx.</p>
-        <details open>
-          <summary>Add UI library</summary>
-          <pre>{`# Generate UI lib
-nx g @nrwl/react:lib ui
-
-# Add a component
-nx g @nrwl/react:component xyz --project ui`}</pre>
-        </details>
-        <details>
-          <summary>View dependency graph</summary>
-          <pre>{`nx dep-graph`}</pre>
-        </details>
-        <details>
-          <summary>Run affected commands</summary>
-          <pre>{`# see what's been affected by changes
-nx affected:dep-graph
-
-# run tests for current changes
-nx affected:test
-
-# run e2e tests for current changes
-nx affected:e2e
-  `}</pre>
-        </details>
-      </main>
-    </div>
+    <>
+      <style jsx>{`/** your style here **/`}</style>
+      <NxWelcome title="<%= projectName %>"/>
+    </>
   );
 
 <% if (classComponent) { %>
diff --git a/packages/react/src/generators/application/files/styled-module/src/app/__fileName__.tsx__tmpl__ b/packages/react/src/generators/application/files/styled-module/src/app/__fileName__.tsx__tmpl__
index 0a88ac5a9c..2af30e84d8 100644
--- a/packages/react/src/generators/application/files/styled-module/src/app/__fileName__.tsx__tmpl__
+++ b/packages/react/src/generators/application/files/styled-module/src/app/__fileName__.tsx__tmpl__
@@ -1,139 +1,11 @@
 <% if (classComponent) { %>
 import { Component } from 'react';
 <% } %>
-
 import styled from '<%= styledModule %>';
-
-import { ReactComponent as Logo } from './logo.svg';
-import star from './star.svg';
+import NxWelcome from "./nx-welcome";
 
 const StyledApp = styled.div`
-  font-family: sans-serif;
-  min-width: 300px;
-  max-width: 600px;
-  margin: 50px auto;
-
-  .gutter-left {
-    margin-left: 9px;
-  }
-
-  .col-span-2 {
-    grid-column: span 2;
-  }
-
-  .flex {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  header {
-    background-color: #143055;
-    color: white;
-    padding: 5px;
-    border-radius: 3px;
-  }
-
-  main {
-    padding: 0 36px;
-  }
-
-  p {
-    text-align: center;
-  }
-
-  h1 {
-    text-align: center;
-    margin-left: 18px;
-    font-size: 24px;
-  }
-
-  h2 {
-    text-align: center;
-    font-size: 20px;
-    margin: 40px 0 10px 0;
-  }
-
-  .resources {
-    text-align: center;
-    list-style: none;
-    padding: 0;
-    display: grid;
-    grid-gap: 9px;
-    grid-template-columns: 1fr 1fr;
-  }
-
-  .resource {
-    color: #0094ba;
-    height: 36px;
-    background-color: rgba(0, 0, 0, 0);
-    border: 1px solid rgba(0, 0, 0, 0.12);
-    border-radius: 4px;
-    padding: 3px 9px;
-    text-decoration: none;
-  }
-
-  .resource:hover {
-    background-color: rgba(68, 138, 255, 0.04);
-  }
-
-  pre {
-    padding: 9px;
-    border-radius: 4px;
-    background-color: black;
-    color: #eee;
-  }
-
-  details {
-    border-radius: 4px;
-    color: #333;
-    background-color: rgba(0, 0, 0, 0);
-    border: 1px solid rgba(0, 0, 0, 0.12);
-    padding: 3px 9px;
-    margin-bottom: 9px;
-  }
-
-  summary {
-    outline: none;
-    height: 36px;
-    line-height: 36px;
-  }
-
-  .github-star-container {
-    margin-top: 12px;
-    line-height: 20px;
-  }
-
-  .github-star-container a {
-    display: flex;
-    align-items: center;
-    text-decoration: none;
-    color: #333;
-  }
-
-  .github-star-badge {
-    color: #24292e;
-    display: flex;
-    align-items: center;
-    font-size: 12px;
-    padding: 3px 10px;
-    border: 1px solid rgba(27, 31, 35, 0.2);
-    border-radius: 3px;
-    background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%);
-    margin-left: 4px;
-    font-weight: 600;
-  }
-
-  .github-star-badge:hover {
-    background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%);
-    border-color: rgba(27, 31, 35, 0.35);
-    background-position: -0.5em;
-  }
-  .github-star-badge .material-icons {
-    height: 16px;
-    width: 16px;
-    margin-right: 4px;
-  }
+    // Your style here
 `;
 
 <% if (classComponent) { %>
@@ -143,84 +15,11 @@ export class App extends Component {
 export function App() {
 <% } %>
   return (
-       <StyledApp>
-          <header className="flex">
-      <Logo width="75" height="75"/>
-      <h1>Welcome to <%= projectName %>!</h1>
-    </header>
-    <main>
-      <h2>Resources &amp; Tools</h2>
-      <p>
-        Thank you for using and showing some ♥ for Nx.
-      </p>
-      <div className="flex github-star-container">
-        <a href="https://github.com/nrwl/nx" target="_blank" rel="noopener noreferrer"> If you like Nx, please give it a star:
-          <div className="github-star-badge">
-              <img src={star} className="material-icons" alt="" />
-              Star
-          </div>
-        </a>
-      </div>
-      <p>
-        Here are some links to help you get started.
-      </p>
-      <ul className="resources">
-        <li className="col-span-2">
-          <a
-            className="resource flex"
-            href="https://egghead.io/playlists/scale-react-development-with-nx-4038"
-          >
-            Scale React Development with Nx (Course)
-          </a>
-        </li>
-        <li className="col-span-2">
-          <a
-            className="resource flex"
-            href="https://nx.dev/latest/react/tutorial/01-create-application"
-          >
-            Interactive tutorial
-          </a>
-        </li>
-        <li className="col-span-2">
-          <a className="resource flex" href="https://nx.app/">
-            <svg width="36" height="36" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M120 15V30C103.44 30 90 43.44 90 60C90 76.56 76.56 90 60 90C43.44 90 30 103.44 30 120H15C6.72 120 0 113.28 0 105V15C0 6.72 6.72 0 15 0H105C113.28 0 120 6.72 120 15Z" fill="#0E2039"/>
-              <path d="M120 30V105C120 113.28 113.28 120 105 120H30C30 103.44 43.44 90 60 90C76.56 90 90 76.56 90 60C90 43.44 103.44 30 120 30Z" fill="white"/>
-            </svg>
-            <span className="gutter-left">Nx Cloud</span>
-          </a>
-        </li>
-      </ul>
-      <h2>Next Steps</h2>
-      <p>
-        Here are some things you can do with Nx.
-      </p>
-      <details open>
-        <summary>Add UI library</summary>
-        <pre>{`# Generate UI lib
-nx g @nrwl/react:lib ui
-
-# Add a component
-nx g @nrwl/react:component xyz --project ui`}</pre>
-      </details>
-      <details>
-        <summary>View dependency graph</summary>
-        <pre>{`nx dep-graph`}</pre>
-      </details>
-      <details>
-        <summary>Run affected commands</summary>
-        <pre>{`# see what's been affected by changes
-nx affected:dep-graph
-
-# run tests for current changes
-nx affected:test
-
-# run e2e tests for current changes
-nx affected:e2e
-  `}</pre>
-      </details>
-    </main>
-    </StyledApp>
+    <>
+      <StyledApp>
+        <NxWelcome title="<%= projectName %>"/>
+      </StyledApp>
+    </>
   );
 <% if (classComponent) { %>
   }
diff --git a/packages/react/src/generators/stories/stories-app.spec.ts b/packages/react/src/generators/stories/stories-app.spec.ts
index 8fe5bf3d52..da628f0a61 100644
--- a/packages/react/src/generators/stories/stories-app.spec.ts
+++ b/packages/react/src/generators/stories/stories-app.spec.ts
@@ -42,7 +42,7 @@ describe('react:stories for applications', () => {
     });
 
     expect(
-      appTree.exists('apps/test-ui-app/src/app/app.stories.tsx')
+      appTree.exists('apps/test-ui-app/src/app/nx-welcome.stories.tsx')
     ).toBeTruthy();
     expect(
       appTree.exists(
@@ -82,7 +82,7 @@ describe('react:stories for applications', () => {
     // should just create the story and not error, even though there's a js file
     // not containing any react component
     expect(
-      appTree.exists('apps/test-ui-app/src/app/app.stories.tsx')
+      appTree.exists('apps/test-ui-app/src/app/nx-welcome.stories.tsx')
     ).toBeTruthy();
   });
 });
diff --git a/packages/web/src/generators/application/application.spec.ts b/packages/web/src/generators/application/application.spec.ts
index f5baf0cb4e..3a1e2afc7a 100644
--- a/packages/web/src/generators/application/application.spec.ts
+++ b/packages/web/src/generators/application/application.spec.ts
@@ -221,7 +221,7 @@ describe('app', () => {
       ).toBeTruthy();
       expect(
         tree.read('apps/my-dir/my-app/src/app/app.element.ts', 'utf-8')
-      ).toContain('Thank you for using and showing some ♥ for Nx.');
+      ).toContain('Hello there');
     });
   });
 
diff --git a/packages/web/src/generators/application/files/app/src/app/app.element.__style__ b/packages/web/src/generators/application/files/app/src/app/app.element.__style__
index 3b63d4dbd7..e033890e43 100644
--- a/packages/web/src/generators/application/files/app/src/app/app.element.__style__
+++ b/packages/web/src/generators/application/files/app/src/app/app.element.__style__
@@ -1,133 +1,416 @@
 /*
  * Remove template code below
  */
-body > *:first-child {
-    display: block;
-    font-family: sans-serif;
-    min-width: 300px;
-    max-width: 600px;
-    margin: 50px auto;
-}
+      html {
+        -webkit-text-size-adjust: 100%;
+        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+          'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
+          'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+          'Noto Color Emoji';
+        line-height: 1.5;
+        tab-size: 4;
+        scroll-behavior: smooth;
+      }
+      body {
+        font-family: inherit;
+        line-height: inherit;
+        margin: 0;
+      }
+      h1,
+      h2,
+      p,
+      pre {
+        margin: 0;
+      }
+      *,
+      ::before,
+      ::after {
+        box-sizing: border-box;
+        border-width: 0;
+        border-style: solid;
+        border-color: currentColor;
+      }
+      h1,
+      h2 {
+        font-size: inherit;
+        font-weight: inherit;
+      }
+      a {
+        color: inherit;
+        text-decoration: inherit;
+      }
+      pre {
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          'Liberation Mono', 'Courier New', monospace;
+      }
+      svg {
+        display: block;
+        vertical-align: middle;
+      }
 
-.gutter-left {
-    margin-left: 9px;
-}
+      svg {
+        shape-rendering: auto;
+        text-rendering: optimizeLegibility;
+      }
+      pre {
+        background-color: rgba(55, 65, 81, 1);
+        border-radius: 0.25rem;
+        color: rgba(229, 231, 235, 1);
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          'Liberation Mono', 'Courier New', monospace;
+        overflow: scroll;
+        padding: 0.5rem 0.75rem;
+      }
 
-.col-span-2 {
-    grid-column: span 2;
-}
+      .shadow {
+        box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+          0 4px 6px -2px rgba(0, 0, 0, 0.05);
+      }
+      .rounded {
+        border-radius: 1.5rem;
+      }
 
-.flex {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
+      .wrapper {
+        width: 100%;
+      }
+      .container {
+        margin-left: auto;
+        margin-right: auto;
+        max-width: 768px;
+        padding-bottom: 3rem;
+        padding-left: 1rem;
+        padding-right: 1rem;
+        color: rgba(55, 65, 81, 1);
+        width: 100%;
+      }
+      #welcome {
+        margin-top: 2.5rem;
+      }
+      #welcome h1 {
+        font-size: 3rem;
+        font-weight: 500;
+        letter-spacing: -0.025em;
+        line-height: 1;
+      }
+      #welcome span {
+        display: block;
+        font-size: 1.875rem;
+        font-weight: 300;
+        line-height: 2.25rem;
+        margin-bottom: 0.5rem;
+      }
+      #hero {
+        align-items: center;
+        background-color: hsla(214, 62%, 21%, 1);
+        border: none;
+        box-sizing: border-box;
+        color: rgba(55, 65, 81, 1);
+        display: grid;
+        grid-template-columns: 1fr;
+        margin-top: 3.5rem;
+      }
+      #hero .text-container {
+        color: rgba(255, 255, 255, 1);
+        padding: 3rem 2rem;
+      }
+      #hero .text-container h2 {
+        font-size: 1.5rem;
+        line-height: 2rem;
+        position: relative;
+      }
+      #hero .text-container h2 svg {
+        color: hsla(162, 47%, 50%, 1);
+        height: 2rem;
+        left: -0.25rem;
+        position: absolute;
+        top: 0;
+        width: 2rem;
+      }
+      #hero .text-container h2 span {
+        margin-left: 2.5rem;
+      }
+      #hero .text-container a {
+        background-color: rgba(255, 255, 255, 1);
+        border-radius: 0.75rem;
+        color: rgba(55, 65, 81, 1);
+        display: inline-block;
+        margin-top: 1.5rem;
+        padding: 1rem 2rem;
+        text-decoration: inherit;
+      }
+      #hero .logo-container {
+        display: none;
+        justify-content: center;
+        padding-left: 2rem;
+        padding-right: 2rem;
+      }
+      #hero .logo-container svg {
+        color: rgba(255, 255, 255, 1);
+        width: 66.666667%;
+      }
 
-header {
-    background-color: #143055;
-    color: white;
-    padding: 5px;
-    border-radius: 3px;
-}
+      #middle-content {
+        align-items: flex-start;
+        display: grid;
+        gap: 4rem;
+        grid-template-columns: 1fr;
+        margin-top: 3.5rem;
+      }
 
-main {
-    padding: 0 36px;
-}
+      #learning-materials {
+        padding: 2.5rem 2rem;
+      }
+      #learning-materials h2 {
+        font-weight: 500;
+        font-size: 1.25rem;
+        letter-spacing: -0.025em;
+        line-height: 1.75rem;
+        padding-left: 1rem;
+        padding-right: 1rem;
+      }
+      .list-item-link {
+        align-items: center;
+        border-radius: 0.75rem;
+        display: flex;
+        margin-top: 1rem;
+        padding: 1rem;
+        transition-property: background-color, border-color, color, fill, stroke,
+          opacity, box-shadow, transform, filter, backdrop-filter,
+          -webkit-backdrop-filter;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+        width: 100%;
+      }
+      .list-item-link svg:first-child {
+        margin-right: 1rem;
+        height: 1.5rem;
+        transition-property: background-color, border-color, color, fill, stroke,
+          opacity, box-shadow, transform, filter, backdrop-filter,
+          -webkit-backdrop-filter;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+        width: 1.5rem;
+      }
+      .list-item-link > span {
+        flex-grow: 1;
+        font-weight: 400;
+        transition-property: background-color, border-color, color, fill, stroke,
+          opacity, box-shadow, transform, filter, backdrop-filter,
+          -webkit-backdrop-filter;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+      }
+      .list-item-link > span > span {
+        color: rgba(107, 114, 128, 1);
+        display: block;
+        flex-grow: 1;
+        font-size: 0.75rem;
+        font-weight: 300;
+        line-height: 1rem;
+        transition-property: background-color, border-color, color, fill, stroke,
+          opacity, box-shadow, transform, filter, backdrop-filter,
+          -webkit-backdrop-filter;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+      }
+      .list-item-link svg:last-child {
+        height: 1rem;
+        transition-property: all;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+        width: 1rem;
+      }
+      .list-item-link:hover {
+        color: rgba(255, 255, 255, 1);
+        background-color: hsla(162, 47%, 50%, 1);
+      }
+      .list-item-link:hover > span {
+      }
+      .list-item-link:hover > span > span {
+        color: rgba(243, 244, 246, 1);
+      }
+      .list-item-link:hover svg:last-child {
+        transform: translateX(0.25rem);
+      }
 
-p {
-    text-align: center;
-}
+      #other-links {
+      }
+      .button-pill {
+        padding: 1.5rem 2rem;
+        transition-duration: 300ms;
+        transition-property: background-color, border-color, color, fill, stroke,
+          opacity, box-shadow, transform, filter, backdrop-filter,
+          -webkit-backdrop-filter;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        align-items: center;
+        display: flex;
+      }
+      .button-pill svg {
+        transition-property: background-color, border-color, color, fill, stroke,
+          opacity, box-shadow, transform, filter, backdrop-filter,
+          -webkit-backdrop-filter;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+        flex-shrink: 0;
+        width: 3rem;
+      }
+      .button-pill > span {
+        letter-spacing: -0.025em;
+        font-weight: 400;
+        font-size: 1.125rem;
+        line-height: 1.75rem;
+        padding-left: 1rem;
+        padding-right: 1rem;
+      }
+      .button-pill span span {
+        display: block;
+        font-size: 0.875rem;
+        font-weight: 300;
+        line-height: 1.25rem;
+      }
+      .button-pill:hover svg,
+      .button-pill:hover {
+        color: rgba(255, 255, 255, 1) !important;
+      }
+      #nx-console:hover {
+        background-color: rgba(0, 122, 204, 1);
+      }
+      #nx-console svg {
+        color: rgba(0, 122, 204, 1);
+      }
 
-h1 {
-    text-align: center;
-    margin-left: 18px;
-    font-size: 24px;
-}
+      #nx-repo:hover {
+        background-color: rgba(24, 23, 23, 1);
+      }
+      #nx-repo svg {
+        color: rgba(24, 23, 23, 1);
+      }
 
-h2 {
-    text-align: center;
-    font-size: 20px;
-    margin: 40px 0 10px 0;
-}
+      #nx-cloud {
+        margin-bottom: 2rem;
+        margin-top: 2rem;
+        padding: 2.5rem 2rem;
+      }
+      #nx-cloud > div {
+        align-items: center;
+        display: flex;
+      }
+      #nx-cloud > div svg {
+        border-radius: 0.375rem;
+        flex-shrink: 0;
+        width: 3rem;
+      }
+      #nx-cloud > div h2 {
+        font-size: 1.125rem;
+        font-weight: 400;
+        letter-spacing: -0.025em;
+        line-height: 1.75rem;
+        padding-left: 1rem;
+        padding-right: 1rem;
+      }
+      #nx-cloud > div h2 span {
+        display: block;
+        font-size: 0.875rem;
+        font-weight: 300;
+        line-height: 1.25rem;
+      }
+      #nx-cloud p {
+        font-size: 1rem;
+        line-height: 1.5rem;
+        margin-top: 1rem;
+      }
+      #nx-cloud pre {
+        margin-top: 1rem;
+      }
+      #nx-cloud a {
+        color: rgba(107, 114, 128, 1);
+        display: block;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        margin-top: 1.5rem;
+        text-align: right;
+      }
+      #nx-cloud a:hover {
+        text-decoration: underline;
+      }
 
-.resources {
-    text-align: center;
-    list-style: none;
-    padding: 0;
-    display: grid;
-    grid-gap: 9px;
-    grid-template-columns: 1fr 1fr;
-}
+      #commands {
+        padding: 2.5rem 2rem;
 
-.resource {
-    color: #0094ba;
-    height: 36px;
-    background-color: rgba(0, 0, 0, 0);
-    border: 1px solid rgba(0, 0, 0, 0.12);
-    border-radius: 4px;
-    padding: 3px 9px;
-    text-decoration: none;
-}
+        margin-top: 3.5rem;
+      }
+      #commands h2 {
+        font-size: 1.25rem;
+        font-weight: 400;
+        letter-spacing: -0.025em;
+        line-height: 1.75rem;
+        padding-left: 1rem;
+        padding-right: 1rem;
+      }
+      #commands p {
+        font-size: 1rem;
+        font-weight: 300;
+        line-height: 1.5rem;
+        margin-top: 1rem;
+        padding-left: 1rem;
+        padding-right: 1rem;
+      }
+      details {
+        align-items: center;
+        display: flex;
+        margin-top: 1rem;
+        padding-left: 1rem;
+        padding-right: 1rem;
+        width: 100%;
+      }
+      details pre > span {
+        color: rgba(181, 181, 181, 1);
+      }
+      summary {
+        border-radius: 0.5rem;
+        display: flex;
+        font-weight: 400;
+        padding: 0.5rem;
+        cursor: pointer;
+        transition-property: background-color, border-color, color, fill, stroke,
+          opacity, box-shadow, transform, filter, backdrop-filter,
+          -webkit-backdrop-filter;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+      }
+      summary:hover {
+        background-color: rgba(243, 244, 246, 1);
+      }
+      summary svg {
+        height: 1.5rem;
+        margin-right: 1rem;
+        width: 1.5rem;
+      }
 
-.resource:hover {
-    background-color: rgba(68, 138, 255, 0.04);
-}
+      #love {
+        color: rgba(107, 114, 128, 1);
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        margin-top: 3.5rem;
+        opacity: 0.6;
+        text-align: center;
+      }
+      #love svg {
+        color: rgba(252, 165, 165, 1);
+        width: 1.25rem;
+        height: 1.25rem;
+        display: inline;
+        margin-top: -0.25rem;
+      }
 
-pre {
-    padding: 9px;
-    border-radius: 4px;
-    background-color: black;
-    color: #eee;
-}
-
-details {
-    border-radius: 4px;
-    color: #333;
-    background-color: rgba(0, 0, 0, 0);
-    border: 1px solid rgba(0, 0, 0, 0.12);
-    padding: 3px 9px;
-    margin-bottom: 9px;
-}
-
-summary {
-    cursor: pointer;
-    outline: none;
-    height: 36px;
-    line-height: 36px;
-}
-
-.github-star-container {
-    margin-top: 12px;
-    line-height: 20px;
-}
-
-.github-star-container a {
-    display: flex;
-    align-items: center;
-    text-decoration: none;
-    color: #333;
-}
-
-.github-star-badge {
-    color: #24292e;
-    display: flex;
-    align-items: center;
-    font-size: 12px;
-    padding: 3px 10px;
-    border: 1px solid rgba(27,31,35,.2);
-    border-radius: 3px;
-    background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
-    margin-left: 4px;
-    font-weight: 600;
-}
-
-.github-star-badge:hover {
-    background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
-    border-color: rgba(27,31,35,.35);
-    background-position: -.5em;
-}
-.github-star-badge .material-icons {
-    height: 16px;
-    width: 16px;
-    margin-right: 4px;
-}
+      @media screen and (min-width: 768px) {
+        #hero {
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
+        #hero .logo-container {
+          display: flex;
+        }
+        #middle-content {
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
+      }
diff --git a/packages/web/src/generators/application/files/app/src/app/app.element.spec.ts__tmpl__ b/packages/web/src/generators/application/files/app/src/app/app.element.spec.ts__tmpl__
index 09b331189a..8f8178a21b 100644
--- a/packages/web/src/generators/application/files/app/src/app/app.element.spec.ts__tmpl__
+++ b/packages/web/src/generators/application/files/app/src/app/app.element.spec.ts__tmpl__
@@ -14,8 +14,8 @@ describe('AppElement', () => {
   it('should have a greeting', () => {
     app.connectedCallback();
 
-    expect(app.querySelector('h1').innerHTML).toEqual(
-      'Welcome to <%= projectName %>!'
+    expect(app.querySelector('h1').innerHTML).toContain(
+      'Welcome <%= projectName %>'
     );
   });
 });
diff --git a/packages/web/src/generators/application/files/app/src/app/app.element.ts__tmpl__ b/packages/web/src/generators/application/files/app/src/app/app.element.ts__tmpl__
index f483b2ba62..0ccf6a8920 100644
--- a/packages/web/src/generators/application/files/app/src/app/app.element.ts__tmpl__
+++ b/packages/web/src/generators/application/files/app/src/app/app.element.ts__tmpl__
@@ -8,88 +8,378 @@ export class AppElement extends HTMLElement {
   connectedCallback() {
     const title = '<%= projectName %>';
     this.innerHTML = `
-      <header class="flex">
-        <svg width="40" height="40" viewBox="0 0 262 163"><polygon id="Path" fill="#ffffff" points="130.68 104.59 97.49 52.71 97.44 96.3 40.24 0 0 0 0 162.57 39.79 162.57 39.92 66.39 96.53 158.26"></polygon><polygon id="Path" fill="#ffffff" points="97.5 41.79 137.24 41.79 137.33 41.33 137.33 0 97.54 0 97.49 41.33"></polygon><path d="M198.66,86.86 C189.139872,86.6795216 180.538723,92.516445 177.19,101.43 C182.764789,93.0931021 193.379673,89.7432211 202.73,93.37 C207.05,95.13 212.73,97.97 217.23,96.45 C212.950306,90.4438814 206.034895,86.8725952 198.66,86.86 L198.66,86.86 Z" id="Path" fill="#96D8E9"></path><path d="M243.75,106.42 C243.75,101.55 241.1,100.42 235.6,98.42 C231.52,97 226.89,95.4 223.52,91 C222.86,90.13 222.25,89.15 221.6,88.11 C220.14382,85.4164099 218.169266,83.037429 215.79,81.11 C212.58,78.75 208.37,77.6 202.91,77.6 C191.954261,77.6076705 182.084192,84.2206169 177.91,94.35 C183.186964,87.0278244 191.956716,83.0605026 200.940147,83.9314609 C209.923578,84.8024193 217.767888,90.3805017 221.54,98.58 C223.424615,101.689762 227.141337,103.174819 230.65,102.22 C236.02,101.07 235.65,106.15 243.76,107.87 L243.75,106.42 Z" id="Path" fill="#48C4E5"></path><path d="M261.46,105.38 L261.46,105.27 C261.34,73.03 235.17,45.45 202.91,45.45 C183.207085,45.4363165 164.821777,55.3450614 154,71.81 L153.79,71.45 L137.23,45.45 L97.5,45.4499858 L135.25,104.57 L98.41,162.57 L137,162.57 L153.79,136.78 L170.88,162.57 L209.48,162.57 L174.48,107.49 C173.899005,106.416838 173.583536,105.220114 173.56,104 C173.557346,96.2203871 176.64661,88.7586448 182.147627,83.2576275 C187.648645,77.7566101 195.110387,74.6673462 202.89,74.67 C219.11,74.67 221.82,84.37 225.32,88.93 C232.23,97.93 246.03,93.99 246.03,105.73 L246.03,105.73 C246.071086,108.480945 247.576662,111.001004 249.979593,112.340896 C252.382524,113.680787 255.317747,113.636949 257.679593,112.225896 C260.041438,110.814842 261.471086,108.250945 261.43,105.5 L261.43,105.5 L261.43,105.38 L261.46,105.38 Z" id="Path" fill="#ffffff"></path><path d="M261.5,113.68 C261.892278,116.421801 261.504116,119.218653 260.38,121.75 C258.18,126.84 254.51,125.14 254.51,125.14 C254.51,125.14 251.35,123.6 253.27,120.65 C255.4,117.36 259.61,117.74 261.5,113.68 Z" id="Path" fill="#022f56"></path></svg>
-        <h1>Welcome to ${title}!</h1>
-      </header>
-      <main>
-        <h2>Resources &amp; Tools</h2>
-        <p>
-          Thank you for using and showing some ♥ for Nx.
-        </p>
-        <div class="flex github-star-container">
-          <a href="https://github.com/nrwl/nx" target="_blank" rel="noopener noreferrer"> If you like Nx, please give it a star:
-            <div class="github-star-badge">
-              <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
-              Star
-            </div>
-          </a>
+    <div class="wrapper">
+      <div class="container">
+        <!--  WELCOME  -->
+        <div id="welcome">
+          <h1>
+            <span> Hello there, </span>
+            Welcome ${title} 👋
+          </h1>
         </div>
-        <p>
-          Here are some links to help you get started.
-        </p>
-        <ul class="resources">
-          <li class="col-span-2">
-            <a
-              class="resource flex"
-              href="https://nxplaybook.com/p/nx-workspaces">
-              Nx video course
-            </a>
-          </li>
-          <li class="col-span-2">
-            <a
-              class="resource flex"
-              href="https://nx.dev/latest/react/getting-started/intro">
-                Nx video tutorial
-            </a>
-          </li>
-          <li class="col-span-2">
-            <a
-              class="resource flex"
-              href="https://nx.dev/latest/react/tutorial/01-create-application">
-              Interactive tutorial
-            </a>
-          </li>
-          <li class="col-span-2">
-            <a class="resource flex" href="https://nx.app/">
-              <svg width="36" height="36" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M120 15V30C103.44 30 90 43.44 90 60C90 76.56 76.56 90 60 90C43.44 90 30 103.44 30 120H15C6.72 120 0 113.28 0 105V15C0 6.72 6.72 0 15 0H105C113.28 0 120 6.72 120 15Z" fill="#0E2039"/>
-                <path d="M120 30V105C120 113.28 113.28 120 105 120H30C30 103.44 43.44 90 60 90C76.56 90 90 76.56 90 60C90 43.44 103.44 30 120 30Z" fill="white"/>
-              </svg>
-              <span class="gutter-left">Nx Cloud</span>
-            </a>
-          </li>
-        </ul>
-        <h2>Next Steps</h2>
-        <p>Here are some things you can do with Nx.</p>
-        <details open>
-          <summary>Add UI library</summary>
-          <pre>
-\`# Generate UI lib
-nx g @nrwl/web:lib ui
 
-# Add a component
-nx g @nrwl/web:component xyz --project ui\`
-          </pre>
-        </details>
-        <details>
-          <summary>View dependency graph</summary>
-          <pre>\`nx dep-graph\`</pre>
-        </details>
-        <details>
-          <summary>Run affected commands</summary>
-          <pre>
-\`# see what's been affected by changes
+        <!--  HERO  -->
+        <div id="hero" class="rounded">
+          <div class="text-container">
+            <h2>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
+                />
+              </svg>
+              <span>You&apos;re up and running</span>
+            </h2>
+            <a href="#commands"> What&apos;s next? </a>
+          </div>
+          <div class="logo-container">
+            <svg
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M11.987 14.138l-3.132 4.923-5.193-8.427-.012 8.822H0V4.544h3.691l5.247 8.833.005-3.998 3.044 4.759zm.601-5.761c.024-.048 0-3.784.008-3.833h-3.65c.002.059-.005 3.776-.003 3.833h3.645zm5.634 4.134a2.061 2.061 0 0 0-1.969 1.336 1.963 1.963 0 0 1 2.343-.739c.396.161.917.422 1.33.283a2.1 2.1 0 0 0-1.704-.88zm3.39 1.061c-.375-.13-.8-.277-1.109-.681-.06-.08-.116-.17-.176-.265a2.143 2.143 0 0 0-.533-.642c-.294-.216-.68-.322-1.18-.322a2.482 2.482 0 0 0-2.294 1.536 2.325 2.325 0 0 1 4.002.388.75.75 0 0 0 .836.334c.493-.105.46.36 1.203.518v-.133c-.003-.446-.246-.55-.75-.733zm2.024 1.266a.723.723 0 0 0 .347-.638c-.01-2.957-2.41-5.487-5.37-5.487a5.364 5.364 0 0 0-4.487 2.418c-.01-.026-1.522-2.39-1.538-2.418H8.943l3.463 5.423-3.379 5.32h3.54l1.54-2.366 1.568 2.366h3.541l-3.21-5.052a.7.7 0 0 1-.084-.32 2.69 2.69 0 0 1 2.69-2.691h.001c1.488 0 1.736.89 2.057 1.308.634.826 1.9.464 1.9 1.541a.707.707 0 0 0 1.066.596zm.35.133c-.173.372-.56.338-.755.639-.176.271.114.412.114.412s.337.156.538-.311c.104-.231.14-.488.103-.74z"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <!--  MIDDLE CONTENT  -->
+        <div id="middle-content">
+          <div id="learning-materials" class="rounded shadow">
+            <h2>Learning materials</h2>
+            <a href="https://nx.dev/getting-started/intro?utm_source=nx-project" target="_blank" rel="noreferrer" class="list-item-link">
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
+                />
+              </svg>
+              <span>
+                Documentation
+                <span> Everything is in there </span>
+              </span>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M9 5l7 7-7 7"
+                />
+              </svg>
+            </a>
+            <a href="https://blog.nrwl.io/?utm_source=nx-project" target="_blank" rel="noreferrer" class="list-item-link">
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"
+                />
+              </svg>
+              <span>
+                Blog
+                <span> Changelog, features & events </span>
+              </span>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M9 5l7 7-7 7"
+                />
+              </svg>
+            </a>
+            <a href="https://www.youtube.com/c/Nrwl_io/videos?utm_source=nx-project&sub_confirmation=1" target="_blank" rel="noreferrer" class="list-item-link">
+              <svg
+                role="img"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <title>YouTube</title>
+                <path
+                  d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"
+                />
+              </svg>
+              <span>
+                YouTube channel
+                <span> Nx Show, talks & tutorials </span>
+              </span>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M9 5l7 7-7 7"
+                />
+              </svg>
+            </a>
+            <a href="https://nx.dev/tutorial/01-create-application?utm_source=nx-project" target="_blank" rel="noreferrer" class="list-item-link">
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
+                />
+              </svg>
+              <span>
+                Interactive tutorials
+                <span> Create an app, step-by-step </span>
+              </span>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M9 5l7 7-7 7"
+                />
+              </svg>
+            </a>
+            <a href="https://nxplaybook.com/?utm_source=nx-project" target="_blank" rel="noreferrer" class="list-item-link">
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path d="M12 14l9-5-9-5-9 5 9 5z" />
+                <path
+                  d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
+                />
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
+                />
+              </svg>
+              <span>
+                Video courses
+                <span> Nx custom courses </span>
+              </span>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M9 5l7 7-7 7"
+                />
+              </svg>
+            </a>
+          </div>
+          <div id="other-links">
+            <a id="nx-console" class="button-pill rounded shadow" href="https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console&utm_source=nx-project" target="_blank" rel="noreferrer">
+              <svg
+                fill="currentColor"
+                role="img"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <title>Visual Studio Code</title>
+                <path
+                  d="M23.15 2.587L18.21.21a1.494 1.494 0 0 0-1.705.29l-9.46 8.63-4.12-3.128a.999.999 0 0 0-1.276.057L.327 7.261A1 1 0 0 0 .326 8.74L3.899 12 .326 15.26a1 1 0 0 0 .001 1.479L1.65 17.94a.999.999 0 0 0 1.276.057l4.12-3.128 9.46 8.63a1.492 1.492 0 0 0 1.704.29l4.942-2.377A1.5 1.5 0 0 0 24 20.06V3.939a1.5 1.5 0 0 0-.85-1.352zm-5.146 14.861L10.826 12l7.178-5.448v10.896z"
+                />
+              </svg>
+              <span>
+                Install Nx Console
+                <span>Plugin for VSCode</span>
+              </span>
+            </a>
+            <div id="nx-cloud" class="rounded shadow">
+              <div>
+                <svg
+                  viewBox="0 0 120 120"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M120 15V30C103.44 30 90 43.44 90 60C90 76.56 76.56 90 60 90C43.44 90 30 103.44 30 120H15C6.72 120 0 113.28 0 105V15C0 6.72 6.72 0 15 0H105C113.28 0 120 6.72 120 15Z"
+                    fill="#0E2039"
+                  />
+                  <path
+                    d="M120 30V105C120 113.28 113.28 120 105 120H30C30 103.44 43.44 90 60 90C76.56 90 90 76.56 90 60C90 43.44 103.44 30 120 30Z"
+                    fill="white"
+                  />
+                </svg>
+                <h2>
+                  NxCloud
+                  <span>
+                    Enable faster CI & better DX
+                  </span>
+                </h2>
+              </div>
+              <p>
+                You can activate distributed tasks executions and caching by
+                running:
+              </p>
+              <pre>nx connect-to-nx-cloud</pre>
+              <a href="https://nx.app/?utm_source=nx-project" target="_blank" rel="noreferrer"> What is Nx Cloud? </a>
+            </div>
+            <a id="nx-repo" class="button-pill rounded shadow" href="https://github.com/nrwl/nx?utm_source=nx-project" target="_blank" rel="noreferrer">
+              <svg
+                fill="currentColor"
+                role="img"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+                />
+              </svg>
+              <span>
+                Nx is open source
+                <span> Love Nx? Give us a star! </span>
+              </span>
+            </a>
+          </div>
+        </div>
+
+        <!--  COMMANDS  -->
+        <div id="commands" class="rounded shadow">
+          <h2>Next steps</h2>
+          <p>Here are some things you can do with Nx:</p>
+          <details>
+            <summary>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                />
+              </svg>
+              Add UI library
+            </summary>
+            <pre><span># Generate UI lib</span>
+nx g @nrwl/angular:lib ui
+
+<span># Add a component</span>
+nx g @nrwl/angular:component button --project ui</pre>
+          </details>
+          <details>
+            <summary>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                />
+              </svg>
+              View interactive dependency graph
+            </summary>
+            <pre>nx dep-graph</pre>
+          </details>
+          <details>
+            <summary>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                />
+              </svg>
+              Run affected commands
+            </summary>
+            <pre><span># see what&apos;s been affected by changes</span>
 nx affected:dep-graph
 
-# run tests for current changes
+<span># run tests for current changes</span>
 nx affected:test
 
-# run e2e tests for current changes
-nx affected:e2e\`
-          </pre>
-        </details>
-      </main>`;
+<span># run e2e tests for current changes</span>
+nx affected:e2e</pre>
+          </details>
+        </div>
+
+        <p id="love">
+          Carefully crafted with
+          <svg
+            fill="currentColor"
+            stroke="none"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+            />
+          </svg>
+        </p>
+      </div>
+    </div>
+      `;
   }
 }
 customElements.define('<%= prefix %>-root', AppElement);