diff --git a/src/utils/create-backend-project.js b/src/utils/create-backend-project.js
index 65cf121..0ac3aff 100644
--- a/src/utils/create-backend-project.js
+++ b/src/utils/create-backend-project.js
@@ -51,8 +51,9 @@ export async function createBackendProject(
   orm,
   installDependencies,
 ) {
-  const spinner = ora("Creating Project ...").start();
   try {
+    const spinner = ora("Creating Project ...").start();
+
     const destinationPath = path.join(
       process.cwd(),
       projectName ?? `project-starter-${framework}-template`,
diff --git a/src/utils/create-frontend-project.js b/src/utils/create-frontend-project.js
index 978c15c..4d31ec8 100644
--- a/src/utils/create-frontend-project.js
+++ b/src/utils/create-frontend-project.js
@@ -3,21 +3,6 @@ import path from "path";
 import ora from "ora";
 import { sendStat } from "./stat.js";
 
-/**
- * loader
- */
-let stages = [{ message: "Creating Project ...", duration: 2000 }];
-
-async function startSpinner() {
-  for (const stage of stages) {
-    const spinner = ora(stage.message).start();
-    await new Promise((resolve) => setTimeout(resolve, stage.duration));
-    spinner.succeed(stage.message.replace("...", " completed."));
-  }
-
-  stages = [{ message: "Creating Project ...", duration: 2000 }];
-}
-
 /**
  * function to create frontend projects
  * @param {string} framework - {reactjs, vuejs}
@@ -27,12 +12,15 @@ async function startSpinner() {
 
 export async function createFrontendProject(projectName, framework, language) {
   try {
+    const spinner = ora("Creating Project ...").start();
+
     const destinationPath = path.join(
       process.cwd(),
       projectName ?? `project-starter-${framework}-template`,
     );
 
     if (framework === "reactjs") {
+      spinner.start('Creating ReactJS project ...')
       //   copy files based on the language chosen
       switch (language) {
         case "javascript":
@@ -46,22 +34,20 @@ export async function createFrontendProject(projectName, framework, language) {
             getTemplateDir(`frontend/reactjs/react-typescript-temp`),
             destinationPath,
           );
-
+          break;
         default:
           break;
       }
       addGitignore(framework, destinationPath);
 
       // success message
-      stages.push({
-        message: `Frontend - ReactJS project with ${
+      spinner.succeed(
+        `Frontend - ReactJS project with ${
           language.charAt(0).toUpperCase() + language.slice(1)
         } created successfully! : ${destinationPath}`,
-        duration: 1000,
-      });
-
-      await startSpinner();
+      );
     } else if (framework === "vuejs") {
+      spinner.start('Creating VueJS project ...')
       switch (language) {
         case "javascript":
           copyFile(
@@ -74,28 +60,27 @@ export async function createFrontendProject(projectName, framework, language) {
             getTemplateDir(`frontend/vuejs/vuejs-typescript-temp`),
             destinationPath,
           );
-
+          break;
         default:
           break;
       }
       addGitignore(framework, destinationPath);
 
       // success message
-      stages.push({
-        message: `Frontend - VueJs project with ${
+      spinner.succeed(
+        `Frontend - VueJs project with ${
           language.charAt(0).toUpperCase() + language.slice(1)
         } created successfully! : ${destinationPath}`,
-      });
+      );
     } else if (framework === "html-x-css-x-javascript") {
+      spinner.start('Creating HTML, CSS, and JavaScript project ...')
+
       copyFile(getTemplateDir(`frontend/html-css-javascript`), destinationPath);
 
       // success message
-      stages.push({
-        message: `Frontend - plain html with css and javascript created successfully! : ${destinationPath}`,
-        duration: 1000,
-      });
-
-      await startSpinner();
+      spinner.succeed(
+        `Frontend - HTML, CSS, and JavaScript project created! : ${destinationPath}`,
+      );
     }
 
     // update stat