diff --git a/nx-dev/nx-dev/pages/angular.tsx b/nx-dev/nx-dev/pages/angular.tsx
index 63da85f41e..7d7c40a3b6 100644
--- a/nx-dev/nx-dev/pages/angular.tsx
+++ b/nx-dev/nx-dev/pages/angular.tsx
@@ -29,7 +29,7 @@ export function AngularPage() {
         <div className="w-full overflow-hidden">
           {/*Intro component*/}
           <div className="bg-blue-nx-dark text-white">
-            <div className="max-w-screen-lg mx-auto px-5 py-5 relative">
+            <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5 relative">
               <img
                 src="/images/angular-constellation.svg"
                 width={800}
@@ -93,7 +93,7 @@ export function AngularPage() {
               </div>
             </div>
           </div>
-          <div className="max-w-screen-lg mx-auto px-5 py-5">
+          <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5">
             {/*How to use Nx*/}
             <div className="mt-32 flex sm:flex-row flex-col justify-center">
               <div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
@@ -183,7 +183,7 @@ export function AngularPage() {
           </div>
           {/*Nx technology*/}
           <div className="bg-blue-nx-base text-white">
-            <div className="max-w-screen-lg mx-auto px-5 py-5">
+            <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5">
               <div className="py-32 flex sm:flex-row flex-col items-center justify-center">
                 <div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
                   <h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight mb-4">
@@ -229,7 +229,7 @@ export function AngularPage() {
               </div>
             </div>
           </div>
-          <div className="max-w-screen-lg mx-auto px-5 py-5">
+          <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5">
             {/*Nx plugins ecosystem*/}
             <div className="py-32 flex sm:flex-row flex-col items-center justify-center">
               <div className="w-full sm:w-2/5 flex flex-col justify-between items-center sm:pb-0 pb-10 mt-8 sm:mt-0">
@@ -330,7 +330,7 @@ export function AngularPage() {
           </div>
           {/*Integrated experience*/}
           <div className="bg-blue-nx-base text-white">
-            <div className="max-w-screen-lg mx-auto px-5 py-5">
+            <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5">
               <div className="py-32 flex sm:flex-row flex-col items-center justify-center">
                 <div className="w-full sm:w-2/5 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
                   <h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight mb-4">
@@ -379,7 +379,7 @@ export function AngularPage() {
               </div>
             </div>
           </div>
-          <div className="max-w-screen-lg mx-auto px-5 py-5">
+          <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5">
             {/*Learn more*/}
             <div className="py-32 flex sm:flex-row flex-col items-start justify-center">
               <div className="w-full sm:w-2/5 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
diff --git a/nx-dev/nx-dev/pages/index.tsx b/nx-dev/nx-dev/pages/index.tsx
index 2bbd6d36e3..a5d3aae439 100644
--- a/nx-dev/nx-dev/pages/index.tsx
+++ b/nx-dev/nx-dev/pages/index.tsx
@@ -29,7 +29,7 @@ export function Index() {
         <div className="w-full">
           {/*INTRO COMPONENT*/}
           <div className="bg-blue-nx-base text-white">
-            <div className="max-w-screen-lg mx-auto px-5 py-5">
+            <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5">
               <div className="mt-8 mb-20 flex lg:flex-row flex-col items-center justify-center">
                 <div className="w-full lg:w-1/2 flex flex-col">
                   <h1 className="text-4xl sm:text-5xl lg:text-6xl leading none font-extrabold tracking-tight mt-10 mb-8 sm:mt-14 sm:mb-10">
@@ -106,7 +106,7 @@ export function Index() {
           </div>
 
           {/*SELECTION COMPONENT*/}
-          <div className="max-w-screen-lg mx-auto px-5 py-5">
+          <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5">
             <div className="mt-32 mb-20 flex sm:flex-row flex-col justify-center">
               <div className="w-full sm:w-1/2 grid grid-cols-3 gap-10 items-center">
                 <Link href="/react">
@@ -177,7 +177,7 @@ export function Index() {
           </div>
 
           <div className="bg-blue-nx-base text-white">
-            <div className="max-w-screen-lg mx-auto px-5 py-5">
+            <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5">
               {/*GRAPH AND COMPUTATION CACHING*/}
               <div className="mt-32 flex sm:flex-row flex-col">
                 <div className="w-full sm:w-1/2 flex flex-col justify-center items-center sm:pr-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
@@ -302,7 +302,7 @@ export function Index() {
             </div>
           </div>
 
-          <div className="max-w-screen-lg mx-auto px-5 py-5">
+          <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5">
             {/*LEARNING MATERIALS*/}
             <div className="my-32 flex sm:flex-row flex-col">
               <div className="w-full sm:w-1/2 flex flex-col justify-center items-center sm:pb-0 sm:pr-16 pb-10 mt-8 sm:mt-0">
@@ -348,7 +348,7 @@ export function Index() {
           </div>
 
           <div className="bg-blue-nx-base text-white">
-            <div className="max-w-screen-lg mx-auto px-5 py-5">
+            <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5">
               {/*MORE*/}
               <div className="my-32 flex sm:flex-row flex-col">
                 <div className="w-full sm:w-1/2 flex flex-col justify-center sm:pr-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
diff --git a/nx-dev/nx-dev/pages/node.tsx b/nx-dev/nx-dev/pages/node.tsx
index 9476019a61..1ad08cc7ae 100644
--- a/nx-dev/nx-dev/pages/node.tsx
+++ b/nx-dev/nx-dev/pages/node.tsx
@@ -74,7 +74,7 @@ export function Node() {
           {/*Intro component*/}
           <div className="bg-blue-nx-dark text-white">
             <div
-              className="max-w-screen-lg mx-auto px-5 py-5"
+              className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5"
               style={{
                 background:
                   'url(/images/cubes-top-1.png) no-repeat top center / contain',
@@ -119,7 +119,7 @@ export function Node() {
               </div>
             </div>
             {/*What is Nx*/}
-            <div className="max-w-screen-lg mx-auto px-5 py-5">
+            <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5">
               <div className="my-32 flex sm:flex-row flex-col justify-center">
                 <div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
                   <h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight mb-4">
@@ -184,7 +184,7 @@ export function Node() {
           </div>
           {/*Call out*/}
           <div className="bg-blue-nx-base text-white">
-            <div className="max-w-screen-lg mx-auto px-5 py-5">
+            <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5">
               <div className="flex sm:flex-row flex-col justify-center py-16">
                 <div className="sm:w-1/2 sm:flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0 relative">
                   <div className="hidden sm:block absolute -top-40">
@@ -212,7 +212,7 @@ export function Node() {
               </div>
             </div>
           </div>
-          <div className="max-w-screen-lg mx-auto px-5 py-5">
+          <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5">
             {/*How to use Nx*/}
             <div className="mt-32 flex sm:flex-row flex-col justify-center">
               <div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
@@ -308,7 +308,7 @@ export function Node() {
           </div>
           {/*VIDEO*/}
           <div className="bg-blue-nx-base text-white">
-            <div className="max-w-screen-lg mx-auto px-5 py-5">
+            <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5">
               <div className="py-32 w-full flex justify-center">
                 <iframe
                   width="760"
@@ -323,7 +323,7 @@ export function Node() {
               </div>
             </div>
           </div>
-          <div className="max-w-screen-lg mx-auto px-5 py-5">
+          <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5">
             {/*Nx technology*/}
             <div className="py-32 flex sm:flex-row flex-col items-center justify-center">
               <div className="w-full sm:w-2/5 flex flex-col justify-between items-center sm:pb-0 pb-10 mt-8 sm:mt-0">
@@ -425,7 +425,7 @@ export function Node() {
           </div>
           {/*Integrated experience*/}
           <div className="bg-blue-nx-base text-white">
-            <div className="max-w-screen-lg mx-auto px-5 py-5">
+            <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5">
               <div className="py-32 flex sm:flex-row flex-col items-center justify-center">
                 <div className="w-full sm:w-2/5 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
                   <h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight mb-4">
@@ -457,7 +457,7 @@ export function Node() {
             </div>
           </div>
           {/*Learn more*/}
-          <div className="max-w-screen-lg mx-auto px-5 py-5">
+          <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5">
             <div className="py-32 flex sm:flex-row flex-col items-start justify-center">
               <div className="w-full sm:w-2/5 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
                 <h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold text-gray-900 tracking-tight mb-4">
diff --git a/nx-dev/nx-dev/pages/react.tsx b/nx-dev/nx-dev/pages/react.tsx
index b1b43f8bbd..73fced13ad 100644
--- a/nx-dev/nx-dev/pages/react.tsx
+++ b/nx-dev/nx-dev/pages/react.tsx
@@ -29,7 +29,7 @@ export function ReactPage() {
         <div className="w-full overflow-hidden">
           {/*Intro component*/}
           <div className="bg-blue-nx-dark text-white">
-            <div className="max-w-screen-lg mx-auto px-5 py-5 relative">
+            <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5 relative">
               <img
                 src="/images/react-constellation.svg"
                 width={800}
@@ -88,7 +88,7 @@ export function ReactPage() {
               </div>
             </div>
           </div>
-          <div className="max-w-screen-lg mx-auto px-5 py-5">
+          <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5">
             {/*How to use Nx*/}
             <div className="mt-32 flex sm:flex-row flex-col justify-center">
               <div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
@@ -110,7 +110,9 @@ export function ReactPage() {
                   />
                 </div>
 
-                <p className="sm:text-lg my-6">For NextJS users you can use:</p>
+                <p className="sm:text-lg my-6">
+                  For Next.js users you can use:
+                </p>
 
                 <div className="w-full">
                   <InlineCommand
@@ -188,7 +190,7 @@ export function ReactPage() {
           </div>
           {/*Nx technology*/}
           <div className="bg-blue-nx-base text-white">
-            <div className="max-w-screen-lg mx-auto px-5 py-5">
+            <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5">
               <div className="py-32 flex sm:flex-row flex-col items-center justify-center">
                 <div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
                   <h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight mb-4">
@@ -235,7 +237,7 @@ export function ReactPage() {
             </div>
           </div>
 
-          <div className="max-w-screen-lg mx-auto px-5 py-5">
+          <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5">
             {/*Nx plugins ecosystem*/}
             <div className="py-32 flex sm:flex-row flex-col items-center justify-center">
               <div className="w-full sm:w-2/5 flex flex-col justify-between items-center sm:pb-0 pb-10 mt-8 sm:mt-0">
@@ -337,7 +339,7 @@ export function ReactPage() {
                       target="_blank"
                       href="https://blog.nrwl.io/painlessly-build-and-deploy-next-js-apps-with-nx-225e2721da78?source=friends_link&sk=b381e3b9e7a2d8951fbe806ac0363851"
                     >
-                      NextJS
+                      Next.js
                     </a>
                     ,{' '}
                     <a
@@ -363,7 +365,7 @@ export function ReactPage() {
           </div>
           {/*Integrated experience*/}
           <div className="bg-blue-nx-base text-white">
-            <div className="max-w-screen-lg mx-auto px-5 py-5">
+            <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5">
               <div className="py-32 flex sm:flex-row flex-col items-center justify-center">
                 <div className="w-full sm:w-2/5 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
                   <h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight mb-4">
@@ -412,7 +414,7 @@ export function ReactPage() {
               </div>
             </div>
           </div>
-          <div className="max-w-screen-lg mx-auto px-5 py-5">
+          <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5">
             {/*Learn more*/}
             <div className="py-32 flex sm:flex-row flex-col items-start justify-center">
               <div className="w-full sm:w-2/5 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">