diff --git a/packages/cli/package.json b/packages/cli/package.json
index dbc1b07f38..3e3193ed20 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -28,10 +28,12 @@
   "dependencies": {
     "@antfu/ni": "^0.21.8",
     "@clack/prompts": "^0.7.0",
+    "@material-ui/core": "^4.12.4",
     "@sentry/integrations": "^7.69.0",
     "@sentry/node": "^7.69.0",
     "chalk": "^5.3.0",
-    "diff": "^5.1.0"
+    "diff": "^5.1.0",
+    "million": "^2.6.4"
   },
   "scripts": {
     "prepare": "node build.mjs",
@@ -44,6 +46,7 @@
     "@types/diff": "^5.0.3",
     "@types/gradient-string": "^1.1.2",
     "@types/node": "^18.14.1",
+    "@types/react": "^18.0.27",
     "esbuild": "^0.14.54",
     "esbuild-plugin-replace": "^1.4.0",
     "prettier": "^2.8.4",
diff --git a/packages/cli/src/utils/package-manager.ts b/packages/cli/src/utils/package-manager.ts
index e380bfe234..6d19f09e24 100644
--- a/packages/cli/src/utils/package-manager.ts
+++ b/packages/cli/src/utils/package-manager.ts
@@ -7,6 +7,7 @@ import chalk from 'chalk';
 import { abort, abortIfCancelled } from './utils';
 import { npm, pnpm, yarn, bun, packageManagers } from './constants';
 import type { PackageManager } from '../types';
+import { isPackageInstalled } from './package-json';
 
 /**
  * Detect package manager by checking if the lock file exists.
@@ -28,7 +29,7 @@ export async function detectPackageManger(): Promise<PackageManager | null> {
       return bun;
     default:
       return null;
-  }
+  } 
 }
 
 /**
@@ -37,8 +38,9 @@ export async function detectPackageManger(): Promise<PackageManager | null> {
 export function installPackageWithPackageManager(
   packageManager: PackageManager,
   packageName: string,
+  flag?:string
 ): void {
-  exec(`${packageManager.installCommand} ${packageName}@latest`);
+  exec(`${packageManager.installCommand} ${packageName}@latest --${flag}`);
 }
 
 /**
@@ -106,7 +108,7 @@ export async function installPackage({
   }
 
   const packageManager = await getPackageManager();
-
+  
   const s = clack.spinner();
   s.start(
     `${alreadyInstalled ? 'Updating' : 'Installing'} ${chalk.bold.cyan(
@@ -116,13 +118,44 @@ export async function installPackage({
 
   try {
     installPackageWithPackageManager(packageManager, packageName);
+
     await sleep(1000);
 
+    const installed = await isPackageInstalled()
+
+    if(!installed) {
+
+      s.stop();  
+
+      const shouldUseLegacyPeerDeps = await clack.confirm({
+        message: `The ${chalk.bold.cyan(
+          packageName,
+        )} package did not install, would you like to use the "--legacy-peer-deps" flag?`,
+      })
+  
+      if (!shouldUseLegacyPeerDeps) {
+        throw new Error('Please try again  or refer docs to install manually: https://million.dev/docs/install')
+      }
+
+      installPackageWithPackageManager(packageManager, packageName, 'legacy-peer-deps');
+
+      s.start(
+        `${alreadyInstalled ? 'Updating' : 'Installing'} ${chalk.bold.cyan(
+          packageName,
+        )} with ${chalk.bold(packageManager.label)} and the "--legacy-peer-deps" flag.`,
+      );
+
+      await sleep(1000);
+
+    }
+
     s.stop(
       `${alreadyInstalled ? 'Updated' : 'Installed'} ${chalk.bold.cyan(
         packageName,
       )} with ${chalk.bold(packageManager.label)}.`,
     );
+
+
   } catch (e) {
     clack.log.error(
       `${chalk.red('Error during installation.')}\n\n${chalk.dim(